/* Star Online HR — modern glassmorphism UI layer on top of Bootstrap 5 */

/* ---------- Work list stat cards / overdue flag (my_work, work_approval) ---------- */
.hr-stat-card { transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
.hr-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.hr-card-overdue { border: 1px solid rgba(220,53,69,0.4) !important; border-left: 4px solid #dc3545 !important; }
[data-theme="dark"] .hr-stat-card { background: rgba(37, 40, 58, 0.88); }
[data-theme="dark"] .hr-card-overdue { border-color: rgba(248,113,113,0.45) !important; border-left-color: #ef4444 !important; }

/* Work-type-colored left border (my_work, work_approval cards) — pairs with
   workTypeStyle() in sortable.js so New Connection / Wire Down / Laser
   Issue / etc. are visually distinguishable at a glance. */
.hr-card-wt { border: 1px solid rgba(0,0,0,0.06); border-left-width: 4px; border-left-style: solid; }
.hr-card-wt-primary { border-left-color: #4f46e5; }
.hr-card-wt-secondary { border-left-color: #6b7280; }
.hr-card-wt-success { border-left-color: #22c55e; }
.hr-card-wt-danger { border-left-color: #ef4444; }
.hr-card-wt-warning { border-left-color: #f59e0b; }
.hr-card-wt-info { border-left-color: #06b6d4; }
.hr-card-wt-dark { border-left-color: #374151; }
[data-theme="dark"] .hr-card-wt { border-color: rgba(255,255,255,0.08); }

:root {
  --hr-primary: #4f46e5;
  --hr-primary-dark: #3730a3;
  --hr-accent: #06b6d4;
  --hr-accent-2: #f472b6;
  --hr-success: #10b981;
  --hr-danger: #ef4444;
  --hr-warning: #f59e0b;
  --hr-text: #111827;
  --hr-text-soft: #4b5563;
  --hr-surface: rgba(255,255,255,0.78);
  --hr-radius: 18px;
  --hr-radius-sm: 12px;
  --hr-shadow: 0 10px 40px rgba(30, 27, 75, 0.09);
  --hr-shadow-lg: 0 20px 60px rgba(30, 27, 75, 0.14);
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  color: var(--hr-text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(129, 140, 248, 0.28), transparent 42%),
    radial-gradient(circle at 92% 12%, rgba(236, 72, 153, 0.18), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(6, 182, 212, 0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(16, 185, 129, 0.12), transparent 40%),
    linear-gradient(180deg, #f5f6fd 0%, #eef0fa 100%);
  background-attachment: fixed;
  font-feature-settings: "cv11", "ss01";
}

/* ---------- Dashboard hero header ---------- */
.hr-hero {
  border-radius: var(--hr-radius);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  /* Was a bright purple→violet→pink band, then matched the sidebar's exact
     near-black charcoal — too much solid black on an otherwise light page.
     Same cool slate family/hue as the sidebar (still coordinates with it)
     but noticeably lighter — a mid-tone slate, not another black rectangle.
     Kept identical to .punch-hero-mini's background in dashboard.php's own
     <style> block so both banners on the dashboard match each other. */
  background: linear-gradient(125deg, #383e50 0%, #262b38 70%);
  color: #fff;
  box-shadow: var(--hr-shadow-lg);
  position: relative;
  overflow: hidden;
}
.hr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--hr-primary) 40%, transparent), transparent 55%);
  pointer-events: none;
}
.hr-hero > * { position: relative; z-index: 1; }
.hr-hero h4 { font-weight: 700; margin-bottom: 0.15rem; letter-spacing: -0.02em; }
.hr-hero p { opacity: 0.88; margin-bottom: 0; font-size: 0.92rem; }

/* Colored "hero band" headings across the app (dashboard welcome banner,
   Today's Punch widget, Customer Lookup / Org Setup / Admin Tools / Punch
   page headers) all set color:#fff on the BAND and expect their <h4>/<h6>
   to just inherit it. Inheritance is the weakest possible CSS source —
   once a theme sets --bs-heading-color to an actual color (dark mode,
   Aurora Glass, Emerald Suite all do), Bootstrap's own h1-h6 rule wins
   over that inherited white and the heading goes dark-on-dark or
   dark-on-color. Explicit `inherit` here beats Bootstrap's rule instead
   (equal-or-higher specificity, same source order) and just takes the
   band's own color, whatever theme is active. */
.hr-hero h4, .hr-hero h5,
.punch-hero-mini h6, .punch-hero h4, .punch-hero h5,
.cl-hero h4, .cl-hero h5 { color: inherit; }

/* ---------- Sidebar layout (world-class redesign) ---------- */
body { padding-left: 264px; padding-top: 1.75rem; padding-right: 0; }
body.no-sidebar { padding-left: 0; padding-top: 0; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 264px;
  /* Went through an earlier 3-blob purple/pink/cyan rainbow gradient (too
     loud), then a two-tone indigo gradient (still didn't sit right) —
     now a neutral deep charcoal/slate instead of any brand hue, so it
     reads as a calm, professional dashboard chrome rather than a color
     statement. The brand icon, avatar and active-nav-item accents still
     carry the indigo/pink brand colors, so the sidebar isn't colorless,
     just no longer background-colored. */
  background:
    radial-gradient(circle at 12% 6%, rgba(255,255,255,0.05), transparent 42%),
    linear-gradient(195deg, #1f2430 0%, #14171f 100%);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  transition: transform .25s ease;
  padding-bottom: 1.75rem;
  box-shadow: 14px 0 50px rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(255,255,255,0.07);
}
.sidebar::before {
  /* subtle grain texture for a premium, non-flat surface */
  content: '';
  position: fixed; top: 0; left: 0; width: 264px; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.sidebar > * { position: relative; z-index: 1; }

.sidebar .brand {
  padding: 1.7rem 1.4rem 1.15rem;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}
.sidebar .brand::after {
  /* soft glow divider under the brand row instead of a flat border */
  content: '';
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
}
.sidebar .brand::before {
  content: '';
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #a5b4fc, #f0abfc);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 5px rgba(165,180,252,0.1), 0 6px 16px rgba(165,180,252,0.4);
}
.sidebar .brand.has-logo::before { display: none; }
.sidebar .brand-logo-img {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 5px rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.3);
  background: #fff;
}
.sidebar .brand a {
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.82));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15;
}
.sidebar .brand a::after {
  content: 'HR PLATFORM';
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: linear-gradient(90deg, rgba(196,181,253,0.9), rgba(244,114,182,0.75));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.sidebar .user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0.9rem 0.9rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.94);
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 18px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.sidebar .user-info .user-avatar {
  width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, #818cf8, #f472b6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; flex-shrink: 0; color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.1);
}
.sidebar .user-info .user-avatar-photo { background: #fff; padding: 0; overflow: hidden; }
.sidebar .user-info .user-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar .user-info .user-info-text { line-height: 1.35; overflow: hidden; font-weight: 500; }
.sidebar .user-info .user-info-text .opacity-75 { font-size: 0.73rem; opacity: 0.72; font-weight: 400; }

.sidebar .search-wrap { padding: 0 0.9rem 0.9rem; }
.sidebar .search-wrap #globalSearchInput {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  padding-left: 2.15rem;
  border-radius: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7d2fe'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.7rem center;
  background-size: 0.85rem;
}
.sidebar .search-wrap #globalSearchInput::placeholder { color: rgba(255,255,255,0.5); }
.sidebar .search-wrap #globalSearchInput:focus {
  background-color: rgba(255,255,255,0.12);
  border-color: rgba(196,181,253,0.6);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(165,180,252,0.22);
}

/* Language toggle — restyled as a compact segmented pill control, and
   pushed down a bit from the brand row for breathing room. */
.sidebar .lang-toggle {
  display: flex; gap: 0.2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.2rem !important;
  width: fit-content;
  margin: 0.55rem 0.9rem 0 !important;
}
.sidebar .lang-toggle .badge {
  border-radius: 7px !important;
  padding: 0.32em 0.8em !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background .18s ease, color .18s ease;
}
.sidebar .lang-toggle .badge.bg-secondary { background: transparent !important; color: rgba(255,255,255,0.75); }
.sidebar .lang-toggle .badge.bg-primary { background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent)) !important; box-shadow: 0 2px 8px rgba(79,70,229,0.4); color: #fff !important; }
/* Dark/Light mode icon toggle — lives in the same pill as EN/বাং, right
   after it, styled to match (transparent until hovered). */
.sidebar .lang-toggle .theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.sidebar .lang-toggle .theme-toggle-btn:hover { background: rgba(255,255,255,0.14); color: #fff; transform: scale(1.08); }

.sidebar .nav-section-title {
  padding: 1.15rem 1.2rem 0.5rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Was 0.52 opacity — at this small uppercase size that read as faint/
     blurry rather than intentionally muted, especially while the section
     is collapsed (its only state most of the time). Raised the resting
     color and given the open state its own brighter tone so an expanded
     section still reads as "active" relative to a collapsed one. */
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  transition: color .15s ease;
}
.sidebar .nav-section-title:hover { color: rgba(255,255,255,0.95); }
.sidebar .nav-section.open > .nav-section-title { color: rgba(255,255,255,0.95); }
.sidebar .nav-section-title .section-icon {
  font-size: 0.72rem;
  margin-right: 0.55rem;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  transition: background .2s ease;
}
.sidebar .nav-section-title:hover .section-icon { background: rgba(255,255,255,0.14); }
.sidebar .nav-section-title .summary-arrow {
  font-size: 0.6rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  opacity: 0.5;
}
.sidebar .nav-section.open > .nav-section-title .summary-arrow {
  transform: rotate(180deg);
  opacity: 0.9;
}
.sidebar .nav-section + .nav-section {
  margin-top: 0.15rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
/* Smooth accordion expand/collapse — grid-rows trick avoids the old
   abrupt display:none/block flip and needs no JS height measurement. */
.sidebar .nav-section-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.sidebar .nav-section-content > .nav-section-inner { overflow: hidden; padding-bottom: 2px; }
.sidebar .nav-section.open > .nav-section-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Sub-items sit a bit further right than their section title, so the
   nesting ("these belong under this section") reads at a glance. */
.sidebar .nav-section-content .nav-link-item {
  margin-left: 1.15rem !important;
}

.sidebar a.nav-link-item, .sidebar div.nav-link-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: space-between;
  margin: 0.18rem 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  color: rgba(255,255,255,0.84);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.008em;
  cursor: pointer;
  position: relative;
  transition: background .2s cubic-bezier(.4,0,.2,1), color .2s ease, transform .18s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
}
.sidebar a.nav-link-item > span, .sidebar div.nav-link-item > span {
  display: flex; align-items: center; gap: 0.7rem; overflow: hidden;
}
.sidebar a.nav-link-item .nav-icon-chip, .sidebar div.nav-link-item .nav-icon-chip {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  transition: background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sidebar a.nav-link-item i.bi, .sidebar div.nav-link-item i.bi {
  font-size: 0.92rem; opacity: 0.85; transition: opacity .15s ease;
}
.sidebar a.nav-link-item span > span, .sidebar div.nav-link-item span > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar a.nav-link-item:hover, .sidebar div.nav-link-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.sidebar a.nav-link-item:hover .nav-icon-chip, .sidebar div.nav-link-item:hover .nav-icon-chip {
  background: rgba(255,255,255,0.18);
  transform: scale(1.08);
}
.sidebar a.nav-link-item:hover i.bi, .sidebar div.nav-link-item:hover i.bi { opacity: 1; }
.sidebar a.nav-link-item:active, .sidebar div.nav-link-item:active { transform: scale(0.98); }
.sidebar a.nav-link-item.active, .sidebar div.nav-link-item.active {
  background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  color: var(--hr-primary);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.5);
  transform: translateX(0);
}
.sidebar a.nav-link-item.active::before {
  content: '';
  position: absolute;
  left: -0.75rem; top: 0.22rem; bottom: 0.22rem; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--hr-accent-2), var(--hr-accent));
  box-shadow: 0 0 10px rgba(6,182,212,0.6);
}
.sidebar a.nav-link-item.active .nav-icon-chip, .sidebar div.nav-link-item.active .nav-icon-chip {
  background: linear-gradient(135deg, var(--hr-primary), #818cf8);
  box-shadow: 0 3px 10px rgba(79,70,229,0.4);
}
.sidebar a.nav-link-item.active i.bi, .sidebar div.nav-link-item.active i.bi { opacity: 1; color: #fff; }
.sidebar a.nav-link-item .badge, .sidebar div.nav-link-item .badge {
  font-size: 0.66rem; font-weight: 700; border-radius: 999px !important;
  padding: 0.3em 0.6em !important;
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  box-shadow: 0 2px 6px rgba(239,68,68,0.45);
}

.sidebar a.logout-link {
  margin-top: 1.2rem !important;
  padding-top: 1.05rem !important;
  position: relative;
  transition: background .2s ease, color .2s ease;
}
.sidebar a.logout-link::before {
  content: '';
  position: absolute; top: 0; left: 0.9rem; right: 0.9rem; height: 1px;
  background: rgba(255,255,255,0.12);
}
.sidebar a.logout-link:hover {
  background: rgba(239,68,68,0.16) !important;
  color: #fecaca !important;
}
.sidebar a.logout-link:hover .nav-icon-chip { background: rgba(239,68,68,0.3) !important; }

.sidebar-toggle-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1040;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hr-primary), #818cf8) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.42);
  backdrop-filter: blur(6px);
}
.sidebar-toggle-btn.hide-when-open {
  display: none !important;
}

/* ---------- Header Quick Links bar (frequently-used pages, picked from
   Settings) — renders in normal document flow right after the (fixed)
   sidebar, so it's simply the first thing at the top of every page's
   content column. Sticky so it stays reachable while a long page scrolls. */
.hr-quick-header {
  /* Fixed (not sticky) so it's flush with the true top of the viewport from
     the very first paint — sticky only "catches" once you scroll past its
     natural flow position, which left a gap above it before that point.
     Body's own top padding is pushed down to make room (see the inline
     <style> nav.php emits right next to this bar, and the media queries
     below for the narrower sidebar/no-sidebar breakpoints). */
  position: fixed;
  top: 0;
  left: 264px;
  right: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.75rem;
  overflow-x: auto;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(79,70,229,0.1);
  box-shadow: 0 4px 18px rgba(30,27,75,0.06);
}
.hr-quick-header::-webkit-scrollbar { height: 5px; }
.hr-quick-header::-webkit-scrollbar-thumb { background: rgba(79,70,229,0.2); border-radius: 3px; }
.hr-quick-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--hr-text);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(79,70,229,0.06);
  border: 1px solid rgba(79,70,229,0.12);
  transition: background .18s ease, transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, color .18s ease;
}
.hr-quick-btn-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hr-primary), #818cf8);
  color: #fff; font-size: 0.82rem;
  box-shadow: 0 2px 6px rgba(79,70,229,0.3);
}
.hr-quick-btn-label { white-space: nowrap; }
.hr-quick-btn:hover {
  background: rgba(79,70,229,0.13);
  color: var(--hr-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.18);
}
.hr-quick-btn.active {
  background: linear-gradient(135deg, var(--hr-primary), #818cf8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79,70,229,0.4);
}
.hr-quick-btn.active .hr-quick-btn-icon { background: rgba(0,0,0,0.18); }
[data-theme="dark"] .hr-quick-header {
  background: rgba(28,31,44,0.85);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
[data-theme="dark"] .hr-quick-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #e7e6f0;
}
[data-theme="dark"] .hr-quick-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
@media (max-width: 767.98px) {
  /* Icon-only strip on mobile instead of hiding the feature outright —
     labels are dropped to save space, and the bar starts after the
     floating hamburger button (top-left, ~56px) so it never covers it. */
  .hr-quick-header {
    left: 0;
    padding: 0.5rem 0.75rem 0.5rem 60px;
  }
  .hr-quick-btn { padding: 0.5rem; gap: 0; }
  .hr-quick-btn-label { display: none; }
}
.dashboard-stat-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
}
.dashboard-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hr-primary), var(--hr-accent));
  opacity: 0.85;
}
.dashboard-stat-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--hr-shadow-lg) !important;
}
.dashboard-stat-card h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.65rem;
}
.dashboard-stat-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin: 0 auto 0.6rem;
  background: rgba(79, 70, 229, 0.1);
  color: var(--hr-primary);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dashboard-stat-card:hover .dashboard-stat-icon { transform: scale(1.1) rotate(-6deg); }
.dashboard-stat-icon.text-success { background: rgba(16, 185, 129, 0.13); color: var(--hr-success); }
.dashboard-stat-icon.text-danger { background: rgba(239, 68, 68, 0.13); color: var(--hr-danger); }
.dashboard-stat-icon.text-warning { background: rgba(245, 158, 11, 0.15); color: var(--hr-warning); }
.dashboard-stat-icon.text-primary { background: rgba(79, 70, 229, 0.12); color: var(--hr-primary); }
.dashboard-stat-icon.text-secondary { background: rgba(100, 116, 139, 0.14); color: #64748b; }

.dashboard-quicklink {
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
  border-radius: 16px !important;
}
.dashboard-quicklink:hover { transform: translateY(-3px) translateX(1px); }
.dashboard-quicklink-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(6,182,212,0.14));
  color: var(--hr-primary);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.dashboard-quicklink:hover .dashboard-quicklink-icon {
  transform: scale(1.08) rotate(4deg);
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1025;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 767.98px) {
  body { padding-left: 0; padding-top: 4.5rem; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle-btn { display: flex; }
}

/* ---------- Glass cards ---------- */
.card {
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--hr-radius);
  background: var(--hr-surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--hr-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
a.card:hover {
  box-shadow: var(--hr-shadow-lg);
  transform: translateY(-3px);
}
.card-header {
  background: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--hr-radius) var(--hr-radius) 0 0 !important;
}

.table-responsive { background: transparent; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--hr-radius-sm); font-weight: 600; letter-spacing: -0.005em; }
.btn-primary {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-primary-dark));
  border: none;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(79, 70, 229, 0.42); transform: translateY(-1px); }
.btn-success { background: linear-gradient(135deg, #10b981, #059669); border: none; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); border: none; }
.btn-info { background: linear-gradient(135deg, #06b6d4, #0891b2); border: none; color: #fff; }
.btn-outline-primary { color: var(--hr-primary); border-color: var(--hr-primary); }
.btn-outline-primary:hover { background: var(--hr-primary); border-color: var(--hr-primary); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--hr-radius-sm);
  border-color: rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.65);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hr-primary);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
  background: #fff;
}
/* <input type="file"> (e.g. Settings → Company Logo) otherwise keeps the
   browser's native "Choose File" button — an unstyled OS gray/black chip
   that ignores our theme entirely and can read as broken next to a themed
   dark/glass input. Give it an explicit, always-legible themed button. */
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
  margin-right: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--hr-primary);
  background: var(--hr-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Tables: one clean, modern header row style everywhere ----------
   Every page used either <thead class="table-dark"> or <thead class="table-light">
   with whatever Bootstrap/ad-hoc styling it happened to have (a navy gradient
   here, plain Bootstrap gray there) — inconsistent across 40+ tables. Both
   variants now share the same flat, theme-aware look: table-dark is a solid
   themed block (for the "strong" header look most pages use), table-light is
   a soft themed tint (for pages that want a lighter touch) — built entirely
   from the theme's own --hr-primary via color-mix() so it re-themes for free
   under every theme (Default/Aurora Glass/Emerald Suite/Studio Clay) and dark
   mode, with zero per-theme overrides needed, same approach as .hr-tabs. */
.table thead th {
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
  white-space: nowrap;
}
/* One header look for every table, whether its markup says table-dark or
   table-light — a solid full-color block (the old table-dark look) read as
   too heavy; this soft themed tint (originally only on the Insights →
   Attendance Report table) is the one that was actually liked, so both
   variants now render identically. Kept as two selectors (not renaming the
   markup everywhere) so existing pages need no HTML changes. */
.table thead.table-dark th,
.table thead.table-light th {
  background: color-mix(in srgb, var(--hr-primary) 10%, transparent);
  color: var(--hr-text);
  border: none;
  border-bottom: 2px solid color-mix(in srgb, var(--hr-primary) 25%, transparent);
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Per-column separators in the header — a tint alone doesn't show where one
   column ends and the next starts, especially with 10+ columns (attendance/
   detailed-record tables). */
.table thead.table-dark th:not(:last-child),
.table thead.table-light th:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--hr-primary) 22%, transparent);
}
.table { --bs-table-bg: transparent; }
/* Same per-column separators, carried down into the data rows — the header
   showed column boundaries but the body didn't, so it stopped looking like
   one grid partway down. Faint on purpose; it's a boundary hint, not a
   second header. */
.table tbody td:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--hr-text-soft) 22%, transparent);
}
/* Zebra striping — every other row gets a faint themed tint so a wide row
   with many columns stays readable without following gridlines by eye.
   Applies to every table site-wide, not just pages that opted into
   .table-hover, so tables read the same everywhere. */
.table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--hr-primary) 4%, transparent);
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--hr-primary) 9%, transparent) !important;
}
.table tbody tr { transition: background .12s ease; }
/* Round every table's top corners — a table-responsive with nothing above
   it in its card shows its header's square corners poking past the card's
   own rounded edge; one nested inside a padded tab-pane/card-body (e.g.
   Organization Setup, System Admin's tab panes, where a "+ New" button row
   comes first) previously got no rounding at all since it wasn't a direct
   `.card > :first-child`, so its header just stayed square-cornered.
   Unconditional on every .table-responsive fixes both — nothing else sits
   flush against a table's own top corners, so there's no case where
   rounding it clashes with a neighboring element. overflow-y is clipped
   (not overflow-x, so wide tables still scroll sideways on mobile) — safe
   because .table-responsive's height is always auto/content-fit, so
   there's never any real vertical overflow to hide, it only exists to
   clip this one square corner. */
.table-responsive {
  border-radius: var(--hr-radius) var(--hr-radius) 0 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---------- Badges ---------- */
.badge { border-radius: 8px; font-weight: 600; padding: 0.42em 0.75em; letter-spacing: 0.01em; }

/* half_day (1st/2nd Half) previously shared bg-warning with unpaid_leave —
   same orange, hard to tell apart at a glance. Give it its own violet chip,
   distinct in both light and dark mode. 1st Half keeps this violet; 2nd
   Half previously reused the SAME violet (both looked identical) — it now
   gets its own teal chip below so the two are distinguishable too. */
.badge.bg-half-day { background-color: #8b5cf6 !important; color: #fff !important; }
.badge.bg-second-half { background-color: #92400e !important; color: #fff !important; }

/* Summary/stat cards that act as filter shortcuts (Attendance Live,
   Employee Management) — a visible affordance that they're clickable,
   plus a highlight for whichever one is the currently-active filter. */
.hr-clickable-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.hr-clickable-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }
.hr-clickable-card.active { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }

/* Global top-bar search results overlay: it is appended straight to <body>
   as position:fixed with a plain .bg-white + .text-dark pairing, meant to
   read as a crisp solid-white dropdown. Under a theme, .bg-white turns into
   a low-opacity glass tint that shows the animated page background through
   it, so contrast for the text inside becomes inconsistent depending on
   what's behind it at that scroll position. Pin it to always-solid-white +
   fixed dark text instead, independent of the active theme, using ID
   specificity so it beats the theme's own .bg-white/.text-dark rules. */
#globalSearchResults { background: #fff !important; backdrop-filter: none !important; }
#globalSearchResults a, #globalSearchResults .text-dark { color: #1f2937 !important; }
#globalSearchResults .text-muted { color: #6b7280 !important; }
#globalSearchResults .text-danger { color: #dc3545 !important; }
#globalSearchResults a:hover { background: #f5f4ff; }

/* ---------- Modal ---------- */
.modal-content {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--hr-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px 20px 0 0;
}
.modal-header .modal-title { font-weight: 700; letter-spacing: -0.01em; }
.modal-footer { border-top: 1px solid rgba(0,0,0,0.06); }

/* ---------- Refined scrollbar (webkit browsers) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(79, 70, 229, 0.25);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.45); background-clip: padding-box; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom: 2px solid rgba(0,0,0,0.08); }
.nav-tabs .nav-link {
  border: none;
  color: #6b7280;
  font-weight: 500;
  border-radius: 0;
  padding: 0.6rem 1rem;
}
.nav-tabs .nav-link.active {
  color: var(--hr-primary);
  border-bottom: 2px solid var(--hr-primary);
  background: transparent;
}

/* ---------- Alerts ---------- */
.alert { border-radius: 12px; border: none; backdrop-filter: blur(10px); }

/* ---------- Dark Mode ----------
   World-class dark surface, not a flat gray and not near-black: a deep
   navy-slate with the same indigo/pink/cyan hue-cast as the light body's
   radial blobs, just dimmed — so it still reads as "this app's colors",
   only at night. Every elevation step (body → card → card-header/modal)
   is a distinct, visibly lighter layer rather than one flat block, which
   is what makes a dark UI feel designed instead of "the lights turned
   off". Text stays a soft off-white (never pure #fff) for comfortable
   contrast without glare. */
[data-theme="dark"] {
  --hr-text: #e7e6f0;
  --hr-text-soft: #a3a1c2;
  --hr-surface: rgba(37, 40, 58, 0.88);
  --hr-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --hr-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  /* Bootstrap's own variables — many components (card, table, dropdown,
     modal, form labels, headings) reference these directly rather than
     inheriting color, so overriding only .card{color} etc misses them. */
  --bs-body-color: #e7e6f0;
  --bs-body-color-rgb: 231, 230, 240;
  --bs-emphasis-color: #f9fafb;
  --bs-secondary-color: #a3a1c2;
  --bs-heading-color: #f3f2fa;
  /* Bootstrap's .text-*-emphasis utilities (used e.g. for "entered late" /
     "backdated" notes on Punch History) read these per-color vars directly
     — Bootstrap's own defaults are dark ink shades meant for a light page,
     so left untouched they render near-invisible on any dark background. */
  --bs-warning-text-emphasis: #fde68a;
  --bs-info-text-emphasis: #a5f3fc;
  --bs-success-text-emphasis: #86efac;
  --bs-danger-text-emphasis: #fca5a5;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-secondary-text-emphasis: #d1d5db;
  --bs-card-color: #e7e6f0;
  --bs-card-cap-color: #e7e6f0;
  --bs-table-color: #e7e6f0;
  --bs-modal-color: #e7e6f0;
  --bs-dropdown-color: #e7e6f0;
  --bs-dropdown-link-color: #e7e6f0;
  --bs-form-label-color: #e7e6f0;
  --bs-list-group-color: #e7e6f0;
  --bs-border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] label,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div,
[data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li {
  color: inherit;
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 8%, rgba(99, 102, 241, 0.16), transparent 42%),
    radial-gradient(circle at 92% 12%, rgba(236, 72, 153, 0.10), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(6, 182, 212, 0.09), transparent 45%),
    linear-gradient(180deg, #1c1f2c 0%, #131521 100%);
  color: #e7e6f0;
}
[data-theme="dark"] .card {
  background: rgba(37, 40, 58, 0.88);
  border-color: rgba(255,255,255,0.09);
  color: #e7e6f0;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-content {
  background: rgba(44, 47, 68, 0.96);
  color: #e7e6f0;
  border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .table {
  color: #e7e6f0;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.045);
  --bs-table-hover-bg: rgba(255,255,255,0.08);
  --bs-table-hover-color: #e7e6f0;
  border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: rgba(26, 28, 41, 0.9);
  border-color: rgba(255,255,255,0.16);
  color: #e7e6f0;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: rgba(26, 28, 41, 0.96);
  color: #e7e6f0;
}
[data-theme="dark"] .form-control::placeholder { color: #6f6d92; }
[data-theme="dark"] .text-muted { color: #a3a1c2 !important; }
[data-theme="dark"] .text-dark { color: #e7e6f0 !important; }
[data-theme="dark"] .bg-light { background-color: #1c1f2c !important; }
[data-theme="dark"] .bg-white { background-color: rgba(37, 40, 58, 0.88) !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: rgba(255,255,255,0.09) !important; }
[data-theme="dark"] .list-group-item {
  background: rgba(37, 40, 58, 0.88);
  color: #e7e6f0;
  border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .hr-info-item .hr-info-value { color: #e7e6f0; }
[data-theme="dark"] .hr-info-item .hr-info-label { color: #a3a1c2; }
[data-theme="dark"] .hr-info-section-title { color: #c4b5fd; background: linear-gradient(90deg, rgba(165,180,252,0.14), transparent); }
[data-theme="dark"] a { color: #a5b4fc; }
[data-theme="dark"] .dropdown-menu { background: #262a3d; color: #e7e6f0; }
[data-theme="dark"] .dropdown-item { color: #e7e6f0; }
[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Badges with text-dark (bg-warning/bg-info/bg-light text-dark) must keep
   genuinely dark text against their own bright background — the generic
   .text-dark flip above (line 532) makes them unreadable (near-white text
   on a light-yellow/light-blue badge). Higher specificity wins here. */
[data-theme="dark"] .badge.text-dark,
[data-theme="dark"] .badge.text-dark.bg-warning,
[data-theme="dark"] .badge.text-dark.bg-info,
[data-theme="dark"] .badge.text-dark.bg-light {
  color: #1f2937 !important;
}
/* bg-light itself gets flipped near-black for page panels in dark mode
   (see .bg-light rule above) — a dark-text badge sitting on that same
   flipped background goes dark-on-dark (e.g. the device/browser chip on
   Punch History). Badges need their own always-light chip background,
   independent of the panel-level bg-light flip. */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.text-dark.bg-light {
  background-color: #e5e7eb !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* Bootstrap contextual table variants (table-light/-warning/-danger/...)
   — un-themed by default because Bootstrap reads its own CSS vars. */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
  --bs-table-bg: #2a2c3e;
  --bs-table-color: #e5e7eb;
  --bs-table-border-color: rgba(255,255,255,0.14);
  color: #e5e7eb;
}
[data-theme="dark"] .table-secondary { --bs-table-bg: #3a3c4e; --bs-table-color: #e5e7eb; --bs-table-border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .table-primary { --bs-table-bg: #2f2e57; --bs-table-color: #dbe0ff; --bs-table-border-color: rgba(165,180,252,0.3); }
[data-theme="dark"] .table-success { --bs-table-bg: #16342a; --bs-table-color: #a7f3d0; --bs-table-border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .table-danger { --bs-table-bg: #3a1d22; --bs-table-color: #fecaca; --bs-table-border-color: rgba(248,113,113,0.35); }
[data-theme="dark"] .table-warning { --bs-table-bg: #3a2f14; --bs-table-color: #fde68a; --bs-table-border-color: rgba(251,191,36,0.35); }
[data-theme="dark"] .table-info { --bs-table-bg: #123a42; --bs-table-color: #a5f3fc; --bs-table-border-color: rgba(34,211,238,0.3); }

/* Bootstrap contextual alerts — same var-based theming gap. */
[data-theme="dark"] .alert-primary { --bs-alert-color: #c7d2fe; --bs-alert-bg: #23244a; --bs-alert-border-color: rgba(165,180,252,0.3); }
[data-theme="dark"] .alert-secondary { --bs-alert-color: #e5e7eb; --bs-alert-bg: #2a2c3e; --bs-alert-border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .alert-success { --bs-alert-color: #a7f3d0; --bs-alert-bg: #123227; --bs-alert-border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .alert-danger { --bs-alert-color: #fecaca; --bs-alert-bg: #3a1d22; --bs-alert-border-color: rgba(248,113,113,0.35); }
[data-theme="dark"] .alert-warning { --bs-alert-color: #fde68a; --bs-alert-bg: #332a10; --bs-alert-border-color: rgba(251,191,36,0.35); }
[data-theme="dark"] .alert-info { --bs-alert-color: #a5f3fc; --bs-alert-bg: #0f2e35; --bs-alert-border-color: rgba(34,211,238,0.3); }
[data-theme="dark"] .alert-light { --bs-alert-color: #e5e7eb; --bs-alert-bg: #24263a; --bs-alert-border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .alert-dark { --bs-alert-color: #e5e7eb; --bs-alert-bg: #1a1b28; --bs-alert-border-color: rgba(255,255,255,0.14); }

/* Outline buttons — default Bootstrap outline colors are tuned for a white
   background and read too faint / low-contrast on the dark card surface. */
[data-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #6b7280; }
[data-theme="dark"] .btn-outline-secondary:hover { color: #14151f; background-color: #cbd5e1; border-color: #cbd5e1; }
[data-theme="dark"] .btn-outline-primary { color: #a5b4fc; border-color: #6366f1; }
[data-theme="dark"] .btn-outline-primary:hover { color: #14151f; background-color: #a5b4fc; border-color: #a5b4fc; }
[data-theme="dark"] .btn-outline-danger { color: #fca5a5; border-color: #ef4444; }
[data-theme="dark"] .btn-outline-danger:hover { color: #14151f; background-color: #fca5a5; border-color: #fca5a5; }
[data-theme="dark"] .btn-outline-success { color: #86efac; border-color: #22c55e; }
[data-theme="dark"] .btn-outline-success:hover { color: #14151f; background-color: #86efac; border-color: #86efac; }
[data-theme="dark"] .btn-outline-warning { color: #fde68a; border-color: #f59e0b; }
[data-theme="dark"] .btn-outline-warning:hover { color: #14151f; background-color: #fde68a; border-color: #fde68a; }
[data-theme="dark"] .btn-outline-info { color: #a5f3fc; border-color: #06b6d4; }
[data-theme="dark"] .btn-outline-info:hover { color: #14151f; background-color: #a5f3fc; border-color: #a5f3fc; }

/* Nav tabs — inactive tab text was a mid-grey tuned for light backgrounds. */
[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .nav-tabs .nav-link { color: #9ca3af; }
[data-theme="dark"] .nav-tabs .nav-link:hover { color: #e5e7eb; border-color: transparent; }
[data-theme="dark"] .nav-tabs .nav-link.active { color: #a5b4fc; border-bottom-color: #a5b4fc; }
[data-theme="dark"] .nav-pills .nav-link { color: #9ca3af; }
[data-theme="dark"] .nav-pills .nav-link.active { color: #fff; background: var(--hr-primary); }

/* Misc contextual pieces sharing the same var-based gap. */
[data-theme="dark"] .list-group-item-warning { background-color: #332a10; color: #fde68a; }
[data-theme="dark"] .list-group-item-danger { background-color: #3a1d22; color: #fecaca; }
[data-theme="dark"] .list-group-item-success { background-color: #123227; color: #a7f3d0; }
[data-theme="dark"] .list-group-item-info { background-color: #0f2e35; color: #a5f3fc; }
[data-theme="dark"] code { color: #f0abfc; background: rgba(255,255,255,0.06); }
[data-theme="dark"] pre { background: rgba(0,0,0,0.3); color: #e5e7eb; }
[data-theme="dark"] hr { border-color: rgba(255,255,255,0.1); opacity: 1; }
[data-theme="dark"] .close, [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] ::placeholder { color: #6b7280; opacity: 1; }
[data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm { box-shadow: var(--hr-shadow) !important; }

/* ---------- Aurora Glass theme (Settings → Appearance → data-app-theme) ----
   Second selectable theme alongside the built-in "Default" look. A premium
   glassmorphism reskin: frosted, blurred panels floating over a living
   aurora-borealis backdrop. Deliberately keeps its own consistent rich
   palette regardless of the separate light/dark toggle — glass reads best
   over a colorful backdrop, so this theme doesn't try to also go "light". */
[data-app-theme="aurora_glass"] {
  --hr-primary: #7c3aed;
  --hr-primary-dark: #5b21b6;
  --hr-accent: #22d3ee;
  --hr-accent-2: #f472b6;
  --hr-success: #34d399;
  --hr-danger: #fb7185;
  --hr-warning: #fbbf24;
  --hr-text: #eef2ff;
  --hr-text-soft: #c4b5fd;
  --hr-surface: rgba(58, 48, 118, 0.66);
  --hr-radius: 20px;
  --hr-radius-sm: 14px;
  --hr-shadow: 0 10px 40px rgba(30, 20, 80, 0.22);
  --hr-shadow-lg: 0 24px 70px rgba(30, 20, 80, 0.32);
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: 124, 58, 237;
  --bs-body-color: #eef2ff;
  --bs-body-color-rgb: 238, 242, 255;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #c4b5fd;
  --bs-heading-color: #f5f3ff;
  --bs-warning-text-emphasis: #fde68a;
  --bs-info-text-emphasis: #a5f3fc;
  --bs-success-text-emphasis: #86efac;
  --bs-danger-text-emphasis: #fca5a5;
  --bs-primary-text-emphasis: #ddd6fe;
  --bs-secondary-text-emphasis: #e9e4ff;
  --bs-card-color: #eef2ff;
  --bs-card-cap-color: #eef2ff;
  --bs-table-color: #eef2ff;
  --bs-modal-color: #eef2ff;
  --bs-dropdown-color: #eef2ff;
  --bs-dropdown-link-color: #eef2ff;
  --bs-form-label-color: #eef2ff;
  --bs-list-group-color: #eef2ff;
  --bs-border-color: rgba(255,255,255,0.14);
}
[data-app-theme="aurora_glass"] label,
[data-app-theme="aurora_glass"] h1, [data-app-theme="aurora_glass"] h2, [data-app-theme="aurora_glass"] h3,
[data-app-theme="aurora_glass"] h4, [data-app-theme="aurora_glass"] h5, [data-app-theme="aurora_glass"] h6,
[data-app-theme="aurora_glass"] p, [data-app-theme="aurora_glass"] span, [data-app-theme="aurora_glass"] div,
[data-app-theme="aurora_glass"] td, [data-app-theme="aurora_glass"] th, [data-app-theme="aurora_glass"] li {
  color: inherit;
}
[data-app-theme="aurora_glass"] body {
  /* Softened — user flagged the original as too deep/saturated to look at
     for long stretches (same complaint as the old Default sidebar).
     Blob opacities roughly halved and the base wash lightened several
     shades so the "aurora over glass" identity survives without the
     eye strain. */
  background:
    radial-gradient(circle at 12% 12%, rgba(139,92,246,0.18), transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(45,212,238,0.15), transparent 46%),
    radial-gradient(circle at 20% 92%, rgba(244,114,182,0.13), transparent 46%),
    radial-gradient(circle at 85% 90%, rgba(52,211,153,0.1), transparent 44%),
    linear-gradient(160deg, #5b4fa0 0%, #4a3f85 55%, #3d3470 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  animation: hrAuroraDrift 24s ease-in-out infinite alternate, hrFadeIn .25s ease;
  color: #eef2ff;
}
@keyframes hrAuroraDrift {
  0%   { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0 0; }
  100% { background-position: 8% 6%, 92% 8%, 6% 94%, 94% 92%, 0 0; }
}
/* Glass panels — cards, modals, dropdowns, list-groups — frosted + blurred
   so the aurora backdrop glows softly through every surface on every page. */
[data-app-theme="aurora_glass"] .card,
[data-app-theme="aurora_glass"] .modal-content,
[data-app-theme="aurora_glass"] .dropdown-menu,
[data-app-theme="aurora_glass"] .list-group-item {
  background: rgba(62, 51, 122, 0.68);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f5f3ff;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(20,14,60,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-app-theme="aurora_glass"] .card-header,
[data-app-theme="aurora_glass"] .card-footer {
  background: rgba(70, 58, 135, 0.74);
  color: #f5f3ff;
  border-color: rgba(255,255,255,0.16);
}
[data-app-theme="aurora_glass"] .dropdown-item { color: #eef2ff; }
[data-app-theme="aurora_glass"] .dropdown-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
[data-app-theme="aurora_glass"] .table {
  color: #eef2ff;
  /* A stable, semi-opaque base instead of transparent — transparent let the
     animated multicolor body gradient bleed through the glass card behind
     it, so a hovered row's effective color shifted with the animation/
     scroll position (sometimes landing on a pale pink blob, washing every
     badge/icon/text on that row out). A fixed base + pinned hover
     bg/text color keep contrast consistent no matter what's moving behind. */
  --bs-table-bg: rgba(45,38,92,0.55);
  --bs-table-striped-bg: rgba(255,255,255,0.045);
  --bs-table-hover-bg: rgba(167,139,250,0.22);
  --bs-table-hover-color: #eef2ff;
  border-color: rgba(255,255,255,0.1);
}
[data-app-theme="aurora_glass"] .form-control,
[data-app-theme="aurora_glass"] .form-select {
  background-color: rgba(60,50,120,0.4);
  border-color: rgba(255,255,255,0.2);
  color: #f5f3ff;
  backdrop-filter: blur(8px);
}
[data-app-theme="aurora_glass"] .form-control:focus,
[data-app-theme="aurora_glass"] .form-select:focus {
  background-color: rgba(60,50,120,0.55);
  color: #fff;
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 0 0 3px rgba(167,139,250,0.25);
}
[data-app-theme="aurora_glass"] .form-control::placeholder { color: #b8b3dd; }
[data-app-theme="aurora_glass"] .text-muted { color: #c9c3ee !important; }
[data-app-theme="aurora_glass"] .text-dark { color: #f5f3ff !important; }
/* Bootstrap's default .text-success/.text-danger/etc are fixed mid-tone
   hex values tuned for a white page — on Aurora's dark purple glass cards
   (e.g. the Net OT/Late +/- figures on Detailed Records) they're too close
   in luminance to the background to read clearly. Brighter, theme-native
   equivalents instead. */
[data-app-theme="aurora_glass"] .text-success { color: #4ade80 !important; }
[data-app-theme="aurora_glass"] .text-danger { color: #f87171 !important; }
[data-app-theme="aurora_glass"] .text-warning { color: #fbbf24 !important; }
[data-app-theme="aurora_glass"] .text-info { color: #38bdf8 !important; }
[data-app-theme="aurora_glass"] .bg-light { background-color: rgba(255,255,255,0.08) !important; }
[data-app-theme="aurora_glass"] .bg-white { background-color: rgba(80,68,155,0.4) !important; }
[data-app-theme="aurora_glass"] .border,
[data-app-theme="aurora_glass"] .border-bottom,
[data-app-theme="aurora_glass"] .border-top { border-color: rgba(255,255,255,0.12) !important; }
[data-app-theme="aurora_glass"] a { color: #a5f3fc; }
[data-app-theme="aurora_glass"] hr { border-color: rgba(255,255,255,0.12); opacity: 1; }
[data-app-theme="aurora_glass"] code { color: #f0abfc; background: rgba(255,255,255,0.08); }
[data-app-theme="aurora_glass"] pre { background: rgba(0,0,0,0.35); color: #eef2ff; }
[data-app-theme="aurora_glass"] ::placeholder { color: #a5a0c9; opacity: 1; }
[data-app-theme="aurora_glass"] .close, [data-app-theme="aurora_glass"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-app-theme="aurora_glass"] .shadow, [data-app-theme="aurora_glass"] .shadow-sm { box-shadow: var(--hr-shadow) !important; }

[data-app-theme="aurora_glass"] .badge.text-dark,
[data-app-theme="aurora_glass"] .badge.text-dark.bg-warning,
[data-app-theme="aurora_glass"] .badge.text-dark.bg-info,
[data-app-theme="aurora_glass"] .badge.text-dark.bg-light {
  color: #1f2937 !important;
}
[data-app-theme="aurora_glass"] .badge.bg-light,
[data-app-theme="aurora_glass"] .badge.text-dark.bg-light {
  background-color: #e9e4ff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-app-theme="aurora_glass"] .table-light,
[data-app-theme="aurora_glass"] .table-light > th,
[data-app-theme="aurora_glass"] .table-light > td {
  --bs-table-bg: rgba(255,255,255,0.06);
  --bs-table-color: #eef2ff;
  --bs-table-border-color: rgba(255,255,255,0.14);
  color: #eef2ff;
}
[data-app-theme="aurora_glass"] .table-secondary { --bs-table-bg: rgba(255,255,255,0.08); --bs-table-color: #eef2ff; --bs-table-border-color: rgba(255,255,255,0.14); }
[data-app-theme="aurora_glass"] .table-primary { --bs-table-bg: rgba(124,58,237,0.22); --bs-table-color: #e0d4ff; --bs-table-border-color: rgba(167,139,250,0.35); }
[data-app-theme="aurora_glass"] .table-success { --bs-table-bg: rgba(52,211,153,0.16); --bs-table-color: #a7f3d0; --bs-table-border-color: rgba(52,211,153,0.3); }
[data-app-theme="aurora_glass"] .table-danger { --bs-table-bg: rgba(251,113,133,0.18); --bs-table-color: #fecdd3; --bs-table-border-color: rgba(251,113,133,0.35); }
[data-app-theme="aurora_glass"] .table-warning { --bs-table-bg: rgba(251,191,36,0.16); --bs-table-color: #fde68a; --bs-table-border-color: rgba(251,191,36,0.35); }
[data-app-theme="aurora_glass"] .table-info { --bs-table-bg: rgba(34,211,238,0.16); --bs-table-color: #a5f3fc; --bs-table-border-color: rgba(34,211,238,0.3); }

[data-app-theme="aurora_glass"] .alert { backdrop-filter: blur(10px); }
[data-app-theme="aurora_glass"] .alert-primary { --bs-alert-color: #e0d4ff; --bs-alert-bg: rgba(124,58,237,0.22); --bs-alert-border-color: rgba(167,139,250,0.35); }
[data-app-theme="aurora_glass"] .alert-secondary { --bs-alert-color: #eef2ff; --bs-alert-bg: rgba(255,255,255,0.08); --bs-alert-border-color: rgba(255,255,255,0.14); }
[data-app-theme="aurora_glass"] .alert-success { --bs-alert-color: #a7f3d0; --bs-alert-bg: rgba(52,211,153,0.16); --bs-alert-border-color: rgba(52,211,153,0.3); }
[data-app-theme="aurora_glass"] .alert-danger { --bs-alert-color: #fecdd3; --bs-alert-bg: rgba(251,113,133,0.18); --bs-alert-border-color: rgba(251,113,133,0.35); }
[data-app-theme="aurora_glass"] .alert-warning { --bs-alert-color: #fde68a; --bs-alert-bg: rgba(251,191,36,0.16); --bs-alert-border-color: rgba(251,191,36,0.35); }
[data-app-theme="aurora_glass"] .alert-info { --bs-alert-color: #a5f3fc; --bs-alert-bg: rgba(34,211,238,0.16); --bs-alert-border-color: rgba(34,211,238,0.3); }
[data-app-theme="aurora_glass"] .alert-light { --bs-alert-color: #eef2ff; --bs-alert-bg: rgba(255,255,255,0.06); --bs-alert-border-color: rgba(255,255,255,0.12); }
[data-app-theme="aurora_glass"] .alert-dark { --bs-alert-color: #eef2ff; --bs-alert-bg: rgba(0,0,0,0.25); --bs-alert-border-color: rgba(255,255,255,0.14); }

[data-app-theme="aurora_glass"] .list-group-item-warning { background-color: rgba(251,191,36,0.16); color: #fde68a; }
[data-app-theme="aurora_glass"] .list-group-item-danger { background-color: rgba(251,113,133,0.18); color: #fecdd3; }
[data-app-theme="aurora_glass"] .list-group-item-success { background-color: rgba(52,211,153,0.16); color: #a7f3d0; }
[data-app-theme="aurora_glass"] .list-group-item-info { background-color: rgba(34,211,238,0.16); color: #a5f3fc; }

/* Outline buttons — default Bootstrap colors read too faint on the glass
   card surface, same reasoning as the dark-mode override above. */
[data-app-theme="aurora_glass"] .btn-outline-secondary { color: #d8d4f5; border-color: #8b83c9; }
[data-app-theme="aurora_glass"] .btn-outline-secondary:hover { color: #1a1240; background-color: #d8d4f5; border-color: #d8d4f5; }
[data-app-theme="aurora_glass"] .btn-outline-primary { color: #c4b5fd; border-color: #a78bfa; }
[data-app-theme="aurora_glass"] .btn-outline-primary:hover { color: #1a1240; background-color: #c4b5fd; border-color: #c4b5fd; }
[data-app-theme="aurora_glass"] .btn-outline-danger { color: #fda4af; border-color: #fb7185; }
[data-app-theme="aurora_glass"] .btn-outline-danger:hover { color: #1a1240; background-color: #fda4af; border-color: #fda4af; }
[data-app-theme="aurora_glass"] .btn-outline-success { color: #6ee7b7; border-color: #34d399; }
[data-app-theme="aurora_glass"] .btn-outline-success:hover { color: #1a1240; background-color: #6ee7b7; border-color: #6ee7b7; }
[data-app-theme="aurora_glass"] .btn-outline-warning { color: #fde68a; border-color: #fbbf24; }
[data-app-theme="aurora_glass"] .btn-outline-warning:hover { color: #1a1240; background-color: #fde68a; border-color: #fde68a; }
[data-app-theme="aurora_glass"] .btn-outline-info { color: #a5f3fc; border-color: #22d3ee; }
[data-app-theme="aurora_glass"] .btn-outline-info:hover { color: #1a1240; background-color: #a5f3fc; border-color: #a5f3fc; }

/* Primary solid buttons get a neon violet→cyan gradient + glow. */
[data-app-theme="aurora_glass"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #22d3ee) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(124,58,237,0.45);
}
[data-app-theme="aurora_glass"] .btn-primary:hover { box-shadow: 0 6px 24px rgba(124,58,237,0.6); }

[data-app-theme="aurora_glass"] .nav-tabs { border-bottom-color: rgba(255,255,255,0.12); }
[data-app-theme="aurora_glass"] .nav-tabs .nav-link { color: #c4b5fd; }
[data-app-theme="aurora_glass"] .nav-tabs .nav-link:hover { color: #eef2ff; border-color: transparent; }
[data-app-theme="aurora_glass"] .nav-tabs .nav-link.active { color: #22d3ee; border-bottom-color: #22d3ee; background: transparent; }
[data-app-theme="aurora_glass"] .nav-pills .nav-link { color: #c4b5fd; }
[data-app-theme="aurora_glass"] .nav-pills .nav-link.active { color: #fff; background: linear-gradient(135deg,#7c3aed,#22d3ee); }

/* Hero / page-header bands re-tinted to match, with a touch of glass.
   Also covers the other hardcoded "primary→#6d28d9→accent-2" hero bands
   (Today's Punch widget, the standalone Punch page, Customer Lookup) —
   without this they'd keep a hardcoded purple middle stop instead of the
   theme's own colors. */
[data-app-theme="aurora_glass"] .hr-hero,
[data-app-theme="aurora_glass"] .hr-page-header,
[data-app-theme="aurora_glass"] .punch-hero-mini,
[data-app-theme="aurora_glass"] .punch-hero,
[data-app-theme="aurora_glass"] .cl-hero {
  background: linear-gradient(120deg, rgba(124,58,237,0.85), rgba(34,211,238,0.5));
  backdrop-filter: blur(6px);
  color: #fff;
}
/* .hr-page-header went soft/light for the Default theme (see the base
   rule) — this theme keeps its own colored glass band instead, so it
   still needs the old white-on-color treatment for its heading, buttons,
   inputs and muted text explicitly (the base rule no longer supplies it). */
[data-app-theme="aurora_glass"] .hr-page-header h4,
[data-app-theme="aurora_glass"] .hr-page-header h5 { color: #fff; }
[data-app-theme="aurora_glass"] .hr-page-header .btn,
[data-app-theme="aurora_glass"] .hr-page-header .hr-page-header-actions .btn {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  box-shadow: none;
}
[data-app-theme="aurora_glass"] .hr-page-header .btn:hover,
[data-app-theme="aurora_glass"] .hr-page-header .hr-page-header-actions .btn:hover { background: rgba(255,255,255,0.3); color: #fff; }
[data-app-theme="aurora_glass"] .hr-page-header .btn i,
[data-app-theme="aurora_glass"] .hr-page-header .hr-page-header-actions .btn i { color: #fff; }
[data-app-theme="aurora_glass"] .hr-page-header select,
[data-app-theme="aurora_glass"] .hr-page-header input { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.5); }
[data-app-theme="aurora_glass"] .hr-page-header .text-muted { color: rgba(255,255,255,0.75) !important; }

/* Sidebar and Header Quick Links become glass panels too, so the aurora
   backdrop glows through the whole navigation frame, not just page content. */
[data-app-theme="aurora_glass"] .sidebar {
  background: linear-gradient(200deg, rgba(124,58,237,0.5) 0%, rgba(99,90,220,0.38) 35%, rgba(58,48,120,0.5) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.12);
}
[data-app-theme="aurora_glass"] .sidebar .user-info {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}
[data-app-theme="aurora_glass"] .hr-quick-header {
  background: rgba(70,58,135,0.45);
  border-bottom-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-app-theme="aurora_glass"] .hr-quick-btn {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
  color: #f5f3ff;
}
[data-app-theme="aurora_glass"] .hr-quick-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
[data-app-theme="aurora_glass"] .hr-quick-btn.active,
[data-app-theme="aurora_glass"] .hr-quick-btn-icon {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
}
[data-app-theme="aurora_glass"] .hr-quick-btn.active { color: #fff; }

/* Segmented pill-tab switchers (Shifts/Attendance Rules, Insights, Message
   Center, Payroll Center) each ship their own tiny inline <style> with
   hardcoded #495057 text and a hardcoded #0d6efd active pill — invisible
   dark-gray-on-dark-purple for the inactive tab, and an off-brand blue for
   the active one. One shared fix here covers all four class prefixes. */
[data-app-theme="aurora_glass"] .sr-tabs .nav-link,
[data-app-theme="aurora_glass"] .ins-tabs .nav-link,
[data-app-theme="aurora_glass"] .msg-tabs .nav-link,
[data-app-theme="aurora_glass"] .pc-tabs .nav-link { color: #e9e4ff; }
[data-app-theme="aurora_glass"] .sr-tabs .nav-link:not(.active):hover,
[data-app-theme="aurora_glass"] .ins-tabs .nav-link:not(.active):hover,
[data-app-theme="aurora_glass"] .msg-tabs .nav-link:not(.active):hover,
[data-app-theme="aurora_glass"] .pc-tabs .nav-link:not(.active):hover { background: rgba(255,255,255,0.12); }
[data-app-theme="aurora_glass"] .sr-tabs .nav-link.active,
[data-app-theme="aurora_glass"] .ins-tabs .nav-link.active,
[data-app-theme="aurora_glass"] .msg-tabs .nav-link.active,
[data-app-theme="aurora_glass"] .pc-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}

/* Customer-lookup-style info panels and dashboard stat/quicklink icon
   chips — these had hardcoded light-theme colors with NO theme override at
   all, so under Aurora Glass the labels/values/icon badges rendered as
   near-invisible dark-on-dark or a same-hue-on-same-hue blend. */
[data-app-theme="aurora_glass"] .hr-info-item .hr-info-label { color: #c9c3ee; }
[data-app-theme="aurora_glass"] .hr-info-item .hr-info-value { color: #f5f3ff; }
[data-app-theme="aurora_glass"] .hr-info-section-title { color: #e9d5ff; background: linear-gradient(90deg, rgba(233,213,255,0.16), transparent); }
[data-app-theme="aurora_glass"] .dashboard-stat-icon,
[data-app-theme="aurora_glass"] .dashboard-stat-icon.text-success,
[data-app-theme="aurora_glass"] .dashboard-stat-icon.text-danger,
[data-app-theme="aurora_glass"] .dashboard-stat-icon.text-warning,
[data-app-theme="aurora_glass"] .dashboard-stat-icon.text-primary,
[data-app-theme="aurora_glass"] .dashboard-stat-icon.text-secondary {
  background: rgba(255,255,255,0.16);
}
[data-app-theme="aurora_glass"] .dashboard-quicklink-icon { background: rgba(255,255,255,0.14); color: #f5f3ff; }
[data-app-theme="aurora_glass"] .dashboard-quicklink:hover .dashboard-quicklink-icon { background: linear-gradient(135deg, #7c3aed, #22d3ee); color: #fff; }

/* ---------- Emerald Suite theme (Settings → Appearance → data-app-theme) --
   Third selectable theme — clean, flat, professional SaaS look modeled on
   the reference screenshot: a deep teal-green sidebar, plain white/light
   content, a two-tone teal→green hero band, flat (not gradient) buttons.
   Deliberately forces its own light palette even if the separate dark/light
   toggle is ON — same reasoning as Aurora Glass, just the opposite
   direction (light overriding dark instead of dark overriding light). */
[data-app-theme="emerald_suite"] {
  --hr-primary: #059669;
  --hr-primary-dark: #047857;
  --hr-accent: #0d9488;
  --hr-accent-2: #34d399;
  --hr-success: #22c55e;
  --hr-danger: #ef4444;
  --hr-warning: #f59e0b;
  --hr-text: #0f2a26;
  --hr-text-soft: #4b6b63;
  --hr-surface: rgba(255,255,255,0.94);
  --hr-radius: 16px;
  --hr-radius-sm: 11px;
  --hr-shadow: 0 8px 28px rgba(6,55,46,0.08);
  --hr-shadow-lg: 0 18px 50px rgba(6,55,46,0.14);
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: 5, 150, 105;
  --bs-body-color: #16221f;
  --bs-body-color-rgb: 22, 34, 31;
  --bs-emphasis-color: #0f2a26;
  --bs-secondary-color: #4b6b63;
  --bs-heading-color: #0f2a26;
  --bs-card-color: #16221f;
  --bs-card-cap-color: #16221f;
  --bs-table-color: #16221f;
  --bs-modal-color: #16221f;
  --bs-dropdown-color: #16221f;
  --bs-dropdown-link-color: #16221f;
  --bs-form-label-color: #16221f;
  --bs-list-group-color: #16221f;
  --bs-border-color: rgba(6,55,46,0.1);
}
[data-app-theme="emerald_suite"] body {
  background: linear-gradient(180deg, #f3f7f5 0%, #eaf2ee 100%);
  background-attachment: fixed;
}
[data-app-theme="emerald_suite"] .card,
[data-app-theme="emerald_suite"] .modal-content,
[data-app-theme="emerald_suite"] .dropdown-menu,
[data-app-theme="emerald_suite"] .list-group-item {
  background: var(--hr-surface);
  border-color: rgba(6,55,46,0.1);
  color: #16221f;
}
[data-app-theme="emerald_suite"] .card-header,
[data-app-theme="emerald_suite"] .card-footer {
  background: rgba(255,255,255,0.98);
  color: #16221f;
  border-color: rgba(6,55,46,0.1);
}
[data-app-theme="emerald_suite"] .dropdown-item { color: #16221f; }
[data-app-theme="emerald_suite"] .dropdown-item:hover { background: rgba(5,150,105,0.08); color: #065f46; }
[data-app-theme="emerald_suite"] .table {
  color: #16221f;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(5,150,105,0.035);
  --bs-table-hover-bg: rgba(5,150,105,0.07);
  border-color: rgba(6,55,46,0.1);
}
[data-app-theme="emerald_suite"] .form-control,
[data-app-theme="emerald_suite"] .form-select {
  background-color: #fff;
  border-color: rgba(6,55,46,0.16);
  color: #16221f;
}
[data-app-theme="emerald_suite"] .form-control:focus,
[data-app-theme="emerald_suite"] .form-select:focus {
  background-color: #fff;
  border-color: #34d399;
  color: #16221f;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.25);
}
[data-app-theme="emerald_suite"] .form-control::placeholder { color: #7c9691; }
[data-app-theme="emerald_suite"] .text-muted { color: #5b756f !important; }
[data-app-theme="emerald_suite"] .text-dark { color: #16221f !important; }
[data-app-theme="emerald_suite"] .bg-light { background-color: #eef3f1 !important; }
[data-app-theme="emerald_suite"] .bg-white { background-color: #fff !important; }
[data-app-theme="emerald_suite"] .border,
[data-app-theme="emerald_suite"] .border-bottom,
[data-app-theme="emerald_suite"] .border-top { border-color: rgba(6,55,46,0.1) !important; }
[data-app-theme="emerald_suite"] a { color: #0d9488; }
[data-app-theme="emerald_suite"] hr { border-color: rgba(6,55,46,0.1); opacity: 1; }
[data-app-theme="emerald_suite"] .shadow, [data-app-theme="emerald_suite"] .shadow-sm { box-shadow: var(--hr-shadow) !important; }

[data-app-theme="emerald_suite"] .btn-outline-secondary { color: #475569; border-color: #94a3b8; }
[data-app-theme="emerald_suite"] .btn-outline-secondary:hover { color: #fff; background-color: #475569; border-color: #475569; }
[data-app-theme="emerald_suite"] .btn-outline-primary { color: #059669; border-color: #059669; }
[data-app-theme="emerald_suite"] .btn-outline-primary:hover { color: #fff; background-color: #059669; border-color: #059669; }
[data-app-theme="emerald_suite"] .btn-outline-danger { color: #dc2626; border-color: #ef4444; }
[data-app-theme="emerald_suite"] .btn-outline-danger:hover { color: #fff; background-color: #ef4444; border-color: #ef4444; }
[data-app-theme="emerald_suite"] .btn-outline-success { color: #16a34a; border-color: #22c55e; }
[data-app-theme="emerald_suite"] .btn-outline-success:hover { color: #fff; background-color: #22c55e; border-color: #22c55e; }
[data-app-theme="emerald_suite"] .btn-outline-warning { color: #b45309; border-color: #f59e0b; }
[data-app-theme="emerald_suite"] .btn-outline-warning:hover { color: #fff; background-color: #f59e0b; border-color: #f59e0b; }
[data-app-theme="emerald_suite"] .btn-outline-info { color: #0e7490; border-color: #06b6d4; }
[data-app-theme="emerald_suite"] .btn-outline-info:hover { color: #fff; background-color: #06b6d4; border-color: #06b6d4; }

[data-app-theme="emerald_suite"] .nav-tabs { border-bottom-color: rgba(6,55,46,0.1); }
[data-app-theme="emerald_suite"] .nav-tabs .nav-link { color: #5b756f; }
[data-app-theme="emerald_suite"] .nav-tabs .nav-link:hover { color: #0f2a26; border-color: transparent; }
[data-app-theme="emerald_suite"] .nav-tabs .nav-link.active { color: #059669; border-bottom-color: #059669; background: transparent; }
[data-app-theme="emerald_suite"] .nav-pills .nav-link { color: #5b756f; }
[data-app-theme="emerald_suite"] .nav-pills .nav-link.active { color: #fff; background: var(--hr-primary); }

/* Hero / page-header — flat two-tone teal→green band, matching the
   reference screenshot's "Attendance" banner. Also covers the other
   hardcoded "primary→#6d28d9→accent-2" hero bands (Today's Punch widget,
   the standalone Punch page, Customer Lookup) so they don't keep a
   hardcoded purple middle stop that reads as an off-brand blue/purple
   smear against this theme's green. */
[data-app-theme="emerald_suite"] .hr-hero,
[data-app-theme="emerald_suite"] .hr-page-header,
[data-app-theme="emerald_suite"] .punch-hero-mini,
[data-app-theme="emerald_suite"] .punch-hero,
[data-app-theme="emerald_suite"] .cl-hero {
  background: linear-gradient(120deg, #0f3d36 0%, #15803d 100%);
  color: #fff;
}
/* .hr-page-header went soft/light for the Default theme (see the base
   rule) — this theme keeps its own colored band instead, so it still
   needs the old white-on-color treatment explicitly. */
[data-app-theme="emerald_suite"] .hr-page-header h4,
[data-app-theme="emerald_suite"] .hr-page-header h5 { color: #fff; }
[data-app-theme="emerald_suite"] .hr-page-header .btn,
[data-app-theme="emerald_suite"] .hr-page-header .hr-page-header-actions .btn {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  box-shadow: none;
}
[data-app-theme="emerald_suite"] .hr-page-header .btn:hover,
[data-app-theme="emerald_suite"] .hr-page-header .hr-page-header-actions .btn:hover { background: rgba(255,255,255,0.3); color: #fff; }
[data-app-theme="emerald_suite"] .hr-page-header .btn i,
[data-app-theme="emerald_suite"] .hr-page-header .hr-page-header-actions .btn i { color: #fff; }
[data-app-theme="emerald_suite"] .hr-page-header select,
[data-app-theme="emerald_suite"] .hr-page-header input { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.5); }
[data-app-theme="emerald_suite"] .hr-page-header .text-muted { color: rgba(255,255,255,0.75) !important; }

/* Sidebar — solid dark teal-green instead of the purple/aurora gradient,
   with a matching brand chip, avatar and a solid-fill (not white-pill)
   active nav item, closer to the screenshot's own active-state style. */
[data-app-theme="emerald_suite"] .sidebar {
  background: linear-gradient(180deg, #1a5048 0%, #123a34 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-app-theme="emerald_suite"] .sidebar .brand::before {
  background: linear-gradient(135deg, #34d399, #0d9488);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 5px rgba(52,211,153,0.12), 0 6px 16px rgba(16,185,129,0.35);
}
[data-app-theme="emerald_suite"] .sidebar .brand a::after {
  background: linear-gradient(90deg, rgba(167,243,208,0.9), rgba(52,211,153,0.75));
  -webkit-background-clip: text; background-clip: text;
}
[data-app-theme="emerald_suite"] .sidebar .user-info .user-avatar {
  background: linear-gradient(135deg, #34d399, #0d9488);
}
[data-app-theme="emerald_suite"] .sidebar a.nav-link-item.active,
[data-app-theme="emerald_suite"] .sidebar div.nav-link-item.active {
  background: linear-gradient(135deg, #10b981, #0d9488);
  color: #fff;
  box-shadow: 0 6px 18px rgba(5,150,105,0.4);
}
[data-app-theme="emerald_suite"] .sidebar a.nav-link-item.active .nav-icon-chip,
[data-app-theme="emerald_suite"] .sidebar div.nav-link-item.active .nav-icon-chip {
  background: rgba(255,255,255,0.22);
}
[data-app-theme="emerald_suite"] .sidebar a.nav-link-item.active i.bi,
[data-app-theme="emerald_suite"] .sidebar div.nav-link-item.active i.bi { color: #fff; }
[data-app-theme="emerald_suite"] .sidebar-toggle-btn {
  background: linear-gradient(135deg, #10b981, #0d9488) !important;
}
[data-app-theme="emerald_suite"] .hr-quick-btn-icon {
  background: linear-gradient(135deg, #10b981, #0d9488);
}
[data-app-theme="emerald_suite"] .hr-quick-header {
  background: rgba(255,255,255,0.85);
  border-bottom-color: rgba(6,55,46,0.08);
}
[data-app-theme="emerald_suite"] .hr-quick-btn {
  background: rgba(5,150,105,0.07);
  border-color: rgba(5,150,105,0.14);
  color: #0f2a26;
}
[data-app-theme="emerald_suite"] .hr-quick-btn:hover { background: rgba(5,150,105,0.14); color: #047857; }
[data-app-theme="emerald_suite"] .hr-quick-btn.active {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}

[data-app-theme="emerald_suite"] .sr-tabs .nav-link,
[data-app-theme="emerald_suite"] .ins-tabs .nav-link,
[data-app-theme="emerald_suite"] .msg-tabs .nav-link,
[data-app-theme="emerald_suite"] .pc-tabs .nav-link { color: #375f57; }
[data-app-theme="emerald_suite"] .sr-tabs .nav-link:not(.active):hover,
[data-app-theme="emerald_suite"] .ins-tabs .nav-link:not(.active):hover,
[data-app-theme="emerald_suite"] .msg-tabs .nav-link:not(.active):hover,
[data-app-theme="emerald_suite"] .pc-tabs .nav-link:not(.active):hover { background: rgba(5,150,105,0.1); }
[data-app-theme="emerald_suite"] .sr-tabs .nav-link.active,
[data-app-theme="emerald_suite"] .ins-tabs .nav-link.active,
[data-app-theme="emerald_suite"] .msg-tabs .nav-link.active,
[data-app-theme="emerald_suite"] .pc-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}

[data-app-theme="emerald_suite"] .hr-info-item .hr-info-label { color: #5b756f; }
[data-app-theme="emerald_suite"] .hr-info-item .hr-info-value { color: #0f2a26; }
[data-app-theme="emerald_suite"] .hr-info-section-title { color: #047857; background: linear-gradient(90deg, rgba(5,150,105,0.1), transparent); border-left-color: #059669; }
[data-app-theme="emerald_suite"] .dashboard-stat-icon,
[data-app-theme="emerald_suite"] .dashboard-stat-icon.text-success,
[data-app-theme="emerald_suite"] .dashboard-stat-icon.text-danger,
[data-app-theme="emerald_suite"] .dashboard-stat-icon.text-warning,
[data-app-theme="emerald_suite"] .dashboard-stat-icon.text-primary,
[data-app-theme="emerald_suite"] .dashboard-stat-icon.text-secondary {
  background: rgba(5,150,105,0.1);
}
[data-app-theme="emerald_suite"] .dashboard-quicklink-icon { background: rgba(5,150,105,0.09); color: #047857; }
[data-app-theme="emerald_suite"] .dashboard-quicklink:hover .dashboard-quicklink-icon { background: linear-gradient(135deg, #10b981, #0d9488); color: #fff; }

/* =========================================================================
   STUDIO CLAY — a 4th, warm "boutique interior-design studio" theme: linen
   background, terracotta + warm gold as the primary pairing (everything
   that mixes --hr-primary/--hr-accent in a flat gradient — quick-link
   active pill, segmented tab active state, lang-toggle active pill — stays
   warm-on-warm by construction), with sage green kept as a separate
   --hr-accent-2 used only in small decorative/avatar spots so it never
   creates the muddy warm/cool band-mismatch found earlier in Aurora/
   Emerald. Every lesson from this session's Aurora/Emerald fix rounds is
   applied from the start here: table hover gets a stable base + pinned
   hover text color (no bleed-through surprises), hero bands get their own
   gradient instead of the hardcoded purple mid-stop, quick-links/tabs are
   covered, and .cl-suggestion-item/.cl-tile-value/#globalSearchResults
   already use fixed colors independent of theme so they need no
   theme-specific entry here at all. ========================================= */
[data-app-theme="studio_clay"] {
  --hr-primary: #c2703d;
  --hr-primary-dark: #9c5527;
  --hr-accent: #d4a373;
  --hr-accent-2: #8ba178;
  --hr-success: #6b8f5a;
  --hr-danger: #c1493a;
  --hr-warning: #d68c33;
  --hr-text: #2b2622;
  --hr-text-soft: #7a6f63;
  --hr-surface: rgba(255,253,250,0.95);
  --hr-radius: 18px;
  --hr-radius-sm: 12px;
  --hr-shadow: 0 8px 28px rgba(120,90,60,0.10);
  --hr-shadow-lg: 0 20px 50px rgba(120,90,60,0.16);
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: 194, 112, 61;
  --bs-body-color: #2b2622;
  --bs-body-color-rgb: 43, 38, 34;
  --bs-emphasis-color: #2b2622;
  --bs-secondary-color: #7a6f63;
  --bs-heading-color: #2b2622;
  --bs-card-color: #2b2622;
  --bs-card-cap-color: #2b2622;
  --bs-table-color: #2b2622;
  --bs-modal-color: #2b2622;
  --bs-dropdown-color: #2b2622;
  --bs-dropdown-link-color: #2b2622;
  --bs-form-label-color: #2b2622;
  --bs-list-group-color: #2b2622;
  --bs-border-color: rgba(120,90,60,0.14);
}
[data-app-theme="studio_clay"] body {
  background:
    radial-gradient(circle at 14% 6%, rgba(212,163,115,0.16), transparent 45%),
    linear-gradient(160deg, #f8f3ec 0%, #f1e9dd 100%);
  background-attachment: fixed;
}
[data-app-theme="studio_clay"] .card,
[data-app-theme="studio_clay"] .modal-content,
[data-app-theme="studio_clay"] .dropdown-menu,
[data-app-theme="studio_clay"] .list-group-item {
  background: var(--hr-surface);
  border-color: rgba(120,90,60,0.12);
  color: #2b2622;
}
[data-app-theme="studio_clay"] .card-header,
[data-app-theme="studio_clay"] .card-footer {
  background: #fdfbf8;
  color: #2b2622;
  border-color: rgba(120,90,60,0.12);
}
[data-app-theme="studio_clay"] .dropdown-item { color: #2b2622; }
[data-app-theme="studio_clay"] .dropdown-item:hover { background: rgba(194,112,61,0.08); color: #9c5527; }
[data-app-theme="studio_clay"] .table {
  color: #2b2622;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(194,112,61,0.035);
  --bs-table-hover-bg: rgba(194,112,61,0.09);
  --bs-table-hover-color: #2b2622;
  border-color: rgba(120,90,60,0.12);
}
[data-app-theme="studio_clay"] .form-control,
[data-app-theme="studio_clay"] .form-select {
  background-color: #fffdfa;
  border-color: rgba(120,90,60,0.2);
  color: #2b2622;
}
[data-app-theme="studio_clay"] .form-control:focus,
[data-app-theme="studio_clay"] .form-select:focus {
  background-color: #fff;
  border-color: #d4a373;
  color: #2b2622;
  box-shadow: 0 0 0 3px rgba(194,112,61,0.2);
}
[data-app-theme="studio_clay"] .form-control::placeholder { color: #a89684; }
[data-app-theme="studio_clay"] .text-muted { color: #8a7c6d !important; }
[data-app-theme="studio_clay"] .text-dark { color: #2b2622 !important; }
[data-app-theme="studio_clay"] .bg-light { background-color: #f2ebe0 !important; }
[data-app-theme="studio_clay"] .bg-white { background-color: #fffdfa !important; }
[data-app-theme="studio_clay"] .border,
[data-app-theme="studio_clay"] .border-bottom,
[data-app-theme="studio_clay"] .border-top { border-color: rgba(120,90,60,0.14) !important; }
[data-app-theme="studio_clay"] a { color: #9c5527; }
[data-app-theme="studio_clay"] hr { border-color: rgba(120,90,60,0.14); opacity: 1; }
[data-app-theme="studio_clay"] .shadow, [data-app-theme="studio_clay"] .shadow-sm { box-shadow: var(--hr-shadow) !important; }

[data-app-theme="studio_clay"] .btn-outline-secondary { color: #6b6055; border-color: #a89684; }
[data-app-theme="studio_clay"] .btn-outline-secondary:hover { color: #fff; background-color: #6b6055; border-color: #6b6055; }
[data-app-theme="studio_clay"] .btn-outline-primary { color: #9c5527; border-color: #c2703d; }
[data-app-theme="studio_clay"] .btn-outline-primary:hover { color: #fff; background-color: #c2703d; border-color: #c2703d; }
[data-app-theme="studio_clay"] .btn-outline-danger { color: #a13a2c; border-color: #c1493a; }
[data-app-theme="studio_clay"] .btn-outline-danger:hover { color: #fff; background-color: #c1493a; border-color: #c1493a; }
[data-app-theme="studio_clay"] .btn-outline-success { color: #4f6b42; border-color: #6b8f5a; }
[data-app-theme="studio_clay"] .btn-outline-success:hover { color: #fff; background-color: #6b8f5a; border-color: #6b8f5a; }
[data-app-theme="studio_clay"] .btn-outline-warning { color: #a15f14; border-color: #d68c33; }
[data-app-theme="studio_clay"] .btn-outline-warning:hover { color: #fff; background-color: #d68c33; border-color: #d68c33; }
[data-app-theme="studio_clay"] .btn-outline-info { color: #3d5a6e; border-color: #5b7c99; }
[data-app-theme="studio_clay"] .btn-outline-info:hover { color: #fff; background-color: #5b7c99; border-color: #5b7c99; }

[data-app-theme="studio_clay"] .nav-tabs { border-bottom-color: rgba(120,90,60,0.14); }
[data-app-theme="studio_clay"] .nav-tabs .nav-link { color: #8a7c6d; }
[data-app-theme="studio_clay"] .nav-tabs .nav-link:hover { color: #2b2622; border-color: transparent; }
[data-app-theme="studio_clay"] .nav-tabs .nav-link.active { color: #9c5527; border-bottom-color: #c2703d; background: transparent; }
[data-app-theme="studio_clay"] .nav-pills .nav-link { color: #8a7c6d; }
[data-app-theme="studio_clay"] .nav-pills .nav-link.active { color: #fff; background: var(--hr-primary); }

/* Hero / page-header — warm terracotta→gold band, replacing the hardcoded
   purple-mid-stop gradient shared by the dashboard punch widget, the
   standalone Punch page and Customer Lookup (see the aurora/emerald blocks
   above for the same fix and why it's needed). */
[data-app-theme="studio_clay"] .hr-hero,
[data-app-theme="studio_clay"] .hr-page-header,
[data-app-theme="studio_clay"] .punch-hero-mini,
[data-app-theme="studio_clay"] .punch-hero,
[data-app-theme="studio_clay"] .cl-hero {
  background: linear-gradient(120deg, #8c4a2f 0%, #c2703d 100%);
  color: #fff;
}
/* .hr-page-header went soft/light for the Default theme (see the base
   rule) — this theme keeps its own colored band instead, so it still
   needs the old white-on-color treatment explicitly. */
[data-app-theme="studio_clay"] .hr-page-header h4,
[data-app-theme="studio_clay"] .hr-page-header h5 { color: #fff; }
[data-app-theme="studio_clay"] .hr-page-header .btn,
[data-app-theme="studio_clay"] .hr-page-header .hr-page-header-actions .btn {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  box-shadow: none;
}
[data-app-theme="studio_clay"] .hr-page-header .btn:hover,
[data-app-theme="studio_clay"] .hr-page-header .hr-page-header-actions .btn:hover { background: rgba(255,255,255,0.3); color: #fff; }
[data-app-theme="studio_clay"] .hr-page-header .btn i,
[data-app-theme="studio_clay"] .hr-page-header .hr-page-header-actions .btn i { color: #fff; }
[data-app-theme="studio_clay"] .hr-page-header select,
[data-app-theme="studio_clay"] .hr-page-header input { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.5); }
[data-app-theme="studio_clay"] .hr-page-header .text-muted { color: rgba(255,255,255,0.75) !important; }

/* Sidebar — deep clay/espresso gradient instead of purple/teal, warm gold
   brand + avatar, a solid terracotta active nav item. */
[data-app-theme="studio_clay"] .sidebar {
  background: linear-gradient(180deg, #6b4226 0%, #43290f 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-app-theme="studio_clay"] .sidebar .brand::before {
  background: linear-gradient(135deg, #d4a373, #c2703d);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 5px rgba(212,163,115,0.16), 0 6px 16px rgba(156,85,39,0.35);
}
[data-app-theme="studio_clay"] .sidebar .brand a::after {
  background: linear-gradient(90deg, rgba(232,204,168,0.95), rgba(212,163,115,0.8));
  -webkit-background-clip: text; background-clip: text;
}
[data-app-theme="studio_clay"] .sidebar .user-info .user-avatar {
  background: linear-gradient(135deg, #d4a373, #c2703d);
}
[data-app-theme="studio_clay"] .sidebar a.nav-link-item.active,
[data-app-theme="studio_clay"] .sidebar div.nav-link-item.active {
  background: linear-gradient(135deg, #c2703d, #9c5527);
  color: #fff;
  box-shadow: 0 6px 18px rgba(156,85,39,0.4);
}
[data-app-theme="studio_clay"] .sidebar a.nav-link-item.active .nav-icon-chip,
[data-app-theme="studio_clay"] .sidebar div.nav-link-item.active .nav-icon-chip {
  background: rgba(255,255,255,0.22);
}
[data-app-theme="studio_clay"] .sidebar a.nav-link-item.active i.bi,
[data-app-theme="studio_clay"] .sidebar div.nav-link-item.active i.bi { color: #fff; }
[data-app-theme="studio_clay"] .sidebar-toggle-btn {
  background: linear-gradient(135deg, #c2703d, #9c5527) !important;
}
[data-app-theme="studio_clay"] .hr-quick-btn-icon {
  background: linear-gradient(135deg, #c2703d, #9c5527);
}
[data-app-theme="studio_clay"] .hr-quick-header {
  background: rgba(255,253,250,0.85);
  border-bottom-color: rgba(120,90,60,0.1);
}
[data-app-theme="studio_clay"] .hr-quick-btn {
  background: rgba(194,112,61,0.07);
  border-color: rgba(194,112,61,0.16);
  color: #43290f;
}
[data-app-theme="studio_clay"] .hr-quick-btn:hover { background: rgba(194,112,61,0.15); color: #9c5527; }
[data-app-theme="studio_clay"] .hr-quick-btn.active {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}

[data-app-theme="studio_clay"] .sr-tabs .nav-link,
[data-app-theme="studio_clay"] .ins-tabs .nav-link,
[data-app-theme="studio_clay"] .msg-tabs .nav-link,
[data-app-theme="studio_clay"] .pc-tabs .nav-link { color: #7a6f63; }
[data-app-theme="studio_clay"] .sr-tabs .nav-link:not(.active):hover,
[data-app-theme="studio_clay"] .ins-tabs .nav-link:not(.active):hover,
[data-app-theme="studio_clay"] .msg-tabs .nav-link:not(.active):hover,
[data-app-theme="studio_clay"] .pc-tabs .nav-link:not(.active):hover { background: rgba(194,112,61,0.1); }
[data-app-theme="studio_clay"] .sr-tabs .nav-link.active,
[data-app-theme="studio_clay"] .ins-tabs .nav-link.active,
[data-app-theme="studio_clay"] .msg-tabs .nav-link.active,
[data-app-theme="studio_clay"] .pc-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent));
  color: #fff;
}

[data-app-theme="studio_clay"] .hr-info-item .hr-info-label { color: #8a7c6d; }
[data-app-theme="studio_clay"] .hr-info-item .hr-info-value { color: #2b2622; }
[data-app-theme="studio_clay"] .hr-info-section-title { color: #9c5527; background: linear-gradient(90deg, rgba(194,112,61,0.1), transparent); border-left-color: #c2703d; }
[data-app-theme="studio_clay"] .dashboard-stat-icon,
[data-app-theme="studio_clay"] .dashboard-stat-icon.text-success,
[data-app-theme="studio_clay"] .dashboard-stat-icon.text-danger,
[data-app-theme="studio_clay"] .dashboard-stat-icon.text-warning,
[data-app-theme="studio_clay"] .dashboard-stat-icon.text-primary,
[data-app-theme="studio_clay"] .dashboard-stat-icon.text-secondary {
  background: rgba(194,112,61,0.1);
}
[data-app-theme="studio_clay"] .dashboard-quicklink-icon { background: rgba(194,112,61,0.09); color: #9c5527; }
[data-app-theme="studio_clay"] .dashboard-quicklink:hover .dashboard-quicklink-icon { background: linear-gradient(135deg, #c2703d, #9c5527); color: #fff; }

/* =========================================================================
   PER-THEME DARK MODE — the [data-theme="dark"] block above only fully
   applies to the Default theme, because Aurora Glass / Emerald Suite /
   Studio Clay each redefine body/card/table/form/etc with the exact same
   selector specificity ([data-app-theme="x"] vs [data-theme="dark"], both
   one attribute selector) — so toggling dark mode on those three themes
   used to do almost nothing, since the theme's own (light) rules simply
   won the cascade. Every rule below uses a compound
   [data-app-theme="x"][data-theme="dark"] selector (two attribute
   selectors) so it always outranks both the plain theme rule and the
   plain dark-mode rule, regardless of source order.

   Design goal for all three (matching the Default dark refresh above):
   deep, desaturated, hue-true surfaces — never pure black (#000-#0a0a0a
   reads as a hole and swallows the design), never flat achromatic gray
   (loses the theme's identity) — with clearly distinct elevation layers
   (canvas → card → card-header/modal) and near-white (not pure #fff)
   text for comfortable, unambiguous contrast. Bootstrap's CSS vars are
   re-pointed the same way the base dark block does, so components that
   read --bs-* directly (card, table, dropdown, modal, form labels) pick
   it up automatically. ========================================= */

/* ---- Aurora Glass — dark: deeper indigo-violet night sky, glow dialed
   back so it reads as calm and dark rather than a bright colored panel. ---- */
[data-app-theme="aurora_glass"][data-theme="dark"] {
  --hr-text: #ece9fb;
  --hr-text-soft: #b0a6e0;
  --hr-surface: rgba(30, 24, 58, 0.78);
  --hr-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --hr-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --bs-body-color: #ece9fb;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #b0a6e0;
  --bs-heading-color: #f5f3ff;
  --bs-card-color: #ece9fb;
  --bs-card-cap-color: #ece9fb;
  --bs-table-color: #ece9fb;
  --bs-modal-color: #ece9fb;
  --bs-dropdown-color: #ece9fb;
  --bs-dropdown-link-color: #ece9fb;
  --bs-form-label-color: #ece9fb;
  --bs-list-group-color: #ece9fb;
  --bs-border-color: rgba(255,255,255,0.12);
}
[data-app-theme="aurora_glass"][data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 12%, rgba(139,92,246,0.14), transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(45,212,238,0.11), transparent 46%),
    radial-gradient(circle at 20% 92%, rgba(244,114,182,0.09), transparent 46%),
    radial-gradient(circle at 85% 90%, rgba(52,211,153,0.08), transparent 44%),
    linear-gradient(160deg, #241d47 0%, #1c1638 55%, #130f28 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  color: #ece9fb;
}
[data-app-theme="aurora_glass"][data-theme="dark"] .card,
[data-app-theme="aurora_glass"][data-theme="dark"] .modal-content,
[data-app-theme="aurora_glass"][data-theme="dark"] .dropdown-menu,
[data-app-theme="aurora_glass"][data-theme="dark"] .list-group-item {
  background: rgba(29, 23, 54, 0.74);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ece9fb;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .card-header,
[data-app-theme="aurora_glass"][data-theme="dark"] .card-footer {
  background: rgba(35, 28, 65, 0.86);
  color: #ece9fb;
  border-color: rgba(255,255,255,0.1);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .dropdown-item { color: #ece9fb; }
[data-app-theme="aurora_glass"][data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
[data-app-theme="aurora_glass"][data-theme="dark"] .table {
  color: #ece9fb;
  --bs-table-bg: rgba(20,16,38,0.6);
  --bs-table-striped-bg: rgba(255,255,255,0.035);
  --bs-table-hover-bg: rgba(139,92,246,0.2);
  --bs-table-hover-color: #fff;
  border-color: rgba(255,255,255,0.1);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .form-control,
[data-app-theme="aurora_glass"][data-theme="dark"] .form-select {
  background-color: rgba(22, 17, 42, 0.55);
  border-color: rgba(255,255,255,0.18);
  color: #ece9fb;
}
[data-app-theme="aurora_glass"][data-theme="dark"] .form-control:focus,
[data-app-theme="aurora_glass"][data-theme="dark"] .form-select:focus {
  background-color: rgba(22, 17, 42, 0.72);
  color: #fff;
  border-color: rgba(167,139,250,0.65);
  box-shadow: 0 0 0 3px rgba(167,139,250,0.25);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .form-control::placeholder { color: #8f84bb; }
[data-app-theme="aurora_glass"][data-theme="dark"] .text-muted { color: #b0a6e0 !important; }
[data-app-theme="aurora_glass"][data-theme="dark"] .text-dark { color: #ece9fb !important; }
[data-app-theme="aurora_glass"][data-theme="dark"] .bg-light { background-color: rgba(255,255,255,0.05) !important; }
[data-app-theme="aurora_glass"][data-theme="dark"] .bg-white { background-color: rgba(45,36,82,0.5) !important; }
[data-app-theme="aurora_glass"][data-theme="dark"] .border,
[data-app-theme="aurora_glass"][data-theme="dark"] .border-bottom,
[data-app-theme="aurora_glass"][data-theme="dark"] .border-top { border-color: rgba(255,255,255,0.1) !important; }
[data-app-theme="aurora_glass"][data-theme="dark"] a { color: #93c5fd; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-secondary { color: #cfc9ea; border-color: #7c74a8; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-secondary:hover { color: #1a1533; background-color: #cfc9ea; border-color: #cfc9ea; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-primary { color: #b8a6fb; border-color: #8b5cf6; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-primary:hover { color: #1a1533; background-color: #b8a6fb; border-color: #b8a6fb; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-danger { color: #fda4af; border-color: #fb7185; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-danger:hover { color: #1a1533; background-color: #fda4af; border-color: #fda4af; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-success { color: #6ee7b7; border-color: #34d399; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-success:hover { color: #1a1533; background-color: #6ee7b7; border-color: #6ee7b7; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-warning { color: #fde68a; border-color: #fbbf24; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-warning:hover { color: #1a1533; background-color: #fde68a; border-color: #fde68a; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-info { color: #a5f3fc; border-color: #22d3ee; }
[data-app-theme="aurora_glass"][data-theme="dark"] .btn-outline-info:hover { color: #1a1533; background-color: #a5f3fc; border-color: #a5f3fc; }
[data-app-theme="aurora_glass"][data-theme="dark"] .nav-tabs .nav-link { color: #b0a6e0; }
[data-app-theme="aurora_glass"][data-theme="dark"] .nav-tabs .nav-link:hover { color: #ece9fb; }
[data-app-theme="aurora_glass"][data-theme="dark"] .nav-tabs .nav-link.active { color: #67e8f9; border-bottom-color: #67e8f9; }
[data-app-theme="aurora_glass"][data-theme="dark"] .nav-pills .nav-link { color: #b0a6e0; }
[data-app-theme="aurora_glass"][data-theme="dark"] .sidebar {
  background: linear-gradient(200deg, rgba(76,42,150,0.5) 0%, rgba(52,44,110,0.4) 35%, rgba(22,17,42,0.65) 100%);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .hr-quick-header {
  background: rgba(28, 22, 52, 0.85);
  border-bottom-color: rgba(255,255,255,0.1);
}
[data-app-theme="aurora_glass"][data-theme="dark"] .hr-quick-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #ece9fb;
}
[data-app-theme="aurora_glass"][data-theme="dark"] .hr-quick-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
[data-app-theme="aurora_glass"][data-theme="dark"] .sr-tabs .nav-link,
[data-app-theme="aurora_glass"][data-theme="dark"] .ins-tabs .nav-link,
[data-app-theme="aurora_glass"][data-theme="dark"] .msg-tabs .nav-link,
[data-app-theme="aurora_glass"][data-theme="dark"] .pc-tabs .nav-link { color: #b0a6e0; }
[data-app-theme="aurora_glass"][data-theme="dark"] .hr-info-item .hr-info-label { color: #b0a6e0; }
[data-app-theme="aurora_glass"][data-theme="dark"] .hr-info-item .hr-info-value { color: #ece9fb; }

/* ---- Emerald Suite — dark: deep forest/pine, mint + emerald accents. ---- */
[data-app-theme="emerald_suite"][data-theme="dark"] {
  --hr-text: #e6f4ef;
  --hr-text-soft: #8fb8ac;
  --hr-surface: rgba(17, 40, 35, 0.88);
  --hr-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  --hr-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);
  --bs-body-color: #e6f4ef;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #8fb8ac;
  --bs-heading-color: #eefaf5;
  --bs-card-color: #e6f4ef;
  --bs-card-cap-color: #e6f4ef;
  --bs-table-color: #e6f4ef;
  --bs-modal-color: #e6f4ef;
  --bs-dropdown-color: #e6f4ef;
  --bs-dropdown-link-color: #e6f4ef;
  --bs-form-label-color: #e6f4ef;
  --bs-list-group-color: #e6f4ef;
  --bs-border-color: rgba(255,255,255,0.1);
}
[data-app-theme="emerald_suite"][data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 8%, rgba(16,185,129,0.11), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(13,148,136,0.09), transparent 45%),
    linear-gradient(180deg, #0f231d 0%, #081512 100%);
  background-attachment: fixed;
  color: #e6f4ef;
}
[data-app-theme="emerald_suite"][data-theme="dark"] .card,
[data-app-theme="emerald_suite"][data-theme="dark"] .modal-content,
[data-app-theme="emerald_suite"][data-theme="dark"] .dropdown-menu,
[data-app-theme="emerald_suite"][data-theme="dark"] .list-group-item {
  background: rgba(18, 43, 37, 0.9);
  border-color: rgba(255,255,255,0.08);
  color: #e6f4ef;
}
[data-app-theme="emerald_suite"][data-theme="dark"] .card-header,
[data-app-theme="emerald_suite"][data-theme="dark"] .card-footer {
  background: rgba(23, 50, 43, 0.96);
  color: #e6f4ef;
  border-color: rgba(255,255,255,0.08);
}
[data-app-theme="emerald_suite"][data-theme="dark"] .dropdown-item { color: #e6f4ef; }
[data-app-theme="emerald_suite"][data-theme="dark"] .dropdown-item:hover { background: rgba(16,185,129,0.14); color: #6ee7b7; }
[data-app-theme="emerald_suite"][data-theme="dark"] .table {
  color: #e6f4ef;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-hover-bg: rgba(16,185,129,0.16);
  --bs-table-hover-color: #fff;
  border-color: rgba(255,255,255,0.08);
}
[data-app-theme="emerald_suite"][data-theme="dark"] .form-control,
[data-app-theme="emerald_suite"][data-theme="dark"] .form-select {
  background-color: rgba(12, 29, 25, 0.9);
  border-color: rgba(255,255,255,0.16);
  color: #e6f4ef;
}
[data-app-theme="emerald_suite"][data-theme="dark"] .form-control:focus,
[data-app-theme="emerald_suite"][data-theme="dark"] .form-select:focus {
  background-color: rgba(12, 29, 25, 0.98);
  color: #fff;
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.25);
}
[data-app-theme="emerald_suite"][data-theme="dark"] .form-control::placeholder { color: #628c80; }
[data-app-theme="emerald_suite"][data-theme="dark"] .text-muted { color: #8fb8ac !important; }
[data-app-theme="emerald_suite"][data-theme="dark"] .text-dark { color: #e6f4ef !important; }
[data-app-theme="emerald_suite"][data-theme="dark"] .bg-light { background-color: #10241f !important; }
[data-app-theme="emerald_suite"][data-theme="dark"] .bg-white { background-color: rgba(21,47,40,0.9) !important; }
[data-app-theme="emerald_suite"][data-theme="dark"] .border,
[data-app-theme="emerald_suite"][data-theme="dark"] .border-bottom,
[data-app-theme="emerald_suite"][data-theme="dark"] .border-top { border-color: rgba(255,255,255,0.1) !important; }
[data-app-theme="emerald_suite"][data-theme="dark"] a { color: #6ee7b7; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-secondary { color: #cfe3dc; border-color: #648a7e; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-secondary:hover { color: #0c1f1a; background-color: #cfe3dc; border-color: #cfe3dc; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-primary { color: #6ee7b7; border-color: #10b981; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-primary:hover { color: #0c1f1a; background-color: #6ee7b7; border-color: #6ee7b7; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-danger { color: #fca5a5; border-color: #ef4444; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-danger:hover { color: #0c1f1a; background-color: #fca5a5; border-color: #fca5a5; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-success { color: #86efac; border-color: #22c55e; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-success:hover { color: #0c1f1a; background-color: #86efac; border-color: #86efac; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-warning { color: #fde68a; border-color: #f59e0b; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-warning:hover { color: #0c1f1a; background-color: #fde68a; border-color: #fde68a; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-info { color: #67e8f9; border-color: #06b6d4; }
[data-app-theme="emerald_suite"][data-theme="dark"] .btn-outline-info:hover { color: #0c1f1a; background-color: #67e8f9; border-color: #67e8f9; }
[data-app-theme="emerald_suite"][data-theme="dark"] .nav-tabs .nav-link { color: #8fb8ac; }
[data-app-theme="emerald_suite"][data-theme="dark"] .nav-tabs .nav-link:hover { color: #e6f4ef; }
[data-app-theme="emerald_suite"][data-theme="dark"] .nav-tabs .nav-link.active { color: #34d399; border-bottom-color: #34d399; }
[data-app-theme="emerald_suite"][data-theme="dark"] .nav-pills .nav-link { color: #8fb8ac; }
[data-app-theme="emerald_suite"][data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #143a33 0%, #0a201b 100%);
}
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-quick-header {
  background: rgba(18, 43, 37, 0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-quick-btn {
  background: rgba(16,185,129,0.09);
  border-color: rgba(16,185,129,0.2);
  color: #e6f4ef;
}
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-quick-btn:hover { background: rgba(16,185,129,0.18); color: #6ee7b7; }
[data-app-theme="emerald_suite"][data-theme="dark"] .sr-tabs .nav-link,
[data-app-theme="emerald_suite"][data-theme="dark"] .ins-tabs .nav-link,
[data-app-theme="emerald_suite"][data-theme="dark"] .msg-tabs .nav-link,
[data-app-theme="emerald_suite"][data-theme="dark"] .pc-tabs .nav-link { color: #8fb8ac; }
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-info-item .hr-info-label { color: #8fb8ac; }
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-info-item .hr-info-value { color: #e6f4ef; }
[data-app-theme="emerald_suite"][data-theme="dark"] .hr-info-section-title { color: #6ee7b7; background: linear-gradient(90deg, rgba(16,185,129,0.16), transparent); border-left-color: #10b981; }
[data-app-theme="emerald_suite"][data-theme="dark"] .dashboard-stat-icon { background: rgba(16,185,129,0.16); }
[data-app-theme="emerald_suite"][data-theme="dark"] .dashboard-quicklink-icon { background: rgba(16,185,129,0.14); color: #6ee7b7; }

/* ---- Studio Clay — dark: warm espresso/umber, terracotta + gold accents. ---- */
[data-app-theme="studio_clay"][data-theme="dark"] {
  --hr-text: #f3e9dc;
  --hr-text-soft: #b8a693;
  --hr-surface: rgba(43, 33, 26, 0.88);
  --hr-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  --hr-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);
  --bs-body-color: #f3e9dc;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #b8a693;
  --bs-heading-color: #f8f0e6;
  --bs-card-color: #f3e9dc;
  --bs-card-cap-color: #f3e9dc;
  --bs-table-color: #f3e9dc;
  --bs-modal-color: #f3e9dc;
  --bs-dropdown-color: #f3e9dc;
  --bs-dropdown-link-color: #f3e9dc;
  --bs-form-label-color: #f3e9dc;
  --bs-list-group-color: #f3e9dc;
  --bs-border-color: rgba(255,255,255,0.1);
}
[data-app-theme="studio_clay"][data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 6%, rgba(212,163,115,0.12), transparent 45%),
    linear-gradient(160deg, #251b15 0%, #17110c 100%);
  background-attachment: fixed;
  color: #f3e9dc;
}
[data-app-theme="studio_clay"][data-theme="dark"] .card,
[data-app-theme="studio_clay"][data-theme="dark"] .modal-content,
[data-app-theme="studio_clay"][data-theme="dark"] .dropdown-menu,
[data-app-theme="studio_clay"][data-theme="dark"] .list-group-item {
  background: rgba(45, 34, 27, 0.9);
  border-color: rgba(255,255,255,0.08);
  color: #f3e9dc;
}
[data-app-theme="studio_clay"][data-theme="dark"] .card-header,
[data-app-theme="studio_clay"][data-theme="dark"] .card-footer {
  background: rgba(52, 39, 31, 0.96);
  color: #f3e9dc;
  border-color: rgba(255,255,255,0.08);
}
[data-app-theme="studio_clay"][data-theme="dark"] .dropdown-item { color: #f3e9dc; }
[data-app-theme="studio_clay"][data-theme="dark"] .dropdown-item:hover { background: rgba(194,112,61,0.16); color: #e0a978; }
[data-app-theme="studio_clay"][data-theme="dark"] .table {
  color: #f3e9dc;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-hover-bg: rgba(194,112,61,0.18);
  --bs-table-hover-color: #fff;
  border-color: rgba(255,255,255,0.08);
}
[data-app-theme="studio_clay"][data-theme="dark"] .form-control,
[data-app-theme="studio_clay"][data-theme="dark"] .form-select {
  background-color: rgba(31, 23, 18, 0.9);
  border-color: rgba(255,255,255,0.16);
  color: #f3e9dc;
}
[data-app-theme="studio_clay"][data-theme="dark"] .form-control:focus,
[data-app-theme="studio_clay"][data-theme="dark"] .form-select:focus {
  background-color: rgba(31, 23, 18, 0.98);
  color: #fff;
  border-color: #d4a373;
  box-shadow: 0 0 0 3px rgba(194,112,61,0.25);
}
[data-app-theme="studio_clay"][data-theme="dark"] .form-control::placeholder { color: #937c6a; }
[data-app-theme="studio_clay"][data-theme="dark"] .text-muted { color: #b8a693 !important; }
[data-app-theme="studio_clay"][data-theme="dark"] .text-dark { color: #f3e9dc !important; }
[data-app-theme="studio_clay"][data-theme="dark"] .bg-light { background-color: #251b15 !important; }
[data-app-theme="studio_clay"][data-theme="dark"] .bg-white { background-color: rgba(48,36,29,0.9) !important; }
[data-app-theme="studio_clay"][data-theme="dark"] .border,
[data-app-theme="studio_clay"][data-theme="dark"] .border-bottom,
[data-app-theme="studio_clay"][data-theme="dark"] .border-top { border-color: rgba(255,255,255,0.1) !important; }
[data-app-theme="studio_clay"][data-theme="dark"] a { color: #e0a978; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-secondary { color: #ddccbc; border-color: #8a7364; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-secondary:hover { color: #1c140f; background-color: #ddccbc; border-color: #ddccbc; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-primary { color: #e8b98a; border-color: #c2703d; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-primary:hover { color: #1c140f; background-color: #e8b98a; border-color: #e8b98a; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-danger { color: #f0a99a; border-color: #c1493a; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-danger:hover { color: #1c140f; background-color: #f0a99a; border-color: #f0a99a; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-success { color: #b7d3a3; border-color: #6b8f5a; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-success:hover { color: #1c140f; background-color: #b7d3a3; border-color: #b7d3a3; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-warning { color: #f3cd8a; border-color: #d68c33; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-warning:hover { color: #1c140f; background-color: #f3cd8a; border-color: #f3cd8a; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-info { color: #a9c6dc; border-color: #5b7c99; }
[data-app-theme="studio_clay"][data-theme="dark"] .btn-outline-info:hover { color: #1c140f; background-color: #a9c6dc; border-color: #a9c6dc; }
[data-app-theme="studio_clay"][data-theme="dark"] .nav-tabs .nav-link { color: #b8a693; }
[data-app-theme="studio_clay"][data-theme="dark"] .nav-tabs .nav-link:hover { color: #f3e9dc; }
[data-app-theme="studio_clay"][data-theme="dark"] .nav-tabs .nav-link.active { color: #e0a978; border-bottom-color: #d4a373; }
[data-app-theme="studio_clay"][data-theme="dark"] .nav-pills .nav-link { color: #b8a693; }
[data-app-theme="studio_clay"][data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #4a2c19 0%, #28170c 100%);
}
[data-app-theme="studio_clay"][data-theme="dark"] .hr-quick-header {
  background: rgba(45, 34, 27, 0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-app-theme="studio_clay"][data-theme="dark"] .hr-quick-btn {
  background: rgba(194,112,61,0.1);
  border-color: rgba(194,112,61,0.22);
  color: #f3e9dc;
}
[data-app-theme="studio_clay"][data-theme="dark"] .hr-quick-btn:hover { background: rgba(194,112,61,0.2); color: #e0a978; }
[data-app-theme="studio_clay"][data-theme="dark"] .sr-tabs .nav-link,
[data-app-theme="studio_clay"][data-theme="dark"] .ins-tabs .nav-link,
[data-app-theme="studio_clay"][data-theme="dark"] .msg-tabs .nav-link,
[data-app-theme="studio_clay"][data-theme="dark"] .pc-tabs .nav-link { color: #b8a693; }
[data-app-theme="studio_clay"][data-theme="dark"] .hr-info-item .hr-info-label { color: #b8a693; }
[data-app-theme="studio_clay"][data-theme="dark"] .hr-info-item .hr-info-value { color: #f3e9dc; }
[data-app-theme="studio_clay"][data-theme="dark"] .hr-info-section-title { color: #e0a978; background: linear-gradient(90deg, rgba(194,112,61,0.18), transparent); border-left-color: #c2703d; }
[data-app-theme="studio_clay"][data-theme="dark"] .dashboard-stat-icon { background: rgba(194,112,61,0.18); }
[data-app-theme="studio_clay"][data-theme="dark"] .dashboard-quicklink-icon { background: rgba(194,112,61,0.16); color: #e0a978; }

/* ---------- Theme picker (settings.php → Appearance) ---------- */
.hr-theme-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  height: 100%;
}
.hr-theme-option:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.hr-theme-option.active { border-color: var(--hr-primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
.hr-theme-swatch {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 3px 10px rgba(0,0,0,0.15);
}
[data-theme="dark"] .hr-theme-option { border-color: rgba(255,255,255,0.1); }
[data-app-theme="aurora_glass"] .hr-theme-option { border-color: rgba(255,255,255,0.14); }
[data-app-theme="aurora_glass"] .hr-theme-option.active { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,0.2); }
[data-app-theme="emerald_suite"] .hr-theme-option { border-color: rgba(6,55,46,0.12); }
[data-app-theme="emerald_suite"] .hr-theme-option.active { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.18); }
[data-app-theme="studio_clay"] .hr-theme-option { border-color: rgba(120,90,60,0.14); }
[data-app-theme="studio_clay"] .hr-theme-option.active { border-color: #c2703d; box-shadow: 0 0 0 3px rgba(194,112,61,0.18); }

/* ---------- Misc ---------- */
::selection { background: rgba(79, 70, 229, 0.2); }

/* ---------- Organized info sections (Customer Lookup style) ---------- */
.hr-info-section { margin-bottom: 1.25rem; }
.hr-info-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6d28d9;
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, rgba(109,40,217,0.1), transparent);
  border-left: 3px solid var(--hr-primary);
  border-radius: 6px;
}
.hr-info-item { padding: 0.4rem 0; }
.hr-info-item .hr-info-label {
  font-size: 0.72rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.hr-info-item .hr-info-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}
.hr-profile-avatar {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem; font-weight: 800;
  flex-shrink: 0;
}

/* ---------- Reusable page header (non-Dashboard pages) ----------
   Soft-modern refresh: the old version was a solid purple gradient banner
   on every single page in the app (very heavy, repetitive at that scale).
   The Default theme now uses a light glass panel matching the rest of the
   UI (same surface/shadow/radius as .card) with a small colored accent bar
   instead of a full-bleed color fill, and a plain icon/emoji + dark title
   instead of white-on-purple. The 3 alt themes (Aurora Glass / Emerald
   Suite / Studio Clay) keep their own colored band look — see the
   `color: #fff` + button/input/text-muted overrides added next to each
   theme's own `.hr-page-header` background rule above. */
.hr-page-header {
  border-radius: var(--hr-radius);
  padding: 1.1rem 1.5rem 1.1rem 1.65rem;
  margin-bottom: 1.25rem;
  background: var(--hr-surface);
  border: 1px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--hr-shadow);
  color: var(--hr-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}
.hr-page-header::before {
  /* Slim brand-colored accent bar down the left edge — reads as "this is a
     page header" without needing a full solid-color fill. */
  content: '';
  position: absolute;
  left: 0; top: 0.8rem; bottom: 0.8rem; width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--hr-primary), var(--hr-accent));
}
.hr-page-header h4, .hr-page-header h5 { margin: 0; font-weight: 700; letter-spacing: -0.015em; color: inherit; }
.hr-page-header .text-muted { color: var(--hr-text-soft) !important; }
[data-theme="dark"] .hr-page-header { border-color: rgba(255,255,255,0.08); }

/* ---------- Reusable tab bar (multi-tab "hub" pages) ----------
   Before this, every tabbed page (System Admin, Organization Setup,
   Payroll Center, Shift & Attendance Rules, Message Center, Insights, …)
   had its own hand-rolled tab CSS — some a "card tab" look, some flat
   pills, some just unstyled Bootstrap default — all slightly different
   and hardcoded to one color, so it never matched the active theme. This
   is now the ONE tab style for the whole app: a clean "card tab" look
   (matches the System Admin page's tabs, the user's favorite) built on
   the same CSS variables as everything else so it re-colors correctly
   for every theme and dark mode. Selected vs. available is unambiguous:
   the active tab detaches onto the card surface below it in the brand
   color; inactive tabs stay flat and muted until hovered. */
.hr-tabs {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  gap: 0.15rem;
}
.hr-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--hr-text-soft);
  padding: 0.55rem 1rem;
  background: transparent;
  transition: color .15s ease, background .15s ease;
}
.hr-tabs .nav-link .badge { font-weight: 500; }
.hr-tabs .nav-link i.bi { margin-right: 0.25rem; }
.hr-tabs .nav-link:not(.active):hover {
  color: var(--hr-primary);
  background: rgba(79,70,229,0.06);
  border-color: transparent;
}
.hr-tabs .nav-link.active {
  color: var(--hr-primary);
  background: var(--hr-surface);
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) var(--hr-surface);
}
.hr-tabs .nav-link:disabled,
.hr-tabs .nav-link.disabled { color: #adb5bd; opacity: 0.6; }
[data-theme="dark"] .hr-tabs { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .hr-tabs .nav-link.active {
  border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) var(--hr-surface);
}
[data-theme="dark"] .hr-tabs .nav-link:not(.active):hover { background: rgba(255,255,255,0.06); }
/* Aurora Glass's surface is a translucent violet, not white — the active
   tab needs a light border to read against it (same treatment as dark
   mode) instead of the default's dark hairline border. */
[data-app-theme="aurora_glass"] .hr-tabs { border-bottom-color: rgba(255,255,255,0.14); }
[data-app-theme="aurora_glass"] .hr-tabs .nav-link { color: var(--hr-text-soft); }
[data-app-theme="aurora_glass"] .hr-tabs .nav-link.active {
  border-color: rgba(255,255,255,0.18) rgba(255,255,255,0.18) var(--hr-surface);
}
[data-app-theme="aurora_glass"] .hr-tabs .nav-link:not(.active):hover { background: rgba(255,255,255,0.08); }
/* The card immediately under a .hr-tabs bar should visually fuse with the
   active tab (no seam), matching the existing "rounded-top-0" convention
   already used on tabbed pages. */
.hr-tabs + .card { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Page load fade-in for a smoother, app-like feel */
body { animation: hrFadeIn .25s ease; }
@keyframes hrFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Empty-state rows in tables get a touch more presence */
td.text-center.text-muted { padding: 2.25rem 1rem !important; font-size: 0.92rem; }

/* ---------- Premium polish: smoother motion, better depth ---------- */
* { -webkit-tap-highlight-color: transparent; }

.btn {
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.card {
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }

/* Loading/empty state text a touch softer */
.text-muted { color: #6b7280 !important; }

/* Focus ring consistency across all interactive elements */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, .nav-link-item:focus-visible {
  outline: 2px solid var(--hr-primary);
  outline-offset: 2px;
}

/* ---------- Full responsiveness: tablet & mobile ---------- */

/* Large tablets / small laptops — slightly tighter sidebar, same layout */
@media (max-width: 991.98px) and (min-width: 768px) {
  .sidebar { width: 210px; }
  body { padding-left: 210px; }
  .hr-quick-header { left: 210px; }
}

/* Phones & small tablets — sidebar becomes a slide-in drawer (already
   toggled via .sidebar.open in nav.php's JS); everything below tunes the
   actual page content so it's comfortable to use with a thumb. */
@media (max-width: 767.98px) {
  body { padding-left: 0; padding-top: 4.25rem; font-size: 0.95rem; }

  .container, .container-fluid { padding-left: 0.85rem; padding-right: 0.85rem; }

  /* Every card gets breathing room but doesn't waste width on tiny screens */
  .card { border-radius: 14px; }
  .card-body { padding: 1rem; }

  /* Tables: allow horizontal scroll with a visible affordance rather than
     squeezing columns unreadably small */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .table { font-size: 0.82rem; }
  .table td, .table th { padding: 0.5rem 0.6rem; white-space: nowrap; }

  /* Buttons: keep a real touch target (44px is the accessibility baseline)
     even for btn-sm, and let button groups wrap instead of overflowing */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 0.35rem 0.7rem; }
  .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }

  /* Modals: use nearly the full viewport width/height so forms with many
     fields don't feel cramped, and always allow internal scrolling */
  .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
  .modal-content { max-height: 92vh; }
  .modal-body { max-height: 70vh; overflow-y: auto; }

  /* Stat cards on Dashboard: 2 per row instead of squeezing 6 across */
  .dashboard-stat-card { padding: 0.15rem; }
  .dashboard-stat-card h3 { font-size: 1.4rem; }

  /* Form rows that were 3-4 columns on desktop stack cleanly */
  .row > [class*="col-md-"] { margin-bottom: 0.25rem; }

  h4 { font-size: 1.15rem; }
  h5 { font-size: 1.05rem; }
}

/* Very small phones — a bit more breathing room clipped */
@media (max-width: 380px) {
  .container, .container-fluid { padding-left: 0.6rem; padding-right: 0.6rem; }
  .table { font-size: 0.78rem; }
}

/* Landscape phones / short viewports — keep modals usable without the
   header/footer getting pushed off-screen */
@media (max-height: 480px) {
  .modal-content { max-height: 96vh; }
  .modal-body { max-height: 60vh; }
}

/* ---------- Login page (index.php) ----------
   Previously a bare centered Bootstrap card with no theme identity at all —
   the same "hero band" color used for the dashboard welcome banner and the
   sidebar (.hr-hero already re-themes per data-app-theme, see its own rule
   and the aurora_glass/emerald_suite/studio_clay overrides above) is reused
   here as the left brand panel, so login already matches whichever theme
   is active without any new per-theme rules to maintain. */
.login-page-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-shell { width: 100%; max-width: 940px; position: relative; z-index: 1; }
.login-card {
  display: flex;
  min-height: 540px;
  border-radius: var(--hr-radius);
  overflow: hidden;
  box-shadow: var(--hr-shadow-lg);
  background: var(--hr-surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.5);
}
/* .hr-hero (reused here) normally comes with its own margin/radius/padding
   meant for a banner sitting inside a page's content flow — this compound
   selector wins over that by specificity so it fits as one half of a
   bigger card instead. */
.login-card .login-brand.hr-hero {
  flex: 0 0 44%;
  margin-bottom: 0;
  border-radius: 0;
  padding: 3rem 2.75rem;
  display: flex;
  align-items: center;
}
.login-brand-inner { position: relative; z-index: 1; }
.login-brand-logo {
  width: 58px; height: 58px; border-radius: 16px; object-fit: cover;
  margin-bottom: 1.4rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 6px rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.3);
}
.login-brand-icon {
  width: 58px; height: 58px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.28);
  margin-bottom: 1.4rem;
}
.login-brand h2 { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.4rem; font-size: 1.6rem; }
.login-brand .login-tagline { opacity: 0.82; margin-bottom: 2rem; font-size: 0.92rem; }
.login-brand-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.login-brand-points li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; opacity: 0.92; }
.login-brand-points li .login-point-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  font-size: 0.85rem;
}
.login-form-panel {
  flex: 1;
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-form-panel form .form-control {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.login-form-panel .btn-primary {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.login-footer-note { font-size: 0.78rem; }

@media (max-width: 767.98px) {
  .login-page-body { padding: 1.25rem 0.9rem; }
  .login-card { flex-direction: column; min-height: auto; }
  .login-card .login-brand.hr-hero {
    flex: none;
    padding: 2rem 1.75rem 1.75rem;
  }
  .login-brand-points { display: none; }
  .login-form-panel { padding: 2rem 1.75rem; }
}