html {
  overflow-x: hidden;
}

html.theme-light {
  color-scheme: light;
  background: #f5f7fb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  opacity: 1;
  transition: opacity 140ms ease;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

main,
section,
article,
header,
footer,
form,
.grid,
.flex {
  min-width: 0;
}

input,
select,
textarea,
button {
  font-size: 16px;
}

select {
  color-scheme: dark;
}

select option {
  background: #09090b;
  color: #f4f4f5;
}

select option:checked,
select option:hover {
  background: #27272a;
  color: #ffffff;
}

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

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.35);
  opacity: 1;
}

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

html.theme-light input[type="date"]::-webkit-calendar-picker-indicator,
html.theme-light input[type="time"]::-webkit-calendar-picker-indicator,
html.theme-light input[type="month"]::-webkit-calendar-picker-indicator {
  filter: none;
}

.theme-toggle {
  min-width: 5.25rem;
}

.theme-header-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.theme-header-actions > * {
  flex-shrink: 0;
}

.theme-toggle-floating {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 90;
  border-color: #3b3b3b !important;
  background: #18181b !important;
}

html.theme-light body {
  background: #f5f7fb !important;
  color: #111827 !important;
}

html.theme-light .bg-admin-bg,
html.theme-light .bg-staff-bg,
html.theme-light .bg-auth-page,
html.theme-light .bg-auth-bg,
html.theme-light [class*="bg-admin-bg/"],
html.theme-light [class*="bg-staff-bg/"],
html.theme-light [class*="bg-auth-page/"],
html.theme-light [class*="bg-auth-bg/"] {
  background-color: #f5f7fb !important;
}

html.theme-light .bg-admin-shell,
html.theme-light .bg-staff-shell,
html.theme-light .bg-auth-panel,
html.theme-light .bg-auth-image,
html.theme-light .bg-admin-card,
html.theme-light .bg-staff-card,
html.theme-light .bg-auth-field,
html.theme-light .bg-zinc-950,
html.theme-light .bg-zinc-900,
html.theme-light [class*="bg-zinc-950/"],
html.theme-light [class*="bg-zinc-900/"] {
  background-color: #ffffff !important;
}

html.theme-light .bg-admin-card2,
html.theme-light .bg-staff-card2,
html.theme-light .bg-zinc-800,
html.theme-light .bg-zinc-700,
html.theme-light [class*="bg-zinc-800/"],
html.theme-light [class*="bg-zinc-700/"] {
  background-color: #edf2f7 !important;
}

html.theme-light [class*="from-admin-card"],
html.theme-light [class*="from-staff-card"],
html.theme-light [class*="to-admin-card"],
html.theme-light [class*="to-staff-card"] {
  background-image: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}

html.theme-light .border-admin-line,
html.theme-light .border-staff-line,
html.theme-light .border-auth-border,
html.theme-light .border-zinc-700,
html.theme-light .border-zinc-600,
html.theme-light .divide-admin-line > :not([hidden]) ~ :not([hidden]),
html.theme-light .divide-staff-line > :not([hidden]) ~ :not([hidden]) {
  border-color: #d7dde8 !important;
}

html.theme-light .text-white,
html.theme-light .text-zinc-50,
html.theme-light .text-zinc-100,
html.theme-light .text-zinc-200 {
  color: #111827 !important;
}

html.theme-light .text-zinc-300,
html.theme-light .text-zinc-400,
html.theme-light .text-admin-muted,
html.theme-light .text-staff-muted,
html.theme-light .text-auth-muted {
  color: #64748b !important;
}

html.theme-light .text-zinc-500 {
  color: #94a3b8 !important;
}

html.theme-light .text-admin-blue,
html.theme-light .text-staff-blue {
  color: #0284c7 !important;
}

html.theme-light .text-admin-mint,
html.theme-light .text-staff-mint {
  color: #0f766e !important;
}

html.theme-light .text-admin-pink,
html.theme-light .text-staff-pink {
  color: #db2777 !important;
}

html.theme-light input,
html.theme-light select,
html.theme-light textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #94a3b8 !important;
}

html.theme-light select option {
  background: #ffffff;
  color: #111827;
}

html.theme-light .shadow-card {
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .theme-toggle,
html.theme-light .theme-toggle-floating {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.theme-light .theme-toggle:hover,
html.theme-light aside a:hover,
html.theme-light button:hover {
  background-color: #eaf2fb !important;
}

html.theme-light .bg-white {
  background-color: #0f172a !important;
}

html.theme-light .bg-white.text-zinc-950,
html.theme-light button.bg-white,
html.theme-light a.bg-white {
  color: #ffffff !important;
}

html.theme-light [data-admin-notification-panel],
html.theme-light #staff-notification-panel,
html.theme-light dialog,
html.theme-light .it-attendance-dialog,
html.theme-light .it-confirm {
  background: #ffffff !important;
  color: #111827 !important;
}

body:has(#login-form),
body:has(#register-form) {
  min-width: 0;
}

body:has(#login-form) main,
body:has(#register-form) main {
  min-height: 100svh;
}

body:has(#login-form) section,
body:has(#register-form) section {
  min-width: 0;
}

body:has(#login-form) section > div,
body:has(#register-form) section > div {
  width: 100%;
}

table {
  white-space: nowrap;
}

#admin-calendar-event-modal {
  background: rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A partially closed dialog must never block taps on the page underneath. */
#admin-calendar-event-modal.hidden,
#admin-calendar-event-modal:not(:has(#admin-calendar-day-panel:not(.hidden), #admin-calendar-event-form:not(.hidden))) {
  display: none !important;
  pointer-events: none !important;
}

body.page-ready main {
  animation: page-enter 160ms ease both;
  will-change: opacity;
}

body.page-leaving {
  opacity: 0.78;
  pointer-events: none;
}

@keyframes page-enter {
  from {
    opacity: 0.72;
  }

  to {
    opacity: 1;
  }
}

body > div:has(> aside) {
  transition: grid-template-columns 180ms ease;
}

aside {
  transition: width 180ms ease, max-height 180ms ease;
}

#sidebar-toggle {
  flex: 0 0 auto;
  border-color: rgba(161, 161, 170, 0.28);
  color: rgb(212, 212, 216);
}

#sidebar-toggle:hover {
  background: rgb(39, 39, 42);
  color: white;
}

aside nav a svg {
  flex: 0 0 auto;
}

aside nav a {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

aside nav a:hover {
  background-clip: padding-box;
}

.sidebar-label {
  transition: opacity 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.page-ready main,
  body > div:has(> aside),
  aside,
  aside nav a,
  .sidebar-label {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  body.sidebar-collapsed > div:has(> aside) {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }

  body.sidebar-collapsed aside {
    width: 70px;
    overflow: hidden;
  }

  body.sidebar-collapsed aside > div:first-child {
    justify-content: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.sidebar-collapsed aside > div:first-child > span,
  body.sidebar-collapsed aside > div:first-child .sidebar-label,
  body.sidebar-collapsed aside > div:nth-child(2) .sidebar-label,
  body.sidebar-collapsed #logout-button {
    display: none !important;
  }

  body.sidebar-collapsed aside > div:nth-child(2) {
    padding: 14px 10px !important;
  }

  body.sidebar-collapsed aside > div:nth-child(2) a,
  body.sidebar-collapsed aside > div:nth-child(2) > div {
    justify-content: center;
    padding: 0 !important;
  }

  body.sidebar-collapsed aside [data-profile-image],
  body.sidebar-collapsed aside #profile-image {
    width: 42px !important;
    height: 42px !important;
  }

  body.sidebar-collapsed aside nav {
    padding: 12px 8px !important;
  }

  body.sidebar-collapsed aside nav a {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.sidebar-collapsed aside nav a .sidebar-label {
    display: none !important;
  }

  body.sidebar-collapsed aside nav a [data-admin-pending-total] {
    position: absolute;
    margin-left: 26px !important;
    margin-top: -24px;
    min-width: 18px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

#login-form input,
#login-form select,
#register-form input,
#register-form select,
#staff-attendance-form input,
#staff-attendance-form select,
#device-form input,
#staff-password-form input,
#new-staff-form input,
#new-staff-form select,
#team-form input,
#role-form input {
  min-height: 44px;
}

@media (max-width: 1023px) {
  body.sidebar-collapsed aside {
    max-height: 65px;
  }

  body.sidebar-collapsed aside > div:first-child {
    border-bottom: 0 !important;
  }

  body.sidebar-collapsed aside > div:nth-child(2),
  body.sidebar-collapsed aside nav {
    display: none !important;
  }

  body[id$="-page"] > div:has(> aside) {
    display: block !important;
    min-height: 100dvh;
  }

  aside {
    position: sticky;
    top: 0;
    z-index: 40;
    max-width: 100vw;
    overflow-x: hidden;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  aside > div:first-child {
    min-height: 64px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #sidebar-toggle,
  #logout-button {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  aside > div:nth-child(2) {
    padding: 10px 14px !important;
  }

  aside > div:nth-child(2) a,
  aside > div:nth-child(2) > div {
    padding: 4px !important;
  }

  aside [data-profile-image],
  aside #profile-image {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto;
  }

  aside nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow-x: hidden;
    max-width: 100vw;
    padding: 10px 12px 12px !important;
  }

  aside nav a {
    min-width: 0;
    min-height: 44px !important;
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  aside nav a svg {
    flex: 0 0 auto;
  }

  aside nav a span:not([data-admin-pending-total]) {
    min-width: 0;
  }

  main {
    width: 100%;
    min-width: 0 !important;
    max-width: 100vw;
    padding: 14px !important;
  }

  main > header,
  header.sticky {
    position: static !important;
    min-height: auto !important;
    padding: 14px !important;
  }

  main > header .theme-header-actions,
  header.sticky .theme-header-actions {
    justify-content: flex-end;
  }

  main > header h1,
  header.sticky h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  main > div,
  main > section,
  main > article {
    width: 100%;
  }

  section,
  article,
  form,
  .grid {
    min-width: 0;
  }

  .grid,
  [class*="grid-cols-"] {
    max-width: 100%;
  }

  article {
    overflow: hidden;
  }

  img,
  canvas {
    height: auto;
  }

  .p-5 {
    padding: 1rem !important;
  }

  .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  #dashboard,
  #admin-dashboard-page section,
  #staff-dashboard-page section,
  #profile-page section,
  #teams-page section,
  #new-staff-page section,
  #role-directory-page section {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #admin-dashboard-page .space-y-5,
  #staff-dashboard-page .space-y-5 {
    padding: 14px !important;
  }

  #admin-dashboard-page canvas,
  #staff-dashboard-page canvas,
  #chart-page canvas {
    min-height: 220px;
  }

  #calendar-grid,
  #staff-calendar-grid {
    gap: 6px !important;
    padding: 12px !important;
    font-size: 12px !important;
  }

  #calendar-grid > *,
  #staff-calendar-grid > * {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #calendar-grid > button > span:first-child,
  #staff-calendar-grid > button > span:first-child {
    position: static !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  #calendar-grid > button > span:first-child.bg-white,
  #staff-calendar-grid > button > span:first-child.bg-white {
    background: #38bdf8 !important;
    color: #082f49 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16) !important;
  }

  #calendar-grid > button > div,
  #staff-calendar-grid > button > div {
    position: absolute !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 5px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  #calendar-grid > button > div > span,
  #staff-calendar-grid > button > div > span {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
  }

  #calendar-grid > button.opacity-60,
  #staff-calendar-grid > button.opacity-60 {
    background: rgba(24, 24, 27, 0.3) !important;
  }

  #admin-calendar-event-modal {
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #admin-calendar-day-panel,
  #admin-calendar-event-form {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 82dvh !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    padding: 20px !important;
  }

  #admin-calendar-day-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  #admin-calendar-day-date {
    margin-top: 6px !important;
    font-size: 0.95rem !important;
  }

  #admin-calendar-day-events {
    margin-top: 16px !important;
  }

  #admin-calendar-day-events + div {
    margin-top: 24px !important;
  }

  #admin-calendar-add-event {
    min-height: 48px !important;
    gap: 18px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 0.95rem !important;
  }

  #admin-calendar-add-event span:last-child {
    font-size: 1.8rem !important;
  }

  #admin-calendar-event-title-input {
    height: 48px !important;
    font-size: 1.25rem !important;
  }

  #admin-calendar-event-form label,
  #admin-calendar-event-form input,
  #admin-calendar-event-form textarea {
    min-width: 0 !important;
  }

  #staff-attendance-form,
  #device-form,
  #staff-password-form,
  #staff-password-form .grid,
  #new-staff-form,
  #team-form,
  #role-form,
  #employee-assignment-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #staff-attendance-form button,
  #device-form button,
  #staff-password-form button,
  #new-staff-form button,
  #team-form button,
  #role-form button,
  #employee-assignment-form button {
    width: 100%;
  }

  .overflow-x-auto {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #52525b transparent;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-x-auto table {
    min-width: 760px;
  }

  #employee-list,
  #teams-list,
  #roles-list,
  #employee-team-list,
  #group-panels,
  #attendance-records,
  #device-history-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #attendance-record-section > div:last-child,
  #roles-list {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #52525b transparent;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  aside nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  aside nav a {
    font-size: 13px !important;
    gap: 8px !important;
  }

  aside nav a[data-admin-only],
  aside nav a[data-staff-only] {
    min-width: 0;
  }

  main {
    padding: 12px !important;
  }

  main > header button,
  main > header a,
  main form button,
  [role="dialog"] button {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  #chart-page article:has(#attendance-chart) > div:has(#attendance-chart) {
    height: 280px !important;
  }

  #chart-page #attendance-record-section > div:first-child > div:last-child,
  #profile-page [data-header-actions] {
    width: 100%;
  }

  #chart-page #attendance-record-section > div:first-child > div:last-child > label {
    width: 100%;
  }

  #chart-page #admin-attendance-search,
  #chart-page #attendance-record-date-button,
  #chart-page #attendance-record-pdf {
    width: 100%;
  }

  #chart-page #attendance-record-section > div:first-child > div:last-child > div {
    flex: 1 1 calc(50% - 0.375rem);
  }

  #chart-page #attendance-record-pdf {
    flex: 1 1 calc(50% - 0.375rem);
  }

  #new-staff-page #generate-staff-id {
    flex: 0 0 auto;
    width: auto !important;
  }

  .text-3xl {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
  }

  .text-2xl {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  #login-form,
  #register-form {
    gap: 14px;
  }

  #register-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(#login-form) main,
  body:has(#register-form) main {
    align-items: stretch !important;
    padding: 14px !important;
  }

  body:has(#login-form) section,
  body:has(#register-form) section {
    max-width: none !important;
  }

  body:has(#login-form) section > div,
  body:has(#register-form) section > div {
    border-radius: 12px !important;
  }

  body:has(#login-form) section > div > div:first-child,
  body:has(#register-form) section > div > div:first-child {
    min-height: auto !important;
    padding: 28px 20px !important;
  }

  body:has(#login-form) section > div > div:last-child,
  body:has(#register-form) section > div > div:last-child {
    display: none !important;
  }

  body:has(#login-form) h1,
  body:has(#register-form) h1 {
    font-size: 1.65rem !important;
  }

  body:has(#login-form) main,
  body:has(#register-form) main {
    min-height: 100dvh !important;
    overflow-x: hidden;
  }

  body:has(#login-form) form,
  body:has(#register-form) form {
    width: 100%;
  }

  #profile-page main,
  body:not([id]) main {
    padding: 12px !important;
  }

  #profile-page article:first-child {
    min-height: auto !important;
  }

  #profile-page #message {
    margin-top: 0 !important;
  }
}