/* =====================================================================
   HRMS – main.css
   Loaded after Bootstrap 5 and tokens.css. Uses only the token names from tokens.css (no colour values here);
   the classes below are shared by every page (keep page styles here,
   not in component files, so the whole app looks the same).
   ===================================================================== */

/* colours and sizes: see tokens.css */

body { background: var(--page-bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.min-w-0 { min-width: 0; }
.app-boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-muted); }

/* ---------- Bootstrap tweaks ---------- */
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
}
.text-primary { color: var(--brand-text) !important; }
.text-bg-primary { background-color: var(--brand) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--focus-border); box-shadow: 0 0 0 .2rem var(--focus-ring);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; }
.form-label.required::after { content: " *"; color: var(--danger); }
.modal-footer:empty { display: none; }
.modal-content { border: 0; border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--border); }
.dropdown-menu { border-color: var(--border); box-shadow: var(--shadow-md); border-radius: 10px; }
.badge { font-weight: 500; }

/* Square icon-only button used in tables and toolbars. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted);
}
.btn-icon:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-text); }
.btn-icon:disabled { opacity: .35; }
.btn-icon.btn-sm { width: 28px; height: 28px; }

/* ---------- App shell: sidebar + top bar ---------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1040;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--on-brand); transition: transform .2s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; height: var(--topbar-height); padding: 0 1rem; border-bottom: 1px solid var(--on-brand-line); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--on-brand-chip); font-size: 1.1rem; flex-shrink: 0; }
.brand-name { font-weight: 700; letter-spacing: .5px; line-height: 1.1; }
.brand-org { font-size: .78rem; opacity: .75; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem 1.5rem; }
.nav-group-title { margin: 1rem .6rem .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; margin-bottom: 2px;
  border-radius: 8px; color: var(--on-brand-muted); text-decoration: none; font-size: .93rem;
}
.nav-item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
a.nav-item:hover { background: var(--on-brand-hover); color: var(--on-brand); }
a.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
a.nav-item:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
.nav-item.is-soon { opacity: .5; cursor: default; }
.nav-list { list-style: none; margin: 0; padding: 0; }

/* Keyboard users can jump over the menu. Hidden until it gets focus. */
.skip-link {
  position: fixed; top: .5rem; left: .5rem; z-index: 2100; padding: .5rem .9rem; border: 0; border-radius: 8px;
  background: var(--brand); color: var(--on-brand); transform: translateY(-200%); transition: transform .15s;
}
.skip-link:focus { transform: none; }
.app-content:focus { outline: none; }
.soon-badge { margin-left: auto; font-size: .62rem; padding: .1rem .4rem; border-radius: 99px; background: var(--on-brand-chip); text-transform: uppercase; letter-spacing: .05em; }

.sidebar-backdrop { display: none; }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

.app-topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--topbar-height);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem;
  background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; color: var(--text); }
.app-content { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; }

.user-menu { position: relative; }
.user-menu-button { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem; border: 0; border-radius: 10px; background: transparent; }
.user-menu-button:hover { background: var(--page-bg); }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; }

.avatar {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; font-size: .85rem;
}
.avatar-sm { width: 34px; height: 34px; font-size: .78rem; }

/* Phones and tablets: the menu slides in. */
@media (max-width: 991.98px) {
  /* visibility: hidden (after the slide-out) takes the closed menu out of the Tab order and the screen reader. */
  .app-sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .app-main { margin-left: 0; }
  .menu-open .app-sidebar { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: var(--shadow-drawer); }
  .menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: var(--backdrop); }
  .app-topbar { padding: 0 .75rem; }
  .app-content { padding: 1rem; }
}

/* ---------- Page header ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-subtitle { color: var(--text-muted); margin: .25rem 0 0; font-size: .92rem; }
.back-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; text-decoration: none; margin-bottom: .35rem; }
.section-title { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
@media (max-width: 575.98px) {
  .page-title { font-size: 1.25rem; }
  .page-header > .btn { width: 100%; }
  .page-header-actions { width: 100%; }
  .page-header-actions > .btn { flex: 1 1 0; }
}

/* ---------- Cards ---------- */
.card-soft { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card-bg); overflow: hidden; }
.card-soft > .card-header { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .85rem 1.1rem; }
.form-narrow { max-width: 560px; }

.stat-card { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-size: 1.25rem; }
.stat-label { font-size: .8rem; color: var(--text-muted); }
.stat-value { font-size: 1.1rem; font-weight: 600; }

.shortcut-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; height: 100%; padding: 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-weight: 500; transition: border-color .15s, transform .15s;
}
.shortcut-card i { font-size: 1.4rem; color: var(--brand-text); }
.shortcut-card:hover { border-color: var(--brand); transform: translateY(-2px); color: var(--brand-text); }

.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 99px; background: var(--card-bg); border: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }
.chip-sm { padding: .15rem .55rem; font-size: .78rem; }

/* ---------- Toolbar, search, filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.search-box { position: relative; flex: 1 1 240px; max-width: 360px; }
.search-box i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-box .form-control { padding-left: 2.2rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pill { border: 1px solid var(--border); background: var(--card-bg); border-radius: 99px; padding: .3rem .8rem; font-size: .85rem; color: var(--text-muted); }
.filter-pill .count { display: inline-block; min-width: 1.4rem; margin-left: .2rem; padding: 0 .35rem; border-radius: 99px; background: var(--page-bg); font-size: .75rem; }
.filter-pill:hover { border-color: var(--brand); color: var(--brand-text); }
.filter-pill.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.filter-pill.active .count { background: var(--on-brand-chip); }
@media (max-width: 575.98px) { .search-box { max-width: none; } }

/* ---------- Tables ---------- */
.table-clean { --bs-table-bg: transparent; }
.table-clean > thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .7rem 1rem; white-space: nowrap; }
.table-clean > tbody td { padding: .75rem 1rem; border-color: var(--border); }
.table-clean > tbody tr:hover td { background: var(--hover-bg); }
.table-clean > tbody tr:last-child td { border-bottom: 0; }
.row-muted td { opacity: .6; }
.person { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.audit-details { max-width: 420px; }

/*
 * Tables that must fit a phone without sideways scrolling (PR-20):
 *   <table class="table table-clean table-fit"> ... <td class="cell-grow"> (the name column: takes the rest, text truncates)
 * Put the less important columns behind d-none d-md-table-cell and repeat what matters inside the cell-grow column.
 */
.table-fit { table-layout: auto; width: 100%; }
.table-fit .cell-grow { width: 100%; max-width: 0; }
.row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
@media (max-width: 575.98px) {
  .table-clean > thead th, .table-clean > tbody td { padding-left: .6rem; padding-right: .6rem; }
  .row-actions { max-width: 110px; }   /* three icons per line, then the next line */
}

/* Long text that shows two lines until clicked. It is a <button>, so the keyboard can open it too. */
.details-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.details-clamp.expanded { display: block; -webkit-line-clamp: unset; }
.details-clamp:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- Status badges ---------- */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { background: var(--success-soft); color: var(--success); }
.status-warning { background: var(--warning-soft); color: var(--warning); }
.status-danger  { background: var(--danger-soft);  color: var(--danger); }
.status-info    { background: var(--info-soft);    color: var(--info); }
.status-muted   { background: var(--surface-muted); color: var(--text-muted); }

/* ---------- Empty and loading ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state > i { font-size: 2.5rem; opacity: .5; }
.empty-state-title { font-weight: 600; color: var(--text); margin-top: .5rem; }
.empty-state-text { font-size: .9rem; margin-top: .25rem; }
.loading-block { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.5rem 1rem; color: var(--text-muted); }

/* ---------- Forms ---------- */
.form-section { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.form-section-title { font-weight: 600; font-size: .9rem; margin-bottom: .75rem; color: var(--brand-text); }
.choice-list { display: grid; gap: .5rem; }
.choice { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.choice > i { font-size: 1.2rem; color: var(--brand-text); margin-top: .1rem; }
.choice .form-check-input { margin-top: .3rem; flex-shrink: 0; }
.choice.selected { border-color: var(--brand); background: var(--brand-soft); }

.password-rules { list-style: none; padding: 0; margin: .5rem 0 1rem; font-size: .83rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.password-rules li.is-met { color: var(--success); }

.dev-note { padding: .75rem 1rem; border-radius: 10px; border: 1px dashed var(--note-line); background: var(--note-bg); font-size: .88rem; }

/* ---------- Roles ---------- */
.role-card { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.role-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 1.15rem; }
.role-icon.is-system { background: var(--brand); color: var(--on-brand); }
.role-description { margin: 0; font-size: .88rem; color: var(--text-muted); flex: 1; }

.permission-group-header { display: flex; align-items: center; justify-content: space-between; }
.permission-table .permission-name { min-width: 240px; font-weight: 400; }
.permission-table thead th:not(:first-child), .permission-table td { width: 80px; }
.permission-table tr.is-tab .permission-name { padding-left: 2rem; color: var(--text-muted); }
.permission-table tr.is-off .permission-name { color: var(--text-muted); }
.permission-table .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; margin: 0; }
.permission-tick-label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; }
.permission-tick-text { display: none; }

/* Phones: each screen is a small card - its name, then its ticks with their names, wrapping. No sideways scroll. */
@media (max-width: 767.98px) {
  .permission-table thead { display: none; }
  .permission-table, .permission-table tbody { display: block; }
  .permission-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
  .permission-table tr:last-child { border-bottom: 0; }
  .permission-table .permission-name { flex: 1 0 100%; min-width: 0; padding: 0 0 .25rem; border: 0; }
  .permission-table tr.is-tab .permission-name { padding-left: 1rem; }
  .table-clean.permission-table > tbody td { width: auto; padding: .25rem .4rem; border: 0; }
  .permission-table .permission-none { display: none; }
  .permission-table .permission-row-toggle { margin-left: auto; }
  .permission-tick-text { display: inline; font-size: .85rem; }
  .permission-tick-label { padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 99px; background: var(--card-bg); }
}

.save-bar {
  position: sticky; bottom: 1rem; z-index: 1010; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--text); color: var(--on-brand);
  box-shadow: var(--shadow-lg); transform: translateY(150%); opacity: 0; pointer-events: none;
  visibility: hidden;   /* its buttons cannot get focus while it is hidden */
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.save-bar.visible { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform .2s ease, opacity .2s ease; }

/* ---------- Dropdown list manager ---------- */
.list-picker { max-height: 65vh; overflow-y: auto; }
.list-picker .list-group-item.active { background: var(--brand-soft); color: var(--brand-text); border-color: var(--border); }
.list-picker .list-group-item.active .list-picker-meta { color: var(--brand-text); opacity: .8; }
.list-picker-meta { color: var(--text-muted); margin-top: .15rem; }
.master-values .list-group-item { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; }
.master-values .list-group-item.is-disabled .fw-medium { color: var(--text-muted); text-decoration: line-through; }
.master-values.is-busy { opacity: .6; pointer-events: none; }
.master-value-actions .btn-icon { width: 30px; height: 30px; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
.app-toast { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .9rem; border-radius: 10px; background: var(--card-bg); color: var(--text); border-left: 4px solid; box-shadow: var(--shadow-md); font-size: .9rem; animation: toast-in .2s ease; }
.app-toast > i { margin-top: .1rem; }
.app-toast-success { border-color: var(--success); } .app-toast-success > i { color: var(--success); }
.app-toast-error   { border-color: var(--danger); }  .app-toast-error > i   { color: var(--danger); }
.app-toast-warning { border-color: var(--warning); } .app-toast-warning > i { color: var(--warning); }
.app-toast-info    { border-color: var(--info); }    .app-toast-info > i    { color: var(--info); }
.btn-close-sm { width: .6em; height: .6em; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Login screens ---------- */
.auth-page { display: flex; min-height: 100vh; background: var(--card-bg); }
.auth-brand {
  flex: 1 1 50%; display: flex; align-items: center; padding: 3rem;
  background: radial-gradient(circle at 20% 20%, var(--auth-glow), transparent 45%), linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: var(--on-brand);
}
.auth-brand-inner { max-width: 460px; margin: 0 auto; }
.auth-brand h1 { font-size: 2.1rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.2; }
.auth-brand p { opacity: .85; font-size: 1.05rem; }
.auth-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; }
.auth-points i { color: var(--auth-point); margin-right: .5rem; }
.auth-logo { font-weight: 700; font-size: 1.2rem; letter-spacing: .5px; display: flex; align-items: center; gap: .5rem; }
.auth-logo-small { color: var(--brand-text); margin-bottom: 1.5rem; }
.auth-form-side { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 420px; }
.center-page .auth-card { background: var(--card-bg); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.auth-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
.status-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.6rem; margin-bottom: .75rem; }
.status-icon-warning { background: var(--warning-soft); color: var(--warning); }
@media (max-width: 991.98px) { .auth-brand { display: none; } }

.center-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }

/* ---------- Vendor console ---------- */
.platform-bg { background: var(--platform-bg); }
.platform-topbar { display: flex; align-items: center; gap: .75rem; height: var(--topbar-height); padding: 0 1.5rem; background: var(--heading); color: var(--card-bg); }
.platform-shell .app-content { margin: 0 auto; }
.activity-list .list-group-item { background: transparent; }

/* ---------- Lists with paging and filters (Staff list) ---------- */
.toolbar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.sort-select { width: auto; min-width: 11rem; }
.filter-panel { padding: 0 1rem 1rem; }
.is-busy { opacity: .6; pointer-events: none; transition: opacity .15s; }
.row-link { cursor: pointer; }
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: var(--brand-text); text-decoration: underline; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.pager-info { font-size: .85rem; color: var(--text-muted); }
.pager-buttons { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 575.98px) {
  .toolbar-end { width: 100%; margin-left: 0; }
  .toolbar-end .sort-select { flex: 1 1 auto; min-width: 0; }
}

/* ---------- Staff photo ---------- */
.staff-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
img.staff-photo { background: var(--brand-soft); }
.staff-photo.staff-photo-lg { width: 88px; height: 88px; font-size: 1.6rem; }

/* ---------- Record profile: header card + tabs (Staff profile) ---------- */
.profile-header .card-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.25rem; }
.profile-header-photo { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.profile-photo-actions { display: flex; align-items: center; gap: .25rem; }
.profile-header-main { flex: 1 1 240px; }
.profile-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .35rem; color: var(--text-muted); font-size: .9rem; }
.profile-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.profile-tabs-header { padding-bottom: 0 !important; }
/* The tab strip scrolls inside itself if it ever runs out of room; the page never scrolls sideways. */
.profile-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 0; scrollbar-width: thin; }
.profile-tabs .nav-link { white-space: nowrap; color: var(--text-muted); font-weight: 500; }
.profile-tabs .nav-link.active { color: var(--brand-text); }
.profile-tabs .nav-link:disabled { opacity: .5; }
@media (max-width: 575.98px) {
  .profile-header-photo { flex-direction: row; width: 100%; }
  .profile-header-actions { width: 100%; }
  .profile-header-actions > .btn:not(.btn-icon) { flex: 1 1 0; }
  .profile-tabs .nav-link { padding: .5rem .6rem; font-size: .88rem; }
}

/* ---------- Forms inside a tab ---------- */
.read-only-note { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-radius: 8px; background: var(--info-soft); color: var(--info); font-size: .88rem; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
@media (max-width: 575.98px) { .form-actions > .btn { flex: 1 1 0; } }
/* A button in a row of labelled fields: pushed down by one label's height so it lines up with the boxes. */
@media (min-width: 576px) { .form-label-offset { padding-top: 1.75rem; } }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1.5rem; }
.detail-list dt { font-weight: 500; font-size: .8rem; color: var(--text-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

/* Masked number (Aadhaar / PAN / account): the saved value with an eye button, and a box for a new one. */
.secret-value { display: flex; align-items: center; gap: .25rem; min-height: 34px; }
.secret-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; }

/* ---------- Type-ahead (reporting manager) ---------- */
.typeahead { position: relative; }
.typeahead-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1030; max-height: 280px; overflow-y: auto;
  margin: 0; padding: .25rem; list-style: none; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.typeahead-list:empty { display: none; }
.typeahead-option { padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
.typeahead-option:hover, .typeahead-option.active { background: var(--brand-soft); }

/* ---------- Files ---------- */
.file-icon { font-size: 1.4rem; color: var(--brand-text); flex-shrink: 0; }
.document-preview { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 8px; }

/* ---------- Import from Excel (steps, counts, problem rows) ---------- */
.import-step { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.import-step.mb-0 { border-bottom: 0; padding-bottom: 0; }
.import-step-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.import-step-number { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: .8rem; flex-shrink: 0; }
.import-rules summary { cursor: pointer; font-weight: 500; font-size: .9rem; color: var(--brand-text); }
.import-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.import-count { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.import-count-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.import-count-label { font-size: .85rem; color: var(--text-muted); }
.import-count-success .import-count-value { color: var(--success); }
.import-count-danger .import-count-value { color: var(--danger); }
.import-problems { max-height: 45vh; overflow-y: auto; }
.import-reasons { margin: .15rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--danger); white-space: normal; overflow-wrap: anywhere; }

/* ---------- Employee code (settings cards, preview, code field) ---------- */
.method-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.method-card { height: 100%; margin: 0; }
.method-card-example { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--brand-text); font-size: .88rem; }
.code-preview { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.35rem; font-weight: 700; color: var(--brand-text); overflow-wrap: anywhere; }
.code-display { display: flex; align-items: center; gap: .25rem; min-height: calc(1.5em + .75rem + 2px); padding: 0 .25rem 0 .75rem;
  border: 1px dashed var(--border); border-radius: var(--bs-border-radius); background: var(--surface-2); }
.code-display-value { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.master-code-input { flex: 0 0 8.5rem; max-width: 8.5rem; }
@media (max-width: 575.98px) { .master-code-input { flex-basis: 6.5rem; max-width: 6.5rem; } }

/* ---------- Attendance: status colours (att-chip att-present …, register cells, calendar) ---------- */
.att-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; padding: .1rem .45rem; border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.att-present   { background: var(--att-present-soft);   color: var(--att-present); }
.att-halfday   { background: var(--att-halfday-soft);   color: var(--att-halfday); }
.att-absent    { background: var(--att-absent-soft);    color: var(--att-absent); }
.att-leave     { background: var(--att-leave-soft);     color: var(--att-leave); }
.att-onduty    { background: var(--att-onduty-soft);    color: var(--att-onduty); }
.att-off       { background: var(--att-off-soft);       color: var(--att-off); }
.att-holiday   { background: var(--att-holiday-soft);   color: var(--att-holiday); }
.att-pending   { background: var(--att-pending-soft);   color: var(--att-pending); }
.att-missing   { background: var(--att-missing-soft);   color: var(--att-missing); }
.att-notmarked { background: var(--att-notmarked-soft); color: var(--att-notmarked); }
.att-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; padding: 0; margin: 1rem 0; font-size: .8rem; color: var(--text-muted); }
.att-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.att-late-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); display: inline-block; }
.att-late-dot.position-static { position: static; }
.att-filter { flex: 0 1 200px; min-width: 150px; }
.att-date-range { display: flex; align-items: center; gap: .35rem; }
.att-date-range .form-control { width: auto; }
.month-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.month-nav .section-title { min-width: 8.5rem; text-align: center; }
@media (max-width: 575.98px) {
  .att-filter { flex: 1 1 100%; }
  .att-date-range { flex: 1 1 100%; }
  .att-date-range .form-control { flex: 1 1 0; min-width: 0; }
}

/* Home check-in card */
.check-in-card { border-left: 4px solid var(--brand); }
.check-in-times { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.check-in-punches { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .83rem; }

/* Today: count cards that are also filters */
.att-count-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.att-count-card { display: flex; flex-direction: column; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); text-align: left; color: var(--text); border-left-width: 4px; }
.att-count-card:hover { border-color: var(--brand); }
.att-count-card.active { box-shadow: 0 0 0 2px var(--brand) inset; }
.att-count-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.att-count-label { font-size: .78rem; color: var(--text-muted); }
.att-count-all { border-left-color: var(--brand); }
.att-count-present { border-left-color: var(--att-present); }
.att-count-late { border-left-color: var(--danger); }
.att-count-absent { border-left-color: var(--att-absent); }
.att-count-notmarked { border-left-color: var(--att-notmarked); }
.att-count-leave { border-left-color: var(--att-leave); }
.att-count-pending { border-left-color: var(--att-pending); }
.att-count-off { border-left-color: var(--att-off); }
@media (max-width: 575.98px) { .att-count-cards { grid-template-columns: repeat(2, 1fr); } }

/* My attendance: month calendar (7 columns at every width) */
.att-calendar-row, .att-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.att-calendar-head { text-align: center; font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; padding-bottom: .25rem; }
.att-calendar-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .4rem .1rem; min-height: 58px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.att-calendar-day:hover { border-color: var(--brand); }
.att-calendar-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.att-calendar-number { font-size: .8rem; font-weight: 600; }
.att-calendar-blank { min-height: 58px; }
@media (max-width: 575.98px) {
  .att-calendar-day { min-height: 48px; padding: .3rem 0; }
  .att-calendar-day .att-chip { min-width: 0; padding: .05rem .25rem; font-size: .66rem; }
}

/* Month totals tiles */
.att-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: 0; }
.att-total { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.att-total dt { font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.att-total dd { margin: 0; font-size: 1.1rem; font-weight: 700; }
.att-total-main { border-color: var(--brand); background: var(--brand-soft); }
.att-total-main dd { color: var(--brand-text); }

/* Mark attendance: staff checklist */
.att-checklist { max-height: 60vh; overflow-y: auto; }
.att-checklist label { cursor: pointer; }

/* Register: the grid scrolls sideways inside its box; the name column stays in place */
.register-scroll { overflow-x: auto; border-top: 1px solid var(--border); }
.register-grid { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.register-grid th, .register-grid td { padding: .25rem; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.register-grid thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-weight: 600; color: var(--text-muted); }
.register-grid .register-name { position: sticky; left: 0; z-index: 1; min-width: 200px; max-width: 220px; text-align: left; background: var(--card-bg);
  border-right: 1px solid var(--border); font-weight: 400; }
.register-grid thead .register-name { z-index: 3; background: var(--surface-2); }
.register-day-head { min-width: 2.1rem; }
.register-weekday { font-size: .66rem; font-weight: 400; }
.register-grid .is-weekend { background: var(--surface-3); }
.register-code { width: 2rem; height: 1.7rem; padding: 0; border: 0; border-radius: 5px; font-size: .72rem; font-weight: 700; }
.register-code:hover { filter: brightness(.95); outline: 1px solid currentColor; }
.register-code:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.register-code.is-late { box-shadow: inset 0 -3px 0 var(--danger); }
.register-code.is-manual { font-style: italic; }
.register-total { min-width: 2.6rem; font-weight: 600; background: var(--surface-2); }
.register-payable { color: var(--brand-text); }
/* Phones: one card per staff member with a strip of the month */
.register-strip { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; margin: .5rem 0 .25rem; }
.register-strip-day { height: 10px; border-radius: 2px; }
.register-day-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .75rem; border: 0; background: none; text-align: left; }
.register-day-row:hover { background: var(--brand-soft); }
.register-day-date { width: 3.5rem; font-weight: 600; font-size: .85rem; }

/* Requests: bulk actions */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--brand-soft); }

/* Month lock cards */
.month-lock-card { height: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.month-lock-card.is-locked { background: var(--surface-3); border-style: dashed; }

/* Shifts */
.shift-dot { background: var(--item-color, var(--brand)); display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .25rem; vertical-align: middle; }

/* ---------- Attendance methods: selfie camera, punch badges ---------- */
.selfie-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--camera-bg); aspect-ratio: 3 / 4; }
.selfie-video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }   /* mirror, like a mirror */
img.selfie-video { transform: none; }
.selfie-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--on-brand); font-size: .9rem; }
.selfie-thumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--page-bg); color: var(--text-muted); }
.selfie-thumb img { width: 100%; height: 100%; object-fit: cover; }
.selfie-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.punch-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0; }
.punch-badges:empty { display: none; }

/* People who ask their system for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Theme-aware Bootstrap parts (one rule for light and dark: the tokens change, these do not) ---------- */
h1, h2, h3, h4, h5, h6, .page-title, .grid-title { color: var(--heading); }
.form-label { color: var(--text); }
.form-control, .form-select, .input-group-text { background-color: var(--input-bg); color: var(--input-text); border-color: var(--border); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--input-disabled-bg); color: var(--text-muted); }
.form-control::placeholder { color: var(--placeholder); }
.form-check-input { background-color: var(--input-bg); border-color: var(--border); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.card, .modal-content, .dropdown-menu, .list-group-item { background-color: var(--card-bg); color: var(--text); border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--hover-bg); color: var(--heading); }
.dropdown-divider { border-color: var(--border); }
.btn-close { filter: var(--close-filter, none); }
.text-muted { color: var(--text-muted) !important; }
.text-bg-light { background-color: var(--surface-2) !important; color: var(--text) !important; }
.bg-white, .bg-light { background-color: var(--card-bg) !important; }
.btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: var(--border); --bs-btn-hover-color: var(--heading);
  --bs-btn-active-bg: var(--hover-bg); --bs-btn-active-border-color: var(--border); --bs-btn-active-color: var(--heading); }
.btn-outline-secondary { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: var(--border); --bs-btn-hover-color: var(--heading); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--card-bg); --bs-nav-tabs-link-active-color: var(--heading);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--card-bg); --bs-nav-tabs-link-hover-border-color: var(--border); }
.nav-link { color: var(--text-muted); }
.nav-link:hover, .nav-link.active { color: var(--heading); }
.table { --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--hover-bg); }
.alert-info    { --bs-alert-bg: var(--info-soft);    --bs-alert-color: var(--info);    --bs-alert-border-color: var(--info-line); }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: var(--warning); --bs-alert-border-color: var(--warning-line); }
.alert-danger  { --bs-alert-bg: var(--danger-soft);  --bs-alert-color: var(--danger);  --bs-alert-border-color: var(--danger-line); }
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: var(--success); --bs-alert-border-color: var(--success-line); }
.alert-secondary { --bs-alert-bg: var(--surface-2);  --bs-alert-color: var(--text);    --bs-alert-border-color: var(--border); }
.user-menu-button:hover { background: var(--hover-bg); }

/* ---------- Home: upcoming holidays ---------- */
.upcoming-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.upcoming-item { display: flex; align-items: center; gap: .75rem; }
.upcoming-date { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--att-holiday-soft); color: var(--att-holiday); line-height: 1; }
.upcoming-day { font-weight: 700; font-size: 1.05rem; }
.upcoming-month { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }