/*
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;
  }
}