/* AFM Umzimvubu presentation layer, inspired by LUICT's layout system.
   Only CSS selectors, no LUICT assets, labels, code, or database dependencies. */
@media screen {
  :root {
    --afm-ink: #142b3d;
    --afm-navy: #073f63;
    --afm-navy-deep: #042a43;
    --afm-gold: #d4a52c;
    --afm-canvas: #f3f6f8;
    --afm-line: #dce4ea;
    --afm-muted: #536878;
    --afm-shadow: 0 10px 28px rgba(5, 40, 64, .09);
  }
  html { scroll-behavior: smooth; }
  body:not(:has(#projector)) {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--afm-ink);
    background: var(--afm-canvas);
    line-height: 1.5;
  }
  body:not(:has(#projector)) h1, body:not(:has(#projector)) h2,
  body:not(:has(#projector)) h3 { letter-spacing: -.018em; line-height: 1.22; }
  body:not(:has(#projector)) a { text-underline-offset: 3px; }
  body:not(:has(#projector)) :focus-visible { outline: 3px solid var(--afm-gold); outline-offset: 3px; }

  /* LUICT's calm dashboard layout, kept in AFM navy and gold. */
  body:not(:has(#projector)) .dashboard-shell {
    grid-template-columns: 252px minmax(0, 1fr);
    background: var(--afm-canvas);
  }
  body:not(:has(#projector)) .sidebar {
    background: linear-gradient(180deg, var(--afm-navy-deep), #031d30);
    box-shadow: 6px 0 22px rgba(3, 29, 48, .13);
    padding: 24px 17px;
  }
  body:not(:has(#projector)) .sidebar-logo {
    padding: 0 6px 20px;
    margin: 0 0 15px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    letter-spacing: .015em;
  }
  body:not(:has(#projector)) .sidebar-logo img { background: #fff; padding: 3px; border-radius: 4px !important; }
  body:not(:has(#projector)) .sidebar-nav { gap: 3px; }
  body:not(:has(#projector)) .sidebar-link {
    display: flex; align-items: center; min-height: 42px;
    padding: 10px 13px; border-radius: 5px;
    font-size: .88rem; font-weight: 700; opacity: 1;
    transition: background .18s ease, transform .18s ease;
  }
  body:not(:has(#projector)) .sidebar-link:hover,
  body:not(:has(#projector)) .sidebar-link-active {
    background: rgba(255,255,255,.13); color: #fff; transform: translateX(2px);
    box-shadow: inset 3px 0 0 var(--afm-gold);
  }
  body:not(:has(#projector)) .dashboard-main { background: var(--afm-canvas); padding: 28px clamp(16px,3vw,40px) 42px; }
  body:not(:has(#projector)) .dashboard-title,
  body:not(:has(#projector)) .page-title { font-weight: 800; color: var(--afm-navy-deep); }
  body:not(:has(#projector)) .dashboard-breadcrumbs { text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 800; color: var(--afm-muted); }
  body:not(:has(#projector)) .district-card,
  body:not(:has(#projector)) .metric-card,
  body:not(:has(#projector)) .report-card,
  body:not(:has(#projector)) .stat-card,
  body:not(:has(#projector)) .section-card,
  body:not(:has(#projector)) .panel,
  body:not(:has(#projector)) .form-card,
  body:not(:has(#projector)) .table-wrapper,
  body:not(:has(#projector)) .feature-card,
  body:not(:has(#projector)) .insight-card {
    border-radius: 8px; border: 1px solid var(--afm-line); box-shadow: var(--afm-shadow);
  }
  body:not(:has(#projector)) .district-card,
  body:not(:has(#projector)) .stat-card { border-top: 3px solid var(--afm-gold); }
  body:not(:has(#projector)) .district-card:hover,
  body:not(:has(#projector)) .feature-card:hover { box-shadow: 0 16px 30px rgba(5,40,64,.14); }

  /* Shared records, forms and controls on each HTML page. */
  body:not(:has(#projector)) .wrap,
  body:not(:has(#projector)) .container { max-width: min(100%, 1500px); }
  body:not(:has(#projector)) main.wrap > .panel,
  body:not(:has(#projector)) main.wrap > section.panel,
  body:not(:has(#projector)) main.wrap > div.panel { border: 1px solid var(--afm-line); border-radius: 8px; box-shadow: var(--afm-shadow); }
  body:not(:has(#projector)) input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  body:not(:has(#projector)) select,
  body:not(:has(#projector)) textarea {
    border-color: #c9d5de; border-radius: 5px;
    background-color: #fff; color: var(--afm-ink);
    min-height: 40px;
  }
  body:not(:has(#projector)) label { font-weight: 600; }
  body:not(:has(#projector)) button:not(.unstyled),
  body:not(:has(#projector)) .btn,
  body:not(:has(#projector)) .report-button,
  body:not(:has(#projector)) .hero-button {
    border-radius: 5px; font-weight: 700;
    box-shadow: 0 4px 10px rgba(5,40,64,.11);
  }
  body:not(:has(#projector)) .btn-main { background: var(--afm-navy); color: white; }
  body:not(:has(#projector)) button:hover,
  body:not(:has(#projector)) .btn:hover { filter: brightness(1.06); }
  body:not(:has(#projector)) table { border-collapse: collapse; }
  body:not(:has(#projector)) table th { letter-spacing: .015em; }
  body:not(:has(#projector)) table th, body:not(:has(#projector)) table td { vertical-align: top; }
  body:not(:has(#projector)) table tbody tr:hover { background: #f5f9fb; }
  body:not(:has(#projector)) .table-wrap,
  body:not(:has(#projector)) .table-container { overflow-x: auto; }

  /* Login: white LUICT-style panel on a dark AFM backdrop. */
  body:has(.login-page) { background: linear-gradient(105deg, rgba(2,24,39,.96),rgba(4,52,80,.91)), radial-gradient(circle at 80% 30%, #176b8a,#062c46 60%,#031522) !important; }
  body:has(.login-page) .login-page { padding: clamp(20px,4vw,58px); }
  body:has(.login-page) .login-wrapper { max-width: 1200px; gap: clamp(25px,5vw,75px); }
  body:has(.login-page) .login-left h1, body:has(.login-page) .login-left p,
  body:has(.login-page) .brand-text h2 { color: #fff; }
  body:has(.login-page) .login-left p { color: #d5e6ee; }
  body:has(.login-page) .brand-text span { color: #efc85b; }
  body:has(.login-page) .login-card,
  body:has(.login-page) .login-right,
  body:has(.login-page) .auth-card { border-radius: 6px; border-top: 5px solid var(--afm-gold); box-shadow: 0 22px 55px rgba(0,0,0,.29); }
  body:has(.login-page) .badges .badge { border-radius: 4px; }

  /* The five department dashboards and management page. */
  body:has(.shell .hero) .hero { border-radius: 8px; border-bottom: 4px solid var(--afm-gold); box-shadow: var(--afm-shadow); }
  body:has(.shell .hero) .hero .nav a { border-radius: 4px; }
  body:has(.shell .hero) .card { border-radius: 7px; border: 1px solid var(--afm-line); box-shadow: var(--afm-shadow); }
  body:has(.shell .hero) .card.metric { border-top: 3px solid var(--afm-gold); }
  body:has(.shell .hero) .notice { border-radius: 5px; border-left: 4px solid var(--afm-gold); }
  body:has(.wrap .box) .box { border: 1px solid var(--afm-line); border-radius: 7px; box-shadow: var(--afm-shadow); }

  /* Public website follows the same geometry without changing its content. */
  body:not(:has(#projector)) .umzi-topbar { background: var(--afm-navy-deep); }
  body:not(:has(#projector)) .umzi-header,
  body:not(:has(#projector)) .umzi-main { background-color: var(--afm-canvas); }
  body:not(:has(#projector)) .umzi-card,
  body:not(:has(#projector)) .umzi-hero-card,
  body:not(:has(#projector)) .umzi-feature-card { border-radius: 8px; border: 1px solid var(--afm-line); }

  /* Projector page keeps its existing full-screen slide layout and content. */
  body:has(#projector) { font-family: Arial, Helvetica, sans-serif; }
  body:has(#projector) .projector .region { letter-spacing: .12em; }

  @media (max-width: 900px) {
    body:not(:has(#projector)) .dashboard-shell { grid-template-columns: 1fr; }
    body:not(:has(#projector)) .sidebar { box-shadow: none; }
    body:not(:has(#projector)) .dashboard-main { padding: 18px 14px 28px; }
  }
  @media (max-width: 620px) {
    body:not(:has(#projector)) .sidebar-nav { grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); }
    body:has(.login-page) .login-wrapper { grid-template-columns: 1fr; }
  }
}
@media screen {
  body:not(:has(#projector)) .presenter-app .topbar,
  body:not(:has(#projector)) .assembly-dashboard .topbar {
    background: linear-gradient(105deg, var(--afm-navy-deep), var(--afm-navy));
    border-bottom: 3px solid var(--afm-gold);
  }
  body:not(:has(#projector)) .presenter-app .panel,
  body:not(:has(#projector)) .presenter-app .media-box,
  body:not(:has(#projector)) .presenter-app .bible-box,
  body:not(:has(#projector)) .presenter-app .live-box {
    border-radius: 7px; border: 1px solid var(--afm-line); box-shadow: var(--afm-shadow);
  }
  body:not(:has(#projector)) .presenter-app .top-btn,
  body:not(:has(#projector)) .presenter-app .control-btn { border-radius: 5px; }
  body:not(:has(#projector)) .login-box,
  body:not(:has(#projector)) .info-box,
  body:not(:has(#projector)) .gallery-item {
    border-radius: 7px; border: 1px solid var(--afm-line); box-shadow: var(--afm-shadow);
  }
}