@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* =====================
   SHARED / ROOT
   ===================== */
:root {
  /* Login palette */
  --accent-color: #0ea5e9;
  --base-color: white;
  --text-color: #2E2B41;
  --input-color: #F3F0FF;

  /* Sidebar / Dashboard palette */
  --base-clr: #11121a;
  --line-clr: #42434a;
  --hover-clr: #222533;
  --sidebar-text-clr: #e6e6ef;
  --accent-clr: #0ea5e9;
  --secondary-text-clr: #b0b3c1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12pt;
  color: var(--text-color);
}

/* =====================
   LOGIN / SIGNUP PAGES
   ===================== */
body.auth-page {
  min-height: 100vh;
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-position: right;
  overflow: hidden;
  text-align: center;
}

body.auth-page h1 {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
}

.wrapper {
  background-color: var(--base-color);
  height: 100vh;
  width: max(40%, 600px);
  padding: 10px;
  border-radius: 0 20px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  width: min(400px, 100%);
  margin-top: 20px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

form > div {
  width: 100%;
  display: flex;
  justify-content: center;
}

form label {
  flex-shrink: 0;
  height: 50px;
  width: 50px;
  background-color: var(--accent-color);
  fill: var(--base-color);
  color: var(--base-color);
  border-radius: 10px 0 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 500;
  transition: background-color 150ms ease;
}

form input, form select {
  flex-grow: 1;
  min-width: 0;
  height: 50px;
  padding: 1em;
  font: inherit;
  border-radius: 0 10px 10px 0;
  border: 2px solid var(--input-color);
  border-left: none;
  background-color: var(--input-color);
  transition: 150ms ease;
  appearance: none;
  cursor: pointer;
  color: var(--text-color);
}

/* Restore normal input behaviour for dashboard forms (overrides the auth-page rule above) */
body.dashboard-page form input,
body.dashboard-page form select {
  appearance: auto;
  cursor: text;
  height: auto;
  border-radius: 0;
  border: none;
  background-color: transparent;
  flex-grow: unset;
  padding: unset;
}

/* Fix for placeholder and invalid text colors in Dark Mode */
body.dashboard-page form input::placeholder,
body.dashboard-page form textarea::placeholder {
  color: var(--secondary-text-clr);
  opacity: 1;
}

body.dashboard-page form select:invalid,
body.dashboard-page form select option[value=""][disabled] {
  color: var(--secondary-text-clr);
}

form input:hover, form select:hover { border-color: var(--accent-color); }
form input:focus, form select:focus { outline: none; border-color: var(--text-color); }
form div:has(input:focus) > label,
form div:has(select:focus) > label { background-color: var(--text-color); }
form input::placeholder { color: var(--text-color); }
form select:invalid { color: var(--text-color); }

form select {
  line-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
}

form button {
  margin-top: 10px;
  border: none;
  border-radius: 1000px;
  padding: .85em 4em;
  background-color: var(--accent-color);
  color: var(--base-color);
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: 150ms ease;
}

form button:hover, form button:focus {
  background-color: var(--text-color);
  outline: none;
}

a { text-decoration: none; color: var(--accent-color); }
a:hover { text-decoration: underline; }

/* Error states */
form div.incorrect label { background-color: #f06272; }
form div.incorrect input,
form div.incorrect select { border-color: #f06272; }
#error-message { color: #f06272; }

svg { fill: white; }

/* Slide animations */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
.slide-in-left  { animation: slideInLeft  500ms cubic-bezier(0.77,0,0.175,1) both; }
.slide-in-right { animation: slideInRight 500ms cubic-bezier(0.77,0,0.175,1) both; }
.slide-out-left { animation: slideOutLeft 500ms cubic-bezier(0.77,0,0.175,1) both; }

/* Hero / background text */
.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8vw;
  pointer-events: none;
  z-index: 1;
}
.hero-content { max-width: 620px; padding: 40px; text-align: left; color: white; }
.hero-content h1 {
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-content p { font-size: 1.15rem; font-weight: 400; max-width: 520px; opacity: 0.95; }

/* Logo on auth pages */
.auth-logo {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-logo img { height: 64px; width: auto; object-fit: contain; }
.auth-logo .logo-text {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: white;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .wrapper { width: min(600px, 100%); border-radius: 0; }
}
@media (max-width: 960px) {
  .hero-text { display: none; }
  .auth-logo { right: 20px; top: 20px; }
  .auth-logo img { height: 32px; }
}

/* =====================
   DASHBOARD PAGES
   ===================== */
body.dashboard-page {
  min-height: 100vh;
  background-color: var(--base-clr);
  color: var(--sidebar-text-clr);
  display: grid;
  grid-template-columns: auto 1fr;
  line-height: 1.5rem;
  text-align: left;
}

/* ---- Sidebar ---- */
#sidebar {
  height: 100vh;
  width: 250px;
  padding: 5px 1em;
  background-color: var(--base-clr);
  border-right: 1px solid var(--line-clr);
  position: sticky;
  top: 0;
  align-self: start;
  transition: 300ms ease-in-out;
  overflow: hidden;
  text-wrap: nowrap;
}
#sidebar.close { padding: 5px; width: 60px; }

#sidebar ul { list-style: none; }

#sidebar > ul > li:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: .5em 0;
}
.sidebar-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.sidebar-logo-area img { height: 32px; width: auto; object-fit: contain; flex-shrink: 0; }
.sidebar-brand {
  font-weight: 700;
  font-size: .9rem;
  color: var(--sidebar-text-clr);
  white-space: nowrap;
  overflow: hidden;
}

#sidebar ul li.active a {
  color: var(--accent-clr);
}
#sidebar ul li.active a svg { fill: var(--accent-clr); }

#sidebar a, #sidebar .dropdown-btn {
  border-radius: .5em;
  padding: .85em;
  text-decoration: none;
  color: var(--sidebar-text-clr);
  display: flex;
  align-items: center;
  gap: 1em;
}
.dropdown-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
#sidebar svg { flex-shrink: 0; fill: var(--sidebar-text-clr); }
#sidebar a span, #sidebar .dropdown-btn span {
  flex-grow: 1;
  min-width: 0; /* allow long labels to shrink so trailing carets stay right-aligned */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* keep every dropdown caret pinned to the same right edge */
.dropdown-btn svg:last-child { margin-left: auto; }
#sidebar a:hover, #sidebar .dropdown-btn:hover { background-color: var(--hover-clr); }

#sidebar .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms ease-in-out;
}
#sidebar .sub-menu > div { overflow: hidden; }
#sidebar .sub-menu.show { grid-template-rows: 1fr; }
.dropdown-btn svg { transition: 200ms ease; }
.rotate svg:last-child { rotate: 180deg; }
#sidebar .sub-menu a { padding-left: 2em; }

#toggle-btn {
  margin-left: auto;
  padding: .75em;
  border: none;
  border-radius: .5em;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
#toggle-btn svg { transition: rotate 150ms ease; fill: var(--sidebar-text-clr); }
#toggle-btn:hover { background-color: var(--hover-clr); }

/* Sidebar user info footer */
.sidebar-user {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1em;
  border-top: 1px solid var(--line-clr);
  display: flex;
  align-items: center;
  gap: .75em;
  overflow: hidden;
}
.sidebar-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background-color: var(--accent-clr);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: white;
}
.sidebar-user-info { overflow: hidden; flex-grow: 1; }
.sidebar-user-info .s-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info .s-role { font-size: .72rem; color: var(--secondary-text-clr); text-transform: capitalize; }
.sidebar-logout {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: .4em;
  border-radius: .4em; display: flex; align-items: center; justify-content: center;
}
.sidebar-logout:hover { background-color: var(--hover-clr); }
.sidebar-logout svg { fill: var(--secondary-text-clr); }

/* HR-only badge in sidebar */
.hr-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1em .4em;
  border-radius: 999px;
  background: #2d1e1e;
  color: #f06272;
  border: 1px solid #f06272;
  vertical-align: middle;
  margin-left: .3em;
}

/* Role badge in sidebar */
.role-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15em .5em;
  border-radius: 999px;
  margin-left: auto;
}
.role-badge.user     { background-color: #2a2d3e; color: var(--accent-clr); border: 1px solid var(--accent-clr); }
.role-badge.approver { background-color: #1e2d1e; color: #5cba72;            border: 1px solid #5cba72; }


/* ---- Main content ---- */
main.dashboard-main {
  padding: min(30px, 5%) min(30px, 5%) min(30px, 5%) 36px;
  overflow-y: auto;
}

.page-section { display: none; }
.page-section.active { display: block; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 18px 24px;
  min-height: 64px;
  border-bottom: 1px solid var(--line-clr);
}
.topbar h2 { font-size: 1.4rem; font-weight: 700; }
.topbar .topbar-right { display: flex; align-items: center; gap: 1em; color: var(--secondary-text-clr); font-size: .85rem; }

/* Cards */
.cards-grid {
  display: grid;
  /* Fill the full content width — 4 equal tiles on desktop, collapsing
     responsively. minmax(0,1fr) lets tiles shrink instead of overflowing. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards-grid { grid-template-columns: 1fr; } }
.card {
  background-color: var(--hover-clr);
  border: 1px solid var(--line-clr);
  border-radius: 1em;
  padding: 1.5em;
}
.card .card-label { font-size: .78rem; color: var(--secondary-text-clr); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.card .card-value { font-size: 1.8rem; font-weight: 700; }
.card .card-sub   { font-size: .78rem; color: var(--secondary-text-clr); margin-top: 4px; }
.card.accent      { border-color: var(--accent-clr); }
.card.accent .card-value { color: var(--accent-clr); }
.card.card-active { border: 2px solid var(--tile, #7c6eea) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tile, #7c6eea) 22%, transparent) !important; }

/* =====================================================
   Home stat tiles — color-coded filter cards with icons
   ===================================================== */
.stat-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-tile::before {                 /* colored accent strip along the top */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tile, var(--accent-clr));
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tile, var(--accent-clr));
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.stat-tile .stat-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stat-tile .stat-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--tile, var(--accent-clr));
  background: color-mix(in srgb, var(--tile, var(--accent-clr)) 16%, transparent);
}
.stat-tile .stat-icon svg { width: 22px; height: 22px; display: block; }
.stat-tile .stat-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tile, var(--accent-clr));
  opacity: .55;
}
/* "N this month" metric pill — top-right of the tile head */
.stat-tile .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  color: var(--tile, var(--accent-clr));
  background: color-mix(in srgb, var(--tile, var(--accent-clr)) 14%, transparent);
  white-space: nowrap;
}
.stat-tile .stat-trend::before {        /* small up-tick glyph */
  content: "↑";
  font-size: .72rem;
  line-height: 1;
}
.stat-tile .stat-trend.is-zero {        /* muted when nothing new this month */
  color: var(--secondary-text-clr);
  background: color-mix(in srgb, var(--secondary-text-clr) 12%, transparent);
}
.stat-tile .stat-trend.is-zero::before { content: "–"; }
.stat-tile .card-value {
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--tile, var(--accent-clr));
}
.stat-tile .card-label { margin-top: 4px; margin-bottom: 2px; }

/* Per-tile color identity */
#usr-card-pending,  #card-pending  { --tile: #f59e0b; }  /* amber  — waiting     */
#usr-card-approved, #card-approved { --tile: #16a34a; }  /* green  — success     */
#usr-card-rejected, #card-rejected { --tile: #ef4444; }  /* red    — declined    */
#usr-card-all,      #card-all      { --tile: #0ea5e9; }  /* sky    — total/info  */

/* Keyboard focus — interactive tiles must show a visible focus ring */
.stat-tile:focus-visible {
  outline: none;
  border-color: var(--tile, var(--accent-clr));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile, var(--accent-clr)) 35%, transparent);
}

/* "Action required" attention cue on the pending tile's status dot */
#card-pending .stat-dot {
  opacity: 1;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tile, var(--accent-clr)) 60%, transparent);
  animation: stat-dot-pulse 2s ease-out infinite;
}
@keyframes stat-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tile, var(--accent-clr)) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tile, var(--accent-clr)) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tile, var(--accent-clr)) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  #card-pending .stat-dot { animation: none; }
  .stat-tile { transition: none; }
}

/* Light mode: white card, colored accents preserved */
body.lightmode .stat-tile { background: #ffffff; }
body.lightmode .stat-tile .card-value { color: var(--tile, var(--accent-clr)); }

/* Table */
.table-wrap {
  background-color: var(--hover-clr);
  border: 1px solid var(--line-clr);
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 28px;
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table-wrap th {
  text-align: left; padding: .9em 1.2em;
  background-color: #1a1c2b;
  color: var(--secondary-text-clr);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table-wrap td { padding: .85em 1.2em; border-top: 1px solid var(--line-clr); }
.table-wrap tr:hover td { background-color: #1e2030; }

/* Status badges */
.badge {
  display: inline-block;
  padding: .2em .65em;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}
.badge.pending  { background: #2e2a14; color: #f0c040; border: 1px solid #f0c040; }
.badge.approved { background: #1e2d1e; color: #5cba72; border: 1px solid #5cba72; }
.badge.rejected { background: #2d1e1e; color: #f06272; border: 1px solid #f06272; }
.badge.for_reprocess { background: #2d1e1e; color: #f0a040; border: 1px solid #f0a040; }
.badge.withdrawn { background: #26262e; color: #9aa3b2; border: 1px solid #6b7280; }

/* Inline "Withdraw" action shown beside the status badge on a submitter's own
   pending requests (rendered by filterUserTable in js/dashboard.js). */
.withdraw-btn {
  display: inline-block;
  margin-left: .5em;
  padding: .15em .6em;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #f06272;
  border: 1px solid #f06272;
  transition: background .15s, color .15s;
}
.withdraw-btn:hover { background: #f06272; color: #1a1a1a; }
.withdraw-btn:active { transform: scale(.97); }

/* Action buttons */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1.2em;
  border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; border: none; transition: 150ms ease;
}
.btn-primary   { background-color: var(--accent-clr); color: white; }
.btn-primary:hover { background-color: #6f5ee0; }
.btn-ghost     { background: none; color: var(--secondary-text-clr); border: 1px solid var(--line-clr); }
.btn-ghost:hover { background-color: var(--hover-clr); color: var(--sidebar-text-clr); }
.btn-approve   { background: #1e2d1e; color: #5cba72; border: 1px solid #5cba72; font-size:.75rem; padding:.3em .8em; border-radius:999px; cursor:pointer; font-weight:600; transition:150ms; }
.btn-approve:hover { background: #263d26; }
.btn-reject    { background: #2d1e1e; color: #f06272; border: 1px solid #f06272; font-size:.75rem; padding:.3em .8em; border-radius:999px; cursor:pointer; font-weight:600; transition:150ms; }
.btn-reject:hover  { background: #3d2626; }
/* Send back to the applicant for editing — amber, between approve & reject. */
.btn-return    { background: #2d2814; color: #f0a040; border: 1px solid #f0a040; font-size:.75rem; padding:.3em .8em; border-radius:999px; cursor:pointer; font-weight:600; transition:150ms; }
.btn-return:hover  { background: #3d3620; }

/* Section headings */
.section-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--sidebar-text-clr);
}

/* Empty state */
.empty-state { text-align: center; padding: 3em; color: var(--secondary-text-clr); font-size: .9rem; }

/* Approver-only notice */
.approver-notice {
  display: flex; align-items: center; gap: .75em;
  background: #1e2d1e; border: 1px solid #5cba72;
  border-radius: .75em; padding: 1em 1.4em;
  color: #5cba72; font-size: .85rem; margin-bottom: 24px;
}

/* ---- Responsive sidebar ---- */
@media (max-width: 800px) {
  body.dashboard-page { grid-template-columns: 1fr; }
  main.dashboard-main { padding: 1.5em 1em 80px 1em; }

  #sidebar {
    height: 60px;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--line-clr);
    padding: 0;
    position: fixed;
    top: unset;
    bottom: 0;
  }
  #sidebar > ul {
    padding: 0;
    display: grid;
    grid-auto-columns: 60px;
    grid-auto-flow: column;
    align-items: center;
    overflow-x: scroll;
  }
  #sidebar ul li { height: 100%; }
  #sidebar ul a, #sidebar ul .dropdown-btn {
    width: 60px; height: 60px;
    padding: 0; border-radius: 0;
    justify-content: center;
  }
  #sidebar ul li span,
  #sidebar ul li:first-child,
  .dropdown-btn svg:last-child,
  .sidebar-user,
  .role-badge { display: none; }

  #sidebar ul li .sub-menu.show {
    position: fixed; bottom: 60px; left: 0;
    height: 60px; width: 100%;
    background-color: var(--hover-clr);
    border-top: 1px solid var(--line-clr);
    display: flex; justify-content: center;
  }
  #sidebar ul li .sub-menu.show > div { overflow-x: auto; }
  #sidebar ul li .sub-menu.show li { display: inline-flex; }
  #sidebar ul li .sub-menu.show a { box-sizing: border-box; padding: 1em; width: auto; justify-content: center; }
}

/* =====================================================
   CASH ADVANCE FORM – UPDATED (matches screenshot layout)
   ===================================================== */
/* Light mode overrides for form elements inside .table-wrap */
body.lightmode .dashboard-main .table-wrap input,
body.lightmode .dashboard-main .table-wrap select,
body.lightmode .dashboard-main .table-wrap textarea {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}
body.lightmode .dashboard-main .table-wrap input:focus,
body.lightmode .dashboard-main .table-wrap select:focus,
body.lightmode .dashboard-main .table-wrap textarea:focus {
  border-color: #0ea5e9;
  background: #ffffff;
  outline: none;
}
body.lightmode .dashboard-main .table-wrap input[readonly] {
  background: #f3f4f6;
  color: #6b7280;
}
body.lightmode .dashboard-main .table-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%236b7280'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.2em;
  padding-right: 2.5rem;
  appearance: none;
}

/* Compliance notice inside .table-wrap */
body.lightmode .dashboard-main .table-wrap [style*="background:rgba(14, 165, 233,0.1)"] {
  background: #f0f9ff !important;
  border-left-color: #0ea5e9 !important;
}
body.lightmode .dashboard-main .table-wrap [style*="background:rgba(14, 165, 233,0.1)"] p {
  color: #374151;
}
body.lightmode .dashboard-main .table-wrap [style*="background:rgba(14, 165, 233,0.1)"] svg {
  fill: #0ea5e9;
}

/* =====================================================
   CASH ADVANCE FORM – CLASS‑BASED VERSION
   ===================================================== */

/* Container for the entire form */
.ca-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100%;
}

/* Section header (Request Information / Department Approvals) */
.ca-section-title {
  margin: 0 0 1rem 0;
  font-weight: 600;
  border-bottom: 1px solid var(--line-clr);
  padding-bottom: 0.5rem;
}

/* Compliance notice */
.ca-compliance {
  background: rgba(14, 165, 233, 0.1);
  border-left: 4px solid var(--accent-clr);
  border-radius: 0 8px 8px 0;
  padding: 1rem;
  display: flex;
  gap: 0.8rem;
}

.ca-compliance svg {
  flex-shrink: 0;
  fill: var(--accent-clr);
}

.ca-compliance-content {
  flex: 1;
}

.ca-compliance-title {
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: var(--accent-clr);
}

.ca-compliance-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--secondary-text-clr);
}

/* Form actions (Cancel / Submit) */
.ca-actions {
  display: flex;
  gap: 1rem;
}

/* Responsive */
@media (max-width: 700px) {
  .ca-grid-3,
  .ca-grid-4,
  .ca-grid-2-1 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =====================================================
   LIGHT THEME OVERRIDES FOR CASH ADVANCE FORM
   ===================================================== */
body.lightmode .dashboard-main .ca-field input,
body.lightmode .dashboard-main .ca-field select,
body.lightmode .dashboard-main .ca-field textarea {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

body.lightmode .dashboard-main .ca-field input:focus,
body.lightmode .dashboard-main .ca-field select:focus,
body.lightmode .dashboard-main .ca-field textarea:focus {
  border-color: #0ea5e9;
  background: #ffffff;
}

body.lightmode .dashboard-main .ca-field input[readonly] {
  background: #f3f4f6;
  color: #6b7280;
}

body.lightmode .dashboard-main .ca-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%236b7280'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
}

body.lightmode .dashboard-main .ca-attach-box {
  background: #f9fafb;
  border-color: #d1d5db;
}

body.lightmode .dashboard-main .ca-attach-text {
  color: #6b7280;
}

body.lightmode .dashboard-main .ca-compliance {
  background: #f0f9ff;
  border-left-color: #0ea5e9;
}

body.lightmode .dashboard-main .ca-compliance-title {
  color: #5b4fcf;
}

body.lightmode .dashboard-main .ca-compliance-message {
  color: #6b7280;
}
/* =====================================================
   CASH ADVANCE FORM – LAYOUT OVERRIDE
   Overrides the global `form` rule (width: min(400px,100%)
   and align-items: center) so the CA form fills the page.
   ===================================================== */
#ca-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
  gap: 0 !important;
}

#ca-form > * {
  width: 100%;
}

.ca-wrap {
  padding: 1.5em 2em 2em;
}

.ca-meta-row {
  display: flex;
  gap: 2em;
  margin-bottom: 1.25rem;
  align-items: center;
}

.ca-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.ca-meta-item .ca-meta-label {
  font-size: 0.75rem;
  color: var(--secondary-text-clr);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ca-meta-item .ca-meta-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-clr);
}

.ca-divider {
  border: none;
  border-top: 1px solid var(--line-clr);
  margin: 1.25rem 0;
}

.ca-block {
  margin-bottom: 1.5rem;
}

.ca-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary-text-clr);
  margin-bottom: 0.85rem;
}

.ca-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.ca-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

.ca-field {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.ca-field label {
  /* override global form label which makes it a purple box */
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--secondary-text-clr) !important;
  fill: unset !important;
  padding: 0 !important;
  justify-content: unset !important;
  flex-shrink: unset !important;
}

.ca-field .ca-inp,
.ca-field .ca-textarea {
  /* override global form input (which caps width and adds left border-radius) */
  flex-grow: unset !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  color: var(--sidebar-text-clr) !important;
  background: var(--hover-clr) !important;
  border: 1.5px solid var(--line-clr) !important;
  border-radius: 0.45em !important;
  outline: none !important;
  appearance: auto !important;
  cursor: text !important;
  pointer-events: auto !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.ca-field .ca-textarea {
  height: auto !important;
  padding: 10px 12px !important;
  resize: vertical !important;
}

.ca-field .ca-inp:hover,
.ca-field .ca-textarea:hover {
  border-color: var(--accent-clr) !important;
}

.ca-field .ca-inp:focus,
.ca-field .ca-textarea:focus {
  border: 2px solid #0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18) !important;
  background: #1a1b2e !important;
}

body.lightmode .ca-field .ca-inp:focus,
body.lightmode .ca-field .ca-textarea:focus {
  background: #ffffff !important;
  color: #1e2038 !important;
  -webkit-text-fill-color: #1e2038;
}

.ca-field .ca-inp:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.ca-field select.ca-inp {
  appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23b0b3c1'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  padding-right: 2rem !important;
}

.ca-actions {
  display: flex !important;
  gap: 0.75em !important;
  justify-content: flex-end !important;
  padding-top: 0.5em !important;
  width: 100% !important;
}

@media (max-width: 700px) {
  .ca-grid-2, .ca-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Wrapper div that houses the CA form — ensures full width */
#ca-form-wrap {
  width: 100%;
}

/* The form itself — override the global form rule completely */
#ca-form-wrap form#ca-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block !important;
  align-items: unset !important;
  gap: 0 !important;
}

/* Override global: form > div { justify-content: center } */
#ca-form-wrap form#ca-form > * {
  width: 100%;
}

/* Override global: form label (the purple icon box) inside ca-field */
#ca-form-wrap .ca-field label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--secondary-text-clr) !important;
  fill: unset !important;
  padding: 0 !important;
  margin: 0 0 0.35em !important;
  flex-shrink: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
  transition: none !important;
}

/* Override global: form input, form select */
#ca-form-wrap .ca-inp {
  flex-grow: unset !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  color: var(--sidebar-text-clr) !important;
  background-color: var(--hover-clr) !important;
  border: 1.5px solid var(--line-clr) !important;
  border-left: 1.5px solid var(--line-clr) !important;
  border-radius: 0.45em !important;
  outline: none !important;
  appearance: auto !important;
  cursor: text !important;
  pointer-events: auto !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}

#ca-form-wrap select.ca-inp {
  appearance: none !important;
  cursor: pointer !important;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23b0b3c1'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  padding-right: 2rem !important;
}

#ca-form-wrap .ca-inp:hover {
  border-color: var(--accent-clr) !important;
}

#ca-form-wrap .ca-inp:focus,
#ca-form-wrap .ca-textarea:focus {
  border: 2px solid #0ea5e9 !important;
  border-left: 2px solid #0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18) !important;
  background-color: #1a1b2e !important;
  outline: none !important;
}

body.lightmode #ca-form-wrap .ca-inp:focus,
body.lightmode #ca-form-wrap .ca-textarea:focus {
  background-color: #ffffff !important;
  color: #1e2038 !important;
  -webkit-text-fill-color: #1e2038;
}

#ca-form-wrap .ca-textarea {
  flex-grow: unset !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 10px 12px !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  color: var(--sidebar-text-clr) !important;
  background-color: var(--hover-clr) !important;
  border: 1.5px solid var(--line-clr) !important;
  border-radius: 0.45em !important;
  outline: none !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

#ca-form-wrap .ca-textarea:hover {
  border-color: var(--accent-clr) !important;
}

/* ── CA redesign: override global form rules for .ca-f fields ── */
#ca-form-wrap .ca-f > label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--sidebar-text-clr) !important;
  fill: unset !important;
  padding: 0 !important;
  margin: 0 0 .35em !important;
  flex-shrink: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
  transition: none !important;
  letter-spacing: normal !important;
}

#ca-form-wrap .ca-f .ca-inp {
  flex-grow: unset !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: .88rem !important;
  font-family: inherit !important;
  color: var(--sidebar-text-clr) !important;
  background-color: var(--hover-clr) !important;
  border: 1.5px solid var(--line-clr) !important;
  border-left: 1.5px solid var(--line-clr) !important;
  border-radius: .45em !important;
  outline: none !important;
  appearance: auto !important;
  cursor: text !important;
  pointer-events: auto !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}

/* appearance:none out-specifies the `appearance: auto !important` in the
   .ca-inp block above (1 ID + 2 classes + 1 type beats 1 ID + 2 classes),
   which otherwise re-adds Chrome's native chevron on top of the custom
   triangle background set further down — the double-arrow bug. */
#ca-form-wrap .ca-f select.ca-inp { cursor: pointer !important; line-height: normal !important; padding-top: 0 !important; padding-bottom: 0 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; }
#ca-form-wrap .ca-f .ca-inp:hover,
#ca-form-wrap .ca-f .ca-ta:hover  { border-color: var(--accent-clr) !important; }
#ca-form-wrap .ca-f .ca-inp:focus,
#ca-form-wrap .ca-f .ca-ta:focus  { border: 2px solid var(--accent-clr) !important; border-left: 2px solid var(--accent-clr) !important; box-shadow: 0 0 0 4px rgba(14, 165, 233,.18) !important; background-color: #1a1b2e !important; outline: none !important; }

/* Light mode: override the hardcoded dark focus background above */
body.lightmode #ca-form-wrap .ca-f .ca-inp:focus,
body.lightmode #ca-form-wrap .ca-f .ca-ta:focus {
  background-color: #ffffff !important;
  color: #1e2038 !important;
  -webkit-text-fill-color: #1e2038;
}

#ca-form-wrap .ca-f .ca-inp[readonly],
#ca-form-wrap .ca-f .ca-inp:disabled { opacity: .55 !important; cursor: not-allowed !important; }

#ca-form-wrap .ca-f .ca-ta {
  flex-grow: unset !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  padding: 10px 12px !important;
  font-size: .88rem !important;
  font-family: inherit !important;
  color: var(--sidebar-text-clr) !important;
  background-color: var(--hover-clr) !important;
  border: 1.5px solid var(--line-clr) !important;
  border-radius: .45em !important;
  outline: none !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  transition: border-color .15s, box-shadow .15s !important;
}

/* form > div override for ca grids */
#ca-form-wrap form#ca-form > div,
#ca-form-wrap form#ca-form .ca-g4,
#ca-form-wrap form#ca-form .ca-g3,
#ca-form-wrap form#ca-form .ca-g2 {
  justify-content: unset !important;
  width: 100% !important;
}

/* =====================================================================
   DASH-INPUT — reusable class for all inline-styled form inputs.
   Replaces the hardcoded style="background:var(--hover-clr);..."
   on every <input>, <textarea>, and <select> in the dashboard forms.
   This lets the body.lightmode rules below properly override them,
   since CSS classes can be overridden by other rules — inline styles
   cannot (they always win regardless of what lightmode CSS says).
   ===================================================================== */
.dash-input {
  background: var(--hover-clr);
  border: 1px solid var(--line-clr);
  border-radius: .5em;
  padding: .75em 1em;
  color: var(--sidebar-text-clr);
  font: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.25s ease, color 0.25s ease;
}

.dash-input::placeholder {
  color: var(--secondary-text-clr);
  opacity: 1;
}

.dash-input:hover {
  border-color: var(--accent-clr);
}

.dash-input:focus {
  border-color: var(--accent-clr);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

textarea.dash-input {
  resize: vertical;
  padding: .75em 1em;
}

select.dash-input {
  appearance: none;
  cursor: pointer;
}

/* ── Light mode: the fix ── */
body.lightmode .dash-input {
  background: #ffffff !important;
  color: #1e2038 !important;
  border-color: #d0d3e0 !important;
  color-scheme: light;
  -webkit-text-fill-color: #1e2038;
}

body.lightmode .dash-input::placeholder {
  color: #5a5e78 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #5a5e78;
}

body.lightmode .dash-input:hover {
  border-color: #0ea5e9 !important;
}

/* IMPORTANT: also set color when focused/active so typed text stays visible */
body.lightmode .dash-input:focus,
body.lightmode .dash-input:active {
  background: #ffffff !important;
  color: #1e2038 !important;
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
  -webkit-text-fill-color: #1e2038;
}

body.lightmode select.dash-input option {
  background: #ffffff;
  color: #1e2038;
}

/* ── Native <select> dropdown lists ──
   Dark mode is the default (no .lightmode class), but without color-scheme the
   browser paints the option popup on a light background while the options
   inherit the near-white theme text color — making them unreadable. Match the
   popup to the active theme and give options explicit theme colors. */
body.dashboard-page select {
  color-scheme: dark;
}
body.dashboard-page.lightmode select {
  color-scheme: light;
}
body.dashboard-page select option {
  background-color: var(--base-clr);
  color: var(--sidebar-text-clr);
}

/* =====================
   THEME TOGGLE BUTTON
   ===================== */
.sidebar-theme-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4em;
  border-radius: .4em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.sidebar-theme-toggle:hover {
  background-color: var(--hover-clr);
}
.sidebar-theme-toggle svg {
  fill: var(--secondary-text-clr);
  transition: fill 0.2s ease;
}

/* In dark mode (default): show moon, hide sun */
.sidebar-theme-toggle .icon-moon { display: block; }
.sidebar-theme-toggle .icon-sun  { display: none;  }

/* In light mode: show sun, hide moon */
body.lightmode .sidebar-theme-toggle .icon-moon { display: none;  }
body.lightmode .sidebar-theme-toggle .icon-sun  { display: block; }


/* =====================
   LIGHT MODE OVERRIDES
   ===================== */
body.lightmode {
  /* Sidebar / Dashboard palette — light */
  --base-clr:           #f4f5fb;
  --line-clr:           #d0d3e0;
  --hover-clr:          #e4e6f2;
  --sidebar-text-clr:   #1e2038;
  --accent-clr:         #0ea5e9;
  --secondary-text-clr: #5a5e78;
}

/* Sidebar background */
body.lightmode #sidebar {
  background-color: #ffffff;
  border-right: 1px solid var(--line-clr);
}

/* Active nav item */
body.lightmode #sidebar li.active > a,
body.lightmode #sidebar li.active > button {
  background-color: #e0f2fe;
  color: var(--accent-clr);
}
body.lightmode #sidebar li.active > a svg,
body.lightmode #sidebar li.active > button svg {
  fill: var(--accent-clr);
}

/* Sidebar text & icons */
body.lightmode #sidebar a,
body.lightmode #sidebar .dropdown-btn,
body.lightmode #sidebar .sidebar-brand {
  color: var(--sidebar-text-clr);
}
body.lightmode #sidebar svg {
  fill: var(--sidebar-text-clr);
}

/* Sidebar user footer */
body.lightmode .sidebar-user {
  border-top-color: var(--line-clr);
  background-color: #ffffff;
}
body.lightmode .sidebar-user-info .s-name {
  color: var(--sidebar-text-clr);
}
body.lightmode .sidebar-logout svg,
body.lightmode .sidebar-theme-toggle svg {
  fill: var(--secondary-text-clr);
}
body.lightmode #sidebar a:hover,
body.lightmode #sidebar .dropdown-btn:hover {
  background-color: #e0f2fe;
}
body.lightmode .sidebar-logout:hover,
body.lightmode .sidebar-theme-toggle:hover {
  background-color: #e0f2fe;
}

/* Main dashboard area */
body.lightmode .dashboard-main {
  background-color: #f4f5fb;
}

/* Topbar */
body.lightmode .topbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--line-clr);
  color: var(--sidebar-text-clr);
}
body.lightmode .topbar h2 {
  color: #2E2B41;
}

/* Cards */
body.lightmode .card {
  background-color: #ffffff;
  border: 1px solid var(--line-clr);
  color: var(--sidebar-text-clr);
}
body.lightmode .card .card-label,
body.lightmode .card .card-sub {
  color: var(--secondary-text-clr);
}
body.lightmode .card .card-value {
  color: var(--sidebar-text-clr);
}
body.lightmode .card.accent {
  background-color: var(--accent-clr);
  color: #fff;
  border: none;
}
body.lightmode .card.accent .card-label,
body.lightmode .card.accent .card-sub,
body.lightmode .card.accent .card-value {
  color: #fff;
}

/* Tables — scoped to .table-wrap only so modal preview tables are not affected */
body.lightmode .table-wrap table {
  background-color: #ffffff;
  color: var(--sidebar-text-clr);
}
body.lightmode .table-wrap thead tr {
  background-color: #e0f2fe;
  color: var(--sidebar-text-clr);
}
body.lightmode .table-wrap th {
  background-color: #e0f2fe;
  color: #2E2B41;
}
body.lightmode .table-wrap tbody tr:hover {
  background-color: #e0f2fe;
}
body.lightmode .table-wrap tr:hover td {
  background-color: #e0f2fe;
}
body.lightmode .table-wrap td,
body.lightmode .table-wrap th {
  border-color: var(--line-clr);
  color: var(--sidebar-text-clr);
}

/* ── Approval table headers: always dark background + white text ──────────
   These headers intentionally use a near-black background (#1a1a2e) with
   white text. We must protect all of them from the global lightmode text
   colour override — both in the Home/CA read-only modals and in the
   CCPRF, SP, UT, and CB preview modals.
   ---------------------------------------------------------------------- */

/* Home-page row-preview modal */
body.lightmode .rp-approval-table th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Cash Advance read-only preview modal */
body.lightmode .ca-approval-table th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Credit Card Request Form (CCPRF) preview modal */
body.lightmode #ccprf-preview-modal .pdf-approval-table th,
body.lightmode #ccprf-preview-modal .pdf-approval-table thead th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.lightmode #ccprf-preview-modal .pdf-approval-table thead tr {
  background: #1a1a2e !important;
  color: #ffffff !important;
}

/* Supplier Payment (SP) preview modal */
body.lightmode .sp-pv-approval-table th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Utilities (UT) preview modal */
body.lightmode .ut-pv-approval-table th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Compensation & Benefits (CB) preview modal */
body.lightmode .cb-pv-approval-table th {
  background: #1a1a2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Form inputs */
body.lightmode input,
body.lightmode select,
body.lightmode textarea {
  background-color: #ffffff;
  color: var(--sidebar-text-clr);
  border-color: var(--line-clr);
}
body.lightmode input::placeholder,
body.lightmode textarea::placeholder {
  color: var(--secondary-text-clr);
}

/* Section headings inside pages */
body.lightmode .page-section h2,
body.lightmode .page-section h3,
body.lightmode .page-section label {
  color: var(--sidebar-text-clr);
}

/* ============================================================================
   Approval Progress sidebar — shown in the right of the request preview modal
   on both the User and Approver dashboards so requesters and approvers can
   track where a request sits in the approval chain. Shared by
   #req-preview-modal (rp-*) and #ap-req-preview-modal (ap-rp-*); the step
   markup is generated by buildApprovalProgress() in js/dashboard.js.
   Always rendered on the light modal surface, so it is not theme-scoped.
   ========================================================================== */

/* Flex row that holds the scrollable PDF body + the progress sidebar. */
.rp-preview-content-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.rp-progress-sidebar {
  flex: 0 0 260px;
  width: 260px;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  padding: 16px 16px 20px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #1e293b;
}

.rp-prog-head { margin-bottom: 16px; }
.rp-prog-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 9px;
}
.rp-prog-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #475569;
}
.rp-prog-badge {
  font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.rp-prog-badge.current  { background: #dbeafe; color: #1d4ed8; }
.rp-prog-badge.done     { background: #dcfce7; color: #15803d; }
.rp-prog-badge.rejected { background: #fee2e2; color: #b91c1c; }
.rp-prog-bar {
  height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.rp-prog-bar > span {
  display: block; height: 100%; background: #2563eb; border-radius: 999px;
  transition: width .4s ease;
}
.rp-prog-count { font-size: .64rem; color: #64748b; margin-top: 6px; font-weight: 600; }

.rp-prog-list { list-style: none; margin: 0; padding: 0; }
.rp-prog-step { position: relative; display: flex; gap: 10px; padding-bottom: 16px; }
.rp-prog-step.last { padding-bottom: 0; }
.rp-prog-rail { position: relative; flex: 0 0 22px; display: flex; justify-content: center; }
/* Connector line running down from each node except the last. */
.rp-prog-step:not(.last) .rp-prog-rail::after {
  content: ''; position: absolute; top: 22px; bottom: -6px; left: 50%;
  width: 2px; transform: translateX(-50%); background: #cbd5e1;
}
.rp-prog-node {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #cbd5e1; box-sizing: border-box;
  flex-shrink: 0;
}
.rp-prog-node svg { width: 13px; height: 13px; fill: #fff; }

.rp-prog-step.done   .rp-prog-node { background: #16a34a; border-color: #16a34a; }
.rp-prog-step.done   .rp-prog-rail::after { background: #16a34a; }
.rp-prog-step.current .rp-prog-node {
  background: #2563eb; border-color: #2563eb;
  animation: rpProgPulse 2s infinite;
}
.rp-prog-step.current .rp-prog-node::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.rp-prog-step.rejected .rp-prog-node { background: #dc2626; border-color: #dc2626; }
.rp-prog-step.skipped  .rp-prog-node { background: #94a3b8; border-color: #94a3b8; }
.rp-prog-step.skipped  .rp-prog-rail::after { background: #cbd5e1; }
.rp-prog-step.pending  .rp-prog-node::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1;
}

.rp-prog-body  { padding-top: 1px; min-width: 0; }
.rp-prog-label { font-size: .78rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.rp-prog-role  { font-size: .64rem; color: #64748b; margin-top: 1px; }
.rp-prog-name  { font-size: .66rem; color: #334155; font-weight: 600; margin-top: 2px; }
.rp-prog-meta  { font-size: .62rem; color: #94a3b8; margin-top: 3px; }
.rp-prog-step.done    .rp-prog-meta  { color: #15803d; }
.rp-prog-step.current .rp-prog-meta  { color: #1d4ed8; font-weight: 700; }
.rp-prog-step.current .rp-prog-label { color: #1d4ed8; }
.rp-prog-step.rejected .rp-prog-label { color: #b91c1c; }
.rp-prog-step.rejected .rp-prog-meta  { color: #b91c1c; font-weight: 700; }
.rp-prog-step.pending  .rp-prog-label { color: #94a3b8; font-weight: 600; }
.rp-prog-step.skipped  .rp-prog-label { color: #94a3b8; font-weight: 600; }
.rp-prog-step.skipped  .rp-prog-meta  { color: #94a3b8; font-style: italic; }

@keyframes rpProgPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.35); }
  70%  { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

/* Below the modal's comfortable width, drop the sidebar so the PDF page keeps
   its full width (the same progress is still visible in the approval tables). */
@media (max-width: 1023px) {
  .rp-progress-sidebar { display: none; }
}

/* Sub-menu background */
body.lightmode .sub-menu {
  background-color: #f0f1f9;
}
body.lightmode .sub-menu a {
  color: var(--sidebar-text-clr);
}
body.lightmode .sub-menu a:hover {
  background-color: var(--hover-clr);
}

/* Toggle sidebar button */
body.lightmode #toggle-btn svg {
  fill: var(--sidebar-text-clr);
}

/* Smooth theme transition */
body, #sidebar, .dashboard-main, .topbar,
.card, table, input, select, textarea,
.sidebar-user, .sub-menu {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}



/* ======================================================================
   CA FORM — SINGLE DROPDOWN ICON, WITH BREATHING ROOM
   ----------------------------------------------------------------------
   This block used to force `appearance: auto` + `background-image: none`
   to kill a double-icon bug. That worked, but it handed the Charging /
   Department fields Chrome's NATIVE arrow, which the browser pins hard
   against the right border — a different glyph and a tighter inset than
   every other select on the page.

   `appearance: none` removes the native icon on its own (no double icon),
   so the custom chevron is restored here at the same 20px size and the
   same generous inset the Department Approvals selects use below.
   Scoped to .ca-inp only — .ca-appr-select keeps its own rules.
   ====================================================================== */

#ca-form-wrap select.ca-inp,
.ca-f select.ca-inp {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23b0b3c1'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .85rem center !important;
  background-size: 20px 20px !important;
  padding-right: 2.4rem !important;
}
#ca-form-wrap select.ca-inp::-ms-expand,
.ca-f select.ca-inp::-ms-expand { display: none; }

body.lightmode #ca-form-wrap select.ca-inp,
body.lightmode .ca-f select.ca-inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%236b7280'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
}

/* Ensure inputs/textareas are unaffected */
#ca-form-wrap input,
#ca-form-wrap textarea {
  background-image: none !important;
}


body.lightmode #ca-form-wrap input,
body.lightmode #ca-form-wrap textarea,
body.lightmode #ca-form-wrap select {
  background-color: #ffffff !important;
  color: #1e2038 !important;        /* solid readable dark text */
  border-color: #d0d3e0 !important;
}

/* Placeholder text (light mode) */
body.lightmode #ca-form-wrap input::placeholder,
body.lightmode #ca-form-wrap textarea::placeholder {
  color: #5a5e78 !important;
  opacity: 1 !important;
}

/* Ensure focus state stays readable */
body.lightmode #ca-form-wrap input:focus,
body.lightmode #ca-form-wrap textarea:focus,
body.lightmode #ca-form-wrap select:focus {
  background-color: #ffffff !important;
  color: #1e2038 !important;
}


/* ======================================================================
   CB FORM — DROPDOWN + LIGHT-MODE FIX (mirrors CA fix block above)
   ====================================================================== */

#cb-form-wrap select,
#cb-form-wrap select.cb-inp {
  background-image: none !important;
  padding-right: 0.75rem !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
}

#cb-form-wrap input,
#cb-form-wrap textarea {
  background-image: none !important;
}

body.lightmode #cb-form-wrap input,
body.lightmode #cb-form-wrap textarea,
body.lightmode #cb-form-wrap select {
  background-color: #ffffff !important;
  color: #1e2038 !important;
  border-color: #d0d3e0 !important;
}

body.lightmode #cb-form-wrap input::placeholder,
body.lightmode #cb-form-wrap textarea::placeholder {
  color: #5a5e78 !important;
  opacity: 1 !important;
}

body.lightmode #cb-form-wrap input:focus,
body.lightmode #cb-form-wrap textarea:focus,
body.lightmode #cb-form-wrap select:focus {
  background-color: #ffffff !important;
  color: #1e2038 !important;
}

/* ======================================================================
   DEPARTMENT APPROVALS TILE SELECTS — exempt from the CA/CB dropdown
   fixes above. The .ca-appr-select / .cb-appr-select fields use a custom
   chevron and a filled light-mode background by design (tile-card layout
   defined in dashboard-user.html).
   ====================================================================== */
#ca-form-wrap select.ca-appr-select,
#cb-form-wrap select.cb-appr-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2.3rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 -960 960 960' width='16px' fill='%23b0b3c1'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
}
body.lightmode #ca-form-wrap select.ca-appr-select,
body.lightmode #cb-form-wrap select.cb-appr-select {
  background-color: #f2f4f7 !important;
  border-color: #f2f4f7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 -960 960 960' width='16px' fill='%236b7280'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
}
body.lightmode #ca-form-wrap select.ca-appr-select:hover,
body.lightmode #cb-form-wrap select.cb-appr-select:hover {
  border-color: var(--accent-clr) !important;
}
body.lightmode #ca-form-wrap select.ca-appr-select:focus,
body.lightmode #cb-form-wrap select.cb-appr-select:focus {
  background-color: #ffffff !important;
  border-color: var(--accent-clr) !important;
}

/* ======================================================================
   CB LINE-ITEM TABLE SELECTS — exempt from the CB dropdown fix above.
   The .cb-row-sel fields draw their own single chevron (defined in
   dashboard-user.html); the appearance:auto reset re-added the native
   arrow on top of it and its .75rem padding let the arrow overlap the
   selected text.
   ====================================================================== */
#cb-form-wrap select.cb-row-sel {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 1.7rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%23b0b3c1'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .5rem center !important;
}
body.lightmode #cb-form-wrap select.cb-row-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%236b7280'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") !important;
}

/* TEMPORARY – remove after testing */
#page-success.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

/* ── Attachment Preview Modal — light mode fixes ── */
body.lightmode #attach-modal > div {
  background: var(--base-clr, #f4f5fb);
  border-color: var(--line-clr, #d0d3e0);
}
body.lightmode #attach-modal-title {
  color: var(--sidebar-text-clr, #1e2038);
}
body.lightmode #attach-preview-area {
  color: var(--sidebar-text-clr, #1e2038);
}
body.lightmode #attach-modal > div > div:first-child {
  border-bottom-color: var(--line-clr, #d0d3e0);
}