:root{
  --bg:#f4efe6;
  --paper:#fffdf8;
  --ink:#2d241b;
  --muted:#7b6c5d;
  --border:#dccfbf;
  --accent:#6f8f72;
  --accent-2:#556e57;
  --soft:#efe5d8;
  --danger:#a34d44;
  --admin:#6b5aa6;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#efe6d7 0%,#f7f2ea 100%);
}
.hidden{display:none!important}
.overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(40,30,20,.25); z-index:50;
}
.overlay.show{display:flex}
.loader-card,.login-card,.modal-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  width:min(520px, 92vw);
  max-height:90vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
}
.loader-card{padding:28px 32px; display:flex; gap:14px; align-items:center}
.spinner{
  width:20px; height:20px; border:3px solid #d8cab9; border-top-color:var(--accent); border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:460px; padding:26px;
}
.muted{color:var(--muted)}
.login-tabs{display:flex; gap:10px; margin:18px 0}
.ltab,.btn{
  border:none; border-radius:12px; padding:11px 14px; cursor:pointer; font:inherit;
}
.ltab{background:#e9dfd2; color:var(--ink)}
.ltab.on{background:var(--accent); color:#fff}
.login-fields{display:grid; gap:12px; margin:14px 0}
input,select{
  width:100%; padding:12px 13px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--ink); font:inherit;
}
.error-box{
  display:none; margin:8px 0 0; padding:10px 12px; border-radius:12px;
  background:#f9e2de; color:#7b2d24; border:1px solid #e4b3ab;
}
.login-actions,.row,.top-actions,.calendar-head,.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #eee;
}
.login-actions{margin-top:14px}
.login-foot{margin-top:14px}

.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.secondary{background:#eadfce; color:var(--ink)}
.btn.danger{background:var(--danger); color:#fff}

.app-shell{
  max-width:1180px; margin:0 auto; padding:22px;
}
.topbar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px;
}
.ubadge,.chip{
  display:inline-flex; align-items:center; border-radius:999px; padding:8px 12px; font-size:.92rem;
}
.ubadge.vol{background:#dfeadf; color:#36503a}
.ubadge.adm{background:#e5e0f6; color:#4f4188}
.chip.admin{background:#ece8fb; color:#52448d}

.card{
  background:var(--paper); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  padding:16px; margin-bottom:16px;
}

.site-tabs{display:flex; gap:10px; flex-wrap:wrap}
.stab{
  border:none; border-radius:12px; padding:10px 14px; background:#eadfce; cursor:pointer; font:inherit;
}
.stab.on{background:#7e6750; color:#fff}

.form-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:12px 0;
}

.calendar-head{justify-content:space-between; margin-bottom:12px}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}
.dhdr{
  text-align:center; font-weight:bold; padding:8px 0; color:var(--muted);
}
.dcell{
  min-height:118px; background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:10px; display:flex; flex-direction:column; gap:8px;
}
.dcell.emp{background:transparent; border:none}
.dcell.has{cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.02)}
.dcell.today{outline:2px solid #c9b28d}
.dnum{font-weight:bold}
.spills{display:flex; flex-direction:column; gap:6px}
.spill{
  border-radius:10px;
  padding:6px 8px;
  font-size:.82rem;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.2;
  min-height:24px;
}
.spill.open{background:#dfeadf; color:#29422c}
.spill.full{background:#f3ddd8; color:#7b2d24}
.spill.mine{background:#e5e0f6; color:#4f4188}

.modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.35);
  z-index:1000;
}
.modal-overlay.open{display:flex}
.modal-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  width:min(520px, 92vw);
  max-height:90vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #eee;
}
.slot-list{display:grid; gap:12px}
.srow{
  display:flex; justify-content:space-between; gap:14px; align-items:center;
  background:#fbf8f3; border:1px solid var(--border); border-radius:14px; padding:12px;
}
.stime{font-weight:bold}
.swho{color:var(--muted); margin-top:4px}

@media (max-width:800px){
  .calendar-grid{grid-template-columns:repeat(7,minmax(90px,1fr)); overflow-x:auto}
}
@media (max-width:640px){
  .topbar,.calendar-head,.srow,.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #eee;
}
}

/* ===== PRINT VIEW ===== */
@media print {
  body {
    background: #fff;
  }

  #lscreen,
  #printbtn,
  #guidebtn,
  #logoutBtn,
  #admbtn {
    display: none !important;
  }

  .app-shell {
    padding: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
  }

  .calendar-grid {
    font-size: 12px;
  }

  .stab {
    border: 1px solid #ccc;
  }
}


/* ===== UX PASS 1 ===== */
:root{
  --bg:#faf9f6;
  --surface:#ffffff;
  --surface-soft:#f6f3ec;
  --text:#1f1f1a;
  --muted:#6b6b63;
  --border:rgba(0,0,0,0.10);
  --border-strong:rgba(0,0,0,0.16);
  --green-50:#eaf3de;
  --green-100:#c0dd97;
  --green-600:#3b6d11;
  --green-700:#27500a;
  --blue-50:#e6f1fb;
  --blue-100:#b5d4f4;
  --blue-700:#185fa5;
  --amber-50:#faeeda;
  --amber-600:#854f0b;
  --red-50:#fcebeb;
  --red-100:#f7c1c1;
  --red-600:#a32d2d;
  --shadow:0 1px 4px rgba(0,0,0,0.08),0 10px 28px rgba(0,0,0,0.06);
  --radius:12px;
  --radius-lg:16px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: "DM Serif Display", Georgia, serif;
  letter-spacing: -0.02em;
}

.login-screen {
  min-height: 100vh;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(192,221,151,0.26), transparent 30%),
    radial-gradient(circle at top right, rgba(181,212,244,0.22), transparent 24%),
    var(--bg);
}

.login-card,
.card,
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}

.login-card {
  max-width: 420px;
  width: 100%;
  padding: 32px 28px;
}

.login-card h1 {
  font-size: 2rem;
  margin-bottom: 4px;
}

.muted,
.login-foot,
#daysite {
  color: var(--muted);
}

.login-tabs {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  margin: 22px 0 18px;
}

.ltab {
  font-weight: 600;
}

.ltab.on {
  background: var(--green-600);
  color: white;
}

.login-fields input,
.form-grid input,
.form-grid select {
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  padding: 12px 14px;
  background: var(--surface);
  font: inherit;
}

.login-fields input:focus,
.form-grid input:focus,
.form-grid select:focus {
  outline: none;
  border-color: var(--green-100);
  box-shadow: 0 0 0 3px rgba(192,221,151,0.28);
}

.btn {
  border-radius: 12px;
  font-weight: 600;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:active {
  transform: scale(.98);
}

.btn.primary {
  background: var(--green-600);
  border-color: var(--green-600);
}
.btn.primary:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}

.btn.secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn.secondary:hover {
  background: var(--surface-soft);
}

.btn.danger {
  background: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-100);
}

.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.topbar {
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.topbar h1 {
  font-size: 2rem;
}

.top-actions {
  gap: 10px;
}

.ubadge {
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
}
.ubadge.adm {
  background: var(--amber-50);
  color: var(--amber-600);
  border: 1px solid #f3cd8f;
}
.ubadge.vol {
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-100);
}

.card {
  padding: 18px;
  margin-bottom: 18px;
}

.card-head h2,
.calendar-head h2,
.modal-head h3 {
  font-family: "DM Serif Display", Georgia, serif;
}

.site-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stab {
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  padding: 10px 16px;
  font-weight: 600;
}
.stab:hover {
  background: var(--surface-soft);
  color: var(--text);
}
.stab.on {
  background: var(--green-600);
  color: white;
  border-color: var(--green-600);
}

.calendar-head {
  align-items: center;
  margin-bottom: 12px;
}

.calendar-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}
.legend-open { background: var(--green-100); }
.legend-full { background: #d3d1c7; }
.legend-you { background: var(--blue-100); }

.calendar-grid {
  gap: 8px;
}

.modal-card {
  padding: 22px;
}

.guide-text p + p {
  margin-top: 12px;
}

.chip.admin {
  background: var(--amber-50);
  color: var(--amber-600);
  border: 1px solid #f3cd8f;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 700;
}

body.admin-mode .card {
  scroll-margin-top: 24px;
}

@media (max-width: 720px) {
  .topbar {
    display: block;
  }

  .top-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
  }

  .login-card,
  .modal-card {
    padding: 22px 18px;
  }
}


/* ===== Add slots on calendar days ===== */
.vs-daycell {
  position: relative;
}

.vs-addslot-wrap {
  margin-top: 8px;
}

.vs-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px dashed var(--bords);
  background: transparent;
  color: var(--txtm);
  cursor: pointer;
}

.vs-addbtn:hover {
  background: var(--n50);
  color: var(--txt);
}

.print-report-title {
  display: none;
}

/* ===== Real report-style print view ===== */
@media print {
  @page {
    size: portrait;
    margin: 0.5in;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body {
    font-size: 11pt;
  }

  #lscreen,
  #guidebtn,
  #logoutBtn,
  #admbtn,
  #printbtn,
  .modal-overlay,
  .vs-addslot-wrap,
  .login-screen,
  .btn,
  .site-tabs {
    display: none !important;
  }

  #appshell {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar {
    border: 0 !important;
    margin: 0 0 12pt 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .topbar .top-actions,
  .topbar .muted,
  #ubadge {
    display: none !important;
  }

  .topbar h1 {
    font-size: 18pt !important;
    margin: 0 0 4pt 0 !important;
  }

  .print-report-title {
    display: block !important;
    font-size: 12pt;
    font-weight: 700;
    margin: 0 0 12pt 0;
    color: #000 !important;
  }

  .calendar-card,
  .card {
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .calendar-head {
    margin: 0 0 10pt 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .calendar-head .btn {
    display: none !important;
  }

  .calendar-head h2 {
    font-size: 16pt !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100%;
  }

  .calendar-legend {
    display: flex !important;
    gap: 14pt !important;
    margin: 0 0 10pt 0 !important;
    color: #222 !important;
  }

  .legend-dot {
    border: 1px solid #999 !important;
  }

  .legend-open {
    background: #d9ead3 !important;
  }

  .legend-full {
    background: #d9d9d9 !important;
  }

  .calendar-grid {
    gap: 4pt !important;
    page-break-inside: avoid;
  }

  .vs-daycell,
  .calendar-grid > * {
    min-height: 82pt !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .vs-empty {
    border-color: transparent !important;
    background: transparent !important;
  }
}


.truly-hidden {
  display: none !important;
}

.multi-dates {
  width: 100%;
  min-height: 86px;
  padding: 12px 14px;
  border-radius: var(--rad);
  border: 1px solid var(--bords);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--txt);
  background: var(--surf);
  resize: vertical;
  grid-column: 1 / -1;
}

.multi-dates:focus {
  outline: none;
  border-color: var(--g100);
}


/* ===== clean original workflow restore ===== */
.truly-hidden {
  display: none !important;
}

.print-report-title {
  display: none;
}

.multi-dates {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border-radius: var(--rad);
  border: 1px solid var(--bords);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--txt);
  background: var(--surf);
  resize: vertical;
  grid-column: 1 / -1;
}

.multi-dates:focus {
  outline: none;
  border-color: var(--g100);
}

.vs-daycell {
  position: relative;
}

.vs-addslot-wrap {
  margin-top: 8px;
}

.vs-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px dashed var(--bords);
  background: transparent;
  color: var(--txtm);
  cursor: pointer;
}

.vs-addbtn:hover {
  background: var(--n50);
  color: var(--txt);
}

@media print {
  @page {
    size: portrait;
    margin: 0.5in;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    font-size: 11pt;
  }

  #lscreen,
  #guidebtn,
  #logoutBtn,
  #admbtn,
  #printbtn,
  .modal-overlay,
  .site-tabs,
  .vs-addslot-wrap,
  #adminCreateCard,
  .btn {
    display: none !important;
  }

  #appshell {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar {
    border: 0 !important;
    margin: 0 0 10pt 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .topbar .top-actions,
  .topbar .muted,
  #ubadge {
    display: none !important;
  }

  .topbar h1 {
    font-size: 18pt !important;
    margin: 0 0 4pt 0 !important;
  }

  .print-report-title {
    display: block !important;
    font-size: 12pt;
    font-weight: 700;
    margin: 0 0 12pt 0;
    color: #000 !important;
  }

  .calendar-card,
  .card {
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .calendar-head {
    margin: 0 0 10pt 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .calendar-head .btn {
    display: none !important;
  }

  .calendar-head h2 {
    font-size: 16pt !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100%;
  }

  .calendar-legend {
    display: flex !important;
    gap: 14pt !important;
    margin: 0 0 10pt 0 !important;
    color: #222 !important;
  }

  .legend-dot {
    border: 1px solid #999 !important;
  }

  .legend-open {
    background: #d9ead3 !important;
  }

  .legend-full {
    background: #d9d9d9 !important;
  }

  .calendar-grid {
    gap: 4pt !important;
    page-break-inside: avoid;
  }

  .calendar-grid > *,
  .vs-daycell {
    min-height: 82pt !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}



/* Admin Panel restore */
.admin-panel-card{
  width:min(1200px, 96vw);
  max-height:80vh;
  overflow:auto;
  padding:20px;
}

.admin-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.admin-panel-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:10px;
}

.admin-panel-tab{
  border:none;
  background:transparent;
  padding:8px 10px;
  cursor:pointer;
  font:inherit;
  border-bottom:2px solid transparent;
  color:#444;
}

.admin-panel-tab.on{
  color:#222;
  font-weight:600;
  border-bottom-color:#3f7d1a;
}

.admin-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
}

.admin-section{
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#fff;
  padding:16px;
}

.admin-section h4{
  margin:0 0 8px 0;
}

.admin-sub{
  margin:0 0 12px 0;
  color:#666;
  font-size:.95rem;
}

.admin-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.admin-form-grid .full{
  grid-column:1 / -1;
}

.admin-time-list{
  display:grid;
  gap:8px;
  margin:10px 0 14px 0;
}

.admin-time-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid #ececec;
  border-radius:10px;
  background:#fafafa;
}

.admin-checkbox-list{
  display:grid;
  gap:8px;
  margin:10px 0 14px 0;
}

.admin-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
}

.admin-list{
  display:grid;
  gap:10px;
}

.admin-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #ececec;
  border-radius:12px;
  background:#fff;
}

.admin-list-main{
  min-width:0;
}

.admin-list-title{
  font-weight:600;
}

.admin-list-sub{
  color:#666;
  font-size:.94rem;
}

.admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

@media (max-width: 860px){
  .admin-grid{
    grid-template-columns:1fr;
  }

  .admin-form-grid{
    grid-template-columns:1fr;
  }
}

.modal-body{
  padding:16px 18px 18px 18px;
}


/* Guide modal specific cleanup */






/* Hard reset for guide modal content only */


/* Clean guide modal */


#guideov 
#guideov


/* Clean, scoped guide modal only */
#guideov .modal-card{
  width:min(560px, 92vw);
  max-width:560px;
  background:#fff;
  overflow:hidden;
}

#guideov .modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}

#guideov .guide-text{
  display:block;
  padding:16px 18px 18px 18px;
  margin:0;
  background:#fff;
}

#guideov .guide-text p{
  display:block;
  margin:0 0 12px 0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  line-height:1.45;
  width:auto;
  max-width:none;
}

#guideov .guide-text p:last-child{
  margin-bottom:0;
}


/* Clean guide copy modal */
#guideov .modal-card{
  width:min(560px, 92vw);
  max-width:560px;
  background:#fff;
  overflow:hidden;
}

#guideov .modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}

#guideov .guide-copy{
  display:block;
  padding:16px 18px 18px 18px;
  margin:0;
  background:#fff;
}

#guideov .guide-copy p{
  margin:0 0 12px 0;
  padding:0;
  line-height:1.45;
  background:transparent;
  border:0;
  box-shadow:none;
}

#guideov .guide-copy p:last-child{
  margin-bottom:0;
}



/* Fix rogue .row inside guide modal */
#guideov .row{
  display:block !important;
  width:auto !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
}



/* Guide-aligned signup and day modal polish */
.slot-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.slot-person-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
}

.inline-signup-form{
  margin-top:12px;
  padding:12px;
  border:1px solid #ececec;
  border-radius:12px;
  background:#fafafa;
}

.inline-signup-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}

.inline-signup-grid .full{
  grid-column:1 / -1;
}

.admin-panel-tabs{
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}

.admin-panel-head{
  position:sticky;
  top:0;
  background:#fff;
  z-index:3;
  padding-bottom:10px;
}

@media (max-width: 700px){
  .slot-head,
  .slot-person-row{
    flex-direction:column;
    align-items:stretch;
  }

  .inline-signup-grid{
    grid-template-columns:1fr;
  }
}




/* Go-live polish */
.login-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}

.ltab{
  width:100%;
  min-width:0;
}

.admin-checkbox-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
}

.admin-checkbox{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:start;
  gap:10px;
}

.admin-checkbox span{
  line-height:1.25;
  white-space:nowrap;
}

@media (max-width: 700px){
  .admin-checkbox-list{
    grid-template-columns:1fr;
  }
}



/* Access + Admins tab polish */
.admin-form-grid input[type="email"],
.admin-form-grid input[type="text"]{
  width:100%;
}


/* Site admin contact card */
.calendar-contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.site-admin-contact-box {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.52);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  color: inherit;
}

.site-admin-contact-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.site-admin-contact-site {
  color: rgba(148, 163, 184, 0.92);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.site-admin-contact-name {
  font-weight: 700;
  margin-bottom: 8px;
}

.site-admin-contact-box a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .calendar-contact-wrap {
    grid-template-columns: 1fr;
  }

  .site-admin-contact-box {
    max-width: 100%;
  }
}


.calendar-with-contact {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

.calendar-main {
  flex: 1 1 auto;
  min-width: 0;
}

#siteAdminContactMount {
  width: 280px;
  flex: 0 0 280px;
}

.site-contact-card {
  background: rgba(12,18,28,.88);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  position: sticky;
  top: 18px;
}

.site-contact-title {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
}

.site-contact-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.site-contact-row {
  margin-bottom: 8px;
  word-break: break-word;
}

.site-contact-help {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .82;
}

.site-contact-empty {
  opacity: .7;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .calendar-with-contact {
    flex-direction: column;
  }

  #siteAdminContactMount {
    width: 100%;
    flex: 1 1 auto;
  }

  .site-contact-card {
    position: relative;
    top: auto;
  }
}


/* Final site admin contact card polish */
.calendar-with-contact {
  display: grid !important;
  grid-template-columns: minmax(760px, 1fr) 260px;
  gap: 18px;
  align-items: start;
  width: 100%;
}

.calendar-main {
  min-width: 0;
}

#siteAdminContactMount {
  width: 260px;
}

.site-contact-card {
  background: #ffffff !important;
  color: #1f2933 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.site-contact-title {
  color: #2f6f12 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.site-contact-name {
  color: #111827 !important;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.site-contact-row,
.site-contact-empty,
.site-contact-help {
  color: #4b5563 !important;
}

@media (max-width: 1250px) {
  .calendar-with-contact {
    grid-template-columns: 1fr;
  }

  #siteAdminContactMount {
    width: 100%;
  }
}



/* =========================================================
   CLEAN CALENDAR + CONTACT LAYOUT
   ========================================================= */

.app-shell {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* stack vertically so calendar NEVER shrinks */
.calendar-with-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
}

/* calendar area */
.calendar-main {
  width: 100% !important;
  max-width: none !important;
}

/* actual calendar card */
.calendar-card {
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 1180px !important;
  margin: 0 !important;
}

/* actual day grid */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

/* prevent cell collapse */
.calendar-grid > * {
  min-width: 150px !important;
}

/* contact card BELOW calendar */
#siteAdminContactMount {
  width: 420px !important;
  max-width: 420px !important;
  margin-top: 0 !important;
}

.site-contact-card {
  width: 420px !important;
  max-width: 420px !important;
}

/* mobile */
@media (max-width: 1250px) {
  .calendar-card {
    min-width: 0 !important;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(110px, 1fr)) !important;
  }

  #siteAdminContactMount,
  .site-contact-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* Standalone contact card: no calendar wrapping */
.calendar-with-contact,
.calendar-main {
  display: contents !important;
}

.calendar-card {
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 0 !important;
}

.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
  gap: 12px !important;
}

.site-contact-mount-standalone,
#siteAdminContactMount {
  display: block !important;
  width: 420px !important;
  max-width: 420px !important;
  margin-top: 20px !important;
}

.site-contact-card {
  width: 420px !important;
  max-width: 420px !important;
}

@media (max-width: 900px) {
  .site-contact-mount-standalone,
  #siteAdminContactMount,
  .site-contact-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(95px, 1fr)) !important;
    overflow-x: auto;
  }
}


/* Remove old duplicate contact card permanently */
#siteAdminContactBox,
.site-admin-contact-box,
.calendar-contact-wrap {
  display: none !important;
}

/* Keep only the clean card below the full calendar */
.calendar-card {
  width: 1100px !important;
  max-width: 1100px !important;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(135px, 1fr)) !important;
}

#siteAdminContactMount {
  position: static !important;
  width: 420px !important;
  max-width: 420px !important;
  margin-top: 20px !important;
}

.site-contact-card {
  background: #fff !important;
  color: #1f2933 !important;
  width: 420px !important;
  max-width: 420px !important;
}


/* Final wide calendar with contact card beside it */
.app-shell {
  max-width: 1500px !important;
  width: min(1500px, 96vw) !important;
}

.calendar-with-contact {
  display: grid !important;
  grid-template-columns: 1220px 320px !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
}

.calendar-main {
  width: 1220px !important;
  max-width: 1220px !important;
}

.calendar-card {
  width: 1220px !important;
  max-width: 1220px !important;
  min-width: 1220px !important;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(145px, 1fr)) !important;
  gap: 12px !important;
}

#siteAdminContactMount {
  position: static !important;
  width: 320px !important;
  max-width: 320px !important;
  margin-top: 0 !important;
}

.site-contact-card {
  width: 320px !important;
  max-width: 320px !important;
  background: #fff !important;
  color: #1f2933 !important;
}

@media (max-width: 1450px) {
  .calendar-with-contact {
    grid-template-columns: 1fr !important;
  }

  .calendar-main,
  .calendar-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #siteAdminContactMount,
  .site-contact-card {
    width: 420px !important;
    max-width: 420px !important;
    margin-top: 18px !important;
  }
}


/* Spark final side-by-side calendar/contact layout */
.app-shell {
  max-width: 1560px !important;
  width: min(1560px, 96vw) !important;
}

.calendar-with-contact {
  display: grid !important;
  grid-template-columns: minmax(1150px, 1220px) 320px !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
}

.calendar-main {
  width: 100% !important;
  min-width: 0 !important;
}

.calendar-card {
  width: 100% !important;
  max-width: 1220px !important;
  min-width: 1150px !important;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(145px, 1fr)) !important;
  gap: 12px !important;
}

#siteAdminContactMount {
  width: 320px !important;
  max-width: 320px !important;
  margin-top: 0 !important;
}

.site-contact-card {
  width: 320px !important;
  max-width: 320px !important;
}

@media (max-width: 1500px) {
  .calendar-with-contact {
    grid-template-columns: 1fr !important;
  }

  .calendar-card {
    min-width: 0 !important;
  }

  #siteAdminContactMount,
  .site-contact-card {
    width: 420px !important;
    max-width: 420px !important;
    margin-top: 18px !important;
  }
}


/* Align Current Administrator buttons cleanly */
.admin-list-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.admin-list-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.admin-list-sub {
  overflow-wrap: anywhere !important;
}

.admin-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-top: 0 !important;
}

.admin-actions .btn {
  white-space: nowrap !important;
}

/* Restore QR polish */
#mobileQrBox.login-qr-box,
#mobileQrBox {
  margin: 12px auto 0 !important;
  text-align: center !important;
  max-width: 180px !important;
}

#mobileQrBox img {
  width: 96px !important;
  height: 96px !important;
  display: block !important;
  margin: 4px auto !important;
}


/* Login helper text alignment fix */
.login-card .muted,
.auth-card .muted,
.login-help,
.login-footer,
.login-card p,
.auth-card p {
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.45 !important;
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Exact login helper text fix */
.login-helper-text {
  display: block !important;
  width: 100% !important;
  max-width: 260px !important;
  margin: 10px auto 0 auto !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}


/* Unified login helper text */
.login-helper-text,
#adminHelp {
  display: block;
  max-width: 260px !important;
  margin: 10px auto 0 auto !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}


/* Three site-admin contact cards + call group */
#siteAdminContactMount {
  width: 340px !important;
  max-width: 340px !important;
}

.site-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-contact-mini-card,
.site-contact-card {
  width: 340px !important;
  max-width: 340px !important;
}

.site-contact-call-group {
  width: 340px;
  max-width: 340px;
  text-align: center;
  line-height: 1.45;
  color: #374151;
  background: #f8faf7;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

@media (max-width: 1500px) {
  #siteAdminContactMount,
  .site-contact-mini-card,
  .site-contact-card,
  .site-contact-call-group {
    width: 100% !important;
    max-width: 420px !important;
  }
}


/* Spark print column selector modal */
.spark-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spark-print-modal {
  background: #fff;
  color: #111827;
  width: 360px;
  max-width: calc(100vw - 32px);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.spark-print-modal h3 {
  margin: 0 0 8px;
}

.spark-print-modal p {
  margin: 0 0 14px;
  color: #6b7280;
}

.spark-print-modal label {
  display: block;
  margin: 10px 0;
  font-weight: 600;
}

.spark-print-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}


/* Final print checkbox alignment */
.spark-print-modal label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 !important;
  font-weight: 600 !important;
}

.spark-print-modal input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.admin-time-checks .admin-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 !important;
}


/* Absolute final checkbox alignment fixes */
.spark-print-modal label,
.spark-print-modal > label {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 !important;
  font-weight: 600 !important;
}

.spark-print-modal label input[type="checkbox"],
.spark-print-modal > label input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

.spark-time-checks,
.admin-time-checks {
  display: grid !important;
  gap: 8px !important;
}

.spark-time-check-row,
.admin-time-checks .admin-check {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 8px 0 !important;
}

.spark-time-check-row input,
.admin-time-checks .admin-check input {
  grid-column: 1 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

.spark-time-check-row span,
.admin-time-checks .admin-check span {
  grid-column: 2 !important;
}

/* Spark final Volunteer tab layout */
.spark-volunteer-management-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(520px,1fr) !important;
  gap:18px !important;
  align-items:start !important;
}

.spark-volunteer-list-panel{
  min-height:100% !important;
}

.volunteer-db-scroll{
  max-height:430px !important;
  overflow-y:auto !important;
  overflow-x:visible !important;
  padding-right:8px !important;
}

.volunteer-db-scroll .admin-list-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  align-items:center !important;
  gap:18px !important;
  padding:14px 16px !important;
}

.volunteer-db-scroll .admin-list-main{
  min-width:0 !important;
}

.volunteer-db-scroll .admin-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  min-width:max-content !important;
}

.volunteer-db-scroll .admin-actions .btn{
  white-space:nowrap !important;
}

.volunteer-db-scroll .admin-list-title,
.volunteer-db-scroll .admin-list-sub{
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  line-height:1.35 !important;
}

@media (max-width: 1100px){
  .spark-volunteer-management-grid{
    grid-template-columns:1fr !important;
  }

  .volunteer-db-scroll .admin-list-row{
    grid-template-columns:1fr !important;
  }

  .volunteer-db-scroll .admin-actions{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    min-width:0 !important;
  }
}

/* Spark final scoped Volunteer tab layout */
.spark-volunteer-management-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(520px,1fr);
  gap:18px;
  align-items:start;
}

.volunteer-db-scroll{
  display:grid !important;
  gap:12px !important;
  max-height:430px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
}

.volunteer-db-scroll .volunteer-db-row{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:14px 16px !important;
}

.volunteer-db-scroll .admin-list-main{
  display:block !important;
  width:100% !important;
  margin-bottom:12px !important;
}

.volunteer-db-scroll .admin-list-title,
.volunteer-db-scroll .admin-list-sub{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  writing-mode:horizontal-tb !important;
  line-height:1.35 !important;
}

.volunteer-db-scroll .volunteer-db-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin-top:10px !important;
}

.volunteer-db-scroll .volunteer-db-actions .btn{
  white-space:nowrap !important;
}

@media (max-width: 1100px){
  .spark-volunteer-management-grid{
    grid-template-columns:1fr;
  }

  .volunteer-db-scroll .volunteer-db-actions{
    justify-content:flex-start !important;
  }
}

/* Spark Directory workbook preview polish */
#sparkDirectoryPreviewModal .admin-list-row{
  display:block !important;
  padding:18px !important;
}

#sparkDirectoryPreviewModal .spark-preview-sheet-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:14px;
}

#sparkDirectoryPreviewModal .spark-preview-counts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#sparkDirectoryPreviewModal .spark-preview-count{
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:5px 10px;
  font-size:13px;
  color:inherit;
  opacity:.85;
}

#sparkDirectoryPreviewModal .spark-preview-columns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

#sparkDirectoryPreviewModal .spark-preview-column-pill{
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  opacity:.9;
}

#sparkDirectoryPreviewModal .spark-preview-table-wrap{
  margin-top:16px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
}

#sparkDirectoryPreviewModal table{
  width:max-content !important;
  min-width:100%;
  border-collapse:collapse;
  font-size:13px;
}

#sparkDirectoryPreviewModal th,
#sparkDirectoryPreviewModal td{
  min-width:130px;
  max-width:220px;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
  text-align:left;
  padding:9px 10px;
  vertical-align:top;
  border-bottom:1px solid rgba(148,163,184,.18);
}

#sparkDirectoryPreviewModal th{
  font-weight:700;
}


/* Spark Directory layout upgrade */
.admin-panel-tab[data-admin-tab="directory"].on ~ *{
  min-width:0;
}

.directory-dashboard{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.directory-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  margin-top:18px;
}

.directory-source-list .admin-list-row{
  display:block !important;
}

.directory-source-list .admin-list-title,
.directory-source-list .admin-list-sub{
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:1.35 !important;
}

@media (max-width: 1100px){
  .directory-dashboard{
    grid-template-columns:1fr;
  }
}