/* ==========================================================================
   COK ARDMORE — UNIFIED STYLES
   File: /assets/css/site.css
   Purpose: Dark theme with “light/clean” feel, app-like on mobile.

   Structure:
     00. Variables (theme)
     01. Base & Resets
     02. Layout (page container)
     03. Header (brand header, centered logo)
     03A. Header Hamburger (floating, mobile-only)
     04. Role Menu (role-aware nav bar)
     04A. Role Menu — Auth in Drawer (Login/Logout)
     05. Content (sections, headings, icons)
     06. Buttons
     07. Footer
     08. Responsive (≤768px, ≤420px)
     09. Safe-area support (iOS)
     10. Admin Portal (scoped)
     11. Admin Tools (scoped)
     12. Form/Card spacing tweaks (scoped)
     13. Utility & Future Globals (extension shelf)
   ========================================================================== */


/* 00. VARIABLES ------------------------------------------------------------ */
:root{
  --cok-blue: #2D938B;
  /* Accent used for special pills (e.g., in-drawer auth).
     Keep separate from --cok-blue so we can theme independently later. */
  --cok-accent: #0aa;

  /* Surfaces */
  --bg:          #0E2433;
  --surface:     #142C3C;
  --surface-brd: #214457;
  --header-bg:   #0E1A1E;
  --menu-bg:     #0F2631;
  --footer-bg:   #0E1A1E;

  /* Text */
  --ink-100: #F2F6F9;
  --ink-300: #CFE6F2;
  --ink-700: #93A6B3;
  --ink-900: #EAF1F5;

  /* Sizing */
  --container-max: 980px;
  --header-h:      175px;   /* header height controls sticky menu offset */
  --radius-lg:     14px;
  --radius-pill:   999px;

  /* Shadows */
  --shadow-lg: 0 10px 28px rgba(0,0,0,.35);
}


/* 01. BASE & RESETS -------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--ink-900);
  background: var(--bg);
  font-family: Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--cok-blue); text-decoration: none; }
a:hover { text-decoration: underline; }


/* 02. LAYOUT --------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 16px auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--surface-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}


/* 03. HEADER --------------------------------------------------------------- */
.brand-header{
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid #22323A;
  padding: 12px 16px 8px;
  color: var(--ink-100);
  text-align: center;
}
.brand-logo-wrap{ display: flex; justify-content: center; align-items: center; }
.brand-left{ display: inline-flex; align-items: center; gap: 14px; color: inherit; }
.brand-logo{ display: block; height: var(--header-h); width: auto; object-fit: contain; }
.brand-right{ margin-top: 6px; display: block; text-align: right; }
.brand-user{ color: #AAB2BF; font-size: .95rem; margin-right: 6px; }
.brand-logout{ color: #F87171; font-weight: 600; }
.brand-logout:hover{ text-decoration: underline; }


/* 03A. HEADER HAMBURGER ---------------------------------------------------- */
.hamburger{
  position: absolute; left: 8px; top: 8px;
  z-index: 30;
  display: none;                /* shown on ≤768px */
  background: none; border: none;
  color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 6px 8px; border-radius: var(--radius-lg);
}
.hamburger:focus-visible{
  outline: 2px solid var(--ink-300);
  outline-offset: 2px;
}


/* 04. ROLE MENU ------------------------------------------------------------ */
.role-nav{
  position: sticky; top: var(--header-h); z-index: 15;
  background: var(--menu-bg);
  border-bottom: none;         /* no divider/gap by default */
  margin-bottom: 0;
}
/* Show a subtle divider only when the mobile menu is open */
body.nav-open .role-nav{ border-bottom: 1px solid var(--surface-brd); }

.role-nav__inner{
  max-width: calc(var(--container-max) + 120px);
  margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  position: relative; /* anchor for mobile dropdown */
}
.role-nav__link{
  color: #E7F6FB; font-weight: 700;
  text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius-pill);
}
.role-nav__link:hover{ background: rgba(255,255,255,.12); }
.role-nav__link.is-active{ outline: 2px solid rgba(255,255,255,.25); }
.role-nav__spacer{ flex: 1 1 auto; }
.role-nav__user{ color: var(--ink-300); font-size: .95rem; margin-right: 6px; }
.role-nav__auth{
  background: var(--cok-blue); color: #fff; border: 1px solid transparent;
  padding: 10px 12px; border-radius: var(--radius-pill);
}
.role-nav__auth:hover{ filter: brightness(.95); }

/* Desktop links (inline) */
.role-nav__links{ display: flex; gap: 12px; flex-wrap: wrap; }


/* 04A. ROLE MENU — AUTH IN DRAWER -----------------------------------------
   - Fixes: in-menu auth visible only when drawer open; distinct styling
   - Avoids overriding by scoping drawer link styles to `.role-nav__link`
--------------------------------------------------------------------------- */

/* Default (desktop): keep the in-menu auth hidden */
.role-nav__auth--menu,
.role-nav__user--menu { display: none; }

@media (max-width: 768px){
  /* Header + logo */
  .hamburger{ display: inline-block; }
  .brand-header{ padding: 10px 12px 6px; padding-left: 44px; }
  .brand-logo{ height: calc(var(--header-h) - 6px); }

  /* App-like container */
  .container{
    border-radius: 0; border-left: 0; border-right: 0;
    padding: 16px; margin: 0 auto;
  }

  /* Role bar layout */
  .role-nav__inner{ justify-content: space-between; }
  .role-nav__spacer{ display: none; }
  .role-nav__user{ order: 2; width: 100%; text-align: center; margin: 4px 0 0; }
  .role-nav__auth{ order: 3; }                 /* right-side auth (desktop) */
  .role-nav__auth,
  .role-nav__user--desktop { display: none !important; }  /* hide on mobile */

  /* MOBILE DROPDOWN — FLOATS, DOES NOT PUSH CONTENT */
  .role-nav__links{
    display: none;                 /* hidden by default = no gap */
    position: absolute;
    top: calc(100% + 6px); left: 12px; right: 12px;
    padding: 10px;
    background: var(--menu-bg);
    border: 1px solid var(--surface-brd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    flex-direction: column; gap: 8px;
  }

  /* Show when EITHER body has .nav-open OR element has .is-open */
  body.nav-open .role-nav__links,
  .role-nav__links.is-open{
    display: flex;
    animation: navDrop .16s ease-out;
  }

  /* IMPORTANT: style only standard menu links, not the auth pill */
  .role-nav__links a.role-nav__link{
    display: block;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--cok-blue);
    color: #fff;
  }
  .role-nav__links a.role-nav__link:hover{ filter: brightness(.95); }

  /* Show the auth/user ONLY when the drawer is open */
  .role-nav__links.is-open .role-nav__auth--menu,
  .role-nav__links.is-open .role-nav__user--menu { display: inline-flex; }
}

/* In-menu auth pill (distinct look from standard menu links) */
.role-nav__auth--menu{
  padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--cok-accent);
  color: #001b1f;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}
.role-nav__links.is-open .role-nav__auth--menu:hover { opacity: .9; }


/* 05. CONTENT -------------------------------------------------------------- */
.section{ margin-bottom: 22px; }
h1, h2{ color: var(--ink-100); margin: 0 0 8px; }
h2{ font-size: 22px; }

/* Heading icon normalization (fixes giant SVGs in headings) */
.with-icon{ display: inline-flex; align-items: center; gap: .5rem; }
.with-icon .icon{ flex: 0 0 auto; width: 30px; height: 30px; line-height: 1; }
.with-icon .icon svg{ display: block; width: 100%; height: 100%; fill: currentColor; }
.with-icon .icon .accent{ fill: var(--cok-blue); }

@media (max-width: 768px){
  .with-icon .icon{ width: 24px; height: 24px; }
}
@media (max-width: 420px){
  .with-icon .icon{ width: 22px; height: 22px; }
}


/* 06. BUTTONS -------------------------------------------------------------- */
.btn{
  display: inline-block; padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700; border: 1px solid transparent;
  background: var(--cok-blue); color: #fff; text-decoration: none;
}
.btn:hover{ filter: brightness(.95); }
.btn:focus-visible,
.role-nav__link:focus-visible{
  outline: 2px solid var(--ink-300); outline-offset: 2px;
  text-decoration: none;
}


/* 07. FOOTER --------------------------------------------------------------- */
footer{ background: var(--footer-bg); color: #fff; text-align: center; }
footer .footer-links{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
footer a{ color: var(--ink-300); }
footer a:hover{ color: var(--ink-100); }


/* 08. RESPONSIVE (shared odds & ends) ------------------------------------- */
@media (max-width: 768px){
  body{ font-size: 15px; }
  h2{ font-size: 20px; }
}

@media (max-width: 420px){
  .role-nav__inner{ gap: 8px; }
  .role-nav__link, .role-nav__auth{ padding: 9px 8px; font-size: 14px; }
}

/* Dropdown animation */
@keyframes navDrop{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 09. SAFE-AREA ------------------------------------------------------------ */
@supports (padding: max(0px)){
  body{ padding-bottom: env(safe-area-inset-bottom); }
  .brand-header{ padding-top: max(0px, env(safe-area-inset-top)); }
  footer{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}


/* Spacing directly under the role bar
   - No gap by default
   - On mobile, add a little space ONLY while menu is open */
.role-nav + .wrap,
.role-nav + .container { margin-top: 0; }
@media (max-width: 768px){
  body.nav-open .role-nav + .wrap,
  body.nav-open .role-nav + .container { margin-top: 8px; }
}


/* 10. ADMIN PORTAL (scoped) ----------------------------------------------- */
body.brand-page{
  --admin-bg:   var(--header-bg);
  --admin-card: #142C3C;
  --admin-ink:  #e8ecf1;
  --admin-muted:#a9b7c6;
  --admin-brd:  #2a3340;
  --admin-acc:  #81d4fa;
  --admin-acc2: #a8e6cf;
  --admin-red:  #c0392b;

  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
body.brand-page { --header-h: 180px; }
@media (max-width: 640px){
  body.brand-page { --header-h: 120px; }
}
.brand-fill{ height: var(--header-h); }

body.brand-page .wrap{ max-width: 1100px; margin: 0 auto; padding:16px; }
body.brand-page .page-card{
  background: var(--admin-card);
  border: 1px solid var(--admin-brd);
  border-radius: 16px; box-shadow: 0 0 12px rgba(0,0,0,.35);
  padding: 18px;
}

/* Admin tiles/grid/pills */
body.brand-page .tiles{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  body.brand-page .tiles{ grid-template-columns: 1fr; }
}
body.brand-page .tile{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #121824;
  border: 1px solid var(--admin-brd);
  border-radius: 12px;
  color: var(--admin-ink);
  text-decoration: none;
}
body.brand-page .tile .label{ font-weight: 700; }
body.brand-page .tile .hint { color: var(--admin-muted); font-size: 12px; }
body.brand-page .pill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--admin-acc);
  color: #0b111a;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}


/* 11. ADMIN TOOLS (scoped) ------------------------------------------------ */
body.brand-page .card{
  background: var(--header-bg); /* match banner */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0,0,0,.35);
  padding: 16px;
}
body.brand-page h1{ margin:0 0 10px; font-size: 22px; }
body.brand-page .muted{ color: var(--ink-700); }

body.brand-page table{ width:100%; border-collapse: collapse; margin-top: 10px; }
body.brand-page th,
body.brand-page td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; }
body.brand-page th{ font-weight: 700; color: var(--ink-300); }

body.brand-page .actions{ display:flex; gap:8px; flex-wrap:wrap; }
body.brand-page .btn{
  appearance:none; border:0; cursor:pointer;
  background: var(--cok-blue); color:#fff;
  padding:8px 12px; border-radius:10px; font-weight:700;
  text-decoration:none; display:inline-block;
}
body.brand-page .btn.secondary { background:#3a4a5f; color:#e5e7eb; }
body.brand-page .btn.danger    { background:#c0392b; color:#fff; }

body.brand-page .status-badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
}
body.brand-page .status--pending { background:#54451a; color:#ffeaa7; }
body.brand-page .status--active  { background:#1f3a2a; color:#a8e6cf; }
body.brand-page .status--inactive{ background:#2f3640; color:#dcdde1; }
body.brand-page .status--denied  { background:#3b1e1e; color:#ffd1d1; }

body.brand-page .notice{
  margin:10px 0; padding:10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.08); background:#2a2a2a;
}
body.brand-page .notice.ok  { background:#1f3a2a; border-color:#2b6b3a; }
body.brand-page .notice.err { background:#3b1e1e; border-color:#7a2d2d; }


/* Request form inside a .card */
.card .request-form { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.card .form-section { margin-bottom: 16px; }
.card label { color: var(--ink-100); }

.card input[type="text"],
.card input[type="email"],
.card input[type="number"],
.card select,
.card textarea{
  width:100%;
  padding:10px;
  background:#1e2a33;             /* slight contrast from card surface */
  color: var(--ink-100);
  border:1px solid var(--surface-brd);
  border-radius: 10px;
}
.card input[type="text"]:focus,
.card input[type="email"]:focus,
.card input[type="number"]:focus,
.card select:focus,
.card textarea:focus{
  outline:none; border-color: var(--ink-300);
  box-shadow: 0 0 4px var(--ink-300);
}

.card .child-section{
  border:1px dashed var(--surface-brd);
  padding:14px; margin:12px 0 18px;
  border-radius: 12px; background: #0F2631;
}

.card .form-submit{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between;
}
.card .form-submit button,
.card .form-submit input[type="submit"]{
  background: var(--cok-blue);
  color:#fff; font-weight:700;
  padding:12px 16px; border:1px solid transparent;
  border-radius: var(--radius-pill); cursor:pointer;
  flex:1 1 auto; min-width:120px;
}
.card .note{ color: var(--ink-700); }


/* 12. FORM/CARD SPACING TWEAKS (scoped) ----------------------------------- */
/* push the first container below the role bar a bit */
.role-nav + .wrap,
.role-nav + .container { margin-top: 24px !important; }

/* comfortable card padding on form pages */
.container .card { padding: 24px 28px !important; margin-bottom: 32px; }

/* consistent label/input spacing */
.request-form label { margin-top: 12px; margin-bottom: 4px; }
.request-form h2 { margin-top: 0; margin-bottom: 12px; }
.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="number"],
.request-form select,
.request-form textarea { padding: 12px; /* a touch more vertical space */ }


/* 13. UTILITY & FUTURE GLOBALS --------------------------------------------
   (Add small helpers here as we universalize more pages)
--------------------------------------------------------------------------- */
/* Example utilities for spacing/visibility we can reuse later */
.u-hidden   { display:none !important; }
.u-inline   { display:inline !important; }
.u-center   { text-align:center !important; }
.u-right    { text-align:right !important; }
.u-mt-8     { margin-top:8px !important; }
.u-mb-8     { margin-bottom:8px !important; }
.u-mt-16    { margin-top:16px !important; }
.u-mb-16    { margin-bottom:16px !important; }

/* Aliases for older markup */
.hidden { display: none !important; }   /* maps to your .u-hidden */
.mt-2   { margin-top: 8px !important; } /* maps to your .u-mt-8 */

.card .actions {
  display: flex;
  gap: 12px;           /* space between buttons */
  flex-wrap: wrap;
  margin-top: 16px;    /* push them down from the last input */
}
.card .actions .btn {
  flex: 1 1 auto;      /* buttons grow/shrink evenly */
  min-width: 150px;
  text-align: center;
}



.form-heading {
  text-align: center;
  margin-bottom: 1rem;
}
.form-heading h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cok-blue);
}

/* Compact filter bar */
.filterbar .filter-row{
  display:flex; gap:10px; align-items:end; flex-wrap:wrap;
}
.filterbar label.inline{
  display:flex; flex-direction:column; gap:6px; min-width:180px;
}
.filterbar label.inline.grow{ flex:1 1 260px; }
.filterbar select,
.filterbar input[type="text"],
.filterbar input[type="date"]{
  padding:10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#121824; color:#e8ecf1;
}
.filterbar .btn.slim{ padding:8px 10px; border-radius:10px; }

/* Collapsible dates row */
.filterbar .date-row{
  margin-top:10px; padding:10px; border-radius:12px;
  background:#0f141e; border:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:12px;
}
.filterbar .date-actions{ display:flex; gap:8px; align-items:center; }
@media (max-width: 640px){
  .filterbar .date-row{ grid-template-columns: 1fr; }
}
.card-spacer {
  margin: 14px 0;
  height: 1px;
  background: rgba(255,255,255,.08);
  border-radius: 1px;
}