/**
 * src/css/leave.css — LEAVE/HR shared UI styles (leave-ui.js modal + ledger).
 * Desktop-first; all mobile-specific rules are gated <=767px so desktop layout
 * is untouched. Palette reuses the app tokens (#022448 primary, #fea619 accent)
 * and the leave_type seed colours for day-status chips.
 */

/* ── transient toast ─────────────────────────────────────────────────────── */
.leave-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: #022448;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100000;
  box-shadow: 0 8px 24px rgba(2, 36, 72, 0.28);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: min(92vw, 420px);
  text-align: center;
}
.leave-toast.show { transform: translateX(-50%) translateY(0); }
.leave-toast.error { background: #ba1a1a; }

/* ── request modal ───────────────────────────────────────────────────────── */
.leave-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 36, 72, 0.42);
  backdrop-filter: blur(2px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.leave-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(2, 36, 72, 0.32);
}
.leave-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #E2E8F0;
}
.leave-modal-head h3 { font-size: 16px; font-weight: 700; color: #022448; margin: 0; }
.leave-modal-x {
  border: none; background: transparent; font-size: 24px; line-height: 1;
  color: #74777f; cursor: pointer; padding: 0 4px;
}
.leave-modal-x:hover { color: #191c1e; }
.leave-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.leave-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid #E2E8F0; background: #F8FAFC;
}

.leave-field { display: flex; flex-direction: column; gap: 6px; }
.leave-field > span { font-size: 13px; font-weight: 600; color: #43474e; }
.leave-field-row { display: flex; gap: 12px; }
.leave-field-row .leave-field { flex: 1; }
.leave-input {
  width: 100%; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #191c1e; background: #fff;
  min-height: 44px; outline: none; transition: border-color 0.15s;
}
.leave-input:focus { border-color: #022448; border-width: 2px; }
textarea.leave-input { min-height: 60px; resize: vertical; }

.leave-type-info {
  font-size: 12.5px; line-height: 1.5; color: #43474e;
  background: #F2F6FB; border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px 12px;
}
.leave-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; margin-right: 4px; vertical-align: baseline;
}
.leave-badge.ok { background: #e6f4ea; color: #1e7d33; }
.leave-badge.wait { background: #fff3e0; color: #9a5b00; }
.leave-badge.note { background: #fdecec; color: #c62828; }
.leave-badge.unpaid { background: #eceff1; color: #455a64; }

.leave-balance-inline {
  font-size: 13px; color: #191c1e; background: #fff; border: 1px dashed #c4c6cf;
  border-radius: 8px; padding: 8px 12px;
}
.leave-bal-num { font-size: 18px; font-weight: 800; color: #022448; }
.leave-bal-sub { color: #74777f; font-size: 12px; }

.leave-form-error {
  font-size: 13px; font-weight: 600; color: #ba1a1a;
  background: #fdecec; border: 1px solid #ffdad6; border-radius: 8px; padding: 10px 12px;
}

.leave-btn {
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; min-height: 44px;
}
.leave-btn-ghost { background: transparent; color: #43474e; border: 1px solid #E2E8F0; }
.leave-btn-ghost:hover { background: #F2F4F6; }
.leave-btn-primary { background: #022448; color: #fff; }
.leave-btn-primary:hover { background: #1e3a5f; }
.leave-btn-primary:disabled { background: #c4c6cf; cursor: not-allowed; }

/* ── day-ledger / absence view ───────────────────────────────────────────── */
.leave-ledger-empty { font-size: 13px; color: #74777f; }
.leave-ledger-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px;
  font-size: 12px; color: #43474e;
}
.leave-ledger-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.leave-day-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.leave-ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.leave-day-cell {
  border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-left-width: 4px; background: #fff;
}
.leave-day-dow { font-size: 10px; color: #74777f; text-transform: uppercase; }
.leave-day-date { font-size: 13px; font-weight: 700; color: #191c1e; }
.leave-day-status { font-size: 10px; color: #43474e; text-align: center; line-height: 1.1; }

/* status colours (dot + left border), mirroring the leave_type seed palette */
.leave-status-worked { border-left-color: #cfd8dc; }
.leave-status-worked.leave-day-dot, .leave-day-dot.leave-status-worked { background: #90a4ae; }
.leave-status-leave { border-left-color: #2e7d32; background: #f2f9f3; }
.leave-day-dot.leave-status-leave { background: #2e7d32; }
.leave-status-sick { border-left-color: #c62828; background: #fdf3f3; }
.leave-day-dot.leave-status-sick { background: #c62828; }
.leave-status-public_holiday { border-left-color: #1565c0; background: #f1f6fd; }
.leave-day-dot.leave-status-public_holiday { background: #1565c0; }
.leave-status-company_holiday { border-left-color: #6a1b9a; background: #f8f3fb; }
.leave-day-dot.leave-status-company_holiday { background: #6a1b9a; }
.leave-status-weekend { border-left-color: #e0e3e5; background: #fafbfc; }
.leave-day-dot.leave-status-weekend { background: #cfd4d8; }
.leave-status-off { border-left-color: #b0bec5; background: #fafbfc; }
.leave-day-dot.leave-status-off { background: #b0bec5; }

/* ── admin: company-holiday + sick-note queue shared bits ────────────────── */
.leave-ch-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.leave-ch-form .leave-field { flex: 1 1 150px; min-width: 130px; }
.leave-ch-list, .leave-sn-list { display: flex; flex-direction: column; gap: 8px; }
.leave-ch-row, .leave-sn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px 12px; background: #fff;
  flex-wrap: wrap;
}
.leave-ch-row .leave-ch-meta, .leave-sn-row .leave-sn-meta { font-size: 13px; color: #191c1e; }
.leave-ch-row .leave-ch-sub, .leave-sn-row .leave-sn-sub { font-size: 12px; color: #74777f; }
.leave-sn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.leave-sn-chip {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px;
}
.leave-sn-chip.pending { background: #fff3e0; color: #9a5b00; }
.leave-sn-chip.confirmed { background: #e6f4ea; color: #1e7d33; }
.leave-sn-chip.rejected { background: #fdecec; color: #c62828; }

/* ── mobile (<=767px) — desktop rules above stay intact ──────────────────── */
@media (max-width: 767px) {
  .leave-modal { max-width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; max-height: 94vh; }
  .leave-modal-backdrop { align-items: flex-end; padding: 0; }
  .leave-field-row { flex-direction: column; gap: 12px; }
  .leave-modal-foot { position: sticky; bottom: 0; }
  .leave-btn { flex: 1; }
  .leave-ledger-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .leave-ch-form .leave-field { flex-basis: 100%; }
  .leave-ch-row, .leave-sn-row { flex-direction: column; align-items: stretch; }
  .leave-sn-actions .leave-btn, .leave-sn-actions button { flex: 1; }
}