.complaints-screen{ padding-bottom:48px; }
.complaints-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.complaints-hero-sub{ margin:7px 0 0; color:var(--text-dim); font-size:13px; }
.complaint-kpi-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.complaint-kpi{ min-height:126px; padding:17px 16px; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 7px 20px rgba(15,23,42,.045); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.complaint-kpi:hover,.complaint-kpi.active{ transform:translateY(-2px); border-color:var(--brand); box-shadow:0 12px 26px rgba(15,23,42,.08); }
.complaint-kpi span{ display:block; color:var(--text-dim); font-size:11px; font-weight:800; letter-spacing:.75px; text-transform:uppercase; }
.complaint-kpi strong{ display:block; margin:9px 0 6px; color:var(--text-bright); font-family:var(--font-display); font-size:32px; line-height:1; }
.complaint-kpi small{ color:var(--text-faint); font-size:11px; }
.complaint-kpi-danger strong{ color:var(--red); }
.complaint-kpi-warn strong{ color:var(--amber); }
.complaint-kpi-success strong{ color:var(--green); }
.complaint-branch-panel{ margin-bottom:18px; padding:18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.complaint-section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.complaint-section-head h3{ margin:3px 0 0; color:var(--text-bright); font-size:16px; }
.complaint-live-label{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); font-size:11px; font-weight:700; }
.complaint-live-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--text-faint); }
.complaint-live-label.online::before{ background:var(--green); box-shadow:0 0 0 3px var(--green-dim); }
.complaint-branch-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.complaint-branch-card{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:end; padding:13px 14px; text-align:left; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel-raised); }
.complaint-branch-card:hover,.complaint-branch-card.active{ border-color:var(--brand); background:var(--brand-dim); }
.complaint-branch-card span{ color:var(--text-bright); font-weight:800; font-size:13px; }
.complaint-branch-card strong{ grid-row:1/3; grid-column:2; color:var(--text-bright); font-size:25px; }
.complaint-branch-card small{ color:var(--text-dim); font-size:10px; }
.complaint-toolbar{ display:grid; grid-template-columns:minmax(230px,1.8fr) repeat(4,minmax(130px,1fr)) auto; align-items:end; gap:10px; margin-bottom:14px; padding:14px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); }
.complaint-toolbar label,.complaint-form label{ display:flex; flex-direction:column; gap:6px; color:var(--text-dim); font-size:11px; font-weight:700; }
.complaint-toolbar input,.complaint-toolbar select,.complaint-form input,.complaint-form select,.complaint-form textarea{ width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-raised); color:var(--text-bright); font-size:13px; outline:none; }
.complaint-form textarea{ resize:vertical; }
.complaint-toolbar input:focus,.complaint-toolbar select:focus,.complaint-form input:focus,.complaint-form select:focus,.complaint-form textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(216,30,38,.1); }
.complaint-clear-filters{ height:40px; }
.complaint-table-shell{ overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.complaint-table{ width:100%; min-width:1350px; border-collapse:collapse; }
.complaint-table th{ position:sticky; top:0; z-index:1; padding:12px 13px; text-align:left; border-bottom:1px solid var(--border); background:var(--panel-raised); color:var(--text-dim); font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.complaint-table td{ max-width:230px; padding:13px; vertical-align:top; border-bottom:1px solid var(--border-soft); color:var(--text); font-size:12px; }
.complaint-table tr:last-child td{ border-bottom:0; }
.complaint-table tr:hover td{ background:rgba(148,163,184,.055); }
.complaint-table td strong,.complaint-table td span,.complaint-table td small{ display:block; }
.complaint-table td small{ margin-top:4px; color:var(--text-dim); line-height:1.4; }
.complaint-case-number{ color:var(--brand); font-family:var(--font-mono); font-size:11px; }
.complaint-badge{ display:inline-flex!important; width:max-content; margin:0 0 4px; padding:4px 7px; border-radius:999px; background:var(--panel-raised); border:1px solid var(--border); color:var(--text); font-size:10px; font-weight:800; line-height:1; }
.complaint-priority-critical,.complaint-sla-overdue,.complaint-status-escalated{ background:var(--red-dim); border-color:#FCA5A5; color:var(--red); }
.complaint-priority-high,.complaint-sla-at-risk{ background:var(--amber-dim); border-color:#FCD34D; color:var(--amber-text); }
.complaint-priority-medium,.complaint-status-new,.complaint-status-acknowledged{ background:#E0F2FE; border-color:#7DD3FC; color:#075985; }
.complaint-priority-low,.complaint-sla-completed,.complaint-status-resolved,.complaint-status-closed{ background:var(--green-dim); border-color:#86EFAC; color:var(--green); }
.complaint-status-investigating,.complaint-status-awaiting-customer,.complaint-status-awaiting-parts{ background:#EDE9FE; border-color:#C4B5FD; color:#6D28D9; }
.complaint-row-action{ padding:7px 11px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-raised); color:var(--text-bright); font-size:11px; font-weight:800; }
.complaint-row-action:hover{ border-color:var(--brand); color:var(--brand); }
.complaint-drawer{ width:min(720px,96vw); }
.complaint-form{ display:flex; flex-direction:column; gap:22px; }
.complaint-form-section{ display:flex; flex-direction:column; gap:13px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
.complaint-form-section:last-child{ border-bottom:0; }
.complaint-form-section h4,.complaint-history-wrap h4{ margin:0; color:var(--text-bright); font-size:13px; }
.complaint-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.complaint-case-label{ color:var(--text-dim); font-family:var(--font-mono); font-size:10px; }
.complaint-history-wrap{ padding:16px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel-raised); }
.complaint-history{ display:flex; flex-direction:column; gap:0; margin-top:12px; }
.complaint-history-item{ display:grid; grid-template-columns:14px 1fr; gap:9px; padding-bottom:13px; }
.complaint-history-item>span{ position:relative; width:9px; height:9px; margin-top:3px; border-radius:50%; background:var(--brand); }
.complaint-history-item>span::after{ content:""; position:absolute; top:9px; left:4px; width:1px; height:calc(100% + 7px); background:var(--border); }
.complaint-history-item:last-child>span::after{ display:none; }
.complaint-history-item strong,.complaint-history-item small{ display:block; }
.complaint-history-item small{ margin-top:3px; color:var(--text-dim); font-size:10px; }
.complaint-history-item p{ margin:5px 0 0; color:var(--text); font-size:11px; }
html.theme-dark .complaint-kpi,html.theme-dark .complaint-branch-panel,html.theme-dark .complaint-toolbar,html.theme-dark .complaint-table-shell{ box-shadow:none; }
html.theme-dark .complaint-toolbar input,html.theme-dark .complaint-toolbar select,html.theme-dark .complaint-form input,html.theme-dark .complaint-form select,html.theme-dark .complaint-form textarea{ color-scheme:dark; }
@media(max-width:1180px){ .complaint-kpi-grid{ grid-template-columns:repeat(3,1fr); } .complaint-toolbar{ grid-template-columns:repeat(3,1fr); } .complaint-search-wrap{ grid-column:span 2; } }
@media(max-width:760px){ .complaints-hero{ flex-direction:column; } .complaint-kpi-grid{ grid-template-columns:repeat(2,1fr); } .complaint-branch-grid{ grid-template-columns:1fr 1fr; } .complaint-toolbar{ grid-template-columns:1fr 1fr; } .complaint-search-wrap{ grid-column:1/-1; } .complaint-form-grid{ grid-template-columns:1fr; } }
@media(max-width:480px){ .complaint-kpi-grid,.complaint-branch-grid,.complaint-toolbar{ grid-template-columns:1fr; } .complaint-search-wrap{ grid-column:auto; } }