/* ============================================================
   Chop It Up Sandwiches — Custom Stylesheet
   Brand color: Dark Blue  |  Bootstrap 5 handles the grid.
   ============================================================ */

/* ------ Brand Color Palette (Dark Blue) ------ */
:root {
  --ciu-blue:        #1B3A6B;   /* Primary dark blue */
  --ciu-blue-dark:   #122850;   /* Darker — gradients, hover states */
  --ciu-blue-mid:    #2A5298;   /* Medium blue */
  --ciu-blue-light:  #4A78C8;   /* Light blue */
  --ciu-blue-pale:   #D6E4F7;   /* Pale blue tint — section backgrounds */
  --ciu-blue-xpale:  #EEF4FC;   /* Very pale — hover, zebra rows */
  --ciu-accent:      #F59E0B;   /* Amber/gold — progress bars on dark bg */
  --ciu-accent-warm: #E8601C;   /* Warm orange — secondary accent */
  --ciu-bg:          #F2F4F8;   /* Page background */
  --ciu-card-shadow: 0 2px 10px rgba(0,0,0,0.07);
  --ciu-radius:      0.85rem;
  --ciu-radius-sm:   0.5rem;
}

/* ------ Base ------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--ciu-bg);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #212529;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

button, [role="button"], label[for] { cursor: pointer; }


/* ============================================================
   HOME SCREEN
   ============================================================ */

.home-hero {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--ciu-blue) 0%, var(--ciu-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.home-card {
  background: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 460px;
  padding: 2.5rem 2rem 2rem;
}

.home-logo {
  width: 120px;
  height: 120px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
}
.home-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.home-title    { font-size:1.6rem; font-weight:800; color:#1a2540; line-height:1.2; margin-bottom:0.25rem; }
.home-subtitle { font-size:0.85rem; color:#6c757d; margin-bottom:0; }
.home-prompt   { font-size:1.05rem; font-weight:700; color:#343a40; margin-bottom:0.85rem; }

/* Verse of the Day card */
.verse-card {
  background: linear-gradient(135deg, var(--ciu-blue) 0%, var(--ciu-blue-mid) 100%);
  border-radius: var(--ciu-radius-sm);
  padding: 1rem 1.1rem 0.9rem;
  margin: 1rem 0 1.25rem;
  position: relative;
}
.verse-card::before {
  content: '\201C';
  position: absolute;
  top: -0.1rem;
  left: 0.75rem;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(255,255,255,0.18);
  font-family: Georgia, serif;
  pointer-events: none;
}
.verse-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ciu-accent);
  margin-bottom: 0.4rem;
}
.verse-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  font-style: italic;
  margin-bottom: 0.45rem;
}
.verse-ref {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

/* Employee buttons */
.btn-employee {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  margin-bottom: 0.6rem;
  background: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: var(--ciu-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  color: #343a40;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.1s;
}
.btn-employee:hover, .btn-employee:focus-visible {
  background: var(--ciu-blue-xpale);
  border-color: var(--ciu-blue);
  color: var(--ciu-blue-dark);
  box-shadow: 0 0 0 3px rgba(27,58,107,0.15);
  transform: translateY(-1px);
  outline: none;
}
.btn-employee:active { transform: translateY(0); }

.btn-employee .emp-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ciu-blue-pale);
  color: var(--ciu-blue);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.2rem; font-weight: 800;
  flex-shrink: 0;
}
.btn-employee .emp-name { display:block; font-weight:700; line-height:1.2; }
.btn-employee .emp-role { display:block; font-size:0.75rem; font-weight:400; color:#6c757d; }

.btn-manager-access {
  width: 100%;
  padding: 0.65rem;
  background: transparent;
  border: 1.5px solid #dee2e6;
  border-radius: var(--ciu-radius-sm);
  font-size: 0.85rem;
  color: #6c757d;
  transition: all 0.12s;
}
.btn-manager-access:hover { background:#f8f9fa; border-color:#adb5bd; color:#343a40; }


/* ============================================================
   NAVIGATION BAR
   ============================================================ */

.ciu-navbar {
  background: linear-gradient(135deg, var(--ciu-blue) 0%, var(--ciu-blue-dark) 100%);
  padding: 0.6rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ciu-navbar-brand { display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.navbar-logo-circle {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 2px;
}
.navbar-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.navbar-brand-text  { display:flex; flex-direction:column; line-height:1.1; }
.navbar-brand-name  { font-size:0.95rem; font-weight:800; color:#fff; }
.navbar-brand-tag   { font-size:0.65rem; color:rgba(255,255,255,0.65); }
.navbar-page-label  { font-size:0.8rem; color:rgba(255,255,255,0.8); font-weight:500; }


/* ============================================================
   PROGRESS HERO CARD (Employee Dashboard)
   ============================================================ */

.progress-hero {
  background: linear-gradient(135deg, var(--ciu-blue) 0%, var(--ciu-blue-dark) 100%);
  border-radius: var(--ciu-radius);
  color: #ffffff;
  padding: 1.25rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 4px 16px rgba(18,40,80,0.3);
}
.progress-hero .employee-welcome { font-size:1rem; opacity:0.85; margin:0; }
.progress-hero .employee-name    { font-size:1.35rem; font-weight:800; line-height:1.2; margin-bottom:0.1rem; }
.progress-hero .employee-date    { font-size:0.78rem; opacity:0.7; margin-bottom:1rem; }
.progress-hero .overall-label   { font-size:0.8rem; opacity:0.85; margin-bottom:0.2rem; }

.progress-hero .progress {
  height: 10px;
  background: rgba(255,255,255,0.22);
  border-radius: 99px;
  margin-bottom: 0.6rem;
}
.progress-hero .progress-bar {
  background: var(--ciu-accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.progress-hero .progress-stats { font-size:0.8rem; opacity:0.85; display:flex; gap:1.25rem; flex-wrap:wrap; }

.btn-change-employee {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-change-employee:hover { background:rgba(255,255,255,0.25); color:#fff; }


/* ============================================================
   ACCORDION SECTIONS
   ============================================================ */

.accordion-item {
  border: none;
  border-radius: var(--ciu-radius) !important;
  box-shadow: var(--ciu-card-shadow);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #ffffff;
}
.accordion-button {
  background: #ffffff;
  color: #212529;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 1rem 1.1rem;
  border-radius: var(--ciu-radius) !important;
  gap: 0.5rem;
}
.accordion-button:not(.collapsed) {
  background: var(--ciu-blue-xpale);
  color: var(--ciu-blue-dark);
  box-shadow: none;
  border-radius: var(--ciu-radius) var(--ciu-radius) 0 0 !important;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(27,58,107,0.2);
  outline: none;
}
.accordion-button::after { margin-left:auto; flex-shrink:0; }

.accordion-section-icon {
  width:30px; height:30px;
  border-radius:0.45rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.95rem; flex-shrink:0;
}
.accordion-body { padding:0; }

/* Section progress bar */
.section-progress-bar {
  padding: 0.5rem 1.1rem 0.4rem;
  background: #f8f9fc;
  border-bottom: 1px solid #eaecf0;
  display:flex; align-items:center; gap:0.75rem;
}
.section-progress-bar .progress {
  flex:1; height:5px; background:#dee2e6; border-radius:99px; margin:0;
}
.section-progress-bar .progress-bar {
  background: var(--ciu-blue-light);
  border-radius:99px; transition:width 0.3s ease;
}
.section-progress-text { font-size:0.72rem; color:#6c757d; white-space:nowrap; font-weight:500; }


/* ============================================================
   TASK ITEMS
   ============================================================ */

.task-item {
  display:flex; align-items:flex-start; gap:0.7rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.1s;
}
.task-item:last-child  { border-bottom:none; }
.task-item:hover       { background:#f8fafd; }
.task-item.is-complete { background:var(--ciu-blue-xpale); }
.task-item.is-priority { border-left:4px solid var(--ciu-accent); }

.task-checkbox {
  width:1.3em; height:1.3em;
  margin-top:0.1em;
  border:2px solid #adb5bd;
  border-radius:0.3em;
  cursor:pointer; flex-shrink:0;
  accent-color: var(--ciu-blue);
  transition: border-color 0.1s;
}
.task-checkbox:focus-visible { outline:3px solid rgba(27,58,107,0.35); outline-offset:2px; }
.task-label  { flex:1; min-width:0; cursor:pointer; }
.task-title  { font-weight:600; font-size:0.93rem; line-height:1.35; margin-bottom:0.1rem; color:#212529; }
.task-item.is-complete .task-title { text-decoration:line-through; color:#6c757d; }
.task-description { font-size:0.78rem; color:#6c757d; line-height:1.4; margin-bottom:0.25rem; }

.task-done-badge {
  display:inline-flex; align-items:center; gap:0.3rem;
  font-size:0.72rem; font-weight:500;
  color: var(--ciu-blue);
  background: var(--ciu-blue-pale);
  border-radius:99px; padding:0.15rem 0.6rem; margin-top:0.25rem;
}

.priority-required-badge {
  display:inline-block; font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em;
  padding:0.1rem 0.45rem; border-radius:99px;
  background:#fff3cd; color:#856404;
  margin-left:0.35rem; vertical-align:middle;
}
.priority-optional-badge {
  display:inline-block; font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em;
  padding:0.1rem 0.45rem; border-radius:99px;
  background:#e9ecef; color:#6c757d;
  margin-left:0.35rem; vertical-align:middle;
}
.priority-due-badge {
  display:inline-flex; align-items:center; gap:0.2rem;
  font-size:0.7rem; padding:0.1rem 0.45rem; border-radius:99px;
  background:#f8d7da; color:#842029;
  margin-left:0.3rem; vertical-align:middle;
}


/* ============================================================
   PREP LIST
   ============================================================ */

.prep-item {
  padding:1rem 1.1rem;
  border-bottom:1px solid #f0f2f5;
  transition:background 0.1s;
}
.prep-item:last-child   { border-bottom:none; }
.prep-item.is-complete  { background:var(--ciu-blue-xpale); }
.prep-item-name { font-weight:700; font-size:0.95rem; margin-bottom:0.1rem; }
.prep-item.is-complete .prep-item-name { color:var(--ciu-blue); }
.prep-requested  { font-size:0.78rem; color:#6c757d; margin-bottom:0.4rem; }
.prep-instructions {
  font-size:0.78rem; color:#6c757d;
  background:#f8f9fc; border-radius:0.4rem;
  padding:0.35rem 0.6rem; margin-bottom:0.5rem;
  border-left:2px solid #dee2e6;
}
.prep-done-info { font-size:0.78rem; color:#555; margin-top:0.25rem; }


/* ============================================================
   INVENTORY
   ============================================================ */

.inventory-subsection-label {
  padding:0.55rem 1.1rem;
  font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  color:#6c757d; background:#f8f9fc;
  border-bottom:1px solid #eaecf0;
}
.inventory-item {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.65rem 1.1rem;
  border-bottom:1px solid #f0f2f5;
  transition:background 0.1s;
}
.inventory-item:last-child { border-bottom:none; }
.inventory-item.low-stock  { background:#fff8e1; }
.inventory-item-name       { flex:1; min-width:0; font-weight:600; font-size:0.88rem; line-height:1.3; }
.inventory-item.low-stock .inventory-item-name { color:#92400e; }

.low-stock-tag {
  display:inline-flex; align-items:center; gap:0.2rem;
  font-size:0.68rem; font-weight:700;
  background:#fef3c7; color:#92400e;
  border:1px solid #fcd34d; border-radius:99px;
  padding:0.05rem 0.4rem; margin-left:0.3rem; vertical-align:middle;
}
.inventory-qty-input {
  width:72px; min-width:72px;
  padding:0.35rem 0.4rem;
  text-align:center; font-size:0.9rem; font-weight:600;
  border:1.5px solid #dee2e6; border-radius:0.45rem;
  background:#fff; color:#212529;
  transition:border-color 0.12s, box-shadow 0.12s;
}
.inventory-qty-input:focus {
  border-color:var(--ciu-blue);
  box-shadow:0 0 0 3px rgba(27,58,107,0.15);
  outline:none;
}
.inventory-unit     { font-size:0.75rem; color:#6c757d; min-width:50px; white-space:nowrap; }
.inventory-note-row { padding:0 1.1rem 0.6rem; border-bottom:1px solid #f0f2f5; }
.inventory-note-row:last-child { border-bottom:none; }

/* Category grouping label inside employee inventory form */
.inventory-category-label {
  padding: 0.3rem 1.1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ciu-blue);
  background: var(--ciu-blue-xpale);
  border-top: 1px solid var(--ciu-blue-pale);
  border-bottom: 1px solid var(--ciu-blue-pale);
}

/* ============================================================
   MANAGER INVENTORY SPREADSHEET
   ============================================================ */

.inv-sheet-summary {
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  color: #495057;
  background: var(--ciu-blue-xpale);
  border-bottom: 1px solid var(--ciu-blue-pale);
}

.inv-sheet-section-header {
  padding: 0.65rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--ciu-blue);
  border-bottom: 1px solid var(--ciu-blue-dark);
  margin-top: 1px;
}

.inv-sheet-cat-header {
  padding: 0.3rem 1.1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ciu-blue);
  background: var(--ciu-blue-xpale);
  border-bottom: 1px solid var(--ciu-blue-pale);
}

.inv-sheet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.88rem;
  flex-wrap: wrap;
  transition: background 0.1s;
}
.inv-sheet-row:hover { background: #f8fafd; }
.inv-sheet-row.inv-sheet-zero { background: #fff8e1; }

.inv-sheet-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #212529;
  line-height: 1.3;
}
.inv-sheet-zero .inv-sheet-name { color: #92400e; }

.inv-sheet-qty {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ciu-blue);
  min-width: 2.5rem;
  text-align: right;
}
.inv-sheet-qty.inv-sheet-blank {
  color: #adb5bd;
  font-weight: 400;
  font-size: 0.88rem;
}
.inv-sheet-zero .inv-sheet-qty { color: #dc3545; }

.inv-sheet-unit {
  font-size: 0.72rem;
  color: #6c757d;
  min-width: 40px;
}

.inv-sheet-note {
  width: 100%;
  font-size: 0.72rem;
  color: #6c757d;
  padding-left: 0.25rem;
  font-style: italic;
}


/* ============================================================
   EMPLOYEE NOTES
   ============================================================ */

.notes-textarea {
  width:100%; min-height:130px; resize:vertical;
  padding:0.75rem; font-size:0.9rem; line-height:1.5;
  border:1.5px solid #dee2e6; border-radius:var(--ciu-radius-sm);
  background:#fff; color:#212529; font-family:inherit;
  transition:border-color 0.12s, box-shadow 0.12s;
}
.notes-textarea:focus {
  border-color:var(--ciu-blue);
  box-shadow:0 0 0 3px rgba(27,58,107,0.12);
  outline:none;
}
.notes-saved-indicator { font-size:0.72rem; color:var(--ciu-blue); min-height:1em; }


/* ============================================================
   SUBMIT SECTION
   ============================================================ */

.submit-card {
  background:#fff; border-radius:var(--ciu-radius);
  box-shadow:var(--ciu-card-shadow);
  padding:1.5rem 1.25rem; margin-bottom:2rem;
}
.btn-submit-report {
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  width:100%; padding:1rem 1.5rem;
  background:var(--ciu-blue); color:#ffffff;
  font-size:1.05rem; font-weight:700;
  border:none; border-radius:var(--ciu-radius-sm);
  transition:background 0.15s, transform 0.1s, box-shadow 0.15s;
  line-height:1.3; cursor:pointer;
}
.btn-submit-report:hover:not(:disabled) {
  background:var(--ciu-blue-dark);
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(18,40,80,0.3);
  color:#ffffff;
}
.btn-submit-report:active:not(:disabled) { transform:translateY(0); }
.btn-submit-report:disabled { opacity:0.6; cursor:not-allowed; }

.submitted-success-card { text-align:center; padding:2rem 1.25rem; }
.submitted-icon { font-size:3.5rem; color:var(--ciu-blue-light); margin-bottom:0.75rem; display:block; }


/* ============================================================
   REPORT PREVIEW
   ============================================================ */

.report-preview {
  font-family:'Courier New','Lucida Console',monospace;
  font-size:0.75rem; line-height:1.5;
  background:#f8f9fc; border:1px solid #dee2e6;
  border-radius:var(--ciu-radius-sm);
  padding:1rem; max-height:300px; overflow-y:auto;
  white-space:pre-wrap; word-break:break-word; color:#212529;
}


/* ============================================================
   CSS OVERLAY MODAL SYSTEM
   Zero Bootstrap JS dependency.
   ============================================================ */

.ciu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ciu-overlay.active { display:flex; }

.ciu-overlay-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  width: 100%;
  max-width: 420px;
  animation: overlayPop 0.16s ease;
}
@keyframes overlayPop {
  from { transform:scale(0.93); opacity:0; }
  to   { transform:scale(1);    opacity:1; }
}

/* Confirm layout */
.overlay-header {
  padding: 1.25rem 1.25rem 0.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.overlay-title  { font-size:1.05rem; font-weight:700; margin:0; }
.overlay-body   { padding:0.5rem 1.25rem 1rem; color:#555; font-size:0.92rem; }
.overlay-footer {
  padding: 0 1.25rem 1.25rem;
  display:flex; gap:0.5rem; justify-content:flex-end;
}

/* Report overlay — wider, scrollable */
.report-overlay-card {
  max-width: 680px;
  max-height: 92vh;
  display:flex; flex-direction:column;
}
.report-overlay-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink: 0;
}
.report-overlay-header h5 { font-weight:700; font-size:1rem; margin:0; }
.report-overlay-body  { padding:1.1rem 1.25rem; overflow-y:auto; flex:1; }
.report-overlay-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid #eee;
  display:flex; gap:0.5rem; flex-wrap:wrap;
  flex-shrink: 0;
}

/* Overlay buttons */
.overlay-btn {
  padding: 0.55rem 1.1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem; font-weight:600;
  border: none; cursor:pointer;
  transition: opacity 0.15s, transform 0.1s;
  display:inline-flex; align-items:center; gap:0.3rem;
}
.overlay-btn:hover { opacity:0.88; }
.overlay-btn-cancel  { background:#f8f9fa; color:#495057; border:1.5px solid #dee2e6; }
.overlay-btn-cancel:hover { background:#e9ecef; }
.overlay-btn-danger  { background:#dc3545; color:#fff; }
.overlay-btn-warning { background:#ffc107; color:#212529; }
.overlay-btn-primary { background:var(--ciu-blue); color:#fff; }
.overlay-btn-primary:hover { background:var(--ciu-blue-dark); opacity:1; }
.overlay-btn-submit  {
  background:var(--ciu-blue); color:#fff;
  flex:1; justify-content:center;
  font-size:0.95rem; padding:0.7rem 1.25rem;
}
.overlay-btn-submit:hover    { background:var(--ciu-blue-dark); opacity:1; }
.overlay-btn-submit:disabled { opacity:0.6; cursor:not-allowed; }
.overlay-btn-back {
  background:#f8f9fa; color:#495057;
  border:1.5px solid #dee2e6;
  padding:0.7rem 1.25rem;
}
.overlay-close-btn {
  background:none; border:none; font-size:1.3rem; color:#6c757d;
  line-height:1; padding:0; cursor:pointer; flex-shrink:0;
}
.overlay-close-btn:hover { color:#212529; }


/* ============================================================
   MANAGER DASHBOARD
   ============================================================ */

/* PIN screen */
.pin-screen {
  min-height:100vh;
  background:linear-gradient(160deg, var(--ciu-blue) 0%, var(--ciu-blue-dark) 100%);
  display:flex; align-items:center; justify-content:center; padding:2rem 1rem;
}
.pin-card {
  background:#fff; border-radius:1.5rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
  width:100%; max-width:380px;
  padding:2.5rem 2rem; text-align:center;
}
.pin-icon  { font-size:3rem; margin-bottom:0.75rem; display:block; }
.pin-input {
  font-size:2.25rem; letter-spacing:0.55em; text-align:center;
  border:2px solid #dee2e6; border-radius:var(--ciu-radius-sm);
  padding:0.75rem 0.5rem; width:100%; color:#212529;
  transition:border-color 0.15s, box-shadow 0.15s;
  font-family:'Courier New',monospace;
}
.pin-input:focus {
  border-color:var(--ciu-blue);
  box-shadow:0 0 0 3px rgba(27,58,107,0.2); outline:none;
}
.pin-input.error { border-color:#dc3545; animation:shake 0.35s ease; }

@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-6px); }
  40%     { transform:translateX(6px); }
  60%     { transform:translateX(-4px); }
  80%     { transform:translateX(4px); }
}

/* Stat cards */
.stat-card {
  background:#fff; border-radius:var(--ciu-radius);
  box-shadow:var(--ciu-card-shadow);
  padding:1.1rem 1rem; text-align:center;
}
.stat-value { font-size:1.9rem; font-weight:800; color:var(--ciu-blue); line-height:1; margin-bottom:0.2rem; }
.stat-label { font-size:0.75rem; color:#6c757d; font-weight:500; }

/* Manager form cards */
.manager-form-card {
  background:#fff; border-radius:var(--ciu-radius);
  box-shadow:var(--ciu-card-shadow); margin-bottom:1rem; overflow:hidden;
}
.manager-form-card .card-header {
  background:var(--ciu-blue-xpale);
  border-bottom:1px solid var(--ciu-blue-pale);
  padding:0.85rem 1.1rem;
  font-weight:700; font-size:0.92rem; color:var(--ciu-blue-dark);
  display:flex; align-items:center; gap:0.5rem;
}
.manager-form-card .card-body { padding:1.1rem; }

/* Manager item rows */
/* Manager item rows */
.mgr-item-row {
  display:flex; align-items:flex-start; gap:0.5rem;
  padding:0.6rem 0; border-bottom:1px solid #f0f2f5;
}
.mgr-item-row:last-child { border-bottom:none; }
.mgr-item-name   { flex:1; min-width:0; font-weight:600; font-size:0.88rem; line-height:1.35; }
.mgr-item-detail { font-weight:400; font-size:0.78rem; color:#6c757d; margin-top:0.1rem; }
.empty-list-msg  { font-size:0.82rem; color:#adb5bd; padding:0.5rem 0; font-style:italic; }

/* Prep item multi-row builder */
.prep-builder-headers {
  display: grid;
  grid-template-columns: 2fr 1.1fr 2fr 2rem;
  gap: 0.4rem;
  padding: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 0.4rem;
}
.prep-builder-row {
  display: grid;
  grid-template-columns: 2fr 1.1fr 2fr 2rem;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.prep-row-del-btn {
  background: none;
  border: none;
  color: #adb5bd;
  padding: 0.2rem 0.3rem;
  line-height: 1;
  border-radius: var(--ciu-radius-sm);
  transition: color 0.12s, background 0.12s;
}
.prep-row-del-btn:hover { color: #dc3545; background: #fce8e8; }

@media (max-width: 560px) {
  .prep-builder-headers { display: none; }
  .prep-builder-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.3rem;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .prep-row-name   { grid-column: 1 / 2; }
  .prep-row-amount { grid-column: 2 / 3; }
  .prep-row-instr  { grid-column: 1 / 3; }
  .prep-row-del-btn { grid-column: 2 / 3; justify-self: end; grid-row: 1; }
}

/* Opening / Closing checklist summary cards */
.mgr-checklist-summary {
  background: var(--ciu-blue-xpale);
  border: 1px solid var(--ciu-blue-pale);
  border-radius: var(--ciu-radius-sm);
  padding: 0.65rem 0.85rem;
}
.checklist-summary-detail {
  font-size: 0.78rem;
  color: #495057;
}
.checklist-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 0.35rem;
}
.checklist-status-done    { background: #d1f7e8; color: #0d6e3f; }
.checklist-status-partial { background: #fff3cd; color: #856404; }
.checklist-status-na      { background: #e9ecef; color: #6c757d; }


/* ============================================================
   GENERAL UTILITY
   ============================================================ */

.ciu-card {
  background:#fff; border-radius:var(--ciu-radius);
  box-shadow:var(--ciu-card-shadow); overflow:hidden;
}

/* ============================================================
   BOOTSTRAP OVERRIDES — swap green → dark blue
   ============================================================ */

.form-control, .form-select {
  font-size:1rem;
  border-color:#dee2e6;
  border-radius:var(--ciu-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color:var(--ciu-blue);
  box-shadow:0 0 0 3px rgba(27,58,107,0.15);
}

.btn { border-radius:var(--ciu-radius-sm); font-weight:600; }

.btn-success               { background-color:var(--ciu-blue) !important; border-color:var(--ciu-blue) !important; }
.btn-success:hover,
.btn-success:focus         { background-color:var(--ciu-blue-dark) !important; border-color:var(--ciu-blue-dark) !important; }
.btn-outline-success       { color:var(--ciu-blue) !important; border-color:var(--ciu-blue) !important; }
.btn-outline-success:hover { background-color:var(--ciu-blue) !important; color:#fff !important; }

.btn-primary               { background-color:var(--ciu-blue) !important; border-color:var(--ciu-blue) !important; }
.btn-primary:hover         { background-color:var(--ciu-blue-dark) !important; border-color:var(--ciu-blue-dark) !important; }

.text-success { color:var(--ciu-blue) !important; }
.bg-success   { background-color:var(--ciu-blue) !important; }
.progress-bar.bg-success { background-color:var(--ciu-blue-light) !important; }

/* Toast container above overlays */
.toast-container { z-index:10000; }

/* ============================================================
   ACCESSIBILITY & MOBILE
   ============================================================ */

.sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

@media (max-width:576px) {
  .btn { min-height:44px; }
  .task-checkbox { width:1.5em; height:1.5em; }
  .home-card { padding:2rem 1.25rem 1.5rem; }
  .pin-card  { padding:2rem 1.5rem; }
  .report-overlay-footer { flex-direction:column; }
  .overlay-btn-submit, .overlay-btn-back { width:100%; }
}