/* =====================================================================
   Theme: blue → teal gradient, floating white cards, pill buttons
   (loaded last; overrides colors from styles.css and form.css)
   ===================================================================== */

:root {
  --accent: #4a7be0;          /* main blue */
  --accent-2: #22c1cf;        /* teal end of the gradient */
  --accent-soft: #e8effd;
  --blue: #4a7be0;
  --blue-soft: #e8effd;
  --bg: #eef3fb;              /* light blue-gray (form body) */
  --border: #dbe3ef;
  --text: #2b3a55;
  --muted: #7a89a6;
  --grad: linear-gradient(135deg, #5d7fe3 0%, #3f9fe0 50%, #1fc5cf 100%);
  --grad-btn: linear-gradient(90deg, #4f7fe2 0%, #2fb3d6 100%);
  --card-shadow: 0 18px 50px rgba(28, 60, 120, .18);
}

/* ---------- page background ---------- */
body {
  background: var(--grad) fixed;
  background-color: #3f9fe0;
  min-height: 100vh;
}
body::before {
  /* soft light texture over the gradient */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .16), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .14), transparent 40%);
}

/* ---------- top bar: white text over the gradient ---------- */
.topbar {
  background: var(--grad) fixed;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 4px 18px rgba(28, 60, 120, .12);
}
.logo { background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .45); }
.brand:hover .logo { box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }

.nav a, .top-right .toplink { color: rgba(255, 255, 255, .82); }
.nav a::after, .top-right .toplink::after { background: #fff; }
.nav a:hover, .top-right .toplink:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.nav a.active, .top-right .toplink.active { color: #fff; background: rgba(255, 255, 255, .2); }
/* little pointer under the active link, like the reference tabs */
.nav a.active::before, .top-right .toplink.active::before {
  content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: #fff; border-top: 0;
}
.top-right #logoutBtn {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: 6px 16px;
}
.top-right #logoutBtn::after { background: #fff; }
.top-right #logoutBtn:hover { background: #fff; color: var(--accent); border-color: #fff; }

/* ---------- headings & cards on the gradient ---------- */
.page-head h1 { color: #fff; text-shadow: 0 2px 10px rgba(20, 50, 110, .2); }
.card, .stat { border: 0; border-radius: 14px; box-shadow: var(--card-shadow); }
.muted.no-print { color: rgba(255, 255, 255, .85); }
.muted.no-print .btn.link { color: #fff; text-decoration: underline; }

/* ---------- buttons: pill + gradient ---------- */
.btn { border-radius: 999px; }
.btn.primary, .btn.approve {
  background: var(--grad-btn); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(63, 125, 224, .28);
}
.btn.primary:hover, .btn.approve:hover { background: var(--grad-btn); filter: brightness(1.06); }
.btn.approve { background: linear-gradient(90deg, #1fae84, #22c1a0); box-shadow: 0 6px 16px rgba(31, 174, 132, .28); }
.btn.danger { border-radius: 999px; }

/* ---------- the form card ---------- */
main { padding-top: 28px; }
.paper {
  background: var(--bg); border: 0; border-radius: 16px; box-shadow: var(--card-shadow);
}
.paper::before { background: var(--grad); }
.paper::after { background: radial-gradient(circle, rgba(34, 193, 207, .12), transparent 70%); }

/* white header area (like the reference "Let's start with The Patient") */
.form-head { background: #fff; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 22px; }
.form-head.stuck { background: rgba(255, 255, 255, .96); }
.paper-title {
  color: var(--accent);
  background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.form-subnote { background: #fff8ec; border-color: #f7ddb5; }
.banner.edit { background: #f5f8fe; border-color: #dde6f8; border-left-color: var(--accent); }

/* sections: white cards on the light blue-gray body */
.paper .section, .paper .two-col.section > div { background: #fff; border: 1px solid #e3eaf5; box-shadow: 0 2px 8px rgba(28, 60, 120, .05); }
.paper .two-col.section { background: transparent; border: 0; box-shadow: none; }
.paper .section:hover, .paper .two-col.section > div:hover { border-color: #c9d8f3; box-shadow: 0 8px 22px rgba(63, 125, 224, .10); }
.paper .section-title { color: var(--accent); }
.paper .section-title::before { background: var(--grad-btn); box-shadow: 0 3px 8px rgba(63, 125, 224, .3); }

/* fields */
.paper .ro { background: #f5f8fd; }
.paper input[type=text], .paper input[type=date], .paper input[type=number], .paper select, .paper textarea {
  border-color: #d8e1ee; border-radius: 6px;
}
.paper input:focus, .paper select:focus, .paper textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74, 123, 224, .14); }
.paper input[type=checkbox] { accent-color: var(--accent); }
.paper .check:hover { background: var(--accent-soft); }

/* expenses table */
.paper .exp th { background: linear-gradient(180deg, #f4f7fd, #eaf0fb); color: #4b5f85; }
.paper .exp td.hrcol { background: #f3fbfc; }
.paper .exp tbody tr:hover td { background: #f7faff; }
/* HR columns (Type of medical benefit, Remarks): clearly shaded, header to footer — "for HRD use only" */
.paper .exp th.hrcol { background: linear-gradient(180deg, #dcedf5, #cfe5f0); color: #2f5a78; }
.paper .exp td.hrcol, .paper .exp tbody tr:hover td.hrcol { background: #e7f3f8; }
.paper .exp td.hrcol { border-color: #d3e6ef; }
.paper .exp tfoot tr:last-child td.big { color: var(--accent); background: var(--accent-soft); }
.section-title .add-row { border-color: var(--accent); color: var(--accent); }
.section-title .add-row:hover { background: var(--grad-btn); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(63, 125, 224, .28); }

/* certification, approvals, balances, logs */
.paper .cert { background: linear-gradient(135deg, #f6f9fe, #eef4fd); border-color: #dde6f6; }
.paper .signs th, .paper .bal th, .paper .log-list th { background: #f4f7fd; }

/* bottom action bar */
.actionbar .btn.primary, .actionbar .btn.approve { background: var(--grad-btn); }
.actionbar .btn.approve { background: linear-gradient(90deg, #1fae84, #22c1a0); }
.actionbar .btn.primary:hover { box-shadow: 0 8px 20px rgba(63, 125, 224, .35); }

/* ---------- tables elsewhere (dashboard, users, logs) ---------- */
th { background: #f4f7fd; color: #5a6d92; }
tr.clickable:hover td { background: #f3f7ff; }

/* ---------- login / register / password screens ---------- */
.auth-card { border: 0; border-radius: 16px; box-shadow: var(--card-shadow); }
.auth-logo { background: var(--grad-btn); }
.auth-card h1 { color: var(--accent); }
.auth-card label input, .auth-card label select { border-radius: 6px; }

/* ---------- pop-ups ---------- */
.toast-icon { background: #e7f7f1; }
.toast-icon.info { background: var(--accent-soft); color: var(--accent); }
.toast-icon.welcome { background: linear-gradient(135deg, #e8effd, #e2f8fa); }
.toast-overlay[data-kind="welcome"] .toast-text {
  background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.toast-details .td-icon { color: var(--accent); }

@media print {
  body, .topbar { background: #fff !important; }
  body::before { display: none; }
  .paper-title { -webkit-text-fill-color: currentColor; background: none; color: #2b3a55; }
}

/* ---------- Forms hub (landing page after sign-in) ---------- */
.forms-hub { max-width: 980px; margin: 10px auto 0; }
.forms-head { text-align: center; color: #fff; margin: 18px 0 28px; animation: secIn .45s ease-out both; }
.forms-eyebrow { margin: 0 0 6px; font-size: 15px; opacity: .9; }
.forms-head h1 { font-size: 30px; font-weight: 800; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(20, 50, 110, .2); }
.forms-sub { margin: 0; opacity: .85; font-size: 15px; }
.forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.form-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text);
  background: #fff; border-radius: 16px; padding: 26px 24px 22px; box-shadow: var(--card-shadow);
  border: 1px solid transparent; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: secIn .45s ease-out both;
}
.form-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
a.form-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 60, 120, .26); border-color: #d7e3fa; }
a.form-card:hover::before { transform: scaleX(1); }
a.form-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fc-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; margin-bottom: 6px;
  background: linear-gradient(135deg, #e8effd, #e2f8fa); transition: transform .3s ease;
}
a.form-card:hover .fc-icon { transform: scale(1.08) rotate(-4deg); }
.form-card h3 { margin: 0; font-size: 18px; color: var(--accent); }
.form-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.fc-open {
  align-self: flex-start; margin-top: 10px; padding: 9px 18px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px;
  background: var(--grad-btn); box-shadow: 0 6px 16px rgba(63, 125, 224, .28); transition: box-shadow .2s ease;
}
.fc-open span { display: inline-block; transition: transform .2s ease; }
a.form-card:hover .fc-open span { transform: translateX(4px); }
.form-card.soon { background: rgba(255, 255, 255, .72); box-shadow: none; border: 2px dashed rgba(255, 255, 255, .9); }
.form-card.soon h3 { color: var(--muted); }
.form-card.soon .fc-icon { background: rgba(255, 255, 255, .9); color: var(--muted); }
.fc-badge { align-self: flex-start; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: #eef2f8; color: var(--muted); font-size: 12px; font-weight: 700; }
@media (max-width: 600px) { .forms-head h1 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) {
  .form-card, .forms-head { animation: none; }
  a.form-card:hover, a.form-card:hover .fc-icon { transform: none; }
}
.brand.is-hidden { display: none; }
.logo .forms-logo { width: 20px; height: 20px; }
.auth-logo .forms-logo { width: 28px; height: 28px; }
.top-right .toplink, .top-right #logoutBtn { white-space: nowrap; }
.fc-icon.plus { background: var(--grad-btn); color: #fff; font-size: 34px; font-weight: 700; line-height: 1; box-shadow: 0 6px 16px rgba(63, 125, 224, .3); }
/* Top-left + is a plain logo only (no link, no hover) */
.brand { cursor: default; pointer-events: none; }
.brand:hover .logo { transform: none; box-shadow: none; }

/* Form starts right under the top bar */
main { padding-top: 22px; }
.page-head.no-print:not(:has(*)) { display: none; }

/* Pinned form header keeps the same size while scrolling (no shrink/grow) */
.form-head, .form-head.stuck { padding: 24px 30px 6px; }
.form-head.stuck .paper-title { font-size: 28px; letter-spacing: .1em; margin-bottom: 6px; }
.form-head.stuck .form-subnote { font-size: 12.5px; padding: 6px 12px; margin-bottom: 18px; }
.form-head.stuck .banner { font-size: 13.5px; padding: 10px 14px; margin-bottom: 16px; }
.form-head .paper-title, .form-head .form-subnote, .form-head .banner { transition: none; }
@media (max-width: 600px) {
  .form-head, .form-head.stuck { padding: 18px 14px 6px; }
  .form-head.stuck .paper-title { font-size: 22px; }
}
@media (max-width: 560px) { .top-right { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } .topbar { gap: 10px; } }

/* ---------- validation pop-up: professional, sectioned list ---------- */
.toast-overlay[data-kind="error"] .toast-modal { width: min(460px, 100%); padding: 30px 28px 24px; }
.toast-overlay[data-kind="error"] .toast-icon { width: 56px; height: 56px; margin-bottom: 12px; }
.toast-overlay[data-kind="error"] .toast-icon svg { width: 28px; height: 28px; }
.toast-overlay[data-kind="error"] .toast-text { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.toast-overlay[data-kind="error"] .toast-sub { margin-bottom: 18px; font-size: 13.5px; }
.toast-list.grouped {
  list-style: none; padding: 0; margin: 0 0 22px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; overflow: auto; text-align: left;
}
.toast-list.grouped > li { animation: toastItem .3s ease-out both; }
.toast-list.grouped .tl-group + .tl-group { border-top: 1px solid var(--border); }
.toast-list.grouped .tl-label {
  padding: 8px 14px; background: #f7f9fc; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.toast-list.grouped ul { list-style: none; margin: 0; padding: 6px 14px 10px; }
.toast-list.grouped ul li {
  position: relative; padding: 5px 0 5px 18px; font-size: 13.5px; line-height: 1.45; color: #3a4660; animation: none;
}
.toast-list.grouped ul li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft);
}
.toast-overlay[data-kind="error"] #toastOk { min-width: 160px; }
/* Group labels larger than the items under them */
.toast-list.grouped .tl-label { font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--text); padding: 10px 14px; }
.toast-list.grouped ul li { font-size: 13px; color: #56627a; }
.toast-list.grouped .tl-label { text-transform: uppercase; letter-spacing: .05em; }

/* ---------- uniform pop-up design (success, info, warning, error, confirm, welcome) ---------- */
.toast-modal { width: min(440px, 100%); padding: 30px 28px 24px; border-radius: 18px; }
.toast-icon { width: 56px; height: 56px; margin: 0 auto 14px; }
.toast-icon svg { width: 28px; height: 28px; }
.toast-icon.welcome { font-size: 28px; }

/* one title style everywhere */
.toast-text,
.confirm-title,
.toast-overlay[data-kind="welcome"] .toast-text,
.toast-overlay[data-kind="error"] .toast-text {
  font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--text); margin: 0 0 6px;
  background: none; -webkit-text-fill-color: currentColor;
}
/* one summary-line style everywhere */
.toast-sub, .confirm-text,
.toast-overlay[data-kind="error"] .toast-sub { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
/* single-line messages without a summary still get breathing room above the button */
.toast-text:has(+ .toast-sub[hidden]) { margin-bottom: 20px; }

/* sectioned lists (errors, welcome details) share the same bordered look */
.toast-details {
  gap: 0; margin: 0 0 22px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff;
}
.toast-details li { border: 0; border-radius: 0; background: #fff; padding: 10px 14px; font-size: 13px; color: #56627a; }
.toast-details li + li { border-top: 1px solid var(--border); }

/* buttons: same size and shape in every pop-up */
.toast-modal #toastOk, .confirm-actions .btn { min-width: 150px; padding: 10px 22px; font-size: 14.5px; font-weight: 700; border-radius: 999px; }
.confirm-actions { justify-content: center; }
.confirm-actions .btn { flex: 0 1 auto; }
#confirmCancel { background: #fff; color: var(--text); border: 1px solid var(--border); }
#confirmCancel:hover { background: var(--bg); }

/* disapprove dialog matches the pop-ups */
dialog h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 6px; text-align: center; }
dialog > form > p.muted { text-align: center; font-size: 13.5px; margin: 0 0 14px; }
dialog .dialog-actions { justify-content: center; }
dialog .dialog-actions .btn { min-width: 140px; border-radius: 999px; padding: 10px 22px; font-weight: 700; }
dialog textarea { border-radius: 10px; }
.toast-details[hidden], .toast-list[hidden], .toast-sub[hidden] { display: none; }
#confirmIcon svg path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.confirm-actions .btn { min-width: 120px; }
/* Required-field asterisk: always red */
.req { color: var(--bad) !important; font-weight: 700; }

/* ---------- all table headers: centered, with separators between columns ---------- */
th, th.num, .paper .exp th, .paper .signs th, .paper .bal th, .paper .log-list th { text-align: center !important; vertical-align: middle; }
thead th { border-right: 1px solid var(--border) !important; }
thead th:last-child { border-right: 0 !important; }
.paper .exp thead th:empty { border-right: 0 !important; }

/* ---------- expenses: placeholders, row selection, add/remove buttons ---------- */
.hr-placeholder { display: block; text-align: center; font-size: 12px; font-style: italic; color: #9aa7bd; padding: 6px 4px; }
.row-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-title .row-actions .add-row { margin-left: 0; }
.section-title .remove-rows { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; border-radius: 9px; border-color: var(--bad); color: var(--bad); background: #fff; transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.section-title .remove-rows:hover:not(:disabled) { background: var(--bad); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(192, 54, 44, .25); }
.section-title .remove-rows:disabled { border-color: var(--border); color: var(--muted); opacity: .6; }
.paper .exp .sel-col { width: 44px; text-align: center; vertical-align: middle; }
.paper .exp .sel-col input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.paper .exp tbody tr.row-selected td { background: #fff5f4 !important; }
.paper .exp .sel-col { width: 72px; }
.section-title .remove-rows.has-selection { background: var(--bad-soft); }

/* ---------- expenses table: everything centered ---------- */
.paper .exp th, .paper .exp td, .paper .exp td.num, .paper .exp tfoot td, .paper .exp tfoot td.num { text-align: center !important; vertical-align: middle !important; }
.paper .exp td input, .paper .exp td select, .paper .exp td input.money { text-align: center; text-align-last: center; }
.paper .exp td input[type=date] { display: block; margin: 0 auto; }
.paper .exp td input[type=date]::-webkit-datetime-edit { display: inline-flex; justify-content: center; width: 100%; }
.paper .exp td .ro { text-align: center; }
.paper .exp .hr-placeholder { padding: 0 4px; }
.paper .exp .sel-col input { display: block; margin: 0 auto; }
.paper .exp .hr-placeholder { font-size: 10.5px; line-height: 1.35; }
/* total row: amount on the left, label under the Total column */
.paper .exp tfoot td.amount-value { font-size: 20px !important; font-weight: 800; color: var(--accent) !important; background: var(--accent-soft) !important; letter-spacing: 0 !important; }
.paper .exp tfoot td.amount-label { font-size: 11px; line-height: 1.35; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: #f7f9fc !important; }
/* total row: label right-aligned next to the amount under the Total column */
.paper .exp tfoot td.amount-label { text-align: right !important; padding-right: 20px; font-size: 12px; letter-spacing: .05em; }

/* ---------- expenses table: columns keep their width; long entries wrap instead of being cut ---------- */
.paper .exp { min-width: 1180px; table-layout: fixed; }
.paper .exp th:nth-child(1) { width: 150px; }   /* Date */
.paper .exp th:nth-child(2) { width: 17%; }     /* Payee */
.paper .exp th:nth-child(3) { width: 20%; }     /* Particulars */
.paper .exp th:nth-child(4) { width: 110px; }   /* Page Ref No. */
.paper .exp th:nth-child(5) { width: 150px; }   /* OR / Invoice # */
.paper .exp th:nth-child(6) { width: 170px; }   /* Total */
.paper .exp th:nth-child(7) { width: 150px; }   /* Type of Medical Benefit */
.paper .exp th:nth-child(8) { width: 150px; }   /* Remarks */
.paper .exp th.sel-col { width: 72px; }         /* Select */
.paper .exp th { white-space: normal; line-height: 1.3; }

.paper .exp td input, .paper .exp td select, .paper .exp td textarea { width: 100%; min-width: 0; }
.paper .exp td textarea.autogrow {
  display: block; resize: none; overflow: hidden; min-height: 38px; line-height: 1.4;
  padding: 8px 10px; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  background: #fff; border: 1px solid #d8e1ee; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text);
}
.paper .exp td textarea.autogrow:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74, 123, 224, .14); }
.paper .exp td textarea.autogrow.invalid { background: #fff7f6; border-color: #ef9a92; }
.paper .exp td .ro { overflow-wrap: anywhere; white-space: normal; }

/* big totals shrink a little so the Total column stays readable */
.paper .exp tfoot td.amount-value { font-size: 18px !important; overflow-wrap: anywhere; }

/* ---------- expenses table always fits its section (no sideways scroll) ---------- */
.paper .section .table-wrap:has(> .exp) { overflow-x: visible; }
.paper .exp { min-width: 0; width: 100%; table-layout: fixed; }
.paper .exp th:nth-child(1) { width: 12%; }   /* Date */
.paper .exp th:nth-child(2) { width: 12%; }   /* Payee */
.paper .exp th:nth-child(3) { width: 14%; }   /* Particulars */
.paper .exp th:nth-child(4) { width: 8%; }    /* Page Ref No. */
.paper .exp th:nth-child(5) { width: 12%; }   /* OR / Invoice # */
.paper .exp th:nth-child(6) { width: 13%; }   /* Total */
.paper .exp th:nth-child(7) { width: 14%; }   /* Type of Medical Benefit: wide enough for "In-Patient (IP)" */
.paper .exp th:nth-child(8) { width: 10%; }   /* Remarks */
.paper .exp th.sel-col { width: 5%; }         /* Select */
.paper .exp th { padding: 10px 4px; font-size: 11px; overflow-wrap: anywhere; }
.paper .exp td { padding: 6px 4px; }
.paper .exp td input[type=date] { padding: 7px 4px; font-size: 12.5px; }

/* every cell wraps its content instead of spilling out */
.paper .exp td, .paper .exp td.num, .paper .exp tfoot td { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.paper .exp td textarea.money { font-variant-numeric: tabular-nums; }

/* amount stays inside the Total column: wraps and scales down for very large values */
.paper .exp tfoot td.amount-value { font-size: clamp(13px, 1.25vw, 18px) !important; line-height: 1.3; padding: 12px 6px; }

/* on phones the table would be too cramped, so allow sideways scrolling there only */
@media (max-width: 760px) {
  .paper .section .table-wrap:has(> .exp) { overflow-x: auto; }
  .paper .exp { min-width: 820px; }
}
.submitted-by { margin: 12px 0 0; }
.submitted-by .sb-date { font-weight: 700; color: var(--accent); animation: toastItem .3s ease-out; }

/* ---------- approvals: checkbox in the Action column ---------- */
.paper .signs td.sign-action, .paper .signs td.sign-when { text-align: center; vertical-align: middle; }
.approve-check { width: 19px; height: 19px; accent-color: var(--ok); cursor: default; }
.approve-check.mine { cursor: pointer; accent-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 4px; animation: signPulse 1.8s ease-in-out infinite; }
.paper .signs tr.sign-current td { background: #f5f8ff; }
.paper .signs td.sign-when { font-size: 12.5px; color: var(--text); font-weight: 600; }
@keyframes signPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px rgba(74, 123, 224, .18); } }
@media (prefers-reduced-motion: reduce) { .approve-check.mine { animation: none; } }
.approve-check.locked { cursor: pointer; accent-color: var(--ok); opacity: .85; }
.approve-check.locked:hover { opacity: 1; box-shadow: 0 0 0 3px var(--bg); border-radius: 4px; }
.approve-check:disabled { cursor: not-allowed; opacity: .75; }
.paper .bal td { text-align: center; vertical-align: middle; }
.paper .bal td:first-child { text-align: left; }
.paper .bal td input.money { text-align: center; }
.paper .bal .hr-placeholder { font-size: 10.5px; }
.paper .field .ro.empty .hr-placeholder { text-align: left; padding: 0; }
.logo .profile-logo { width: 20px; height: 20px; }

/* ---------- Pending Requests: road map ---------- */
.track-intro { color: rgba(255, 255, 255, .88); margin: -6px 0 18px; }
.track-card {
  background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); padding: 20px 22px 24px; margin-bottom: 18px;
  animation: secIn .45s ease-out both;
}
.track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.track-ref { font-size: 18px; font-weight: 800; color: var(--accent); }
.track-meta { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.track-status { display: flex; align-items: center; gap: 10px; }
.track-now { margin: 12px 0 0; font-size: 13.5px; color: var(--text); }
.track-empty { text-align: center; padding: 36px 20px; }
.track-empty p { margin: 0 0 6px; }
.track-empty .btn { margin-top: 12px; text-decoration: none; }

.roadmap { list-style: none; margin: 22px 0 0; padding: 0; display: flex; }
.rm-step { position: relative; flex: 1; text-align: center; padding: 0 6px; min-width: 0; }
/* connector line to the next step */
.rm-step::after {
  content: ""; position: absolute; top: 17px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 3px;
  background: #e1e7f1; border-radius: 3px;
}
.rm-step:last-child::after { display: none; }
.rm-step.done::after { background: linear-gradient(90deg, #1fae84, #22c1a0); }
.rm-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 10px;
  border-radius: 50%; font-weight: 800; font-size: 15px; background: #eef2f8; color: var(--muted); border: 2px solid #dde4ef;
}
.rm-step.done .rm-dot { background: linear-gradient(135deg, #1fae84, #22c1a0); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(31, 174, 132, .3); }
.rm-step.current .rm-dot { background: #fff; color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); animation: signPulse 1.8s ease-in-out infinite; font-size: 14px; }
.rm-title { display: block; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.rm-who { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.rm-when { display: block; font-size: 11.5px; margin-top: 4px; color: var(--muted); }
.rm-step.done .rm-when { color: #16865a; font-weight: 600; }
.rm-step.current .rm-title, .rm-step.current .rm-when { color: var(--accent); }
.rm-step.current .rm-when { font-weight: 700; }
.rm-step.todo .rm-title { color: var(--muted); }

/* narrow screens: vertical road map */
@media (max-width: 700px) {
  .roadmap { flex-direction: column; gap: 0; }
  .rm-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; text-align: left; padding: 0 0 18px; }
  .rm-dot { grid-row: span 3; margin: 0; }
  .rm-step::after { top: 38px; bottom: 0; left: 17px; right: auto; width: 3px; height: auto; }
  .rm-step.done::after { background: linear-gradient(180deg, #1fae84, #22c1a0); }
}
@media (prefers-reduced-motion: reduce) { .track-card, .rm-step.current .rm-dot { animation: none; } }

/* ---------- Request Tracker: tabs + returned/approved states ---------- */
.track-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.track-tab { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; font-weight: 700; border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.track-tab span { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 12px; }
.track-tab:hover { background: rgba(255,255,255,.26); }
.track-tab.active { background: #fff; color: var(--accent); border-color: #fff; }
.track-tab.active span { background: var(--accent-soft); }
.rm-step.rejected .rm-dot { background: var(--bad); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(192, 54, 44, .3); }
.rm-step.rejected .rm-title, .rm-step.rejected .rm-when { color: var(--bad); }
.rm-note { display: block; font-size: 11.5px; color: var(--bad); font-style: italic; margin-top: 2px; overflow-wrap: anywhere; }
.track-card.st-approved { border-top: 4px solid #1fae84; }
.track-card.st-disapproved { border-top: 4px solid var(--bad); }
.track-card.st-pending { border-top: 4px solid var(--accent); }

/* =====================================================================
   Request Tracker card — lively but professional
   ===================================================================== */
.track-card {
  position: relative; overflow: hidden; border-top: 0 !important; padding: 22px 26px 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.track-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.track-card.st-approved::before { background: linear-gradient(90deg, #1fae84, #22c1a0); }
.track-card.st-disapproved::before { background: linear-gradient(90deg, #c0362c, #e26d5c); }
.track-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(28, 60, 120, .22); }

/* header */
.track-id { display: flex; gap: 14px; align-items: center; }
.track-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--grad-btn); color: #fff; font-size: 26px; font-weight: 700; box-shadow: 0 6px 16px rgba(63, 125, 224, .3);
}
.st-approved .track-icon { background: linear-gradient(135deg, #1fae84, #22c1a0); box-shadow: 0 6px 16px rgba(31, 174, 132, .3); }
.st-disapproved .track-icon { background: linear-gradient(135deg, #c0362c, #e26d5c); box-shadow: 0 6px 16px rgba(192, 54, 44, .28); }
.track-ref { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.track-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Reference number and amount on one line, beside the icon */
.track-id > div { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; min-width: 0; }
.track-id .track-meta { margin-top: 0; flex-wrap: nowrap; }
.track-id .chip-lite { white-space: nowrap; }
/* The status badge now names who (e.g. "Waiting for This is TL (C&B Team Lead)"): let it and View request wrap */
.track-status { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.track-status .badge { white-space: normal; text-align: left; }
.track-status .track-view { white-space: nowrap; }
/* Card header: a smaller "+" icon, and everything — icon, reference, amount, status, View request — on one centered line */
.track-card .track-head { align-items: center; }
.track-id .track-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
@media (max-width: 520px) {
  .track-id { gap: 10px; }
  .track-id .track-icon { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
  .track-id > div { gap: 8px; }
  .track-id .track-ref { font-size: 16px; }
}
.chip-lite { font-size: 12px; font-weight: 600; color: #5a6d92; background: #f1f5fc; border: 1px solid #e3eaf5; border-radius: 999px; padding: 3px 10px; }
.chip-lite.amount { color: var(--accent); background: var(--accent-soft); border-color: #d6e2fb; font-weight: 800; }
.track-status .badge { padding: 5px 12px; font-size: 12px; }
.track-view { border-radius: 999px; text-decoration: none; font-weight: 700; border-color: #d6e2fb; color: var(--accent); }
.track-view span { display: inline-block; transition: transform .2s ease; }
.track-view:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.track-view:hover span { transform: translateX(3px); }

/* progress bar */
.track-progress { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; }
.tp-bar { flex: 1; height: 8px; border-radius: 999px; background: #eaf0f8; overflow: hidden; }
.tp-bar span {
  display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--grad-btn);
  animation: tpFill 1s cubic-bezier(.2, .8, .2, 1) both;
}
.st-approved .tp-bar span { background: linear-gradient(90deg, #1fae84, #22c1a0); }
.st-disapproved .tp-bar span { background: linear-gradient(90deg, #c0362c, #e26d5c); }
.tp-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tp-label b { color: var(--text); }
@keyframes tpFill { from { width: 0; } }

/* "currently with" banner */
.track-now {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px;
  background: #f5f8ff; border: 1px solid #e1e9fb; font-size: 13.5px; color: var(--text);
}
.st-approved .track-now { background: #effaf5; border-color: #cdeede; }
.st-disapproved .track-now { background: #fff5f4; border-color: #f6d3cf; }
.tn-avatar, .tn-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--grad-btn);
}
.tn-icon.ok { background: linear-gradient(135deg, #1fae84, #22c1a0); }
.tn-icon.bad { background: linear-gradient(135deg, #c0362c, #e26d5c); }

/* road map */
.roadmap { margin-top: 26px; }
/* Every step takes the same width (the longest route has 7: Submitted, 5 approvers, Completed), and the
   road map is centered in the card, so steps are evenly spaced whatever the route's length. */
@media (min-width: 701px) { .roadmap { justify-content: center; } .rm-step { flex: 0 0 calc(100% / 7); } }
.rm-step { animation: secIn .45s ease-out both; animation-delay: calc(var(--i) * 70ms); }
.rm-step::after { top: 21px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 4px; background: #e6ecf5; }
.rm-step.done::after { background: linear-gradient(90deg, #1fae84, #22c1a0); }
/* the line leading into the current step moves, to show it's in progress */
.rm-step.done:has(+ .rm-step.current)::after {
  background: linear-gradient(90deg, #22c1a0, #4a7be0, #22c1a0); background-size: 200% 100%;
  animation: rmFlow 1.6s linear infinite;
}
.rm-step.done:has(+ .rm-step.rejected)::after { background: linear-gradient(90deg, #22c1a0, #e26d5c); }
@keyframes rmFlow { to { background-position: -200% 0; } }

.rm-dot {
  position: relative; width: 44px; height: 44px; margin: 0 auto 10px; font-size: 13px; letter-spacing: .02em;
  background: #fff; color: #9aa7bd; border: 2px dashed #cfd8e6;
}
.rm-dot svg { width: 20px; height: 20px; }
.rm-step.done .rm-dot { background: linear-gradient(135deg, #1fae84, #22c1a0); color: #fff; border: 0; box-shadow: 0 6px 14px rgba(31, 174, 132, .3); }
.rm-step.current .rm-dot { background: var(--grad-btn); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(63, 125, 224, .35); animation: none; }
.rm-step.current .rm-dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(74, 123, 224, .45);
  animation: rmRipple 1.8s ease-out infinite;
}
.rm-step.rejected .rm-dot { background: linear-gradient(135deg, #c0362c, #e26d5c); color: #fff; border: 0; }
@keyframes rmRipple { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.rm-check {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #16865a; font-size: 10px; font-weight: 900; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.rm-check.bad { color: var(--bad); }
.rm-check.wait { color: #e8891a; }
.rm-check.wait svg { width: 12px; height: 12px; }

.rm-title { font-size: 13.5px; }
.rm-who { font-size: 12px; }
.rm-pill {
  display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.4;
}
.rm-pill.done { background: #e7f7f0; color: #16865a; }
.rm-pill.current { background: var(--accent-soft); color: var(--accent); }
.rm-pill.rejected { background: var(--bad-soft); color: var(--bad); }
.rm-pill.todo { background: #f1f4f9; color: #8a97ad; font-weight: 600; }
.rm-when { display: none; }

@media (max-width: 700px) {
  .rm-step::after { top: 46px; left: 20px; width: 4px; }
  .rm-step.done:has(+ .rm-step.current)::after { background: linear-gradient(180deg, #22c1a0, #4a7be0); animation: none; }
  .rm-pill { justify-self: start; }
  .track-progress { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-step, .tp-bar span, .rm-step.current .rm-dot::before, .rm-step.done:has(+ .rm-step.current)::after { animation: none; }
  .track-card:hover { transform: none; }
}
.tn-avatar svg { width: 15px; height: 15px; }
.rm-dot svg { width: 20px; height: 20px; }
@media (max-width: 700px) { .rm-step::after { top: 50px !important; bottom: 4px !important; height: auto !important; left: 20px !important; right: auto !important; width: 4px !important; } .rm-step:last-child::after { display: none; } }
/* View request: same look and hover as "+ Add row" */
.track-view { border: 1px solid var(--accent) !important; color: var(--accent) !important; background: #fff !important; border-radius: 9px !important; font-weight: 700; font-size: 12.5px; padding: 6px 12px; transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.track-view:hover { background: var(--grad-btn) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(63, 125, 224, .28); }

/* ---------- Request Tracker filter tabs: lively effects ---------- */
.track-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* small colored status dot */
.track-tab::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); transition: transform .25s ease;
}
.track-tab.tt-pending::before { background: #7aa7ff; }
.track-tab.tt-approved::before { background: #3fe0a8; }
.track-tab.tt-disapproved::before { background: #ff8a7a; }
.track-tab:hover {
  background: rgba(255, 255, 255, .28); border-color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 50, 110, .18), 0 0 0 4px rgba(255, 255, 255, .12);
}
.track-tab:hover::before { transform: scale(1.3); }
.track-tab:active { transform: translateY(0) scale(.97); }
.track-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.track-tab.active {
  background: #fff; color: var(--accent); border-color: #fff; transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(20, 50, 110, .22);
}
.track-tab.active.tt-pending::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.track-tab.active.tt-approved { color: #16865a; }
.track-tab.active.tt-approved::before { background: #1fae84; box-shadow: 0 0 0 3px #dff5ec; }
.track-tab.active.tt-disapproved { color: var(--bad); }
.track-tab.active.tt-disapproved::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.track-tab.active.tt-all::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* count bubble */
.track-tab span { margin-left: 0; transition: background-color .25s ease, color .25s ease; }
.track-tab.active span { background: var(--accent); color: #fff; animation: countPop .35s cubic-bezier(.2, 1.6, .4, 1); }
.track-tab.active.tt-approved span { background: #1fae84; }
.track-tab.active.tt-disapproved span { background: var(--bad); }
@keyframes countPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .track-tab, .track-tab::before { transition: none; }
  .track-tab:hover, .track-tab.active { transform: none; }
  .track-tab.active span { animation: none; }
}

/* ---------- tracker tabs & badges: readable, matches the blue theme ---------- */
.track-tab { background: rgba(255, 255, 255, .92); color: var(--text); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 2px 8px rgba(20, 50, 110, .10); }
.track-tab span { background: #eef2f8; color: #5a6d92; }
.track-tab::before { box-shadow: none; }
.track-tab.tt-all::before, .track-tab.tt-pending::before { background: var(--accent); }
.track-tab.tt-approved::before { background: #1fae84; }
.track-tab.tt-disapproved::before { background: var(--bad); }
.track-tab:hover { background: #fff; border-color: #fff; color: var(--accent); box-shadow: 0 8px 20px rgba(20, 50, 110, .18); }
.track-tab.active, .track-tab.active.tt-approved, .track-tab.active.tt-disapproved { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(20, 50, 110, .25); }
.track-tab.active::before, .track-tab.active.tt-pending::before, .track-tab.active.tt-all::before, .track-tab.active.tt-approved::before, .track-tab.active.tt-disapproved::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.track-tab.active span, .track-tab.active.tt-approved span, .track-tab.active.tt-disapproved span { background: #fff; color: var(--accent); }
/* pending badge in the theme blue (matches the current step) */
.track-status .badge.s-pending { background: var(--accent-soft); color: var(--accent); border: 1px solid #d6e2fb; }
.track-status .badge.s-approved { border: 1px solid #cdeede; }
.track-status .badge.s-disapproved { border: 1px solid #f6d3cf; }
.track-tab.active, .track-tab.active.tt-approved, .track-tab.active.tt-disapproved { background: linear-gradient(90deg, #3a6bd4, #2a7fc4); }
.track-status .badge.s-pending { color: #2c5bc0; }

/* ---------- tracker tabs: all white on the gradient; active = colored text, filled count, halo ---------- */
.track-tab.active, .track-tab.active.tt-approved, .track-tab.active.tt-disapproved {
  background: #fff; border-color: #fff; transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 10px 24px rgba(20, 50, 110, .22);
}
.track-tab.active, .track-tab.active.tt-all, .track-tab.active.tt-pending { color: #2c5bc0; }
.track-tab.active.tt-approved { color: #127a52; }
.track-tab.active.tt-disapproved { color: #b0302a; }
.track-tab.active::before, .track-tab.active.tt-all::before, .track-tab.active.tt-pending::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.track-tab.active.tt-approved::before { background: #1fae84; box-shadow: 0 0 0 3px #dff5ec; }
.track-tab.active.tt-disapproved::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.track-tab.active span, .track-tab.active.tt-all span, .track-tab.active.tt-pending span { background: #2c5bc0; color: #fff; }
.track-tab.active.tt-approved span { background: #127a52; color: #fff; }
.track-tab.active.tt-disapproved span { background: #b0302a; color: #fff; }
.track-tab:not(.active) { opacity: .92; }
.track-tab:not(.active):hover { opacity: 1; }
/* "All" tab: its own indigo color (distinct from In progress blue) */
.track-tab.tt-all::before { background: #5a48c8; }
.track-tab.tt-all:hover { color: #5a48c8; }
.track-tab.active.tt-all { color: #4a39b5; }
.track-tab.active.tt-all::before { background: #5a48c8; box-shadow: 0 0 0 3px #ebe7fb; }
.track-tab.active.tt-all span { background: #4a39b5; color: #fff; }

/* ---------- Admin: account dashboard ---------- */
.users-intro { color: rgba(255, 255, 255, .9); margin: -6px 0 18px; }

.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dept-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 14px; cursor: pointer; font: inherit; color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dept-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 14px 14px 0 0; background: var(--grad-btn); opacity: .85; }
.dept-tile:hover { transform: translateY(-3px); border-color: #c9d8f3; box-shadow: 0 12px 26px rgba(28, 60, 120, .14); }
.dept-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dt-name { font-size: 15px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.dt-count { font-size: 13px; color: var(--muted); }
.dt-count b { font-size: 22px; color: var(--text); margin-right: 2px; }
.dt-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.dt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 4px; }
.dt-dot:first-child { margin-left: 0; }
.dt-dot.on { background: #1fae84; }
.dt-dot.off { background: #c9d2e0; }
.dt-approver { font-size: 11px; font-weight: 700; color: #6a4fd0; background: #efeafd; border-radius: 999px; padding: 2px 9px; }

.dept-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dept-head h2 { margin: 0; }
.row-editing td { background: #f5f8ff !important; }

.lvl { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #eef2f8; color: #5a6d92; }
.lvl-admin { background: #fde9e7; color: #a4332b; }
.lvl-nurse, .lvl-cnb, .lvl-hrops, .lvl-hrod, .lvl-coo { background: #efeafd; color: #5a41c2; }
.temp-tag { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.temp-tag.active { background: #e7f7f0; color: #127a52; }
.temp-tag.scheduled { background: var(--accent-soft); color: #2c5bc0; }
.temp-tag.expired { background: #f1f4f9; color: #8a97ad; }

.manage-card { border: 1px solid #d6e2fb !important; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mc-head h2 { margin: 0; }
.temp-box { margin-top: 14px; padding: 14px; border-radius: 12px; background: #f7f9fe; border: 1px solid #e3eaf5; }
.temp-box .temp-fields { margin-top: 12px; }
.temp-box .temp-fields[hidden] { display: none; }
.temp-box .check { font-size: 13.5px; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Admin: Departments & Positions (1 departments → 2 positions) ---------- */
.org-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.org-layout .card.org-panel { margin: 0; padding: 22px; }
.org-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.org-head h2 { margin: 0; font-size: 18px; }
.org-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.org-head p b { color: var(--accent); }
.org-step {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-btn); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(63, 125, 224, .3);
}
form.org-add { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 16px; }
form.org-add input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; border-radius: 999px; padding: 10px 16px; }
form.org-add .btn { flex: 0 0 auto; padding: 10px 22px; }

.org-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.org-item {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.org-item:hover { border-color: #c9d8f3; }
.org-item.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(74, 123, 224, .12); }
.org-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px;
  background: none; border: 0; font: inherit; color: var(--text); text-align: left; border-radius: 9px;
}
button.org-main { cursor: pointer; }
button.org-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oi-name { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.org-item.active .oi-name { color: var(--accent); }
.oi-meta { font-size: 12px; color: var(--muted); }
.org-item.off .oi-name { color: var(--muted); }
.org-item .badge { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; }
.org-actions { display: flex; gap: 2px; flex-shrink: 0; }
.org-link { background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.org-link:hover { background: #eef3fc; color: var(--accent); }
.org-link.danger:hover { background: var(--bad-soft); color: var(--bad); }
.org-link.strong { color: var(--accent); }
.org-rename { border-radius: 8px; }
.org-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13.5px; border: 1px dashed var(--border); border-radius: 12px; }
.org-note { color: rgba(255, 255, 255, .85) !important; margin-top: 14px; }
@media (max-width: 520px) {
  .org-item { flex-wrap: wrap; padding: 4px; }
  .org-actions { width: 100%; justify-content: flex-end; }
}

/* Overview: department tiles → pop-up with the department's positions */
.org-tiles .dept-tile {
  justify-content: center; align-items: center; text-align: center; gap: 12px; min-height: 140px; padding: 22px 16px 18px;
  overflow: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.org-tiles .dept-tile .dt-name { margin: 0; font-size: 16px; line-height: 1.3; transition: color .25s ease; }
/* soft glow that fades in behind the tile on hover */
.org-tiles .dept-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(74, 123, 224, .12), transparent 60%);
}
.org-tiles .dept-tile > * { position: relative; z-index: 1; }
.org-tiles .dept-tile::before { transition: height .25s ease; }
.ot-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(74, 123, 224, .12);
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease;
}
.ot-icon svg { width: 26px; height: 26px; }
.org-tiles .dept-tile:hover { transform: translateY(-5px); border-color: #b9cdf3; box-shadow: 0 18px 36px rgba(28, 60, 120, .2); }
.org-tiles .dept-tile:hover::after { opacity: 1; }
.org-tiles .dept-tile:hover::before { height: 6px; }
.org-tiles .dept-tile:hover .ot-icon {
  background: var(--grad-btn); color: #fff; transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 18px rgba(63, 125, 224, .35);
}
.org-tiles .dept-tile:active { transform: translateY(-2px) scale(.98); }
/* disabled department: grayed out */
.org-tiles .dept-tile.off .dt-name { color: var(--muted); }
.org-tiles .dept-tile.off .ot-icon { background: #f1f4f9; color: #9aa7bd; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .org-tiles .dept-tile, .ot-icon { transition: none; }
  .org-tiles .dept-tile:hover, .org-tiles .dept-tile:hover .ot-icon { transform: none; }
}

.org-modal-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 23, 42, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.org-modal-overlay.animate { animation: toastFade .18s ease-out; }
.org-modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 18px;
  padding: 0 22px 22px; box-shadow: 0 24px 60px rgba(20, 50, 110, .3);
}
.org-modal-overlay.animate .org-modal { animation: toastPop .22s cubic-bezier(.2, .9, .3, 1.2); }
.org-modal-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 -22px 16px; padding: 20px 22px 14px; background: #fff; border-bottom: 1px solid #edf1f7;
}
.org-modal-head h3 { margin: 0; font-size: 20px; color: var(--accent); overflow-wrap: anywhere; }
.org-modal-head p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.org-close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.org-close:hover { background: #eef3fc; color: var(--accent); border-color: #c9d8f3; }
.org-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.org-title-edit { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.org-title-edit .org-rename { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.org-page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn.primary.org-add-dept {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px 11px 16px; font-weight: 800; font-size: 14.5px;
  background: #fff; color: var(--accent); border: 0; box-shadow: 0 10px 24px rgba(15, 40, 95, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.org-add-dept span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-btn); color: #fff; font-size: 17px; line-height: 1; transition: transform .25s ease;
}
.btn.primary.org-add-dept:hover { background: #fff; color: var(--accent); filter: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 40, 95, .34); }
.btn.primary.org-add-dept:hover span { transform: rotate(90deg); }
.btn.primary.org-add-dept:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.org-modal.small { width: min(460px, 100%); }
.org-modal-help { margin: -4px 0 14px; font-size: 13.5px; color: var(--muted); }
.org-empty-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 460px; }
.org-empty-card h3 { margin: 8px 0 0; font-size: 17px; }
.org-empty-card p { margin: 0 0 12px; }

/* Department without positions yet: the tile blinks and a hint bubble points to it until a position is added */
.org-tiles { padding-top: 14px; }
.org-tiles .dept-tile.is-new { border-color: #f2d08c; z-index: 2; animation: tileBlink 1.4s ease-in-out infinite; }
.org-tiles .dept-tile.is-new .ot-icon { background: var(--grad-btn); color: #fff; }
@keyframes tileBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 196, 110, .55), 0 10px 24px rgba(28, 60, 120, .16); }
  50% { box-shadow: 0 0 0 10px rgba(240, 196, 110, 0), 0 10px 24px rgba(28, 60, 120, .16); background: #fffcf6; }
}
.ot-hint {
  position: absolute !important; top: -16px; left: 50%; z-index: 3 !important; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: #ffe7b0; color: #5c3d00; font-size: 12.5px; font-weight: 800;
  border: 1px solid #f0cf85; box-shadow: 0 6px 14px rgba(120, 80, 0, .16); animation: hintBob 1.4s ease-in-out infinite; pointer-events: none;
}
.ot-hint::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #f0cf85;
}
@keyframes hintBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) {
  .org-tiles .dept-tile.is-new, .ot-hint { animation: none; }
}

/* Department pop-up: Rename / Save / Cancel buttons */
.org-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: #fff; color: var(--accent); border: 1px solid #cfdcf5; box-shadow: 0 1px 2px rgba(28, 60, 120, .06);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.org-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.org-btn:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 4px 10px rgba(63, 125, 224, .18); transform: translateY(-1px); }
.org-btn:active { transform: translateY(0); }
.org-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.org-btn.primary { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(63, 125, 224, .3); }
.org-btn.primary:hover { background: var(--grad-btn); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(63, 125, 224, .38); }
.org-btn.ghost { color: var(--muted); border-color: var(--border); }
.org-btn.ghost:hover { background: #f4f6fa; color: var(--text); border-color: #c5cfdd; box-shadow: none; }
.org-title { gap: 12px; }
.org-title-edit { gap: 8px; }
.org-modal .org-actions { gap: 6px; }

/* User Accounts: department header (All departments on the right) and the Manage account pop-up */
.dept-head { justify-content: space-between; }
.dept-head .dept-back { margin-left: auto; }
.org-modal.user-modal { width: min(760px, 100%); padding-bottom: 24px; }
.user-modal .manage-card { border: 0 !important; margin: 0; padding: 0; box-shadow: none; background: none; }
.user-modal .mc-head {
  position: sticky; top: 0; z-index: 2; align-items: center; margin: 0 -22px 16px; padding: 20px 22px 14px;
  background: #fff; border-bottom: 1px solid #edf1f7;
}
.user-modal .mc-head h2 { font-size: 19px; color: var(--accent); }
.user-modal .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* User Accounts table: every cell centered horizontally and vertically */
.accounts-table th, .accounts-table td { text-align: center !important; vertical-align: middle !important; }
.accounts-table td .badge, .accounts-table td .lvl, .accounts-table td .temp-tag { margin-left: auto; margin-right: auto; }
.accounts-table td .btn { display: inline-flex; margin: 0 auto; }

/* User Accounts table: lively rows */
.accounts-table { border-collapse: separate; border-spacing: 0; }
.accounts-table thead th {
  background: linear-gradient(180deg, #f5f8ff, #eef3fd); color: #4a6fb5; font-size: 11.5px; letter-spacing: .06em;
  border-bottom: 2px solid #dfe8fa !important;
}
.accounts-table tbody tr.acct-row {
  position: relative; animation: rowIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.accounts-table tbody tr.acct-row td { transition: background-color .2s ease; padding-top: 12px; padding-bottom: 12px; }
.accounts-table tbody tr.acct-row:nth-child(even) td { background: #fbfcff; }
.accounts-table tbody tr.acct-row:hover td { background: #f1f6ff; }
.accounts-table tbody tr.acct-row:hover { box-shadow: inset 4px 0 0 var(--accent), 0 6px 18px rgba(28, 60, 120, .08); }
.accounts-table tbody tr.acct-row.is-off td { opacity: .7; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }

.emp-id {
  display: inline-block; padding: 4px 10px; border-radius: 8px; font-weight: 800; font-size: 13px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #2f4f8f; background: #eef3fd; border: 1px solid #dbe5f8;
}
.acct-person { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.acct-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 70% 48%));
  box-shadow: 0 4px 10px hsl(var(--h) 60% 45% / .3); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.acct-row:hover .acct-avatar { transform: scale(1.1) rotate(-5deg); }
.acct-name { display: flex; flex-direction: column; line-height: 1.3; }
.acct-name b { font-weight: 700; color: var(--text); }
.acct-name small { font-size: 12px; color: var(--muted); }
.you-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); vertical-align: 1px; }
.acct-email { color: #3d5580; }

.status-live, .status-off { display: inline-flex; align-items: center; gap: 6px; }
.status-live i, .status-off i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.status-live i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: .5;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }

.acct-when { display: inline-flex; flex-direction: column; line-height: 1.3; }
.acct-when b { font-weight: 700; color: var(--text); font-size: 13.5px; }
.acct-when small { font-size: 11.5px; color: var(--muted); }
.acct-when.never b { color: var(--muted); }

.btn.acct-manage {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; font-weight: 700; color: var(--accent);
  border-color: #cfdcf5; background: #fff; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.btn.acct-manage svg { width: 14px; height: 14px; }
.btn.acct-manage:hover:not(:disabled) { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(63, 125, 224, .3); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .accounts-table tbody tr.acct-row, .status-live i::after { animation: none; }
  .acct-row:hover .acct-avatar { transform: none; }
}
.acct-avatar svg { width: 19px; height: 19px; }
.acct-avatar.none { background: #e9eef6; color: #8a97ad; box-shadow: none; }

/* Top bar: all menus on the left (Home, role menus, form links); My Profile and Sign out on the right */
.nav-role { display: contents; }
.nav a[hidden] { display: none !important; }
.nav { flex-wrap: wrap; align-items: center; }
.nav a { white-space: nowrap; }

/* Menu icons: each menu has its own icon, shown only on the selected (current) menu */
.nav a, .top-right .toplink { display: inline-flex; align-items: center; gap: 7px; }
.nav-icon { display: none; width: 16px; height: 16px; flex-shrink: 0; }
.nav a.active .nav-icon, .top-right .toplink.active .nav-icon { display: inline-block; animation: navIconIn .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes navIconIn { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@media (prefers-reduced-motion: reduce) { .nav a.active .nav-icon, .top-right .toplink.active .nav-icon { animation: none; } }
/* Notifications (top right): a bell with the count of requests waiting for approval on the bell */
.top-right .toplink.bell-link { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.top-right .toplink.bell-link .nav-icon { display: block; width: 21px; height: 21px; animation: none; }
.top-right .toplink.bell-link::after, .top-right .toplink.bell-link.active::before { display: none; }
.top-right .toplink.bell-link:hover .nav-icon { animation: bellRing .5s ease; }
.bell-link .nav-badge {
  position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff; background: #e5484d;
  box-shadow: 0 0 0 2px #fff;
}
.bell-link .nav-badge[hidden] { display: none; }
.top-right .toplink.bell-link[hidden] { display: none; } /* approvers only */

/* Request Tracker tabs carry the status icon (⏳ ✓ ✖) instead of the small colored dot */
.track-tab.has-icon::before { display: none; }
/* Sign-in page: Create account is a full-width button the same size as Sign in */
.auth-create { margin-top: 10px; }
/* (Their hover inner glow is the uniform one at the end of this file.) */

/* Request Tracker menu: blinks with a bubble when an approver has moved one of my requests */
.nav a.has-update { position: relative; overflow: visible; background: rgba(255, 231, 176, .22); animation: navBlink 1.4s ease-in-out infinite; }
@keyframes navBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 130, .7); } 50% { box-shadow: 0 0 0 8px rgba(255, 214, 130, 0); } }
.nav-hint {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: #ffe7b0; color: #5c3d00; font-size: 12.5px; font-weight: 800; letter-spacing: 0;
  border: 1px solid #f0cf85; box-shadow: 0 6px 14px rgba(120, 80, 0, .18); animation: navHintBob 1.4s ease-in-out infinite; pointer-events: none;
}
.nav-hint::after {
  content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #f0cf85;
}
@keyframes navHintBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce) { .nav a.has-update, .nav-hint { animation: none; } }

/* Request Tracker: a request an approver has moved since the requester last looked */
.track-card.has-update { border-color: #f0b44c; box-shadow: 0 0 0 3px rgba(240,180,76,.28), 0 14px 30px rgba(28,60,120,.12); animation: trackGlow 1.6s ease-in-out 3; }
@keyframes trackGlow { 50% { box-shadow: 0 0 0 7px rgba(240,180,76,.12), 0 14px 30px rgba(28,60,120,.12); } }
.track-update { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; color: #7a4b00; background: #fff6e2; border: 1px solid #f6d79a; }
/* "New update" message bubble beside the card, its tail pointing at it (above the card on narrow screens) */
.track-item { position: relative; }
.track-flag {
  position: absolute; right: calc(100% + 12px); top: 50%; z-index: 2; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  font-size: 13.5px; font-weight: 800; color: #5c3d00; background: #ffe7b0;
  border: 1px solid #f0cf85; border-radius: 12px; box-shadow: 0 6px 14px rgba(120, 80, 0, .18);
  animation: flagNudge 1.4s ease-in-out infinite;
}
.track-flag::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-left-color: #f0cf85;
}
@keyframes flagNudge { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-4px, -50%); } }
@media (max-width: 1500px) { /* not enough room beside the card: above it, tail pointing down */
  .track-flag { position: relative; right: auto; top: auto; margin: 0 0 12px 18px; animation: flagBob 1.4s ease-in-out infinite; }
  .track-flag::after { left: 22px; top: 100%; transform: none; border-left-color: transparent; border-top-color: #f0cf85; }
}
@keyframes flagBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .track-flag { animation: none; } }
.track-update b { color: #9a5b00; }
.tu-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0a020; box-shadow: 0 0 0 0 rgba(240,160,32,.6); animation: tuPulse 1.4s ease-out infinite; }
@keyframes tuPulse { to { box-shadow: 0 0 0 9px rgba(240,160,32,0); } }
@media (prefers-reduced-motion: reduce) { .track-card.has-update, .tu-dot { animation: none; } }

/* Notifications page */
.notif-list { display: grid; gap: 12px; }
/* A request new for my approval: highlighted like the Request Tracker's "New update", with the same bubble */
.notif-card.is-new { border-color: #f0b44c; box-shadow: 0 0 0 3px rgba(240,180,76,.28), 0 10px 24px rgba(28,60,120,.12); }
.notif-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: 0 6px 18px rgba(28,60,120,.08); animation: rowIn .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms); transition: transform .2s ease, box-shadow .2s ease; }
.notif-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(28,60,120,.16); }
.notif-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad-btn); box-shadow: 0 6px 14px rgba(63,125,224,.3); }
.notif-icon .nav-icon { display: inline-block; width: 20px; height: 20px; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-title { font-size: 15px; }
.notif-title b { color: var(--accent); }
.notif-meta { font-size: 13.5px; color: #3d5580; }
.notif-sub { font-size: 12.5px; color: var(--muted); }
.notif-go { flex-shrink: 0; font-weight: 700; font-size: 13.5px; color: var(--accent); padding: 8px 14px; border-radius: 999px; border: 1px solid #cfdcf5; transition: background .2s ease, color .2s ease; }
.notif-card:hover .notif-go { background: var(--grad-btn); color: #fff; border-color: transparent; }
/* Notifications tabs: Approved (green) and Disapproved (red) cards */
.notif-tabs { margin-top: 4px; }
.notif-card.nc-approved { border-left-color: #1fae84; }
.notif-card.nc-approved .notif-icon, .notif-empty.nc-approved .notif-icon { background: linear-gradient(135deg, #1fae84, #22c1a0); box-shadow: 0 6px 14px rgba(31, 174, 132, .3); }
.notif-card.nc-approved .notif-title b { color: #127a52; }
.notif-card.nc-disapproved { border-left-color: var(--bad); }
.notif-card.nc-disapproved .notif-icon, .notif-empty.nc-disapproved .notif-icon { background: linear-gradient(135deg, #c0362c, #e26d5c); box-shadow: 0 6px 14px rgba(192, 54, 44, .28); }
.notif-card.nc-disapproved .notif-title b { color: #b0302a; }
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px !important; }
.notif-empty h3 { margin: 8px 0 0; }
.notif-empty p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .notif-card { flex-wrap: wrap; } .notif-body { flex: 1 1 calc(100% - 60px); } .notif-go { margin-left: 56px; } }

/* Approvals: your box turns red when you click Approve without ticking it */
.approve-check.mine.invalid { outline: 2px solid var(--bad); outline-offset: 3px; border-radius: 4px; animation: toastShake .4s ease; }

/* =====================================================================
   Uniform hover for buttons: a slight inner glow (the same everywhere)
   - every blue-gradient button (and the ones that turn blue on hover)
   - every button in a pop-up (messages, confirmations, Disapprove reason)
   ===================================================================== */
:root {
  --btn-glow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 10px rgba(255, 255, 255, .22);
  --btn-glow-light: inset 0 0 0 1px rgba(63, 125, 224, .18), inset 0 0 10px rgba(63, 125, 224, .16); /* white buttons */
}
.btn.primary, .org-btn.primary, .track-view, .btn.acct-manage, .section-title .add-row, .notif-go,
.toast-modal .btn, .confirm-actions .btn, #reasonDialog .btn {
  transition: box-shadow .25s ease, filter .25s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn.primary:not(.org-add-dept):hover, .actionbar .btn.primary:hover, .org-btn.primary:hover,
.track-view:hover, .btn.acct-manage:hover:not(:disabled), .section-title .add-row:hover, .notif-card:hover .notif-go,
.toast-modal .btn:hover, .confirm-actions .btn.primary:hover, .confirm-actions .btn.danger:hover, #reasonDialog .btn.danger:hover {
  box-shadow: var(--btn-glow), 0 8px 20px rgba(63, 125, 224, .3);
}
.confirm-actions .btn.danger:hover, #reasonDialog .btn.danger:hover { box-shadow: var(--btn-glow), 0 8px 20px rgba(192, 54, 44, .3); }
/* white pop-up buttons (Cancel): the same inner glow, in blue */
.confirm-actions .btn:not(.primary):not(.danger):hover, #reasonDialog .btn:not(.danger):hover { box-shadow: var(--btn-glow-light), 0 6px 16px rgba(20, 50, 110, .12); }
/* Focus: no browser outline (the black line); a focused button looks like it does on hover — the same inner glow */
.btn:focus, .btn:focus-visible, .org-btn:focus-visible, .track-view:focus-visible { outline: none; }
.btn.primary:not(.org-add-dept):focus-visible, .org-btn.primary:focus-visible, .track-view:focus-visible,
.toast-modal .btn:focus-visible, .confirm-actions .btn.primary:focus-visible {
  box-shadow: var(--btn-glow), 0 8px 20px rgba(63, 125, 224, .3);
}
.confirm-actions .btn.danger:focus-visible, #reasonDialog .btn.danger:focus-visible { box-shadow: var(--btn-glow), 0 8px 20px rgba(192, 54, 44, .3); }
.confirm-actions .btn:not(.primary):not(.danger):focus-visible, #reasonDialog .btn:not(.danger):focus-visible { box-shadow: var(--btn-glow-light), 0 6px 16px rgba(20, 50, 110, .12); }

/* Request Tracker tab icons: in the tab's text colour (the progress circle is a line icon, so it matches the ☰ ✓ ✖ glyphs). */
.track-tab .tt-ico { font-style: normal; color: inherit; margin-right: -4px; display: inline-flex; }
.track-tab .tt-ongoing { width: 14px; height: 14px; }
.track-tab .tt-check { width: 15px; height: 15px; } /* the same size as the ✖ on Disapproved */
/* Tabs not clicked: each icon in its status colour, like the coloured dots on the Notifications tabs. */
.track-tab.tt-all:not(.active) .tt-ico { color: #5a48c8; }
.track-tab.tt-pending:not(.active) .tt-ico { color: var(--accent); }
.track-tab.tt-approved:not(.active) .tt-ico { color: #1fae84; }
.track-tab.tt-disapproved:not(.active) .tt-ico { color: var(--bad); }
/* Hover on a tab not clicked: the text keeps its colour (only the background lightens). */
.track-tab:not(.active):hover, .track-tab.tt-all:not(.active):hover { color: var(--text); }
/* Request Tracker tabs: a coloured dot while not clicked (like the Notifications tabs); the clicked tab shows
   its icon in place of the dot. */
.track-tab.has-icon:not(.active)::before { display: block; }
.track-tab.has-icon:not(.active) .tt-ico { display: none; }
.track-tab.has-icon.active::before { display: none; }
/* Approvals: an officially ticked (already approved) box: stays ticked, not clickable, no pop-up. */
.approve-check.signed { cursor: default; accent-color: var(--ok); opacity: 1; }
/* Expenses footer: TOTAL EXPENSE/S (sum of the expense rows) above AMOUNT TO BE PAID BY BELLKENZ. */
.paper .exp tfoot tr.total-row td { border-bottom: 1px solid var(--line, #e3e9f3); }
.paper .exp tfoot td.total-value { font-size: 16px; font-weight: 800; color: var(--text); background: #f7f9fc !important; }
/* Benefit Balance Summary: column separators in the body, the same line as the header's. */
.paper .bal tbody td:not(:last-child) { border-right: 1px solid #dbe3ef; }

/* =====================================================================
   Settings: medical reimbursement fund of each employee
   ===================================================================== */
.fund-table td.fund-cell { min-width: 150px; }
.fund-line { display: flex; justify-content: center; gap: 8px; align-items: baseline; font-weight: 600; white-space: nowrap; }
.fund-line small { color: var(--muted); font-weight: 600; font-size: 11px; min-width: 64px; text-align: right; }
.org-modal.fund-modal { width: min(980px, 100%); }
.fund-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.fund-legend .fl { flex: none; width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid #b9c2cf; }
.fund-legend .fl.used { background: #d9d9d9; }
.fund-legend .fl.left { background: #ffe39c; }
.fund-legend .fl-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.fund-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.fund-block h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--text); }
.fund-sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fund-sheet th, .fund-sheet td { border: 1px solid #3a3f47; padding: 8px 10px; text-align: center; vertical-align: middle; }
.fund-sheet th { font-weight: 700; color: #1d2330; width: 58%; }
.fund-sheet td { background: #fff; font-weight: 600; }
.fund-sheet tr.fund-set th { background: #eef3fb; }
.fund-sheet tr.fund-used th { background: #d9d9d9; }
.fund-sheet tr.fund-left th { background: #ffe39c; }
.fund-sheet td input.money { width: 100%; text-align: center; padding: 6px 8px; }
/* Settings: the default fund every employee starts with. */
.fund-default { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #dbe3ef; border-radius: 12px; background: #f7f9fd; font-size: 12.5px; }
.fund-default .fd-title { font-weight: 800; color: var(--accent); }
.fund-default .fd-item { display: flex; flex-direction: column; font-weight: 600; }
.fund-default .fd-item small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fund-default .btn { margin-left: auto; }

/* Sign-in page: Login with Corporate Gmail (company Google accounts only). */
.auth-card .gmail-intro { margin: 6px 0 18px; color: #5b6472; font-size: 15px; line-height: 1.6; text-align: justify; }
.auth-card .gmail-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, #667eea, #764ba2); color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(102, 126, 234, .3); transition: box-shadow .2s ease, filter .2s ease;
}
.auth-card .gmail-btn:hover:not(:disabled), .auth-card .gmail-btn:focus-visible { box-shadow: var(--btn-glow), 0 8px 20px rgba(102, 126, 234, .38); outline: none; }
.auth-card .gmail-btn:disabled { cursor: progress; filter: saturate(.7); opacity: .8; }
.auth-card .gmail-domains { margin-top: 18px; padding: 14px 18px; border-radius: 10px; background: #f3f3f5; font-size: 14px; color: #2b2f36; text-align: left; }
.auth-card .gmail-domains ul { margin: 6px 0 0; padding-left: 0; list-style: none; color: #5b6472; }
.auth-card .gmail-domains li::before { content: "• "; }
.fund-table tr.is-off td { opacity: .6; }
/* Settings → Fund per position: departments first, then the positions inside one. */
.fund-card .dept-grid { margin-top: 4px; }
.fund-dept-head { margin: 2px 0 12px; }
.fund-dept-head h2 { font-size: 18px; }
/* Settings → positions: Actions column (Set fund / Use default). */
.fund-table td.fund-actions { white-space: nowrap; }
.fund-table td.fund-actions .btn { margin: 2px 3px; }
/* Default fund strip: Employee and Dependent on separate rows. */
.fund-default .fd-line { display: flex; gap: 8px; align-items: baseline; }
.fund-default .fd-line em { font-style: normal; color: var(--muted); font-size: 11.5px; font-weight: 600; min-width: 68px; }
/* Default fund strip: more room between the fund columns, with a thin divider. */
.fund-default { column-gap: 0; }
.fund-default .fd-title { margin-right: 28px; }
.fund-default .fd-item { padding: 0 36px; border-left: 1px solid #dbe3ef; }
@media (max-width: 700px) { .fund-default .fd-item { padding: 0 16px; } }


/* Departments & Positions: two tabs (Departments tiles | one Positions list). */
.org-tabs { margin: 0 0 16px; }
.org-tabs .track-tab::before { display: none; }
.org-dept-bar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.org-positions .org-add { margin-bottom: 12px; }
.org-pos-search { width: min(420px, 100%); margin: 0 0 12px; padding: 10px 14px; border: 1px solid #d5deeb; border-radius: 10px; background: #f7f9fd; font: inherit; font-size: 14px; }
.org-pos-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.org-dept-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Sign-in page (Corporate Gmail): a clean white card like a modern "Sign In" screen — centred title,
   one gradient pill button, the allowed domain in small text. (No extra buttons.) */
.auth-card.signin-card { max-width: 400px; padding: 36px 34px 30px; border-radius: 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(20, 40, 90, .22); border: 1px solid rgba(255, 255, 255, .7); }
.signin-card .auth-logo { margin: 0 auto 10px; width: 46px; height: 46px; }
.signin-card .signin-brand { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.signin-card h1 { margin: 2px 0 10px; font-size: 26px; font-weight: 800; color: #1d2330; }
.signin-card .gmail-intro { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #6b7384; text-align: center; }
.signin-card .gmail-btn { padding: 13px 18px; border-radius: 12px; font-size: 15px; font-weight: 700;
  background: linear-gradient(115deg, #c2409a 0%, #e0579f 38%, #f07ab8 55%, #6a5bd6 80%, #3f8fd9 100%);
  box-shadow: 0 10px 24px rgba(194, 64, 154, .28); }
.signin-card .gmail-btn:hover:not(:disabled), .signin-card .gmail-btn:focus-visible { box-shadow: var(--btn-glow), 0 12px 28px rgba(194, 64, 154, .36); }
.signin-card .gmail-domains { margin: 18px 0 0; padding: 0; background: none; font-size: 12.5px; color: #8a92a3; text-align: center; }
.signin-card .gmail-domains b { color: #4b5363; font-weight: 700; }
.signin-card .banner { text-align: left; }
/* Sign-in button: "Sign in with company email", mail icon, teal to green gradient. */
.signin-card .gmail-btn { background: linear-gradient(90deg, #0f9b8e 0%, #2fbf71 100%); box-shadow: 0 10px 24px rgba(15, 155, 142, .28); }
.signin-card .gmail-btn:hover:not(:disabled), .signin-card .gmail-btn:focus-visible { box-shadow: var(--btn-glow), 0 12px 28px rgba(15, 155, 142, .36); }
.signin-card .gmail-btn .gmail-ico { width: 20px; height: 20px; flex: none; }
/* Create department / Create position: a simple button — normal text, a plain "+", smaller, light shadow. */
.btn.primary.org-add-dept { gap: 6px; padding: 8px 16px; font-weight: 600; font-size: 13.5px; box-shadow: 0 4px 12px rgba(15, 40, 95, .16); }
.org-add-dept span { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent); font-size: 16px; font-weight: 600; }
.btn.primary.org-add-dept:hover { transform: none; box-shadow: var(--btn-glow-light), 0 6px 16px rgba(15, 40, 95, .2); }
.btn.primary.org-add-dept:hover span { transform: none; }

/* Signing in (after Google verifies the account): a full-page loading screen that blocks clicks. */
.signing-in { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(15, 35, 80, .38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: progress; animation: siFade .2s ease; }
.signing-in .si-box { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 260px; padding: 26px 30px;
  border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(15, 35, 80, .3); text-align: center; }
.signing-in .si-box b { font-size: 16px; color: #1d2330; }
.signing-in .si-box small { font-size: 12.5px; color: #6b7384; }
.signing-in .si-spin { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; border: 4px solid #d8efe6; border-top-color: #0f9b8e;
  animation: siSpin .8s linear infinite; }
@keyframes siSpin { to { transform: rotate(360deg); } }
@keyframes siFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signing-in .si-spin { animation-duration: 2s; } }


/* My Profile: a small icon beside each field label. */
.pf-field .lbl { display: flex; align-items: center; gap: 7px; }
.pf-field .pf-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #e8f0fd; color: var(--accent); }
.pf-field .pf-ico svg { width: 14px; height: 14px; }

/* ---------- sign-in background: form icons engraved (sunk) into the background (decoration only) ---------- */
/* z-index -1: behind the page content, above the gradient's light texture (body::before).
   Shown only while a sign-in screen is actually on the page (.auth-wrap): not once signed in, and not while
   a refresh is still checking the session (body.auth is set from the start, before the app knows). */
.auth-doodles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body:not(:has(#app .auth-wrap)) .auth-doodles { display: none; }
@media print { .auth-doodles { display: none; } }
.doodle {
  position: absolute; display: grid; place-items: center; width: 64px; height: 64px;
  color: rgba(16, 48, 118, .2);           /* a little darker than the background: the cut */
  transform: rotate(var(--r, 0deg)) scale(1.35);
}
.doodle svg {
  width: 100%; height: 100%; stroke-width: 2.1;
  /* engraved: a dark inner edge above, a light edge below (lit from the top) */
  filter: drop-shadow(0 -1px 0 rgba(8, 28, 80, .28)) drop-shadow(0 1.5px 0 rgba(255, 255, 255, .38));
}
/* left side */
.doodle.d1  { top: 8%;  left: 6%;  --r: -10deg;   }
.doodle.d2  { top: 30%; left: 15%; --r: 8deg;   width: 78px; height: 78px; }
.doodle.d3  { top: 56%; left: 5%;  --r: -6deg;  }
.doodle.d4  { top: 78%; left: 17%; --r: 12deg;    width: 72px; height: 72px; }
.doodle.d5  { top: 14%; left: 27%; --r: 6deg;   width: 52px; height: 52px; }
.doodle.d6  { top: 88%; left: 4%;  --r: -14deg;   width: 54px; height: 54px; }
.doodle.d7  { top: 62%; left: 28%; --r: -4deg;   width: 50px; height: 50px; }
/* right side */
.doodle.d8  { top: 9%;  right: 7%;  --r: 10deg;    width: 74px; height: 74px; }
.doodle.d9  { top: 33%; right: 16%; --r: -8deg;  }
.doodle.d10 { top: 58%; right: 6%;  --r: 14deg;  width: 70px; height: 70px; }
.doodle.d11 { top: 80%; right: 18%; --r: -10deg; }
.doodle.d12 { top: 16%; right: 27%; --r: -6deg;  width: 50px; height: 50px; }
.doodle.d13 { top: 88%; right: 5%;  --r: 8deg;   width: 56px; height: 56px; }
.doodle.d14 { top: 64%; right: 28%; --r: 6deg;   width: 50px; height: 50px; }
/* small screens: fewer, smaller icons so the card stays clear */
@media (max-width: 900px) {
  .doodle.d5, .doodle.d7, .doodle.d12, .doodle.d14 { display: none; }
  .doodle { transform: rotate(var(--r, 0deg)) scale(1.05); }
}
@media (max-width: 560px) {
  .doodle.d2, .doodle.d4, .doodle.d9, .doodle.d11 { display: none; }
  .doodle { opacity: .8; }
}

/* sign-in: welcome line above the card and the company footer below it (white on the background) */
.auth-welcome { text-align: center; color: #fff; margin-bottom: 34px; text-shadow: 0 2px 4px rgba(10, 30, 80, .35), 0 4px 14px rgba(10, 30, 80, .3); }
.auth-welcome h2 { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 800; letter-spacing: .01em; color: #fff; }
.auth-welcome p { margin: 8px 0 0; font-size: 19px; opacity: .95; }
@media (max-width: 560px) {
  .auth-welcome h2 { font-size: 28px; }
  .auth-welcome p { font-size: 16px; }
}
.auth-footer { margin-top: 18px; text-align: center; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(10, 30, 80, .4), 0 3px 10px rgba(10, 30, 80, .28); }
.auth-footer p { margin: 0; }

/* ---------- Request Tracker: choose a form first (cards like Home), then that form's requests ---------- */
/* square cards, title and button centered */
.forms-grid:has(> .track-pick, > .pick-item) { grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); justify-content: center; }
.form-card.track-pick { aspect-ratio: 1 / 1; justify-content: center; align-items: center; text-align: center; gap: 16px; }
.form-card.track-pick h3 { font-size: 20px; line-height: 1.35; }
.form-card.track-pick .fc-open, .form-card.track-pick .fc-badge { align-self: center; margin-top: 0; }
.form-card.track-pick p { flex: none; }
/* "has a new update" message bubble on the top edge of the form card, its tail pointing down at the card */
.pick-item { position: relative; }
.pick-flag {
  position: absolute; left: 50%; top: -20px; z-index: 2; max-width: calc(100% - 16px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #5c3d00; background: #ffe7b0; text-align: left;
  border: 1px solid #f0cf85; border-radius: 12px; box-shadow: 0 6px 14px rgba(120, 80, 0, .18);
  transform: translateX(-50%); animation: pickBob 1.4s ease-in-out infinite;
}
.pick-flag b { font-weight: 800; }
.pick-flag small { display: block; font-size: 11.5px; font-weight: 600; opacity: .85; white-space: normal; }
.pick-flag::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #f0cf85;
}
@keyframes pickBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
@media (prefers-reduced-motion: reduce) { .pick-flag { animation: none; } }
.form-card.track-pick.has-update { border-color: #f6d79a; box-shadow: 0 0 0 4px rgba(240, 180, 76, .18), var(--card-shadow); }
.track-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 12px; border-radius: 999px;
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35); transition: background .2s ease;
}
.track-back:hover { background: rgba(255, 255, 255, .26); }
.page-head h1 .track-form { font-weight: 600; opacity: .85; }

/* Fund Management: Search position, between the default fund and the positions table */


/* Search position: our own × (always shown while the box has text); the browser's own × is hidden */
.search-wrap { position: relative; display: block; width: min(420px, 100%); margin: 0 0 12px; }
.search-wrap .org-pos-search { width: 100%; margin: 0; padding-right: 40px; }
.search-wrap .org-pos-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: #2f5a9a; font-size: 20px; font-weight: 700; line-height: 1;
}
.search-clear:hover, .search-clear:focus-visible { background: #e6eefb; outline: none; }
.search-clear[hidden] { display: none; }
/* Fund Management: the Default fund bar and Search position on one line (stacked on narrow screens) */
.fund-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.fund-top .fund-default { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; }
.fund-top .fund-default .acct-manage { flex: none; white-space: nowrap; }
.search-field.fund-pos-search { flex: 0 0 260px; width: 260px; }
.search-field .search-wrap { width: 100%; margin: 0; }
/* label above the box, blue and bold like "Default fund" */
.fund-top .search-label { display: block; margin: 0 0 5px 2px; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--accent); }
@media (max-width: 1100px) {
  .fund-top { flex-direction: column; align-items: stretch; }
  .fund-top .fund-default { flex-wrap: wrap; }
  .search-field.fund-pos-search { flex: none; width: min(420px, 100%); }
}

/* ---------- Roles and Permissions: nominate an approver (search Employee ID → retrieve → tag user level) ---------- */
.nominate-card h2 { margin: 0 0 2px; }
.nominate-card > p.muted { margin: 0 0 14px; }
.nominate-card .search-label { display: block; margin: 0 0 5px 2px; font-size: 13px; font-weight: 800; color: var(--accent); }
.nom-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nom-search-row .org-pos-search { width: min(320px, 100%); margin: 0; }
.nom-search-row .org-pos-search.invalid { border-color: #ef9a92; background: #fff7f6; }
.nom-search-row select { min-width: 220px; padding: 10px 12px; border: 1px solid #d5deeb; border-radius: 10px; background: #fff; font: inherit; }
.nom-error { margin: 8px 0 0 2px; color: var(--bad, #c0392b); font-size: 13px; }
.nom-result { margin-top: 16px; padding: 16px; border: 1px solid #dbe3ef; border-radius: 12px; background: #f7f9fd; display: grid; gap: 14px; animation: secIn .3s ease-out both; }
/* the retrieved account: laid out like My Profile (read-only fields; only the User Level can be changed) */
.nom-result { display: block; background: #fff; }
.nom-result h3 { margin: 0 0 2px; font-size: 16px; }
.nom-result > p.muted { margin: 0 0 12px; }
.nom-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nom-actions { white-space: nowrap; }
.nom-actions .btn + .btn { margin-left: 6px; }