/*
Theme Name: KAL School Manager
Theme URI: https://kal-school-manager.local
Author: KAL School Manager Team
Author URI: https://kal-school-manager.local
Description: Custom theme for the KAL School Manager platform with Tailwind CSS 4.1 integration, Alpine.js, and HTMX support.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.1
Text Domain: kalschoolmanager
*/

/* Tailwind's generated CSS will be placed in assets/dist/tailwind.css */

/* Fallback typography utility classes (duplicated intentionally for first load before Tailwind build) */
.noto-sans {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.footer-gradient {
  background-image: repeating-linear-gradient(45deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(17, 17, 17),rgb(36,32,32));
}

.header-gradient {
  background-image: radial-gradient(circle at 15% 59%, rgba(101, 101, 101,0.04) 0%, rgba(101, 101, 101,0.04) 50%,rgba(44, 44, 44,0.04) 50%, rgba(44, 44, 44,0.04) 100%),radial-gradient(circle at 47% 11%, rgba(240, 240, 240,0.04) 0%, rgba(240, 240, 240,0.04) 50%,rgba(29, 29, 29,0.04) 50%, rgba(29, 29, 29,0.04) 100%),radial-gradient(circle at 73% 44%, rgba(252, 252, 252,0.04) 0%, rgba(252, 252, 252,0.04) 50%,rgba(130, 130, 130,0.04) 50%, rgba(130, 130, 130,0.04) 100%),radial-gradient(circle at 72% 91%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 50%,rgba(48, 48, 48,0.04) 50%, rgba(48, 48, 48,0.04) 100%),radial-gradient(circle at 27% 3%, rgba(48, 48, 48,0.04) 0%, rgba(48, 48, 48,0.04) 50%,rgba(163, 163, 163,0.04) 50%, rgba(163, 163, 163,0.04) 100%),linear-gradient(90deg, rgb(200,0,170),rgb(128,0,128));
}

/* Eliminate native browser calendar icon conflict */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   Small-Screen Typography & Readability Architecture Standard (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --text-2xs: 0.8125rem; /* 13px baseline */
    --text-xs: 0.875rem;    /* 14px baseline */
  }

  /* Micro-text utility scaling - enforce minimum 13px on mobile */
  .text-\[9px\],
  .text-\[10px\],
  .text-\[11px\],
  .text-2xs {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.35 !important;
  }

  .text-xs {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.4 !important;
  }

  /* Strengthen washed-out text on mobile displays */
  .text-gray-400,
  .text-slate-400 {
    color: #4b5563 !important; /* Tailwind gray-600 */
  }

  .text-gray-500,
  .text-slate-500 {
    color: #374151 !important; /* Tailwind gray-700 */
  }

  /* Ensure card subtext and helper hints have solid contrast */
  .text-gray-400.uppercase,
  .text-slate-400.uppercase,
  .text-gray-500.uppercase,
  .text-slate-500.uppercase {
    color: #374151 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
  }

  /* Form inputs & helpers mobile baseline */
  input,
  select,
  textarea {
    font-size: 0.9375rem !important; /* 15px to prevent auto-zoom */
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
  }
}

/* ==========================================================================
   Modern Premium Card Micro-Enhancements
   ========================================================================== */
.bg-white.rounded-lg,
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
[data-ksm-item] {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.bg-white.rounded-lg:hover,
.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover,
[data-ksm-item]:hover {
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
  border-color: rgba(147, 51, 234, 0.2);
}

/* ==========================================================================
   Clickable Micro-UX Pointer Clues
   ========================================================================== */
button,
summary,
[role="button"],
[onclick],
.btn,
.btn-primary,
.btn-secondary,
.accordion-header,
.accordion-toggle,
.ksm-role-card,
.ksm-badge-pill {
  cursor: pointer !important;
}

/* ==========================================================================
   GSAP 3D Mobile Card Stacking & Snap Track Architecture
   ========================================================================== */
.ksm-card-track,
.ksm-students-kpi-track,
.ksm-guardians-kpi-track,
.ksm-pop-kpi-track,
.ksm-report-meta-grid,
.ksm-compliance-kpi-track,
.ksm-analytics-kpi-track,
.ksm-risk-kpi-track,
.ksm-capacity-kpi-track,
[data-ksm-track] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 14px;
  padding: 6px 4px 14px 4px;
  margin-left: -4px;
  margin-right: -4px;
  perspective: 1000px;
}

.ksm-card-track::-webkit-scrollbar,
.ksm-students-kpi-track::-webkit-scrollbar,
.ksm-guardians-kpi-track::-webkit-scrollbar,
.ksm-pop-kpi-track::-webkit-scrollbar,
.ksm-report-meta-grid::-webkit-scrollbar,
.ksm-compliance-kpi-track::-webkit-scrollbar,
.ksm-analytics-kpi-track::-webkit-scrollbar,
.ksm-risk-kpi-track::-webkit-scrollbar,
.ksm-capacity-kpi-track::-webkit-scrollbar,
[data-ksm-track]::-webkit-scrollbar {
  display: none;
}

.ksm-card-track > *,
.ksm-students-kpi-card,
.ksm-guardians-kpi-card,
.ksm-pop-kpi-card,
.ksm-report-meta-card,
.ksm-compliance-kpi-card,
.ksm-analytics-kpi-card,
.ksm-risk-kpi-card,
.ksm-capacity-kpi-card,
[data-ksm-track] > * {
  flex: 0 0 86% !important;
  max-width: 86% !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, box-shadow 0.35s ease;
  will-change: transform, opacity;
}

.ksm-card-track-nav,
.ksm-students-kpi-nav,
.ksm-guardians-kpi-nav,
.ksm-pop-kpi-nav,
.ksm-report-meta-nav,
.ksm-compliance-kpi-nav,
.ksm-analytics-kpi-nav,
.ksm-risk-kpi-nav,
.ksm-capacity-kpi-nav,
[data-ksm-track-nav] {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .ksm-card-track-nav,
  .ksm-students-kpi-nav,
  .ksm-guardians-kpi-nav,
  .ksm-pop-kpi-nav,
  .ksm-report-meta-nav,
  .ksm-compliance-kpi-nav,
  .ksm-analytics-kpi-nav,
  .ksm-risk-kpi-nav,
  .ksm-capacity-kpi-nav,
  [data-ksm-track-nav] {
    display: none !important;
  }

  .ksm-card-track,
  .ksm-students-kpi-track,
  .ksm-guardians-kpi-track,
  .ksm-pop-kpi-track,
  .ksm-report-meta-grid,
  .ksm-compliance-kpi-track,
  .ksm-analytics-kpi-track,
  .ksm-risk-kpi-track,
  .ksm-capacity-kpi-track,
  [data-ksm-track] {
    display: grid !important;
    overflow: visible !important;
    gap: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .ksm-card-track > *,
  .ksm-students-kpi-card,
  .ksm-guardians-kpi-card,
  .ksm-pop-kpi-card,
  .ksm-report-meta-card,
  .ksm-compliance-kpi-card,
  .ksm-analytics-kpi-card,
  .ksm-risk-kpi-card,
  .ksm-capacity-kpi-card,
  [data-ksm-track] > * {
    flex: unset !important;
    max-width: unset !important;
    scroll-snap-align: unset !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Slide-Over Drawer & Off-Canvas Utilities
   Ensures drawers (Help Drawer, Mobile Navigation Drawers) hide off-screen
   by default and slide in/out smoothly without depending on Tailwind purge.
   ========================================================================== */
.translate-x-full {
  transform: translateX(100%) !important;
}
.-translate-x-full {
  transform: translateX(-100%) !important;
}
.translate-x-0 {
  transform: translateX(0) !important;
}
/* ── Help Drawer & Off-Canvas Drawers ───────────────────────────────── */
:root {
  --ksm-help-top: 0px;
}
body.admin-bar {
  --ksm-help-top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --ksm-help-top: 46px;
  }
}

#ksm-help-overlay {
  position: fixed;
  top: var(--ksm-help-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99980;
}

#ksm-help-drawer {
  position: fixed;
  top: var(--ksm-help-top, 0px);
  right: 0;
  bottom: 0;
  height: calc(100vh - var(--ksm-help-top, 0px));
  max-height: calc(100vh - var(--ksm-help-top, 0px));
  z-index: 99990;
}

/* In-App Help Drawer (Slides from the right) */
#ksm-help-drawer {
  right: 0 !important;
  left: auto !important;
  z-index: 999999 !important;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#ksm-help-drawer.translate-x-full {
  transform: translateX(100%) !important;
}

#ksm-help-drawer:not(.translate-x-full) {
  transform: translateX(0) !important;
}

/* Mobile Navigation Drawers (Flip / slide in from the LEFT) */
#ksm-mobile-ws-drawer,
#dashboard-sidebar-mobile {
  left: 0 !important;
  right: auto !important;
  width: 340px !important;
  max-width: 88vw !important;
  z-index: 999999 !important;
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

#ksm-mobile-ws-overlay,
#sidebar-overlay {
  z-index: 999998 !important;
}

.ksm-edition-strip,
footer,
[data-ksm-animate="footer"] {
  position: relative;
  z-index: 1 !important;
}

#ksm-mobile-ws-drawer.-translate-x-full,
#dashboard-sidebar-mobile.-translate-x-full {
  transform: translateX(-100%) !important;
}

#ksm-mobile-ws-drawer:not(.-translate-x-full),
#dashboard-sidebar-mobile:not(.-translate-x-full) {
  transform: translateX(0) !important;
}

/* Mobile Navigation Drawers: Menu item left spacing & padding */
#ksm-mobile-ws-drawer nav,
#dashboard-sidebar-mobile nav,
#dashboard-sidebar-mobile .flex-1,
#ksm-mobile-ws-drawer .flex-1 {
  padding: 16px 12px !important;
}

/* Only root UL gets margin/padding reset so submenus are not flattened */
#ksm-mobile-ws-drawer nav > ul,
#dashboard-sidebar-mobile nav > ul,
#ksm-mobile-ws-drawer .flex-1 > ul,
#dashboard-sidebar-mobile .flex-1 > ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* Only top-level items get the top-level button padding */
#ksm-mobile-ws-drawer nav > ul > li > div > button,
#ksm-mobile-ws-drawer nav > ul > li > a,
#dashboard-sidebar-mobile nav > ul > li > div > button,
#dashboard-sidebar-mobile nav > ul > li > a,
#ksm-mobile-ws-drawer .flex-1 > ul > li > div > button,
#ksm-mobile-ws-drawer .flex-1 > ul > li > a,
#dashboard-sidebar-mobile .flex-1 > ul > li > div > button,
#dashboard-sidebar-mobile .flex-1 > ul > li > a {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Submenu indentation: Aligns bullet dot with parent text label (matching KSM V3) */
#ksm-mobile-ws-drawer .submenu,
#dashboard-sidebar-mobile .submenu,
#ksm-workspace-sidebar .submenu,
nav .submenu {
  margin-left: 2rem !important; /* 32px indent from parent icon */
  padding-left: 0 !important;
  list-style: none !important;
}

#ksm-mobile-ws-drawer .submenu .submenu,
#dashboard-sidebar-mobile .submenu .submenu,
#ksm-workspace-sidebar .submenu .submenu,
nav .submenu .submenu {
  margin-left: 1.25rem !important; /* Level 3 nested indentation */
}

#ksm-mobile-ws-drawer .submenu li a,
#dashboard-sidebar-mobile .submenu li a,
#ksm-workspace-sidebar .submenu li a,
nav .submenu li a {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 0.875rem !important; /* text-sm */
}

/* ── Help Drawer Header & Controls ──────────────────────────────────── */
.ksm-help-header {
  background: linear-gradient(135deg, #581c87 0%, #311042 100%) !important;
  color: #ffffff !important;
}
.ksm-help-icon-box {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.ksm-help-close-btn {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.ksm-help-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

/* ── Responsive Display & Width Utilities ─────────────────────────────── */
@media (max-width: 639px) {
  .ksm-workspace-header-title {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .sm\:w-auto {
    width: auto !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  .md\:w-auto {
    width: auto !important;
  }
}
@media (min-width: 1024px) {
  .lg\:w-auto {
    width: auto !important;
  }
  /* Platform Admin Dashboard Sidebar Width (Reduced by 10% to 265px after unwrapping menu items) */
  .ksm-admin-sidebar,
  .lg\:w-\[265px\] {
    width: 265px !important;
    min-width: 265px !important;
  }
  .ksm-admin-sidebar nav {
    width: 100% !important;
  }
  .ksm-admin-sidebar nav a,
  .ksm-admin-sidebar nav button {
    white-space: nowrap !important;
  }
  .ksm-admin-sidebar nav a span,
  .ksm-admin-sidebar nav button span {
    white-space: nowrap !important;
  }
  /* Dynamic Institutional Roles Workspace Sidebar Width (Net 3% reduction: 240px -> 233px on lg) */
  #ksm-workspace-sidebar,
  .ksm-workspace-sidebar,
  .ksm-role-sidebar,
  .lg\:w-\[233px\] {
    width: 233px !important;
    min-width: 233px !important;
  }
}
@media (min-width: 1280px) {
  /* Dynamic Institutional Roles Workspace Sidebar Width (Net 3% reduction: 256px -> 248px on xl) */
  #ksm-workspace-sidebar,
  .ksm-workspace-sidebar,
  .ksm-role-sidebar,
  .xl\:w-\[248px\] {
    width: 248px !important;
    min-width: 248px !important;
  }
}

/* Homepage Living Hero — Edition Badge Centering */
.ksm-edition-badge {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: -webkit-max-content !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
}

/* Homepage Living Hero — Mobile Spacing Adjustment (halve vertical space between badge & school name) */
@media (max-width: 767.98px) {
  .ksm-hero-content-wrapper {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  .ksm-hero-content-inner {
    margin-top: -4.75rem !important;
  }
}

/* ── Workspace Header: Padding & Icon Spacing ───────────────────────── */
.ksm-workspace-header {
  padding: 0.875rem 1.5rem !important;
}
@media (max-width: 639px) {
  .ksm-workspace-header {
    padding: 0.75rem 1rem !important;
  }
}
.ksm-workspace-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
}
.ksm-workspace-header-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.75rem !important;
  flex-shrink: 0 !important;
}
.ksm-workspace-header-icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: block !important;
}