/* =========================
   Base + Resets
   ========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.45;
}

/* Links never fall back to Times New Roman */
a { color: #111; text-decoration: none; }
a:hover { color: #333; }

/* =========================
   Layout helpers
   ========================= */
:root { --nav-h: 64px; }

/* Page offset for fixed navbar (replaces <br> stacks) */
:root {
  --nav-h: 64px;        /* actual fixed navbar height */
  --page-gap: 8px;      /* small breathing room */
}

/* Page offset for fixed navbar */
.page {
  padding-top: calc(var(--nav-h) + var(--page-gap));
}

/* Prevent the first section/heading/paragraph from adding extra top margin */
.page > :first-child {
  margin-top: 0;
}

/* Prevent first-child margins from "escaping" under the fixed nav */
.page { 
  display: flow-root;            /* creates a new block formatting context */
}

/* Belt-and-suspenders: zero the very first child’s top margin */
.page > *:first-child { 
  margin-top: 0;
}

/* Ensure navbar text & links inherit your site font (no Times fallback) */
.site-nav, .site-nav *,.navbar, .navbar * { 
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

/* If a page can’t (or doesn’t) wrap in .page, give body a safe offset by opt-in class */
body.has-fixed-nav {
  padding-top: calc(var(--nav-h) + 16px + env(safe-area-inset-top));
  padding-top: calc(var(--nav-h) + 16px + constant(safe-area-inset-top));
}

/* Legacy table width helper still seen in templates */
.styled {
  width: 60%;
  max-width: 90%;
  margin: 0 auto;
}
@media (max-width: 1000px) { .styled { width: 80%; } }
@media (max-width: 600px)  { .styled { width: 100%; } }

/* =========================
   Containers / Cards (new .ui-* and legacy aliases)
   ========================= */
.ui-wrap, .wrap { /* alias so old pages keep working */
  width: 1000px;
  max-width: 90%;
  margin: 15px auto;
  padding: 16px;
  border: 1px solid #d1d5db;       /* lighter, modern border */
  background: #F9FAFB;              /* match navbar */
  border-radius: .25em;
}
.ui-wrap h1, .wrap h1 { margin: 0 0 12px; text-align: center; }

.ui-menu, .menu {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ui-card, .card {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  min-height: 110px;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  color: #111; text-decoration: none;
  transition: box-shadow .2s, transform .06s, color .2s;
}
.ui-card:hover, .card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }

.ui-title, .title { font-weight: 600; text-align: center; }

/* Forms inside cards */
.ui-form .ui-label, .form .label { font-weight: 600; margin-bottom: 8px; display: block; text-align: center; }
.ui-form .ui-row,   .form .row   { display: flex; gap: 8px; justify-content: center; width: 100%; }
.ui-form input[type="text"], .form input[type="text"] { width: 140px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
.ui-form button, .form button {
  padding: 8px 12px; border: 1px solid #111; background: #111; color: #fff;
  border-radius: 6px; cursor: pointer;
}
.ui-form button:hover, .form button:hover { background: #222; border-color: #222; color: #fff; }

/* Mobile-friendly form stack */
@media (max-width: 520px){
  .ui-form .ui-row, .form .row { flex-direction: column; align-items: stretch; }
  .ui-form input[type="text"], .ui-form button,
  .form input[type="text"],    .form button { width: 100%; }
}

/* =========================
   Alerts & Notecards
   ========================= */
.ui-alert{
  width: 800px; max-width: 90%;
  margin: 15px auto;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.ui-alert--success { border-color: #16a34a; background: #e9fbe8; color: #14532d; }
.ui-alert--error   { border-color: #b91c1c; background: #fdecec; color: #7f1d1d; }
.ui-alert--info    { border-color: #2563eb; background: #eef5ff; color: #1e40af; }

/* Generic “note” block for inline notices */
.note-card{
  display: block;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  background: #F9FAFB;
  color: #111;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
  line-height: 1.5;
}
.note-card a { text-decoration: underline; }
.note-card b, .note-card strong { color: #0f172a; }

.note-card--info    { background: #eef6ff; border-color: #b6d3ff; color: #0b3d91; }
.note-card--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.note-card--warning { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.note-card--danger  { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

@media (max-width: 520px){ .note-card{ padding: 12px; } }

/* =========================
   Navigation (new .site-nav)
   ========================= */

/* Make the viewport/safe-area match the navbar color */
html { background: #F9FAFB; }

/* NAV: fill the notch/safe-area above the fixed bar */
.site-nav,
.navbar {
  background: #F9FAFB;
  border-bottom: 1px solid #d1d5db;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}

/* Paint the safe-area above the bar */
.site-nav::before,
.navbar::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: #F9FAFB;
  pointer-events: none;
}

.site-nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #F9FAFB;          /* match wrap background */
  border-bottom: 1px solid #d1d5db;
  /* Color-fill the iOS safe area above the nav so there’s no “gap” */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.site-nav__inner{
  max-width: 1200px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav__brand img { display: block; height: 48px; width: auto; }

/* Desktop menu */
.site-nav__menu{
  display: flex; gap: 8px 12px;
  list-style: none; margin: 0; padding: 0;
}
.site-nav__link{
  display: inline-block;
  color: #333; padding: 8px 12px; border-radius: 6px;
}
.site-nav__link:hover{ background: #e8e8e8; }

/* Mobile / tablet */
.site-nav__toggle{
  display: none; background: transparent; border: 0; padding: 8px; border-radius: 6px;
}
.site-nav__bar{
  display: block; width: 24px; height: 2px; background: #333; margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.site-nav__sr{ position: absolute; left: -9999px; }

@media (max-width: 1000px){
  .site-nav__toggle{ display: block; }
  .site-nav__menu{
    position: fixed;
    top: calc(var(--nav-h) + constant(safe-area-inset-top));
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    left: 0; right: 0;
    background: #F9FAFB;
    border-bottom: 1px solid #d1d5db;
    transform: translateY(-120%);
    transition: transform .25s ease;
    flex-direction: column;
    padding: 12px 16px;
  }
  .site-nav.is-open .site-nav__menu{ transform: translateY(0); }
  /* animate toggle into an “X” */
  .site-nav.is-open .site-nav__bar:nth-child(2){ transform: translateY(7px) rotate(45deg); }
  .site-nav.is-open .site-nav__bar:nth-child(3){ opacity: 0; }
  .site-nav.is-open .site-nav__bar:nth-child(4){ transform: translateY(-7px) rotate(-45deg); }
}

/* =========================
   Legacy navbar bridge (.navbar from older templates)
   Keeps old pages working while you migrate to .site-nav
   ========================= */
.navbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #F9FAFB;
  border-bottom: 1px solid #d1d5db;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.navbar-container{
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
}
.menu-items{
  display: flex; list-style: none; margin: 0; padding: 0; gap: 8px 12px;
}
.menu-items a{ color: #333; padding: 8px 12px; border-radius: 6px; }
.menu-items a:hover{ background: #e8e8e8; }

/* Hamburger (legacy) */
.hamburger-lines{ display: none; }
@media (max-width: 1000px){
  .hamburger-lines{ display: block; }
  .menu-items{
    position: fixed;
    top: calc(var(--nav-h) + constant(safe-area-inset-top));
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    left: 0; right: 0;
    background: #F9FAFB;
    border-bottom: 1px solid #d1d5db;
    transform: translateY(-120%);
    transition: transform .25s ease;
    flex-direction: column;
    padding: 12px 16px;
  }
  /* if your JS toggles a .is-open on .navbar, mirror behavior */
  .navbar.is-open .menu-items{ transform: translateY(0); }
}

/* =========================
   Utilities
   ========================= */
.hidden { display: none !important; }
.center { text-align: center !important; }


/* ===== Forms: global defaults ===== */
:root{
  --input-bg:#fff;
  --input-bd:#d1d5db;
  --input-bd-focus:#2563eb;
  --input-ring: rgba(37,99,235,.35);
  --input-radius:8px;
  --input-pad:10px 12px;

  --btn-bg:#111;
  --btn-bd:#111;
  --btn-fg:#fff;
  --btn-bg-hover:#222;
  --btn-bd-hover:#222;
  --btn-radius:8px;
  --btn-pad:10px 14px;
}

/* =========================
   Forms
   ========================= */

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 16px;            /* no zoom on iOS */
  line-height: 1.4;
  color: #111;
}

/* Textual fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 460px;           /* adjust if you want wider */
  padding: var(--input-pad);
  border: 1px solid var(--input-bd);
  background: var(--input-bg);
  border-radius: var(--input-radius);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea { min-height: 110px; resize: vertical; }

/* Focus states (accessible, consistent) */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--input-bd-focus);
  box-shadow: 0 0 0 3px var(--input-ring);
}

/* Disabled/read-only */
input:disabled,
select:disabled,
textarea:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

/* Placeholders */
::placeholder { color: #6b7280; }

/* Number inputs – hide spinners (Chrome/Edge) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Buttons: element + common classes + legacy submit */
button,
.input-button,
.btn,
input[type="submit"],
input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: var(--btn-pad);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
}

button:hover,
.input-button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bd-hover);
  color: #fff;
}

button:active,
.input-button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
}

button:disabled,
.input-button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Subtle “link button” variant */
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: #2563eb !important;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* Inline forms in cards: let fields stretch full width on narrow screens */
@media (max-width: 520px){
  .ui-form .ui-row,
  .form .row { flex-direction: column; align-items: stretch; }
  .ui-form input[type="text"],
  .ui-form button,
  .form input[type="text"],
  .form button { width: 100%; max-width: none; }
}

/* =========================
   Tables (reusable)
   ========================= */
:root{
  --table-bd:#d1d5db;
  --table-head-bg:#f3f4f6;
  --table-zebra:#F9FAFB;  /* soft gray to match .ui-wrap */
}

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.table{
  width:100%;
  border-collapse: collapse;
  border:1px solid var(--table-bd);
  border-radius:8px;              /* visually rounded corners */
  overflow:hidden;                /* keep radius on child edges */
  background:#fff;
}

.table thead th{
  background:var(--table-head-bg);
  color:#111;
  font-weight:600;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--table-bd);
  white-space:nowrap;
}

.table tbody td{
  padding:10px 12px;
  border-top:1px solid var(--table-bd);
  vertical-align:top;
}

.table tbody tr:nth-child(even){
  background:var(--table-zebra);
}

/* Alignment helpers */
.table--center thead th,
.table--center tbody td { text-align:center; }

.table--right thead th,
.table--right tbody td { text-align:right; }

/* Density helpers */
.table--dense thead th,
.table--dense tbody td { padding:8px 10px; }

.table--compact thead th,
.table--compact tbody td { padding:6px 8px; }