/* =====================================================================
   THEME V2 - colourful redesign (approved mockups). Pure override layer:
   later in the cascade than the rules above, so it restyles without
   touching any page logic. Palette: indigo -> violet -> pink gradient,
   amber/teal/sky accents, soft lavender page background.
   ===================================================================== */
:root {
  --g-main: linear-gradient(110deg, #4338ca, #7c3aed 55%, #db2777);
  --g-main-v: linear-gradient(170deg, #4338ca, #7c3aed 55%, #db2777);
  --primary: #4338ca;
  --primary-dark: #3730a3;
  --bg: #f4f1ff;
  --radius: 18px;
}
body, .phone-app { background: #f4f1ff; }

/* ---------- Top bar (mobile + submitters) ---------- */
.phone-app .topbar {
  background: var(--g-main);
  box-shadow: 0 4px 16px rgba(67, 56, 202, 0.25);
}
.phone-app .topbar .container-fluid { padding-top: 6px !important; padding-bottom: 6px !important; gap: 6px; }
.phone-app .brand { color: #fff !important; gap: 10px; }
.phone-app .brand-title { color: #fff; font-size: 0.95rem; line-height: 1.35; display: block; }
.phone-app .brand-subtitle { color: #e0dcff; font-size: 0.72rem; display: block !important; opacity: 1; margin-top: 0; }
.phone-app.has-post .brand-subtitle { display: none !important; }
.phone-app .top-post-info { color: #fff; }
.phone-app .top-post-info #topPostPhone { color: #e0dcff; }
.phone-app .brand-logo, .phone-app .brand-fallback {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(255,255,255,.85); padding: 2px;
}
.phone-app .brand-fallback { background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; }
.phone-app .notif-bell-btn {
  color: #fff; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.phone-app .notif-bell-btn .badge { background: #e11d48 !important; }
.phone-app #storagePill { background: rgba(255,255,255,.2) !important; color: #fff; min-height: 34px; }
#installAppBtn {
  background: #fbbf24; color: #3b0764; border: 0; border-radius: 12px;
  font-weight: 700; font-size: 0.78rem; padding: 6px 12px; white-space: nowrap;
}

/* ---------- Ticker ---------- */
.credit-marquee {
  background: linear-gradient(90deg, #fde68a, #fbcfe8);
  border-bottom: 0;
  min-height: 30px;
}
.credit-marquee-track span { color: #3b0764; font-size: 0.8rem; padding: 4px 0; padding-right: 40px; }

/* ---------- Floating bottom tab bar ---------- */
.phone-app .phone-bottom-nav {
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  padding: 6px;
  gap: 2px;
  box-shadow: 0 8px 28px rgba(49, 27, 146, 0.22);
}
.phone-bottom-nav a, .phone-bottom-nav button {
  color: #4b5565;
  border-radius: 16px;
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  font-size: 0.72rem;
}
.phone-bottom-nav i { font-size: 1.3rem; margin-bottom: 0; }
.phone-bottom-nav .is-active {
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  color: #5b21b6;
  font-weight: 700;
}
.phone-app main.container, .phone-app main.container-fluid { padding-bottom: 100px; }

/* ---------- Page background / hero / cards / buttons ---------- */
.phone-app .hero {
  background: var(--g-main);
  color: #fff;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.3);
}
.phone-app .hero h1 { color: #fff; }
.phone-app .hero p { color: #ece8ff; }
.card, .section-card { border-radius: 18px; border-color: #ece8ff; box-shadow: 0 2px 8px rgba(49, 27, 146, 0.07); }
.btn-primary {
  background: var(--g-main) !important;
  border: 0 !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.3);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); }
.btn { min-height: 40px; }
.form-control, .form-select { border-color: #d9d4f0; background-color: #faf9ff; }
.form-control:focus, .form-select:focus {
  border-color: #7c3aed; box-shadow: 0 0 0 4px #ede9fe; background-color: #fff;
}
.section-title .icon { background: linear-gradient(135deg, #ede9fe, #fce7f3); color: #6d28d9; }

/* Colourful stat cards (reports + dashboard) */
.stat-card { border: 0 !important; color: #fff; position: relative; overflow: hidden; }
.stat-card .stat-label { color: rgba(255,255,255,.92) !important; }
.stat-card .stat-value { color: #fff !important; }
.stat-card .stat-icon { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.stat-card::after { content: ''; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.16); pointer-events: none; }
*:nth-child(5n+1) > .stat-card { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
*:nth-child(5n+2) > .stat-card { background: linear-gradient(135deg, #10b981, #0d9488); }
*:nth-child(5n+3) > .stat-card { background: linear-gradient(135deg, #f59e0b, #ea580c); }
*:nth-child(5n+4) > .stat-card { background: linear-gradient(135deg, #ec4899, #9333ea); }
*:nth-child(5n+5) > .stat-card { background: linear-gradient(135deg, #6366f1, #7c3aed); }

/* ---------- Desktop: staff get a left sidebar ---------- */
@media (min-width: 992px) {
  .staff-app .phone-bottom-nav { display: none !important; }
  .staff-app main.container, .staff-app main.container-fluid { padding-bottom: 32px; margin-left: 256px; width: auto; max-width: none; }
  .staff-app .credit-marquee { margin-left: 256px; top: 0 !important; }
  .staff-app .topbar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 256px;
    padding: 0; background: var(--g-main-v); overflow-y: auto;
    box-shadow: 4px 0 24px rgba(49, 27, 146, 0.18);
  }
  .staff-app .topbar .container-fluid {
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    min-height: 100%; padding: 22px 14px !important; gap: 8px;
  }
  .staff-app .brand { padding: 0 6px 14px; }
  .staff-app .brand-logo, .staff-app .brand-fallback { width: 52px; height: 52px; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
  .staff-app .brand-title { font-size: 0.95rem; }
  .phone-app.staff-app .nav-actions {
    display: flex !important; flex-direction: column; align-items: stretch !important;
    gap: 6px !important; flex: 1 1 auto; order: 2;
  }
  .staff-app .nav-actions > span.text-white-50 { display: none !important; }
  .staff-app .nav-actions .nav-pill {
    display: flex; align-items: center; gap: 10px; text-align: left;
    height: 46px; padding: 0 14px !important; border: 0 !important;
    border-radius: 14px !important; color: #ece8ff !important; font-size: 0.92rem;
  }
  .staff-app .nav-actions .nav-pill i { margin: 0 !important; font-size: 1.1rem; }
  .staff-app .nav-actions .nav-pill:hover { background: rgba(255,255,255,.16) !important; }
  .staff-app .nav-actions .nav-pill.active {
    background: #fff !important; color: #5b21b6 !important; font-weight: 700;
    box-shadow: 0 6px 16px rgba(30, 16, 90, .25);
  }
  .staff-app .nav-actions .btn-outline-warning {
    margin-top: auto; border: 0; background: rgba(255,255,255,.16); color: #fff; height: 44px;
    border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .staff-app .nav-actions .btn-outline-warning:hover { background: rgba(255,255,255,.28); color: #fff; }
  .staff-app .topbar > .container-fluid > .notif-bell-btn { order: 1; align-self: flex-start; }
  .staff-app #storagePill { order: 1; margin-left: 0 !important; align-self: flex-start; }
}

/* ---------- Login page ---------- */
.login-page { background: var(--g-main-v) fixed; min-height: 100vh; }
.login-page .topbar, .login-page .credit-marquee, .login-page .phone-bottom-nav { display: none !important; }
.login-page main.container-fluid { padding-bottom: 24px; }
.login-hero { text-align: center; color: #fff; padding: 18px 12px 4px; }
.login-hero .ring {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 8px;
  background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center;
}
.login-hero .ring > * {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #fff; padding: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.55);
}
.login-hero .ring .brand-fallback { background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; font-size: 44px; display: flex; align-items: center; justify-content: center; }
.login-hero .hello { color: #fde68a; font-weight: 700; font-size: 0.95rem; }
.login-hero h1 { font-size: 1.35rem; font-weight: 700; margin: 2px 0; color: #fff; }
.login-hero .sub { color: #ebe7ff; font-size: 0.85rem; }
.login-page .login-card {
  border: 0; border-radius: 26px; box-shadow: 0 18px 40px rgba(30, 16, 90, .35);
}
#loginTabRow {
  background: #f1eefc; border-radius: 15px; padding: 4px; gap: 4px !important;
}
#loginTabRow .btn {
  border: 0 !important; border-radius: 12px !important; background: transparent !important;
  color: #4b5565 !important; min-height: 44px; box-shadow: none; font-weight: 500;
}
#loginTabRow .btn.btn-primary {
  background: linear-gradient(100deg, #4338ca, #7c3aed) !important; color: #fff !important;
  font-weight: 700; box-shadow: 0 4px 10px rgba(124, 58, 237, .35);
}
.login-page .input-group-text { background: #faf9ff !important; border-color: #d9d4f0 !important; color: #6d28d9; }
.login-page .field-label { font-weight: 700; font-size: 0.85rem; }
.login-page .form-control, .login-page .form-select { min-height: 50px; border-radius: 14px; }
.login-page #loginSubmitBtn { min-height: 54px; border-radius: 15px; font-size: 1.05rem; }

/* ---------- Per-field validation (submit form) ---------- */
.field-error-msg { color: #b42318; font-size: 0.8rem; font-weight: 700; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.form-control.is-invalid, .form-select.is-invalid, .khmer-date-text.is-invalid {
  border-color: #e11d48 !important; background-color: #fff5f6 !important;
  box-shadow: 0 0 0 4px #ffe4e8 !important;
}
.photo-zone.is-invalid, #photoThumbnails.is-invalid { outline: 2px solid #e11d48; outline-offset: 2px; border-radius: 16px; }

.dash-stat { color: #fff !important; border: 0 !important; position: relative; overflow: hidden; }
.dash-stat .label, .dash-stat .sub { color: rgba(255,255,255,.92) !important; }
.dash-stat .value { color: #fff !important; }
.dash-stat::after { content: ''; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.16); pointer-events: none; }
*:nth-child(4n+1) > .dash-stat { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; }
*:nth-child(4n+2) > .dash-stat { background: linear-gradient(135deg, #10b981, #0d9488) !important; }
*:nth-child(4n+3) > .dash-stat { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; }
*:nth-child(4n+4) > .dash-stat { background: linear-gradient(135deg, #ec4899, #9333ea) !important; }
.login-page .input-group { border-radius: 14px; }

.stat-card .stat-label, .stat-card .stat-value, .stat-card .stat-value *, .stat-card small, .stat-card div, .stat-card span { color: rgba(255,255,255,.95) !important; }
.stat-card .stat-value { color: #fff !important; }
.reports-table-wrap table td:nth-child(-n+5), .reports-table-wrap table th:nth-child(-n+5) { white-space: nowrap; }

/* Table look is fixed by the design (no per-user colour setting). */
.table, .table td, .table tbody td { border-color: #eef1f6 !important; }
.table tbody tr:nth-child(even) td { background-color: #faf9ff !important; }
.table thead th, .hierarchy-children .table thead th, .province-children .table thead th {
  background: linear-gradient(100deg, #4338ca, #7c3aed) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important;
}
.table .badge.bg-light { background-color: #ede9fe !important; color: #4c1d95 !important; }
.table .post-group-row td, .table tr.post-group-row > td { background-color: #ede9fe !important; color: #4c1d95 !important; font-weight: 700; }
.table .btn-outline-secondary, .table .btn-outline-danger, .table .btn-outline-primary,
.table .btn-outline-success, .table .btn-outline-warning, .table .btn-outline-info { color: #4c1d95 !important; border-color: #c4b5fd !important; }

/* Keep the last button on every page well clear of the floating tab bar. */
.phone-app main.container, .phone-app main.container-fluid, .phone-app.staff-app main.container, .phone-app.staff-app main.container-fluid { padding-bottom: 176px !important; }
#submitBtnWrap { margin-top: 24px; margin-bottom: 20px; }
#submitBtnWrap .btn { min-height: 58px; border-radius: 16px; font-size: 1.1rem; }
#submitStatusBox { margin-bottom: 24px; }
@media (min-width: 992px) {
  .phone-app.staff-app main.container, .phone-app.staff-app main.container-fluid { padding-bottom: 32px !important; }
}

/* ---------- Tap responsiveness ---------- */
a, button, .btn, .nav-pill, [role="button"], input, select, label, summary { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(124, 58, 237, .12); }
.phone-bottom-nav a:active, .phone-bottom-nav button:active, .btn:active, .nav-pill:active {
  transform: scale(.95); transition: transform .06s;
}
.phone-bottom-nav a.nav-going { background: linear-gradient(135deg, #ede9fe, #fce7f3); color: #5b21b6; }
#navProgress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 3000; pointer-events: none;
  background: linear-gradient(90deg, #fbbf24, #ec4899, #7c3aed); opacity: 0;
  box-shadow: 0 0 8px rgba(236, 72, 153, .6);
}
#navProgress.on { opacity: 1; width: 85%; transition: width 6s cubic-bezier(.1,.7,.2,1), opacity .1s; }
/* lighter paint on phones: no heavy blur/large shadows while scrolling */
@media (max-width: 991px) {
  .card, .section-card { box-shadow: 0 1px 4px rgba(49, 27, 146, 0.08); }
  .phone-app .phone-bottom-nav { box-shadow: 0 4px 14px rgba(49, 27, 146, 0.2); }
}

/* ---------- Submitter top bar once a post is chosen (approved mockup A) ----------
   Big logo (already carries the app name) + post name and phone, both blocks
   exactly the same height. */
.phone-app.has-post:not(.staff-app) .topbar .container-fluid { padding-top: 10px !important; padding-bottom: 10px !important; }
.phone-app.has-post:not(.staff-app) .brand { gap: 12px; min-width: 0; flex: 1 1 auto; }
.phone-app.has-post:not(.staff-app) .brand-logo,
.phone-app.has-post:not(.staff-app) .brand-fallback {
  width: 68px; height: 68px; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.4);
}
.phone-app.has-post:not(.staff-app) .brand > span:last-child { min-width: 0; flex: 1 1 auto; }
.phone-app.has-post:not(.staff-app) .brand-title { display: none !important; }
.phone-app.has-post:not(.staff-app) .top-post-info {
  display: flex !important; flex-direction: column; justify-content: space-between;
  height: 68px; min-width: 0; line-height: 1.3;
}
.phone-app.has-post:not(.staff-app) .top-post-info #topPostName {
  display: block !important; font-size: 1.05rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px;
}
.phone-app.has-post:not(.staff-app) .top-post-info #topPostPhone {
  display: inline-flex !important; align-items: center; gap: 6px; align-self: flex-start;
  height: 32px; margin: 0; padding: 0 12px; border-radius: 14px;
  background: rgba(255,255,255,.22); color: #fff; font-size: .88rem; font-weight: 500;
}
.phone-app.has-post:not(.staff-app) .top-post-info #topPostPhone:empty { display: none !important; }
.phone-app.has-post:not(.staff-app) .top-post-info #topPostPhone::before {
  content: "\f5b4"; font-family: "bootstrap-icons"; font-size: .85rem;
}

/* ---------- Tables: centred headers + clear row highlight ---------- */
.table thead th { text-align: center !important; vertical-align: middle; }
.table tbody tr:not(.post-group-row):hover > td,
.table tbody tr.row-active > td {
  background-color: #e4dcff !important; color: #2e1065 !important; font-weight: 700;
  box-shadow: inset 0 2px 0 #7c3aed, inset 0 -2px 0 #7c3aed !important;
}
.table tbody tr:not(.post-group-row):hover > td .badge,
.table tbody tr.row-active > td .badge { font-weight: 700; }
.table tbody tr { cursor: default; }
@media (hover: none) { .table tbody tr:not(.row-active):hover > td { box-shadow: none !important; } }
/* give the post name room: install button shrinks to an icon in this state */
.phone-app.has-post:not(.staff-app) #installAppBtn { font-size: 0; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.phone-app.has-post:not(.staff-app) #installAppBtn i { font-size: 1.15rem; margin: 0 !important; }
.phone-app.has-post:not(.staff-app) .topbar .container-fluid { gap: 2px; }
.phone-app.has-post:not(.staff-app) .notif-bell-btn { min-width: 40px; padding-left: 4px; padding-right: 4px; }
.phone-app.has-post:not(.staff-app) .top-post-info #topPostName {
  white-space: normal; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: .92rem; line-height: 1.25; padding-top: 0;
}
.phone-app.has-post:not(.staff-app) .top-post-info #topPostPhone { height: 30px; }

/* ---------- Offline indicator (crossed-out Wi-Fi) ---------- */
.offline-wifi { width: 44px; height: 44px; border-radius: 14px; background: #fbbf24; color: #3b0764; align-items: center; justify-content: center; flex: none; margin-left: auto; }
.offline-wifi.is-on { display: inline-flex !important; }
.offline-wifi + .notif-bell-btn { margin-left: 6px; }

/* ---------- Desktop: tables always fit the page (no sideways scroll bar) ---------- */
@media (min-width: 992px) {
  .table-responsive { overflow-x: hidden !important; }
  .table-responsive > .table, .table-responsive table { width: 100% !important; min-width: 0 !important; table-layout: auto; }
  .table-responsive .table th, .table-responsive .table td,
  .reports-table-wrap table td:nth-child(-n+5), .reports-table-wrap table th:nth-child(-n+5) {
    white-space: normal !important; word-break: normal; overflow-wrap: normal;
    padding: .5rem .35rem !important; font-size: .8rem; line-height: 1.35;
  }
  .table-responsive .table th { font-size: .78rem; }
  .table-responsive .table .btn, .table-responsive .table .btn-sm { padding: .2rem .4rem; font-size: .75rem; }
}

/* ---------- Official report: white header text on strong colours (approved mockup) ---------- */
.official-report-table thead th,
.province-summary-table thead th,
.reports-summary-table thead th { background: #4338ca !important; color: #fff !important; border-color: rgba(255,255,255,.28) !important; }
.official-report-table thead th.group-pub,
.province-summary-table thead th.group-pub,
.reports-summary-table thead th.group-pub { background: linear-gradient(100deg, #f59e0b, #ea580c) !important; }
.official-report-table thead th.group-forum,
.province-summary-table thead th.group-forum,
.reports-summary-table thead th.group-forum { background: linear-gradient(100deg, #10b981, #0d9488) !important; }
.official-report-table thead th.sub-pub,
.province-summary-table thead th.sub-pub,
.reports-summary-table thead th.sub-pub { background: #c2410c !important; }
.official-report-table thead th.sub-forum,
.province-summary-table thead th.sub-forum,
.reports-summary-table thead th.sub-forum { background: #0f766e !important; }

/* ---------- Delete buttons: always clearly red ---------- */
.table .btn-outline-danger, .btn-outline-danger, .village-delete-btn, .tg-del, .tg-del-thread {
  color: #dc2626 !important; border-color: #dc2626 !important; background-color: #fff1f2 !important;
}
.table .btn-outline-danger:hover, .btn-outline-danger:hover, .village-delete-btn:hover {
  color: #fff !important; background-color: #dc2626 !important; border-color: #dc2626 !important;
}
.table .btn-outline-danger i, .village-delete-btn i { color: inherit !important; }
.table tbody tr:hover > td .btn-outline-danger, .table tbody tr.row-active > td .btn-outline-danger { background-color: #fff !important; }
.table .btn-outline-danger, .btn-outline-danger { background-color: #dc2626 !important; color: #fff !important; }
.table .btn-outline-danger:hover, .btn-outline-danger:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; }
.table tbody tr:hover > td .btn-outline-danger, .table tbody tr.row-active > td .btn-outline-danger { background-color: #dc2626 !important; }

/* Modals (e.g. the live camera) must sit above the floating bottom bar */
.modal { z-index: 2100 !important; }
.modal-backdrop { z-index: 2090 !important; }

/* ---------- Generic "enlarge table to full screen" ---------- */
.tbl-fs-bar { display: flex; justify-content: flex-end; padding: 6px 8px 4px; }
.tbl-fs-btn { border: 1.5px solid #c4b5fd; background: #fff; color: #4c1d95; border-radius: 10px; font-size: .82rem; font-weight: 700; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tbl-fs-btn:hover { background: #ede9fe; }
.tbl-fs-on { position: fixed !important; inset: 0 !important; z-index: 2000 !important; background: #fff !important; margin: 0 !important; border-radius: 0 !important; max-height: none !important; height: 100vh !important; overflow: auto !important; padding: 0 8px 12px !important; }
.tbl-fs-on > .tbl-fs-bar { position: sticky; top: 0; left: 0; z-index: 30; background: #fff; padding: 10px 4px 8px; }
.tbl-fs-on > table, .tbl-fs-on table.table { width: 100% !important; }
.tbl-fs-on thead th { position: sticky !important; top: 46px !important; z-index: 20; }
body.tbl-fs-open { overflow: hidden; }
@media print { .tbl-fs-bar { display: none !important; } }

/* Offline: the header is crowded on narrow phones - installing is impossible
   offline anyway, so hide that button and the long subtitle to keep the title on 1-2 lines. */
.topbar:has(.offline-wifi.is-on) #installAppBtn { display: none !important; }
.topbar:has(.offline-wifi.is-on) .brand-subtitle { display: none !important; }
.offline-wifi { width: 40px; height: 40px; border-radius: 12px; }