/* ============================================================
   QCOW — Admin Dashboard
   Self-contained: includes the design tokens and shared component
   styles (buttons, forms, modals, tables) that every admin page
   needs, so no page requires css/styles16.css to be loaded alongside
   it. Shared by users.html, sales.html, activity.html, premium.html,
   billing.html, and tracking.html.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --ink:        #23201b;
  --ink-soft:   #5b5347;
  --paper:      #f6f3ec;
  --paper-dim:  #ece7db;
  --surface:    #ffffff;
  --line:       #ddd6c4;
  --pasture:    #2f4b3c;
  --pasture-dk: #203a2d;
  --tag-gold:   #c08f2c;
  --tag-gold-lt:#f1e2b8;
  --danger:     #a4342a;

  --font-display: 'Zilla Slab', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(35,32,27,0.06), 0 8px 24px -12px rgba(35,32,27,0.18);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

a{ color: var(--pasture); }
button{ font-family: inherit; }

/* ---------- Forms ---------- */
label{
  display:block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ink);
}
.field{ margin-bottom: 20px; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="url"],
select,
textarea{
  width:100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--pasture);
  box-shadow: 0 0 0 3px rgba(47,75,60,0.15);
}
.row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background: var(--pasture); color:#fff; }
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); }
.btn-block{ width:100%; }
.btn-ghost{ background: transparent; border:1px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ background: var(--paper-dim); }
.btn-sm{ padding: 8px 16px; font-size: 13px; }
.btn-outline-gold{ background: #fff; border: 1.5px solid var(--tag-gold); color:#8a6a20; }
.btn-outline-gold:hover{ background: var(--tag-gold-lt); }
.btn-danger{ background: #a4342a; color: #fff; }
.btn-danger:hover:not(:disabled){ filter: brightness(1.08); }

.helper-text{ font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.error-text{ font-size: 13px; color: var(--danger); margin-top: 10px; min-height: 1em; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0;
  background: rgba(35,32,27,0.45);
  display:flex; align-items:flex-start; justify-content:center;
  z-index: 100;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 380px;
  padding: 30px 28px;
  position: relative;
  margin: auto;
}
.modal-box.wide{ max-width: 480px; }
.modal-box.form-wide{
  max-width: 1240px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* ---------- Add/Edit Sale: side-by-side layout, matching the
   customer-facing Create/Edit Sale UI (fields on the left, map on
   the right, save button bottom-right corner). ---------- */
.form-two-col{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0 32px;
  align-items: start;
}
.form-col-main{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.form-two-col .field{ margin-bottom: 14px; }
.form-two-col .row-3{ grid-column: 1 / -1; gap: 12px; }
.form-two-col .form-col-location .location-field{ margin-top: 0; margin-bottom: 0; }
.form-two-col .form-grid-2{ grid-column: 1 / -1; }
.form-actions{ margin-top: 8px; }
.form-actions.form-actions-corner{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top: 12px; }
.form-actions.form-actions-corner .error-text{ margin-top:0; }
.form-actions.form-actions-corner .btn{ width: auto; min-width: 180px; }

@media (max-width: 860px){
  .form-two-col{ grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px){
  .form-col-main{ grid-template-columns: 1fr; }
}

/* ---------- Manage Lots modal (fixed 500x500, scrollable table) ---------- */
.modal-box.lots-modal{
  width: 1200px;
  max-width: 1200px;
  height: 700px;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  overflow: hidden;
}
.modal-box.lots-modal h3{ flex: none; padding-right: 20px; margin-bottom: 10px; font-size: 16.5px; line-height: 1.3; }
.lots-modal-toolbar{ flex: none; margin: 0 0 12px; }
.lots-modal-toolbar input{ width: 100%; }
.lots-table-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.lots-table{ width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.lots-modal .lots-table thead th{
  position: sticky;
  top: 0;
  background: var(--paper-dim);
  z-index: 1;
  padding: 8px 10px;
}
.lots-modal .lots-table th:nth-child(1), .lots-modal .lots-table td:nth-child(1){ width: 64px; white-space: nowrap; }
.lots-modal .lots-table th:nth-child(4), .lots-modal .lots-table td:nth-child(4){ width: 118px; }
.lots-modal .lots-table td{
  font-size: 12.5px;
  padding: 8px 10px;
  min-height: 0;
  overflow-wrap: break-word;
}
.lots-modal .lots-table tbody tr{ min-height: 0; }
.lots-modal .lots-table td.cell-actions{ display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; justify-content: center}
.lots-modal .lots-table td.cell-actions .btn{ width: 100%; padding: 4px 6px; font-size: 11.5px; justify-content: center}
.modal-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; cursor:pointer;
  font-size: 20px; color: var(--ink-soft); line-height:1;
}
.modal-box h3{ font-size: 19px; margin-bottom: 18px; }

.confirm-box{
  max-width: 340px;
  text-align: center;
}
.confirm-box h3{
  font-size: 18px;
  margin-bottom: 10px;
}
.confirm-box p{
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 22px;
}
.confirm-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
}
.confirm-actions .btn{ flex: 1; }

/* ---------- CSV mapping table / dropzone ---------- */
.mapping-table{ width:100%; border-collapse: collapse; margin-top: 18px; }
.mapping-table thead th{
  text-align:left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  background: var(--paper-dim);
  padding: 10px 14px;
}
.mapping-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.mapping-table tbody td:first-child{ font-weight:600; }

.dropzone{
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 50px 20px;
  text-align:center;
  color: var(--ink-soft);
  cursor:pointer;
  transition: border-color .15s, background .15s;
}
.dropzone.drag-over, .dropzone:hover{ border-color: var(--pasture); background: var(--paper-dim); }
.dropzone input[type=file]{ display:none; }
.file-chip{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--paper-dim); border:1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; margin-top: 14px;
}

/* ---------- utility ---------- */
.mt-24{ margin-top:24px; }

.admin-shell{
  display:flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.admin-sidebar{
  width: 240px;
  flex: 0 0 240px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  color: var(--ink);
  padding: 22px 16px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.admin-sidebar .brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 4px 10px 22px;
}
.admin-sidebar .brand-row img{ width:110px; height:auto; }
.admin-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.admin-nav a{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition: background .12s, color .12s;
}
.admin-nav a:hover{ background: var(--paper-dim); color: var(--ink); }
.admin-nav a.active{ background: var(--tag-gold); color: #2a2211; }
.admin-sidebar .sidebar-footer{
  margin-top:auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.admin-sidebar .sidebar-footer button{
  background:none; border:none; color: var(--ink-soft); font-size:13px; cursor:pointer; padding:8px 10px;
}
.admin-sidebar .sidebar-footer button:hover{ color: var(--ink); }
.admin-sidebar .admin-email{ font-size:11.5px; color: var(--ink-soft); padding:0 10px 8px; word-break:break-all; }

/* ---------- Main content ---------- */
.admin-main{
  flex:1;
  width: 100%;
  padding: 30px 36px 60px;
}
.admin-section{ display:none; }
.admin-section.active{ display:block; }

.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 22px;
}
.admin-header h1{ font-size: 26px; margin:0; }
.admin-header p{ margin:4px 0 0; color: var(--ink-soft); font-size: 13.5px; }

/* ---------- Stat cards ---------- */
.stat-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 24px; }
.stat-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  min-width: 160px;
  flex: 1 1 160px;
}
.stat-card .stat-value{ font-family: var(--font-display); font-size: 30px; font-weight:700; color: var(--pasture); }
.stat-card .stat-label{ font-size: 12px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin-top:2px; }

/* ---------- Data table ---------- */
.admin-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:18px 22px;
  background:var(--paper-dim);
  border-bottom:1px solid var(--line);
}

.admin-panel-head h2{
  font-size:18px;
  margin:0;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.admin-table thead th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--ink-soft);
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}

/* min-height (not height) so rows never fall below a consistent baseline,
   but can still grow for content that needs more room — e.g. an Actions
   cell with 4 buttons that wraps onto two lines. A hard `height` here
   clips/overflows in that case instead of letting the row grow. */
.admin-table tbody tr{
  min-height:72px;
}

.admin-table tbody td{
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-size:14px;
  min-height:72px;
  box-sizing:border-box;
}

.admin-table tbody tr:last-child td{
  border-bottom:none;
}

.admin-table tbody tr:hover{
  background:rgba(47,75,60,.035);
}

.admin-table .cell-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.admin-table .cell-sub{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
  min-height:18px;
  line-height:18px;
}

/* ---------- Table pagination ---------- */
.pagination-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:12px 0 4px;
}
.pagination-row .cell-sub{ min-height:0; }
.pagination-row button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  vertical-align: middle;
}
.badge-pending{ background: #f1e2b8; color:#8a6a20; }
.badge-approved{ background: #dcebe1; color: var(--pasture-dk); }
.badge-declined{ background: #f4d9d5; color: var(--danger); }
.badge-premium{ background: var(--tag-gold); color:#2a2211; }
.badge-standard{ background: var(--paper-dim); color: var(--ink-soft); }
.badge-paid{ background: #dcebe1; color: var(--pasture-dk); }
.badge-pending-pay{ background: #f1e2b8; color:#8a6a20; }
.badge-failed{ background: #f4d9d5; color: var(--danger); }
.badge-admin{ background: var(--pasture); color:#fff; }

.btn-xs{ padding: 6px 12px; font-size: 12px; }

/* ---------- Action menu (kebab) ----------
   Used in table rows where secondary actions (Replace/Upload CSV, Edit,
   Delete) are tucked behind a 3-dot button instead of sitting inline.
   The menu itself is appended to <body> and positioned with fixed
   coordinates (see openActionMenu in admin-shared10.js) so it is never
   clipped by an ancestor's overflow:hidden, e.g. .admin-panel. */
.action-menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  flex:0 0 auto;
}
.action-menu-btn:hover, .action-menu-btn.is-open{ background: var(--paper-dim); }
.action-menu-btn svg{ width:16px; height:16px; pointer-events:none; }

.action-menu{
  position:fixed;
  min-width:168px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  padding:6px;
  z-index:200;
  display:flex;
  flex-direction:column;
}
.action-menu-item{
  display:flex;
  align-items:center;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:9px 10px;
  border-radius:6px;
  font-size:13.5px;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
}
.action-menu-item:hover{ background: var(--paper-dim); }
.action-menu-item.danger{ color: var(--danger); }
.action-menu-item.danger:hover{ background: #f4d9d5; }
.action-menu-divider{ border:none; border-top:1px solid var(--line); margin:4px 2px; }

/* ---------- Toolbar / search / filter ---------- */
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar input[type="text"], .toolbar input[type="search"], .toolbar select{
  width:auto; min-width:180px; padding:8px 12px; font-size:13.5px;
}

.admin-empty{ text-align:center; padding: 50px 20px; color: var(--ink-soft); }
.admin-loading{ text-align:center; padding: 40px 20px; color: var(--ink-soft); }

/* Log detail preformatted json */
.log-details{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 320px;
}

/* ---------- User Management field (Add/Edit Sale modal) ----------
   Search-and-add pattern: text input + dropdown results list + a
   running list of selected users, each with their own role select.
   Replaces the old #s-owner multi-select. */
.user-search-results{
  margin-top:6px;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height:180px;
  overflow-y:auto;
  background:var(--surface);
}
.user-search-results[hidden]{ display:none; }
.user-search-result-item{
  padding:9px 12px;
  cursor:pointer;
  font-size:13.5px;
  border-bottom:1px solid var(--line);
}
.user-search-result-item:last-child{ border-bottom:none; }
.user-search-result-item:hover{ background: var(--paper-dim); }
.user-search-result-item .usr-email{ color:var(--ink-soft); font-size:12px; }
.user-search-no-results{ padding:9px 12px; font-size:13px; color:var(--ink-soft); }

.selected-users-list{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.selected-user-row{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px 10px; background:var(--paper);
}
.selected-user-row .sur-info{ flex:1 1 auto; min-width:0; }
.selected-user-row .sur-name{ font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-user-row .sur-email{ font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-user-row select.role-select{ flex:0 0 140px; }
.selected-user-row .sur-remove{ flex:0 0 auto; background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:16px; line-height:1; padding:4px 6px; }
.selected-user-row .sur-remove:hover{ color:var(--danger); }

.form-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .form-grid-2{ grid-template-columns: 1fr; } }

@media (max-width: 900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; flex:none; flex-direction:row; overflow-x:auto; align-items:center; }
  .admin-sidebar .brand-row{ padding: 4px 10px; }
  .admin-nav{ flex-direction:row; }
  .admin-sidebar .sidebar-footer{ margin-top:0; margin-left:auto; border-top:none; padding-top:0; }
  .admin-main{ padding: 22px 16px 50px; }
  .admin-table thead{ display:none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
  .admin-table tr{ padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .admin-table td{ border:none; padding: 4px 0; }
}

/* ---------- Watchlist auto-cleanup notice ---------- */
.auto-notice{
  margin: -10px 0 18px;
  padding: 10px 14px;
  background: var(--tag-gold-lt);
  border: 1px solid var(--tag-gold);
  color: #6b4f16;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

/* ---------- Edit Lot modal: read-only multimedia list ---------- */
.lot-multimedia-wrap{
  margin-bottom: 20px;
}
.lot-multimedia-wrap label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.multimedia-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.multimedia-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13px;
}
.multimedia-item a{
  color: var(--pasture);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multimedia-item a:hover{ text-decoration: underline; }
.mm-type-badge{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-soft);
}

/* ---------- Manage Sale Users modal ---------- */
.modal-box.users-modal{
  width: 700px;
  max-width: 700px;
  height: 520px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  overflow: hidden;
}
.modal-box.users-modal h3{ flex: none; padding-right: 20px; margin-bottom: 10px; font-size: 16.5px; line-height: 1.3; }
.users-modal-toolbar{ flex: none; margin: 0 0 12px; }
.users-modal-toolbar input{ width: 100%; }
.users-table-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.users-table{ width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.users-modal .users-table thead th{
  position: sticky;
  top: 0;
  background: var(--paper-dim);
  z-index: 1;
  padding: 8px 10px;
}
.users-modal .users-table th:nth-child(3), .users-modal .users-table td:nth-child(3){ width: 140px; }
.users-modal .users-table th:nth-child(4), .users-modal .users-table td:nth-child(4){ width: 110px; }
.users-modal .users-table td{
  font-size: 12.5px;
  padding: 8px 10px;
  overflow-wrap: break-word;
}
.users-modal .users-table td.cell-actions{ display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; justify-content: center}
.users-modal .users-table td.cell-actions .btn{ width: 100%; padding: 4px 6px; font-size: 11.5px; }
.role-select{
  width: 100%;
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

/* ============================================================
   Auth pages (login.html / register.html)
   Self-contained sign-in / sign-up for this admin dashboard —
   no dependency on designer.qcow.us.
   ============================================================ */
.auth-shell{
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.auth-box{
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.auth-box.wide{ max-width: 480px; }
.auth-logo{
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.auth-logo img{ width: 120px; height: auto; }
.auth-box h1{
  font-size: 22px;
  text-align: center;
  margin-bottom: 4px;
}
.auth-subtitle{
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0 0 26px;
}
.auth-banner{
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
  display: none;
}
.auth-banner.show{ display: block; }
.auth-banner-info{ background: var(--paper-dim); color: var(--ink); border: 1px solid var(--line); }
.auth-banner-success{ background: #e9f2ec; color: var(--pasture-dk); border: 1px solid var(--pasture); }
.auth-banner-error{ background: #f7e9e7; color: var(--danger); border: 1px solid var(--danger); }
.auth-footer{
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 22px;
}
.auth-footer a{ font-weight: 600; text-decoration: none; }
.auth-footer a:hover{ text-decoration: underline; }
.password-field{ position: relative; }
.password-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.password-toggle:hover{ color: var(--ink); }

/* ============================================================
   Tracking (tracking.html / telemetry1.js)
   Styles the ids/classes telemetry1.js actually renders into:
   the filter bar, the stat totals, the Chart.js panels, the
   Leaflet visitor map, and the Visitors / Recent Sessions tables.
   Modeled on the reference analytics screenshots — plain white
   panel cards, a compact "Totals" readout, and a clustered map —
   rather than introducing a new visual language.
   ============================================================ */

.badge-new{ background: #dcebe1; color: var(--pasture-dk); }

/* ---------- Filter bar (refresh) ---------- */
.tracking-toolbar{ margin-bottom: 14px; }
.tracking-toolbar select,
.tracking-toolbar input[type="search"]{ width:auto; }
.tracking-toolbar .toolbar-spacer{ flex: 1 1 auto; }

/* ---------- Compact layout — scoped to the Tracking page only ---------- */
#section-tracking .admin-header{ margin-bottom: 14px; }
#section-tracking .tracking-scope-bar{ padding: 7px 12px; margin-bottom: 10px; }
#section-tracking .view-tabs{ margin-bottom: 12px; }
#section-tracking .stat-row.stat-row-sm{ gap: 10px; margin-bottom: 12px; }
#section-tracking .stat-row.stat-row-sm .stat-card{ padding: 9px 14px; }
#section-tracking .chart-grid{ gap: 12px; margin-bottom: 16px; }
#section-tracking .chart-card{ padding: 14px 16px 10px; }
#section-tracking .chart-card .chart-canvas-wrap{ height: 170px; }
#section-tracking .chart-card .chart-canvas-wrap.chart-canvas-wrap-sm{ height: 155px; }
#section-tracking .map-card{ padding: 14px 16px; margin-bottom: 16px; }
#section-tracking #tracking-map,
#section-tracking #sale-map,
#section-tracking #lot-map{ height: 200px; }
#section-tracking .admin-panel-head{ padding: 12px 18px; }
#section-tracking .admin-table thead th,
#section-tracking .admin-table tbody td{ padding: 10px 18px; }
#section-tracking .admin-table tbody tr,
#section-tracking .admin-table tbody td{ min-height: 52px; }
#section-tracking .mt-24{ margin-top: 16px; }

/* ---- Telemetry page: pin the sidebar, scroll only the content ----
   .admin-shell is just a flex row with min-height:100vh, so once the
   Telemetry page's content (stat cards, charts, tables) grows taller
   than the viewport, the whole document scrolls — carrying the
   sidebar off-screen with it. Pinning the shell to a fixed 100vh with
   overflow:hidden stops the shell (and sidebar) from scrolling at
   all; .admin-main is then given its own overflow-y:auto so only the
   content area scrolls internally, with the sidebar staying put.
   Scoped to viewports wide enough for the side-by-side sidebar layout
   (matches the 900px breakpoint where .admin-shell switches to a
   stacked column) since pinning to 100vh doesn't make sense once the
   sidebar sits above the content instead of beside it. */
@media (min-width: 901px){
  body[data-page="tracking"] .admin-shell{
    height: 100vh;
    overflow: hidden;
  }
  body[data-page="tracking"] .admin-main{
    height: 100vh;
    overflow-y: auto;
  }
}

/* Second toolbar row: owner/designer search-and-select. Reuses the
   .user-search-results / .user-search-result-item dropdown pattern
   already defined above (Add/Edit Sale modal) rather than inventing
   a new component. */
.person-filter{
  position: relative;
  max-width: 320px;
  margin-bottom: 18px;
}
.person-filter input{ width:100%; }
.person-filter .user-search-results{
  position:absolute;
  left:0; right:0;
  margin-top:2px;
  z-index: 5;
}
.person-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tag-gold-lt);
  color: #6b4f16;
  font-size: 12.5px;
  font-weight: 600;
}
.person-filter-chip button{
  background:none; border:none; cursor:pointer;
  color:#6b4f16; font-size:13px; line-height:1; padding:0;
}
.person-filter-chip[hidden]{ display:none; }

/* ---------- Loading / empty / error states ---------- */
#tracking-error{
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
  background: #f7e9e7;
  color: var(--danger);
  border: 1px solid var(--danger);
}
#tracking-error[hidden],
#tracking-loading[hidden],
#tracking-content[hidden],
#tracking-empty[hidden]{ display:none; }

/* ---------- Totals stat row (compact variant) ---------- */
/* stat-sessions / stat-unique-visitors / stat-returning-visitors /
   stat-avg-time / stat-watchlist-adds sit inside the existing
   .stat-row > .stat-card markup, with a "-sm" modifier here so the
   five cards take up less vertical space on this page specifically. */
.stat-row.stat-row-sm{ gap: 12px; margin-bottom: 18px; }
.stat-row.stat-row-sm .stat-card{
  padding: 11px 16px;
  min-width: 128px;
}
.stat-row.stat-row-sm .stat-card .stat-value{ font-size: 21px; }
.stat-row.stat-row-sm .stat-card .stat-label{ font-size: 10.5px; margin-top:1px; }

/* ---------- Chart grid (sessions-over-time, top countries,
   time spent per lot, entry source) ---------- */
.chart-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.chart-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 14px;
}
.chart-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.chart-card-head h3{
  font-size:15px;
  margin:0;
}
.chart-card .chart-canvas-wrap{
  position: relative;
  height: 190px;
}
.chart-card .chart-canvas-wrap.chart-canvas-wrap-sm{ height: 170px; }
.chart-footnote{
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}
@media (max-width: 900px){
  .chart-grid{ grid-template-columns: 1fr; }
}

/* ---------- Visitor location map ---------- */
.map-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 24px;
  position: relative;
}
.map-card h2{ font-size: 16px; margin-bottom: 12px; }
#tracking-map{
  height: 240px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper-dim);
}
#tracking-map-empty{
  text-align:center;
  padding: 16px;
  color: var(--ink-soft);
  font-size: 13px;
}
#tracking-map-empty[hidden]{ display:none; }
/* Leaflet chrome, restyled to match the paper/ink palette instead
   of its default white-on-grey look. */
#tracking-map .leaflet-control-zoom a{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line) !important;
}
#tracking-map .leaflet-control-zoom a:hover{ background: var(--paper-dim); }
#tracking-map .leaflet-popup-content-wrapper{
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12.5px;
}
#tracking-map .leaflet-popup-content{ margin: 10px 12px; }

/* ---------- Scope bar (shows the current sale/lot filter + trigger) ---------- */
.tracking-scope-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13.5px;
}
.tracking-scope-bar .scope-label{ color: var(--ink-soft); }
.tracking-scope-bar .scope-value{ font-weight:700; }
.tracking-scope-bar .toolbar-spacer{ flex: 1 1 auto; }
.tracking-scope-bar label{ display:inline; margin:0 6px 0 0; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.tracking-scope-bar select{ width:auto; padding:6px 10px; font-size:13px; }

/* ---------- Search / Filter Analytics modal ---------- */
.owner-search-field{ position: relative; }
.filter-modal-results-count{
  font-size: 12px;
  color: var(--ink-soft);
  margin: 16px 0 6px;
}
.filter-modal-results-list{
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.filter-modal-result-item{
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.filter-modal-result-item:last-child{ border-bottom: none; }
.filter-modal-result-item:hover{ background: var(--paper-dim); }
.filter-modal-result-item strong{ font-size: 13.5px; }
.filter-modal-result-item .fmr-sub{ font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.filter-modal-result-all{ background: var(--paper); }

/* ---------- General Overview / Per Sale View / Per Lot View tabs ---------- */
/* Same visual language as .admin-nav / .subtab-bar (pasture-filled active
   pill on a paper track) rather than introducing a new component. */
.view-tabs{
  display:flex;
  gap:8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.view-tabs .view-tabs-spacer{ flex: 1 1 auto; }
.view-tab{
  background: var(--paper-dim);
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.view-tab:hover{ background: var(--line); color: var(--ink); }
.view-tab.active{ background: var(--pasture); color: #fff; }

.view-panel[hidden]{ display:none; }

.mt-24{ margin-top:24px; }
.mt-0{ margin-top:0; }

.inline-label{
  display:inline;
  font-size:12.5px;
  font-weight:600;
  color: var(--ink-soft);
  margin: 0 6px 0 0;
}

.toolbar-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar-group select{ width:auto; }

/* Two-up grid used for the Per Sale View chart + map row */
.chart-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-bottom:24px;
}
@media (max-width: 900px){
  .chart-grid-2{ grid-template-columns: 1fr; }
}
.chart-grid-2 .map-card{ margin-bottom:0; }
.chart-grid-2 #sale-map{ height: 100%; min-height: 190px; }

/* Per Sale / Per Lot maps reuse the same #tracking-map treatment */
#sale-map, #lot-map{
  height: 240px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper-dim);
}
#sale-map-empty, #lot-map-empty{
  text-align:center;
  padding: 16px;
  color: var(--ink-soft);
  font-size: 13px;
}
#sale-map-empty[hidden], #lot-map-empty[hidden]{ display:none; }

/* Pagination / footer strip under the multimedia table */
.table-footer{
  padding: 12px 22px;
  background: var(--paper-dim);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Visitors / Recent Sessions sub-tabs ---------- */
/* One .admin-panel with two switchable bodies instead of two stacked
   panels — modeled on the reference screenshots' SALE BOOK / WATCHLIST
   / VIDEOS segmented tab bar (solid active segment on a light track),
   recolored to the QCOW palette. */
.subtab-bar{
  display:flex;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.subtab-bar .subtab{
  flex: 1 1 0;
  text-align:center;
  padding: 13px 14px;
  background:none;
  border:none;
  cursor:pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: background .12s, color .12s;
}
.subtab-bar .subtab:hover{ background: var(--paper-dim); color: var(--ink); }
.subtab-bar .subtab.active{
  background: var(--pasture);
  color: #fff;
  border-bottom-color: var(--pasture);
}
.subtab-panel[hidden]{ display:none; }

/* "Square" scrollable body so the Visitors table stops stretching
   the page — fixed-height, internally scrolling, like the Manage
   Lots / Manage Sale Users modal tables above. */
.tables-panel-body{
  max-height: 420px;
  overflow-y: auto;
}
.tables-panel-body .admin-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}


/* ============================================================
   Sale Management + Premium Service — merged page additions
   (sale_management.html / sale_management.js)

   sale_management.html merges what used to be sales.html and
   premium.html into one page with two sections. Everything those
   two pages needed already exists above EXCEPT the handful of
   classes below, which is why this block only adds those — nothing
   above this comment was touched, and every rule here is scoped to
   class names already used only by the Sale/Premium markup, so no
   other page is affected.
   ============================================================ */

/* ---- Outline-red button (Premium "Remove" action, matches the
   existing outline-gold pattern above but for the danger color) ---- */
.btn-outline-red{ background: #fff; border: 1.5px solid var(--danger); color: var(--danger); }
.btn-outline-red:hover{ background: #fbe9e7; }

/* ---- Edit Lot modal: "Show association data to user" toggle ---- */
.field-toggle{ margin-top: 18px; }
.toggle-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.toggle-label input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--pasture); }

/* ---- Add/Edit Sale modal: location picker (map pin) ---- */
.location-field{ margin-top: 18px; }
.location-search-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.location-search-row input{ flex: 1 1 220px; }
.location-search-row .btn{ flex: 0 0 auto; white-space: nowrap; }
.location-map{
  width: 100%;
  height: 220px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-dim);
  overflow: hidden;
  position: relative;
  z-index: 0;
  cursor: crosshair;
}
.modal-box.form-wide .location-map{ height: 380px; }
.location-map-error{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: default;
}
.location-preview{ font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; font-family: monospace; }
.location-preview.has-location{ color: var(--pasture); font-weight: 600; }
.link-btn-inline{
  background: none;
  border: none;
  color: var(--pasture);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 10px 0 0;
  text-decoration: underline;
}

/* ---- Sale Management table: tighter rows ----
   The default .admin-table row sizing above (min-height 72px, 14px/22px
   cell padding) is sized for rows with at most 2 stacked buttons. Sale
   Management's rows only need one line of content per cell (or wrap to
   two short lines in Actions), so this page gets a shorter row height.
   Scoped to this page's table only (via body[data-page="sales"]) so
   User Management / Activity Logs / Watchlist / Billing keep their
   existing row height. Horizontal padding is also tightened from the
   shared 22px — with table-layout:auto (below), the short columns
   (Sale Date, Remind Me, Mapped) only need to fit a short pill/date,
   and 22px of padding on each side was reserving more empty space
   around that content than the content itself needed. */
body[data-page="sales"] .admin-table thead th{
  padding: 10px 16px;
}
body[data-page="sales"] .admin-table tbody tr{
  min-height: 44px;
}
body[data-page="sales"] .admin-table tbody td{
  padding: 8px 16px;
  min-height: 44px;
}

/* ---- Sale Management table: content-sized columns ----
   The shared .admin-table default uses table-layout:fixed with equal
   column widths, which is fine for tables where every column holds a
   similar amount of content, but here it forces short columns (Sale
   Date, Remind Me) to take the same width as long ones (Sale, Actions)
   — wrapping headers and pill buttons onto two lines even though
   there's plenty of spare width elsewhere in the row. Switching to
   table-layout:auto lets every column size itself to its own content
   instead. The Sale column is the exception: it holds the longest,
   most variable text (sale title + owner name), so it gets an explicit
   fixed width via <col class="col-sale"> rather than being left to
   shrink-wrap, which would make it fight the other columns for space
   on every re-render — sized generously here so most titles fit on one
   line. Actions is also pinned to nowrap so Manage Lots / Edit / the
   "..." button never wrap onto a second line now that the other
   columns aren't stealing their width. */
body[data-page="sales"] .admin-table{
  table-layout: auto;
}
body[data-page="sales"] .admin-table .col-sale{
  width: 420px;
}
/* Keep the sale title itself on one line at that width; the ranch/date
   sub-line below it can still wrap or truncate as before. An ellipsis
   is a safety net for the rare title that's still too long, not the
   normal case. */
body[data-page="sales"] .admin-table .sale-title-link strong{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="sales"] .admin-table .cell-actions{
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* ---- Sale Management table: Actions column flush to the right edge ----
   table-layout:auto hands the Actions column more width than its
   buttons need, and .cell-actions (like all .admin-table rows) is
   left-aligned by default — so the buttons sat with a big empty gap
   between them and the panel's right border. Right-aligning the
   header label and the button row closes that gap, so Actions reads
   flush against the edge like every other panel on the site. */
body[data-page="sales"] .admin-table th:last-child{
  text-align: right;
}
body[data-page="sales"] .admin-table .cell-actions{
  justify-content: flex-end;
}
/* ---- Sale Management table: Remind/Search/Private Treaty as one
   bordered segmented control ----
   These three are all small icon toggles for the same sale, so instead
   of three separate free-floating chip buttons, the row's JS renders
   them inside a single td (colspan across their 3 header columns)
   containing .icon-toggle-group — one bordered, rounded box with a
   divider between each segment, like a segmented control. Individual
   .btn-icon-toggle chips lose their own border/radius here so they
   read as segments of the shared box rather than separate buttons. */
body[data-page="sales"] .admin-table td.icon-toggle-cell{
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}
/* The 3 header cells (Remind Me / Search / Private Treaty) are merged
   into one <th colspan="3"> so they can't drift out of alignment with
   the segmented box below them the way 3 independently-sized <th>
   columns did. The label row is centered as a compact group — each
   label pinned to the same fixed width as its icon segment below —
   rather than stretched with flex:1 across the full column width,
   which spread the labels out further than the (narrower) box itself.
   That fixed width is generous enough for "PRIVATE TREATY" not to
   crowd its neighbors — a narrower width was forcing all 3 labels to
   overflow their own box and butt up against each other. */
body[data-page="sales"] .admin-table th.icon-toggle-header{
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
body[data-page="sales"] .admin-table .icon-toggle-header-row{
  display: inline-flex;
}
body[data-page="sales"] .admin-table .icon-toggle-header-row span{
  width: 104px;
  text-align: center;
}
/* A fixed, generous height (rather than a % of the cell, which
   resolves to auto — and therefore shrinks to the icon's own intrinsic
   size — inside a table row whose height isn't itself an explicit
   value) so the box reads as a tall pill spanning most of the row,
   not a short chip with dead space around it. */
body[data-page="sales"] .admin-table .icon-toggle-group{
  display: inline-flex;
  align-items: stretch;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
}
body[data-page="sales"] .admin-table .icon-toggle-group .btn-icon-toggle{
  width: 104px;
  min-width: 104px;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
}
body[data-page="sales"] .admin-table .icon-toggle-group .btn-icon-toggle + .btn-icon-toggle{
  border-left: 1px solid var(--line);
}

/* ---- Sale Management table: row/title link to Dbook catalog ----
   The old dedicated "View PDF" column was removed; that link now lives
   on the sale title and on the row itself (row click is handled in JS,
   ignoring clicks on the row's other buttons/links). These rules just
   give both the visual affordance of being clickable. */
body[data-page="sales"] .admin-table tbody tr.sale-row-dbook{
  cursor: pointer;
}
body[data-page="sales"] .admin-table .sale-title-link{
  color: inherit;
  text-decoration: none;
}
body[data-page="sales"] .admin-table .sale-title-link:hover strong{
  text-decoration: underline;
}

/* ---- Sale Management panel: edge-to-edge, square corners ----
   The "All Sales" panel drops its border radius and bleeds out to
   meet the left/right edges of .admin-main's content area, instead
   of sitting inset within .admin-main's horizontal padding like
   every other panel. Negative margins equal to that padding (36px
   desktop / 16px on the <=900px stacked layout) pull it flush; the
   border-radius is removed to match the squared-off edge. */
body[data-page="sales"] .admin-panel{
  border-radius: 0;
  margin-left: -36px;
  margin-right: -36px;
}
@media (max-width: 900px){
  body[data-page="sales"] .admin-panel{
    margin-left: -16px;
    margin-right: -16px;
  }
}
/* ---- Sale Management table: fixed-height scroll area ----
   With potentially 100+ sales on one page, letting the table grow to
   fit all rows pushes pagination and the rest of the page far down.
   Instead of a fixed pixel cap (which left a lot of dead white space
   under the panel on short lists), the panel stretches to fill the
   full height of the main content column — flex chain from
   .admin-main down through the section and panel to .table-scroll,
   each taking flex:1 so the last one absorbs all leftover vertical
   space. .admin-shell (min-height:100vh) already stretches
   .admin-main to match the sidebar's height, so this makes the
   panel's bottom edge land level with the sidebar's Log out button
   instead of stopping partway down the screen. thead stays sticky so
   headers remain visible while scrolling within a page's rows.
   Scoped to viewports wide enough for the side-by-side sidebar
   layout (matches the 900px breakpoint where .admin-shell switches
   to a stacked column) since a fill-to-viewport table doesn't make
   sense once the sidebar sits above the content instead of beside it. */
@media (min-width: 901px){
  body[data-page="sales"] .admin-shell{
    /* .admin-shell normally only has min-height:100vh, so once the
       Sale Management table's content (up to 100 rows/page) grows
       taller than the viewport, .admin-shell itself grows past
       100vh and the whole page — including the sidebar — scrolls,
       even though .table-scroll below is supposed to hold its own
       internal scrollbar. Pinning the shell to a fixed 100vh with
       overflow:hidden stops the shell (and sidebar) from growing or
       scrolling at all; only .table-scroll, further down this same
       flex chain, is left with room to scroll internally. */
    height: 100vh;
    overflow: hidden;
  }
  body[data-page="sales"] .admin-main{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* .admin-main's shared 60px bottom padding left a visible strip
       of page background between the panel's bottom edge and the
       true viewport bottom even after the flex-fill above and an
       earlier trim to 22px. Dropping it to 0 here removes that gap
       entirely so the panel (and its pagination row) actually
       reaches the bottom edge, level with the sidebar's Log out
       link. */
    padding-bottom: 0;
  }
  body[data-page="sales"] #section-sales.admin-section.active{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  body[data-page="sales"] .admin-panel{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body[data-page="sales"] .table-scroll{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body[data-page="sales"] .table-scroll-inner{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}
body[data-page="sales"] .table-scroll-inner .admin-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}
/* ---- Sale Management pagination: pinned to the panel's bottom ----
   The table itself scrolls inside .table-scroll-inner; the pagination
   row sits outside that scrolling area as a separate flex child of
   .table-scroll, so it always sits flush with the bottom of the panel
   — level with the sidebar's Log out link — even when there are only
   a handful of rows and nothing to scroll. (Previously this lived
   inside the scrolling container with position:sticky, which only
   pins content to the bottom of the *visible scrollport* while
   scrolled; with few rows there's no scroll, so it just rendered
   right after the last row with empty space below it instead of at
   the true bottom of the panel.) */
body[data-page="sales"] .table-scroll .pagination-row{
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 10px -6px rgba(35,32,27,0.12);
}

/* ---- Add/Edit Sale modal: "Buyer Reminders" section (reminder
   date/time/timezone + email/SMS message templates), matching the
   customer-facing Edit Sale UI. Sits BELOW .form-two-col and spans the
   full modal width, so the two message textareas get enough room to
   sit side-by-side without wrapping labels or feeling cramped. ---- */
.reminders-section{
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.form-section-heading{
  font-size: 16px;
  margin: 0 0 16px;
}
.reminders-grid .row-3{ max-width: 640px; }
.reminders-intro{ margin-top: 10px; }

.reminder-messages{
  margin-top: 18px;
  margin-bottom: 0;
}
.row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.reminder-message-col label{ font-size: 13px; }
.reminder-message-col textarea{
  width: 100%;
  min-height: 130px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
}
.reminder-message-col textarea::placeholder{ color: #9c9484; }
.reminder-message-col .helper-text{
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.reminder-message-col .char-count-text{ justify-content: flex-end; }
.reminder-message-col .char-count-text span{ font-family: var(--font-mono); color: var(--ink); }

@media (max-width: 700px){
  .row-2{ grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Sale Management: row-level icon toggles (Remind Me / Search /
   Private Treaty). Each icon depicts what the column actually does
   (bell, magnifying glass, padlock) with a crossed-out / open variant
   for the off state, so the icon itself communicates the state
   instead of relying on generic switch chrome or on/off text. ---- */
.btn-icon-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #b6ae9b;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.btn-icon-toggle:active{ transform: translateY(1px); }
.btn-icon-toggle:hover{ color: var(--ink-soft); }
.btn-icon-toggle svg{ width: 18px; height: 18px; display:block; }
.btn-icon-toggle.is-on{
  color: var(--tag-gold);
}
/* "On" reads as a solid, filled icon rather than just a colored
   outline — overriding the SVG's own fill="none" (a presentation
   attribute, which CSS always wins over) so the shape itself fills
   with the same gold as the stroke. */
.btn-icon-toggle.is-on svg{
  fill: currentColor;
}
.btn-icon-toggle.is-on:hover{ color: #8a6a20; }