/* =====================================================================
   HRMIS Enhancements v14
   - Top-right standardised notification stack (green/red/amber/blue)
   - Command-button busy state (spinner, disabled, duplicate guard)
   - Module breadcrumbs & quick-link cards
   - Router deep-link affordances
   All styles namespaced (hrmis-*) to avoid clashing with styles.css.
   ===================================================================== */

/* ---------- Notification stack (top-right) ---------- */
.hrmis-notify-stack {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(400px, calc(100vw - 28px));
  pointer-events: none;
  font-family: inherit;
}

.hrmis-notify {
  pointer-events: auto;
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(9, 32, 22, 0.30), 0 2px 8px rgba(9, 32, 22, 0.18);
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .22s ease, transform .22s ease;
  overflow: hidden;
  border-left: 5px solid rgba(255, 255, 255, .55);
}
.hrmis-notify.show { opacity: 1; transform: translateX(0); }
.hrmis-notify.hide { opacity: 0; transform: translateX(28px); }

.hrmis-notify--success { background: linear-gradient(135deg, #1e6b3c, #2e8540); }
.hrmis-notify--error   { background: linear-gradient(135deg, #a3342a, #c0392b); }
.hrmis-notify--warning { background: linear-gradient(135deg, #b26a00, #d97706); }
.hrmis-notify--info    { background: linear-gradient(135deg, #1d5a9e, #2563ab); }

.hrmis-notify-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.hrmis-notify-body { flex: 1 1 auto; min-width: 0; }
.hrmis-notify-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 1px 0 2px;
}
.hrmis-notify--success .hrmis-notify-title { color: #d8f5e2; }
.hrmis-notify--error   .hrmis-notify-title { color: #ffd9d2; }
.hrmis-notify--warning .hrmis-notify-title { color: #fff0d2; }
.hrmis-notify--info    .hrmis-notify-title { color: #d4e6ff; }
.hrmis-notify-msg {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.hrmis-notify-close {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .14);
  border: none;
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s ease;
}
.hrmis-notify-close:hover { background: rgba(255, 255, 255, .30); }

.hrmis-notify-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .85);
  transform-origin: left;
  transition-property: width;
  transition-timing-function: linear;
  width: 0;
}
.hrmis-notify-progress.run { width: 0; transition: width 0ms; }

/* Small screens: full-width strip at top, above everything */
@media (max-width: 640px) {
  .hrmis-notify-stack {
    top: 0; right: 0; left: 0;
    width: 100%;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
  }
  .hrmis-notify { border-radius: 8px; padding: 10px 12px 12px; }
  .hrmis-notify-title { font-size: 11.5px; }
  .hrmis-notify-msg { font-size: 12.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hrmis-notify { transition: opacity .18s ease; transform: none; }
  .hrmis-notify.show, .hrmis-notify.hide { transform: none; }
}

/* ---------- Command button busy state ---------- */
.hrmis-btn-busy {
  position: relative;
  pointer-events: none !important;
  opacity: .82;
  cursor: progress !important;
}
.hrmis-btn-busy .hrmis-busy-label { margin-left: 6px; }
.hrmis-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hrmis-spin .7s linear infinite;
  vertical-align: -2px;
}
.btn-cancel .hrmis-spinner,
.action-btn .hrmis-spinner,
.hrmis-btn-busy:not(.btn-submit) .hrmis-spinner {
  border-color: rgba(0, 0, 0, .25);
  border-top-color: rgba(0, 0, 0, .65);
}
@keyframes hrmis-spin { to { transform: rotate(360deg); } }

/* ---------- Module breadcrumbs ---------- */
.hrmis-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft, #5b6b63);
  margin: 0 0 10px;
}
.hrmis-breadcrumbs .crumb { display: inline-flex; align-items: center; gap: 6px; }
.hrmis-breadcrumbs .crumb-sep { opacity: .55; }
.hrmis-breadcrumbs .crumb-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-deep, #14532d);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hrmis-breadcrumbs .crumb-link:hover { opacity: .8; }
.hrmis-breadcrumbs .crumb-here { font-weight: 700; color: var(--ink, #17281f); }

/* ---------- Quick-link cards (dashboard interlinking) ---------- */
.hrmis-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}
.hrmis-quicklink {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #dbe5df);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.hrmis-quicklink:hover {
  border-color: var(--brand, #1f7a3f);
  box-shadow: 0 6px 16px rgba(20, 60, 35, .10);
  transform: translateY(-1px);
}
.hrmis-quicklink .ql-title { font-weight: 700; font-size: 13px; color: var(--ink, #17281f); }
.hrmis-quicklink .ql-sub { font-size: 11.5px; color: var(--ink-soft, #5b6b63); }

/* Dark theme parity */
[data-theme="dark"] .hrmis-quicklink { background: #1c2622; border-color: #2c3a33; }
[data-theme="dark"] .hrmis-quicklink .ql-title { color: #e8f1ec; }
[data-theme="dark"] .hrmis-quicklink .ql-sub { color: #9db3a8; }
[data-theme="dark"] .hrmis-breadcrumbs { color: #9db3a8; }
[data-theme="dark"] .hrmis-breadcrumbs .crumb-here { color: #e8f1ec; }

/* Print: never print notifications or busy spinners */
@media print {
  .hrmis-notify-stack, .hrmis-btn-busy { display: none !important; }
}

/* =====================================================================
   v17.7 Compact responsive layer — denser spacing, no horizontal scroll
   Desktop remains readable; phones/tablets get tighter padding.
   ===================================================================== */
:root {
  --hrmis-space-xs: 4px;
  --hrmis-space-sm: 8px;
  --hrmis-space-md: 12px;
  --hrmis-space-lg: 16px;
}

#dashboard-screen .content-panel,
#content-panel {
  padding: var(--hrmis-space-md) var(--hrmis-space-lg) !important;
}

#content-panel h3 {
  margin: 0 0 var(--hrmis-space-sm) !important;
  font-size: 1.15rem !important;
}

#content-panel .section-note {
  margin: 0 0 var(--hrmis-space-md) !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
}

#content-panel .subhead {
  margin: var(--hrmis-space-md) 0 var(--hrmis-space-sm) !important;
  font-size: 0.95rem !important;
}

.data-table th,
.data-table td {
  padding: 8px 10px !important;
  font-size: 0.84rem !important;
}

.stat-cards, .stats-row, .dashboard-cards {
  gap: var(--hrmis-space-sm) !important;
}

.action-btn, .submit-btn, .btn-submit, .btn-cancel, .secondary {
  min-height: 36px;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
}

.leave-history-pager {
  font-size: 0.82rem;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
  #dashboard-screen .content-panel,
  #content-panel {
    padding: 10px 12px !important;
  }
  .sidebar {
    max-width: min(280px, 86vw) !important;
  }
  .stat-card, .dash-card {
    padding: 10px 12px !important;
  }
  .data-table th, .data-table td {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
  }
  .modal-box {
    padding: 14px 12px !important;
  }
}

@media (max-width: 600px) {
  #content-panel h3 { font-size: 1.05rem !important; }
  .action-btn, .submit-btn, .btn-submit {
    min-height: 40px;
  }
  /* Avoid accidental full-page horizontal scroll */
  body, #dashboard-screen, #content-panel {
    overflow-x: hidden !important;
  }
  .table-wrap { margin: 0 -4px; }
}

/* =====================================================================
   v17.20 Professional UI & Mobile layer — CSS-ONLY visual overhaul.
   Scope: typography consistency, control polish, focus states, loading
   feel, table/card/modal refinement and full small-screen adaptation.
   No HTML, PHP or JavaScript behaviour is changed by this layer.
   ===================================================================== */

/* ---------- 1. Typography & design tokens (align with loaded fonts) ---- */
:root {
  /* styles.css declared 'DM Sans'/'Fraunces' but the bundle loads
     Roboto + Open Sans; aligning tokens makes typography consistent on
     every platform with zero extra downloads. */
  --font: 'Roboto', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Roboto', Georgia, 'Times New Roman', serif;
  --ui-font: 'Roboto', 'Open Sans', system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --focus-ring: 0 0 0 3px rgba(64, 145, 108, 0.28);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numerals align in KPIs, stats and tables (professional data readout) */
.stat-number, .kpi-value, .data-table td, .pager-info, .leave-history-pager {
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. Command buttons: consistent, tactile, accessible -------- */
.action-btn, .submit-btn, .btn-submit, .btn-cancel, .secondary,
.nav-btn, .logout-btn, .modal-close, .hrmis-quicklink {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: box-shadow 0.16s var(--ease, ease), transform 0.16s var(--ease, ease),
              background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.action-btn:hover, .submit-btn:hover, .btn-submit:hover, .btn-cancel:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 40, 31, 0.14);
}
.action-btn:active, .submit-btn:active, .btn-submit:active, .btn-cancel:active {
  transform: translateY(0);
  box-shadow: none;
}
.action-btn:disabled, .submit-btn:disabled, .btn-submit:disabled,
.btn-cancel:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Keyboard focus ring — visible, on-brand, never on mouse click */
button:focus-visible, .action-btn:focus-visible, .btn-submit:focus-visible,
.btn-cancel:focus-visible, .submit-btn:focus-visible, a:focus-visible,
.nav-btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- 3. Forms: compact alignment + validation clarity ----------- */
.field-group > label, .lbl {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink, #1a1c16);
  margin-bottom: 4px;
}
.field-group .required, .required { color: var(--error, #b33a30); }

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], select, textarea {
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  min-height: 38px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--forest-mid, #40916c);
  box-shadow: var(--focus-ring);
}
.field-group.error > input, .field-group.error > select, .field-group.error > textarea {
  border-color: var(--error, #b33a30);
}
.error-text {
  font-size: 0.75rem;
  margin-top: 3px;
  color: var(--error, #b33a30);
}
.mini-form { align-items: center; }
.mini-form input, .mini-form select { min-height: 38px; }

/* ---------- 4. Tables: professional density + sticky header (desktop) -- */
.data-table {
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft, #5a5c52);
  border-bottom: 2px solid var(--line, #e0dcd0);
}
.data-table tbody tr { transition: background-color 0.12s ease; }
.data-table tbody tr:nth-child(even) { background: rgba(246, 244, 239, 0.55); }
.data-table tbody tr:hover { background: rgba(64, 145, 108, 0.07); }
.data-table td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Desktop: long tables scroll inside their wrap with a pinned header */
@media (min-width: 961px) {
  .table-wrap {
    max-height: calc(100vh - var(--topbar-h, 64px) - 150px);
    overflow: auto;
    border-radius: var(--radius-sm);
  }
  .table-wrap .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white, #fff);
    box-shadow: 0 1px 0 var(--line, #e0dcd0);
  }
}

/* Slim, unobtrusive scrollbars */
.table-wrap::-webkit-scrollbar, .sidebar::-webkit-scrollbar,
.modal-box::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb {
  background: rgba(90, 92, 82, 0.30);
  border-radius: 8px;
}
.table-wrap::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 5. Status pills & badges: uniform sizing ------------------- */
.status-pill, .return-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ---------- 6. Cards & KPIs -------------------------------------------- */
.stat-card, .kpi-card, .dash-card {
  border-radius: var(--radius);
  transition: box-shadow 0.18s var(--ease, ease), transform 0.18s var(--ease, ease),
              border-color 0.18s ease;
}
.stat-card:hover, .kpi-card:hover, .dash-card:hover {
  box-shadow: var(--shadow, 0 4px 24px rgba(16, 40, 31, 0.08));
  transform: translateY(-1px);
}
.stat-number, .kpi-value {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

/* ---------- 7. Modals: polished dialog; bottom-sheet on phones --------- */
.modal-overlay { backdrop-filter: blur(2px); }
.modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(16, 40, 31, 0.16));
  animation: hrmis-modal-in 0.18s var(--ease-out, ease-out);
}
@keyframes hrmis-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.modal-actions { gap: 8px; }

/* ---------- 8. Content render feedback (instant, subtle) --------------- */
#content-panel > * { animation: hrmis-fade-rise 0.16s var(--ease-out, ease-out) both; }
@keyframes hrmis-fade-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 9. Sidebar & navigation ------------------------------------ */
.nav-btn {
  min-height: var(--touch, 44px);
  position: relative;
  text-align: left;
}
.nav-btn.active { font-weight: 700; }
.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: var(--gold, #c9a227);
}
.nav-accordion-toggle { min-height: var(--touch, 44px); }

/* ---------- 10. Mobile responsiveness (phones + small tablets) --------- */
@media (max-width: 960px) {
  .modal-form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --topbar-h: 56px; }
  .modal-form-grid { grid-template-columns: 1fr; }
  .stat-cards, .stats-row, .dashboard-cards { grid-template-columns: 1fr 1fr; }
  .hrmis-quicklinks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  /* iOS: 16px inputs prevent focus zoom-in */
  input[type="text"], input[type="search"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="tel"], select, textarea {
    font-size: 16px;
    min-height: 42px;
  }
  /* Bottom-sheet dialogs: thumb-friendly, never clipped */
  .modal-overlay.active { align-items: flex-end; padding: 0 !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--white, #fff);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0 -12px;
    border-top: 1px solid var(--line, #e0dcd0);
    z-index: 3;
  }
  /* Single-column stats; readable touch targets everywhere */
  .stat-cards, .stats-row, .dashboard-cards, .hrmis-quicklinks {
    grid-template-columns: 1fr 1fr;
  }
  .action-btn, .submit-btn, .btn-submit, .btn-cancel, .secondary {
    min-height: 42px;
    padding: 9px 14px !important;
  }
  .data-table th, .data-table td { padding: 8px 9px !important; }
  .section-note { font-size: 0.8rem; }
  /* Topbar: compact but never overflowing */
  .topbar { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
}

@media (max-width: 420px) {
  .stat-cards, .stats-row, .dashboard-cards, .hrmis-quicklinks {
    grid-template-columns: 1fr;
  }
  .sidebar { max-width: 88vw !important; }
  .data-table { font-size: 0.78rem; }
  #content-panel h3 { font-size: 1rem !important; }
}

/* ---------- 11. Motion preferences & print safety ----------------------- */
@media (prefers-reduced-motion: reduce) {
  #content-panel > * { animation: none !important; }
  .modal-box { animation: none !important; }
  .action-btn, .submit-btn, .btn-submit, .btn-cancel, .stat-card, .kpi-card,
  .dash-card, .data-table tbody tr { transition: none !important; }
  .action-btn:hover, .submit-btn:hover, .btn-submit:hover, .btn-cancel:hover,
  .stat-card:hover, .kpi-card:hover, .dash-card:hover { transform: none !important; }
}
@media print {
  .nav-toggle, .sidebar, .topbar .nav-toggle, .modal-close { display: none !important; }
  .table-wrap { max-height: none !important; overflow: visible !important; }
  .table-wrap .data-table thead th { position: static !important; box-shadow: none !important; }
}