/* ─── Admin Shell — DomiCare Green Design System ────────────── */
/* Tokens derived from stitch.ui/admin.ui/design-system.md and DESIGN.md */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand Greens */
  --admin-primary: #005234;
  --admin-primary-hover: #085E3E;
  --admin-primary-container: #0A6C47;
  --admin-secondary: #006C47;
  --admin-secondary-container: #85F5BD;
  --admin-on-primary: #FFFFFF;
  --admin-on-primary-container: #95EABB;

  /* Surfaces */
  --admin-surface: #E8FFEF;
  --admin-surface-bright: #E8FFEF;
  --admin-surface-lowest: #FFFFFF;
  --admin-surface-low: #E3F9EA;
  --admin-surface-container: #DDF3E4;
  --admin-surface-container-high: #D7EEDE;
  --admin-surface-container-highest: #D2E8D9;
  --admin-surface-dim: #C9DFD0;

  /* Text */
  --admin-on-surface: #0C1F16;
  --admin-on-surface-variant: #3F4942;
  --admin-outline: #6F7A72;
  --admin-outline-variant: #BEC9C0;

  /* Semantic */
  --admin-error: #BA1A1A;
  --admin-error-container: #FFDAD6;
  --admin-on-error: #FFFFFF;
  --admin-on-error-container: #93000A;

  /* Surfaces from Design.md */
  --admin-bg: #F8FAF9;
  --admin-card-bg: #FFFFFF;
  --admin-border: #E5E9E7;
  --admin-border-subtle: #EEF2F0;

  /* Typography */
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --admin-sidebar-width: 260px;
  --admin-header-height: 72px;
  /* Shared Admin content frame: ~88% of the workspace that remains after the
     sidebar, centred, so every Admin page shares one left/right anchor.
     This is the single desktop/tablet-desktop value — it must NOT be escalated
     by narrower breakpoints, which used to consume the side gutters entirely
     (90% then 94% in the 1024–1360px band). */
  --admin-content-frame-width: 88%;
  --admin-content-max-width: 1800px;

  /* Shadows */
  --admin-shadow-sm: 0 1px 3px rgba(10, 108, 71, 0.04), 0 4px 12px rgba(20, 38, 28, 0.03);
  --admin-shadow-md: 0 4px 16px rgba(10, 108, 71, 0.06), 0 8px 24px rgba(20, 38, 28, 0.04);
  --admin-shadow-lg: 0 8px 24px rgba(10, 108, 71, 0.07);
  --admin-shadow-overlay: 0 12px 32px rgba(20, 38, 28, 0.08);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
}

/* ─── Shell Grid ────────────────────────────────────────────── */
.admin-shell {
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) 1fr;
  grid-template-rows: var(--admin-header-height) 1fr;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--admin-on-surface);
  background: var(--admin-bg);
}

/* ─── Sidebar ───────────────────────────────────────────────── */
.admin-sidebar {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--admin-sidebar-width);
  height: 100vh;
  background: var(--admin-card-bg);
  border-right: 1px solid var(--admin-outline-variant);
  padding: 16px;
  z-index: 40;
  /* D021 — the OUTER sidebar is never the scroll container. It pins the brand
     header at the top and the Admin account/logout footer at the bottom while
     ONLY the navigation between them scrolls (see .admin-sidebar-nav). */
  overflow: hidden;
  box-shadow: var(--admin-shadow-sm);
  user-select: none;
}

.admin-sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Allow this flex child to shrink below its content height, otherwise the nav
     can never become the scroll region (flexbox `min-height: auto` default). */
  min-height: 0;
}

/* Brand Header — pinned, never scrolled away */
.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  text-decoration: none;
  color: var(--admin-on-surface);
  flex: 0 0 auto;
}

.admin-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  background: var(--admin-primary-container);
  color: var(--admin-on-primary);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--admin-shadow-sm);
  flex-shrink: 0;
}

.admin-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-brand-name {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  color: var(--admin-primary);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-brand-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-on-surface-variant);
  letter-spacing: 0.02em;
}

/* Nav Items — the single, independently scrollable region of the sidebar */
.admin-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  /* Required so a short viewport makes THIS element scroll instead of expanding
     the sidebar past the viewport (which pushed the footer below the fold and
     let the brand scroll out of view). */
  min-height: 0;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.admin-sidebar-nav::-webkit-scrollbar { width: 4px; }
.admin-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar-nav::-webkit-scrollbar-thumb { background: var(--admin-outline-variant); border-radius: 9999px; }

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--admin-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.admin-nav-item:hover {
  background: var(--admin-surface-container-low);
  color: var(--admin-on-surface);
}

.admin-nav-item[aria-current="page"],
.admin-nav-item.active {
  background: var(--admin-surface-container);
  color: var(--admin-primary);
  font-weight: 600;
  border-left: 3px solid var(--admin-primary);
}

.admin-nav-item:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}

.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.admin-nav-icon .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.admin-nav-label {
  font-size: 14px;
  line-height: 20px;
}

.admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.03em;
  margin-left: auto;
  flex-shrink: 0;
}

.admin-nav-badge--primary {
  background: var(--admin-surface-container-high);
  color: var(--admin-primary);
}

.admin-nav-badge--error {
  background: var(--admin-error);
  color: var(--admin-on-error);
}

/* Sidebar Footer — pinned, never scrolled away */
.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--admin-outline-variant);
  flex: 0 0 auto;
}

.admin-profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: var(--admin-surface-container-low);
  border: 1px solid var(--admin-outline-variant);
}

.admin-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--admin-primary-container);
  color: var(--admin-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: var(--admin-shadow-sm);
}

.admin-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.admin-profile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-profile-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--admin-outline-variant);
  background: transparent;
  color: var(--admin-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.admin-signout-btn:hover {
  background: var(--admin-error-container);
  color: var(--admin-error);
  border-color: var(--admin-error);
}

/* ─── Top Bar ───────────────────────────────────────────────── */
.admin-header {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: fixed;
  top: 0;
  right: 0;
  left: var(--admin-sidebar-width);
  height: var(--admin-header-height);
  padding: 0 32px;
  background: var(--admin-card-bg);
  border-bottom: 1px solid var(--admin-outline-variant);
  z-index: 30;
  box-shadow: var(--admin-shadow-sm);
}

.admin-header-left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-header-title h2 {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  color: var(--admin-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.admin-header-title .live-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-primary);
  background: var(--admin-surface-container);
}

.admin-header-subtitle {
  font-size: 12px;
  color: var(--admin-on-surface-variant);
  margin-top: 2px;
}

/* Search Bar */
.admin-header-search {
  flex: 1;
  max-width: 480px;
  margin: 0 24px;
  position: relative;
}

.admin-header-search .material-symbols-outlined {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--admin-outline);
}

.admin-header-search input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-bg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--admin-on-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-header-search input::placeholder {
  color: var(--admin-outline);
}

.admin-header-search input:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(10, 108, 71, 0.1);
}

/* Header Actions */
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.admin-system-status {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--admin-surface-container);
  border: 1px solid rgba(0, 82, 52, 0.15);
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-primary);
}

.admin-system-status .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-secondary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.admin-notification-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--admin-outline-variant);
  background: transparent;
  color: var(--admin-on-surface);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.admin-notification-btn:hover {
  background: var(--admin-surface-container);
}

.admin-notification-btn .notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--admin-error);
  color: var(--admin-on-error);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.admin-emergency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  background: var(--admin-primary-container);
  color: var(--admin-on-primary);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: var(--admin-shadow-sm);
  white-space: nowrap;
}

.admin-emergency-btn:hover {
  background: var(--admin-primary);
}

.admin-emergency-btn:active {
  transform: scale(0.95);
}

.admin-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--admin-surface-container-high);
  border: 1px solid var(--admin-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 12px;
  color: var(--admin-primary);
}

/* ─── Main Content ──────────────────────────────────────────── */
/* The shell grid already reserves the sidebar column (grid-column: 2) and the
   header row (grid-row: 2). Do NOT repeat those as margins here: doing so added
   a second 260px horizontal offset and a second 72px vertical offset, which
   shoved the whole Admin workspace right/down and stole 260px of usable width.
   Horizontal padding is intentionally 0 — the centred content frame below is
   what produces the left/right breathing room. */
.admin-main {
  grid-column: 2;
  grid-row: 2;
  /* min-width:0 stops a wide table from forcing this grid item past its track.
     Without it the grid item's automatic minimum size is the table's
     min-content width, which produced page-level horizontal scrolling. */
  min-width: 0;
  min-height: calc(100vh - var(--admin-header-height));
  background: var(--admin-bg);
  padding: 32px 0 48px;
}

/* Single shared content frame inherited by every Admin page.
   width: 88% of the available workspace (viewport minus sidebar), centred.
   The clamp guarantees a deliberate minimum side gutter (≈32px each side) so
   the frame can never touch the sidebar or the right browser edge, however
   narrow the desktop/tablet-desktop viewport becomes. Mobile (≤768px) keeps
   its own 16px-gutter rule below. */
.admin-main-inner {
  width: var(--admin-content-frame-width);
  max-width: min(var(--admin-content-max-width), calc(100% - 64px));
  min-width: 0;
  margin-inline: auto;
}

/* ─── Menu Button (Mobile) ──────────────────────────────────── */
.admin-menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--admin-on-surface);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-menu-trigger:hover { background: var(--admin-surface-container); }

/* ─── Mobile Overlay ────────────────────────────────────────── */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 39;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .admin-system-status { display: flex; }
}

@media (max-width: 1024px) {
  .admin-header { padding: 0 20px; }
  .admin-main { padding: 24px 0 40px; }
}

@media (max-width: 768px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-menu-trigger { display: flex; }

  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--admin-shadow-overlay);
  }

  .admin-sidebar-overlay.open {
    display: block;
  }

  .admin-header {
    left: 0;
    padding: 0 16px;
  }

  /* The shell collapses to a single column here, so the content must be placed
     in column 1. Leaving it in column 2 created an implicit second track whose
     width was driven by the page's content, squashing narrow pages (e.g. the
     Notifications list) to a fraction of the screen. */
  .admin-main {
    grid-column: 1;
    padding: 16px 0 32px;
  }

  /* Mobile: use almost the full width with a small, even gutter. */
  .admin-main-inner {
    width: calc(100% - 32px);
    max-width: none;
  }

  .admin-header-search { display: none; }
  .admin-emergency-btn { display: none; }
  .admin-system-status { display: none; }
}

/* ─── Admin Notification Overrides ───────────────────────────── */
.admin-shell .notification-panel {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--radius-2xl);
}

.admin-shell .notification-panel-header {
  border-bottom: 1px solid var(--admin-outline-variant);
  background: var(--admin-surface-container-low);
}

.admin-shell .notification-panel-header h2 {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--admin-on-surface);
}

.admin-shell .notification-mark-all-btn {
  border-color: var(--admin-outline-variant);
  color: var(--admin-primary);
  background: var(--admin-card-bg);
  font-weight: 600;
}

.admin-shell .notification-mark-all-btn:hover {
  background: var(--admin-surface-container-low);
}

.admin-shell .notification-unread {
  background: rgba(227, 249, 234, 0.5);
}

.admin-shell .notification-unread:hover {
  background: rgba(227, 249, 234, 0.7);
}

.admin-shell .notification-unread .notification-item-title {
  color: var(--admin-primary);
}

.admin-shell .notification-item-title {
  color: var(--admin-on-surface);
  font-size: 14px;
}

.admin-shell .notification-item-message {
  color: var(--admin-on-surface-variant);
  font-size: 13px;
}

.admin-shell .notification-item-time {
  color: var(--admin-outline);
  font-size: 12px;
}

.admin-shell .notification-mark-read-btn {
  border-color: var(--admin-outline-variant);
  color: var(--admin-primary);
  background: var(--admin-card-bg);
}

.admin-shell .notification-mark-read-btn:hover {
  background: var(--admin-surface-container-low);
}

.admin-shell .notification-item {
  border-bottom: 1px solid rgba(190, 201, 192, 0.3);
}

.admin-shell .notification-empty p {
  color: var(--admin-on-surface-variant);
}