/* ============================================================
   BROZ Attendance — Modern Redesign v2.0
   Design: Refined Corporate Glass
   ============================================================ */

/* === Design Tokens === */
:root {
  --broz-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --broz-bg: #f8f9fb;
  --broz-surface: #ffffff;
  --broz-surface-hover: #f1f5f9;
  --broz-text: #0f172a;
  --broz-text-secondary: #64748b;
  --broz-text-muted: #94a3b8;
  --broz-border: #e2e8f0;
  --broz-border-light: #f1f5f9;
  --broz-primary: #2563eb;
  --broz-primary-hover: #1d4ed8;
  --broz-primary-soft: rgba(37, 99, 235, 0.08);
  --broz-shadow-sm: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --broz-shadow-md: 0 4px 16px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --broz-shadow-lg: 0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --broz-shadow-xl: 0 24px 64px rgba(15,23,42,.14), 0 8px 20px rgba(15,23,42,.06);
  --broz-radius-sm: 8px;
  --broz-radius-md: 12px;
  --broz-radius-lg: 16px;
  --broz-radius-xl: 20px;
  --broz-radius-pill: 999px;
  --broz-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --broz-name-col: clamp(120px, 22vw, 200px);
}

/* === Base === */
.broz-wrap {
  font: 14px/1.5 var(--broz-font);
  color: var(--broz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Board === */
.broz-wrap .board {
  max-width: 1020px;
  margin: 24px auto;
  background: var(--broz-surface);
  border-radius: var(--broz-radius-xl);
  box-shadow: var(--broz-shadow-md);
  padding: 20px;
  border: 1px solid var(--broz-border);
}

.broz-wrap .sticky {
  position: sticky; top: 0;
  background: var(--broz-surface);
  z-index: 5; padding-bottom: 12px; margin-bottom: 4px;
}

/* === Toolbar === */
.broz-wrap .tools-left, .broz-wrap .tools-right { display: flex; gap: 8px; align-items: center; }
.broz-wrap .tools-left { float: left; }
.broz-wrap .tools-right { float: right; }

/* === Buttons === */
.broz-wrap .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--broz-border); background: var(--broz-surface);
  padding: 7px 14px; border-radius: var(--broz-radius-sm); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--broz-text);
  transition: all var(--broz-transition); white-space: nowrap; user-select: none; line-height: 1.2;
}
.broz-wrap .btn:hover { background: var(--broz-surface-hover); border-color: #cbd5e1; box-shadow: var(--broz-shadow-sm); transform: translateY(-0.5px); }
.broz-wrap .btn:active { transform: translateY(0); box-shadow: none; }
.broz-wrap .btn:focus-visible { outline: 2px solid var(--broz-primary); outline-offset: 2px; }
.broz-wrap .btn.primary { background: var(--broz-primary); color: #fff; border-color: var(--broz-primary); }
.broz-wrap .btn.primary:hover { background: var(--broz-primary-hover); border-color: var(--broz-primary-hover); }
.broz-wrap .btn.nav { width: 36px; height: 36px; padding: 0; border-radius: var(--broz-radius-sm); }

/* === Date inputs === */
.broz-wrap .date-wrap input.date-ui {
  width: 128px; padding: 7px 10px; border: 1px solid var(--broz-border);
  border-radius: var(--broz-radius-sm); font: inherit; font-size: 13px;
  color: var(--broz-text); transition: border-color var(--broz-transition), box-shadow var(--broz-transition);
  background: var(--broz-surface);
}
.broz-wrap .date-wrap input.date-ui:focus { border-color: var(--broz-primary); box-shadow: 0 0 0 3px var(--broz-primary-soft); outline: none; }
.broz-wrap .range { padding: 7px 10px; border: 1px solid var(--broz-border); border-radius: var(--broz-radius-sm); font: inherit; font-size: 13px; }

/* === Grid header === */
.broz-wrap .grid-head {
  display: flex; gap: 8px; padding: 8px 0 10px;
  padding-left: calc(var(--broz-name-col) + 8px) !important; overflow-x: auto;
}
.broz-wrap .day-head { min-width: 34px; text-align: center; color: var(--broz-text-muted); font-size: 11px; font-weight: 500; }

/* === Sections === */
.broz-wrap .section { margin-top: 8px; border-top: 1px solid var(--broz-border-light); padding-top: 8px; }
.broz-wrap h3 { margin: 6px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--broz-text-muted); }

/* === Employee rows === */
.broz-wrap .row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; transition: background var(--broz-transition); border-radius: var(--broz-radius-sm); }

/* === Name column === */
.broz-wrap .row-name {
  flex: 0 0 var(--broz-name-col) !important; width: var(--broz-name-col) !important;
  max-width: var(--broz-name-col) !important; min-width: 110px !important;
  padding: 8px 12px; background: var(--broz-bg); border: 1px solid var(--broz-border-light);
  border-radius: var(--broz-radius-md); white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: block; text-align: left; cursor: pointer; transition: all var(--broz-transition);
}
.broz-wrap .row-name:hover { background: var(--broz-primary-soft); border-color: rgba(37,99,235,.15); }
.broz-wrap .row-name .last { display: block; font-weight: 700; font-size: 13px; line-height: 1.15; color: var(--broz-text); }
.broz-wrap .row-name .first { display: block; font-size: 12px; line-height: 1.15; color: var(--broz-text-secondary); margin-top: 1px; }

/* === Cells scrollable area === */
/* touch-action: pan-y allows native vertical page scrolling while letting
   our Pointer-Events drag-scroll handler claim horizontal motion. */
.broz-wrap .cells {
  display: flex; gap: 12px; overflow-x: auto;
  cursor: grab; -ms-overflow-style: none; scrollbar-width: none;
  touch-action: pan-y; padding-right: 6px;
  /* Avoid the browser's native double-tap-to-zoom delay swallowing taps. */
  -webkit-tap-highlight-color: transparent;
  /* Smoother scrolling on iOS. */
  -webkit-overflow-scrolling: touch;
  /* While dragging we set scrollLeft programmatically – disable any momentum/snap
     interference so the drag tracks the cursor 1:1. */
  overscroll-behavior-x: contain;
}
.broz-wrap .cells.dragging { cursor: grabbing; user-select: none; }
.broz-wrap .cells.dragging * { pointer-events: none; }
.broz-wrap .cells::-webkit-scrollbar { display: none; }

/* === Day cell === */
.broz-wrap .cells .cell {
  min-width: 48px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; border-radius: var(--broz-radius-sm); padding: 3px 0;
  transition: background var(--broz-transition);
}
.broz-wrap .cells .cell:hover { background: rgba(37,99,235,.04); }
.broz-wrap .cells .cell.weekend { background: var(--broz-bg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.03); }
.broz-wrap .cells .cell.weekend:hover { background: #eef2f7; }
.broz-wrap .cells .cell.readonly { cursor: not-allowed; opacity: .85; }
.broz-wrap .cells .cell.readonly .pill { pointer-events: none; }

/* Day meta */
.broz-wrap .cells .cell .meta { display: flex; flex-direction: column; align-items: center; line-height: 1.1; margin-bottom: 4px; }
.broz-wrap .cells .cell .meta .dnum { font-weight: 700; font-size: 12px; color: var(--broz-text); }
.broz-wrap .cells .cell .meta .dow { font-size: 10px; font-weight: 500; color: var(--broz-text-muted); }
.broz-wrap .cells .cell.weekend .meta .dow { color: var(--broz-text-secondary); }

/* === Status pills === */
.broz-wrap .pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: var(--broz-radius-pill); font-size: 11px; font-weight: 700;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  letter-spacing: 0.02em;
}
.broz-wrap .pill:hover { transform: scale(1.04); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.broz-wrap .pill:active { transform: scale(0.97); }
.broz-wrap .pill.dot { background: var(--broz-border); color: transparent; width: 30px; padding: 0; }
.broz-wrap .pill.dot:hover { background: #cbd5e1; }

/* Default status colors */
.broz-wrap .pill.P   { background: #16a34a; color: #fff; }
.broz-wrap .pill.HO  { background: #0ea5e9; color: #fff; }
.broz-wrap .pill.DOV { background: #f59e0b; color: #fff; }
.broz-wrap .pill.PN  { background: #ef4444; color: #fff; }
.broz-wrap .pill.LEK { background: #a855f7; color: #fff; }
.broz-wrap .pill.NV  { background: #10b981; color: #fff; }
.broz-wrap .pill.SC  { background: #0ea5e9; color: #fff; }

/* Synthetic state-holiday pill – not in STATUS_DEFS, rendered for any
   day where HOLIDAYS[iso] is set and no override is stored. */
.broz-wrap .pill.SV,
#broz-emp-modal .pill.SV { background: #dc2626; color: #fff; }
.broz-wrap .pill.split .half.SV,
#broz-emp-modal .pill.split .half.SV { background: #dc2626; color: #fff; }

.broz-wrap .cells .cell .pill { margin-top: 2px; }

/* Weekend grey pill */
.broz-wrap .pill.NONE, #broz-emp-modal .pill.NONE { background: #cbd5e1; color: #475569; width: 30px; padding: 0; }

/* === Split pills === */
.broz-wrap .pill.split, #broz-emp-modal .pill.split { display: flex; padding: 0; overflow: hidden; border-radius: var(--broz-radius-pill); height: 30px; max-width: 100%; width: 46px; }
.broz-wrap .cell .pill.split, #broz-emp-modal .cell .pill.split { width: 46px; }
.broz-wrap .pill.split .half, #broz-emp-modal .pill.split .half { flex: 1 1 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; line-height: 1; padding: 0 2px; height: 30px; min-width: 0; white-space: nowrap; }
.broz-wrap .pill.split .half.a, #broz-emp-modal .pill.split .half.a { border-right: 1px solid rgba(255,255,255,.3); }

/* === Legend === */
.broz-wrap .legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 14px; color: var(--broz-text-secondary); font-size: 13px; }
.broz-wrap .legend .pill { width: auto; min-width: 24px; height: 24px; padding: 0 7px; font-size: 10px; }

/* Vacation counter */
.broz-wrap .vac-info { font-weight: 600; font-size: 12px; color: var(--broz-text-muted); margin-left: 8px; }


/* ============================================================
   MODALS
   ============================================================ */

.broz-wrap .modal, .modal {
  position: fixed; inset: 0; display: none; align-items: center;
  justify-content: center; padding: 24px 16px; z-index: 2147483645;
}
.broz-wrap .modal.show, .modal.show { display: flex !important; }
.modal[aria-hidden="true"] { display: none !important; }

/* Backdrop */
.broz-wrap .modal > .backdrop, .modal > .backdrop, .broz-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 2147483646; pointer-events: auto;
}

/* Sheet */
.broz-wrap .modal .sheet, .modal > .sheet {
  background: var(--broz-surface) !important; position: relative; z-index: 2147483647;
  border-radius: var(--broz-radius-xl); box-shadow: var(--broz-shadow-xl);
  width: min(960px, 96vw); max-height: min(90vh, 900px); overflow: auto;
  pointer-events: auto; display: flex; flex-direction: column;
}
.modal .sheet > header { position: sticky; top: 0; background: var(--broz-surface); z-index: 1; }
.modal .sheet > footer { position: sticky; bottom: 0; background: var(--broz-surface); z-index: 1; }

.modal.broz-open { position: fixed; inset: 0; display: flex !important; align-items: center; justify-content: center; z-index: 2147483647; }
.modal.broz-open .sheet { background: var(--broz-surface); border-radius: var(--broz-radius-xl); box-shadow: var(--broz-shadow-xl); width: min(960px,96vw); max-height: 88vh; overflow: auto; }
body.broz-has-modal { overflow: hidden; }

#broz-exp-modal.broz-open, #broz-team-modal.broz-open { position: fixed; inset: 0; display: flex !important; align-items: center; justify-content: center; z-index: 2147483647; }
#broz-exp-modal .sheet, #broz-team-modal .sheet { background: var(--broz-surface); border-radius: var(--broz-radius-xl); box-shadow: var(--broz-shadow-xl); width: min(960px,96vw); max-height: 88vh; overflow: auto; padding: 0; }

.broz-wrap { position: relative; z-index: 2147483645; isolation: isolate; }
.broz-wrap, .broz-wrap * { pointer-events: auto !important; }


/* ============================================================
   EXPORT MODAL
   ============================================================ */

#broz-exp-modal header, #broz-exp-modal .sheet header.head,
#broz-exp-modal .sheet header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--broz-border);
  background: var(--broz-surface); position: sticky; top: 0; z-index: 3;
}
#broz-exp-modal header strong, #broz-exp-modal .sheet header.head strong { font-size: 16px; font-weight: 700; }
#broz-exp-modal header .btn.close, #broz-exp-modal .sheet header.head .btn { border: 1px solid var(--broz-border); border-radius: var(--broz-radius-sm); background: var(--broz-surface); }
#broz-exp-modal .body, #broz-exp-modal .modal .body { padding: 14px 18px; max-height: 60vh; overflow: auto; }
#broz-exp-modal .exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
@media (max-width: 600px) { #broz-exp-modal .exp-grid { grid-template-columns: 1fr; } }

#broz-exp-modal footer, #broz-exp-modal .sheet footer {
  display: flex; gap: 8px; justify-content: flex-start; padding: 12px 18px;
  border-top: 1px solid var(--broz-border); background: var(--broz-surface);
  position: sticky; bottom: 0; z-index: 3;
}
#broz-exp-modal footer .btn, #broz-exp-modal .sheet footer .btn { border-radius: var(--broz-radius-sm); padding: 8px 14px; font-weight: 700; }
#broz-exp-modal footer .btn.primary, #broz-exp-modal .sheet footer .btn.primary { background: var(--broz-primary); border-color: var(--broz-primary); color: #fff; }

/* Team search */
.tm-search { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.tm-search input[type=search] { flex: 1; padding: 8px 12px; border: 1px solid var(--broz-border); border-radius: var(--broz-radius-sm); font: inherit; font-size: 13px; transition: border-color var(--broz-transition), box-shadow var(--broz-transition); }
.tm-search input[type=search]:focus { border-color: var(--broz-primary); box-shadow: 0 0 0 3px var(--broz-primary-soft); outline: none; }
#broz-exp-modal .tm-search { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
#broz-exp-modal .exp-scope label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 13px; }

/* Team list */
.tm-list .tm-item, #broz-exp-modal .tm-list .tm-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--broz-border-light); align-items: center; transition: background var(--broz-transition); }
.tm-list .tm-item:hover { background: var(--broz-bg); }
.tm-list .tm-item .name { font-weight: 600; }
.tm-list .tm-item .email { color: var(--broz-text-muted); font-size: 12px; }
#broz-exp-modal .tm-list .tm-item .name { display: none; }
#broz-exp-modal .tm-list .tm-item .nm .last, #broz-exp-modal .tm-list label .nm .last { display: block; font-weight: 700; line-height: 1.15; }
#broz-exp-modal .tm-list .tm-item .nm .first, #broz-exp-modal .tm-list label .nm .first { display: block; opacity: .75; font-size: .92em; line-height: 1.15; }

#broz-exp-modal .exp-acts { display: flex; gap: 8px; margin-top: 12px; }
#broz-exp-modal .exp-acts .btn { border-radius: var(--broz-radius-sm); padding: 8px 14px; border: 1px solid var(--broz-border); background: var(--broz-surface); font-weight: 700; }
#broz-exp-modal .exp-acts .btn.primary { background: var(--broz-primary); border-color: var(--broz-primary); color: #fff; }


/* ============================================================
   EMPLOYEE MODAL
   ============================================================ */

#broz-emp-modal .sheet {
  background: var(--broz-surface); border-radius: var(--broz-radius-xl);
  width: min(1000px, 97vw); max-height: 90vh; overflow: auto;
  box-shadow: var(--broz-shadow-xl);
}
#broz-emp-modal .body { padding: 16px 18px; }

#broz-emp-modal .sheet header.emp-head {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px;
  align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--broz-border);
  background: var(--broz-surface); position: sticky; top: 0; z-index: 5;
}
#broz-emp-modal .emp-head .who .last { display: block; font-weight: 700; font-size: 15px; line-height: 1.15; }
#broz-emp-modal .emp-head .who .first { display: block; color: var(--broz-text-secondary); font-size: 13px; line-height: 1.15; }
#broz-emp-modal .emp-name { display: flex; gap: 6px; }
#broz-emp-modal .emp-head .period { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
#broz-emp-modal .emp-head .period .month-label { text-transform: none; font-weight: 700; font-size: 14px; }
#broz-emp-modal .emp-head .h-acts { display: flex; gap: 8px; align-items: center; }

#broz-emp-modal .emp-head .h-acts .btn {
  appearance: none; border: 1px solid var(--broz-border); background: var(--broz-surface);
  padding: 7px 12px; border-radius: var(--broz-radius-sm); font-weight: 600; font-size: 13px;
  line-height: 1; transition: all var(--broz-transition); cursor: pointer; user-select: none;
}
#broz-emp-modal .emp-head .h-acts .btn:hover { transform: translateY(-1px); box-shadow: var(--broz-shadow-sm); background: var(--broz-surface-hover); border-color: #cbd5e1; }
#broz-emp-modal .emp-head .h-acts .btn:active { transform: translateY(0); box-shadow: none; }
#broz-emp-modal .emp-head .h-acts .btn:focus-visible { outline: 2px solid var(--broz-primary); outline-offset: 2px; }
#broz-emp-modal .emp-head .h-acts .btn.primary { background: var(--broz-primary); border-color: var(--broz-primary); color: #fff; }
#broz-emp-modal .emp-head .h-acts .btn.primary:hover { background: var(--broz-primary-hover); }

/* Calendar grid */
#broz-emp-modal .emp-cal-grid { display: block; }
#broz-emp-modal .cal-head { display: none; }
#broz-emp-modal .cells { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 8px; }
#broz-emp-modal .cell {
  min-height: 96px; padding: 10px 12px; border-radius: var(--broz-radius-md);
  background: var(--broz-surface); border: 1px solid var(--broz-border);
  display: flex; flex-direction: column; justify-content: flex-start;
  transition: all var(--broz-transition);
}
#broz-emp-modal .cell:hover { border-color: #cbd5e1; box-shadow: var(--broz-shadow-sm); }
#broz-emp-modal .cell.weekend { background: var(--broz-bg); box-shadow: none; border-color: var(--broz-border-light); }
#broz-emp-modal .cell.blank { background: #fafbfc; border: 1px dashed var(--broz-border); }

#broz-emp-modal .cell .meta { line-height: 1.1; margin-bottom: 6px; color: var(--broz-text-secondary); display: flex; align-items: flex-start; justify-content: space-between; }
#broz-emp-modal .cell .dnum { font-weight: 700; font-size: 14px; color: var(--broz-text); }
#broz-emp-modal .cell .dow { font-size: 12px; color: var(--broz-text-secondary); }
#broz-emp-modal .cell .pill {
  margin-top: auto; width: auto; min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: var(--broz-radius-pill); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; line-height: 1;
  white-space: nowrap; transition: transform 120ms ease;
}
#broz-emp-modal .cell .pill:hover { transform: scale(1.06); }
#broz-emp-modal .cell .pill.dot { background: #e6edf5; width: 36px; padding: 0; }
#broz-emp-modal .cell .pill.P   { background: #16a34a; color: #fff; }
#broz-emp-modal .cell .pill.HO  { background: #0ea5e9; color: #fff; }
#broz-emp-modal .cell .pill.DOV { background: #f59e0b; color: #fff; }
#broz-emp-modal .cell .pill.PN  { background: #ef4444; color: #fff; }
#broz-emp-modal .cell .pill.LEK { background: #a855f7; color: #fff; }
#broz-emp-modal .cell .pill.NV  { background: #10b981; color: #fff; }
#broz-emp-modal .cell .pill.SC  { background: #0ea5e9; color: #fff; }

/* Stats */
#broz-emp-modal .emp-stats { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--broz-border); border-radius: var(--broz-radius-md); background: var(--broz-bg); }
#broz-emp-modal .emp-stats-title { font-weight: 700; margin: 0 0 8px; font-size: 13px; }
#broz-emp-modal .emp-stats-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
#broz-emp-modal .emp-stat { display: inline-flex; align-items: center; gap: 6px; }
#broz-emp-modal .emp-stat .pill { width: auto; min-width: 24px; height: 24px; padding: 0 7px; font-size: 10px; }
#broz-emp-modal .emp-stat .n { font-weight: 700; }
#broz-emp-modal .sheet footer { display: none; }


/* ============================================================
   DATE OVERLAY POSITIONING
   ============================================================ */

.date-overlay-wrap { position: relative; display: inline-block; }
.date-overlay-wrap > input.overlay-main { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: auto; z-index: 5; }
.overlay-date { position: absolute; left: -9999px; top: auto; width: 0; height: 0; opacity: 0; pointer-events: auto; z-index: 1; }
.exp-from-ui, .exp-to-ui { position: relative; }
.exp-from-ui + .overlay-date, .exp-to-ui + .overlay-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: auto; z-index: 5; }
.broz-date-wrap > input.overlay-date { position: absolute; width: 0; height: 0; padding: 0; border: 0; pointer-events: none !important; }
.modal .broz-date-wrap { position: relative; }
.modal .broz-date-wrap input.overlay-date, .modal .broz-date-wrap input.date-real { position: absolute; left: 0; top: calc(100% + 6px); width: 1px; height: 1px; opacity: 0; pointer-events: auto; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  #broz-emp-modal .emp-name { display: block; }
  #broz-emp-modal .emp-name .last { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
  #broz-emp-modal .emp-name .first { display: block; font-size: .9rem; opacity: .75; margin-top: 2px; line-height: 1.1; }
}
@media (max-width: 720px) {
  #broz-emp-modal .sheet header.emp-head { grid-template-columns: 1fr auto; }
  #broz-emp-modal .emp-head .who, #broz-emp-modal .emp-head .period, #broz-emp-modal .emp-head .h-acts { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #broz-emp-modal .sheet { width: min(960px, 98vw) !important; padding: 0 !important; }
  #broz-emp-modal .body { padding: 12px; }
  #broz-emp-modal .cells { grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 5px; }
  #broz-emp-modal .cell { min-height: 72px; padding: 6px; border-radius: var(--broz-radius-sm); }
  #broz-emp-modal .cell .dnum { font-size: 12px; }
  #broz-emp-modal .cell .dow { font-size: 10px; }
  #broz-emp-modal .cell .pill { width: 28px; height: 28px; min-width: 28px; font-size: 11px; padding: 0; }
}
@media (max-width: 600px) {
  .broz-wrap .board { padding: 14px 12px; border-radius: var(--broz-radius-lg); }
  .broz-wrap .board-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date range" "nav nav" "acts acts"; gap: 8px; align-items: center; }
  .broz-wrap .board-head .tools-left { display: contents; }
  .broz-wrap .board-head .date-wrap { grid-area: date; }
  .broz-wrap .board-head #broz-range { grid-area: range; justify-self: end; }
  .broz-wrap .board-head .seg.nav { grid-area: nav; display: flex; gap: 8px; }
  .broz-wrap .board-head .tools-right { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .broz-wrap .board-head .tools-right .btn { width: 100%; }
  .broz-wrap .broz-date-wrap { display: flex; align-items: center; gap: 8px; }
  .broz-wrap .broz-date-wrap .date-ui { width: 100%; max-width: 160px; }
  .broz-wrap .btn.nav { min-width: 38px; height: 38px; padding: 0; }
}


/* ============================================================
   LOCKED MONTH (after end-of-month + grace period)
   ============================================================ */

/* Main grid: subtle gray-out + diagonal stripe + lock cursor + small lock icon. */
.broz-wrap .cells .cell.locked:not(.holiday) {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(15,23,42,.025) 0 6px,
      rgba(15,23,42,.05)  6px 12px
    );
}
.broz-wrap .cells .cell.locked .pill {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.35);
}
.broz-wrap .cells .cell.locked .meta .dnum,
.broz-wrap .cells .cell.locked .meta .dow { color: var(--broz-text-muted); }
.broz-wrap .cells .cell.locked::after {
  content: '🔒';
  position: absolute;
  font-size: 9px;
  opacity: .55;
  top: 2px;
  left: 4px;
  pointer-events: none;
}
.broz-wrap .cells .cell { position: relative; }

/* Modal calendar: same look, larger lock badge. */
#broz-emp-modal .cell.locked:not(.holiday) {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(15,23,42,.025) 0 6px,
      rgba(15,23,42,.05)  6px 12px
    );
}
#broz-emp-modal .cell.locked .pill {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.35);
}
#broz-emp-modal .cell.locked .meta .dnum,
#broz-emp-modal .cell.locked .meta .dow { color: var(--broz-text-muted); }
#broz-emp-modal .cell.locked::after {
  content: '🔒';
  position: absolute;
  font-size: 11px;
  opacity: .6;
  top: 6px;
  right: 8px;
  pointer-events: none;
}
#broz-emp-modal .cell { position: relative; }

/* Toast variants */
#broz-hol-toast.kind-lock { background: #1e293b; }
#broz-hol-toast.kind-holiday { background: var(--broz-text); }


/* ============================================================
   TODAY HIGHLIGHT (subtle)
   ============================================================ */
.broz-wrap .cells .cell.today { background: rgba(37,99,235,.08); }
.broz-wrap .cells .cell.today .meta .dnum { color: var(--broz-primary); }
#broz-emp-modal .cell.today {
  border-color: var(--broz-primary);
  box-shadow: 0 0 0 1px var(--broz-primary), var(--broz-shadow-sm);
}
#broz-emp-modal .cell.today .dnum { color: var(--broz-primary); }


/* ============================================================
   HOLIDAY OVERRIDE INDICATOR (admin/HR only)
   ============================================================
   When a user stored some real status (e.g. P, DOV) on a day that is now a
   state holiday, admins/HR see a ⚠ badge in the corner. The pill still shows
   the stored value (so admins know what to fix), but the badge signals that
   this is "wrong" and should typically be reset to SV.

   First-click behavior on these cells (admin/HR only) clears the override
   back to SV — see the click handlers in app.js.
*/
.broz-wrap.can-edit-all .cells .cell.holiday.has-override::before,
#broz-emp-modal.can-edit-all .cell.holiday.has-override::before {
  content: '⚠';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 11px;
  line-height: 1;
  color: #b45309;
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 700;
  z-index: 2;
  pointer-events: none;
}
/* Slightly stronger border on overridden holiday cells so they stand out. */
.broz-wrap.can-edit-all .cells .cell.holiday.has-override {
  box-shadow: inset 0 0 0 2px #f59e0b !important;
}
#broz-emp-modal.can-edit-all .cell.holiday.has-override {
  box-shadow: inset 0 0 0 2px #f59e0b !important;
}
/* Pill on an overridden holiday gets a subtle outline so admin sees "this is the wrong value". */
.broz-wrap.can-edit-all .cells .cell.holiday.has-override .pill,
#broz-emp-modal.can-edit-all .cell.holiday.has-override .pill {
  outline: 1.5px dashed #f59e0b;
  outline-offset: 1px;
}

/* Hover affordance: holiday cells for admin/HR scale the pill very subtly so
   it's obvious clicking is allowed. */
.broz-wrap.can-edit-all .cells .cell.holiday:hover .pill,
#broz-emp-modal.can-edit-all .cell.holiday:hover .pill { transform: scale(1.04); }


/* ============================================================
   HOLIDAYS
   ============================================================ */

/* Holiday cells get a soft red border + tinted background. The pill itself
   reads "SV" (synthetic state-holiday code) so it stays fully visible — no
   opacity fade. The cell-level click handler shows a toast for non-admins. */
.broz-wrap .cells .cell.holiday { background: #fff5f5 !important; box-shadow: inset 0 0 0 1.5px #fca5a5 !important; cursor: not-allowed !important; }
.broz-wrap .cells .cell.holiday .pill { pointer-events: none; }
.broz-wrap .cells .cell.holiday .meta .dnum { color: #dc2626; font-weight: 700; }
.broz-wrap .cells .cell.holiday .meta .dow { color: #dc2626; opacity: .7; }

/* Admin/HR are allowed to override holidays – give them a clickable cursor. */
.broz-wrap.can-edit-all .cells .cell.holiday { cursor: pointer !important; }
.broz-wrap.can-edit-all .cells .cell.holiday .pill { pointer-events: auto; }

#broz-emp-modal .cell.holiday { background: #fff5f5 !important; box-shadow: inset 0 0 0 1.5px #fca5a5 !important; cursor: not-allowed !important; }
#broz-emp-modal .cell.holiday .pill { pointer-events: none; }
#broz-emp-modal .cell.holiday .dnum { color: #dc2626 !important; font-weight: 700; }
#broz-emp-modal .cell.holiday .dow { color: #dc2626; opacity: .7; }
#broz-emp-modal .cell .emp-hol-name { font-size: 9px; font-weight: 700; color: #dc2626; line-height: 1.25; margin-top: 4px; word-break: break-word; hyphens: auto; }

#broz-emp-modal.can-edit-all .cell.holiday { cursor: pointer !important; }
#broz-emp-modal.can-edit-all .cell.holiday .pill { pointer-events: auto; }

/* Toast */
#broz-hol-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--broz-text); color: #fff; padding: 10px 22px; border-radius: var(--broz-radius-md);
  font-size: 14px; font-weight: 500; z-index: 2147483647; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease; white-space: nowrap; box-shadow: var(--broz-shadow-lg);
}
#broz-hol-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.broz-wrap .holiday-legend-wrap { margin-top: 12px; font-size: 11px; color: var(--broz-text-secondary); }
.broz-wrap .holiday-legend-wrap strong { color: #dc2626; }


/* ============================================================
   PRINT
   ============================================================ */

@media print {
  @page { size: A4 portrait; margin: 8mm; }
  html, body { height: auto !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > :not(#broz-emp-modal) { display: none !important; }
  #broz-emp-modal { display: block !important; position: static !important; inset: auto !important; visibility: visible !important; overflow: visible !important; }
  #broz-emp-modal * { visibility: visible !important; }
  #broz-emp-modal .sheet { box-shadow: none !important; background: #fff !important; width: auto !important; max-width: 100% !important; border-radius: 0 !important; padding: 8mm !important; margin: 0 !important; border: none !important; }
  #broz-emp-modal .backdrop, #broz-emp-modal .btn.close, #broz-emp-modal .emp-head .h-acts { display: none !important; }
  #broz-emp-modal .sheet, #broz-emp-modal .emp-cal, #broz-emp-modal .emp-cal-grid, #broz-emp-modal .emp-cal .cells, #broz-emp-modal .emp-cal .cell { break-inside: avoid !important; page-break-inside: avoid !important; }
}
#broz-emp-modal.print-prep .sheet { background: #fff; }
#broz-emp-modal .emp-head .h-acts #emp-exp-print[style*="display: none"] { display: none !important; }