* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  background: #f0f2f5;
  color: #1e293b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; }

/* Use .hidden class instead of [hidden] attr — survives display:flex overrides */
.hidden { display: none !important; }

/* ----- loading indicators ----- */
#loading-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 100%;
  animation: loading-slide 1.2s ease-in-out infinite;
  z-index: 9999; width: 0; transition: width 0.3s ease;
}
#loading-bar.active { width: 100%; }
@keyframes loading-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.spinner-s { display: inline-block; width: 16px; height: 16px; border: 2px solid #e2e8f0; border-top-color: #667eea; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- views ----- */
.view { display: none; }
.view.active { display: block; }

/* ----- login ----- */
#view-login.active {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-card {
  background: white;
  padding: 36px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 360px;
  text-align: center;
}
.login-card h1 { margin: 0 0 8px; font-size: 24px; }
.login-card p { color: #718096; margin: 0 0 24px; }
.login-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 12px;
}
.login-card button {
  width: 100%;
  padding: 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}
.login-card button:hover { background: #5568d3; }
.err { color: #e53e3e; margin-top: 12px; font-size: 14px; }

/* ----- header ----- */
header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; white-space: nowrap; }
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav button {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
}
nav button:hover { background: #edf2f7; }
nav button.active { background: #667eea; color: white; }
.header-right { display: flex; gap: 12px; align-items: center; }
.search-box {
  position: relative;
  flex: 0 0 220px;
}
.search-box input {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: #f7fafc;
  color: #1a202c;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
  background: white;
}
.search-box input::placeholder { color: #a0aec0; }
.pill {
  background: #edf2f7;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: #4a5568;
}
.ghost {
  background: transparent;
  border: 1px solid #e2e8f0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #4a5568;
}
.ghost:hover { background: #edf2f7; }
.primary {
  background: #667eea;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.primary:hover { background: #5568d3; }

/* ----- tabs ----- */
.tab { display: none; padding: 24px; max-width: 1500px; margin: 0 auto; }
.tab.active { display: block; }
.tab h2 { margin: 0 0 16px; font-size: 22px; }

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
}
.toolbar label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.toolbar input, .toolbar select, .toolbar button {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  font-family: inherit;
}
.toolbar button.primary {
  background: #667eea;
  color: white;
  border: none;
  font-weight: 600;
}
.toolbar button.primary:hover { background: #5568d3; }

/* ----- summary & alerts ----- */
#today-alerts {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.alert-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; line-height: 1.4; flex: 1 1 280px;
}
.alert-card .alert-icon { font-size: 20px; flex-shrink: 0; }
.alert-warn { background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; }
.alert-info { background: #dbeafe; border: 1px solid #3b82f6; color: #1e3a5f; }
.alert-muted { background: #f1f5f9; border: 1px solid #cbd5e0; color: #475569; }

/* ----- summary ----- */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.summary-card {
  background: white;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.summary-card .label { color: #64748b; font-size: 12px; font-weight: 500; }
.summary-card .value { font-size: 28px; font-weight: 700; color: #1e293b; }

/* Staff list tweaks */
.staff-table { width: 100%; border-collapse: collapse; }
.staff-table th, .staff-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.staff-contact { color: #4a5568; font-size: 13px; }
.employee-row {
  display: grid;
  grid-template-columns: 44px 36px 76px minmax(150px, 1fr) 100px minmax(110px, .75fr) 86px 130px minmax(100px, .7fr) minmax(140px, 1fr) 44px;
  gap: 12px;
  padding: 10px 16px;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.avatar-cell { display: flex; justify-content: center; }
.avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
}
.avatar-placeholder {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #edf2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #a0aec0;
}
.employee-row:last-child { border-bottom: none; }
.employee-row.resigned { color: #718096; background: #fafafa; }
.employee-row .ma-nv { font-family: ui-monospace, monospace; color: #4a5568; font-size: 13px; }
.employee-row .name { font-weight: 600; }
.employee-head {
  background: #fbfdff;
  color: #718096;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.staff-status.active { background: #c6f6d5; color: #22543d; }
.staff-status.resigned { background: #fed7d7; color: #822727; }
.staff-status.paused { background: #fefcbf; color: #744210; }
.leave-cell-compact {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.leave-mini {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.leave-mini.ok { background: #c6f6d5; color: #22543d; }
.leave-mini.mid { background: #fefcbf; color: #744210; }
.leave-mini.low { background: #fed7d7; color: #822727; }
.leave-used { color: #718096; font-size: 12px; }
.modal-card.employee-modal-card {
  width: min(1280px, calc(100vw - 48px));
  min-width: min(760px, calc(100vw - 24px));
  height: min(88vh, 980px);
  min-height: min(640px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  overflow-x: hidden;
  padding: 28px;
  resize: both;
}
.collapsible-toggle {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.collapsible-toggle:hover { color: #667eea; }
.collapsible-body { margin-top: 0; }
.collapsible-body.hidden { display: none; }

.employee-section-title {
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
  font-size: 13px;
  font-weight: 800;
  color: #2d3748;
  text-transform: uppercase;
}
.employee-section-title:first-of-type { border-top: 0; padding-top: 0; }
.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.employee-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #4a5568; }
.employee-form-grid input, .employee-form-grid select, .employee-form-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font: inherit;
  color: #1a202c;
  background: #fff;
}
.employee-form-grid input:disabled,
.employee-form-grid textarea:disabled {
  color: #2d3748;
  background: #f8fafc;
}
.employee-form-wide { grid-column: 1 / -1; }
.employee-form-grid textarea { min-height: 92px; resize: vertical; }
.leave-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.employee-history-panel {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}
.employee-history-form {
  display: grid;
  grid-template-columns: minmax(160px, 190px) minmax(180px, 220px) minmax(260px, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.employee-history-form input, .employee-history-form select, .employee-history-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font: inherit;
}
.employee-history-form textarea { grid-column: 1 / -1; min-height: 86px; resize: vertical; }
.employee-events { display: grid; gap: 8px; }
.event-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: white;
  border: 1px solid #edf2f7;
  border-radius: 8px;
}
.event-type {
  margin-left: 8px;
  color: #4a5568;
  background: #edf2f7;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.empty.compact { padding: 12px; font-size: 13px; }
@media (max-width: 1280px) {
  /* Shrink fixed columns, keep name as 1fr */
  .person-row {
    grid-template-columns:
      24px    /* row-num */
      60px    /* ma-nv */
      1fr     /* name */
      88px    /* badge */
      64px    /* shift code */
      100px   /* shift time */
      160px   /* shift desc */
      28px    /* actions */
      88px;   /* leave */
    gap: 6px;
    padding: 9px 14px 9px 10px;
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .tab { padding: 12px; }
  .toolbar { align-items: stretch; }
  .toolbar label, .toolbar input, .toolbar select, .toolbar button { width: 100%; }
  .modal-card.employee-modal-card {
    width: calc(100vw - 12px);
    min-width: 0;
    height: calc(100vh - 12px);
    min-height: 0;
    max-height: calc(100vh - 12px);
    padding: 18px;
    border-radius: 10px;
    resize: none;
  }
  .employee-row {
    grid-template-columns: 36px 30px 70px minmax(0, 1fr) auto 40px;
    gap: 8px;
    padding: 12px;
  }
  .employee-row.employee-head { display: none; }
  .employee-row span:nth-child(6),
  .employee-row span:nth-child(7),
  .employee-row span:nth-child(8),
  .employee-row span:nth-child(9),
  .employee-row span:nth-child(10) { display: none; }
  .employee-form-grid, .leave-grid { grid-template-columns: 1fr; gap: 12px; }
  .employee-history-form { grid-template-columns: 1fr; }
  .employee-history-form textarea { grid-column: auto; }
  .event-row { align-items: flex-start; flex-direction: column; }
}

/* ----- manage sub-navigation ----- */
.subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 6px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.subnav-btn {
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  cursor: pointer;
}
.subnav-btn:hover { background: #edf2f7; }
.subnav-btn.active {
  background: #667eea;
  color: white;
}
.m-sub { display: none; }
.m-sub.active { display: block; }

/* ----- group cards ----- */
.group {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.group-header {
  background: #f8fafc;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid #e8ecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-header .count {
  background: #667eea;
  color: white;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.group-header .count-clickable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.group-header .count-clickable:hover {
  background: #4c51bf;
}
/* When active-only filter is on (per dept or global), hide non-active rows */
.filter-active .person-row:not(.row-active),
.filter-active-global .person-row:not(.row-active) {
  display: none !important;
}

/* Clickable summary cards */
.summary-clickable {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s, border 0.15s;
}
.summary-clickable:hover {
  opacity: 0.85;
}
.person-row {
  display: grid;
  grid-template-columns:
    28px          /* row-num */
    68px          /* ma-nv */
    1fr           /* name — takes ALL remaining space */
    96px          /* badge (status) */
    72px          /* shift code */
    110px         /* shift time */
    200px         /* shift desc */
    32px          /* actions */
    96px;         /* leave cell */
  gap: 8px;
  padding: 10px 20px 10px 14px;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.person-row:last-child { border-bottom: none; }
.person-row .ma-nv { font-family: ui-monospace, monospace; color: #4a5568; font-size: 13px; }
.person-row .name { font-weight: 500; min-width: 0; word-break: break-word; line-height: 1.3; }
.shift-desc {
  color: #718096;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}
.shift-time {
  color: #2d3748;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.row-num {
  color: #a0aec0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 28px;
}
.row-actions {
  display: flex;
  justify-content: center;
}
.icon-btn {
  min-width: 32px;
  padding: 5px 7px;
  line-height: 1;
}
.outlet-chip {
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
}
.leave-cell {
  justify-self: end;
  padding-right: 8px;
}
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* badge colors per location (keyed by locClass result) */
.badge.Pool       { background: #bee3f8; color: #2c5282; }
.badge.Beach      { background: #fed7aa; color: #9c4221; }
.badge.Fitness    { background: #fbb6ce; color: #97266d; }
.badge.Game       { background: #c6f6d5; color: #22543d; }
.badge.Farm       { background: #d9f99d; color: #365314; }
.badge.Camp       { background: #fefcbf; color: #744210; }
.badge.Mini       { background: #d6bcfa; color: #553c9a; }
.badge.Cleaner    { background: #cbd5e0; color: #2d3748; }
.badge.Other      { background: #e2e8f0; color: #4a5568; }
.badge.Part       { background: #e9d8fd; color: #553c9a; }
.badge.Mgmt       { background: #d1d5db; color: #1f2937; font-weight: 600; }

.badge.work       { background: #c6f6d5; color: #22543d; }
.badge.leave      { background: #feebc8; color: #7b341e; }
.badge.off        { background: #e2e8f0; color: #4a5568; }
.badge.shift-active { background: #c6f6d5; color: #22543d; }
.badge.shift-ended  { background: #e2e8f0; color: #4a5568; }
.leave-chip {
  display: inline-block;
  min-width: 74px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.leave-chip.ok     { background: #dcfce7; color: #166534; }
.leave-chip.yellow { background: #fef9c3; color: #854d0e; }
.leave-chip.orange { background: #ffedd5; color: #9a3412; }
.leave-chip.danger { background: #fee2e2; color: #991b1b; }

/* ----- table ----- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
th, td { padding: 11px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
th { background: #f8fafc; font-weight: 600; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
td { color: #334155; }
tr:hover td { background: #fafbfc; }
tr:last-child td { border-bottom: none; }

.warn { color: #c53030; font-weight: 600; }
.ok { color: #2f855a; }

/* ----- CALENDAR (month grid) ----- */
.cal-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
}
.cal-toolbar h2 {
  margin: 0;
  font-size: 18px;
  min-width: 180px;
  text-align: center;
}
.cal-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cal-toolbar select {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.cal-weekday {
  background: #f7fafc;
  padding: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #4a5568;
  text-transform: uppercase;
}
.cal-cell {
  background: white;
  min-height: 110px;
  padding: 6px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.cal-cell:hover { background: #f7fafc; }
.cal-cell.other-month { background: #fafafa; opacity: 0.5; }
.cal-cell.today { background: #ebf4ff; box-shadow: inset 0 0 0 2px #667eea; }
.cal-cell .cal-date {
  font-weight: 600;
  font-size: 13px;
  color: #2d3748;
  margin-bottom: 4px;
}
.cal-cell.today .cal-date { color: #667eea; }
.cal-cell .cal-chip {
  display: inline-block;
  padding: 1px 5px;
  margin: 1px 2px 1px 0;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}
.cal-cell .cal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 11px;
}
.cal-cell .cal-loc-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* ----- modal ----- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 400px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card h3 { margin: 0 0 8px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.modal-card input, .modal-card select { padding: 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ----- import dropzone ----- */
.dropzone {
  background: white;
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  padding: 60px 24px;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.drag {
  border-color: #667eea;
  background: #ebf4ff;
}
.dropzone code {
  background: #edf2f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

#import-preview { margin-top: 20px; }
#import-preview h3 { margin-top: 0; }
#preview-table table { font-size: 13px; }
#preview-table th, #preview-table td { padding: 6px 10px; }

#import-result { margin-top: 16px; padding: 16px; border-radius: 8px; font-size: 14px; }
#import-result.ok { background: #c6f6d5; color: #22543d; }
#import-result.err { background: #fed7d7; color: #822727; }

.empty { text-align: center; padding: 40px; color: #a0aec0; font-size: 14px; }

/* currently-on-shift highlight */
.row-active {
  background: #f0fff4;
}
.row-active:hover { background: #e6ffed; }
.row-ended {
  background: #f7fafc;
}
.row-ended .name,
.row-ended .ma-nv {
  color: #1a202c;
}

.active-now-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #c6f6d5;
  color: #22543d;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* day popover content */
#day-pop-content .person-row {
  grid-template-columns: 36px 70px minmax(130px, 1fr) 90px 116px minmax(120px, 1fr) 44px;
}

/* ----- MOBILE (≤ 640px) ----- */
@media (max-width: 640px) {
  /* header stacks */
  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .brand { font-size: 15px; }
  nav { gap: 2px; }
  nav button { padding: 6px 9px; font-size: 12px; }
  .header-right { width: 100%; justify-content: flex-end; }
  .pill { font-size: 11px; padding: 3px 8px; }

  /* tabs */
  .tab { padding: 12px; }
  .tab h2 { font-size: 18px; margin-bottom: 10px; }

  /* summary cards — single column */
  .summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-card { padding: 12px; }
  .summary-card .value { font-size: 22px; }

  /* person-row stacks into 2 rows */
  .person-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 6px 10px;
    padding: 12px;
  }
  .person-row > :nth-child(1) { grid-column: 1; grid-row: 2; font-size: 11px; } /* row-num */
  .person-row > :nth-child(2) { grid-column: 2; grid-row: 2; justify-self: end; font-size: 11px; } /* ma-nv */
  .person-row > :nth-child(3) { grid-column: 1 / span 2; grid-row: 1; font-size: 14px; } /* name */
  .person-row > :nth-child(4) { grid-column: 1; grid-row: 3; justify-self: start; } /* badge */
  .person-row > :nth-child(5) { grid-column: 2; grid-row: 5; justify-self: end; font-size: 12px; } /* shift code */
  .person-row > :nth-child(6) { grid-column: 1; grid-row: 4; font-size: 12px; } /* shift time */
  .person-row > :nth-child(7) { grid-column: 1 / span 2; grid-row: 6; font-size: 12px; } /* shift desc */
  .person-row > :nth-child(8) { grid-column: 2; grid-row: 4; justify-self: end; } /* actions */
  .person-row > :nth-child(9) { grid-column: 2; grid-row: 3; justify-self: end; padding-right: 0; } /* leave cell */
  .shift-desc { flex-wrap: wrap; }
  .leave-chip { min-width: 68px; font-size: 11px; }
  .shift-time { font-size: 12px; }

  /* day popover person-row */
  #day-pop-content .person-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
  }
  #day-pop-content .person-row > :nth-child(1) { grid-column: 1; grid-row: 2; } /* row-num */
  #day-pop-content .person-row > :nth-child(2) { grid-column: 2; grid-row: 2; justify-self: end; } /* ma-nv */
  #day-pop-content .person-row > :nth-child(3) { grid-column: 1 / span 2; grid-row: 1; } /* name */
  #day-pop-content .person-row > :nth-child(4) { grid-column: 1; grid-row: 3; } /* badge */
  #day-pop-content .person-row > :nth-child(5) { grid-column: 2; grid-row: 4; justify-self: end; } /* shift time */
  #day-pop-content .person-row > :nth-child(6) { grid-column: 1 / span 2; grid-row: 4; } /* shift desc */
  #day-pop-content .person-row > :nth-child(7) { grid-column: 2; grid-row: 3; justify-self: end; } /* actions */

  /* calendar: horizontal scroll on small screens */
  #calendar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid { min-width: 560px; }
  .cal-cell { min-height: 70px; padding: 4px; }
  .cal-cell .cal-chip { font-size: 9px; }
  .cal-toolbar { gap: 6px; padding: 8px; }
  .cal-toolbar h2 { font-size: 15px; min-width: 140px; }

  /* modal full-width */
  .modal-card { width: calc(100vw - 32px); padding: 16px; }

  /* toolbar wraps */
  .toolbar { padding: 8px; gap: 8px; }

  /* manage table scrollable */
  #manage-content { overflow-x: auto; }

  /* import dropzone smaller */
  .dropzone { padding: 32px 16px; }
}

/* ===== WEEK / GANTT VIEW ===== */
#week-view { margin-top: 16px; }
.week-gantt-wrap {
  overflow-x: auto;
  background: white;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.week-gantt {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
  font-size: 13px;
}
.week-gantt th {
  background: #f8fafc;
  padding: 10px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.week-gantt th.emp-header {
  text-align: left;
  padding-left: 14px;
  min-width: 170px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f8fafc;
}
.week-gantt th.day-header {
  min-width: 86px;
}
.week-gantt th.day-header.today-col {
  background: #ebf4ff;
  color: #667eea;
}
.week-gantt th.day-header.weekend-col {
  background: #fafafa;
  color: #94a3b8;
}
.week-gantt td {
  padding: 4px 2px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.week-gantt .emp-info {
  text-align: left;
  padding: 6px 8px 6px 14px;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  border-right: 1px solid #e2e8f0;
  white-space: nowrap;
}
.week-gantt .emp-info .emp-name {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}
.week-gantt .emp-info .emp-code {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 6px;
}
.week-gantt .emp-dept-header {
  background: #f1f5f9 !important;
  font-weight: 700;
  font-size: 12px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.week-gantt .emp-dept-header td {
  padding: 7px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.week-gantt .emp-dept-header .emp-info {
  background: #f1f5f9;
}
.week-gantt .week-cell {
  display: inline-block;
  min-width: 56px;
  padding: 5px 4px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  line-height: 1.3;
}
.week-cell.work {
  background: #dcfce7;
  color: #166534;
}
.week-cell.leave {
  background: #fef9c3;
  color: #854d0e;
}
.week-cell.off {
  background: #f1f5f9;
  color: #64748b;
}
.week-cell.half-am {
  background: linear-gradient(135deg, #dcfce7 50%, #fef9c3 50%);
  color: #166534;
}
.week-cell.half-pm {
  background: linear-gradient(135deg, #fef9c3 50%, #dcfce7 50%);
  color: #854d0e;
}
.week-cell.weekend-day {
  opacity: 0.75;
}
.week-cell.empty {
  background: transparent;
  color: #cbd5e0;
}
.week-cell .cell-sub {
  display: block;
  font-weight: 400;
  font-size: 10px;
  opacity: 0.7;
}
.week-gantt tr:hover td {
  background: #f8fafc;
}
.week-gantt tr:hover .emp-info {
  background: #f8fafc;
}
.week-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.week-summary .ws-card {
  background: white;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e8ecf0;
  font-size: 13px;
}
.week-summary .ws-card .ws-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}
.week-summary .ws-card .ws-value {
  font-weight: 700;
  font-size: 18px;
  color: #1e293b;
}

/* ===== SORTABLE TABLES ===== */
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: #667eea;
}
th.sortable::after {
  content: " ↕";
  font-size: 11px;
  opacity: 0.4;
}
th.sortable.sort-asc::after {
  content: " ↑";
  opacity: 1;
  color: #667eea;
}
th.sortable.sort-desc::after {
  content: " ↓";
  opacity: 1;
  color: #667eea;
}

@media (max-width: 900px) {
  .week-gantt { min-width: 640px; }
  .week-gantt th.emp-header { min-width: 120px; }
  .week-gantt th.day-header { min-width: 62px; }
  .week-gantt .week-cell { min-width: 40px; font-size: 11px; padding: 3px 2px; }
  .week-gantt .emp-info .emp-name { font-size: 12px; }
}