/* ---------------------------------------------------------------------------
   Small stylesheet for the handful of things Tailwind utilities cannot express
   from markup alone: the sidebar's collapsed/off-canvas states and icon
   metrics. Everything else is a utility class.
   --------------------------------------------------------------------------- */

.material-icons-outlined {
  font-size: 20px;
  line-height: 1;
  user-select: none;
  /* Keeps icons from reflowing before the icon font finishes loading. */
  display: inline-block;
  width: 1em;
  overflow: hidden;
}

/* --- Sidebar: collapsed on desktop ---------------------------------------- */
#sidebar {
  width: 16rem;
  transition: width 200ms ease, transform 200ms ease;
}

@media (min-width: 1024px) {
  body.sidebar-collapsed #sidebar { width: 5rem; }
  body.sidebar-collapsed #app-main { margin-left: 5rem; }
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .nav-chevron,
  body.sidebar-collapsed .brand-text { display: none; }
  body.sidebar-collapsed .nav-item { justify-content: center; }
  body.sidebar-collapsed .nav-submenu { display: none !important; }
  body.sidebar-collapsed .brand { justify-content: center; }
}

/* --- Sidebar: off-canvas drawer on mobile --------------------------------- */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open #sidebar-overlay { opacity: 1; pointer-events: auto; }
}

/* --- Focus visibility ----------------------------------------------------- */
:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}

/* --- Toggle switch (checkbox rendered as a switch) ------------------------ */
.toggle-track {
  transition: background-color 150ms ease;
}
.toggle-input:checked + .toggle-track {
  background-color: #16a34a;
}
.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(1.25rem);
}
.toggle-input:focus-visible + .toggle-track {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}
.toggle-input:disabled + .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-thumb {
  transition: transform 150ms ease;
}

/* --- Table: sticky header ------------------------------------------------- */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* --- Loading skeleton ----------------------------------------------------- */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.skeleton {
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  background-color: #e2e8f0;
  border-radius: 0.375rem;
}

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