/* ============================================================
   PATHÉ CORE CONTROL — Blue / White "techish" admin theme
   Light, crisp surfaces · blue gradient accents · fancy buttons
   · statistics dashboard cards
   ============================================================ */
:root {
    --primary:        #2563eb;   /* core blue            */
    --primary-dark:   #1d4ed8;
    --primary-light:  #3b82f6;
    --cyan:           #06b6d4;
    --indigo:         #6366f1;
    --green:          #10b981;
    --amber:          #f59e0b;
    --red:            #ef4444;

    --primary-glow:   rgba(37, 99, 235, 0.30);

    --bg:             #eef3fb;   /* page background      */
    --bg-grad-a:      #eff5ff;
    --bg-grad-b:      #e2ecfb;
    --surface:        #ffffff;   /* cards / modules      */
    --surface-2:      #f6f9ff;   /* subtle fills         */

    --text-main:      #0f2540;   /* near-navy ink        */
    --text-muted:     #64748b;
    --heading:        #1e3a8a;

    --border:         #dce6f5;
    --border-strong:  #c3d4ef;
    --shadow:         0 1px 2px rgba(15, 37, 64, .06), 0 8px 24px rgba(37, 99, 235, .07);
    --shadow-hover:   0 6px 14px rgba(37, 99, 235, .18), 0 18px 40px rgba(37, 99, 235, .14);
    --radius:         14px;
}

/* ---------- base ---------- */
body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(37,99,235,.10), transparent 60%),
        linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b)) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

a:link, a:visited { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* ---------- header ---------- */
#header {
    background: linear-gradient(100deg, #0b2a6b 0%, var(--primary) 55%, var(--primary-light) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 24px rgba(37, 99, 235, .35) !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}
/* faint tech grid in the header */
#header::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 40%, transparent);
}
#header a:link, #header a:visited { color: #fff !important; }
#branding h1, #branding h1 a { color: #fff !important; font-weight: 800; letter-spacing: 1px; }
#branding h1 span { color: #bfdbfe !important; }
#user-tools { color: rgba(255,255,255,.85) !important; font-size: .8rem; }
#user-tools a {
    border-bottom-color: rgba(255,255,255,.5) !important;
}

/* ---------- breadcrumbs ---------- */
div.breadcrumbs {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: var(--shadow);
}
div.breadcrumbs a { color: var(--primary) !important; }

/* Make the admin content area fill the page. By default django.contrib.admin
   floats #content-main at a constrained width, which pins the dashboard to the
   left with dead space on the right — override it so everything spans full width. */
#content { padding: 24px 28px; max-width: none !important; }
#content.colM, #content-main {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    padding: 0;
}
.dashboard #content { width: auto !important; }

/* ---------- modules / cards ---------- */
.module {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.module h2, .module caption,
.inline-group h2 {
    background: linear-gradient(90deg, var(--surface-2), #fff) !important;
    color: var(--heading) !important;
    border-bottom: 1px solid var(--border) !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .78rem !important;
    font-weight: 700;
}
.module h2 a.section:link, .module h2 a.section:visited { color: var(--heading) !important; }

h1, h2, h3 { color: var(--heading); }

/* ============================================================
   STATISTICS DASHBOARD
   ============================================================ */
.dash-wrap { width: 100%; max-width: none; margin: 4px 0 28px; }
.dash-head {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 14px; margin: 4px 2px 18px;
    text-align: center;
}
.dash-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(90deg, var(--heading), var(--primary-light));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dash-pulse {
    font-size: .68rem; font-weight: 800; letter-spacing: 1.5px;
    color: var(--green);
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.35);
    padding: 3px 10px; border-radius: 999px;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- period selector ---- */
.period-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.period-pill {
    font-size: .74rem; font-weight: 700; letter-spacing: .3px;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    padding: 7px 14px; border-radius: 999px;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.period-pill:hover { transform: translateY(-2px); color: var(--primary) !important; box-shadow: var(--shadow-hover); }
.period-pill.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-color: transparent;
    box-shadow: 0 6px 16px var(--primary-glow);
}

/* ---- pending-work strip ---- */
.pending-strip {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    margin: 0 2px 18px;
}
.pending-item {
    display: flex; align-items: baseline; gap: 8px;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--border-strong) !important;
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none !important;
    color: var(--text-muted) !important;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pending-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pending-val { font-size: 1.25rem; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
.pending-label { font-size: .76rem; font-weight: 600; }
.pending-item.hot {
    border-left-color: var(--amber) !important;
    background: linear-gradient(90deg, #fffbeb, #fff) !important;
}
.pending-item.hot .pending-val { color: #b45309; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 16px;
    justify-content: center;
}

/* scope badge (period vs current) */
.scope-badge {
    position: absolute; bottom: 10px; right: 12px;
    font-size: .56rem; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
}
.scope-period  { color: var(--primary); background: rgba(37,99,235,.10); }
.scope-current { color: var(--text-muted); background: rgba(100,116,139,.12); }

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none !important;
    color: var(--text-main) !important;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* coloured top accent bar */
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--c1), var(--c2));
}
/* sliding sheen on hover */
.stat-card::after {
    content: '';
    position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(37,99,235,.10), transparent);
    transition: left .6s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--border-strong) !important;
}
.stat-card:hover::after { left: 130%; }

.stat-icon {
    flex: 0 0 auto;
    width: 50px; height: 50px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 6px 16px var(--cglow);
    filter: saturate(1.1);
}
.stat-body { min-width: 0; }
.stat-label {
    font-size: .68rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted);
}
.stat-value {
    font-size: 1.7rem; font-weight: 800; line-height: 1.15;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stat-sub { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }

/* attention state for cards with pending work */
.stat-card.attention { border-color: var(--amber) !important; }
.stat-card.attention::before { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.stat-flag {
    position: absolute; top: 12px; right: 14px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #fff;
    background: var(--amber);
    box-shadow: 0 0 0 0 rgba(245,158,11,.6);
    animation: ring 1.8s infinite;
}
@keyframes ring {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* per-tone accent colours (drive ::before, icon gradient, glow) */
.tone-blue   { --c1: var(--primary);     --c2: var(--primary-light); --cglow: rgba(37,99,235,.35); }
.tone-cyan   { --c1: var(--cyan);        --c2: #22d3ee;              --cglow: rgba(6,182,212,.35); }
.tone-indigo { --c1: var(--indigo);      --c2: #818cf8;              --cglow: rgba(99,102,241,.35); }
.tone-green  { --c1: var(--green);       --c2: #34d399;              --cglow: rgba(16,185,129,.35); }
.tone-amber  { --c1: var(--amber);       --c2: #fbbf24;              --cglow: rgba(245,158,11,.35); }
.tone-red    { --c1: var(--red);         --c2: #f87171;              --cglow: rgba(239,68,68,.35); }

/* ============================================================
   CHARTS (pure-CSS, no external libs)
   ============================================================ */
.chart-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.4fr);
    gap: 16px;
    margin-top: 18px;
}
.chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.chart-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--surface-2), #fff);
    border-bottom: 1px solid var(--border);
}
.chart-head h2 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--heading); text-transform: none; }
.chart-head span { font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }

/* donut */
.donut-block { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; padding: 20px; }
.donut {
    width: 150px; height: 150px; border-radius: 50%;
    position: relative; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(15,37,64,.05), 0 8px 20px rgba(37,99,235,.12);
}
.donut-hole {
    position: absolute; inset: 26px; border-radius: 50%;
    background: var(--surface);
    display: grid; place-content: center; text-align: center;
    box-shadow: inset 0 0 0 1px var(--border);
}
.donut-total { font-size: 1.7rem; font-weight: 800; color: var(--heading); line-height: 1; }
.donut-cap { font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; min-width: 150px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .82rem; }
.donut-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut-legend .leg-label { color: var(--text-main); font-weight: 600; }
.donut-legend .leg-val { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* horizontal bar chart */
.bar-chart { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; }
.bar-name { font-size: .8rem; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; height: 16px; overflow: hidden; }
.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 999px;
    box-shadow: 0 0 10px var(--primary-glow);
    transition: width .6s cubic-bezier(.22,1,.36,1);
    min-width: 2px;
}
.bar-val { font-size: .8rem; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
    .chart-row { grid-template-columns: 1fr; }
}

/* ============================================================
   AGENT ANALYTICS PANEL
   ============================================================ */
.agent-panel {
    margin-top: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.agent-panel-head {
    display: flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: 4px 12px; text-align: center;
    padding: 16px 20px;
    background: linear-gradient(90deg, var(--surface-2), #fff);
    border-bottom: 1px solid var(--border);
}
.agent-panel-head h2 {
    margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: .4px;
    color: var(--heading); text-transform: none;
}
.agent-panel-sub { font-size: .78rem; color: var(--text-muted); }
.agent-panel-sub strong { color: var(--primary); }

.agent-table-wrap { overflow-x: auto; }
.agent-table { width: 100%; border-collapse: collapse; }
.agent-table thead th {
    background: var(--surface-2) !important;
    color: var(--heading) !important;
    text-transform: uppercase; font-size: .66rem; letter-spacing: .6px;
    text-align: left; padding: 11px 16px !important;
    border-bottom: 2px solid var(--border-strong) !important;
}
.agent-table th.num, .agent-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.agent-table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-main);
}
.agent-table tbody tr:hover { background: #eaf2ff !important; }
.agent-table td.strong { font-weight: 800; color: var(--heading); }
.agent-name { font-weight: 700; color: var(--heading); }
.agent-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; font-family: 'Courier New', monospace; }
.commission-cell { font-weight: 800; color: var(--green); }
.up { color: var(--green); font-weight: 700; }
.badge-off {
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--red); background: rgba(239,68,68,.12);
    padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.row-unassigned { background: var(--surface-2) !important; }
.row-unassigned .agent-name { color: var(--text-muted); font-style: italic; }
.agent-empty { text-align: center !important; color: var(--text-muted); padding: 24px !important; }

/* ============================================================
   FANCY BUTTONS
   ============================================================ */
.button, input[type=submit], input[type=button],
.submit-row input, a.button, a.addlink, a.changelink {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    box-shadow: 0 4px 12px var(--primary-glow) !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover,
.submit-row input:hover, a.button:hover, a.addlink:hover, a.changelink:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--primary-glow) !important;
    filter: brightness(1.05);
    color: #fff !important;
}
.button:active, input[type=submit]:active, .submit-row input:active {
    transform: translateY(0);
}
/* shine sweep */
.button::after, input[type=submit]::after, .submit-row input::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .55s ease;
}
.button:hover::after, input[type=submit]:hover::after, .submit-row input:hover::after {
    left: 100%;
}

/* secondary / default */
.button.default, input[type=submit].default {
    background: linear-gradient(135deg, var(--indigo), #818cf8) !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.35) !important;
}
/* neutral links that should read as ghost buttons */
.cancel-link, a.closelink {
    background: #fff !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
}
.cancel-link:hover, a.closelink:hover {
    background: var(--surface-2) !important;
    color: var(--primary-dark) !important;
    transform: translateY(-2px);
}
/* destructive */
.button.danger, .deletelink, a.deletelink {
    background: linear-gradient(135deg, var(--red), #f87171) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,.35) !important;
}
.submit-row {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 18px !important;
}

/* object-tools (Add / History buttons top-right of changelists) */
.object-tools a:link, .object-tools a:visited {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px var(--primary-glow) !important;
    text-transform: none !important;
    letter-spacing: .3px;
}
.object-tools a:hover { transform: translateY(-2px); }

/* ============================================================
   TABLES
   ============================================================ */
#changelist table, .module table { width: 100%; border-collapse: collapse !important; }

thead th {
    background: var(--surface-2) !important;
    color: var(--heading) !important;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .6px;
    border-bottom: 2px solid var(--border-strong) !important;
    padding: 12px !important;
}
thead th a:link, thead th a:visited { color: var(--heading) !important; }

tbody tr { background: var(--surface) !important; transition: background .15s; }
tbody tr:nth-child(even) { background: var(--surface-2) !important; }
tbody tr:hover { background: #eaf2ff !important; }

tbody td, tbody th {
    border-bottom: 1px solid var(--border) !important;
    padding: 11px 12px !important;
    color: var(--text-main) !important;
}

/* changelist filter sidebar */
#changelist-filter {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
#changelist-filter h2 {
    background: linear-gradient(90deg, var(--surface-2), #fff) !important;
    color: var(--heading) !important;
    border-bottom: 1px solid var(--border) !important;
}
#changelist-filter li.selected a { color: var(--primary) !important; font-weight: 700; }

/* pagination */
.paginator a:link, .paginator a:visited {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--primary) !important;
    border-radius: 8px !important;
    padding: 4px 11px !important;
}
.paginator .this-page {
    background: var(--primary) !important; color: #fff !important;
    border-radius: 8px !important; padding: 4px 11px !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=url], select, textarea {
    background: #fff !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    color: var(--text-main) !important;
    padding: 9px 11px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.15) !important;
}
.help, p.help, .helptext { color: var(--text-muted) !important; }
fieldset.module { border: 1px solid var(--border) !important; }
.aligned label { color: var(--heading) !important; font-weight: 600; }

/* messages */
ul.messagelist li {
    border-radius: 10px !important;
    box-shadow: var(--shadow);
    border: 1px solid var(--border) !important;
}
ul.messagelist li.success { background: #ecfdf5 !important; color: #065f46 !important; border-color:#a7f3d0 !important; }
ul.messagelist li.error   { background: #fef2f2 !important; color: #991b1b !important; border-color:#fecaca !important; }
ul.messagelist li.warning { background: #fffbeb !important; color: #92400e !important; border-color:#fde68a !important; }

/* ---------- app list (home) ---------- */
.app-list .model-list, .dashboard .module table td a { color: var(--primary); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
body.login {
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(37,99,235,.18), transparent 60%),
        linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b)) !important;
}
.login #container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(37,99,235,.22) !important;
    margin-top: 7% !important;
    overflow: hidden;
}
.login #header {
    border-radius: 0 !important;
}
.login .form-row { border: none !important; padding: 9px 0 !important; }
.login .submit-row { border: none !important; box-shadow: none !important; background: transparent !important; padding: 16px 0 0 !important; }
.login .submit-row input { width: 100% !important; padding: 12px !important; font-size: 1rem !important; }

/* tighten on small screens */
@media (max-width: 640px) {
    #content { padding: 16px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-value { font-size: 1.35rem; }
}