/* ═══════════════════════════════════════════════════════
   DPH STUDIO — CLASSIC THEME
   ═══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
       LIGHT MODE (default)
    ════════════════════════════════════════ */
    :root {
      --bg-base:     #f2f6fc;
      --bg-surface:  #ffffff;
      --bg-surface2: #eaf0f8;
      --accent:      #0088aa;
      --accent-dim:  rgba(0,136,170,.1);
      --accent-glow: rgba(0,136,170,.18);
      --accent2:     #7c3aed;
      --text-base:   #0d1b2e;
      --text-muted2: #6b7a99;
      --border-dim:  rgba(0,136,170,.12);
      --border-mid:  rgba(0,136,170,.22);
      --c-success:   #059669;
      --c-danger:    #dc2626;
      --c-warning:   #d97706;
    }

    /* ════════════════════════════════════════
       DARK MODE
    ════════════════════════════════════════ */
    [data-bs-theme="dark"] {
      --bg-base:     #080c16;
      --bg-surface:  #0f1623;
      --bg-surface2: #161f30;
      --accent:      #00d4ff;
      --accent-dim:  rgba(0,212,255,.12);
      --accent-glow: rgba(0,212,255,.22);
      --accent2:     #a78bfa;
      --text-base:   #e2eeff;
      --text-muted2: #4e6080;
      --border-dim:  rgba(0,212,255,.1);
      --border-mid:  rgba(0,212,255,.2);
      --c-success:   #10b981;
      --c-danger:    #f87171;
      --c-warning:   #fbbf24;
    }

    /* ════════════════════════════════════════
       BASE
    ════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; }

    body {
      background-color: var(--bg-base);
      background-image:
        radial-gradient(ellipse 60% 40% at 15% 10%, rgba(0,136,170,.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(124,58,237,.03) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(0,0,0,0.04)'/%3E%3C/svg%3E");
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 0.93rem;
      color: var(--text-base);
      min-height: 100vh;
      transition: background-color .25s ease, color .25s ease;
    }
    [data-bs-theme="dark"] body {
      background-image:
        radial-gradient(ellipse 60% 40% at 15% 10%, rgba(0,212,255,.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(167,139,250,.03) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E");
    }

    /* ════════════════════════════════════════
       NAVBAR
    ════════════════════════════════════════ */
    .navbar {
      background: rgba(255,255,255,.88) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-dim);
      padding: .8rem 0;
      transition: background .25s ease;
    }
    [data-bs-theme="dark"] .navbar {
      background: rgba(8,12,22,.82) !important;
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: -.2px;
      color: var(--text-base) !important;
    }
    .navbar-brand .acc { color: var(--accent); }

    .nav-link-custom {
      color: var(--text-muted2);
      font-size: .83rem;
      font-weight: 500;
      text-decoration: none;
      padding: .3rem .6rem;
      border-radius: 6px;
      transition: color .18s, background .18s;
    }
    .nav-link-custom:hover {
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* Theme toggle button */
    .theme-btn {
      background: none;
      border: 1px solid var(--border-mid);
      color: var(--text-muted2);
      border-radius: 8px;
      padding: .28rem .6rem;
      font-size: .9rem;
      cursor: pointer;
      transition: all .18s;
    }
    .theme-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ════════════════════════════════════════
       CARDS
    ════════════════════════════════════════ */
    .card {
      background: var(--bg-surface);
      border: 1px solid var(--border-dim);
      border-radius: 14px;
      box-shadow: 0 1px 12px rgba(0,0,0,.07);
      transition: border-color .22s, box-shadow .22s, background .25s;
      animation: fadeUp .3s ease both;
    }
    [data-bs-theme="dark"] .card {
      box-shadow: 0 2px 20px rgba(0,0,0,.45);
    }
    .card:hover {
      border-color: var(--border-mid);
    }
    [data-bs-theme="dark"] .card:hover {
      box-shadow: 0 4px 32px rgba(0,0,0,.55), 0 0 0 1px var(--accent-dim);
    }
    .card-header {
      background: var(--bg-surface2) !important;
      border-bottom: 1px solid var(--border-dim) !important;
      border-radius: 13px 13px 0 0 !important;
      padding: .8rem 1.25rem;
      font-weight: 600;
      font-size: .88rem;
      transition: background .25s;
    }

    /* Coloured card headers — LIGHT */
    .card-header.bg-primary   { background: #dbeafe !important; color: #1e40af !important; }
    .card-header.bg-secondary { background: var(--bg-surface2) !important; color: var(--text-base) !important; }
    .card-header.bg-success   { background: #d1fae5 !important; color: #065f46 !important; }

    /* Coloured card headers — DARK overrides */
    [data-bs-theme="dark"] .card-header.bg-primary   { background: linear-gradient(135deg,#0a2048 0%,#081830 100%) !important; color: #a8d4ff !important; }
    [data-bs-theme="dark"] .card-header.bg-secondary { background: var(--bg-surface2) !important; color: var(--text-base) !important; }
    [data-bs-theme="dark"] .card-header.bg-success   { background: linear-gradient(135deg,#063526 0%,#042619 100%) !important; color: #6ee7b7 !important; }

    /* ════════════════════════════════════════
       BUTTONS
    ════════════════════════════════════════ */
    .btn { font-weight: 600; border-radius: 8px; transition: all .2s ease; }
    .btn-primary {
      background: linear-gradient(135deg,#007ea0 0%,#004d63 100%);
      border: 1px solid rgba(0,136,170,.5);
      color: #fff;
    }
    .btn-primary:hover, .btn-primary:focus {
      background: linear-gradient(135deg,#009dc8 0%,#006680 100%);
      box-shadow: 0 0 18px var(--accent-glow);
      border-color: var(--accent);
      color: #fff;
    }
    .btn-success {
      background: linear-gradient(135deg,#047857 0%,#065f46 100%);
      border: 1px solid rgba(5,150,105,.4);
      color: #fff;
    }
    .btn-success:hover {
      background: linear-gradient(135deg,#059669 0%,#047857 100%);
      box-shadow: 0 0 18px rgba(5,150,105,.28);
      color: #fff;
    }
    .btn-outline-secondary {
      border-color: var(--border-mid);
      color: var(--text-muted2);
    }
    .btn-outline-secondary:hover {
      background: var(--bg-surface2);
      border-color: var(--accent);
      color: var(--accent);
    }
    .btn-outline-primary { border-color: var(--accent); color: var(--accent); }
    .btn-outline-primary:hover { background: var(--accent-dim); color: var(--accent); }

    /* ════════════════════════════════════════
       TABLES
    ════════════════════════════════════════ */
    .table {
      --bs-table-bg: transparent;
      --bs-table-hover-bg: rgba(0,136,170,.05);
      --bs-table-color: var(--text-base);
      --bs-table-border-color: var(--border-dim);
    }
    [data-bs-theme="dark"] .table {
      --bs-table-hover-bg: rgba(0,212,255,.05);
    }
    .table th {
      white-space: nowrap;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-muted2);
      border-bottom: 1px solid var(--border-mid) !important;
      padding-top: .65rem;
      padding-bottom: .65rem;
    }
    .table-light {
      --bs-table-bg: var(--bg-surface2);
      --bs-table-color: var(--text-base);
    }
    .table-warning {
      --bs-table-bg: rgba(124,58,237,.07);
      --bs-table-color: #7c3aed;
      --bs-table-hover-bg: rgba(124,58,237,.12);
    }
    [data-bs-theme="dark"] .table-warning {
      --bs-table-bg: rgba(167,139,250,.08);
      --bs-table-color: #c4b5fd;
    }
    .table td { vertical-align: middle; }

    /* ════════════════════════════════════════
       CODE / MONO
    ════════════════════════════════════════ */
    code, .mono {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      color: var(--accent);
      font-size: .8em;
      background: var(--accent-dim);
      padding: .12em .38em;
      border-radius: 4px;
    }
    .font-monospace { font-family: 'JetBrains Mono', monospace !important; }

    /* ════════════════════════════════════════
       BADGES
    ════════════════════════════════════════ */
    .badge { font-weight: 700; letter-spacing: .04em; border-radius: 6px; }
    .badge.bg-primary   { background: linear-gradient(135deg,#0ea5e9,#0369a1) !important; color: #fff !important; }
    .badge.bg-secondary { background: var(--bg-surface2) !important; border: 1px solid var(--border-mid); color: var(--accent) !important; }
    .badge.bg-success   { background: linear-gradient(135deg,#059669,#047857) !important; color: #fff !important; }
    .badge.bg-warning   { background: rgba(217,119,6,.1) !important; color: var(--c-warning) !important; border: 1px solid rgba(217,119,6,.25); }
    [data-bs-theme="dark"] .badge.bg-warning { background: rgba(251,191,36,.12) !important; color: #fbbf24 !important; border-color: rgba(251,191,36,.25); }
    .badge.bg-danger    { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; color: #fff !important; }

    /* ════════════════════════════════════════
       FORMS
    ════════════════════════════════════════ */
    .form-control, .form-select {
      background: var(--bg-surface2);
      border: 1px solid var(--border-mid);
      color: var(--text-base);
      border-radius: 8px;
      transition: border-color .2s, box-shadow .2s, background .25s;
    }
    .form-control:focus, .form-select:focus {
      background: var(--bg-surface2);
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      color: var(--text-base);
    }
    .form-control::placeholder { color: var(--text-muted2); }
    .form-label { font-weight: 500; color: var(--text-muted2); font-size: .85rem; }
    .form-text  { color: var(--text-muted2); font-size: .78rem; }

    /* ════════════════════════════════════════
       ALERTS
    ════════════════════════════════════════ */
    .alert { border-radius: 10px; }
    .alert-success { background: rgba(5,150,105,.08);  border-color: rgba(5,150,105,.25);  color: #065f46; }
    .alert-danger  { background: rgba(220,38,38,.08);  border-color: rgba(220,38,38,.25);  color: #991b1b; }
    .alert-info    { background: var(--accent-dim);    border-color: var(--border-mid);    color: #0369a1; }
    .alert-warning { background: rgba(217,119,6,.07);  border-color: rgba(217,119,6,.22);  color: #92400e; }

    [data-bs-theme="dark"] .alert-success { color: #6ee7b7; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08); }
    [data-bs-theme="dark"] .alert-danger  { color: #fca5a5; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
    [data-bs-theme="dark"] .alert-info    { color: #7dd3fc; }
    [data-bs-theme="dark"] .alert-warning { color: #fcd34d; border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.07); }

    /* ════════════════════════════════════════
       LIST GROUP
    ════════════════════════════════════════ */
    .list-group-item {
      background: var(--bg-surface2);
      border-color: var(--border-dim);
      color: var(--text-base);
      transition: background .18s, border-color .18s;
    }
    .list-group-item-action:hover {
      background: var(--accent-dim);
      border-color: var(--border-mid);
      color: var(--text-base);
    }

    /* ════════════════════════════════════════
       STAT BLOCKS (summary dashboard)
    ════════════════════════════════════════ */
    .stat-block {
      background: var(--bg-surface2);
      border: 1px solid var(--border-dim);
      border-radius: 10px;
      padding: .85rem 1.1rem;
      transition: border-color .2s, background .25s;
    }
    .stat-block:hover { border-color: var(--border-mid); }
    .stat-lbl {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--text-muted2);
      margin-bottom: .2rem;
    }
    .stat-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--text-base);
      line-height: 1.2;
    }
    .stat-num.accent  { color: var(--accent); }
    .stat-num.danger  { color: var(--c-danger); }
    .stat-num.success { color: var(--c-success); }
    .stat-num.purple  { color: var(--accent2); }
    .stat-hero {
      font-family: 'JetBrains Mono', monospace;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -1px;
    }

    /* ════════════════════════════════════════
       TOGGLE VALUES PILL
    ════════════════════════════════════════ */
    .toggle-pill {
      background: var(--bg-surface);
      border: 1px solid var(--border-mid);
      color: var(--text-muted2);
      border-radius: 999px;
      padding: .45rem 1rem;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(12px);
      transition: all .2s;
      box-shadow: 0 2px 12px rgba(0,0,0,.12);
      letter-spacing: .02em;
    }
    [data-bs-theme="dark"] .toggle-pill { box-shadow: 0 4px 16px rgba(0,0,0,.5); }
    .toggle-pill:hover {
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 16px var(--accent-glow), 0 2px 12px rgba(0,0,0,.15);
    }

    /* ════════════════════════════════════════
       MISC
    ════════════════════════════════════════ */
    .summary-box {
      background: var(--accent-dim);
      border-left: 3px solid var(--accent);
      padding: .9rem 1.2rem;
      border-radius: .5rem;
    }
    .text-accent   { color: var(--accent) !important; }
    .text-muted    { color: var(--text-muted2) !important; }
    .text-danger   { color: var(--c-danger) !important; }
    .text-success  { color: var(--c-success) !important; }
    .border-success { border-color: rgba(5,150,105,.25) !important; }
    [data-bs-theme="dark"] .border-success { border-color: rgba(16,185,129,.25) !important; }
    .border-primary { border-color: var(--border-mid) !important; }
    .border-warning { border-color: rgba(217,119,6,.25) !important; }
    [data-bs-theme="dark"] .border-warning { border-color: rgba(251,191,36,.25) !important; }

    kbd {
      background: var(--bg-surface2);
      border: 1px solid var(--border-mid);
      border-radius: 5px;
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: .78em;
      padding: .1em .4em;
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-base); }
    ::-webkit-scrollbar-thumb { background: var(--bg-surface2); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-mid); }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }