/* Keke Admin - Brand colours & app feel */
:root {
  /* Keke brand (matches mobile app base-green) */
  --keke-primary: 60 143 124;
  --keke-primary-hex: #3C8F7C;
  --keke-primary-dark: #2f7263;
  --keke-radius: 0.75rem;
  --keke-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --keke-card-radius: 1rem;
  --keke-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --keke-header-bg: #ffffff;
  --keke-sidebar-bg: #ffffff;
}
.dark {
  --keke-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --keke-primary-hex: #4aa090;
  --keke-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15);
  --keke-header-bg: rgb(31 41 55);
  --keke-sidebar-bg: rgb(31 41 55);
}
/* Brand buttons and links */
.keke-btn-primary {
  background-color: var(--keke-primary-hex);
  color: white;
}
.keke-btn-primary:hover {
  background-color: var(--keke-primary-dark);
  color: white;
}
.keke-text-primary {
  color: var(--keke-primary-hex);
}
.keke-bg-active {
  background-color: rgb(60 143 124 / 0.15);
}
.dark .keke-bg-active {
  background-color: rgb(74 160 144 / 0.25);
}
#root input:focus,
#root button:focus-visible {
  outline-color: var(--keke-primary-hex);
}
.admin-loading-spinner {
  animation: admin-spin 0.8s linear infinite;
}
@keyframes admin-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Cards: app-like rounded corners and shadow */
#root .rounded-lg.shadow {
  border-radius: var(--keke-card-radius);
  box-shadow: var(--keke-shadow);
}
/* Ensure toasts above modals */
[data-toast] {
  z-index: 9999;
}
/* Login form: ensure inputs are clickable and focusable */
input[type="email"],
input[type="password"],
input[type="text"] {
  pointer-events: auto !important;
  touch-action: manipulation;
}
#root input:focus {
  outline: 2px solid var(--keke-primary-hex);
  outline-offset: 2px;
}
.keke-focus-ring:focus {
  box-shadow: 0 0 0 2px var(--keke-primary-hex);
}
/* Leaflet map container */
.leaflet-container {
  font-family: inherit;
  border-radius: var(--keke-radius);
}

/* Sticky header - stays at top when scrolling */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--keke-header-bg);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
}
.dark .admin-header {
  background-color: var(--keke-sidebar-bg);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

/* Sidebar collapse & hover */
.admin-sidebar {
  box-shadow: 1px 0 0 0 rgb(0 0 0 / 0.05);
}
.dark .admin-sidebar {
  box-shadow: 1px 0 0 0 rgb(255 255 255 / 0.06);
}
.admin-sidebar--collapsed .admin-nav-item {
  justify-content: center;
}
.admin-nav-item:hover {
  background-color: rgb(60 143 124 / 0.08);
}
.dark .admin-nav-item:hover {
  background-color: rgb(74 160 144 / 0.15);
}
.admin-sidebar-toggle {
  justify-content: center;
}
.admin-sidebar--collapsed .admin-sidebar-toggle {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.admin-sidebar--collapsed .admin-sidebar-toggle svg {
  margin: 0;
}

/* Filter & Export in header */
.admin-filter-select:focus {
  outline: none;
  border-color: var(--keke-primary-hex);
  box-shadow: 0 0 0 2px rgb(60 143 124 / 0.2);
}
.admin-export-btn:focus-visible {
  outline: 2px solid var(--keke-primary-hex);
  outline-offset: 2px;
}

/* Profile dropdown */
.admin-profile-dropdown {
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.dark .admin-profile-dropdown {
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.25);
}

/* Dashboard cards - modern blocks with soft shadow and rounded corners */
#root .admin-kpi-card {
  border-radius: 1rem;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.06), 0 1px 3px -1px rgb(0 0 0 / 0.04);
  transition: box-shadow 0.2s ease;
  border: 1px solid rgb(243 244 246);
}
.dark #root .admin-kpi-card {
  border-color: rgb(55 65 81);
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.15);
}
#root .admin-kpi-card:hover {
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.1), 0 4px 8px -2px rgb(0 0 0 / 0.05);
}
.dark #root .admin-kpi-card:hover {
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.25);
}

/* Section titles */
.admin-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17 24 39);
  letter-spacing: -0.01em;
}
.dark .admin-section-title {
  color: rgb(243 244 246);
}