/* Shrinks every rem-based Tailwind text-size utility (text-sm, text-xs, ...)
   proportionally across the whole app — tables/cards were reading as
   default-browser-16px-scaled, which felt oversized/unprofessional next to
   a dense HR admin UI. Loaded on every layout (app.php, guest.php,
   public.php all link app.css), so this is the one place to change it. */
html{
  font-size: 14px;
}

:root{
  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --border: #E4E6EB;
  --text: #050505;
  --text-muted: #65676B;
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: #F0F2F5;
}
html.dark{
  --bg: #1e293b;          /* slate-800 */
  --surface: #334155;     /* slate-700 */
  --surface-2: #475569;   /* slate-600 */
  --border: #64748b;      /* slate-500 */
  --text: #e2e8f0;        /* slate-200 */
  --text-muted: #94a3b8;  /* slate-400 */
  --sidebar-bg: #1e293b;  /* slate-800 */
  --sidebar-hover: #334155; /* slate-700 */
}
[x-cloak]{ display:none !important; }
body{
  background: var(--bg);
  color: var(--text);
}
.surface{ background: var(--surface); border-color: var(--border); }
.surface-2{ background: var(--surface-2); }
.border-token{ border-color: var(--border); }

/* Form fields (e.g. the Add/Edit Employee drawer) need more contrast than
   --border gives in light mode, or they read as border-less on a white/near-white background. */
.field-border{ border-color: #C6CBD3; }
html.dark .field-border{ border-color: var(--border); }
.text-muted{ color: var(--text-muted); }
.hover-bg:hover{ background: var(--surface-2); }

/* Sidebar */
#sidebar{ background: var(--sidebar-bg); border-color: var(--border); }
.nav-link{
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover{ background: var(--sidebar-hover); color: var(--text); }
.nav-link.active{
  background: #EAF7E7;
  color: #42B72A;
  font-weight: 600;
}
html.dark .nav-link.active{
  background: rgba(66,183,42,0.18);
  color: #5FD645;
}
.nav-group summary{ list-style: none; cursor: pointer; }
.nav-group summary::-webkit-details-marker{ display:none; }
.nav-group[open] > summary .chev{ transform: rotate(90deg); }
.chev{ transition: transform .15s ease; }

.nav-sub{
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.nav-sub:hover{ color: #1877F2; }
html.dark .nav-sub:hover{ color: #4E9BFF; }
.nav-sub.active{ color: #42B72A; font-weight: 600; }
html.dark .nav-sub.active{ color: #5FD645; }

#sidebar-scroll{ scrollbar-width: thin; scrollbar-color: #475569 transparent; }
#sidebar-scroll::-webkit-scrollbar{ width: 6px; }
#sidebar-scroll::-webkit-scrollbar-thumb{ background: #475569; border-radius: 4px; }
#sidebar-scroll::-webkit-scrollbar-track{ background: transparent; }

.badge-dot{ min-width: 20px; height: 20px; }

@media (max-width: 1023px){
  #sidebar{
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  #sidebar.open{ transform: translateX(0); }
}

/* Desktop sidebar collapse — the topbar's menu button toggles this at any
   width; below lg it's the existing off-canvas drawer above instead. */
@media (min-width: 1024px){
  #sidebar{ transition: transform .2s ease; }
  body.sidebar-collapsed #sidebar{ transform: translateX(-230px); }
}

/* ---------- Toasts (window.App.toast — Users/Roles admin actions) ---------- */
#toastHost{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.app-toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.app-toast.show{ opacity: 1; transform: translateY(0); }
.app-toast-success{ border-color: rgba(66,183,42,0.35); }
.app-toast-success i{ color: #36992A; }
.app-toast-error{ border-color: rgba(224,36,36,0.35); }
.app-toast-error i{ color: #E02424; }