/* ==========================================================================
   Key Lair — Admin Product Editor
   Requires tokens.css + admin-dashboard.css (for sidebar/topbar) first.
   ========================================================================== */

/* Used to cap the whole shell at 820px -- but that left each .form-section
   card's dark background box narrow with a large dead strip down the
   right side of a wider screen instead of reaching it, same complaint as
   every other page that's had this fix already. Removing the cap here
   lets each card's background actually reach the full width; the 820px
   readable-content cap moves down onto what's inside each card instead
   (see .form-section > * and .form-actions below), so the fields/text
   themselves stay the same comfortable width they always were -- only
   the box behind them grows. */
.form-shell{
  max-width:none;
}
/* Scoped to .form-shell specifically (not every .form-section/.form-actions
   site-wide) -- Import/Export Keys reuse those same classes outside a
   .form-shell and are already deliberately full width with no such cap;
   only the 4 pages that use .form-shell (product/claim-link editors,
   Account Settings) get their content capped back down like this. */
.form-shell .form-section > *{max-width:820px;}
.form-shell .form-actions{max-width:820px;}

.form-section{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 22px 20px;
  margin-bottom:16px;
}
.form-section-title{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  margin:0 0 4px;
}
.form-section-hint{
  font-size:12px;
  color:var(--text-faint);
  margin:0 0 18px;
}
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:7px;
}
.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select{
  width:100%;
  /* input[type="date"] specifically: its native calendar-icon/day-month-
     year layout has its own intrinsic minimum width in some browsers,
     which width:100% alone doesn't always win against -- max-width is a
     hard cap that does, so it can't render wider than every other field
     in the same section the way it otherwise did. */
  max-width:100%;
  background:var(--bg-void);
  border:1px solid var(--line);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:13.5px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .12s ease;
}
.field input:focus,
.field select:focus{border-color:var(--signal-dim);}

/* Number inputs get the same themed look even outside a .field (e.g. the
   per-product claim-limit override on the claim link form, which sets its
   own width). The spinner buttons stay — just recolored to fit the dark
   background instead of the browser's default black-on-white, since a
   user should still be able to click +/- instead of typing. */
input[type="number"]{
  background:var(--bg-void);
  border:1px solid var(--line);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:13.5px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  outline:none;
}
input[type="number"]:focus{border-color:var(--signal-dim);}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  opacity:1;
  filter:invert(0.85) brightness(1.4);
  cursor:pointer;
}
/* Mirrors .field's own margin-bottom/:last-child pair -- without this, a
   section whose last input before its Save button is a .field-row (two
   fields side by side, e.g. "New/confirm password") sat noticeably closer
   to its button than one where the last input is a plain .field, since
   .field-row itself carried no bottom margin of its own for :last-child to
   zero out. Both now collapse to the same gap (.form-actions' own
   margin-top) no matter which kind of row comes last. */
/* minmax(0,1fr), not plain 1fr: a CSS Grid track's implicit minimum size
   is its content's, so a genuinely long value (a long email address, say)
   could still force that column past its even 1fr share, throwing the
   50/50 split off. minmax(0,...) removes that content-based floor -- the
   input inside can scroll/truncate instead of growing its column. */
.field-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:16px;}
.field-row:last-child{margin-bottom:0;}

/* Rich text toolbar (visual only) */
.rte{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.rte-toolbar{
  display:flex;
  gap:2px;
  padding:7px 8px;
  background:var(--bg-panel-2);
  border-bottom:1px solid var(--line);
}
.rte-btn{
  width:28px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.rte-btn:hover{background:var(--line-soft); color:var(--text-primary);}
.rte-body{
  min-height:110px;
  background:var(--bg-void);
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-primary);
}
.rte-body[contenteditable]:focus{outline:none;}
.rte-body p{margin:0 0 8px;}
.rte-body p:last-child{margin-bottom:0;}

/* Cover upload */
.cover-upload{
  aspect-ratio:16/9;
  border:1.5px dashed var(--line);
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text-faint);
  font-size:12.5px;
  cursor:pointer;
  background:
    linear-gradient(135deg, rgba(90,168,221,0.05), rgba(148,201,61,0.04));
  transition:border-color .12s ease;
}
.cover-upload:hover{border-color:var(--signal-dim); color:var(--text-muted);}
.cover-upload svg{width:26px;height:26px;}
.cover-upload.drag-over{border-color:var(--signal); background:rgba(148,201,61,0.1); color:var(--text-muted);}
.btn-ghost.drag-over{border-color:var(--signal); color:var(--signal);}

/* Screenshot grid */
.shot-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.shot-slot{
  aspect-ratio:16/9;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--bg-void);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.shot-slot.filled{
  background:linear-gradient(135deg, rgba(90,168,221,0.14), rgba(148,201,61,0.08));
  border-style:solid;
}
.shot-slot .num{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-faint);
  position:absolute;
  top:6px; left:8px;
}
.shot-slot.add{
  border-style:dashed;
  color:var(--text-faint);
  cursor:pointer;
  font-size:22px;
  font-weight:300;
}
.shot-slot.add:hover{border-color:var(--signal-dim); color:var(--signal);}

/* Youtube list */
.yt-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.yt-row:last-child{margin-bottom:0;}
.yt-row input{flex:1;}
.yt-remove{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.yt-remove:hover{border-color:var(--danger); color:var(--danger);}
.add-link{
  font-size:12.5px;
  color:var(--signal);
  cursor:pointer;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
}

/* Footer actions */
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
  padding-bottom:20px;
}
/* A page with several independent .form-section cards (Settings, Mail
   Server, ...) has each card's own action button sized to its own label
   ("Save profile", "Update password", "Disable 2FA", ...) -- fine on its
   own, but sitting in cards that read top to bottom or side by side on
   the same page, the mismatched widths look uncoordinated. A shared
   floor width lines them all up without forcing a longer label to wrap.
   Desktop only -- mobile's .form-actions .btn already stretches to fill
   its own row (see below), where a min-width would fight that. */
@media (min-width:721px){
  .form-actions .btn{min-width:140px;}
}
.btn{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:1px solid var(--line);
  /* A plain <button> centers its own text by browser default, but an
     <a class="btn"> (New/Edit claim link's "Cancel", among others) is
     inline by default -- no box-centering behavior, and immune to
     min-width entirely (inline elements ignore it), so a min-width like
     .form-actions .btn's desktop rule left "Cancel" text sitting off to
     one side of the wider box instead of centered in it. inline-flex
     makes every .btn -- <a> or <button> alike -- a real box with its
     text centered both ways, and lets min-width/flex-grow actually apply. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-ghost{background:transparent; color:var(--text-muted);}
.btn-ghost:hover{color:var(--text-primary); border-color:var(--text-muted);}
.btn-primary{background:var(--signal); color:var(--bg-void); border-color:var(--signal);}
.btn-primary:hover{background:#5ff0cf;}
/* The broad button/input/select :disabled rule lives in admin-dashboard.css
   (loaded on every admin page, unlike this stylesheet) -- .btn-primary's
   own disabled refinement stays here since that class is only ever used
   on pages that already load this file. */
.btn-primary:disabled{background:var(--line); color:var(--text-faint); border-color:var(--line);}
.btn-primary:disabled:hover{background:var(--line);}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:99px;
  background:rgba(90,168,221,0.12);
  color:var(--signal);
}

@media (max-width:640px){
  .field-row{grid-template-columns:1fr;}
  .shot-grid{grid-template-columns:repeat(2, 1fr);}
  /* A product's per-platform claim-limit input keeps a fixed, compact
     130px next to its checkbox on desktop -- once .field-row above drops
     to a single column, that fixed width just leaves it narrow and
     off to one side instead of filling the row it now has to itself. */
  .platform-limit-input{width:100% !important;}
}

/* A "Choose file" label styled as a button (Import Keys, a product's
   background image override) is inline-flex, sized to its own content --
   fine sharing a row with other controls on desktop, but alone on mobile
   it leaves the rest of the row as dead space instead of filling it,
   same as every other lone mobile control. */
@media (max-width:720px){
  .file-choose-label{
    display:flex;
    width:100%;
    box-sizing:border-box;
  }
}

/* A .form-actions row's button(s) sized to their own text on mobile,
   sitting off to one side (or, with two -- e.g. "Cancel" + "Save changes"
   -- unevenly split) with empty space left over -- the same row on
   desktop reads fine right-aligned, but a narrow phone screen has nothing
   for that alignment to balance against. flex-basis:0 with flex-grow:1
   means a single button fills the whole row, and two buttons split it
   evenly -- either way nothing is left stranded. Site-wide, not just one
   page's Save button. */
@media (max-width:720px){
  .form-actions .btn{
    flex:1 1 0;
    text-align:center;
  }
}

/* System Users page "Manage" panel: a genuine in-flow <tr> (see system_users.php for why),
   with its own field/button grouping so it stays legible on mobile and
   desktop alike. On desktop this <td> is a normal table-cell already --
   nothing to override. On mobile, admin-dashboard.css's generic
   `table tr td:last-child` rule (meant for a row's Edit/Delete-style
   actions cell) would otherwise turn this one into a flex row-reverse
   container too, shrinking .manage-panel to its content width instead of
   the full row -- the exact "floats past its own card" bug this panel
   was rewritten to fix in the first place. Reassert plain block layout,
   same as every other mobile table cell, at matching specificity. */
@media (max-width:720px){
  table tr td.manage-cell:last-child{
    display:block;
    border-bottom:none;
  }
}
.manage-panel{
  padding:14px 16px;
  background:var(--bg-panel-2);
  border-radius:var(--radius-md);
}
.manage-fields{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.manage-fields input,
.manage-fields select,
.manage-field-note{
  flex:1 1 160px;
  min-width:0;
  background:var(--bg-void);
  border:1px solid var(--line);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:12.5px;
  padding:7px 9px;
  border-radius:var(--radius-sm);
  outline:none;
}
/* Shown instead of the 2FA select when the account has never set one up --
   nothing to toggle, so it's plain text sized/boxed to match its
   siblings rather than a functional field. */
.manage-field-note{
  display:flex;
  align-items:center;
  color:var(--text-faint);
}

/* Delete / Reset Password / Save, in that fixed order: on desktop, a single
   row with Delete pinned to the left, Save to the right, and Reset
   centered in between regardless of how wide its neighbors are (a plain
   flex row with space-between wouldn't center Reset on the row itself,
   only between Delete and Save) -- a 3-column grid with the middle
   column sized to content and the outer two given equal share does. On
   mobile, Delete and Reset split the first row evenly and Save alone
   fills the second -- every row uses the full width, no leftover gap.
   Every button gets the same height and centered text either way. */
.manage-buttons{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
}
.manage-buttons .btn{
  font-size:11.5px;
  padding:9px 14px;
  text-align:center;
  white-space:nowrap;
}
.manage-btn-delete{justify-self:start;}
.manage-btn-reset{justify-self:center;}
.manage-btn-save{justify-self:end;}

@media (max-width:720px){
  .manage-fields input,
  .manage-fields select,
  .manage-field-note{flex:1 1 100%;}
  .manage-buttons{grid-template-columns:1fr 1fr;}
  .manage-btn-delete{grid-column:1; grid-row:1; justify-self:stretch;}
  .manage-btn-reset{grid-column:2; grid-row:1; justify-self:stretch;}
  .manage-btn-save{grid-column:1 / -1; grid-row:2; justify-self:stretch;}
}
