/* tickets.css - ticket panels - split from index.html */

        /* Ticket panels */
        .ticket-panel-card {
            background: var(--bg3); border: 1px solid var(--card-border);
            border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;
        }
        .ticket-panel-card-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px;
        }
        .ticket-panel-card-title { font-size: 15px; font-weight: 700; }
        .ticket-panel-card-id { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
        .panel-action-btn {
            background: transparent; border: 1px solid var(--card-border);
            color: var(--muted); border-radius: 7px; padding: 5px 12px;
            font-size: 12px; cursor: pointer; transition: all var(--transition);
            font-family: 'Syne', sans-serif;
        }
        .panel-action-btn:hover { border-color: var(--red-border); color: white; }
        .panel-action-btn.danger:hover { border-color: rgba(255,50,50,0.4); color: #ff6b6b; background: rgba(255,50,50,0.08); }
        .add-panel-btn {
            display: flex; align-items: center; gap: 8px; justify-content: center;
            background: transparent; border: 1.5px dashed rgba(122,0,0,0.35);
            color: var(--muted); border-radius: 12px; padding: 14px;
            font-size: 14px; font-weight: 600; cursor: pointer;
            transition: all var(--transition); font-family: 'Syne', sans-serif;
            width: 100%;
        }
        .add-panel-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
        .send-panel-btn {
            display: flex; align-items: center; gap: 7px;
            background: rgba(0,200,120,0.15); border: 1px solid rgba(0,200,120,0.25);
            color: #00dd88; border-radius: 7px; padding: 5px 12px;
            font-size: 12px; cursor: pointer; transition: all var(--transition);
            font-family: 'Syne', sans-serif;
        }
        .send-panel-btn:hover { background: rgba(0,200,120,0.25); }
        .btn-tag {
            display: inline-flex; align-items: center; gap: 5px;
            background: rgba(0,0,0,0.4); border: 1px solid var(--card-border);
            border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #ccc;
        }
        /* Ticket style buttons */
        [id^="tk-style-"].active { border-color: var(--red) !important; background: rgba(122,0,0,0.28) !important; color: white !important; box-shadow: 0 0 12px rgba(122,0,0,0.35); }
        [id^="tk-style-"]:hover { border-color: rgba(122,0,0,0.5) !important; color: #ccc !important; }

        /* Ticket panel card (tpanel classes) */
        .ticket-panel-card { background:var(--bg3); border:1px solid var(--card-border); border-radius:12px; padding:16px; margin-bottom:10px; }
        .ticket-panel-card:hover { border-color:var(--red-border); }
        .tpanel-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
        .tpanel-color-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
        .tpanel-title { font-size:15px; font-weight:700; color:white; font-family:'Rajdhani',sans-serif; }
        .tpanel-btns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
        .tpanel-btn-tag { background:var(--red-dim); border:1px solid var(--red-border); border-radius:6px; padding:4px 10px; font-size:12px; color:#bbb; }
        .tpanel-actions { display:flex; gap:7px; }
        .tpanel-act-btn { background:var(--bg2); border:1px solid var(--card-border); color:var(--muted); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:12px; transition:var(--transition); display:flex; align-items:center; gap:5px; font-family:'Syne',sans-serif; }
        .tpanel-act-btn:hover { border-color:var(--red-border); color:white; }
        .tpanel-act-btn.danger:hover { background:var(--red-dim); border-color:var(--red); color:#ff6b6b; }