/* /connect/admin/admin-shell.css — Bible Connect Admin Shell v3
 * "Vibrant Community" admin console shell.
 * Dark-first, token-driven. Shared components and --bcc-* tokens live in
 * connect-tokens.css; this file only adds admin-specific layout/skin.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   BASE
   The .bcc-app reset, typography and shared components come from
   connect-tokens.css. Only admin-specific root adjustments live here.
=============================================================== */
body.bcc-app {
  margin:     0;
  font-size:  var(--bcc-t-sm);
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Ensure the HTML `hidden` attribute always wins over display:flex/grid */
[hidden] { display: none !important; }

/* ================================================================
   FULLSCREEN STATES — loading + denied
=============================================================== */
.adm-fullscreen-state {
  position:        fixed;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s4);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(var(--bcc-primary-rgb), .12), transparent 70%),
    var(--bcc-bg);
  z-index:         9999;
  text-align:      center;
  padding:         var(--bcc-s8);
}

.adm-fullscreen-state h1 {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-2xl);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}

.adm-fullscreen-state p {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-2);
  margin:    0;
  max-width: 360px;
}

.adm-denied-icon {
  font-size:   3rem;
  color:       var(--bcc-danger);
  line-height: 1;
}

.adm-spinner {
  width:            42px;
  height:           42px;
  border:           3px solid var(--bcc-surface-4);
  border-top-color: var(--bcc-primary);
  border-right-color: var(--bcc-secondary);
  border-radius:    50%;
  animation:        adm-spin .8s linear infinite;
}

@keyframes adm-spin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   MAIN APP GRID — desktop base (1025–1439)
=============================================================== */
#adm-app {
  display:               grid;
  grid-template-columns: var(--bcc-admin-sidebar-w) minmax(0, 1fr);
  grid-template-areas:   "sidebar right";
  height:                100vh; /* fallback for older webviews */
  height:                100dvh;
  overflow:              hidden;
}

/* ================================================================
   SIDEBAR
   Sidebar-local ink variables keep labels legible across the dark
   church themes and the light admin toggle (sidebar stays dark).
=============================================================== */
.adm-sidebar {
  /* Inactive labels use ink-2; kept bright enough for AA on the dark
     sidebar surface that stays dark in both admin themes. */
  --adm-sidebar-ink:          #f5f3fc;
  --adm-sidebar-ink-2:        #d6d1e8;
  --adm-sidebar-ink-3:        #a69fbd;
  --adm-sidebar-surface:      rgba(255, 255, 255, .045);
  --adm-sidebar-surface-hover:rgba(255, 255, 255, .085);
  --adm-sidebar-active:       rgba(var(--bcc-primary-rgb), .19);
  --adm-sidebar-border:       rgba(255, 255, 255, .075);

  position:       relative;
  grid-area:      sidebar;
  display:        flex;
  flex-direction: column;
  height:         100vh; /* fallback for older webviews */
  height:         100dvh;
  overflow:       hidden;
  background:
    radial-gradient(120% 34% at 0% 0%, rgba(var(--bcc-primary-rgb), .17), transparent 62%),
    radial-gradient(90% 30% at 100% 100%, rgba(var(--bcc-secondary-rgb), .07), transparent 65%),
    var(--bcc-sidebar-bg);
  border-right:   1px solid var(--adm-sidebar-border);
  z-index:        200;
}

/* Logo area */
.adm-sidebar-head {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s5) var(--bcc-s4) var(--bcc-s3);
  flex-shrink: 0;
}

.adm-sidebar-logo {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  min-width:   0;
  flex:        1;
  padding:     var(--bcc-s1);
}

.adm-logo-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   var(--bcc-r-md);
  flex-shrink:     0;
  color:           #fff;
  background:      linear-gradient(135deg, var(--bcc-primary), var(--bcc-secondary));
  box-shadow:      0 8px 20px rgba(var(--bcc-primary-rgb), .34),
                   inset 0 1px 0 rgba(255, 255, 255, .28);
}

.adm-logo-icon .bcc-icon {
  width:  20px;
  height: 20px;
}

.adm-logo-copy {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

.adm-logo-text {
  font-size:      var(--bcc-t-sm);
  font-weight:    700;
  color:          var(--adm-sidebar-ink);
  line-height:    1.2;
  letter-spacing: -.01em;
}

.adm-logo-sub {
  font-size:      .62rem;
  color:          var(--adm-sidebar-ink-3);
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height:    1.4;
}

/* Mobile-only close control */
.bcc-app .adm-sidebar-close {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-md);
  border:          1px solid transparent;
  background:      transparent;
  color:           var(--adm-sidebar-ink-2);
  transition:      background var(--bcc-dur-1), color var(--bcc-dur-1);
}

.bcc-app .adm-sidebar-close:hover {
  background: var(--adm-sidebar-surface-hover);
  color:      var(--adm-sidebar-ink);
}

/* Church selector */
.adm-church-wrap {
  padding:     0 var(--bcc-s3) var(--bcc-s3);
  flex-shrink: 0;
}

.adm-church-eyebrow {
  display:        block;
  padding:        0 var(--bcc-s2) var(--bcc-s2);
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          var(--adm-sidebar-ink-3);
}

.bcc-app .adm-church-selector {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  width:         100%;
  min-height:    54px;
  padding:       var(--bcc-s2) var(--bcc-s3);
  margin:        0;
  border-radius: var(--bcc-r-md);
  background:    var(--adm-sidebar-surface);
  border:        1px solid var(--adm-sidebar-border);
  color:         var(--adm-sidebar-ink);
  text-align:    left;
  cursor:        pointer;
  transition:    background var(--bcc-dur-2) var(--bcc-ease),
                 border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow var(--bcc-dur-2) var(--bcc-ease);
  min-width:     0;
}

.bcc-app .adm-church-selector:hover {
  background:   var(--adm-sidebar-surface-hover);
  border-color: rgba(var(--bcc-primary-rgb), .5);
  box-shadow:   0 0 0 3px rgba(var(--bcc-primary-rgb), .08);
}

.adm-church-info {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         1px;
}

.adm-church-name {
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  color:         var(--adm-sidebar-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}

.adm-church-role {
  font-size:      .62rem;
  color:          var(--bcc-secondary);
  font-weight:    600;
  line-height:    1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.adm-church-chevron {
  width:       15px;
  height:      15px;
  flex-shrink: 0;
  color:       var(--adm-sidebar-ink-3);
}

/* Scrollable nav area */
.adm-nav-scroll {
  flex:              1;
  overflow-y:        auto;
  overscroll-behavior: contain;
  padding:           0 var(--bcc-s3) var(--bcc-s4);
  scrollbar-width:   thin;
  scrollbar-color:   var(--bcc-surface-4) transparent;
}

.adm-nav-scroll::-webkit-scrollbar       { width: 4px; }
.adm-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.adm-nav-scroll::-webkit-scrollbar-thumb { background: var(--bcc-surface-4); border-radius: 2px; }

/* Section labels */
.adm-nav-section-label {
  font-size:      .6rem;
  font-weight:    700;
  color:          var(--adm-sidebar-ink-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding:        var(--bcc-s4) var(--bcc-s3) var(--bcc-s2);
}

.adm-nav-section-label:first-child { padding-top: var(--bcc-s2); }

/* Nav list */
.adm-nav-list {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  margin:         0;
  padding:        0;
  list-style:     none;
}

.adm-nav-list li {
  margin:     0;
  padding:    0;
  list-style: none;
}

/* Nav items — scoped past the shared `.bcc-app a` reset for colour */
.bcc-app .adm-nav-item {
  position:        relative;
  display:         flex;
  align-items:     center;
  gap:             var(--bcc-s3);
  min-height:      42px;
  padding:         9px var(--bcc-s3);
  border-radius:   var(--bcc-r-md);
  color:           var(--adm-sidebar-ink-2);
  font-size:       var(--bcc-t-sm);
  font-weight:     500;
  line-height:     1.4;
  cursor:          pointer;
  transition:      background var(--bcc-dur-1) var(--bcc-ease),
                   color var(--bcc-dur-1) var(--bcc-ease),
                   box-shadow var(--bcc-dur-1) var(--bcc-ease);
  text-decoration: none;
  white-space:     nowrap;
  overflow:        hidden;
}

.bcc-app .adm-nav-item:hover {
  background: var(--adm-sidebar-surface-hover);
  color:      var(--adm-sidebar-ink);
}

.bcc-app .adm-nav-item.adm-nav-active {
  background: linear-gradient(90deg,
    var(--adm-sidebar-active),
    rgba(var(--bcc-primary-rgb), .035));
  color:      var(--adm-sidebar-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--bcc-primary-rgb), .26);
}

.adm-nav-item.adm-nav-active::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           7px;
  bottom:        7px;
  width:         3px;
  background:    linear-gradient(180deg, var(--bcc-primary), var(--bcc-secondary));
  border-radius: 0 3px 3px 0;
  box-shadow:    0 0 10px rgba(var(--bcc-primary-rgb), .55);
}

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

.adm-nav-icon .bcc-icon {
  width:  18px;
  height: 18px;
}

.adm-nav-active .adm-nav-icon {
  color:   var(--bcc-primary);
  opacity: 1;
}

.adm-nav-label {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.adm-nav-external {
  margin-left: auto;
  font-size:   .75rem;
  color:       var(--adm-sidebar-ink-3);
  flex-shrink: 0;
}

/* Sidebar nav badge (e.g. pending service requests) — mirrors .bcc-dot-badge */
.adm-nav-badge {
  margin-left:     auto;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  background:      var(--bcc-danger);
  color:           #fff;
  font-size:       .65rem;
  font-weight:     700;
  line-height:     1;
  border-radius:   var(--bcc-r-pill);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Sidebar footer */
.adm-sidebar-footer {
  flex-shrink:    0;
  padding:        var(--bcc-s3);
  padding-bottom: calc(var(--bcc-s3) + env(safe-area-inset-bottom, 0px));
  border-top:     1px solid var(--adm-sidebar-border);
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  background:     linear-gradient(180deg, transparent, rgba(0, 0, 0, .14));
}

.adm-nav-item--portal { margin-bottom: 2px; }

.bcc-app .adm-profile-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  width:         100%;
  min-height:    54px;
  padding:       var(--bcc-s2) var(--bcc-s3);
  margin:        0;
  border-radius: var(--bcc-r-md);
  background:    var(--adm-sidebar-surface);
  border:        1px solid transparent;
  color:         var(--adm-sidebar-ink);
  text-align:    left;
  cursor:        pointer;
  transition:    background var(--bcc-dur-1), border-color var(--bcc-dur-1);
}

.bcc-app .adm-profile-row:hover {
  background:   var(--adm-sidebar-surface-hover);
  border-color: var(--adm-sidebar-border);
}

.adm-profile-meta {
  display:        flex;
  flex-direction: column;
  flex:           1;
  min-width:      0;
  gap:            1px;
}

.adm-profile-name {
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  color:         var(--adm-sidebar-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}

.adm-profile-sub {
  font-size:  .6rem;
  color:      var(--adm-sidebar-ink-3);
  line-height: 1.3;
}

.adm-profile-chevron {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
  color:       var(--adm-sidebar-ink-3);
}

/* Light church theme with a light sidebar (Morning Light).
   Guarded with :not(.bcc-light):not(.theme-light) so it only applies while
   the sidebar is actually light. When the admin light toggle is on, the
   sidebar is forced dark (see connect-tokens.css), so the base dark-sidebar
   ink must stay in effect. */
.bcc-app.bcc-theme-morning-light:not(.bcc-light):not(.theme-light) .adm-sidebar {
  --adm-sidebar-ink:           var(--bcc-ink);
  --adm-sidebar-ink-2:         var(--bcc-ink-2);
  --adm-sidebar-ink-3:         var(--bcc-ink-3);
  --adm-sidebar-surface:       var(--bcc-surface-2);
  --adm-sidebar-surface-hover: var(--bcc-surface-3);
  --adm-sidebar-active:        var(--bcc-primary-soft);
  --adm-sidebar-border:        var(--bcc-border);
  background:
    radial-gradient(120% 34% at 0% 0%, rgba(var(--bcc-primary-rgb), .09), transparent 62%),
    var(--bcc-sidebar-bg);
}

/* Morning-Light + admin light mode: the sidebar is dark, so re-assert the
   sidebar-local ink over the light-theme nav rules in connect-tokens.css. */
.bcc-app.bcc-theme-morning-light.bcc-light .adm-sidebar .adm-nav-item,
.bcc-app.bcc-theme-morning-light.theme-light .adm-sidebar .adm-nav-item {
  color: var(--adm-sidebar-ink-2);
}

.bcc-app.bcc-theme-morning-light.bcc-light .adm-sidebar .adm-nav-item.adm-nav-active,
.bcc-app.bcc-theme-morning-light.theme-light .adm-sidebar .adm-nav-item.adm-nav-active {
  color: var(--adm-sidebar-ink);
}

.bcc-app.bcc-theme-morning-light.bcc-light .adm-sidebar .adm-nav-label,
.bcc-app.bcc-theme-morning-light.theme-light .adm-sidebar .adm-nav-label {
  color: inherit;
}

.bcc-app.bcc-theme-morning-light.bcc-light .adm-sidebar .adm-nav-item:hover,
.bcc-app.bcc-theme-morning-light.theme-light .adm-sidebar .adm-nav-item:hover {
  background: var(--adm-sidebar-surface-hover);
  color:      var(--adm-sidebar-ink);
}

.bcc-app.bcc-theme-morning-light.bcc-light .adm-sidebar,
.bcc-app.bcc-theme-morning-light.theme-light .adm-sidebar {
  border-right: 1px solid var(--adm-sidebar-border);
}

/* ================================================================
   RIGHT PANEL
=============================================================== */
.adm-right {
  grid-area:      right;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  overflow:       hidden;
  background:     var(--bcc-bg);
}

/* ================================================================
   TOPBAR
=============================================================== */
.adm-topbar {
  display:         flex;
  align-items:     center;
  gap:             var(--bcc-s3);
  padding:         0 var(--bcc-s8);
  height:          var(--bcc-topbar-h);
  flex-shrink:     0;
  background:      var(--bcc-surface-1);
  border-bottom:   1px solid var(--bcc-border);
  box-shadow:      0 1px 0 rgba(255, 255, 255, .02);
  z-index:         100;
}

/* Mobile menu button — hidden on desktop */
.adm-menu-btn { display: none; }

/* ── Church logo chip (shared look with member shell; admin loads no
   shell.css / dashboard.css, so the chip is defined locally here) ── */
.bcc-logo-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  overflow:        hidden;
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border-strong);
  font-weight:     700;
  line-height:     1;
}

.bcc-logo-chip .bcc-church-logo-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

.bcc-logo-fallback {
  width:           100%;
  height:          100%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
}

.bcc-logo-shape--circle  { border-radius: 50%; }
.bcc-logo-shape--rounded { border-radius: var(--bcc-r-md); }
.bcc-logo-shape--square  { border-radius: 0; }

.bcc-logo-chip-sm { width: 32px; height: 32px; font-size: .8rem; }
.bcc-logo-chip-md { width: 48px; height: 48px; font-size: 1.1rem; }
.bcc-logo-chip-lg { width: 72px; height: 72px; font-size: 1.6rem; }

/* Sidebar church-selector logo wrapper (chip owns the box now) */
#adm-church-logo {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Topbar church chip — prefixes the breadcrumb */
.adm-topbar-church-logo {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Breadcrumb */
.adm-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex:        1;
  min-width:   0;
  overflow:    hidden;
}

.adm-breadcrumb-church {
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-3);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     240px;
}

.adm-breadcrumb-sep {
  color:       var(--bcc-ink-3);
  font-size:   var(--bcc-t-md);
  line-height: 1;
  flex-shrink: 0;
}

.adm-breadcrumb-view {
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  color:         var(--bcc-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Topbar right actions */
.adm-topbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-shrink: 0;
}

.bcc-app .adm-cmd-btn {
  height:        34px;
  gap:           var(--bcc-s2);
  padding:       0 var(--bcc-s2) 0 var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  color:         var(--bcc-ink-3);
  font-size:     var(--bcc-t-xs);
  transition:    color var(--bcc-dur-1), border-color var(--bcc-dur-1),
                 background var(--bcc-dur-1);
}

.bcc-app .adm-cmd-btn:hover {
  color:         var(--bcc-ink);
  border-color:  rgba(var(--bcc-primary-rgb), .55);
  background:    var(--bcc-surface-3);
}

.adm-cmd-hint {
  display:       inline-flex;
  align-items:   center;
  height:        20px;
  padding:       0 6px;
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-xs);
  background:    var(--bcc-surface-1);
  color:         var(--bcc-ink-2);
  font-size:     .62rem;
  font-weight:   600;
  letter-spacing: .04em;
  line-height:   1;
}

/* Theme toggle button in topbar */
.bcc-app .adm-theme-toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-md);
  border:          1px solid var(--bcc-border);
  background:      transparent;
  color:           var(--bcc-ink-2);
  cursor:          pointer;
  transition:      background var(--bcc-dur-1), color var(--bcc-dur-1),
                   border-color var(--bcc-dur-1);
}

.bcc-app .adm-theme-toggle:hover {
  background:   var(--bcc-surface-2);
  border-color: var(--bcc-border-strong);
  color:        var(--bcc-ink);
}

.adm-theme-toggle .bcc-icon {
  width:  18px;
  height: 18px;
}

.adm-notif-wrap {
  position:    relative;
  display:     inline-flex;
  flex-shrink: 0;
}

.adm-notif-wrap .bcc-dot-badge {
  top:          -2px;
  right:        -2px;
  border-color: var(--bcc-surface-1);
}

.bcc-app .adm-topbar-avatar {
  width:         36px;
  height:        36px;
  padding:       0;
  margin:        0;
  background:    var(--bcc-surface-3);
  color:         var(--bcc-ink);
  border:        none;
  cursor:        pointer;
  transition:    transform var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow var(--bcc-dur-2) var(--bcc-ease);
}

.bcc-app .adm-topbar-avatar:hover {
  transform:  translateY(-1px);
  box-shadow: 0 0 0 2px rgba(var(--bcc-primary-rgb), .55);
}

/* ================================================================
   MAIN CONTENT AREA
=============================================================== */
.adm-main {
  flex:              1;
  min-width:         0;
  overflow-y:        auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(70% 42% at 100% 0%, var(--bcc-primary-tint), transparent 65%),
    var(--bcc-bg);
  scrollbar-width:   thin;
  scrollbar-color:   var(--bcc-surface-4) transparent;
}

.adm-main::-webkit-scrollbar       { width: 6px; }
.adm-main::-webkit-scrollbar-track { background: transparent; }
.adm-main::-webkit-scrollbar-thumb { background: var(--bcc-surface-4); border-radius: 3px; }

.adm-view { min-height: 100%; }

/* ================================================================
   SHARED VIEW LAYOUT HELPERS (used by every view script)
=============================================================== */
.adm-main .adm-view-page {
  padding:   var(--bcc-s6) var(--bcc-s8);
  max-width: 1200px;
  margin:    0 auto;
}

.adm-view-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s6);
  flex-wrap:       wrap;
}

.adm-view-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-3xl);
  font-weight:    600;
  color:          var(--bcc-ink);
  margin:         0 0 2px;
  line-height:    1.15;
  letter-spacing: -.01em;
}

.adm-view-sub {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-3);
  margin:    0;
}

.adm-section-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s3);
}

.adm-section-title {
  font-size:   var(--bcc-t-md);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}

/* ================================================================
   STAT GRID  (dashboard KPI cards — shared .bcc-stat-card skin)
=============================================================== */
.adm-stat-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   var(--bcc-s4);
  margin-bottom:         var(--bcc-s6);
}

.adm-stat-grid .bcc-stat-card {
  position:      relative;
  overflow:      hidden;
  cursor:        default;
  background:    linear-gradient(180deg, var(--bcc-surface-1), var(--bcc-surface-2));
  transition:    transform var(--bcc-dur-2) var(--bcc-ease),
                 border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow var(--bcc-dur-2) var(--bcc-ease);
}

.adm-stat-grid .bcc-stat-card::after {
  content:    '';
  position:   absolute;
  inset:      0 0 auto 0;
  height:     3px;
  background: linear-gradient(90deg, var(--bcc-primary), var(--bcc-secondary), var(--bcc-accent));
  opacity:    .9;
  pointer-events: none;
}

.adm-stat-grid .bcc-stat-card:hover {
  transform:    translateY(-2px);
  border-color: rgba(var(--bcc-primary-rgb), .38);
  box-shadow:   var(--bcc-shadow-2);
}

.adm-stat-grid .bcc-stat-card__value {
  font-family:    var(--bcc-font-display);
  letter-spacing: -.01em;
}

/* ================================================================
   THREE-COLUMN DASHBOARD LAYOUT
=============================================================== */
.adm-dash-3col {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   var(--bcc-s5);
  align-items:           start;
}

.adm-dash-col {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5);
  min-width:     0;
  box-shadow:    var(--bcc-shadow-1);
}

/* Activity feed */
.adm-activity-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.adm-activity-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.adm-activity-item:last-child { border-bottom: none; }

.adm-activity-icon {
  font-size:    .9rem;
  color:        var(--bcc-ink-3);
  flex-shrink:  0;
  width:        20px;
  text-align:   center;
  margin-top:   1px;
}

.adm-activity-body { flex: 1; min-width: 0; }

.adm-activity-text {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.4;
}

.adm-activity-time {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  margin-top: 2px;
}

/* Upcoming events list */
.adm-event-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.adm-event-item:last-child { border-bottom: none; }

.adm-event-date-box {
  width:         40px;
  flex-shrink:   0;
  text-align:    center;
  background:    var(--bcc-primary-soft);
  border:        1px solid rgba(var(--bcc-primary-rgb), .18);
  border-radius: var(--bcc-r-sm);
  padding:       4px 0;
}

.adm-event-month {
  font-size:      var(--bcc-t-xs);
  color:          var(--bcc-primary);
  text-transform: uppercase;
  font-weight:    600;
  line-height:    1;
}

.adm-event-day {
  font-size:   var(--bcc-t-lg);
  font-weight: 700;
  color:       var(--bcc-primary);
  line-height: 1.1;
}

.adm-event-info { flex: 1; min-width: 0; }

.adm-event-title {
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  color:         var(--bcc-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}

.adm-event-meta {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  margin-top: 2px;
}

/* Quick action buttons — scoped past the shared button reset */
.bcc-app .adm-quick-actions {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--bcc-s2);
}

.bcc-app .adm-quick-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s1);
  min-height:      74px;
  padding:         var(--bcc-s3) var(--bcc-s2);
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-md);
  cursor:          pointer;
  transition:      background var(--bcc-dur-1), border-color var(--bcc-dur-1),
                   color var(--bcc-dur-1), transform var(--bcc-dur-1);
  font-size:       var(--bcc-t-xs);
  color:           var(--bcc-ink-2);
  font-weight:     500;
  text-align:      center;
  line-height:     1.3;
}

.bcc-app .adm-quick-btn:hover {
  background:   var(--bcc-surface-3);
  border-color: rgba(var(--bcc-primary-rgb), .5);
  color:        var(--bcc-ink);
  transform:    translateY(-1px);
}

.adm-quick-icon {
  font-size:   1.15rem;
  color:       var(--bcc-primary);
  line-height: 1;
}

/* AI Insights panel */
.adm-ai-insights {
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s4);
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-2);
  line-height:   1.6;
  min-height:    80px;
  white-space:   pre-wrap;
}

.adm-ai-cursor {
  display:    inline-block;
  color:      var(--bcc-secondary);
  animation:  adm-cursor-blink 1s steps(2, start) infinite;
}

@keyframes adm-cursor-blink {
  50% { opacity: 0; }
}

/* ================================================================
   VIEW ERROR / EMPTY STATES
=============================================================== */
.bcc-view-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--bcc-s16);
  text-align:      center;
  gap:             var(--bcc-s3);
}

.bcc-view-error-icon  { font-size: 2.5rem; color: var(--bcc-warning); }
.bcc-view-error-title {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  margin:      0;
}
.bcc-view-error-body  { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); margin: 0; max-width: 380px; }

/* ================================================================
   SKELETON LOADER  (extends shared .bcc-skeleton)
=============================================================== */
.bcc-skeleton-page {
  padding: var(--bcc-s6) var(--bcc-s8);
}

.adm-skeleton-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  margin-bottom:  var(--bcc-s6);
}

.adm-skeleton-title { height: 26px; }

.adm-skeleton-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   var(--bcc-s4);
}

.bcc-skeleton-card {
  height:        88px;
  border-radius: var(--bcc-r-lg);
}

.adm-skeleton-panel {
  height:        220px;
  margin-top:    var(--bcc-s4);
  border-radius: var(--bcc-r-lg);
}

/* ================================================================
   PALETTE EMPTY STATE + admin palette polish
=============================================================== */
.bcc-palette-empty {
  padding:    var(--bcc-s5) var(--bcc-s4);
  text-align: center;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

.adm-palette-search {
  position: relative;
}

.adm-palette-search .bcc-palette-input {
  padding-left: calc(var(--bcc-s5) + 24px);
}

.adm-palette-search-icon {
  position:       absolute;
  left:           var(--bcc-s5);
  top:            50%;
  transform:      translateY(-50%);
  width:          18px;
  height:         18px;
  color:          var(--bcc-ink-3);
  pointer-events: none;
}

#adm-palette-overlay .bcc-palette {
  width: min(640px, calc(100vw - var(--bcc-s8)));
}

#adm-palette-overlay .bcc-palette-results {
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

#adm-palette-overlay .bcc-palette-item.bcc-active {
  background: var(--bcc-primary-soft);
  color:      var(--bcc-ink);
  box-shadow: inset 0 0 0 1px rgba(var(--bcc-primary-rgb), .24);
}

#adm-palette-overlay .bcc-palette-item-icon {
  color:      var(--bcc-primary);
  background: var(--bcc-surface-1);
  box-shadow: inset 0 0 0 1px var(--bcc-border);
}

.bcc-palette-item-label {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ================================================================
   NOTIFICATIONS DRAWER
=============================================================== */
.adm-notif-drawer {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
}

.adm-notif-toolbar {
  display:         flex;
  justify-content: flex-end;
}

.adm-notif-list {
  display:        flex;
  flex-direction: column;
}

.adm-notif-state {
  padding:    var(--bcc-s6) var(--bcc-s3);
  text-align: center;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

.adm-notif-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s2);
  border-bottom: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-sm);
}

.adm-notif-item:last-child { border-bottom: none; }

.adm-notif-item--unread {
  background: var(--bcc-primary-tint);
}

.adm-notif-dot {
  width:         8px;
  height:        8px;
  margin-top:    6px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    transparent;
}

.adm-notif-item--unread .adm-notif-dot {
  background: var(--bcc-primary);
  box-shadow: 0 0 0 3px rgba(var(--bcc-primary-rgb), .16);
}

.adm-notif-content { flex: 1; min-width: 0; }

.adm-notif-title {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.adm-notif-item--unread .adm-notif-title { color: var(--bcc-ink); }

.adm-notif-body {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.45;
  margin-top:  2px;
  white-space: pre-wrap;
}

.adm-notif-time {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  margin-top: 4px;
}

/* ================================================================
   CHURCH SWITCHER DRAWER
=============================================================== */
.adm-church-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
}

.bcc-app .adm-church-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  width:           100%;
  min-height:      46px;
  text-align:      left;
  padding:         var(--bcc-s3);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-md);
  background:      var(--bcc-surface-2);
  color:           var(--bcc-ink);
  font-size:       var(--bcc-t-sm);
  font-weight:     500;
  cursor:          pointer;
  transition:      background var(--bcc-dur-1), border-color var(--bcc-dur-1);
}

.bcc-app .adm-church-item:hover {
  background:   var(--bcc-surface-3);
  border-color: var(--bcc-border-strong);
}

.bcc-app .adm-church-item--active {
  border-color: rgba(var(--bcc-primary-rgb), .6);
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-ink);
}

.adm-church-item-check { color: var(--bcc-primary); flex-shrink: 0; }

.adm-church-item-name {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ================================================================
   RESPONSIVE — phone (≤ 480 and 481–767)
=============================================================== */
@media (max-width: 767px) {
  #adm-app {
    grid-template-columns: 1fr;
    grid-template-areas:   "right";
  }

  /* Sidebar slides in as an overlay — above the backdrop */
  .adm-sidebar {
    position:     fixed;
    top:          0;
    left:         0;
    height:       100vh; /* fallback for older webviews */
    height:       100dvh;
    width:        min(300px, 86vw);
    transform:    translateX(-102%);
    transition:   transform var(--bcc-dur-3) var(--bcc-ease-out),
                  box-shadow var(--bcc-dur-3) var(--bcc-ease-out);
    z-index:      820;
    box-shadow:   none;
    border-right: 1px solid var(--adm-sidebar-border);
    /* Keep the drawer clear of notches / home bar */
    padding-top:    env(safe-area-inset-top, 0px);
    padding-left:   env(safe-area-inset-left, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .adm-sidebar.adm-sidebar-open {
    transform:  translateX(0);
    box-shadow: var(--bcc-shadow-3);
  }

  /* Show hamburger and keep a 44px touch target */
  .adm-topbar .adm-menu-btn {
    display:         flex;
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--bcc-r-md);
    font-size:       1.2rem;
    color:           var(--bcc-ink);
    background:      transparent;
    border:          none;
  }

  .adm-topbar .adm-menu-btn:hover { background: var(--bcc-surface-3); }

  .adm-sidebar .adm-sidebar-close { display: flex; }

  /* Backdrop dims the page and sits below the sidebar */
  #adm-sidebar-overlay {
    z-index:        810;
    background:     rgba(7, 5, 14, .68);
    backdrop-filter: blur(3px);
  }

  /* Scroll lock fallback (JS also sets body.style.overflow) */
  body.adm-sidebar-is-open { overflow: hidden; }

  .adm-topbar {
    height:  calc(60px + env(safe-area-inset-top, 0px));
    padding-top:   env(safe-area-inset-top, 0px);
    padding-left:  max(var(--bcc-s3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--bcc-s3), env(safe-area-inset-right, 0px));
    gap:     var(--bcc-s2);
  }

  .adm-breadcrumb { gap: var(--bcc-s1); }
  .adm-breadcrumb-church { max-width: 120px; }
  .adm-topbar-actions { gap: var(--bcc-s1); }

  /* 44px touch targets for all topbar controls */
  .bcc-app .adm-theme-toggle,
  .adm-topbar .bcc-btn-icon,
  .adm-notif-wrap .bcc-btn-icon,
  .bcc-app .adm-cmd-btn {
    width:           44px;
    height:          44px;
    min-width:       44px;
    padding:         0;
    justify-content: center;
  }

  .bcc-app .adm-cmd-btn {
    border-color: transparent;
    background:   transparent;
  }

  .adm-cmd-hint { display: none; }

  .bcc-app .adm-topbar-avatar {
    width:  44px;
    height: 44px;
  }

  /* Sidebar touch targets */
  .bcc-app .adm-nav-item {
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .bcc-app .adm-church-selector,
  .bcc-app .adm-profile-row {
    min-height: 56px;
  }

  .adm-nav-section-label { padding-top: var(--bcc-s3); }

  /* View layout */
  .adm-main .adm-view-page {
    padding: var(--bcc-s4);
  }

  .adm-view-header {
    align-items: flex-start;
  }

  .adm-view-title { font-size: var(--bcc-t-2xl); }

  .adm-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   var(--bcc-s3);
  }

  .adm-dash-3col { grid-template-columns: 1fr; }

  .bcc-app .adm-quick-actions { grid-template-columns: repeat(3, 1fr); }

  .adm-skeleton-page { padding: var(--bcc-s4); }

  .adm-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   var(--bcc-s3);
  }

  /* Drawer controls meet the 44px touch target on mobile too */
  .bcc-drawer .bcc-drawer-close {
    width:  44px;
    height: 44px;
  }

  .bcc-drawer .bcc-btn,
  .bcc-palette-item {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .adm-topbar {
    height:  calc(58px + env(safe-area-inset-top, 0px));
    padding-top:   env(safe-area-inset-top, 0px);
    padding-left:  max(var(--bcc-s2), env(safe-area-inset-left, 0px));
    padding-right: max(var(--bcc-s2), env(safe-area-inset-right, 0px));
    gap:     var(--bcc-s1);
  }

  /* Phone breadcrumb shows only the current view */
  .adm-breadcrumb-church,
  .adm-breadcrumb-sep { display: none; }

  .adm-breadcrumb-view {
    font-size: var(--bcc-t-sm);
    max-width: 100%;
  }

  .adm-sidebar { width: min(320px, 88vw); }

  .bcc-app .adm-cmd-btn { width: 44px; height: 44px; }

  .adm-main .adm-view-page { padding: var(--bcc-s4) var(--bcc-s3); }

  .adm-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   var(--bcc-s2);
  }

  .adm-stat-grid .bcc-stat-card { padding: var(--bcc-s3); }
  .adm-stat-grid .bcc-stat-card__value { font-size: var(--bcc-t-2xl); }

  .bcc-app .adm-quick-actions { grid-template-columns: repeat(2, 1fr); }

  .adm-dash-col { padding: var(--bcc-s4); }

  .bcc-palette-overlay,
  #adm-palette-overlay {
    padding-top: 8vh;
  }

  #adm-palette-overlay .bcc-palette {
    width: calc(100vw - var(--bcc-s4));
  }
}

@media (max-width: 360px) {
  .adm-stat-grid { grid-template-columns: 1fr; }
  .adm-dash-3col { grid-template-columns: 1fr; }
}

/* ================================================================
   RESPONSIVE — tablet (768–1024)
=============================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  #adm-app {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  .adm-sidebar-head { padding: var(--bcc-s4) var(--bcc-s3) var(--bcc-s3); }
  .adm-church-wrap  { padding: 0 var(--bcc-s2) var(--bcc-s3); }

  .bcc-app .adm-nav-item {
    min-height: 40px;
    padding:    8px var(--bcc-s2);
    gap:        var(--bcc-s2);
  }

  .adm-nav-icon .bcc-icon { width: 17px; height: 17px; }

  .adm-logo-icon { width: 34px; height: 34px; }

  .adm-topbar { padding: 0 var(--bcc-s5); }

  .adm-main .adm-view-page {
    padding: var(--bcc-s6) var(--bcc-s6);
  }

  .adm-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adm-dash-3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adm-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================================================================
   RESPONSIVE — large desktop (≥ 1440)
=============================================================== */
@media (min-width: 1440px) {
  #adm-app {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  .adm-sidebar-head { padding: var(--bcc-s6) var(--bcc-s5) var(--bcc-s3); }
  .adm-church-wrap  { padding: 0 var(--bcc-s4) var(--bcc-s4); }
  .adm-nav-scroll   { padding-left: var(--bcc-s4); padding-right: var(--bcc-s4); }

  .bcc-app .adm-nav-item {
    min-height: 44px;
    padding:    10px var(--bcc-s3);
  }

  .adm-topbar { padding: 0 var(--bcc-s10); }

  .adm-main .adm-view-page {
    padding: var(--bcc-s8) var(--bcc-s10);
  }

  .adm-stat-grid { gap: var(--bcc-s5); }
  .adm-dash-3col { gap: var(--bcc-s6); }
}

/* ================================================================
   ACCESSIBILITY — reduced motion is handled globally in tokens;
   this only neutralizes the admin-local cursor blink.
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .adm-ai-cursor { animation: none; }
}