/* Staff panel — reuses tokens from style.css */
.panel-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; margin-inline:-20px; }
@media (min-width:900px){ .panel-shell{ margin-inline:-48px; } }
@media (max-width:800px){ .panel-shell{ grid-template-columns:1fr; margin-inline:-20px; } }

/* Mobile-only top bar carrying the hamburger — hidden entirely on desktop,
   where the sidebar is always visible so there's nothing to toggle. */
.admin-topbar{ display:none; }
@media (max-width:800px){
  .admin-topbar{
    display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:60;
    background:rgba(238,240,238,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
    padding:12px 20px;
  }
}
.admin-hamburger{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  background:#fff; border:1px solid var(--line); border-radius:4px; cursor:pointer; padding:0;
}
.admin-hamburger-icon{ display:block; width:18px; height:13px; position:relative; }
.admin-hamburger-icon span{
  position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.admin-hamburger-icon span:nth-child(1){ top:0; }
.admin-hamburger-icon span:nth-child(2){ top:5.5px; }
.admin-hamburger-icon span:nth-child(3){ top:11px; }
.admin-hamburger[aria-expanded="true"] .admin-hamburger-icon span:nth-child(1){ top:5.5px; transform:rotate(45deg); }
.admin-hamburger[aria-expanded="true"] .admin-hamburger-icon span:nth-child(2){ opacity:0; }
.admin-hamburger[aria-expanded="true"] .admin-hamburger-icon span:nth-child(3){ top:5.5px; transform:rotate(-45deg); }

.panel-backdrop{ display:none; }
@media (max-width:800px){
  .panel-backdrop{
    display:none; position:fixed; inset:0; background:rgba(12,16,20,.55); z-index:70;
    opacity:0; transition:opacity .22s ease;
  }
  .panel-backdrop.open{ display:block; opacity:1; }
}

/* Desktop: sidebar stays pinned to the viewport and scrolls itself if it
   ever needs to — the page's own content (.panel-main) is what scrolls.
   Mobile: it's an off-canvas drawer instead, toggled by the hamburger. */
.panel-side{
  background:var(--navy); color:#c7ccd1; padding:24px 18px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
}
@media (max-width:800px){
  .panel-side{
    position:fixed; top:0; left:0; height:100vh; width:min(280px, 84vw); z-index:80;
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.16,1,.3,1);
    box-shadow:10px 0 32px rgba(0,0,0,.3);
  }
  .panel-side.open{ transform:translateX(0); }
}
.panel-side::-webkit-scrollbar{ width:8px; }
.panel-side::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:4px; }
.panel-side::-webkit-scrollbar-track{ background:transparent; }

.panel-side .brand-word{ color:#f6f4ef; margin-bottom:18px; display:block; }
.panel-side a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:#c7ccd1;
  font-size:.88rem; border-radius:5px; position:relative;
  transition:background-color .16s ease, color .16s ease, transform .12s cubic-bezier(.2,.7,.3,1);
}
.panel-side a::before{
  /* Lives inside the link's own box (not offset outside it) so it can never
     get clipped by an ancestor's overflow — .panel-side needs overflow-y:auto
     to scroll, and per spec that silently forces overflow-x to 'auto' too,
     which used to clip this when it was positioned at left:-18px. */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ember-bright); border-radius:5px 0 0 5px; opacity:0; transition:opacity .16s ease;
}
.panel-side a:hover{ background:rgba(255,255,255,0.07); color:#fff; transform:translateX(2px); }
.panel-side a.active{ background:rgba(255,255,255,0.09); color:#fff; }
.panel-side a.active::before{ opacity:1; }
.panel-side a:hover::before{ opacity:.6; }
.panel-side .section-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#6d7680; margin:18px 12px 6px; }
.panel-side details.nav-group{ margin:0; }
.panel-side details.nav-group summary{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#6d7680;
  margin:14px 4px 4px; padding:4px 8px; cursor:pointer; list-style:none; border-radius:4px;
  transition:color .14s ease, background-color .14s ease;
}
.panel-side details.nav-group summary::-webkit-details-marker{ display:none; }
.panel-side details.nav-group summary::before{
  content:"›"; display:inline-block; margin-right:6px; font-family:var(--font-body,inherit);
  font-size:.95rem; transition:transform .16s ease; transform:rotate(0deg);
}
.panel-side details.nav-group[open] summary::before{ transform:rotate(90deg); }
.panel-side details.nav-group summary:hover{ color:#fff; background:rgba(255,255,255,0.06); }
.panel-side details.nav-group .nav-group-body{ display:flex; flex-direction:column; gap:4px; }
.panel-side .who{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line-dark); font-size:.8rem; }
.panel-side .who a{ padding:4px 2px; display:inline-flex; }
.panel-side .who a::before{ content:none; }
.panel-side .who a:hover{ background:none; color:var(--ember-bright); transform:none; }

.panel-main{ padding:32px clamp(20px,4vw,48px); background:var(--cloud); min-width:0; }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.panel-head h1{ font-family:var(--font-body); font-weight:800; font-size:1.7rem; }

.flash{ padding:12px 16px; margin-bottom:20px; font-size:.9rem; border-left:3px solid; border-radius:0 3px 3px 0; animation:phx-flash-in .2s ease; }
.flash.success{ background:#eaf6ec; border-color:#3d9a52; color:#22582e; }
.flash.error{ background:#fbeae7; border-color:#66191c; color:#5a1518; }
@keyframes phx-flash-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.panel-card{ background:#fff; border:1px solid var(--line); padding:22px; margin-bottom:22px; border-radius:5px; }
.panel-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.panel-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); padding:9px 10px; border-bottom:1px solid var(--line); }
.panel-table td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.panel-table tr{ transition:background-color .12s ease; }
.panel-table tr:hover td{ background:var(--cloud-2); }
/* Every action cell mixes <a class="btn-sm"> with <form><button></form>.
   IMPORTANT: the flex layout lives on an inner <div>, never on the <td>
   itself — a <td> with display:flex stops being a table-cell box, so it no
   longer stretches to match its row's height the way every sibling cell
   does. That was the actual cause of the "Manage button sits wrong"
   report: on any row where another cell wrapped to two lines (a badge, a
   long email) and grew taller, the flex <td> stayed at its own shorter
   content height instead of stretching with the row, leaving a gap of dead
   row-background below it that the button never occupied. Wrapping in a
   div keeps the <td> a normal, full-height, vertically-centered cell — the
   div only need center its own contents within it. */
.cell-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cell-actions form{ margin:0; display:inline-flex; align-items:center; }
.cell-actions-stack{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; height:100%; min-width:110px; }
.panel-table td[style*="display:flex"] form{ margin:0; display:inline-flex; align-items:center; }

.form-grid{ display:grid; gap:16px; }
.form-row label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
/* Every text-ish input, a <select>, and a <textarea> share this box —
   without an explicit height a <select> renders a few px taller than a
   text input in most browsers (native dropdown chrome isn't part of the
   padding box the same way), so two side-by-side in a .grid.cols-2 look
   visibly offset from each other. box-sizing + a fixed height forces them
   to match exactly; appearance:none + the custom arrow replace the native
   chrome that caused the mismatch in the first place. */
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=datetime-local], .form-row input[type=url],
.form-row input[type=tel], .form-row select, .form-row textarea{
  box-sizing:border-box; width:100%; height:40px; padding:0 12px; border:1px solid var(--line); background:#fff; font:inherit; font-size:.9rem;
}
.form-row select{
  height:40px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7278' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px;
}
.form-row textarea{ height:auto; min-height:120px; padding:10px 12px; resize:vertical; }
.form-row .hint{ font-size:.76rem; color:var(--steel); margin-top:4px; }

/* Custom listbox for avatar source: a native <select>'s <option> can't hold
   a nested clickable "Link" control, and we need exactly that for a source
   that isn't connected yet, so this is a plain button + absolutely
   positioned menu instead, wired up in layout-bottom.php. */
.acc-select{ position:relative; }
.acc-select-trigger{
  box-sizing:border-box; width:100%; height:40px; padding:0 32px 0 12px; border:1px solid var(--line); background:#fff;
  font:inherit; font-size:.9rem; text-align:left; cursor:pointer; border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7278' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.acc-select-trigger:hover{ border-color:var(--steel-2); }
.acc-select-menu{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:0 8px 20px rgba(0,0,0,.1);
  padding:4px; display:flex; flex-direction:column; gap:2px;
}
/* display:flex above otherwise beats the browser's own [hidden]{display:none}
   UA rule (author CSS always wins over UA CSS, whatever the specificity), so
   the hidden attribute toggled in JS would stop actually hiding anything -
   this rule needs the extra specificity to win the fight back. */
.acc-select-menu[hidden]{ display:none; }
.acc-select-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:3px; font-size:.86rem; color:var(--ink); cursor:pointer;
}
.acc-select-option:not(.is-disabled):hover{ background:var(--cloud-2); }
.acc-select-option.is-selected{ background:var(--cloud-2); font-weight:600; }
.acc-select-option.is-disabled{ color:var(--steel); cursor:default; }
.acc-select-option.is-disabled span:first-child{ opacity:.6; }
.acc-select-note{ font-size:.72rem; color:var(--steel); flex:none; }
.acc-select-link{
  flex:none; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border:1px solid var(--ember);
  border-radius:3px; color:var(--ember); font-size:.72rem; font-weight:600; text-decoration:none; white-space:nowrap;
}
.acc-select-link:hover{ background:var(--ember); color:#fff; }

/* Admin-disabled-profile notice — an actual reason, not a run-on sentence. */
.notice-disabled{
  display:flex; gap:12px; align-items:flex-start;
  background:#fbe7e2; border:1px solid var(--ember); border-radius:4px;
  padding:14px 16px; margin-bottom:16px;
}
.notice-disabled-icon{ font-size:1.3rem; line-height:1; color:var(--ember); flex:none; margin-top:1px; }
.notice-disabled strong{ display:block; color:var(--ink); font-size:.92rem; }
.notice-disabled p{ margin:6px 0 0; font-size:.84rem; color:var(--steel); }
.notice-disabled-reason{ font-style:italic; color:var(--ink) !important; }

/* File inputs default to whatever the OS renders — style the button part
   directly via ::file-selector-button (the modern standard) plus the old
   -webkit- name, and give the input itself a matching box so the whole
   thing reads as one control instead of "button + system label text". */
.panel-main input[type=file]{
  box-sizing:border-box; width:100%; padding:8px; border:1px solid var(--line); background:#fff;
  border-radius:3px; font:inherit; font-size:.84rem; color:var(--steel); cursor:pointer;
}
.panel-main input[type=file]::file-selector-button,
.panel-main input[type=file]::-webkit-file-upload-button{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
  padding:8px 14px; margin-right:12px; border:none; border-radius:3px; background:var(--ink); color:#fff;
  cursor:pointer; transition:background-color .14s ease;
}
.panel-main input[type=file]:hover::file-selector-button,
.panel-main input[type=file]:hover::-webkit-file-upload-button{ background:var(--ember); }

/* Focus + hover polish for every text-ish input in the panel, not just
   ones wrapped in .form-row (search boxes, inline Discord-ID fields, etc). */
.panel-main input[type=text], .panel-main input[type=email], .panel-main input[type=password],
.panel-main input[type=number], .panel-main input[type=datetime-local], .panel-main input[type=url],
.panel-main input[type=tel], .panel-main select, .panel-main textarea{
  border-radius:3px; transition:border-color .14s ease, box-shadow .14s ease;
}
.panel-main input[type=text]:hover, .panel-main input[type=email]:hover, .panel-main input[type=password]:hover,
.panel-main input[type=number]:hover, .panel-main input[type=url]:hover, .panel-main input[type=tel]:hover,
.panel-main select:hover, .panel-main textarea:hover{ border-color:var(--steel-2); }
.panel-main input:focus-visible, .panel-main select:focus-visible, .panel-main textarea:focus-visible,
.panel-main input:focus, .panel-main select:focus, .panel-main textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(18,24,28,.08);
}
.panel-main input:user-invalid{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(102,25,28,.14); }

.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.perm-check{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); padding:10px 12px; font-size:.84rem; border-radius:3px; transition:border-color .14s ease, background-color .14s ease; }
.perm-check:hover{ border-color:var(--steel-2); }
.perm-check:has(input:checked){ border-color:var(--ink); background:#f6f6f4; }
.perm-check input{ margin-top:3px; accent-color:var(--ink); }
.perm-check .k{ display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--steel); }
.section-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#6d7680; }
.tier-badge{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; padding:1px 5px; border-radius:2px; margin-left:4px; }
.tier-badge.admin{ background:#fbe7e2; color:#8a2f10; }
.tier-badge.crew{ background:#e6f0fb; color:#1a4d8f; }
.group-check{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); padding:10px 12px; font-size:.84rem; background:#fdf7ea; border-radius:3px; transition:border-color .14s ease; }
.group-check:hover{ border-color:#d8b850; }
.group-check:has(input:checked){ border-color:#c9a227; box-shadow:0 0 0 1px #c9a227 inset; }
.group-check input{ margin-top:3px; accent-color:#c9a227; }

/* Discord's "greyed out, can't touch it" treatment for a permission you
   don't hold yourself, or a group ranked at/above you - applies to both
   .perm-check (render_permission_grid) and .group-check
   (render_group_picker). The checkbox itself is still native `disabled` so
   it's genuinely un-clickable, not just styled that way. */
.perm-check.is-locked, .group-check.is-locked{ opacity:.55; cursor:not-allowed; background:var(--cloud); }
.perm-check.is-locked:hover, .group-check.is-locked:hover{ border-color:var(--line); }
.lock-badge{ font-size:.68rem; opacity:.7; margin-left:2px; }
.nav-badge{ display:inline-block; background:var(--ember,#66191c); color:#fff; font-family:var(--font-mono); font-size:.66rem; padding:1px 6px; border-radius:10px; margin-left:6px; vertical-align:middle; }

/* Group inheritance picker (admin/groups/): a chip for every OTHER group
   this one can inherit from. Deliberately reads as "linked" (ink fill, soft
   lift) rather than the gold "membership" look .group-check uses, since
   picking a group to belong to and picking a group to inherit from are
   different relationships even though both are checkbox lists under the
   hood. */
.inherit-empty{ font-size:.84rem; color:var(--steel); font-style:italic; }
.inherit-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.inherit-chip{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 13px; border:1px solid var(--line); border-radius:999px;
  background:#fff; cursor:pointer; font-size:.82rem; line-height:1.1;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
  user-select:none;
}
.inherit-chip input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.inherit-chip:hover{ border-color:var(--steel-2); }
.inherit-chip:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.inherit-chip:has(input:checked){ border-color:var(--ink); background:var(--ink); color:#fff; box-shadow:0 6px 16px rgba(18,24,28,.24); }
.inherit-chip-glyph{ font-size:.9rem; opacity:.5; }
.inherit-chip:has(input:checked) .inherit-chip-glyph{ opacity:.9; }
.inherit-chip-name{ font-weight:600; }
.inherit-chip-count{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.02em; color:var(--steel); }
.inherit-chip:has(input:checked) .inherit-chip-count{ color:rgba(255,255,255,.7); }
.inherit-live-total{
  display:inline-flex; align-items:baseline; gap:6px; margin-top:14px; padding:9px 15px;
  background:#f6f6f4; border:1px solid var(--line); border-radius:6px; font-size:.82rem; color:var(--steel);
}
.inherit-live-total b{ font-family:var(--font-mono); font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.inherit-badge-row{ display:flex; flex-wrap:wrap; gap:5px; max-width:220px; }
.inherit-badge{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.02em; padding:2px 7px;
  border-radius:3px; background:var(--cloud-2); color:var(--steel); white-space:nowrap;
}

.btn-sm{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; padding:7px 12px;
  border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; display:inline-block;
  border-radius:3px; transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .1s ease, box-shadow .14s ease;
}
.btn-sm{ box-shadow:0 0 #0000; }
.btn-sm:hover{ border-color:var(--ink); box-shadow:0 3px 10px rgba(18,24,28,.12); }
.btn-sm:active{ box-shadow:none; }
.btn-sm:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.btn-sm.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-sm.primary:hover{ background:#000; box-shadow:0 5px 16px rgba(18,24,28,.3); }
.btn-sm.danger{ border-color:var(--ember); color:var(--ember); }
.btn-sm.danger:hover{ background:var(--ember); color:#fff; box-shadow:0 5px 16px rgba(102,25,28,.35); }

/* Small colored metadata pills — status/relationship labels that must never
   be shoved into a name as plain text (e.g. "linked account"). */
.info-tag{
  display:inline-block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; vertical-align:middle; font-weight:600;
}
.info-tag.neutral{ background:var(--cloud-2); color:var(--steel); }
.info-tag.blue{ background:#e6f0fb; color:#1a4d8f; }
.info-tag.gold{ background:#fdf2e0; color:#8a5a10; }
.info-tag.red{ background:#fbe7e2; color:#8a2f10; }
.info-tag.green{ background:#eaf6ec; color:#22582e; }
.info-tag.purple{ background:#f1e9fb; color:#5a2d8f; }

/* Click-to-sort table headers: .panel-table.sortable th[data-sort] */
.panel-table.sortable th[data-sort]{ cursor:pointer; user-select:none; white-space:nowrap; }
.panel-table.sortable th[data-sort]:hover{ color:var(--ink); }
.panel-table.sortable th[data-sort]::after{ content:"\2195"; opacity:.35; margin-left:5px; font-size:.9em; }
.panel-table.sortable th[data-sort].sort-asc::after{ content:"\2191"; opacity:1; color:var(--ember); }
.panel-table.sortable th[data-sort].sort-desc::after{ content:"\2193"; opacity:1; color:var(--ember); }

.status-pill{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:2px; display:inline-block; }
.status-pill.active, .status-pill.in_service, .status-pill.published{ background:#eaf6ec; color:#22582e; }
.status-pill.scheduled, .status-pill.development{ background:#fdf2e0; color:#8a5a10; }
.status-pill.boarding{ background:#e6f0fb; color:#1a4d8f; }
.status-pill.landed, .status-pill.retired, .status-pill.suspended, .status-pill.cancelled{ background:#f0f0ee; color:#6b7278; }

.auth-shell{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding-block:60px; }
.auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); padding:36px; }
.auth-card .brand-word{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }

.dot-live{ width:8px; height:8px; border-radius:50%; background:#3d9a52; display:inline-block; box-shadow:0 0 6px #3d9a52; }

/* --- "Manage" popup used on Team & Staff to edit one person, instead of
   the page stretching with every action inline. --- */
body:has(dialog[open]){ overflow:hidden; }
dialog.user-modal{
  border:none; padding:0; width:min(680px, 92vw); max-height:88vh; border-radius:8px;
  box-shadow:0 28px 72px rgba(18,24,28,.35), 0 2px 10px rgba(18,24,28,.16);
  color:var(--ink);
}
dialog.user-modal::backdrop{ background:rgba(12,16,20,.55); backdrop-filter:blur(2px); }
dialog.user-modal[open]{ animation:phx-modal-in .18s cubic-bezier(.16,1,.3,1); }
@keyframes phx-modal-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.user-modal-inner{ display:flex; flex-direction:column; max-height:88vh; }
.user-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:1; border-radius:8px 8px 0 0;
}
.user-modal-body{ padding:16px 20px 24px; overflow-y:auto; }
.user-modal-body details{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px !important; }
.user-modal-body details:first-child{ border-top:none; padding-top:0; margin-top:0 !important; }
.user-modal-close{
  background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--steel);
  padding:4px 9px; border-radius:4px; transition:background-color .14s ease, color .14s ease; flex:none;
}
.user-modal-close:hover{ background:var(--cloud-2); color:var(--ember); }

@media (max-width:800px){
  dialog.user-modal{ width:94vw; max-height:92vh; }
}

/* Mobile pass — bigger touch targets, no cramped side-by-side buttons,
   no iOS input-zoom (needs a 16px+ font-size), roomier table cells. */
@media (max-width:640px){
  .panel-main{ padding:20px 16px; }
  .panel-head{ margin-bottom:20px; }
  .panel-head h1{ font-size:1.4rem; }
  .panel-card{ padding:16px; }

  .btn-sm{ padding:10px 14px; font-size:.76rem; }
  /* Table action cells and the modal's flex-wrapped button rows are inside
     auto-height containers (<td>, <div>), so stacking their buttons full
     width just makes the container taller — no overflow risk there. */
  .cell-actions,
  .user-modal-body [style*="display:flex; flex-wrap:wrap"]{
    flex-direction:column; align-items:stretch;
  }
  .cell-actions .btn-sm,
  .cell-actions form,
  .cell-actions-stack{ width:100%; align-items:stretch; }
  .user-modal-body [style*="display:flex; flex-wrap:wrap"] form{ width:100%; }
  .cell-actions form .btn-sm,
  .cell-actions-stack form .btn-sm,
  .cell-actions-stack .btn-sm{ width:100%; }

  .panel-table{ font-size:.82rem; }
  .panel-table th, .panel-table td{ padding:9px 8px; }

  .form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
  .form-row input[type=number], .form-row input[type=datetime-local], .form-row input[type=url],
  .form-row input[type=tel], .form-row select, .form-row textarea,
  .panel-main input[type=text], .panel-main input[type=email], .panel-main input[type=password]{
    font-size:16px; /* iOS Safari zooms the page on focus below 16px */
  }

  dialog.user-modal .grid.cols-2{ grid-template-columns:1fr; }
}

/* --- Generic confirm dialog — replaces window.confirm() everywhere so a
   "delete this?" / "disable this?" moment gets the site's own styling
   instead of the browser chrome default. One instance, reused for every
   confirm on the page; see /assets/js/confirm.js for the behavior. --- */
dialog.confirm-modal{
  border:none; padding:0; width:min(420px, 92vw); border-radius:8px;
  box-shadow:0 28px 72px rgba(18,24,28,.35), 0 2px 10px rgba(18,24,28,.16);
  color:var(--ink);
}
dialog.confirm-modal::backdrop{ background:rgba(12,16,20,.55); backdrop-filter:blur(2px); }
dialog.confirm-modal[open]{ animation:phx-modal-in .18s cubic-bezier(.16,1,.3,1); }
.confirm-modal-inner{ padding:22px 22px 18px; margin:0; }
.confirm-modal-message{ margin:0 0 14px; font-size:.92rem; line-height:1.5; color:var(--ink); }
.confirm-modal-reason textarea{
  width:100%; box-sizing:border-box; min-height:64px; resize:vertical; margin-bottom:14px;
  padding:9px 10px; border:1px solid var(--line); border-radius:3px; font:inherit; font-size:.84rem;
}
.confirm-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:480px){
  .confirm-modal-actions{ flex-direction:column-reverse; }
  .confirm-modal-actions .btn-sm{ width:100%; text-align:center; }
}

/* First-login walkthrough (see admin/includes/layout-bottom.php) - a
   spotlight ring positioned over the current step's nav link, plus a card
   with the step's text. Same modal look as .confirm-modal for consistency. */
.tour-spotlight{
  position:fixed; z-index:9001; border-radius:8px; pointer-events:none;
  box-shadow:0 0 0 4px var(--ember), 0 0 0 9999px rgba(12,16,20,.6);
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease, opacity .15s ease;
}
dialog.tour-card{
  border:none; padding:0; width:min(340px, 92vw); border-radius:8px;
  box-shadow:0 28px 72px rgba(18,24,28,.35), 0 2px 10px rgba(18,24,28,.16);
  color:var(--ink); position:fixed; margin:0; z-index:9002;
}
dialog.tour-card::backdrop{ background:transparent; }
dialog.tour-card[open]{ animation:phx-modal-in .18s cubic-bezier(.16,1,.3,1); }
.tour-card-inner{ padding:20px 22px 16px; }
.tour-card-inner h4{ margin:0 0 8px; font-size:.98rem; }
.tour-card-inner p{ margin:0 0 16px; font-size:.86rem; line-height:1.5; color:var(--steel); }
.tour-card-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tour-card-progress{ font-size:.72rem; color:var(--steel); }
.tour-card-buttons{ display:flex; gap:8px; }

/* Crew-perk corner widget (see admin/includes/layout-bottom.php) - a small
   tab pinned to the bottom-right of every panel page. Collapsed by default;
   hovering (desktop) or clicking (any input, incl. touch) opens the card
   above it. Kept as its own tiny fixed element rather than a dashboard
   card so it follows staff around the whole panel instead of one page. */
.perk-widget{ position:fixed; right:18px; bottom:18px; z-index:850; }
.perk-tab{
  display:flex; align-items:center; gap:7px; border:none; cursor:pointer;
  background:var(--ember); color:#fff; font:inherit; font-size:.78rem; font-weight:700;
  letter-spacing:.02em; padding:10px 16px; border-radius:999px;
  box-shadow:0 6px 18px rgba(18,24,28,.22); transition:box-shadow .15s ease, transform .15s ease;
}
.perk-tab:hover, .perk-widget.is-open .perk-tab{ box-shadow:0 8px 22px rgba(18,24,28,.3); transform:translateY(-1px); }
.perk-tab-dot{ width:7px; height:7px; border-radius:50%; background:#fff; flex:none; }
.perk-widget:not(.is-open) .perk-tab-dot{ animation:phx-perk-pulse 2s ease-in-out infinite; }
.perk-panel{
  position:absolute; right:0; bottom:calc(100% + 10px); width:260px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 22px 54px rgba(18,24,28,.26), 0 2px 10px rgba(18,24,28,.14);
  padding:16px 18px; opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transform-origin:bottom right; transition:opacity .15s ease, transform .15s ease;
}
.perk-widget:hover .perk-panel, .perk-widget.is-open .perk-panel{ opacity:1; transform:none; pointer-events:auto; }
.perk-panel p{ margin:0 0 12px; font-size:.82rem; line-height:1.45; color:var(--steel); }
.perk-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.perk-list li{ border-top:1px solid var(--line); }
.perk-list li:first-child{ border-top:none; }
.perk-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 2px; text-decoration:none; color:var(--ink); font-size:.86rem; font-weight:600;
}
.perk-list a:hover{ color:var(--ember); }
.perk-list-status{ font-size:.72rem; font-weight:600; color:var(--steel); white-space:nowrap; }

/* Also used on admin/partners/view/'s reveal-the-code interaction. */
.perk-visit-btn{
  display:inline-flex; align-items:center; gap:5px; margin:8px 0 10px;
  border:1px solid var(--ember); border-radius:4px; padding:6px 12px;
  font-size:.86rem; font-weight:700; color:var(--ember); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.perk-visit-btn:hover{ background:var(--ember); color:#fff; }
.perk-code-value{
  display:inline-block; width:100%; box-sizing:border-box; text-align:center;
  background:var(--cloud-2); border:1px dashed var(--steel-2); border-radius:4px;
  padding:8px 10px; font-size:.96rem; font-weight:700; letter-spacing:.03em; cursor:pointer;
}
.perk-code-copied{ font-size:.72rem; color:var(--ember); margin:6px 0 0; text-align:center; opacity:0; transition:opacity .15s ease; }
.perk-code-copied.show{ opacity:1; }
@keyframes phx-perk-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }