/* ============================================
   NDMA Brand Theme for Frappe
   National Disaster Management Agency

   Green usage rule:
     ONLY navbar, sidebar header, primary buttons,
     active indicators, and focus rings.
     Everything else → neutral grays.
   ============================================ */

/* ── Brand Palette ── */
:root {
  --ndma-green:       #006B3C;
  --ndma-green-dark:  #004D2C;
  --ndma-green-light: #EBF5EF;
  --ndma-green-muted: rgba(0, 107, 60, 0.06);

  /* Override Frappe primary / brand tokens */
  --primary:          #006B3C;
  --primary-color:    #006B3C;
  --brand-color:      #006B3C;
}

/* ── App Logo ── */
.app-logo {
  min-width: 35px !important;
  min-height: 35px !important;
}

/* ══════════════════════════════════════════
   TOP NAVBAR  (green — brand anchor)
══════════════════════════════════════════ */
.desktop-navbar.navbar {
  background-color: var(--ndma-green) !important;
  border-bottom: 2px solid var(--ndma-green-dark) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
.desktop-navbar .desktop-navbar-modal-search {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
}
.desktop-navbar .desktop-navbar-modal-search:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
}
.desktop-navbar .desktop-search-icon,
.desktop-navbar .desktop-keyboard-shortcut,
.desktop-navbar .desktop-navbar-modal-search span {
  color: rgba(255, 255, 255, 0.65) !important;
}
.desktop-navbar .navbar-right .btn-reset svg,
.desktop-navbar .navbar-right .icon {
  color: white !important;
  fill: white !important;
}
.desktop-navbar .avatar-frame {
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.body-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
}

/* Module header — green, as a brand anchor */
.body-sidebar .sidebar-header {
  background-color: var(--ndma-green) !important;
  border-radius: 8px !important;
  margin: 8px 8px 4px !important;
}
.body-sidebar .sidebar-header .sidebar-item-label,
.body-sidebar .sidebar-header .header-title,
.body-sidebar .sidebar-header .sidebar-subtitle {
  color: white !important;
}
.body-sidebar .sidebar-header .icon-container {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.body-sidebar .sidebar-header svg {
  color: white !important;
}

/* "Offline" status badge inside sidebar header */
.sidebar-header .header-subtitle {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  margin-top: 2px !important;
}

/* Sidebar nav items — neutral, green accent on active only */
.body-sidebar .sidebar-item:not(.sidebar-header) {
  color: #374151 !important;
}
.body-sidebar .sidebar-item:not(.sidebar-header):hover {
  background-color: #f3f4f6 !important;
}
.body-sidebar .sidebar-item.selected:not(.sidebar-header) {
  background-color: var(--ndma-green-light) !important;
  border-left: 3px solid var(--ndma-green) !important;
}
.body-sidebar .sidebar-item.selected .sidebar-item-label {
  color: var(--ndma-green) !important;
  font-weight: 600 !important;
}

/* Sidebar bottom area */
.body-sidebar-bottom {
  border-top: 1px solid #e5e7eb !important;
  padding: 8px 4px 4px !important;
}
.body-sidebar-bottom a {
  color: #6b7280 !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
}
.body-sidebar-bottom a:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* ══════════════════════════════════════════
   BUTTONS  (green — interactive)
══════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary {
  background-color: var(--ndma-green) !important;
  border-color: var(--ndma-green) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
  background-color: var(--ndma-green-dark) !important;
  border-color: var(--ndma-green-dark) !important;
}

/* ══════════════════════════════════════════
   PAGE HEADER & BREADCRUMB
══════════════════════════════════════════ */
.page-head {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  min-height: 46px !important;
}

/* Sidebar toggle */
.page-title .sidebar-toggle-btn {
  border-radius: 6px !important;
  color: #6b7280 !important;
}
.page-title .sidebar-toggle-btn:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* Remove Frappe's "/" from anchor pseudo-element */
.navbar-breadcrumbs li + li a::before {
  content: none !important;
  display: none !important;
}
/* Replace with a subtle chevron */
.navbar-breadcrumbs li + li::before {
  content: "›" !important;
  color: #9ca3af !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  margin: 0 5px !important;
  opacity: 1 !important;
}

#navbar-breadcrumbs > li:nth-child(1){
  display: none !important;
}

/* Home / desk icon — subtle neutral pill */
.navbar-breadcrumbs li:first-child a {
  display: inline-flex !important;
  align-items: center !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  color: #6b7280 !important;
  transition: background 0.15s !important;
}
.navbar-breadcrumbs li:first-child a:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
}
.navbar-breadcrumbs li:first-child a svg {
  color: inherit !important;
}
/* Current page — dark, bold, not green */
.navbar-breadcrumbs li:last-child a {
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════
   WORKSPACE CONTENT AREA
══════════════════════════════════════════ */
.layout-main-section-wrapper,
.layout-main-section {
  background-color: #f9fafb !important;
}
.desk-page.page-main-content {
  background: transparent !important;
}
/* Trim the 300px bottom padding from CodeX editor */
.codex-editor__redactor {
  padding-bottom: 40px !important;
}

/* ══════════════════════════════════════════
   SECTION HEADER BLOCKS
══════════════════════════════════════════ */
.ce-header {
  display: flex !important;
  align-items: center !important;
  padding: 6px 14px 6px 14px !important;
  border-left: 3px solid var(--ndma-green) !important;
  background: transparent !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 4px 0 8px !important;
}
.ce-header span.h4,
.ce-header b {
  color: #374151 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════
   SHORTCUT WIDGETS  (quick-link cards)
══════════════════════════════════════════ */
.shortcut-widget-box {
  border: 1px solid #e5e7eb !important;
  border-left: 3px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.15s, border-left-color 0.15s, transform 0.15s !important;
}
.shortcut-widget-box:hover {
  border-left-color: var(--ndma-green) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}
.shortcut-widget-box .widget-head {
  padding: 12px 14px !important;
}
.shortcut-widget-box .widget-title span {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Count badge */
.shortcut-widget-box .indicator-pill {
  background: #f3f4f6 !important;
  color: #374151 !important;
  font-weight: 600 !important;
  border: 1px solid #e5e7eb !important;
}
.shortcut-widget-box:hover .indicator-pill {
  background: var(--ndma-green-light) !important;
  color: var(--ndma-green) !important;
  border-color: rgba(0, 107, 60, 0.2) !important;
}
/* Arrow icon */
.shortcut-widget-box svg {
  color: #9ca3af !important;
}
.shortcut-widget-box:hover svg {
  color: var(--ndma-green) !important;
}

/* ══════════════════════════════════════════
   NUMBER WIDGETS  (stat cards)
══════════════════════════════════════════ */
.number-widget-box {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
  padding: 4px !important;
}
.number-widget-box:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09) !important;
  transform: translateY(-2px) !important;
}
.number-widget-box .widget-head {
  padding: 12px 14px 0 14px !important;
}
.number-widget-box .widget-body {
  padding: 4px 14px 14px !important;
}
.number-widget-box .widget-body .number {
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  line-height: 1.05 !important;
}
.number-widget-box .widget-title span {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  opacity: 0.55 !important;
  color: inherit !important;
}
.number-widget-box .card-actions a {
  color: inherit !important;
  opacity: 0.4 !important;
}

/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
.page-card {
  border-top: 4px solid var(--ndma-green) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}
.login-content .btn-primary,
#login [type="submit"],
.for-login .btn-primary {
  background-color: var(--ndma-green) !important;
  border-color: var(--ndma-green) !important;
  color: #fff !important;
}
.login-content .btn-primary:hover,
.for-login .btn-primary:hover {
  background-color: var(--ndma-green-dark) !important;
}

/* ══════════════════════════════════════════
   FOCUS & MISC
══════════════════════════════════════════ */
:focus-visible {
  outline-color: var(--ndma-green) !important;
}

/* ══════════════════════════════════════════
   GEOLOCATION FIELD
   Frappe v16: base_input adds .hide to disp_area in write mode,
   but Geolocation renders its map there — force it visible.
══════════════════════════════════════════ */
.frappe-control[data-fieldtype="Geolocation"] .control-value {
  display: block !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }