/* Staff Scheduling DAA Stylesheet - Exact Excel Template Styling & Single-Screen/Single-Page Fit */

:root {
  --primary-bg: #cbd5e1;
  --header-bg: var(--hop-navy);
  --header-text: #ffffff;
  --excel-grid: #525252;
  --diff-highlight: #fef08a;
  --diff-border: #f59e0b;
  --fit: calc((100vh - 108px) / 56);   /* row height that makes the board fill the screen; app.js refines it (fitBoard) */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  font-family: var(--font-ui);
  background-color: var(--primary-bg);
  color: #000000;
  line-height: 1.15;
}

body {
  display: flex;
  flex-direction: column;
}

/* Title banner (above the toolbar) */
.title-banner {
  position: relative;
  background-color: var(--header-bg);
  color: var(--header-text);
  text-align: center;
  padding: 4px 12px 3px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.title-banner-name { font-size: 17px; font-weight: 800; letter-spacing: 0.4px; line-height: 1.2; }
.header-center { display: flex; align-items: center; justify-content: center; gap: 10px; }
.header-date { font-size: 13px; font-weight: 700; }
.pub-info { font-size: 10.5px; font-weight: 600; color: #cbd5e1; white-space: nowrap; }
.pub-draft { color: #fbbf24; }

/* Header & Navigation Bar (Compact to maximize screen for long sheet) */
.top-header {
  background-color: var(--header-bg);
  color: var(--header-text);
  padding: 4px 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex-shrink: 0;
  height: 38px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-badge {
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-badge {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.status-published {
  background-color: #10b981;
  color: #ffffff;
}

.status-draft {
  background-color: #f59e0b;
  color: #ffffff;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Action Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-s);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

/* keyboard focus: visible gold ring on every button and link */
.btn:focus-visible, .modal-close:focus-visible, .name-search input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary {
  background-color: var(--accent);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-publish {
  background-color: var(--success);
  color: #ffffff;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.btn-publish:hover {
  background-color: var(--success-hover);
}

.btn-upload {
  background-color: var(--warn);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.btn-upload:hover {
  background-color: var(--warn-hover);
}

.btn-outline {
  background-color: transparent;
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.btn-secondary {
  background-color: var(--neutral);
  color: var(--neutral-text);
}
.btn-secondary:hover {
  background-color: var(--neutral-hover);
}

/* Version Diff Notice Banner */
.diff-banner {
  background: #fef3c7;
  border-bottom: 1.5px solid #f59e0b;
  padding: 3px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #92400e;
  font-weight: 600;
  flex-shrink: 0;
}

/* DAA Board Layout — Fills Exactly One Screen */
.sheet-container {
  padding: 4px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  flex: 1;
  height: 100%;
  align-items: stretch;
}

/* Column Wrapper */
.board-column {
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Scrollbar styling for columns */
.board-column::-webkit-scrollbar {
  width: 4px;
}
.board-column::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 2px;
}

/* Top Column Headers (Directly styled from Template B2, F2, J2, M2) */
/* Top Column Headers (Directly styled from Template Row 1) */
.col-header {
  padding: 3px 4px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.5px;
  border-bottom: 1.5px solid #000000;
  background-color: #ffffff;
  color: #000000;
  font-family: var(--font-board);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Sub-section Headers (Matching Template Section Breaks) */
.sub-header {
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 4px;
  border-top: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
  background-color: #ffffff;
  color: #000000;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
}

/* Roster Table — Exact Excel Grid Lines & Compact Row Heights */
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-board);
}

.roster-table th {
  background: #ffffff;
  font-size: min(10.5px, calc(var(--fit) - 3.5px));
  color: #000000;
  font-weight: 700;
  padding: 0 3px;
  border: 1px solid var(--excel-grid);
  text-align: center;
  height: min(18px, var(--fit));
  font-family: var(--font-board);
}

.roster-table td {
  padding: 0 3px;
  font-size: min(11px, calc(var(--fit) - 3.5px));
  border: 1px solid var(--excel-grid);
  vertical-align: middle;
  background-color: #ffffff;
  color: #000000;
  height: min(17px, var(--fit));
  line-height: 1.1;
}

/* Room & Role badge cells - Exact Excel rectangular cells */
.cell-room {
  font-weight: 700;
  text-align: center;
  font-size: min(11px, calc(var(--fit) - 3.5px));
  white-space: nowrap;
}

/* Staff & Faculty content cells */
.cell-staff {
  text-align: center;   /* names centered (owner, 2026-11-10) */
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-faculty {
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-phone {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: #000000;
}

/* Editable Cell Highlight in Admin */
.editable-cell {
  cursor: pointer;
}
.editable-cell:hover {
  outline: 1.5px dashed var(--accent);
  background-color: var(--drop-ok-bg) !important;
}

/* Diff Highlight */
.diff-cell {
  background-color: var(--diff-highlight) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  outline: 2px solid var(--diff-border) !important;
  outline-offset: -1px;
}

.diff-badge {
  display: inline-block;
  background-color: #d97706;
  color: #ffffff;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  margin-left: 3px;
}

/* Modals */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  background: #ffffff;
  border-radius: 6px;
  width: 90%;
  max-width: 520px;
  padding: 18px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
  font-family: var(--font-ui);
  border-top: 4px solid var(--hop-gold);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hop-navy);
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #64748b;
}

/* Shared empty / no-schedule panel */
.empty-panel {
  text-align: center;
  padding: 40px 24px;
  background: #fff;
  border-radius: 8px;
  margin: auto;
  border: 1px solid var(--hop-border);
  max-width: 420px;
}
.empty-panel h2 {
  font: 700 18px var(--font-ui);
  color: var(--hop-navy);
}
.empty-panel p {
  color: #64748b;
  margin-top: 8px;
  font: 400 13px var(--font-ui);
}
.empty-panel .empty-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* List Table Page */
.list-container {
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 16px;
  overflow-y: auto;
  flex: 1;
}

.list-table {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-collapse: collapse;
}

.list-table th {
  background: #e2e8f0;
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  color: #000000;
  border: 1px solid #737373;
}

.list-table td {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
}

/* Public display: rows grow past the 17px cap so the board fills tall screens (TVs, 1080p+); text grows with the rows.
   Screen only: print keeps the capped sizes above. */
@media screen and (min-width: 769px) {
  body.fill-screen .roster-table th, body.fill-screen .roster-table td { height: var(--fit); }
  body.fill-screen .roster-table th { font-size: min(16px, calc(var(--fit) - 3.5px)); }
  body.fill-screen .roster-table td, body.fill-screen .cell-room { font-size: min(17px, calc(var(--fit) - 3.5px)); }
}

/* Print Optimization — STRICT SINGLE PAGE FIT with exact colors */
@media print {
  :root { --fit: calc((100vh - 108px) / 56) !important; }   /* print keeps the original fit, not the screen fit */
  @page {
    size: letter landscape;
    margin: 0.1in !important;
  }

  html, body {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8pt !important;
    line-height: 1.05 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .no-print, .top-header, .diff-banner, .modal-overlay, .btn {
    display: none !important;
  }

  .sheet-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    height: 98vh !important;
    max-height: 98vh !important;
    overflow: hidden !important;
  }

  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 6px !important;
    border-bottom: 1.5px solid #000 !important;
    padding-bottom: 4px !important;
    flex-shrink: 0;
  }

  .print-header h1 {
    font-size: 13pt !important;
    margin: 0 !important;
    color: #000 !important;
  }

  .print-header p {
    font-size: 9pt !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #000 !important;
  }

  .board-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
    height: calc(100% - 38px) !important;
    max-height: calc(100% - 38px) !important;
    overflow: hidden !important;
  }

  .board-column {
    border: 1px solid #000 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    height: 100% !important;
  }

  .col-header {
    border-bottom: 1px solid #000 !important;
    padding: 1px 2px !important;
    font-size: 8.5pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .sub-header {
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 1px 2px !important;
    font-size: 7.5pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* every section table fills its column in print (no narrow table with white space beside it) */
  .board-column { display: block !important; }
  .board-column > .roster-table, .board-column .roster-table { display: table !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  /* Chrome's print layout left white space beside some tables (columns sized to their text): the table is a block, its header/body are full-width fixed tables, and the 3 column widths are set on the cells. */
  .board-column .roster-table { display: block !important; }
  .board-column .roster-table > colgroup { display: none !important; }
  .board-column .roster-table > thead, .board-column .roster-table > tbody { display: table !important; width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; }
  .board-column .roster-table th:nth-child(1), .board-column .roster-table td:nth-child(1) { width: 20% !important; }
  .board-column .roster-table th:nth-child(2), .board-column .roster-table td:nth-child(2) { width: 46% !important; }
  .board-column .roster-table th:nth-child(3), .board-column .roster-table td:nth-child(3) { width: 34% !important; }
  .board-column .roster-table.coord th:nth-child(1), .board-column .roster-table.coord td:nth-child(1) { width: 40% !important; }
  .board-column .roster-table.coord th:nth-child(2), .board-column .roster-table.coord td:nth-child(2) { width: 26% !important; }
  .board-column > .col-header, .board-column > .sub-header { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  .roster-table {
    font-size: 7.5pt !important;
  }

  .roster-table th, .roster-table td {
    border: 0.5pt solid #000 !important;
    padding: 0 2px !important;
    height: 10.5pt !important;
    max-height: 10.5pt !important;
    font-size: 7pt !important;
    line-height: 1.0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cell-room {
    font-size: 7pt !important;
    border-radius: 2px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .diff-cell {
    background-color: #ffffff !important;
    outline: none !important;
  }
}

/* Month calendar picker */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-nav { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 10.5px; color: #64748b; font-weight: 700; padding: 2px 0; }
.cal-cell { position: relative; text-align: center; padding: 8px 0; border-radius: 4px; font-size: 13px; color: #94a3b8; text-decoration: none; }
.cal-pub, .cal-draft { font-weight: 700; cursor: pointer; }
.cal-pub { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.cal-draft { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.cal-pub:hover, .cal-draft:hover { filter: brightness(0.95); }
.cal-active { outline: 2px solid var(--hop-navy); }
.cal-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #eab308; }
.cal-legend { display: flex; gap: 12px; font-size: 11px; color: #64748b; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.cal-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid transparent; }
.cal-swatch.pub { background: #86efac; border-color: #4ade80; }
.cal-swatch.draft { background: #fde047; border-color: #eab308; }
.cal-swatch.dot { width: 6px; height: 6px; border-radius: 50%; background: #eab308; vertical-align: 1px; }

/* Name search */
.name-search { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.12); border-radius: 6px; padding: 0 8px; height: 28px; }
.name-search input { background: transparent; border: 0; outline: 0; color: #fff; font-size: 12px; width: 120px; }
.name-search input::placeholder { color: rgba(255,255,255,0.65); }
.name-search:focus-within { background: rgba(255,255,255,0.22); }
.name-search-count { font-size: 11px; color: #fde047; white-space: nowrap; }
.name-search-count.none { color: #fca5a5; }
.board-grid td.search-hit { background-color: var(--hop-orange) !important; color: #000 !important; font-weight: 700; outline: 2px solid #c2410c; outline-offset: -2px; }
.name-search-icon .ico { width: 14px; height: 14px; stroke: currentColor; }
@media print { .board-grid td.search-hit { background-color: inherit !important; outline: none !important; font-weight: inherit; } }

/* Search box sits at the far right of the title row; icon-only toolbar buttons */
.title-banner .name-search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.btn-icon { font-size: 19px; line-height: 1; }

/* Previous / next day arrows beside the date */
.nav-arrow { font-size: 20px; line-height: 1; padding: 2px 10px 4px; text-decoration: none; }
.nav-arrow.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Dark mode (optional toggle). Location colours in the label column are kept as-is. */
@media screen {
  html[data-theme="dark"] { --primary-bg: #0b1220; --excel-grid: #475569; --header-bg: #0f172a; }
  html[data-theme="dark"] body { color: #e5e7eb; }
  html[data-theme="dark"] .board-column { background: #111827; border-color: #64748b; }
  html[data-theme="dark"] .col-header,
  html[data-theme="dark"] .sub-header { background-color: #1f2937; color: #f3f4f6; border-color: #64748b; }
  html[data-theme="dark"] .roster-table th { background: #1f2937; color: #f3f4f6; }
  html[data-theme="dark"] .roster-table td.cell-staff:not(.diff-cell) { background-color: #111827; color: #e5e7eb; }
  html[data-theme="dark"] td.cell-room[style*="#ffffff" i] { background-color: #111827 !important; color: #e5e7eb !important; }
  html[data-theme="dark"] .cell-phone { color: #e5e7eb; }
}

/* Main Admin: compact Save (icon) + Submit flanking the section title */
.sec-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.sec-head .sec-title { text-align: center; }
.sbtn { font: 600 10.5px var(--font-ui); text-transform: none; letter-spacing: 0; padding: 1px 8px; border-radius: 4px; border: 1px solid; cursor: pointer; line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; }
.sbtn .ico { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sbtn.save { background: #f1f5f9; color: #1e293b; border-color: #94a3b8; padding: 2px 6px; }
.sbtn.save .sbtn-label { display: none; }                 /* icon-only until the section is dirty */
.sec-dirty .sbtn.save { background: var(--draft-bg); color: #713f12; border-color: var(--draft); }
.sec-dirty .sbtn.save .sbtn-label { display: inline; }
.sbtn.save:hover:not(:disabled) { background: #e2e8f0; }
.sec-dirty .sbtn.save:hover:not(:disabled) { background: #fef08a; }
.sbtn.submit { background: var(--hop-navy); color: #fff; border-color: var(--hop-navy-2); }
.sbtn.submit:hover:not(:disabled) { background: var(--hop-navy-2); }
.sbtn:disabled { opacity: 0.4; cursor: default; }
.draft-cell { cursor: text; }
.draft-cell:focus { outline: 2px solid var(--select); outline-offset: -2px; background-color: var(--select-bg) !important; color: #000 !important; }
.draft-cell.has-draft { background-color: var(--draft-bg) !important; color: #000 !important; box-shadow: inset 0 0 0 1px var(--draft-ring); }
.page-tag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--hop-navy); background: var(--hop-gold); border: 0; border-radius: 3px; padding: 2px 7px; }
.mini-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); background: #166534; color: #fff; font: 600 12.5px var(--font-ui); padding: 7px 14px; border-radius: 6px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 9999; max-width: 90vw; text-align: center; }
.mini-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mini-toast.bad { background: #b91c1c; }
@media (max-width: 768px) { .page-tag { display: none; } }

/* Location admins: other sections are view-only */
.sec-locked .lock-note { font-size: 12px; opacity: 0.7; text-transform: none; display: inline-flex; align-items: center; }
.sec-locked .lock-note .ico { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sec-locked td { cursor: default; }

.sec-sub { font: 600 10px var(--font-ui); text-align: center; color: #94a3b8; background: #f8fafc; border-bottom: 1px solid #cbd5e1; padding: 1px 4px; }
.sec-sub.done { color: #166534; background: #f0fdf4; }
.sec-locked .has-draft { background-color: var(--draft-bg) !important; color: #000 !important; }
@media screen { html[data-theme="dark"] .sec-sub { background: #0f172a; border-color: #334155; color: #94a3b8; } html[data-theme="dark"] .sec-sub.done { background: #052e16; color: #86efac; } }

/* Diff banner (admin) */
.diff-banner .diff-ico { width: 16px; height: 16px; stroke: #92400e; fill: none; stroke-width: 1.8; flex: none; }
.diff-banner .diff-actions { display: flex; gap: 6px; }
.diff-banner .diff-msg { display: flex; align-items: center; gap: 8px; }

/* Version chips in the toolbar */
.ver-wrap { display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; }
.ver-wrap .ver-label { font-size: 10.5px; color: var(--on-dark-muted); font-weight: 600; }
.ver-wrap a { font-size: 10.5px; padding: 1px 6px; border-radius: 3px; text-decoration: none; font-weight: 700; color: #fff; background: rgba(255,255,255,0.2); }
.ver-wrap a.is-current { background: var(--hop-gold); color: var(--hop-navy); }

/* Upload modal tabs + form fields */
.upload-choice { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.upload-tab { text-align: left; padding: 10px 12px; border-radius: 6px; cursor: pointer; font: 600 13px var(--font-ui); background: #fff; color: var(--hop-navy); border: 1px solid var(--hop-navy); }
.upload-tab[aria-selected="true"] { background: var(--hop-navy); color: #fff; }
.upload-field { margin-bottom: 14px; }
.upload-field label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; color: var(--hop-navy); }
.upload-field input[type="file"] { display: block; width: 100%; padding: 6px; border: 1px dashed var(--hop-border); border-radius: 4px; background: var(--hop-surface); }
.upload-field input[type="date"], .upload-field input[type="text"] { display: block; width: 100%; padding: 6px; border: 1px solid var(--hop-border); border-radius: 4px; font: 400 13px var(--font-ui); }
.upload-help { font-size: 11px; color: #64748b; margin-top: 3px; }
.upload-help-top { font-size: 12px; color: #475569; margin: 0 0 12px; }
.upload-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Profile window (Public page) */
.profile-card { width: min(440px, 94vw); }
.profile-card label { display: block; font: 600 12px var(--font-ui); color: #334155; margin: 10px 0 0; }
.profile-card input, .profile-card select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px; background: #fff; color: #0f172a; }
.profile-card input:disabled { background: #f1f5f9; color: #64748b; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-ask { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font: 600 14px var(--font-ui); color: #0f172a; }
.pf-toggle { display: inline-flex; border: 1.5px solid var(--hop-navy, #1B3058); border-radius: 999px; overflow: hidden; flex: none; }
.pf-toggle button { border: 0; background: #fff; color: var(--hop-navy, #1B3058); font: 700 13px var(--font-ui); padding: 5px 14px; cursor: pointer; }
.pf-toggle button[aria-pressed="true"] { background: var(--hop-navy, #1B3058); color: #fff; }
.pf-sub { margin: 10px 0 0 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pf-chan { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #94a3b8; background: #fff; color: #0f172a; border-radius: 6px; padding: 5px 12px; font: 600 13px var(--font-ui); cursor: pointer; }
.pf-chan[aria-expanded="true"] { border-color: var(--hop-navy, #1B3058); background: #eef2fa; }
.pf-chan .ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pf-box { display: flex; gap: 8px; width: 100%; }
.pf-box[hidden] { display: none; }
.pf-box input, .pf-box select { margin-top: 0; flex: 1 1 0; min-width: 0; }
.pf-msg { min-height: 18px; margin-top: 10px; font: 600 12px var(--font-ui); color: #166534; }
.pf-msg.bad { color: #b91c1c; }
.pf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media print { #profile-modal { display: none !important; } }
.pf-actions .btn { display: inline-flex; }
.pf-actions .btn-outline { background: #fff; color: var(--hop-navy, #1B3058); border: 1.5px solid var(--hop-navy, #1B3058); }
.pf-actions .btn-primary { background: var(--hop-navy, #1B3058); color: #fff; border: 1.5px solid var(--hop-navy, #1B3058); }

/* "IR ADD-ON": ADD-ON is 10 pt next to a 12 pt room name */
.addon { font-size: .83em; }