:root { --navy:#1E3A5F; --navy-dark:#162d47; --blue:#2d5a8f; --orange:#F59E0B; --canvas:#F8FAFC; }
body { background:var(--canvas); color:#1e293b; }
.login-shell { min-height:100vh; background:linear-gradient(135deg,var(--navy),var(--blue)); }
.login-card { border:0; border-radius:16px; box-shadow:0 1rem 3rem rgba(15,31,51,.22); }
.brand-mark { width:64px; height:64px; display:grid; place-items:center; border-radius:16px; background:var(--orange); color:var(--navy-dark); font-size:2rem; }
.btn-ksg { background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-ksg:hover { background:var(--navy-dark); border-color:var(--navy-dark); color:#fff; }
.accent { color:var(--orange); }
.sidebar { position:fixed; inset:0 auto 0 0; width:280px; background:linear-gradient(180deg,#1E3A5F 0%,#2d5a8f 100%); color:#fff; display:flex; flex-direction:column; z-index:10; }
.sidebar-header { height:88px; padding:0 24px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.18); }
.sidebar-header a { color:#fff; text-decoration:none; font-weight:700; font-size:1.08rem; display:flex; align-items:center; gap:10px; }
.sidebar-header a > i { color:#fff; font-size:1.45rem; }
.sidebar-collapse-btn { margin-left:auto; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:rgba(255,255,255,.22); color:#e2e8f0; display:grid; place-items:center; font-size:1.2rem; line-height:1; }
.sidebar-collapse-btn i { color:#fff; }
.sidebar-nav { padding:1.15rem 4px; flex:1; }
.nav-link { color:rgba(255,255,255,.86); border-radius:9px; padding:14px 28px; margin-bottom:2px; display:flex; align-items:center; gap:16px; text-decoration:none; border:0; background:transparent; width:100%; text-align:left; font-size:1rem; }
.nav-link i { width:18px; text-align:center; font-size:1.05rem; }
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(130,160,195,.48); }
.nav-link.active { border-left:3px solid #fff; padding-left:25px; }
.sidebar-footer { padding:13px 4px 16px; border-top:1px solid rgba(255,255,255,.18); }
.sidebar-footer .small { padding:0 28px!important; color:#b9c9dd!important; margin:0 0 8px!important; }
.main-wrapper { margin-left:280px; min-height:100vh; }
.top-header { height:70px; background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; padding:0 2rem; }
.page-title { color:var(--navy); font-size:1.1rem; font-weight:700; }
.main-content { padding:2rem; }
.hero { border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 .25rem 1rem rgba(30,58,95,.08); border-top:4px solid var(--orange); }
.text-secondary { color:#64748b!important; }
.dashboard-metric { border:1px solid #e2e8f0; border-top:4px solid var(--orange); box-shadow:0 .25rem 1rem rgba(30,58,95,.08); }
.metric-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:.75rem; border-radius:12px; background:rgba(30,58,95,.08); font-size:1.25rem; }
.complaint-status-card { color:inherit; border-top:3px solid var(--orange)!important; transition:transform .15s ease, box-shadow .15s ease; }
.complaint-status-card:hover, .complaint-status-card.selected { transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(30,58,95,.15)!important; outline:2px solid rgba(245,158,11,.45); }
.table-dashboard { width:100%; border-collapse:separate; border-spacing:0 10px; margin-bottom:0; }
.table-dashboard thead th { background:transparent; color:var(--navy); font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:1px; border:none; border-bottom:2px solid var(--orange); padding:12px 20px; white-space:nowrap; }
.table-dashboard tbody tr { background:#fff; box-shadow:0 2px 10px rgba(30,58,95,.05); transition:all .2s ease; border-left:4px solid var(--orange); }
.table-dashboard tbody tr:hover { transform:translateY(-3px); box-shadow:0 5px 15px rgba(30,58,95,.15); }
.table-dashboard td { padding:16px 20px; vertical-align:middle; border:none; font-size:.875rem; line-height:1.5; color:#1e293b; }
.table-dashboard td:first-child { border-radius:12px 0 0 12px; font-weight:600; }
.table-dashboard td:last-child { border-radius:0 12px 12px 0; }
.table-dashboard td .badge { font-size:.75rem; padding:.35em .65em; }
.table thead.table-dark th { background:#1E3A5F; color:#fff; border-color:rgba(255,255,255,.12); border-bottom:3px solid #F59E0B; font-weight:700; }
.table tbody td { color:#1e293b; vertical-align:middle; border-color:rgba(30,58,95,.15); }
.table-hover tbody tr:hover { --bs-table-hover-bg:rgba(30,58,95,.05); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg:rgba(30,58,95,.025); }
#signatureCanvas { touch-action:none; cursor:crosshair; background:#fff; }
.detail-row { cursor:pointer; }
.detail-row:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.detail-field { padding:.75rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; min-height:60px; }
.detail-field > span, .detail-field > p { color:#1e293b; }
.customer-service-heading h1 { color:var(--navy); font-weight:700; }
.chart-card, .status-tabs-card { border:1px solid #e2e8f0; box-shadow:0 .25rem 1rem rgba(30,58,95,.07); }
.chart-card .card-header { background:#fff; border-bottom:1px solid #edf1f5; padding:1rem 1.15rem; }
.chart-card .card-header h5 { font-size:1rem; color:#1e293b; }
.status-tabs-card { overflow:hidden; }
.status-tabs-card .row { margin:0; }
.status-tabs-card [class*="col-"] { padding:0; }
.status-tab { min-height:70px; border:0; border-bottom:3px solid transparent; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; gap:14px; font-size:.9rem; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.status-tab i { color:#0d6efd; }
.status-tab strong { font-size:1rem; color:#1e293b; }
.status-tab:hover, .status-tab.selected { background:#fffaf3; border-bottom-color:var(--orange); color:#d97706; }
.status-tab.selected i { color:var(--orange); }
.trend-chart { min-height:185px; display:flex; flex-direction:column; align-items:stretch; justify-content:end; }
.bar-chart { width:100%; height:180px; display:flex; align-items:end; justify-content:space-around; gap:12px; padding:8px 5px 0; background:repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #edf2f7 36px); }
.bar-column { height:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:6px; color:#64748b; font-size:.72rem; }
.bar-value { color:#1e293b; font-weight:600; min-height:16px; }
.bar-track { height:115px; width:min(58px, 70%); display:flex; align-items:end; }
.bar-fill { width:100%; min-height:2px; background:#72bdf0; border-radius:4px 4px 0 0; box-shadow:0 2px 5px rgba(72,163,224,.2); }
.bar-column:last-child .bar-fill { background:var(--orange); }
.rating-chart { height:155px; display:flex; gap:8px; }
.rating-grid { width:18px; display:flex; flex-direction:column; justify-content:space-between; align-items:end; color:#64748b; font-size:.7rem; padding:3px 0 12px; }
.rating-chart svg { flex:1; height:140px; overflow:visible; background:repeating-linear-gradient(to bottom, transparent 0, transparent 26px, #edf2f7 27px); }
.chart-label { font-size:8px; fill:#334155; font-weight:600; }
.chart-months { display:grid; width:100%; flex:0 0 100%; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px; margin-left:26px; color:#64748b; font-size:.68rem; text-align:center; box-sizing:border-box; }
.chart-months small { white-space:nowrap; }
@media (max-width:767.98px) { .status-tab { min-height:62px; } .status-tab i { font-size:1rem!important; } .status-tab { gap:8px; } .chart-card .card-header h5 { font-size:.9rem; } }
@media (max-width:767.98px) { .sidebar { width:280px; transform:translateX(-100%); } .main-wrapper { margin-left:0; } .top-header,.main-content { padding-left:1rem; padding-right:1rem; } }