/* ===== Base tokens & resets ===== */
:root { --fg:#111; --sub:#64748b; --bd:#eee; --ok:#16a34a; --err:#b91c1c; --muted:#94a3b8; }
* { box-sizing: border-box; }
body{margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--fg);background:#fafafa}
h1,h2,h3{margin:0}
.note{color:var(--sub)}
.hide{display:none}

/* Generic form bits used on misc pages */
label{display:block;margin:8px 0 6px}
input{padding:10px;border:1px solid var(--bd);border-radius:8px;background:#fff}
input[type="text"], input[placeholder], input:not([type]){width:100%}
button{padding:10px 14px;border:1px solid var(--bd);border-radius:8px;background:#fff;cursor:pointer}
button.ghost{background:#fff;border-color:#e5e7eb;color:#111}
button.danger{border-color:#fee2e2;color:#991b1b}
.err{color:var(--err);margin-top:8px}
.ok{color:var(--ok)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.controls{display:flex;gap:8px;align-items:center}
.pill{padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;font-size:12px;color:#64748b}

/* Generic table (non-admin pages) */
.table-wrap{width:100%;overflow-x:auto;border:1px solid #f1f5f9;border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;table-layout:auto;min-width:1100px;background:#fff}
th,td{padding:10px 12px;border-bottom:1px solid #f1f5f9;white-space:nowrap;vertical-align:middle;background:#fff}
thead th{background:#fafafa;border-bottom:1px solid #e5e7eb;font-weight:600;position:sticky;top:0;z-index:1}
th.sortable{cursor:pointer;user-select:none}
th .caret{display:inline-block;margin-left:6px;font-size:11px;color:var(--muted);width:10px;text-align:center}
td.right{text-align:right}
code{background:#f6f8fa;padding:2px 6px;border-radius:6px}

/* Modal (columns) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.18);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px;z-index:2000}
.modal-panel{width:680px;max-width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;position:relative;z-index:2001}
.cols-list{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:8px}
.cols-list label{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid #f1f5f9;border-radius:8px;background:#fafafa}
.modal.hide{display:none!important}

/* ===== PSA Admin shell (Shopify-like light theme) ===== */
:root{
  --app-bg:#f6f6f7; --surface:#fff; --surface-2:#fafbfc; --line:#e5e7eb;
  --text:#212b36; --muted:#637381; --accent:#008060; --accent-600:#007353;
  --accent-50:#e6f4ef; --row-hover:#f4f6f8; --focus:#2680eb;
  --r-sm:8px; --r-md:12px;
  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);

  --gutter-x:8px;
  --pager-pad-y:6px; --pager-pad-x:10px; --pager-gap:8px;
  --scroll-gutter-right:16px;
}
.muted{color:var(--muted);font-size:12px}

/* Login card */
.psa-login{max-width:420px;margin:14vh auto;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);color:var(--text);box-shadow:var(--shadow-1)}
.psa-login h1{margin:0 0 8px;font-size:22px}
.login-row{display:flex;gap:8px;margin-top:12px}
.login-row input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.btn{padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:10px;color: var(--text);cursor:pointer}
.btn:hover{background:var(--row-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-600)}
.error{color:#d82c0d;padding:8px 0}

/* Layout grid & scroll plumbing */
html,body{height:100%;overflow:hidden}
.admin-shell{
  height:100vh;display:grid;grid-template-columns:188px 1fr;
  overflow:hidden;background:var(--app-bg);color:var(--text)
}
.admin-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:6px}
.sidebar-title{font-weight:700;margin:6px 0 10px 6px;font-size:15px;color:var(--text)}
.sidebar-item{padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none}
.sidebar-item:hover{background:var(--row-hover)}
.sidebar-item.active{background:var(--accent-50);border-left:3px solid var(--accent);padding-left:7px;font-weight:600}
.sidebar-spacer{flex:1}
.admin-main{display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* Let each view be a flex column that can shrink, so the table can scroll */
#view-submissions,
#view-groups {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* CRITICAL for inner overflow to work */
}

.topbar{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter-x);
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:10
}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}

.views-bar,.toolbar{
  display:flex;align-items:center;gap:8px;
  padding:10px var(--gutter-x);
  border-bottom:1px solid var(--line);background:var(--surface)
}
.view-pill{padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:#fff;cursor:pointer}
.view-pill:hover{background:var(--row-hover)}
.view-pill.active{background:var(--accent-50);border-color:var(--accent);font-weight:600}
.view-plus{padding:6px 10px;border-radius:999px;border:1px dashed var(--line);color:var(--muted);background:transparent}

/* Search + date button */
.toolbar input[type="search"]{
  min-width:240px; flex: 0 1 360px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text);
}
.toolbar input[type="search"]:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(38,128,235,.15)}
#btnDate{ height:36px; min-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.toolbar .spacer{flex:1}
.count-pill{padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.toolbar select{height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.toolbar select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(38,128,235,.15)}
.toolbar .filters{display:flex;gap:8px;align-items:center}

/* Table container */
.table-wrap{
  flex:1;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-1);
  margin:6px 4px 0 4px;
}
.table-scroller{
  height:100%; overflow:auto; overflow-y:scroll; border-top:0;
  padding-right:var(--scroll-gutter-right); scrollbar-gutter:stable both-edges;
}

/* Admin table */
.table{ border-collapse:separate; border-spacing:0; min-width:1200px; width:100%; background:#fff; }
.table th, .table td {
  border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle; text-align:center;
}
.table th.left,  .table td.left  { text-align:left  !important; }
.table th.right, .table td.right { text-align:right !important; }
.table td > a, .table td > span, .table td > time, .table td > code, .table td > .pill, .table td > .tdc{
  display:inline-block; vertical-align:middle;
}
.table thead th{ position:sticky; top:0; background:var(--surface-2); z-index:1; color:var(--muted); }
.table th .caret{ margin-left:6px; opacity:.8; color:var(--muted); }
.table tr:hover td{ background:var(--row-hover); }
.table code{ background:#eef2ff; border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-weight:600; color:#1f2937; }
.table thead th:last-child, .table tbody td:last-child{ padding-right: calc(12px + var(--scroll-gutter-right)); }

/* Empty state */
.empty{padding:18px;color:var(--muted)}

/* Pagination */
.pagination{
  display:flex;align-items:center;justify-content:flex-start;gap:var(--pager-gap);
  padding:var(--pager-pad-y) var(--pager-pad-x);
  border-top:1px solid var(--line);background:var(--surface);
  font-size:14px;line-height:1.1;
}
.page-btn{padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text)}
.page-btn:hover{background:var(--row-hover)}
.page-btn[disabled]{opacity:.5;cursor:not-allowed}
.page-range{color:var(--muted);margin-right:4px}

/* Columns drawer */
.columns-panel-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.35);display:none;align-items:flex-start;justify-content:flex-end;z-index:50}
.columns-panel{width:360px;background:var(--surface);border-left:1px solid var(--line);height:100vh;display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.columns-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
.columns-body{padding:10px 12px;overflow:auto}
.columns-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}
.drag-handle{cursor:grab;user-select:none}
.columns-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}

/* a11y */
a,button,[role="button"],input{outline-offset:2px}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--focus)}

/* ===== Edit Columns mode ===== */
.table.edit-cols th, .table.edit-cols td { border-right: 10px solid var(--line); }
.table.edit-cols th:last-child, .table.edit-cols td:last-child { border-right: 0; }
.table.edit-cols th { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
#subsHead .th-tools { display:inline-flex; align-items:center; gap:6px; margin-left:8px; }

/* eye button */
#subsHead .th-eye{
  position:relative; padding:2px 6px; border-radius:8px; border:1px solid var(--line);
  background:#fff; cursor:pointer; font-size:12px; line-height:1;
}
#subsHead .th-eye:hover{ background:var(--row-hover); }
#subsHead .th-eye.off{ opacity:.55; }
#subsHead .th-eye.off::after{
  content:''; position:absolute; left:5px; right:5px; top:50%; height:1.5px;
  background:var(--muted); transform:rotate(-24deg); pointer-events:none;
}
.table.edit-cols th.is-off { opacity:.7; background:var(--surface-2); }
.table.edit-cols td.col-off { opacity:.5; background:var(--surface-2); }
.table.edit-cols th,.table.edit-cols td { transition:background-color .12s ease, opacity .12s ease; }
body.col-dragging { cursor: grabbing; }

/* --- Date popover --- */
.popover{
  position:absolute; z-index:60; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-1); padding:12px; min-width:320px;
}
.popover.hide{display:none;}
.popover input[type="date"]{
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text);
}

/* Two-month range picker */
#date-popover.popover{ min-width:680px; padding:12px; }
.range-cal{ display:flex; align-items:stretch; gap:12px; }
.rc-side{ display:flex; flex-direction:column; gap:8px; width:120px; padding-right:10px; border-right:1px solid var(--line); }
.rc-months{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rc-month{ width:260px; position:relative; }
.rc-month + .rc-month{ border-left:1px solid var(--line); margin-left:12px; padding-left:12px; }
.rc-head{ position:relative; height:32px; margin-bottom:6px; }
.rc-title{ position:absolute; left:0; right:0; text-align:center; line-height:32px; font-weight:600; color:var(--text); }
#rc-prev,#rc-next{ position:absolute; top:0; height:32px; padding:4px 8px; border-radius:8px; }
#rc-prev{ left:0; } #rc-next{ right:0; }
#rc-prev:hover,#rc-next:hover{ background:var(--row-hover); }
.rc-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; color:var(--muted); font-size:12px; text-align:center; }
.rc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.rc-cell{ text-align:center; padding:7px 0; border-radius:8px; user-select:none; cursor:pointer; line-height:1; }
.rc-muted{ color:var(--muted); }
.rc-disabled{ opacity:.35; pointer-events:none; }
.rc-cell:hover{ background:var(--row-hover); }
.rc-in-range{ background:var(--accent-50); }
.rc-start, .rc-end{ background:var(--accent); color:#fff; }
.rc-start{ border-top-left-radius:999px; border-bottom-left-radius:999px; }
.rc-end{   border-top-right-radius:999px; border-bottom-right-radius:999px; }

/* Keep header labels visually centered; caret out of flow */
#subsHead th { position: sticky; padding-right: 26px; }
#subsHead .caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  margin: 0; width: 12px; text-align: center; opacity: .8; color: var(--muted);
}

/* Footer (range picker) */
.rc-foot{ display:flex; align-items:center; gap:8px; padding-top:10px; margin-top:12px; border-top:1px solid var(--line); }
.rc-foot .spacer { flex: 1; }

/* Make table rows feel clickable (opt-in via .rowlink) */
#subsTbody tr.rowlink { cursor: pointer; }
#subsTbody tr.rowlink:focus { outline: 2px solid var(--focus); }

/* ===== Submission Details drawer ===== */
.details-backdrop{
  position:fixed; inset:0; display:none; z-index:70;
  background:rgba(16,24,40,.35);
}
.details-backdrop.show{ display:block; }

.details-panel{
  position:absolute; right:0; top:0; height:100%; width:min(760px, 92vw);
  background:#fff; border-left:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:var(--shadow-1);
}

.details-head, .details-foot{
  padding:12px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.details-foot{ border-top:1px solid var(--line); border-bottom:0; margin-top:auto; }
.details-body{
  padding:14px; overflow:auto; flex:1; min-height:0; background:#fff;
  overscroll-behavior: contain;     /* stop trackpad scroll leak */
}
.sheet-title { font-weight:700; }

/* Definition list layout */
.dl{ display:grid; grid-template-columns: 160px 1fr; gap:8px 12px; margin-bottom:14px; }
.dl dt{ color:var(--muted); }
.dl dd{ margin:0; }

/* Ship-to block */
.shipto{
  display:inline-block; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--text); font-style:normal;
}

/* Raw JSON viewer */
pre.json{
  background:#0b1020; color:#dbeafe; padding:10px; border-radius:8px;
  border:1px solid #1e293b; max-height:240px; overflow:auto; font-size:12px;
}

/* Loading placeholder */
.loading{ color:var(--muted); padding:6px 0; }

/* ---------- Details: card-style info grid ---------- */
.info-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px,1fr));
  gap:12px;
  margin-bottom:12px;
}
.info{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:12px;
  min-height:74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.info-label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:4px;
}
.info-value{
  font-weight:600;
  line-height:1.25;
}
.info .ellip{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.info.span-2{ grid-column: span 2; }
@media (max-width: 980px){
  .info-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
  .info.span-2{ grid-column: span 2; }
}
@media (max-width: 620px){
  .info-grid{ grid-template-columns: 1fr; }
  .info.span-2{ grid-column: auto; }
}

/* ---------- Cards list: centered, tidy, sticky head ---------- */
.cards-table{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:auto;
  max-height:260px;
}
.cards-table .ct-head,
.cards-table .ct-row{
  display:grid;
  grid-template-columns: 1fr 1fr 0.7fr 1.6fr;
  gap:0;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.cards-table .ct-head > div{
  background:var(--surface-2);
  font-weight:600;
  color:var(--muted);
  padding:10px 8px;
  position:sticky;
  top:0;
  z-index:1;
}
.cards-table .ct-row > div{
  padding:10px 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cards-table .ct-row:nth-child(even){ background:#fff; }
.cards-table .ct-row:nth-child(odd){  background:var(--surface-2); }

/* Center all columns, but make Description left-aligned and wrap */
.cards-table .ct-row > div:last-child,
.cards-table .ct-head > div:last-child { text-align: left; }
.cards-table .ct-row > div:last-child { white-space: normal; overflow: visible; text-overflow: clip; }

/* groups view minor polish */
.data-table { border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid #eee; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: #fafafa; }
button.ghost { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; }
/* Optional: keep pager visible while table scrolls */
.pagination { position: sticky; bottom: 0; z-index: 2; }

/* Groups table container behavior */
#view-groups .table-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px); /* JS will override with exact height */
}
#view-groups .data-table { min-width: 1000px; } /* allow horizontal scroll */

/* Add-to-Group modal: make rows clickable and show selection */
#group-body .gm-row{cursor:pointer;}
#group-body .gm-row:hover{background:rgba(0,0,0,.045);}
#group-body .gm-row.selected{background:#e6f0ff;}

/* highlight selected row in Groups list */
.data-table tbody tr.selected { background: #fff4f4; }

/* danger button style used by Delete group… */
.btn.danger { background:#ffecec; color:#a11; border-color:#f5c2c7; }
.btn.danger:disabled { opacity:.5; cursor:not-allowed; }

/* Highlight on hover */
tr.selectable:hover td {
  background-color: var(--row-hover);
}

/* Highlight on selection */
tr.selectable.selected td {
  background-color: #e6f0ff; /* choose your preferred colour */
}

/* --- Groups: order editing --- */
.order-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.order-btn {
  border: 1px solid var(--border, #d0d7de);
  background: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  cursor: pointer;
}
.order-btn:disabled {
  opacity: .5;
  cursor: default;
}
.drag-handle {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    #aaa 0, #aaa 2px,
    #ddd 2px, #ddd 4px
  );
  cursor: grab;
  display: inline-block;
}
tr.dragging {
  opacity: .6;
}
tr.drop-above { box-shadow: 0 -2px 0 0 var(--primary, #2563eb) inset; }
tr.drop-below { box-shadow: 0  2px 0 0 var(--primary, #2563eb) inset; }
.ord-index {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #667085;
}

/* --- Groups: card reordering UI --- */
#view-groups .order-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-groups .drag-handle {
  display: inline-block;
  width: 14px;
  height: 14px;
  cursor: grab;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0 40%, #ccc 40% 60%, transparent 60% 100%);
}

#view-groups tr.dragging { opacity: .6; }

/* drop indicators */
#view-groups tr.drop-above { box-shadow: inset 0 3px 0 0 #a8c7ff; }
#view-groups tr.drop-below { box-shadow: inset 0 -3px 0 0 #a8c7ff; }

/* small tweak for the ▲ ▼ buttons */
#view-groups .order-btn {
  padding: 0 6px;
  line-height: 1.2;
}

.row-status.dirty { outline: 2px solid #7aa7ff; border-radius: 6px; }

/* keep pills tidy on narrow layouts */
.info .pill {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill[role="button"] { cursor: pointer; user-select: none; }
.pill.locked { cursor: not-allowed; opacity: .7; }

/* Confirm-close modal visibility control */
#confirmCloseModal { display: none; }
#confirmCloseModal.open { display: flex; }

.badge-split {
  background: #c400ff;
  color: white;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}