/* ============================================================
   LibraryManagement Design System — Global Styles
   ============================================================ */

/* ── Flatpickr base styles ────────────────────────────── */
@import url("https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css");

/* ── PHFR theme for daisyUI "light" ──────────────────────── */
html[data-theme="light"] {
  --color-base-100: oklch(95.80% 0.0093 242.84);
  --color-base-200: oklch(96.12% 0 0);
  --color-base-300: oklch(90.06% 0 0);
  --color-base-content: oklch(42.79% 0.1118 266.01);
  --color-primary: oklch(42.79% 0.1118 266.01);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(74.75% 0.1613 125.01);
  --color-secondary-content: oklch(20% 0 0);
  --color-accent: oklch(74.52% 0.1681 56.52);
  --color-accent-content: oklch(20% 0 0);
  --color-neutral: oklch(50.32% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(82.47% 0.0379 250.80);
  --color-info-content: oklch(42.79% 0.1118 266.01);
  --color-success: oklch(74.75% 0.1613 125.01);
  --color-success-content: oklch(20% 0 0);
  --color-warning: oklch(87.08% 0.1813 100.44);
  --color-warning-content: oklch(42.79% 0.1118 266.01);
  --color-error: oklch(57% 0.245 27.325);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 1rem;
  --radius-field: 2rem;
  --radius-box: 2rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;
}

/* ── PHFR theme for daisyUI "dark" ───────────────────────── */
html[data-theme="dark"] {
  --color-base-100: oklch(22.34% 0.0346 269.35);
  --color-base-200: oklch(18.96% 0.0278 270.60);
  --color-base-300: oklch(15.65% 0.0221 271.51);
  --color-base-content: oklch(95.80% 0.0093 242.84);
  --color-primary: oklch(82.47% 0.0379 250.80);
  --color-primary-content: oklch(22.34% 0.0346 269.35);
  --color-secondary: oklch(74.75% 0.1613 125.01);
  --color-secondary-content: oklch(15.65% 0.0221 271.51);
  --color-accent: oklch(74.52% 0.1681 56.52);
  --color-accent-content: oklch(15.65% 0.0221 271.51);
  --color-neutral: oklch(90.06% 0 0);
  --color-neutral-content: oklch(15.65% 0.0221 271.51);
  --color-info: oklch(82.47% 0.0379 250.80);
  --color-info-content: oklch(22.34% 0.0346 269.35);
  --color-success: oklch(74.75% 0.1613 125.01);
  --color-success-content: oklch(15.65% 0.0221 271.51);
  --color-warning: oklch(87.08% 0.1813 100.44);
  --color-warning-content: oklch(15.65% 0.0221 271.51);
  --color-error: oklch(70% 0.19 25);
  --color-error-content: oklch(15.65% 0.0221 271.51);
  --radius-selector: 1rem;
  --radius-field: 2rem;
  --radius-box: 2rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;
}

/* ── Card border ──────────────────────────────────────────── */
.card {
  border: 1px solid var(--color-base-300);
}

/* ── Module card hover: pop-out + outline ────────────────── */
a.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: -1px;
}

/* ── Skip-to-content link ─────────────────────────────────── */
.lm-skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 1000;
    padding: 8px 16px;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.lm-skip-link:focus {
    top: 0;
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ── Icon sizing ──────────────────────────────────────────── */
.lm-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

/* Tailwind 4 resets SVGs to block -- override for inline contexts */
svg.lm-icon,
a svg,
button svg,
.btn svg {
    display: inline-block;
}

/* ── Animation Keyframes ──────────────────────────────────── */
@keyframes lm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lm-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lm-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
@keyframes lm-spin {
    to { transform: rotate(360deg); }
}

/* ── Animation Utility Classes ─────────────────────────────── */
.lm-fade-in      { animation: lm-fade-in 0.3s ease-out both; }
.lm-slide-up     { animation: lm-slide-up 0.35s ease-out both; }
.lm-shake        { animation: lm-shake 0.4s ease-out both; }
.lm-stagger-1    { animation-delay: 0.05s; }
.lm-stagger-2    { animation-delay: 0.1s; }
.lm-stagger-3    { animation-delay: 0.15s; }

/* ── Loading Spinner ───────────────────────────────────────── */
.lm-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lm-spin 0.6s linear infinite;
    vertical-align: middle;
}
.lm-loading-spinner--dark {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--color-primary);
}
.lm-loading-spinner--sm {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

/* ── Table Container ──────────────────────────────────────── */
.lm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lm-table-wrap table {
    width: 100%;
    min-width: max-content;
}

/* ── prefers-reduced-motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .lm-loading-spinner { animation: none !important; }
}