/* SANA TEC Diving — shell rules the component sheet leaves to the page.
   Loaded after components.css in /admin/ and /my/. */

html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); }

/* One wordmark symbol per theme; show the right one. */
[data-theme="dark"]  .st-wm-light, [data-theme="light"] .st-wm-dark { display: none; }

/* Sidebar on wide screens; app bar + tab bar on phones. */
.st-shell { min-height: 100vh; }
.st-side .st-wm { height: 26px; width: 100px; }
.st-side a svg { width: 20px; height: 20px; }
.st-side__foot a, .st-side__foot button { font: 600 14px/1 var(--font-sans); }
.st-side__user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--muted); font-size: 14px; }
.st-appbar__back { text-decoration: none; color: var(--ink); }
.st-tabbar { z-index: 6; }
@media (max-width: 899px) {
  .st-shell { display: block; }
  .st-side { display: none; }
  .st-main { padding: 16px 16px 24px; }
  body.has-tabbar .st-main { padding-bottom: 96px; }
}
@media (min-width: 900px) {
  /* The sidebar replaces the app bar in the admin. The diver area has no
     sidebar, so its app bar (and the menu with sign-out) stays at every width. */
  .st-shell:not(.st-shell--diver) .st-appbar, .st-tabbar { display: none; }
  .st-main { max-width: 1100px; }
  .st-shell--diver .st-sheet { inset: auto 0 auto auto; max-width: 360px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-bar); }
}

/* Bootstrap grid inside the shell keeps our gutters. */
.st-main .row { --bs-gutter-x: 16px; }

/* Flash messages use the alert component. */
.st-flashes { display: grid; gap: 10px; margin-bottom: 16px; }

/* Page header block: eyebrow, title, actions. */
.st-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.st-page .st-h1 { margin: 2px 0 0; }
.st-page__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bootstrap tables on phones: the component sheet's container query needs data-labels. */
.table > :not(caption) > * > * { background: transparent; }

/* Signature document view: the transcribed text. */
.st-doc-view { max-height: 46vh; }
.st-doc-view h4 + h4 { margin-top: 14px; }
.st-doc-view ol { padding-left: 20px; }
.st-doc-view p, .st-doc-view li { margin: 0 0 8px; }
.st-doc-view .st-fill { font-weight: 700; border-bottom: 1px solid #1b2a33; }
.st-doc-caps { text-transform: uppercase; letter-spacing: .02em; }
.st-doc-meta { color: #4b6670; font-size: 12px; }
.st-doc-note { background: #fbefd2; color: #5a3d00; padding: 8px 10px; border-radius: 6px; }

/* Diver checklist rows are links. */
a.st-doc { color: var(--ink); }
a.st-doc:hover .st-doc__t { color: var(--aqua); }

/* Menu sheet on phones (the ≡ button). */
.st-sheet { position: fixed; inset: 0; z-index: 20; background: var(--bg); padding: 16px; overflow: auto; }
.st-sheet[hidden] { display: none; }
.st-sheet a, .st-sheet button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 16px/1 var(--font-sans); text-decoration: none; text-align: left; }
.st-sheet svg { width: 20px; height: 20px; color: var(--muted); }

/* Compatibility with pages written before the design system. */
.btn-aqua { --bs-btn-bg: var(--aqua); --bs-btn-border-color: var(--aqua); --bs-btn-color: var(--on-aqua); --bs-btn-hover-bg: var(--aqua); --bs-btn-hover-border-color: var(--aqua); --bs-btn-hover-color: var(--on-aqua); --bs-btn-active-bg: var(--aqua); --bs-btn-active-color: var(--on-aqua); }
.text-aqua { color: var(--aqua) !important; }
.stat { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.code-input { font-size: 2rem; letter-spacing: .5em; text-align: center; font-family: var(--font-serif); }
.form-check-input:checked { background-color: var(--aqua); border-color: var(--aqua); }
.lang-tag { font-size: 10px; font-weight: 700; letter-spacing: .7px; color: var(--aqua); text-transform: uppercase; }

/* Diver area: tabs under the app bar, a footer with language and sign-out. */
.st-tabs--diver { padding: 0 8px; }
.st-tabs--diver a { flex: 1; text-align: center; padding: 6px 4px; line-height: 1.15; white-space: normal; }
@media (max-width: 480px) { .st-tabs--diver a { font-size: 13px; } }
.st-datefield input.form-control { padding-left: 9px; padding-right: 2px; min-width: 0; }
.st-datefield .btn { padding: 0 7px; }
.st-diverfoot { display: flex; justify-content: center; gap: 24px; padding: 28px 16px 40px; border-top: 1px solid var(--line); margin-top: 24px; }
.st-diverfoot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font: 600 14px/1 var(--font-sans); text-decoration: none; }
.st-diverfoot a:hover { color: var(--ink); }
.st-datefield input.form-control.form-control-sm { padding-left: 8px; }
/* A switch standing in for a field: same height as a control, label and knob centred on it. */
.st-switchrow { display: flex; align-items: center; min-height: 48px; padding-left: 0; margin: 0; }
.st-switchrow .form-check-input { margin: 0 12px 0 0; flex: none; }
/* The calendar (vanillajs-datepicker, Bootstrap theme) in Tide Line colours, both themes. */
.datepicker { z-index: 1060; }
.datepicker-picker { background: var(--panel-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.18); font-family: var(--font-sans); }
.datepicker-picker .datepicker-cell, .datepicker-picker .datepicker-header .datepicker-controls .btn { color: var(--ink); background: transparent; border: 0; }
.datepicker-picker .datepicker-header .datepicker-controls .btn:hover, .datepicker-picker .datepicker-cell:not(.disabled):hover { background: var(--panel); color: var(--ink); }
.datepicker-picker .datepicker-cell.selected, .datepicker-picker .datepicker-cell.selected:hover { background: var(--aqua); color: #04263a; font-weight: 700; }
.datepicker-picker .datepicker-cell.today:not(.selected) { background: transparent; box-shadow: inset 0 0 0 1px var(--aqua); }
.datepicker-picker .datepicker-cell.prev, .datepicker-picker .datepicker-cell.next, .datepicker-picker .datepicker-cell.disabled { color: var(--muted); }
.datepicker-picker .datepicker-view .dow { color: var(--muted); font-weight: 600; }
.datepicker-picker .datepicker-footer .datepicker-controls .btn { color: var(--aqua); background: transparent; border: 0; }

/* Credentials: the editor is a row of the table, so controls line up under the columns. */
.st-credtable th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-credtable td { vertical-align: middle; }
.st-credtable__editor td { background: var(--panel); padding-top: 10px; padding-bottom: 10px; }
.st-credtable__editor .form-select-sm, .st-credtable__editor .form-control-sm { min-height: 36px; font-size: 14px; }
.st-credtable__editor #cred-agency { min-width: 88px; }
.st-credtable__editor #cred-level { min-width: 170px; }
.st-credtable__editor #cred-number { min-width: 104px; max-width: 130px; }
.st-credtable__editor #cred-expiry .st-datefield { min-width: 140px; }
.st-credtable .badge { font-size: 11px; vertical-align: middle; }
.st-credtable__editor .form-check-input { margin: 0; }
/* Nav groups (Scheduling): a summary styled like a link, with the children in a popup. */
.st-side__group { position: relative; }
.st-side__group summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--muted); font: 600 15px/1 var(--font-sans); cursor: pointer; list-style: none; }
.st-side__group summary::-webkit-details-marker { display: none; }
.st-side__group summary svg { width: 20px; height: 20px; }
.st-side__group summary .st-side__chev { width: 14px; height: 14px; margin-left: auto; opacity: .6; transition: transform .15s; }
.st-side__group[open] summary .st-side__chev { transform: rotate(90deg); }
.st-side__group summary[aria-current="page"] { background: var(--panel); color: var(--ink); }
.st-side__group summary[aria-current="page"] svg:first-child { color: var(--aqua); }
.st-side__pop { position: absolute; left: calc(100% - 6px); top: 0; z-index: 30; min-width: 184px; padding: 6px; background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.st-side__pop a { min-height: 40px; }
.st-tabbar__group { position: relative; }
.st-tabbar__group summary { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 11px/14px var(--font-sans); color: var(--muted); cursor: pointer; list-style: none; }
.st-tabbar__group summary::-webkit-details-marker { display: none; }
.st-tabbar__group summary[aria-current="page"] { color: var(--aqua); }
.st-tabbar__group summary svg { width: 22px; height: 22px; }
.st-tabbar__pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 168px; padding: 6px; background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.st-tabbar__pop a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px; font-size: 15px; border-radius: var(--radius-pill); }
.st-tabbar__pop a[aria-current="page"] { background: var(--panel); color: var(--ink); }
.st-tabbar__pop a svg { width: 20px; height: 20px; }
/* Passport stamps with the cenote's photo; a wave stands in until the site has one. */
.st-stampgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.st-stampcard { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.st-stampcard img, .st-stampcard__blank { display: grid; place-items: center; width: 100%; aspect-ratio: 3/2; object-fit: cover; color: var(--aqua); background: var(--panel-raised); }
.st-stampcard__blank svg { width: 28px; height: 28px; }
.st-stampcard figcaption { padding: 8px 10px 10px; font: 600 14px/1.2 var(--font-sans); color: var(--ink); }
.st-stampcard figcaption small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; font-size: 12px; }
.st-chip__thumb { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-left: -6px; }