/*
  Minimal professional interface layer.
  The app keeps its existing markup and logic while this stylesheet gives every
  role one cleaner dashboard system with reliable page scrolling.
*/

:root,
html.theme-light {
  --lte-bg: #f5f7fb;
  --lte-bg-soft: #eef3f9;
  --lte-surface: #ffffff;
  --lte-surface-soft: #f8fafc;
  --lte-sidebar: #050607;
  --lte-sidebar-soft: #080a0c;
  --lte-header: rgba(255, 255, 255, 0.92);
  --lte-border: #dbe3ee;
  --lte-border-strong: #c7d2e1;
  --lte-text: #0f172a;
  --lte-muted: #64748b;
  --lte-muted-strong: #475569;
  --lte-primary: #2563eb;
  --lte-primary-strong: #1d4ed8;
  --lte-primary-soft: rgba(37, 99, 235, 0.1);
  --lte-cyan: #0891b2;
  --lte-success: #059669;
  --lte-warning: #d97706;
  --lte-danger: #dc2626;
  --lte-radius: 8px;
  --lte-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.08);
  --lte-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html:not(.theme-light) {
  --lte-bg: #0b1220;
  --lte-bg-soft: #101827;
  --lte-surface: #151f2f;
  --lte-surface-soft: #1b2738;
  --lte-sidebar: #050607;
  --lte-sidebar-soft: #080a0c;
  --lte-header: rgba(17, 24, 39, 0.92);
  --lte-border: #263246;
  --lte-border-strong: #334155;
  --lte-text: #f8fafc;
  --lte-muted: #a8b3c5;
  --lte-muted-strong: #cbd5e1;
  --lte-primary: #60a5fa;
  --lte-primary-strong: #3b82f6;
  --lte-primary-soft: rgba(96, 165, 250, 0.14);
  --lte-cyan: #22d3ee;
  --lte-success: #34d399;
  --lte-warning: #fbbf24;
  --lte-danger: #fb7185;
  --lte-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 18px 42px rgba(0, 0, 0, 0.26);
  --lte-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.22);
}

html,
body {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--lte-primary) 9%, transparent), transparent 28rem),
    var(--lte-bg) !important;
  color: var(--lte-text) !important;
}

body[id$="-page"] > .grid,
body[id$="-page"] > div:has(> aside) {
  min-height: 100dvh !important;
  height: auto !important;
  background: var(--lte-bg) !important;
  align-items: stretch;
}

body[id$="-page"] main {
  min-height: 100dvh;
  overflow: visible !important;
}

body[id$="-page"] main > div,
body[id$="-page"] main > section {
  min-width: 0;
}

@media (min-width: 1024px) {
  body[id$="-page"] aside {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
}

aside {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--lte-sidebar) 0%, var(--lte-sidebar-soft) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

aside > div:first-child,
aside > div:nth-child(2),
aside nav {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

aside > div:first-child {
  order: 1;
  min-height: 64px;
  padding-inline: 1.25rem !important;
}

aside > div:first-child > a,
aside > div:first-child > span:first-child {
  min-width: 0;
}

aside > div:first-child .inline-flex:first-child,
aside > div:first-child > a .inline-flex:first-child {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: #10b981 !important;
  color: #04110d !important;
}

aside > div:first-child p:first-child,
aside > div:first-child span span:first-child {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

aside > div:first-child p:last-child,
aside > div:first-child span span:last-child {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  color: #94a3b8 !important;
}

aside > div:nth-child(2) {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  order: 3;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 0 !important;
  padding: 1rem 1.25rem !important;
}

aside > div:nth-child(2) > a,
aside > div:nth-child(2) > div {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
}

aside > div:nth-child(2) img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 999px !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

aside > div:nth-child(2) [data-user-name] {
  color: #ffffff !important;
  font-weight: 800 !important;
}

aside > div:nth-child(2) [data-user-id] {
  color: #94a3b8 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
}

aside .bg-admin-card,
aside .bg-staff-card,
aside .bg-auth-field,
aside [class*="bg-zinc-"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

aside a,
aside button,
aside .text-white,
aside .text-zinc-100,
aside .text-zinc-200,
aside .text-zinc-300,
aside .text-admin-muted,
aside .text-staff-muted {
  color: #e5edf7 !important;
}

aside nav {
  order: 2;
  gap: 0.35rem !important;
  padding: 1.4rem 0.75rem 1rem !important;
}

aside nav::before {
  content: "OVERVIEW";
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 0 0.75rem;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

aside nav a {
  min-height: 40px;
  border-radius: var(--lte-radius) !important;
  color: #b7c2d3 !important;
  font-weight: 700 !important;
}

aside nav a[aria-current="page"],
aside nav a.bg-zinc-800,
aside nav a:hover,
aside button:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
}

aside nav a[aria-current="page"],
aside nav a.bg-zinc-800 {
  box-shadow: none;
  color: #10b981 !important;
}

aside nav a[aria-current="page"] svg,
aside nav a.bg-zinc-800 svg,
aside nav a:hover svg {
  color: #10b981 !important;
}

aside #logout-button {
  margin-left: auto !important;
  flex: 0 0 auto;
  color: #94a3b8 !important;
  background: transparent !important;
  border-color: transparent !important;
}

aside #logout-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

main,
.bg-admin-bg,
.bg-staff-bg,
[class*="bg-admin-bg/"],
[class*="bg-staff-bg/"] {
  background: transparent !important;
  color: var(--lte-text) !important;
}

main > header,
header.sticky {
  min-height: 64px !important;
  background: var(--lte-header) !important;
  border-color: var(--lte-border) !important;
  box-shadow: var(--lte-shadow-soft);
  backdrop-filter: blur(14px);
}

main > header > .theme-header-actions,
header.sticky > .theme-header-actions {
  margin-left: auto !important;
}

main > header h1,
header.sticky h1,
.text-white,
.text-zinc-50,
.text-zinc-100,
.text-zinc-200 {
  color: var(--lte-text) !important;
}

.text-admin-muted,
.text-staff-muted,
.text-auth-muted,
.text-zinc-300,
.text-zinc-400,
.text-zinc-500 {
  color: var(--lte-muted) !important;
}

.bg-admin-card,
.bg-staff-card,
.bg-auth-panel,
.bg-admin-shell,
.bg-staff-shell,
.bg-zinc-950,
.bg-zinc-900,
[class*="bg-zinc-950/"],
[class*="bg-zinc-900/"],
[class*="from-admin-card"],
[class*="from-staff-card"],
[class*="to-admin-card"],
[class*="to-staff-card"],
[class*="bg-gradient-to-b"] {
  background: var(--lte-surface) !important;
  border-color: var(--lte-border) !important;
}

.bg-admin-card2,
.bg-staff-card2,
.bg-zinc-800,
.bg-zinc-700,
[class*="bg-zinc-800/"],
[class*="bg-zinc-700/"] {
  background: var(--lte-surface-soft) !important;
  border-color: var(--lte-border) !important;
}

.border-admin-line,
.border-staff-line,
.border-auth-border,
.border-zinc-700,
.border-zinc-600,
.divide-admin-line > :not([hidden]) ~ :not([hidden]),
.divide-staff-line > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--lte-border) !important;
}

article.rounded-lg,
section.rounded-lg,
.shadow-card,
main > div > section,
main > div > article {
  border-radius: var(--lte-radius) !important;
  box-shadow: var(--lte-shadow) !important;
}

article[data-admin-metric],
article[data-staff-metric],
button#admin-attendance-card {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

article[data-admin-metric]::before,
article[data-staff-metric]::before,
button#admin-attendance-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lte-primary);
  opacity: 0.78;
}

article[data-admin-metric]:hover,
article[data-staff-metric]:hover,
button#admin-attendance-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--lte-primary) 45%, var(--lte-border)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 22px 48px rgba(15, 23, 42, 0.12) !important;
}

article,
section,
dialog,
.it-attendance-dialog,
.it-confirm {
  border-radius: var(--lte-radius) !important;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button,
a.inline-flex,
button.inline-flex {
  border-radius: var(--lte-radius) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lte-primary) 42%, transparent) !important;
  outline-offset: 2px;
}

input,
select,
textarea,
.bg-auth-field {
  min-height: 42px;
  background: var(--lte-surface) !important;
  border-color: var(--lte-border-strong) !important;
  color: var(--lte-text) !important;
  border-radius: var(--lte-radius) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--lte-muted) 70%, transparent) !important;
}

select,
input[type="date"],
input[type="time"],
input[type="month"] {
  color-scheme: light dark;
}

select option {
  background: var(--lte-surface) !important;
  color: var(--lte-text) !important;
}

table thead,
thead.bg-zinc-950 {
  background: var(--lte-surface-soft) !important;
  color: var(--lte-muted-strong) !important;
}

table tbody,
tbody.bg-admin-bg,
tbody.bg-staff-bg {
  background: var(--lte-surface) !important;
}

table tr:hover {
  background: var(--lte-primary-soft) !important;
}

.text-admin-blue,
.text-staff-blue {
  color: var(--lte-primary) !important;
}

.text-admin-mint,
.text-staff-mint {
  color: var(--lte-success) !important;
}

.text-admin-pink,
.text-staff-pink {
  color: var(--lte-danger) !important;
}

.text-admin-amber,
.text-staff-amber {
  color: var(--lte-warning) !important;
}

.bg-admin-blue,
.bg-staff-blue,
.bg-auth-cyan {
  background-color: var(--lte-primary) !important;
}

.bg-admin-mint,
.bg-staff-mint {
  background-color: var(--lte-success) !important;
}

.bg-admin-pink,
.bg-staff-pink {
  background-color: var(--lte-danger) !important;
}

.theme-toggle,
.theme-toggle-floating,
[data-theme-actions] > a,
[data-theme-actions] > button {
  min-height: 40px;
}

.theme-toggle,
[data-admin-notification-toggle],
[data-staff-notification-toggle],
#sidebar-toggle,
#logout-button {
  background: var(--lte-surface) !important;
  border-color: var(--lte-border-strong) !important;
  color: var(--lte-text) !important;
}

aside [data-admin-notification-toggle],
aside [data-staff-notification-toggle],
aside #sidebar-toggle,
aside #logout-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

[data-admin-notification-panel],
#staff-notification-panel,
.it-attendance-dialog,
.it-confirm {
  background: var(--lte-surface) !important;
  border-color: var(--lte-border) !important;
  color: var(--lte-text) !important;
  box-shadow: var(--lte-shadow) !important;
}

#message:not(.hidden) {
  box-shadow: var(--lte-shadow);
}

#admin-calendar-grid button,
#staff-calendar-grid button {
  background: var(--lte-surface) !important;
  border-color: var(--lte-border) !important;
}

#admin-calendar-grid button:hover,
#staff-calendar-grid button:hover {
  background: var(--lte-primary-soft) !important;
  border-color: color-mix(in srgb, var(--lte-primary) 45%, var(--lte-border)) !important;
}

canvas {
  max-width: 100%;
}

body:has(#login-form),
body:has(#register-form),
body:has(#forgot-password-form),
body:has(#reset-password-form) {
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.12), transparent 24rem),
    linear-gradient(135deg, #eef3f9 0%, #f8fafc 100%) !important;
}

body:has(#login-form) .bg-auth-panel,
body:has(#register-form) .bg-auth-panel,
body:has(#forgot-password-form) .bg-auth-panel,
body:has(#reset-password-form) .bg-auth-panel {
  background: var(--lte-surface) !important;
  border-color: var(--lte-border) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
}

body:has(#login-form) .bg-auth-image,
body:has(#register-form) .bg-auth-image,
body:has(#forgot-password-form) .bg-auth-image,
body:has(#reset-password-form) .bg-auth-image {
  background: linear-gradient(135deg, #eaf2ff 0%, #f8fafc 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 1023px) {
  body[id$="-page"] > .grid,
  body[id$="-page"] > div:has(> aside) {
    display: block !important;
  }

  aside {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  main > header,
  header.sticky {
    border-radius: 0 !important;
  }

  .theme-header-actions {
    width: auto;
  }
}