/* ========================================================================== 
   RCH OS DESIGN SYSTEM v2 — Territory
   Visual-only layer. No application logic or Supabase behavior is changed.
   ========================================================================== */

:root {
  --rch-navy-950: #031327;
  --rch-navy-900: #061b38;
  --rch-navy-800: #0a2a54;
  --rch-blue-600: #0d6efd;
  --rch-blue-500: #2387ff;
  --rch-cyan-500: #14b8c7;
  --rch-green-500: #11a36a;
  --rch-orange-500: #f79009;
  --rch-red-500: #e53935;
  --rch-violet-500: #7a5af8;
  --rch-magenta-500: #d946ef;
  --rch-ink: #101828;
  --rch-muted: #667085;
  --rch-line: #dfe7f1;
  --rch-canvas: #eef4fb;
  --rch-panel: #ffffff;
  --rch-panel-soft: #f7faff;
  --rch-shadow-1: 0 5px 16px rgba(3, 19, 39, .06);
  --rch-shadow-2: 0 18px 45px rgba(3, 19, 39, .12);
  --rch-radius-sm: 10px;
  --rch-radius-md: 16px;
  --rch-radius-lg: 22px;
}

html { background: var(--rch-canvas); }
body {
  color: var(--rch-ink) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(35, 135, 255, .10), transparent 27%),
    linear-gradient(180deg, #f5f8fd 0%, var(--rch-canvas) 100%) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 320px;
  background: linear-gradient(135deg, rgba(13, 110, 253, .08), rgba(20, 184, 199, .02));
  pointer-events: none;
}

/* Global header ----------------------------------------------------------- */
.app-shell { background: transparent !important; }
.topbar {
  min-height: 86px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  gap: 18px !important;
  color: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% -70%, rgba(35, 135, 255, .48), transparent 45%),
    linear-gradient(110deg, var(--rch-navy-950), var(--rch-navy-900) 56%, #082b58) !important;
  box-shadow: 0 10px 30px rgba(3, 19, 39, .18) !important;
  backdrop-filter: none !important;
}

.brand-block { min-width: 286px; gap: 13px !important; }
.brand-mark {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 52px !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, var(--rch-blue-500), #4f46e5) !important;
  box-shadow: 0 10px 26px rgba(13,110,253,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
  font-size: 0 !important;
  font-weight: 900 !important;
}
.brand-mark::after {
  content: "RCH";
  font-size: 14px;
  letter-spacing: -.05em;
}
.brand-copy h1,
.topbar h1 {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}
.brand-copy p,
.topbar p {
  margin-top: 3px !important;
  color: #a9bdd8 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
}

.topbar-middle { min-width: 0; flex: 1 1 auto !important; }
.auth-box {
  min-height: 46px !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.auth-box input {
  height: 36px !important;
  color: #eef6ff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.075) !important;
}
.auth-box input::placeholder { color: #8fa8c7 !important; }
.auth-box input:focus {
  border-color: rgba(91, 166, 255, .72) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 3px rgba(35,135,255,.18) !important;
}
#authStatus { color: #b8c8dc !important; font-size: 12px !important; }

.topbar-actions { gap: 7px !important; }
.topbar .btn {
  min-height: 38px !important;
  padding: 8px 11px !important;
  color: #eaf2ff !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
.topbar .btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.13) !important;
  transform: translateY(-1px) !important;
}
.topbar .btn.primary {
  border-color: #2387ff !important;
  background: linear-gradient(135deg, #2387ff, #0d6efd) !important;
  box-shadow: 0 7px 18px rgba(13,110,253,.28) !important;
}
.topbar .btn svg { width: 17px !important; height: 17px !important; }
.status-pill {
  min-height: 36px !important;
  padding: 0 11px !important;
  color: #d8e6f7 !important;
  border-color: rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
.status-pill.online {
  color: #66efb1 !important;
  border-color: rgba(102,239,177,.27) !important;
  background: rgba(17,163,106,.15) !important;
}
.role-scope-director {
  color: #ffd17c !important;
  border-color: rgba(247,144,9,.32) !important;
  background: rgba(247,144,9,.14) !important;
}
.role-scope-mobile {
  color: #66efb1 !important;
  border-color: rgba(17,163,106,.31) !important;
  background: rgba(17,163,106,.14) !important;
}

/* KPI strip --------------------------------------------------------------- */
.kpi-bar {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 11px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  background: transparent !important;
}
.kpi-card {
  --kpi-accent: var(--rch-blue-500);
  --kpi-soft: #e9f3ff;
  position: relative !important;
  min-height: 88px !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 13px 14px 13px 16px !important;
  border: 1px solid rgba(212, 223, 236, .96) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--rch-shadow-1) !important;
}
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--kpi-accent);
}
.kpi-card::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -29px;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: var(--kpi-soft);
}
.kpi-card.danger { --kpi-accent: var(--rch-red-500); --kpi-soft: #fff0ef; }
.kpi-card.warning { --kpi-accent: var(--rch-magenta-500); --kpi-soft: #fbeeff; }
.kpi-card.info { --kpi-accent: var(--rch-violet-500); --kpi-soft: #f1efff; }
.kpi-card.success { --kpi-accent: var(--rch-green-500); --kpi-soft: #eafaf3; }
.kpi-card.purple { --kpi-accent: var(--rch-magenta-500); --kpi-soft: #fbeeff; }
.kpi-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 40px !important;
  border-radius: 12px !important;
  color: var(--kpi-accent) !important;
  background: var(--kpi-soft) !important;
}
.kpi-icon svg { width: 20px !important; height: 20px !important; }
.kpi-copy { position: relative !important; z-index: 1 !important; min-width: 0; }
.kpi-card span {
  color: #111827 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
}
.kpi-card small {
  display: block !important;
  margin-top: 6px !important;
  color: var(--rch-muted) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

/* Main canvas ------------------------------------------------------------- */
.workspace {
  grid-template-columns: 292px minmax(480px, 1fr) 340px !important;
  gap: 12px !important;
  padding: 0 18px 18px !important;
}
.sidebar {
  padding: 15px !important;
  border: 1px solid var(--rch-line) !important;
  border-radius: var(--rch-radius-lg) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--rch-shadow-1) !important;
  scrollbar-width: thin;
  scrollbar-color: #aebed1 transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8c5d5; }
.sidebar h2 {
  margin: 2px 0 12px !important;
  color: var(--rch-navy-900) !important;
  font-size: 17px !important;
  letter-spacing: -.025em !important;
}
.sidebar h2:not(:first-child) {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e8eef5 !important;
}
.sidebar label {
  margin: 11px 0 6px !important;
  color: #475467 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.sidebar input,
.sidebar select,
.sidebar textarea {
  min-height: 42px !important;
  padding: 10px 12px !important;
  color: #1d2939 !important;
  border: 1px solid #d6e0eb !important;
  border-radius: 11px !important;
  background: #fbfdff !important;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.025) !important;
}
.sidebar input:focus,
.sidebar select:focus,
.sidebar textarea:focus {
  border-color: #72adff !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(35,135,255,.12) !important;
}
.filter-actions-grid { gap: 7px !important; }
.filter-action-btn {
  min-height: 38px !important;
  margin-top: 8px !important;
  color: #344054 !important;
  border-color: #dbe4ef !important;
  background: #f7faff !important;
}
.filter-row {
  min-height: 48px;
  margin-top: 12px !important;
  padding: 10px 11px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
}
.filter-row label { margin: 0 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; }

.area-list { gap: 8px !important; }
.area-item,
.area-item-button {
  position: relative !important;
  min-height: 66px !important;
  padding: 11px 12px 11px 16px !important;
  overflow: hidden !important;
  color: #344054 !important;
  border: 1px solid #e0e7ef !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(16,24,40,.035) !important;
}
.area-item::before,
.area-item-button::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(#2387ff, #6a8cff);
}
.area-item:hover,
.area-item-button:hover {
  border-color: #9bc7ff !important;
  background: #f8fbff !important;
  box-shadow: 0 8px 20px rgba(13,110,253,.08) !important;
  transform: translateY(-1px);
}
.area-item strong { color: #172033 !important; font-size: 13px !important; }
.area-item span { color: #667085 !important; font-size: 11px !important; }

.map-wrap {
  position: relative !important;
  border: 1px solid #ccd9e8 !important;
  border-radius: 22px !important;
  background: #dfe8f3 !important;
  box-shadow: 0 12px 32px rgba(3,19,39,.10) !important;
}
#map { background: #dfe8f3 !important; }
.map-fullscreen-btn,
.map-fullscreen-close-btn {
  min-height: 41px !important;
  padding: 9px 13px !important;
  color: #344054 !important;
  border: 1px solid rgba(208,213,221,.92) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 6px 18px rgba(3,19,39,.12) !important;
  backdrop-filter: blur(10px) !important;
}
.leaflet-control-zoom,
.leaflet-draw-toolbar {
  overflow: hidden;
  border: 1px solid rgba(208,213,221,.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(3,19,39,.12) !important;
}
.leaflet-control-zoom a,
.leaflet-draw-toolbar a { color: #344054 !important; background: rgba(255,255,255,.96) !important; }
.leaflet-popup-content-wrapper {
  border: 1px solid #dbe5f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(3,19,39,.18) !important;
}
.leaflet-popup-content { margin: 15px 17px !important; }
.popup-title { color: #101828 !important; font-size: 14px !important; letter-spacing: -.01em; }
.popup-actions button {
  color: #0d5ccc !important;
  border: 1px solid #cfe0fb !important;
  background: #f1f7ff !important;
}

/* Right rail -------------------------------------------------------------- */
.right-panel { padding: 13px !important; }
.panel-card {
  margin-bottom: 11px !important;
  padding: 15px !important;
  border: 1px solid #e0e7ef !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.panel-card h2 {
  color: #172033 !important;
  font-size: 16px !important;
  letter-spacing: -.02em !important;
}
.panel-title-row { padding-bottom: 8px; border-bottom: 1px solid #eef2f6; }
.detail-title { color: #111827 !important; font-size: 18px !important; letter-spacing: -.025em; }
.detail-meta { color: #667085 !important; }
.activity-hero {
  border: 1px solid #d9e4f1 !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #f6f9ff, #fff) !important;
  box-shadow: none !important;
}
.detail-action-row { gap: 8px !important; }
.detail-action-row .btn { min-height: 40px !important; }
.notifications-list,
.route-list { gap: 8px !important; }
.notification-item,
.route-item {
  padding: 11px 12px !important;
  border: 1px solid #e0e7ef !important;
  border-radius: 13px !important;
  background: #fbfdff !important;
}
.notification-item.high { border-color: #ffc9c6 !important; background: #fff5f4 !important; }
.route-summary {
  padding: 12px !important;
  border: 1px dashed #c7d5e7 !important;
  border-radius: 13px !important;
  background: #f8fbff !important;
}

/* Shared components ------------------------------------------------------- */
.btn {
  border-radius: 11px !important;
  font-weight: 780 !important;
  box-shadow: none;
}
.btn.primary {
  color: #fff !important;
  border-color: #0d6efd !important;
  background: linear-gradient(135deg, #2387ff, #0d6efd) !important;
  box-shadow: 0 7px 16px rgba(13,110,253,.20) !important;
}
.btn.secondary {
  color: #344054 !important;
  border: 1px solid #d5dfe9 !important;
  background: #fff !important;
}
.btn:not(.topbar .btn):hover { transform: translateY(-1px); }
.badge {
  padding: 5px 9px !important;
  border: 1px solid rgba(208,213,221,.65) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .015em;
}

/* Dialogs: analytics, data quality and reader ---------------------------- */
.analytics-backdrop,
.reader-backdrop {
  background: rgba(3, 19, 39, .58) !important;
  backdrop-filter: blur(6px) !important;
}
.analytics-panel,
.quality-panel,
.reader-panel {
  border: 1px solid rgba(218,228,240,.95) !important;
  border-radius: 26px !important;
  background: #f7faff !important;
  box-shadow: 0 30px 90px rgba(3,19,39,.30) !important;
}
.analytics-header,
.quality-header,
.reader-header {
  border-bottom: 1px solid #e2e9f2 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px) !important;
}
.analytics-header h2,
.quality-header h2,
.reader-header h2 {
  color: #101828 !important;
  letter-spacing: -.035em !important;
}
.analytics-card,
.quality-card,
.reader-card,
.analytics-kpi,
.quality-kpi,
.reader-kpi,
.analytics-progress-card,
.reader-progress-card {
  border: 1px solid #dde6f0 !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(3,19,39,.045) !important;
}
.analytics-bar-track,
.reader-bar-track,
.assignee-progress-item { background: #e8eef5 !important; }
.analytics-progress-bar,
.reader-progress-bar,
.assignee-progress-item > i {
  background: linear-gradient(90deg, #0d6efd, #d946ef) !important;
}
.quality-item {
  border: 1px solid #e0e7ef !important;
  border-radius: 14px !important;
  background: #fff !important;
}
.reader-login-box {
  border: 1px solid #d9e4f1 !important;
  border-radius: 18px !important;
  background: #f7faff !important;
}

/* Mobile bottom bar ------------------------------------------------------- */
.mobile-action-bar {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 18px !important;
  background: rgba(3,19,39,.94) !important;
  box-shadow: 0 18px 44px rgba(3,19,39,.26) !important;
  backdrop-filter: blur(14px) !important;
}
.mobile-action-bar button { color: #c7d8ec !important; }
.mobile-action-bar button:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1460px) {
  .workspace { grid-template-columns: 270px minmax(430px,1fr) 318px !important; }
  .topbar { padding-inline: 16px !important; }
  .topbar .btn span { display: none; }
  .topbar .btn { width: 38px !important; padding: 8px !important; }
  #officeNavBtn { width: auto !important; }
  #officeNavBtn span { display: inline !important; }
}

@media (max-width: 1180px) {
  .kpi-bar { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .workspace { grid-template-columns: 270px minmax(0,1fr) !important; }
  .right-panel { display: none !important; }
}

@media (max-width: 820px) {
  .topbar {
    padding: 12px !important;
    gap: 10px !important;
  }
  .brand-block { min-width: 0; }
  .brand-mark { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
  .brand-copy h1 { font-size: 19px !important; }
  .auth-box { width: 100% !important; }
  .kpi-bar { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 10px 12px !important; }
  .kpi-card { min-height: 78px !important; height: 78px !important; }
  .workspace { padding: 0 12px 84px !important; }
  .sidebar { border-radius: 18px !important; }
  .map-wrap { border-radius: 18px !important; }
}

@media (max-width: 560px) {
  .brand-copy p { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .kpi-card span { font-size: 23px !important; }
  .kpi-card small { font-size: 9px !important; }
}