/* ============================================================
   BAT E 66 visual identity — DW Racing palette, 100% fidelity.
   Scoped under body.theme-bat-e66 so it touches ONLY the pages
   that load this file (client/login.php, bte66-x9k2m/login.php)
   — every other page keeps the existing look untouched.
   Reuses the SAME class names as style.css (login-card,
   public-check-*, form-group, btn, captcha-box, ...) so layout
   is 100% unchanged — only tokens + a handful of shape/weight
   tweaks that don't cascade through var() alone.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

body.theme-bat-e66 {
  --bg-primary: #090909;    /* ink */
  --bg-secondary: #171717;  /* field */
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-bg-strong: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 59, 22, 0.28);
  --border-color-strong: rgba(255, 59, 22, 0.55);

  --gold: #ff3b16;          /* accent — primary (orange) */
  --gold-hover: #ff5a2e;    /* accent hover — brighter orange */
  --accent2: #2548ff;       /* accent — secondary (blue), offset shadows */
  --accent3: #ed145b;       /* accent — tertiary (magenta) */
  --grad: linear-gradient(90deg, #ff5a00, #ed145b 48%, #2548ff);

  --white: #fff;
  --text: #fff;
  --text-muted: rgba(255, 255, 255, 0.58);

  --success: #3f9d52;
  --success-soft: rgba(63, 157, 82, 0.16);
  --warning: #e2a020;
  --warning-soft: rgba(226, 160, 32, 0.16);
  --danger: #e6392f;
  --danger-soft: rgba(230, 57, 47, 0.16);

  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;

  --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow-gold: 5px 5px 0 var(--accent2);
  --blur-glass: none;

  --font-heading: 'Barlow Condensed', Impact, sans-serif;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

body.theme-bat-e66 { font-family: var(--font-body); }

/* Flat panels — no glass blur, gradient edge instead of solid accent line. */
body.theme-bat-e66 .login-card,
body.theme-bat-e66 .public-check-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #111;
  border: 0;
  border-top: 3px solid transparent;
  border-image: var(--grad) 1;
  position: relative;
}
body.theme-bat-e66 .public-check-info {
  background: linear-gradient(160deg, rgba(37, 72, 255, 0.08), rgba(9, 9, 9, 0.4));
}
body.theme-bat-e66 .public-check-form {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), rgba(5, 5, 5, 0.6);
}

/* Headings — italic, skewed, tight tracking. Full DW Racing energy this time.
   Generic h1/h2/h3 so this carries forward to every page that loads this file. */
body.theme-bat-e66 h1,
body.theme-bat-e66 h2,
body.theme-bat-e66 h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  transform: skewX(-4deg);
  transform-origin: left center;
}

/* Mono uppercase eyebrows / labels — matches army_design's label vocabulary. */
body.theme-bat-e66 .login-card .sub,
body.theme-bat-e66 .check-kicker,
body.theme-bat-e66 .form-group label,
body.theme-bat-e66 .public-check-form .form-group label {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}
body.theme-bat-e66 .check-kicker { color: var(--gold); }
body.theme-bat-e66 .login-card .sub { color: var(--accent2); }

/* Crest — square frame + gradient accent line instead of a bare floating logo. */
body.theme-bat-e66 .crest-badge {
  border-bottom: 3px solid var(--gold);
  padding-bottom: 10px;
}
body.theme-bat-e66 .shield-mark {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--border-color-strong);
  color: var(--gold);
}

/* Buttons — hard edge + blue offset shadow, no soft glow. */
body.theme-bat-e66 .btn { border-radius: 0; }
body.theme-bat-e66 .btn-primary,
body.theme-bat-e66 .public-check-form .btn-primary {
  background: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-glow-gold);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.theme-bat-e66 .btn-primary:hover,
body.theme-bat-e66 .public-check-form .btn-primary:hover {
  filter: none;
  background: var(--gold-hover);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--accent2);
  text-decoration: none;
}
body.theme-bat-e66 .btn-outline:hover,
body.theme-bat-e66 .public-check-form .admin-login-link .btn-outline:hover {
  transform: translate(-1px, -1px);
  border-color: var(--gold);
  color: var(--gold);
}

/* Form fields — square corners, blue focus ring. */
body.theme-bat-e66 .form-group input,
body.theme-bat-e66 .form-group select,
body.theme-bat-e66 .public-check-form .form-group input {
  border-radius: 0;
}
body.theme-bat-e66 .form-group input:focus,
body.theme-bat-e66 .public-check-form .form-group input:focus {
  box-shadow: none;
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* Captcha */
body.theme-bat-e66 .captcha-box img { border-radius: 0; }

/* Rounded pill chrome (helpdesk buttons, sound toggle) — flatten to match system. */
body.theme-bat-e66 .helpdesk-line { border-radius: 0; }
body.theme-bat-e66 .helpdesk-actions a { border-radius: 0; }
body.theme-bat-e66 .helpdesk-line strong { color: var(--gold); }
body.theme-bat-e66 .bg-sound-toggle { border-radius: 0; }
body.theme-bat-e66 .check-consent-note { border-radius: 0; border-color: var(--border-color); }

/* Arrears / payment-window banners — square, mono label. */
body.theme-bat-e66 .payment-window-banner { border-radius: 0; }
body.theme-bat-e66 .payment-window-banner-title { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }

/* Alerts — square, left accent bar instead of full border. */
body.theme-bat-e66 .alert { border-radius: 0; border-width: 0 0 0 4px; }
body.theme-bat-e66 .alert-error { border-color: var(--danger); }

/* ============================================================
   Client dashboard (client/index.php) — same components, same
   layout, now under the DW Racing token set above.
   ============================================================ */

/* Background grid overlay — orange/blue grid lines instead of gold. */
body.client-dashboard-bg.theme-bat-e66 .bg-video-overlay {
  background-image:
    linear-gradient(rgba(5, 5, 4, 0.3), rgba(5, 5, 4, 0.4)),
    linear-gradient(90deg, rgba(255, 59, 22, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(37, 72, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(255, 59, 22, 0.16), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(37, 72, 255, 0.18), transparent 38%);
  background-size: auto, 42px 42px, 42px 42px, auto, auto;
  background-position: center;
}

/* Flat panels — gradient top edge instead of solid gold border, no blur. */
body.theme-bat-e66 .claim-check-top,
body.theme-bat-e66 .claim-summary-band,
body.theme-bat-e66 .claim-detail-card,
body.theme-bat-e66 .claim-empty,
body.theme-bat-e66 .claim-note {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #111;
  border: 0;
  border-top: 3px solid transparent;
  border-image: var(--grad) 1;
}
body.theme-bat-e66 .claim-summary-band { background: #0c0c0c; }
body.theme-bat-e66 .claim-summary-band div { background: transparent; border-right: 1px solid rgba(255, 255, 255, 0.08); }
body.theme-bat-e66 .claim-summary-band span { font-family: var(--font-mono); letter-spacing: 0.1em; }
body.theme-bat-e66 .claim-month-row {
  border-radius: 0;
  border-color: var(--border-color);
  background: rgba(255, 255, 255, 0.03);
}
body.theme-bat-e66 .claim-month { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* Pills — square, mono uppercase, matches style-tile badge spec. */
body.theme-bat-e66 .pill {
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
body.theme-bat-e66 .pill-danger { color: #ff6b5c; border-color: rgba(230, 57, 47, 0.45); }
body.theme-bat-e66 .pill-success { border-color: rgba(63, 157, 82, 0.4); }
body.theme-bat-e66 .pill-warn { border-color: rgba(226, 160, 32, 0.4); }

/* Arrears modal + payment countdown — square corners, no blur, tokens already cascade colour. */
body.theme-bat-e66 .arrears-modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.theme-bat-e66 .arrears-modal { border-radius: 0; border-color: rgba(230, 57, 47, 0.5); }
body.theme-bat-e66 .arrears-modal-icon { border-radius: 0; }
body.theme-bat-e66 .arrears-modal-months { border-radius: 0; font-family: var(--font-mono); }
body.theme-bat-e66 .payment-countdown { border-radius: 0; border-color: rgba(226, 160, 32, 0.4); max-width: 400px; }
body.theme-bat-e66 .pc-num { font-family: var(--font-heading); font-style: italic; }
body.theme-bat-e66 .payment-countdown-bar { border-radius: 0; height: 6px; }
body.theme-bat-e66 .payment-countdown-bar-fill { background: var(--grad); }

/* ============================================================
   Admin shell (includes/admin_header.php) — sidebar, topbar,
   panels, tables, stat cards. Loaded on EVERY admin page, so
   this one block carries the identity system across the whole
   panel (Dashboard, Klien, Bulan Pembayaran, Bayaran & Resit,
   Generate Baucer, Selenggara Cop, Demand Amoun, Log Carian,
   Tetapan, Tukar ID, Pengurusan Admin).
   ============================================================ */
body.theme-bat-e66 .sidebar {
  background: #0c0c0c;
  border-right: 1px solid var(--border-color);
}
body.theme-bat-e66 .sidebar .brand {
  border-bottom: 3px solid transparent;
  border-image: var(--grad) 1;
}
body.theme-bat-e66 .sidebar .brand .name { font-family: var(--font-heading); font-style: italic; letter-spacing: 0; }
body.theme-bat-e66 .sidebar .brand .name small { font-family: var(--font-mono); letter-spacing: 0.12em; }
body.theme-bat-e66 .sidebar nav a { border-radius: 0; font-family: var(--font-body); }
body.theme-bat-e66 .sidebar nav a.active {
  background: rgba(255, 59, 22, 0.12);
  border-left-color: var(--gold);
  box-shadow: none;
}
body.theme-bat-e66 .sidebar nav a [class^="icon-"] { color: var(--gold); }
body.theme-bat-e66 .sidebar .foot { border-top-color: var(--border-color); }

body.theme-bat-e66 .topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #0c0c0c;
  border-bottom-color: var(--border-color);
}
body.theme-bat-e66 .topbar h1 { font-family: var(--font-heading); font-style: italic; transform: skewX(-4deg); transform-origin: left center; }
body.theme-bat-e66 .topbar .who { border-left-color: var(--border-color); font-family: var(--font-mono); font-size: 0.75rem; }
body.theme-bat-e66 .topbar .who .icon-user { background: var(--gold); color: #fff; border-radius: 0; }

/* Panels — gradient top edge, flat, no blur (same recipe as client pages). */
body.theme-bat-e66 .panel,
body.theme-bat-e66 .stat-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #111;
  border: 0;
  border-top: 3px solid transparent;
  border-image: var(--grad) 1;
}
body.theme-bat-e66 .stat-card:hover { transform: none; border-image: var(--grad) 1; box-shadow: var(--shadow-soft); }
body.theme-bat-e66 .stat-card .label { font-family: var(--font-mono); letter-spacing: 0.1em; font-size: 0.66rem; }
body.theme-bat-e66 .stat-card .value { font-family: var(--font-heading); font-style: italic; }
body.theme-bat-e66 .dashboard-section-title {
  font-family: var(--font-heading);
  font-style: italic;
  transform: skewX(-4deg);
  transform-origin: left center;
  border-bottom-color: var(--border-color);
}

/* Tables — dark mono header, square status pills, subtle zebra. */
body.theme-bat-e66 table { font-size: 0.85rem; }
body.theme-bat-e66 th {
  background: #0c0c0c;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
body.theme-bat-e66 td { border-bottom-color: var(--border-color); }
body.theme-bat-e66 tbody tr:hover { background: rgba(255, 59, 22, 0.05); }

/* Buttons/pills inside admin (same rules as client, but not yet scoped generically). */
body.theme-bat-e66 .btn-danger { border-color: var(--danger); color: var(--danger); }
body.theme-bat-e66 .btn-danger:hover { background: var(--danger); color: #fff; }

/* Confirm modal — square, no glow. */
body.theme-bat-e66 .confirm-modal { border-radius: 0; box-shadow: var(--shadow-soft); }
body.theme-bat-e66 .confirm-modal-icon { border-radius: 0; }
body.theme-bat-e66 .confirm-modal-message { font-family: var(--font-body); }

/* Bulan Pembayaran — minggu grid + tempoh bayaran rows. */
body.theme-bat-e66 .minggu-box input,
body.theme-bat-e66 .payment-window-row input { border-radius: 0; }
body.theme-bat-e66 .payment-window-row { border-radius: 0; background: rgba(255, 255, 255, 0.03); }
body.theme-bat-e66 .payment-window-month strong { font-family: var(--font-heading); font-style: italic; }

/* Details/summary disclosure widgets used throughout admin tables. */
body.theme-bat-e66 details summary .btn { border-radius: 0; }