/* Tickets Live designer fidelity layer.
   Safe to place after ticketslive-admin.css. It does not change EF/data logic. */

:root {
    --tld-bg: oklch(0.985 0.002 248);
    --tld-surface: oklch(1 0 0);
    --tld-text: oklch(0.18 0.03 264);
    --tld-muted: oklch(0.50 0.02 260);
    --tld-border: oklch(0.92 0.008 250);
    --tld-input: oklch(0.93 0.008 250);
    --tld-blue: oklch(0.55 0.21 263);
    --tld-success: oklch(0.62 0.16 152);
    --tld-warning: oklch(0.78 0.15 75);
    --tld-danger: oklch(0.60 0.22 27);
}

/* The reference app uses Inter 400/500/600/700 and JetBrains Mono 400/500/600. */
.tl-shell {
    background:var(--tld-bg);
    color:var(--tld-text);
    font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-feature-settings:"cv02","cv03","cv04","cv11";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.tl-shell :where(h1,h2,h3,h4,h5,h6,p,span,a,button,input,select,textarea,label,table,th,td,.btn,.form-control,.form-select,.dropdown-menu,.modal-content,.rz-component) {
    font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tl-shell :where(input,select,textarea,button,.btn,.form-control,.form-select,.rz-component) { font-family:"Inter",ui-sans-serif,system-ui,sans-serif!important; }
.tl-font-mono, .tl-shell .font-monospace { font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important; font-variant-numeric:tabular-nums; }

/* Reference spacing: p-6, lg:p-8. */
.tl-content { max-width:none; padding:24px!important; }
@media (min-width:1024px) { .tl-content { padding:32px!important; } }

/* Shell type scale from the reference. */
.tl-nav-label { font-size:10px!important; font-weight:700!important; letter-spacing:.1em!important; }
.tl-nav-link { min-height:32px!important; padding:6px 12px!important; font-size:14px!important; font-weight:500!important; }
.tl-nav-link i { font-size:16px!important; }
.tl-profile-copy strong { font-size:12px!important; font-weight:600!important; }
.tl-profile-copy span { font-size:10px!important; }
.tl-searchbox input { font-size:14px!important; }
.tl-btn { font-size:12px!important; font-weight:600!important; }

/* Keep legacy pages visually consistent without changing their markup. */
.tl-shell .page-title-box { margin-bottom:24px!important; }
.tl-shell .page-title-box .page-title { font-size:20px!important; font-weight:600!important; letter-spacing:-.025em!important; }
.tl-shell .breadcrumb { display:none!important; }
.tl-shell .card { border:1px solid var(--tld-border)!important; border-radius:8px!important; box-shadow:none!important; }
.tl-shell .card-body { padding:16px; }
.tl-shell table.table { font-size:14px; }
.tl-shell .table>:not(caption)>*>* { padding:12px 14px; }
.tl-shell .table thead th, .tl-shell .table-primary th {
    padding-top:10px; padding-bottom:10px;
    background:color-mix(in oklab,var(--tld-bg) 75%,white)!important;
    color:var(--tld-muted)!important;
    font-size:10px!important; font-weight:700!important; letter-spacing:.1em!important; text-transform:uppercase;
}
.tl-shell .table tbody td { color:var(--tld-text); }
.tl-shell .table tbody tr:hover { background:color-mix(in oklab,var(--tld-bg) 72%,white); }
.tl-shell .form-control, .tl-shell .form-select { min-height:36px; font-size:14px!important; }
.tl-shell label { font-size:12px; font-weight:600; }

/* PageHeader from the designer app. */
.tl-page-header {
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:16px; margin:0 0 24px;
}
.tl-page-header-copy { min-width:0; }
.tl-page-header h2 {
    margin:0; color:var(--tld-text); font-size:20px!important; line-height:1.3;
    font-weight:600!important; letter-spacing:-.025em!important;
}
.tl-page-header p {
    max-width:672px; margin:4px 0 0; color:var(--tld-muted);
    font-size:14px; line-height:1.5; font-weight:400;
}

/* Dashboard switchers. */
.tl-dashboard-switchers { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tl-dashboard-switcher {
    height:36px; display:inline-flex; align-items:center; gap:8px; margin:0!important;
    padding:0 9px 0 11px; border:1px solid var(--tld-input); border-radius:6px;
    background:#fff; color:var(--tld-text); font-size:14px!important; font-weight:500!important;
    transition:background .15s,border-color .15s,box-shadow .15s;
}
.tl-dashboard-switcher:hover { background:#f6f7f8; }
.tl-dashboard-switcher:focus-within { border-color:#aeb8c8; box-shadow:0 0 0 3px rgba(73,96,220,.08); }
.tl-dashboard-switcher>i:first-child { color:var(--tld-muted); font-size:14px; }
.tl-dashboard-switcher>i:last-child { color:var(--tld-muted); font-size:15px; }
.tl-dashboard-switcher select {
    max-width:190px; height:34px; padding:0; border:0; outline:0; appearance:none;
    background:transparent; color:var(--tld-text); font-size:14px!important; font-weight:500; cursor:pointer;
}

/* KPI cards: grid-cols-1 sm:2 lg:4, p-5. */
.tl-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.tl-kpi-card { min-width:0; padding:20px; border:1px solid var(--tld-border); border-radius:8px; background:#fff; }
.tl-kpi-card>p { margin:0; color:var(--tld-muted); font-size:10px; line-height:1.25; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.tl-kpi-card>h3 { margin:6px 0 0; color:var(--tld-text); font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.025em; }
.tl-kpi-foot { display:flex; align-items:center; gap:6px; margin-top:12px; color:var(--tld-muted); font-size:11px; }
.tl-kpi-foot>span:last-child { margin-left:auto; text-align:right; }
.tl-kpi-signal { display:inline-flex; align-items:center; gap:4px; font-family:"JetBrains Mono",ui-monospace,monospace!important; font-weight:600; white-space:nowrap; }
.tl-kpi-signal i { font-family:"unicons-line"!important; font-size:13px; }
.tl-kpi-signal.success { color:var(--tld-success); }
.tl-kpi-signal.neutral { color:var(--tld-muted); }

/* Card/Section primitives matching the reference React components. */
.tl-designer-section { overflow:hidden; border:1px solid var(--tld-border); border-radius:8px; background:var(--tld-surface); }
.tl-designer-section-head {
    min-height:47px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 20px; border-bottom:1px solid var(--tld-border);
    background:color-mix(in oklab,var(--tld-bg) 68%,white);
}
.tl-designer-section-head h3, .tl-scan-card-body>h3 {
    margin:0; color:var(--tld-muted); font-size:12px; line-height:1.25;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.tl-designer-section-head p { margin:2px 0 0; color:var(--tld-muted); font-size:11px; line-height:1.35; }
.tl-section-count { color:var(--tld-muted); font:400 11px/1.3 "JetBrains Mono",ui-monospace,monospace!important; white-space:nowrap; }

.tl-designer-table-wrap { width:100%; overflow:auto; }
.tl-designer-table { width:100%; margin:0; border-collapse:collapse; color:var(--tld-text); font-size:14px; text-align:left; }
.tl-designer-table th {
    padding:10px 20px; background:color-mix(in oklab,var(--tld-bg) 72%,white); color:var(--tld-muted);
    font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.tl-designer-table td { padding:11px 20px; border-top:1px solid var(--tld-border); vertical-align:middle; }
.tl-designer-table tbody tr { transition:background .12s; }
.tl-designer-table tbody tr:hover { background:color-mix(in oklab,var(--tld-bg) 72%,white); }
.tl-table-primary { display:block; font-weight:500; line-height:1.25; }
.tl-table-secondary { display:block; margin-top:2px; color:var(--tld-muted); font-size:11px; line-height:1.25; }
.tl-table-secondary-single, .tl-table-date { color:var(--tld-muted); font-size:12px; }
.tl-muted-inline { display:inline-flex; align-items:center; gap:6px; color:var(--tld-muted); font-size:12px; }
.tl-muted-inline i { font-size:13px; }
.tl-empty-table-cell { padding:32px 20px!important; color:var(--tld-muted)!important; font-size:12px!important; text-align:center!important; }

/* Dashboard main 2/3 + 1/3. */
.tl-dashboard-main-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:24px; margin-bottom:24px; }
.tl-dashboard-table-scroll { max-height:288px; overflow-y:auto; }
.tl-fill-cell { width:108px; display:flex; align-items:center; gap:8px; }
.tl-fill-cell>.tl-font-mono { width:30px; color:var(--tld-muted); font-size:10px; }
.tl-progress { height:6px; flex:1; overflow:hidden; border-radius:999px; background:#eef0f3; }
.tl-progress>span { display:block; height:100%; }
.tl-progress>span.primary { background:var(--tld-blue); }
.tl-progress>span.success { background:var(--tld-success); }
.tl-progress>span.warning { background:var(--tld-warning); }
.tl-days-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:10px; line-height:1.2; font-weight:700; white-space:nowrap; }
.tl-days-pill.success { border:1px solid color-mix(in oklab,var(--tld-success) 30%,transparent); background:color-mix(in oklab,var(--tld-success) 14%,white); color:var(--tld-success); }
.tl-days-pill.warning { border:1px solid color-mix(in oklab,var(--tld-warning) 30%,transparent); background:color-mix(in oklab,var(--tld-warning) 14%,white); color:#76540f; }
.tl-days-pill.primary { border:1px solid color-mix(in oklab,var(--tld-blue) 20%,transparent); background:color-mix(in oklab,var(--tld-blue) 9%,white); color:var(--tld-blue); }
.tl-days-pill.neutral { background:#f1f2f4; color:var(--tld-muted); font-family:"JetBrains Mono",ui-monospace,monospace!important; }

/* Scan Breakdown card. */
.tl-scan-section { min-height:100%; }
.tl-scan-card-body { padding:24px; }
.tl-scan-card-body>h3 { margin-bottom:24px; color:var(--tld-text); font-size:14px; }
.tl-scan-list { display:grid; gap:18px; }
.tl-scan-row-label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; color:var(--tld-muted); font-size:12px; }
.tl-scan-row-label strong { color:var(--tld-text); font-size:12px; font-weight:600; }
.tl-scan-progress { height:6px; overflow:hidden; border-radius:999px; background:#eef0f3; }
.tl-scan-progress>span { display:block; height:100%; background:var(--tld-blue); }
.tl-scan-row:nth-child(2) .tl-scan-progress>span { background:var(--tld-success); }
.tl-scan-row:nth-child(3) .tl-scan-progress>span { background:var(--tld-warning); }
.tl-scan-row:nth-child(4) .tl-scan-progress>span { background:#3f8ca2; }
.tl-scan-empty { padding:34px 8px; color:var(--tld-muted); font-size:12px; text-align:center; }
.tl-scan-heartbeat { display:flex; align-items:center; gap:7px; margin-top:24px; padding-top:18px; border-top:1px solid var(--tld-border); color:var(--tld-muted); font-size:11px; }
.tl-scan-heartbeat i { color:var(--tld-success); font-size:15px; }

/* Status pills. */
.tl-status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:999px; font-size:10px; line-height:1; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.tl-status-pill>span { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.72; }
.tl-status-pill.success { background:color-mix(in oklab,var(--tld-success) 12%,white); color:var(--tld-success); }
.tl-status-pill.warning { border:1px solid color-mix(in oklab,var(--tld-warning) 28%,transparent); background:color-mix(in oklab,var(--tld-warning) 14%,white); color:#76540f; }
.tl-status-pill.danger { background:color-mix(in oklab,var(--tld-danger) 10%,white); color:var(--tld-danger); }
.tl-status-pill.neutral { background:#f1f2f4; color:var(--tld-muted); }

.tl-dashboard-loading { min-height:300px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--tld-muted); font-size:13px; }
.tl-dashboard-loading-dot { width:7px; height:7px; border-radius:50%; background:#4A7660; animation:tldPulse 1.2s ease-in-out infinite; }
@keyframes tldPulse { 0%,100% { opacity:.35; transform:scale(.85); } 50% { opacity:1; transform:scale(1); } }
@keyframes tldEntrance { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.tl-shell .animate-entrance { animation:tldEntrance 400ms cubic-bezier(.16,1,.3,1) both; }

@media (max-width:1100px) {
    .tl-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tl-dashboard-main-grid { grid-template-columns:1fr; }
}
@media (max-width:767.98px) {
    .tl-page-header { align-items:flex-start; flex-direction:column; }
    .tl-dashboard-switchers { width:100%; }
    .tl-dashboard-switcher { flex:1; min-width:0; }
    .tl-dashboard-switcher select { flex:1; min-width:0; max-width:none; }
    .tl-designer-table th, .tl-designer-table td { padding-left:14px; padding-right:14px; }
}
@media (max-width:560px) {
    .tl-kpi-grid { grid-template-columns:1fr; }
    .tl-kpi-card { padding:18px; }
}