/* ==========================================================================
   Call Taxi – Admin Suite · Dark dashboard theme (reference match)
   ========================================================================== */

:root {
    --cc-accent: #f6b100;          /* taxi yellow */
    --cc-accent-2: #ffcf33;
    --cc-accent-rgb: 246, 177, 0;
    --cc-blue: #3b82f6;
    --cc-green: #22c55e;
    --cc-purple: #8b5cf6;
    --cc-pink: #ec4899;
    --cc-orange: #f97316;
    --cc-red: #ef4444;
    --cc-cyan: #06b6d4;

    --cc-bg: #0a0e19;
    --cc-sidebar-bg: #0d1220;
    --cc-card-bg: #141b2b;
    --cc-card-bg-2: #1a2236;
    --cc-border: #232c42;
    --cc-text: #e7ebf3;
    --cc-muted: #8a93a8;
    --cc-muted-2: #667085;

    --cc-card-radius: 0.85rem;
    --cc-sidebar-width: 250px;
    --cc-topbar-height: 68px;
    --cc-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

* { scrollbar-width: thin; scrollbar-color: #2a3450 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2a3450; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #38446a; }

body {
    background: var(--cc-bg);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cc-text);
    font-size: .875rem;
}
a { text-decoration: none; }
.text-muted { color: var(--cc-muted) !important; }
hr { border-color: var(--cc-border); }

/* ---------- Layout shell ---------- */
.cc-layout { display: flex; min-height: 100vh; }
.cc-sidebar {
    width: var(--cc-sidebar-width);
    background: var(--cc-sidebar-bg);
    border-right: 1px solid var(--cc-border);
    position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column;
    z-index: 1040; transition: transform .25s ease;
}
.cc-main { margin-left: var(--cc-sidebar-width); flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; transition: margin .25s ease; }
.cc-content { padding: 1.4rem; flex: 1 1 auto; }

/* ---------- Sidebar ---------- */
.cc-brand {
    height: var(--cc-topbar-height);
    display: flex; align-items: center; gap: .7rem;
    padding: 0 1.1rem; flex: 0 0 auto;
    border-bottom: 1px solid var(--cc-border);
}
.cc-brand .cc-brand-badge {
    width: 42px; height: 42px; border-radius: 11px;
    background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2));
    color: #14181f; display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 6px 16px rgba(var(--cc-accent-rgb), .35); flex: 0 0 auto;
}
.cc-brand .cc-brand-txt b { color: #fff; font-weight: 700; font-size: 1.1rem; line-height: 1.1; display: block; }
.cc-brand .cc-brand-txt small { color: var(--cc-accent); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; }

.cc-nav { padding: .6rem .6rem 1rem; overflow-y: auto; flex: 1 1 auto; }
.cc-nav-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .68rem .8rem; border-radius: .55rem;
    color: var(--cc-muted); font-weight: 500; margin-bottom: 2px;
    transition: all .15s ease;
}
.cc-nav-link i.cc-nav-ico { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.cc-nav-link .cc-chev { margin-left: auto; font-size: .7rem; opacity: .6; }
.cc-nav-link:hover { background: rgba(255,255,255,.04); color: var(--cc-text); }
.cc-nav-link.active {
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
    color: #14181f; font-weight: 600;
    box-shadow: 0 6px 16px rgba(var(--cc-accent-rgb), .3);
}
.cc-nav-link.active .cc-chev { opacity: .8; }
.cc-nav-link .cc-badge {
    margin-left: auto; font-size: .62rem; font-weight: 700;
    padding: .1rem .4rem; border-radius: 999px;
    background: var(--cc-accent); color: #14181f;
}
.cc-nav-link.active .cc-badge { background: #14181f; color: var(--cc-accent); }

/* Collapsible groups */
.cc-nav-link.cc-parent { cursor: pointer; }
.cc-nav-link .cc-chev { transition: transform .2s ease; }
.cc-nav-link[aria-expanded="true"] .cc-chev { transform: rotate(180deg); }
.cc-nav-link.parent-active { color: var(--cc-text); background: rgba(255,255,255,.03); }
.cc-nav-link.parent-active i.cc-nav-ico { color: var(--cc-accent); }

.cc-subnav { margin: 1px 0 5px; padding-left: 2.5rem; position: relative; }
.cc-subnav::before { content: ""; position: absolute; left: 1.55rem; top: 2px; bottom: 6px; width: 1px; background: var(--cc-border); }
.cc-sublink {
    display: flex; align-items: center; gap: .55rem;
    padding: .38rem .6rem; border-radius: .45rem;
    color: var(--cc-muted); font-size: .82rem; position: relative; margin-bottom: 1px;
}
.cc-sublink::before {
    content: ""; position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: transparent; border: 1px solid var(--cc-muted-2);
}
.cc-sublink:hover { color: var(--cc-text); background: rgba(255,255,255,.04); }
.cc-sublink.active { color: var(--cc-accent); font-weight: 600; }
.cc-sublink.active::before { background: var(--cc-accent); border-color: var(--cc-accent); box-shadow: 0 0 6px rgba(var(--cc-accent-rgb), .6); }
.cc-sublink .cc-badge { margin-left: auto; }

.cc-help {
    margin: .6rem; padding: 1rem; border-radius: .7rem;
    background: linear-gradient(160deg, #182036, #141b2b);
    border: 1px solid var(--cc-border); flex: 0 0 auto;
}
.cc-help .cc-help-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--cc-accent-rgb), .15); color: var(--cc-accent); display: grid; place-items: center; font-size: 1.2rem; }

/* ---------- Topbar ---------- */
.cc-topbar {
    height: var(--cc-topbar-height); background: var(--cc-sidebar-bg);
    border-bottom: 1px solid var(--cc-border);
    display: flex; align-items: center; gap: .8rem; padding: 0 1.4rem;
    position: sticky; top: 0; z-index: 1020;
}
.cc-topbar .cc-page-h { font-weight: 700; font-size: 1.15rem; color: #fff; }
.cc-pill-select {
    background: var(--cc-card-bg); border: 1px solid var(--cc-border);
    color: var(--cc-text); border-radius: .55rem; padding: .5rem .85rem;
    display: flex; align-items: center; gap: .5rem; font-size: .82rem; cursor: pointer;
}
.cc-pill-select i.text-accent { color: var(--cc-accent); }
.cc-icon-btn {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    color: var(--cc-muted); background: var(--cc-card-bg); border: 1px solid var(--cc-border);
    position: relative; transition: .15s;
}
.cc-icon-btn:hover { color: var(--cc-accent); border-color: var(--cc-accent); }
.cc-icon-btn .cc-count {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--cc-red); color: #fff; font-size: .62rem; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--cc-sidebar-bg);
}
.cc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cc-border); }
.cc-hamburger { display: none; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--cc-border); border-radius: var(--cc-card-radius); background: var(--cc-card-bg); color: var(--cc-text); }
.card .card-header {
    background: transparent; border-bottom: 1px solid var(--cc-border);
    font-weight: 600; color: #fff; padding: 1rem 1.15rem;
    display: flex; align-items: center; justify-content: space-between;
}
.card .card-body { padding: 1.15rem; }

/* Hero / welcome card */
.cc-hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--cc-border); border-radius: var(--cc-card-radius);
    background:
        radial-gradient(circle at 88% 20%, rgba(var(--cc-accent-rgb), .18), transparent 42%),
        radial-gradient(circle at 8% 120%, rgba(59,130,246,.14), transparent 45%),
        linear-gradient(120deg, #1a2238 0%, #141b2b 70%);
    padding: 1.35rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cc-hero::after {
    content: "\F546"; font-family: "bootstrap-icons"; /* taxi-front-fill */
    position: absolute; right: 200px; bottom: -18px; font-size: 7rem; line-height: 1;
    color: rgba(var(--cc-accent-rgb), .07); pointer-events: none;
}
.cc-hero .cc-hero-hi { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0; }
.cc-hero .cc-hero-hi .cc-wave { color: var(--cc-accent); }
.cc-hero .cc-hero-sub { color: var(--cc-muted); font-size: .85rem; margin-top: .2rem; }
.cc-hero-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; position: relative; z-index: 1; }
.cc-hero-tools .cc-pill-select { background: rgba(10,14,25,.55); }
@media (max-width: 575.98px) { .cc-hero::after { display: none; } .cc-hero-tools { width: 100%; } }

/* Stat cards */
.cc-stat .cc-stat-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 1.45rem; color: #fff; flex: 0 0 auto; }
.cc-stat h3 { font-weight: 700; font-size: 1.4rem; margin: .1rem 0; color: #fff; white-space: nowrap; letter-spacing: -.5px; }
@media (min-width: 1200px) and (max-width: 1500px) { .cc-stat h3 { font-size: 1.2rem; } }
.cc-stat .cc-stat-label { color: var(--cc-muted); font-size: .8rem; font-weight: 500; }
.cc-trend { font-size: .76rem; font-weight: 600; }
.cc-trend.up { color: var(--cc-green); }
.cc-trend.down { color: var(--cc-red); }
.cc-trend .cc-trend-note { color: var(--cc-muted-2); font-weight: 400; }

.ic-yellow { background: linear-gradient(135deg,#f6b100,#ffcf33); color:#14181f; }
.ic-green  { background: linear-gradient(135deg,#16a34a,#22c55e); }
.ic-blue   { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.ic-purple { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.ic-pink   { background: linear-gradient(135deg,#db2777,#ec4899); }
.ic-orange { background: linear-gradient(135deg,#ea580c,#f97316); }
.ic-cyan   { background: linear-gradient(135deg,#0891b2,#06b6d4); }

/* soft tones (used on inner pages) */
.soft-primary { background: rgba(var(--cc-accent-rgb), .15); color: var(--cc-accent); }
.soft-accent  { background: rgba(var(--cc-accent-rgb), .15); color: var(--cc-accent); }
.soft-success { background: rgba(34,197,94,.15);  color: var(--cc-green); }
.soft-info    { background: rgba(59,130,246,.15); color: var(--cc-blue); }
.soft-warning { background: rgba(246,177,0,.15);  color: var(--cc-accent); }
.soft-danger  { background: rgba(239,68,68,.15);  color: var(--cc-red); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--cc-text); margin: 0; color: var(--cc-text); }
.table > :not(caption) > * > * { padding: .8rem 1rem; vertical-align: middle; background: transparent; color: var(--cc-text); }
.table thead th { text-transform: uppercase; font-size: .68rem; letter-spacing: .5px; color: var(--cc-muted); font-weight: 600; border-bottom: 1px solid var(--cc-border); }
.table tbody tr { border-bottom: 1px solid var(--cc-border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover > * { background: rgba(255,255,255,.02); }
.table td, .table th { border-top: 0; }

.cc-usercell { display: flex; align-items: center; gap: .7rem; }
.cc-usercell img, .cc-usercell .cc-mini-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cc-mini-avatar { display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: rgba(var(--cc-accent-rgb), .15); color: var(--cc-accent); }
.cc-usercell small { color: var(--cc-muted); }

/* ---------- Badges / pills ---------- */
.cc-pill { font-size: .72rem; font-weight: 600; padding: .28rem .7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.cc-pill.online, .cc-pill.completed, .cc-pill.active, .cc-pill.approved, .cc-pill.resolved, .cc-pill.paid { color: var(--cc-green); background: rgba(34,197,94,.14); }
.cc-pill.pending, .cc-pill.enroute, .cc-pill.processing, .cc-pill.open, .cc-pill.assigned { color: var(--cc-accent); background: rgba(246,177,0,.16); }
.cc-pill.offline, .cc-pill.cancelled, .cc-pill.rejected, .cc-pill.closed, .cc-pill.maintenance, .cc-pill.suspended { color: var(--cc-red); background: rgba(239,68,68,.14); }
.cc-pill.busy, .cc-pill.ongoing, .cc-pill.onride, .cc-pill.new { color: var(--cc-blue); background: rgba(59,130,246,.14); }
.cc-pill.idle { color: var(--cc-muted); background: rgba(138,147,168,.15); }

.cc-priority { font-size: .72rem; font-weight: 600; }
.cc-priority.high { color: var(--cc-red); }
.cc-priority.critical { color: #fff; background: var(--cc-red); padding: .12rem .5rem; border-radius: 999px; }
.cc-priority.medium { color: var(--cc-accent); }
.cc-priority.low { color: var(--cc-green); }

/* Agent status dot */
.cc-agent-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cc-agent-dot.online { background: var(--cc-green); box-shadow: 0 0 6px var(--cc-green); }
.cc-agent-dot.busy { background: var(--cc-red); }
.cc-agent-dot.idle { background: var(--cc-accent); }
.cc-agent-dot.break { background: var(--cc-purple); }
.cc-agent-dot.offline { background: var(--cc-muted-2); }

/* Page header */
.cc-page-title { font-weight: 700; font-size: 1.3rem; margin: 0; color: #fff; }
.breadcrumb { margin: 0; font-size: .78rem; --bs-breadcrumb-divider-color: var(--cc-muted-2); }
.breadcrumb-item a { color: var(--cc-muted); }
.breadcrumb-item.active { color: var(--cc-accent); }

/* Buttons */
.btn { border-radius: .55rem; font-weight: 500; font-size: .84rem; }
.btn-primary { background: var(--cc-accent); border-color: var(--cc-accent); color: #14181f; font-weight: 600; }
.btn-primary:hover { background: #ffbe1a; border-color: #ffbe1a; color: #14181f; }
.btn-accent-outline { border: 1px solid var(--cc-accent); color: var(--cc-accent); background: transparent; }
.btn-accent-outline:hover { background: var(--cc-accent); color: #14181f; }
.btn-dark2 { background: var(--cc-card-bg); border: 1px solid var(--cc-border); color: var(--cc-text); }
.btn-dark2:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.btn-light.border, .btn-outline-secondary { background: var(--cc-card-bg); border-color: var(--cc-border) !important; color: var(--cc-text); }
.btn-outline-danger { color: var(--cc-red); border-color: var(--cc-red); }

/* Form controls dark */
.form-select, .form-control {
    background: var(--cc-card-bg); border: 1px solid var(--cc-border); color: var(--cc-text);
}
.form-select:focus, .form-control:focus { background: var(--cc-card-bg); color: var(--cc-text); border-color: var(--cc-accent); box-shadow: 0 0 0 .2rem rgba(var(--cc-accent-rgb), .15); }
.form-select option { background: var(--cc-card-bg); color: var(--cc-text); }

.cc-search { background: var(--cc-card-bg); border: 1px solid var(--cc-border); border-radius: .55rem; padding: .45rem .8rem; display: flex; align-items: center; gap: .5rem; color: var(--cc-muted); }
.cc-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: .82rem; color: var(--cc-text); }

/* Rating */
.cc-stars { color: var(--cc-accent); font-size: .8rem; }

/* Dropdown dark */
.dropdown-menu { background: var(--cc-card-bg-2); border: 1px solid var(--cc-border); box-shadow: var(--cc-shadow); }
.dropdown-item { color: var(--cc-text); }
.dropdown-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.dropdown-divider { border-color: var(--cc-border); }

.badge.bg-light { background: var(--cc-card-bg-2) !important; color: var(--cc-text) !important; border: 1px solid var(--cc-border); }

/* Progress */
.progress { height: 7px; border-radius: 999px; background: var(--cc-border); }

/* ---------- Live ride tracking map ---------- */
.cc-map {
    position: relative; height: 250px; border-radius: .7rem; overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(59,130,246,.10), transparent 42%),
        radial-gradient(circle at 80% 70%, rgba(246,177,0,.08), transparent 42%),
        #0b1120;
    background-color: #0b1120;
    border: 1px solid var(--cc-border);
}
.cc-map::before, .cc-map::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 46px 46px;
}
.cc-map::after { background-size: 138px 138px; background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); }
.cc-map .cc-road { position: absolute; background: rgba(255,255,255,.05); }
.cc-taxi {
    position: absolute; width: 26px; height: 26px; border-radius: 7px;
    background: #fff; color: #14181f; display: grid; place-items: center; font-size: .85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.4); transform: translate(-50%, -50%); z-index: 3;
}
.cc-taxi.on { background: var(--cc-accent); }
.cc-map-route { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cc-map-ctrl { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.cc-map-ctrl button { width: 30px; height: 30px; border-radius: 7px; background: rgba(20,27,43,.9); border: 1px solid var(--cc-border); color: var(--cc-text); }
.cc-map-legend { display: flex; gap: .4rem; text-align: center; margin-top: .9rem; }
.cc-map-legend > div { flex: 1; background: var(--cc-card-bg-2); border: 1px solid var(--cc-border); border-radius: .55rem; padding: .55rem .3rem; }
.cc-map-legend .cc-legend-val { font-weight: 700; font-size: 1.05rem; }
.cc-map-legend .cc-legend-lbl { color: var(--cc-muted); font-size: .68rem; }

/* ---------- Leaflet fleet map ---------- */
.cc-leaflet { height: 440px; border-radius: .7rem; overflow: hidden; border: 1px solid var(--cc-border); z-index: 1; }
.leaflet-container { background: #0b1120; font-family: "Inter", sans-serif; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--cc-card-bg-2); color: var(--cc-text); border: 1px solid var(--cc-border); box-shadow: var(--cc-shadow); }
.leaflet-popup-content { margin: .6rem .85rem; font-size: .8rem; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--cc-muted); }
.leaflet-control-attribution { background: rgba(20,27,43,.75) !important; color: var(--cc-muted-2) !important; }
.leaflet-control-attribution a { color: var(--cc-muted) !important; }
.leaflet-bar a { background: var(--cc-card-bg-2); color: var(--cc-text); border-color: var(--cc-border); }
.leaflet-bar a:hover { background: var(--cc-card-bg); color: var(--cc-accent); }

/* Teardrop map pin */
.cc-pin {
    width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); display: grid; place-items: center;
    border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.cc-pin i { transform: rotate(45deg); color: #fff; font-size: .82rem; }
.cc-pin.active { background: var(--cc-green); }
.cc-pin.maintenance { background: var(--cc-accent); }
.cc-pin.maintenance i { color: #14181f; }
.cc-pin.idle { background: var(--cc-muted-2); }
.cc-pin-pulse::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--cc-green); opacity: .6; animation: ccpulse 1.8s ease-out infinite;
}
@keyframes ccpulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* Quick actions */
.cc-quick { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8rem; }
.cc-quick-btn {
    background: var(--cc-card-bg-2); border: 1px solid var(--cc-border); border-radius: .7rem;
    padding: 1rem .5rem; text-align: center; color: var(--cc-text); transition: .15s;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.cc-quick-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); transform: translateY(-2px); }
.cc-quick-btn i { font-size: 1.3rem; }
.cc-quick-btn span { font-size: .78rem; font-weight: 500; }
@media (max-width: 1200px) { .cc-quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .cc-quick { grid-template-columns: repeat(2, 1fr); } }

/* Recent bookings rows */
.cc-rb-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--cc-border); }
.cc-rb-row:last-child { border-bottom: 0; }
.cc-rb-id { color: var(--cc-accent); font-weight: 600; font-size: .8rem; width: 92px; flex: 0 0 auto; }
.cc-veh { width: 34px; height: 34px; border-radius: 9px; background: var(--cc-card-bg-2); border:1px solid var(--cc-border); display: grid; place-items: center; color: var(--cc-muted); }

/* Timeline */
.cc-timeline { position: relative; padding-left: 1.4rem; }
.cc-timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--cc-border); }
.cc-timeline-item { position: relative; padding-bottom: 1.1rem; }
.cc-timeline-item::before { content: ""; position: absolute; left: -1.4rem; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--cc-card-bg); border: 3px solid var(--cc-accent); }
.cc-timeline-item b { color: #fff; }

/* ---------- Live chat (dark) ---------- */
.cc-chat { display: flex; height: calc(100vh - var(--cc-topbar-height) - 3rem); background: var(--cc-card-bg); border-radius: var(--cc-card-radius); overflow: hidden; border: 1px solid var(--cc-border); }
.cc-chat-list { width: 320px; border-right: 1px solid var(--cc-border); display: flex; flex-direction: column; flex: 0 0 auto; }
.cc-chat-list-head { padding: 1rem 1.15rem; border-bottom: 1px solid var(--cc-border); }
.cc-chat-threads { overflow-y: auto; flex: 1 1 auto; }
.cc-thread { display: flex; gap: .7rem; padding: .8rem 1.15rem; border-bottom: 1px solid var(--cc-border); cursor: pointer; }
.cc-thread:hover { background: rgba(255,255,255,.03); }
.cc-thread.active { background: rgba(var(--cc-accent-rgb), .08); border-left: 3px solid var(--cc-accent); }
.cc-thread img, .cc-thread .cc-mini-avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.cc-thread .cc-thread-name { font-weight: 600; font-size: .85rem; color: #fff; }
.cc-thread .cc-thread-msg { color: var(--cc-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 165px; }
.cc-thread .cc-thread-time { font-size: .68rem; color: var(--cc-muted-2); }
.cc-chat-window { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cc-chat-head { padding: .85rem 1.25rem; border-bottom: 1px solid var(--cc-border); display: flex; align-items: center; gap: .75rem; }
.cc-chat-body { flex: 1 1 auto; overflow-y: auto; padding: 1.5rem; background: #0e1524; }
.cc-msg { max-width: 66%; margin-bottom: 1rem; }
.cc-msg .cc-bubble { padding: .6rem .9rem; border-radius: 1rem; font-size: .85rem; }
.cc-msg.in .cc-bubble { background: var(--cc-card-bg-2); border-bottom-left-radius: .25rem; color: var(--cc-text); }
.cc-msg.out { margin-left: auto; }
.cc-msg.out .cc-bubble { background: var(--cc-accent); color: #14181f; border-bottom-right-radius: .25rem; }
.cc-msg .cc-msg-time { font-size: .66rem; color: var(--cc-muted-2); margin-top: .25rem; }
.cc-msg.out .cc-msg-time { text-align: right; }
.cc-chat-input { padding: .85rem 1.25rem; border-top: 1px solid var(--cc-border); display: flex; gap: .6rem; align-items: center; }
.cc-chat-input input { border: 1px solid var(--cc-border); border-radius: 999px; padding: .6rem 1.1rem; flex: 1 1 auto; outline: none; background: var(--cc-card-bg); color: var(--cc-text); }

/* Pagination dark */
.page-link { background: var(--cc-card-bg); border-color: var(--cc-border); color: var(--cc-text); }
.page-link:hover { background: var(--cc-card-bg-2); color: var(--cc-accent); }
.page-item.active .page-link { background: var(--cc-accent); border-color: var(--cc-accent); color: #14181f; }
.page-item.disabled .page-link { background: var(--cc-card-bg); border-color: var(--cc-border); color: var(--cc-muted-2); }

footer { color: var(--cc-muted-2); border-color: var(--cc-border) !important; }

/* ---------- Responsive ---------- */
.cc-backdrop { display: none; }
@media (max-width: 991.98px) {
    .cc-sidebar { transform: translateX(-100%); }
    .cc-main { margin-left: 0; }
    .cc-hamburger { display: grid; }
    body.cc-sidebar-open .cc-sidebar { transform: translateX(0); }
    body.cc-sidebar-open .cc-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1039; }
    .cc-hide-md { display: none !important; }
    .cc-chat-list { width: 260px; }
}
@media (max-width: 575.98px) { .cc-chat-list { display: none; } }