:root {
  /* Navy surfaces */
  --navy: #0E2B3D;
  --navy-deep: #0A1F2D;
  --navy-mid: #164058;
  --navy-line: #1F4E6C;
  --navy-soft: rgba(247, 244, 238, 0.08);
  --navy-soft-strong: rgba(247, 244, 238, 0.14);

  /* Brand accents */
  --amber: #F2B431;
  --amber-deep: #D89A18;
  --amber-soft: #FCF0D2;
  --teal: #3DB5B0;
  --teal-deep: #278F8A;
  --teal-soft: #D7EFED;

  /* Light surfaces */
  --paper: #F7F4EE;
  --paper-deep: #EEE7D9;
  --paper-line: #DDD4C1;
  --paper-line-soft: #E8E1CF;

  /* Ink */
  --ink: #0E2B3D;
  --ink-soft: #426073;
  --ink-faint: #7D93A3;

  /* State */
  --danger: #C6452A;
  --danger-deep: #9B3621;
  --danger-soft: #F8DFD7;

  --radius: 10px;
  --radius-lg: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Montserrat', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Stops Safari from auto-inflating text for perceived readability.
     This is a separate iOS behaviour from the viewport zoom on focus,
     and both need addressing to completely prevent unexpected resizing. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100vh;
  font-weight: 500;
}
body.has-bg {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(61, 181, 176, 0.05) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(242, 180, 49, 0.05) 0, transparent 45%);
  background-attachment: fixed;
  position: relative;
}
body.has-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(14, 43, 61, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* ---------- NAVY TOPBAR (admin) ---------- */
.topbar {
  background: var(--navy);
  color: var(--paper);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--navy-deep);
}
.topbar-left { display: flex; gap: 20px; align-items: center; }
.topbar-brand {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.topbar-brand .mark { color: var(--amber); }
.topbar-brand .sub { color: var(--teal); }
.topbar-brand em { color: var(--amber); font-style: normal; font-weight: 800; }

.topbar-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar-nav a {
  color: rgba(247, 244, 238, 0.6);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.topbar-nav a.active {
  color: var(--navy);
  background: var(--amber);
  font-weight: 700;
}
.topbar-nav a:hover:not(.active) {
  color: var(--paper);
  background: var(--navy-soft);
}
.topbar-right { display: flex; gap: 14px; align-items: center; }
.admin-pill {
  padding: 4px 10px;
  background: rgba(61, 181, 176, 0.2);
  color: var(--teal);
  border-radius: 100px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-decoration: none;
  color: var(--paper);
  font-weight: 600;
}
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: var(--navy);
}

/* ---------- CONTAINER ---------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  position: relative;
  z-index: 1;
}
.wrap-narrow { max-width: 960px; }
.wrap-narrower { max-width: 720px; }

/* ---------- CUSTOMER SITE HEADER ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand-mark-svg {
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-name em { color: var(--amber-deep); font-style: normal; font-weight: 800; }
.brand-name .teal-word { color: var(--teal-deep); font-weight: 800; }
.brand-sub {
  font-size: 10px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700;
  margin-top: 3px;
}

/* ---------- BUTTONS ---------- */
.btn {
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--amber);
  color: var(--navy);
}
.btn-primary:not(:disabled):hover { background: var(--amber-deep); color: var(--navy); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-secondary {
  background: var(--navy);
  color: var(--paper);
}
.btn-secondary:not(:disabled):hover { background: var(--navy-mid); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--paper-line);
}
.btn-ghost:hover { background: var(--paper-deep); border-color: var(--ink-soft); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.btn-danger:hover { background: var(--danger); color: var(--paper); }

.btn-lg { padding: 14px 26px; font-size: 14px; }

/* ---------- PAGE HEADINGS ---------- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-line);
  gap: 20px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: none;
}
.page-head h1 em { color: var(--amber-deep); font-style: normal; font-weight: 800; }
.page-head h1 .teal-word { color: var(--teal-deep); font-weight: 800; }
.page-head p {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 6px;
  max-width: 540px;
  font-weight: 500;
}
.page-head-actions { display: flex; gap: 10px; align-items: center; }

/* Display heading on hero sections */
.display-head {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
}
.display-head em { color: var(--amber-deep); font-style: normal; font-weight: 800; }
.display-head .teal-word { color: var(--teal-deep); font-weight: 800; }

/* ---------- PANELS / CARDS ---------- */
.panel {
  background: #FFFFFF;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--paper);
}
.panel-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.panel-action {
  font-size: 11px;
  color: var(--teal-deep);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.panel-action:hover { color: var(--amber-deep); }

.card {
  background: #FFFFFF;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.card-tight { padding: 22px 20px; }

/* ---------- NAVY CARDS (dark variants) ---------- */
.panel-dark {
  background: var(--navy);
  color: var(--paper);
  border: 1px solid var(--navy-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-dark .panel-head { background: var(--navy-deep); border-bottom-color: var(--navy-mid); color: var(--paper); }
.panel-dark .panel-title { color: var(--paper); }

/* ---------- FORMS ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="time"],
input[type="search"], input[type="number"], textarea, select {
  width: 100%;
  /* max-width + box-sizing belt-and-braces the date input on iOS:
     Safari's internal intrinsic width for type="date" can override
     a plain width:100% when the field sits inside a constrained grid.
     max-width:100% plus border-box ensures padding is included in the
     calculation and the field can never exceed its container. */
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius);
  font-family: inherit;
  /* 16px is the iOS Safari threshold below which tapping a form field
     triggers an auto-zoom to make the text meet a readability minimum.
     Anything at 15px or less will cause the page to zoom on focus and
     never zoom back out. Keeping this at 16px prevents the unwanted
     zoom behaviour for iPhone users. */
  font-size: 16px;
  background: #FFFFFF;
  color: var(--ink);
  transition: all 0.15s ease;
  font-weight: 500;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 181, 176, 0.15);
}
input[readonly] { background: var(--paper-deep); color: var(--ink-soft); }

/* iOS Safari renders type="date" inputs with its own internal layout engine
   that often makes them render taller and wider than text inputs given the
   same CSS. This block reins in those defaults so date fields visually match
   their text-field neighbours. Each property below addresses a specific
   iOS quirk, so they're not redundant even though they look similar. */
input[type="date"] {
  /* Pin the height to match a text input's computed height. Text inputs
     with 11px vertical padding, 16px font size, and 1.5 line height compute
     to roughly 46px including the 1.5px border on each side. Setting this
     explicitly prevents iOS from inflating the field to its own preferred
     minimum height, which is sometimes larger than ours. */
  min-height: 46px;
  height: 46px;
  /* Override iOS's default of vertically centering a tall internal value
     display by forcing the line-height to match the field height minus
     the padding and border. This collapses any unused vertical space. */
  line-height: 1.2;
  /* Safari on iOS draws a calendar picker icon on the right side of every
     date input. The icon reserves horizontal space and can make the field
     feel visually heavier. Set appearance to none to strip iOS's default
     decoration, then re-apply the border and radius we want from the
     shared rule. We do not hide the icon because it signals that the field
     opens a picker, which is useful discoverability for users. */
  -webkit-appearance: none;
  appearance: none;
}

/* The WebKit-specific pseudo-element for the actual date value text inside
   an iOS date input. Without this rule, iOS reserves extra vertical space
   around the value for its own rendering, which is what makes the field
   appear taller than sibling text fields even when other sizing is correct.
   Forcing the value container to fill the available space and align with
   the surrounding text brings the visual height into parity. */
input[type="date"]::-webkit-date-and-time-value {
  min-height: 16px;
  line-height: 1.2;
  text-align: left;
}

/* The calendar picker icon lives in its own pseudo-element. By default it
   takes up a fixed amount of space on the right of the field. Reducing its
   opacity slightly preserves discoverability (users still see an icon that
   signals a picker) while making the field feel less visually busy. */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-field label {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-grid .full { grid-column: 1 / -1; }

/* ---------- CHIPS ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chip-teal { background: var(--teal-soft); color: var(--teal-deep); }
.chip-amber { background: var(--amber-soft); color: var(--amber-deep); }
.chip-danger { background: var(--danger-soft); color: var(--danger-deep); }
.chip-navy { background: var(--navy); color: var(--paper); }
.chip-gray { background: var(--paper-deep); color: var(--ink-soft); }
/* Backward-compat aliases so unchanged pages still render */
.chip-moss { background: var(--teal-soft); color: var(--teal-deep); }
.chip-tomato { background: var(--danger-soft); color: var(--danger-deep); }
.chip-butter { background: var(--amber-soft); color: var(--amber-deep); }
.chip-sky { background: var(--teal-soft); color: var(--teal-deep); }

/* ---------- FLASH MESSAGES ---------- */
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  border: 1.5px solid;
  font-weight: 500;
}
.flash-success { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-deep); }
.flash-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-deep); }
.flash-warn { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
.flash-info { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-deep); }

/* ---------- EMPTY STATES ---------- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ink-soft); }
.empty-state h3 { font-weight: 800; font-size: 16px; margin-bottom: 6px; color: var(--ink); text-transform: uppercase; letter-spacing: -0.005em; }
.empty-state p { font-size: 13px; max-width: 320px; margin: 0 auto; font-weight: 500; }

/* ---------- FOOTER ---------- */
footer.site-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-faint);
  flex-wrap: wrap;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ---------- TABLES ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  padding: 12px 22px;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper-deep);
  white-space: nowrap;
}
.table td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--paper-line-soft);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--paper); }

/* ---------- SEARCHBAR ---------- */
.searchbar { position: relative; display: flex; align-items: center; }
.searchbar svg {
  position: absolute;
  left: 14px;
  color: var(--ink-faint);
  pointer-events: none;
}
.searchbar input { padding-left: 40px; }

/* ---------- BRAND RIBBON (used on hero sections) ---------- */
.brand-ribbon {
  display: inline-block;
  padding: 5px 14px;
  background: var(--navy);
  color: var(--amber);
  border-radius: 100px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 14px;
}
.brand-ribbon-teal {
  background: var(--teal-soft);
  color: var(--teal-deep);
}
.brand-ribbon-amber {
  background: var(--amber-soft);
  color: var(--amber-deep);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .topbar { padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  .topbar-nav { overflow-x: auto; max-width: 100%; }
  .wrap { padding: 20px 16px 40px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head h1 { font-size: 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .display-head { font-size: 32px; }
}