:root {
  --bg-gradient-1: #6a8dff;
  --bg-gradient-2: #7f5bf0;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.35);
  --text-primary: #1f2430;
  --text-muted: #6b7280;
  --sidebar-bg: rgba(255, 255, 255, 0.55);
  --card-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
  --accent: #6a5bf0;
  --accent-2: #22c1c3;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --body-bg: #eef1ff;
}

[data-theme="dark"] {
  --glass-bg: rgba(30, 32, 48, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-muted: #c5cad8;
  --sidebar-bg: rgba(20, 22, 36, 0.75);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --body-bg: #10121c;
}

/* Bootstrap components keep their own light-theme text variables. Override
   them at the theme root so cards, tables and utility text stay readable. */
[data-theme="dark"] {
  --bs-body-color: #f4f6fb;
  --bs-secondary-color: #c5cad8;
  --bs-heading-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] body,
[data-theme="dark"] .card-glass,
[data-theme="dark"] .topbar,
[data-theme="dark"] .dropdown-menu { color: var(--text-primary); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }
[data-theme="dark"] .topbar .btn,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item-text { color: var(--text-primary); }
[data-theme="dark"] .topbar .search-box input::placeholder { color: #aeb5c6; opacity: 1; }
[data-theme="dark"] .table-glass {
  --bs-table-color: var(--text-primary);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-color: #ffffff;
}
[data-theme="dark"] .table-glass > :not(caption) > * > * { color: var(--text-primary); }
[data-theme="dark"] .table-glass th { color: #ffffff; }
[data-theme="dark"] .report-card-link,
[data-theme="dark"] .report-card-link h6 { color: #ffffff !important; }
[data-theme="dark"] .report-card-link .card-glass { transition: border-color .15s ease, transform .15s ease, background .15s ease; }
[data-theme="dark"] .report-card-link:hover .card-glass,
[data-theme="dark"] .report-card-link:focus .card-glass { border-color: rgba(139,125,255,.75); background: rgba(42,45,66,.82); transform: translateY(-1px); }

* { box-sizing: border-box; }

body {
  background: var(--body-bg);
  background-image: radial-gradient(circle at 10% 10%, rgba(106,141,255,.20), transparent 40%),
                     radial-gradient(circle at 90% 30%, rgba(127,91,240,.18), transparent 45%),
                     radial-gradient(circle at 30% 90%, rgba(34,193,195,.15), transparent 40%);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  transition: background .3s ease, color .3s ease;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

/* ---------- Layout ---------- */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--glass-border);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  overflow-y: auto;
  transition: transform .25s ease;
  z-index: 1030;
}
.sidebar.collapsed { transform: translateX(-260px); }

.sidebar .brand {
  padding: 1.25rem 1.25rem .5rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  text-align: center;
  font-weight: 700; font-size: 1.05rem;
}
.sidebar .brand img { height: 70px; width: auto; max-width: 100%; }
[data-theme="dark"] .sidebar .brand img {
  filter: invert(1) brightness(1.12) contrast(1.08);
  height: 82px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 18px rgba(139,125,255,.12);
}
[data-theme="dark"] .sidebar .brand span {
  margin-top: .35rem;
  color: #ffffff;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.sidebar .nav-link {
  color: var(--text-muted);
  padding: .6rem 1.25rem;
  border-radius: 10px;
  margin: .15rem .75rem;
  display: flex; align-items: center; gap: .65rem;
  font-size: .92rem;
  transition: all .15s ease;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2));
  color: #fff;
}
.sidebar .nav-section {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 1rem 1.25rem .25rem;
}

.main-content {
  margin-left: 260px;
  flex: 1;
  padding: 1.25rem 1.5rem 2.5rem;
  transition: margin-left .25s ease;
  min-width: 0;
}
.main-content.expanded { margin-left: 0; }

.topbar {
  position: sticky; top: 0; z-index: 1020;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.topbar .search-box input {
  background: transparent; border: none; outline: none; color: var(--text-primary);
}

.topbar-datetime {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .42rem .9rem .42rem .5rem;
  border: 1px solid rgba(106, 91, 240, .2);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(106,141,255,.13), rgba(127,91,240,.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  white-space: nowrap;
}
.datetime-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 11px;
  color: #fff;
  font-size: 1.05rem;
  background: linear-gradient(135deg, #6a8dff, #7f5bf0);
  box-shadow: 0 6px 16px rgba(106,91,240,.28);
}
.datetime-copy { display: flex; flex-direction: column; line-height: 1.15; }
.datetime-copy strong {
  color: var(--text-primary);
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.datetime-copy small { color: var(--text-muted); font-size: .69rem; margin-top: .18rem; }
.online-sync-badge {
  display: inline-flex; align-items: center; gap: .42rem;
  min-height: 38px; padding: .42rem .72rem; border-radius: 12px;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  border: 1px solid rgba(100,116,139,.2); background: rgba(100,116,139,.08); color: #64748b;
  cursor: pointer; font-family: inherit;
}
.online-sync-badge:hover { transform: translateY(-1px); filter: saturate(1.08); }
.sync-chevron { font-size: .62rem; opacity: .65; margin-left: .08rem; }
.sync-status-menu { width: min(360px, calc(100vw - 24px)); border-radius: 16px; box-shadow: 0 18px 45px rgba(15,23,42,.18); }
.sync-status-title { display:flex; align-items:flex-start; gap:.65rem; color:var(--text-primary); line-height:1.35; margin-bottom:.8rem; }
.sync-status-title .online-sync-dot { flex:0 0 auto; margin-top:.35rem; }
.sync-status-title .online-sync-dot.online { color:#078a55; }
.sync-status-title .online-sync-dot.failed { color:#d92d47; }
.sync-status-title .online-sync-dot.stale { color:#c77700; }
.sync-status-line { display:flex; align-items:flex-start; gap:.55rem; color:var(--text-muted); font-size:.78rem; line-height:1.45; margin-top:.48rem; }
.sync-status-line i { color:#6a6ff0; margin-top:.08rem; }
.sync-status-message { margin-top:.75rem; padding:.65rem .72rem; border-radius:10px; color:var(--text-muted); font-size:.74rem; line-height:1.4; background:rgba(100,116,139,.08); overflow-wrap:anywhere; }
.online-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(100,116,139,.12); }
.online-sync-badge.online { color: #078a55; border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.1); }
.online-sync-badge.online .online-sync-dot { animation: onlineSyncPulse 1.8s infinite; }
.online-sync-badge.failed { color: #d92d47; border-color: rgba(225,29,72,.25); background: rgba(225,29,72,.09); }
.online-sync-badge.stale { color: #c77700; border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.1); }
@keyframes onlineSyncPulse { 0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.12)} 50%{box-shadow:0 0 0 7px rgba(16,185,129,0)} }
[data-theme="dark"] .online-sync-badge.online { color:#57e3aa; background:rgba(16,185,129,.12); }
[data-theme="dark"] .online-sync-badge.failed { color:#ff7d90; background:rgba(225,29,72,.12); }
[data-theme="dark"] .online-sync-badge.stale { color:#ffc45c; background:rgba(245,158,11,.12); }
[data-theme="dark"] .topbar-datetime {
  border-color: rgba(139,125,255,.28);
  background: linear-gradient(135deg, rgba(106,141,255,.12), rgba(127,91,240,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Cards / widgets ---------- */
.stat-card {
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  position: relative; overflow: hidden;
}
.stat-card .icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2));
  flex-shrink: 0;
}
.stat-card .value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-card .label { font-size: .8rem; color: var(--text-muted); }

.card-glass { padding: 1.25rem; }

/* ---------- Tables ---------- */
.table-glass {
  --bs-table-bg: transparent;
  color: var(--text-primary);
}
.table-glass thead th {
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table-glass td, .table-glass th { vertical-align: middle; border-color: var(--glass-border); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
}
[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup {
  background-color: #202334;
  color: #ffffff;
}
[data-theme="dark"] .form-select option:checked {
  background-color: #6657e8;
  color: #ffffff;
}
[data-theme="dark"] .btn-outline-secondary {
  color: #e6e9f2;
  border-color: #747b8e;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #747b8e;
  color: #ffffff;
}

/* Keep edit dialogs opaque and readable over data-heavy pages. */
.role-edit-modal {
  background: #f7f8ff;
  color: #1f2430;
  border: 1px solid rgba(106,91,240,.22);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(12,15,30,.38);
}
[data-theme="dark"] .role-edit-modal {
  --bs-modal-bg: #1d2030;
  --bs-modal-color: #f7f8ff;
  background: #1d2030;
  color: #f7f8ff;
  border-color: rgba(255,255,255,.16);
}
[data-theme="dark"] .role-edit-modal .modal-header,
[data-theme="dark"] .role-edit-modal .modal-footer { border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .role-edit-modal .form-text { color: #bfc5d6; }
[data-theme="dark"] .role-edit-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-backdrop.show { opacity: .68; }
/* User edit/reset dialogs must stay opaque over the users table. */
[id^="editUser"] .modal-content,
[id^="resetUser"] .modal-content {
  background: #f7f8ff;
  color: #1f2430;
  border: 1px solid rgba(106,91,240,.22);
  box-shadow: 0 24px 70px rgba(12,15,30,.38);
}
[data-theme="dark"] [id^="editUser"] .modal-content,
[data-theme="dark"] [id^="resetUser"] .modal-content {
  --bs-modal-bg: #1d2030;
  --bs-modal-color: #f7f8ff;
  background: #1d2030;
  color: #f7f8ff;
  border-color: rgba(255,255,255,.16);
}
[data-theme="dark"] [id^="editUser"] .btn-close,
[data-theme="dark"] [id^="resetUser"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.role-access-card { display:flex; flex-direction:column; min-height:210px; }
.role-card-description { flex:1; line-height:1.55; }
.role-permission-count { min-width:58px; padding:.45rem .6rem; border-radius:12px; background:rgba(106,91,240,.12); color:var(--accent); }
.role-permission-count strong, .role-permission-count small { display:block; }
.role-permission-count strong { font-size:1.05rem; }
.role-permission-count small { font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; }
.permission-summary-bar { background:rgba(106,91,240,.09); border:1px solid rgba(106,91,240,.18); }
.permission-group-card { border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.18); }
.permission-group-header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.8rem 1rem; background:rgba(106,91,240,.09); }
.permission-options { padding:.35rem 1rem; }
.permission-option { display:flex; gap:.75rem; align-items:flex-start; padding:.7rem 0; cursor:pointer; border-bottom:1px solid var(--glass-border); }
.permission-option:last-child { border-bottom:0; }
.permission-option .form-check-input { margin-top:.25rem; flex:0 0 auto; }
.permission-option span, .permission-option small { display:block; }
.permission-option small { color:var(--text-muted); line-height:1.35; margin-top:.15rem; }
[data-theme="dark"] .permission-group-card { background:#222536; }
[data-theme="dark"] .permission-summary-bar,
[data-theme="dark"] .permission-group-header { background:rgba(124,105,255,.14); }
.role-permissions-dialog {
  width: min(1500px, calc(100vw - 1.5rem));
  max-width: none;
  height: calc(100dvh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  margin: .75rem auto;
}
.role-permissions-dialog .role-permissions-modal { height:100%; max-height:100%; overflow:hidden; }
.role-permissions-modal > form { display:flex; flex-direction:column; height:100%; min-height:0; }
.role-permissions-modal .modal-header,
.role-permissions-modal .modal-footer { flex:0 0 auto; background:inherit; z-index:2; }
.role-permissions-modal .modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
@media (max-width:575px) {
  .role-permissions-dialog { width:calc(100vw - .5rem); height:calc(100dvh - .5rem); max-height:calc(100dvh - .5rem); margin:.25rem auto; }
  .role-permissions-modal .modal-body { padding:.75rem; }
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(106,91,240,.18);
  background: rgba(255,255,255,.7);
}

.btn-gradient {
  background: linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2));
  border: none; color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106,91,240,.35); color: #fff; }

/* ---------- Login page ---------- */
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auth-card { width: 100%; max-width: 420px; padding: 2.25rem; }
.auth-logo { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 1rem; display: block; }

/* ---------- Misc ---------- */
.badge-status-active,
.badge-status-present { background: var(--success) !important; color: #fff !important; }
.badge-status-inactive { background: var(--text-muted) !important; color: #fff !important; }
.badge-status-late { background: var(--warning) !important; color: #332600 !important; }
.badge-status-absent { background: var(--danger) !important; color: #fff !important; }
.badge-status-half_day { background: #fd7e14 !important; color: #211400 !important; }
.badge-status-leave { background: #6f42c1 !important; color: #fff !important; }
.badge-status-day_off { background: var(--accent-2) !important; color: #fff !important; }
.badge-status-holiday { background: #0dcaf0 !important; color: #06323a !important; }

.theme-toggle-btn, .icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.3);
  color: var(--text-primary);
}
[data-theme="dark"] .theme-toggle-btn, [data-theme="dark"] .icon-btn { background: rgba(255,255,255,.06); }

.initial-avatar {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border-radius: 50%; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #4f6fe8, #6946c7);
  box-shadow: 0 4px 12px rgba(79,70,199,.2);
}
.initial-avatar-sm { width: 34px; height: 34px; font-size: .78rem; }
.initial-avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.initial-avatar-xl { width: 120px; height: 120px; font-size: 2.5rem; }

@media (max-width: 991px) {
  .sidebar { transform: translateX(-260px); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .topbar-datetime { margin-left: auto; }
  .datetime-copy small { display: none; }
}

@media (max-width: 575px) {
  .topbar { gap: .4rem; padding: .65rem; }
  .topbar > div { gap: .35rem !important; }
  .topbar-datetime { padding: .35rem .55rem .35rem .35rem; gap: .45rem; }
  .datetime-icon { width: 34px; height: 34px; }
  .datetime-copy strong { font-size: .78rem; }
  .online-sync-badge { width: 38px; padding: 0; justify-content: center; }
  .online-sync-badge .online-sync-label, .online-sync-badge .online-sync-dot { display: none; }
}

/* ---------- Professional lightweight interface ----------
   Keep the existing component API while removing expensive glass rendering. */
:root {
  --body-bg: #f4f6fa;
  --glass-bg: #ffffff;
  --glass-border: #e3e8f0;
  --sidebar-bg: #ffffff;
  --card-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  --accent: #4f46e5;
  --accent-2: #0891b2;
}
[data-theme="dark"] {
  --body-bg: #111827;
  --glass-bg: #1b2433;
  --glass-border: #303b4d;
  --sidebar-bg: #151d2a;
  --card-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
body {
  background: var(--body-bg);
  background-image: none;
  font-size: .94rem;
  line-height: 1.45;
  transition: none;
}
.glass,
.sidebar,
.dashboard-panel,
.kpi-icon {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.glass {
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.sidebar {
  width: 244px;
  box-shadow: 1px 0 0 var(--glass-border);
}
.sidebar.collapsed { transform: translateX(-244px); }
.sidebar .brand { padding: 1rem 1rem .4rem; }
.sidebar .brand img { height: 54px; }
[data-theme="dark"] .sidebar .brand img {
  height: 58px;
  padding: 4px 8px;
  border-radius: 10px;
  box-shadow: none;
}
.sidebar .nav-link {
  margin: .08rem .65rem;
  padding: .5rem .85rem;
  border-radius: 8px;
  font-size: .875rem;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: #eef2ff;
  color: #4338ca;
}
[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link.active {
  background: #28334a;
  color: #c7d2fe;
}
.sidebar .nav-section { padding: .8rem 1rem .2rem; }
.main-content { margin-left: 244px; padding: 1rem 1.25rem 2rem; }
.topbar { padding: .6rem .8rem; margin-bottom: 1rem; }
.topbar-datetime {
  border-radius: 10px;
  background: var(--glass-bg);
  box-shadow: none;
}
.card-glass,
.dashboard-panel,
.permission-group-card,
.role-edit-modal,
[id^="editUser"] .modal-content,
[id^="resetUser"] .modal-content {
  border-radius: 12px !important;
  box-shadow: var(--card-shadow) !important;
}
.dashboard-kpi {
  min-height: 88px !important;
  padding: 13px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12) !important;
  transition: box-shadow .12s ease !important;
}
.dashboard-kpi-link { border-radius: 12px !important; }
.dashboard-kpi-link:hover .dashboard-kpi,
.dashboard-kpi-link:focus-visible .dashboard-kpi {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .16) !important;
}
.kpi-icon { width: 42px !important; height: 42px !important; border-radius: 10px !important; }
.kpi-watermark { display: none !important; }
.dashboard-panel { padding: 14px !important; border-radius: 12px !important; }
.chart-panel { min-height: 290px !important; }
.chart-wrap { height: 220px !important; }
.btn,
.form-control,
.form-select,
.input-group-text { border-radius: 8px; }
.btn-gradient:hover { transform: none; box-shadow: 0 3px 10px rgba(79, 70, 229, .2); }
.table > :not(caption) > * > * { padding: .58rem .65rem; }
.modal-backdrop.show { opacity: .48; }
@media (max-width: 991px) {
  .sidebar { transform: translateX(-244px); }
  .main-content { margin-left: 0; padding: .8rem .8rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}