/*
 * Global Tailwind CSS utilities for Filament 5 custom views
 * Filament 5 bundles Tailwind v4 but only includes classes it uses internally.
 * This file provides common utilities that work across all custom Blade views.
 */

/* Grid */
.grid {
    display: grid;
}

/* Grid columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Grid column span */
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-6 {
    grid-column: span 6 / span 6;
}
.col-span-8 {
    grid-column: span 8 / span 8;
}
.col-span-full {
    grid-column: 1 / -1;
}

/* Gap utilities */
.gap-1 {
    gap: 0.25rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}

/* Width utilities */
.w-4 {
    width: 1rem;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-8 {
    width: 2rem;
}
.w-9 {
    width: 2.25rem;
}
.w-10 {
    width: 2.5rem;
}
.w-12 {
    width: 3rem;
}
.w-16 {
    width: 4rem;
}
.w-full {
    width: 100%;
}
.w-auto {
    width: auto;
}
.w-fit {
    width: fit-content;
}
.w-max {
    width: max-content;
}

/* Height utilities */
.h-4 {
    height: 1rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-9 {
    height: 2.25rem;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-16 {
    height: 4rem;
}
.h-full {
    height: 100%;
}
.h-screen {
    height: 100vh;
}
.h-auto {
    height: auto;
}

/* Margin bottom */
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-12 {
    margin-bottom: 3rem;
}

/* Margin top */
.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mt-12 {
    margin-top: 3rem;
}

/* Margin left/right */
.ml-0 {
    margin-left: 0;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-0 {
    margin-right: 0;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mr-auto {
    margin-right: auto;
}

/* Margin horizontal/vertical */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Padding */
.p-0 {
    padding: 0;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.p-9 {
    padding: 2.25rem;
}
.px-0 {
    padding-left: 0;
    padding-right: 0;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}

/* Padding end (inline-end / logical, RTL-aware) */
.pe-0 {
    padding-inline-end: 0;
}
.pe-1 {
    padding-inline-end: 0.25rem;
}
.pe-2 {
    padding-inline-end: 0.5rem;
}
.pe-3 {
    padding-inline-end: 0.75rem;
}
.pe-4 {
    padding-inline-end: 1rem;
}
.pe-5 {
    padding-inline-end: 1.25rem;
}
.pe-6 {
    padding-inline-end: 1.5rem;
}

/* Flexbox */
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-stretch {
    align-items: stretch;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}
.justify-start {
    justify-content: flex-start;
}

/* Text */
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.font-bold {
    font-weight: 700;
}
.font-semibold {
    font-weight: 600;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* Underline */
.underline {
    text-decoration-line: underline;
}
.no-underline {
    text-decoration-line: none;
}
.underline-offset-1 {
    text-underline-offset: 0.125rem;
}
.underline-offset-2 {
    text-underline-offset: 0.25rem;
}
.underline-offset-4 {
    text-underline-offset: 0.5rem;
}
.decoration-solid {
    text-decoration-style: solid;
}
.decoration-dotted {
    text-decoration-style: dotted;
}
.decoration-dashed {
    text-decoration-style: dashed;
}

/* Text colors - use root/theme primary (Filament sets --primary-* on :root) */
.text-primary {
    color: var(--primary-600);
}
.text-primary-600 {
    color: var(--primary-600);
}
.text-primary-400 {
    color: var(--primary-400);
}
.text-danger-600 {
    color: #e11d48;
}

/* Text colors - gray (for dynamic HTML e.g. Filament table cells) */
.text-gray-400 {
    color: #9ca3af;
}
.text-gray-500 {
    color: #6b7280;
}
.text-gray-600 {
    color: #4b5563;
}
.text-orange-500 {
    color: #f97316;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
/* Dark mode gray text (for class="dark:text-gray-400" etc.) */
.dark .dark\:text-gray-400 {
    color: #9ca3af;
}
.dark .dark\:text-gray-500 {
    color: #9ca3af;
}

/* Horizontal rule */
hr {
    color: #9ca3af !important; /* gray-400 */
    border-color: #9ca3af !important; /* gray-400 */
}

/* Overflow */
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-visible {
    overflow: visible;
}

/* Word break / wrap */
.break-words {
    overflow-wrap: break-word;
    word-break: break-word;
}
.min-w-0 {
    min-width: 0;
}
.shrink-0 {
    flex-shrink: 0;
}

/* Responsive grid variants (lg: 1024px+) */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
}

/* Worker certifications page */
.squared-img {
    width: calc(50% - 0.5rem);
    padding-bottom: calc(50% - 0.5rem);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.img-placeholder {
    width: calc(50% - 0.5rem);
    height: calc(50% - 0.5rem);
}

.text-success {
    color: rgb(34, 197, 94);
}

@media (max-width: 1023px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Make Filament stat overview grid items stretch (scoped to avoid breaking nested grids) */
.fi-wi-stats-overview .grid > * {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Stat card — semantic component classes
   Using fixed class names avoids Tailwind purge issues with
   dynamic PHP-generated class names.
   ============================================================ */

/* Reset Filament's compiled bg-white / p-6 / shadow / ring on the outer tag */
.fi-wi-stats-overview-stat {
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Card shell */
.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;          /* rounded-3xl */
    background-color: #ffffff;
    padding: 1.5rem;                /* p-6 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
    height: 100%;
}
.dark .stat-card {
    background-color: #111827;      /* gray-900 */
}
.stat-card-link {
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
.stat-card-link:hover {
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.12);
    transform: translateY(-2px);
}

/* Top row */
.stat-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Value — large & bold, color varies */
.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

/* Label — gray-800, always */
.stat-label {
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;                 /* gray-800 */
}
.dark .stat-label { color: #f9fafb; }

/* Description — gray-500, always */
.stat-desc {
    margin-top: 0.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.625;
    color: #6b7280;                 /* gray-500 */
}
.dark .stat-desc { color: #9ca3af; }

/* Icon — absolutely positioned top-right, behind text content */
.stat-icon-wrap {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}
.stat-blob {
    position: absolute;
    inset: 0;
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    background-color: var(--stat-blob, #f3f4f6);
}
.stat-icon {
    position: relative;
    opacity: 0.6;
}

/* Override Filament's .fi-wi-stats-overview-stat .fi-icon { color: gray-400 } */
.stat-icon-wrap .fi-icon {
    color: var(--stat-text, #9ca3af) !important;
}

/* Text layers sit above the icon blob */
.stat-value,
.stat-label,
.stat-desc {
    position: relative;
    z-index: 1;
}

/* --- Per-color token injection (one class per variant) ---
   All component classes below read from these variables.
   Filament registers --danger-*, --warning-*, --success-*,
   --info-*, --primary-*, --gray-* on :root automatically.   */
.stat-color-danger  { --stat-bg: var(--danger-50);  --stat-bg-dark: var(--danger-950); --stat-text: var(--danger-600);  --stat-text-dark: var(--danger-400);  --stat-blob: var(--danger-100);  }
.stat-color-warning { --stat-bg: var(--warning-50); --stat-bg-dark: var(--warning-950);--stat-text: var(--warning-600); --stat-text-dark: var(--warning-400); --stat-blob: var(--warning-100); }
.stat-color-success { --stat-bg: var(--success-50); --stat-bg-dark: var(--success-950);--stat-text: var(--success-600); --stat-text-dark: var(--success-400); --stat-blob: var(--success-100); }
.stat-color-info    { --stat-bg: var(--info-50);    --stat-bg-dark: var(--info-950);   --stat-text: var(--info-600);    --stat-text-dark: var(--info-400);    --stat-blob: var(--info-100);    }
.stat-color-primary { --stat-bg: var(--primary-50); --stat-bg-dark: var(--primary-950);--stat-text: var(--primary-600); --stat-text-dark: var(--primary-400); --stat-blob: var(--primary-100); }
.stat-color-gray    { --stat-bg: var(--gray-50);    --stat-bg-dark: var(--gray-800);   --stat-text: var(--gray-700);    --stat-text-dark: var(--gray-300);    --stat-blob: var(--gray-200);    }

/* Apply variables to card, value, icon, blob */
.stat-card    { background-color: var(--stat-bg, #ffffff); }
.dark .stat-card { background-color: var(--stat-bg-dark, #111827); }

.stat-value   { color: var(--stat-text, #374151); }
.dark .stat-value { color: var(--stat-text-dark, #d1d5db); }

.dark .stat-icon-wrap .fi-icon { color: var(--stat-text-dark, #9ca3af) !important; }

.stat-blob    { background-color: var(--stat-blob, #f3f4f6); }

/* ============================================================
   Dashboard component utilities
   ============================================================ */

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }

/* Flex */
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }

/* Border radius */
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

/* Border */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-dashed { border-style: dashed; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

/* Background */
.bg-white { background-color: #ffffff; }
.bg-slate-50 { background-color: #f8fafc; }

/* Text sizes */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }

/* Font weight */
.font-extrabold { font-weight: 800; }

/* Text colors */
.text-white { color: #ffffff; }
.text-slate-900 { color: #0f172a; }
.text-slate-500 { color: #64748b; }
.text-slate-400 { color: #94a3b8; }
.text-slate-300 { color: #cbd5e1; }

/* Letter spacing */
.tracking-tight { letter-spacing: -0.025em; }

/* Text overflow */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* Overflow */
.overflow-y-auto { overflow-y: auto; }

/* Animation — dashboard pulse */
@keyframes dash-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-dash-pulse { animation: dash-pulse 2s infinite; }

/* Auto-fill grid for access log */
.grid-cols-auto-fill-280 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Dashboard card base */
.dash-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
    border: 1px solid #f1f5f9;
}
.dark .dash-card {
    background: #1e293b;
    border-color: #334155;
}

/* Dashboard hero gradient */
.dash-hero {
    background: linear-gradient(to bottom right, #1a3a6e, #0d1f42, #070e1f);
    border-radius: 1rem;
    padding: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Dashboard progress bar track */
.dash-bar-track {
    height: 0.375rem;
    background: #f1f5f9;
    border-radius: 9999px;
    flex: 1;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    border-radius: 9999px;
}

/* Dashboard badge */
.dash-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* Dashboard decorative circle */
.dash-circle {
    position: absolute;
    border-radius: 50%;
}

/* Dashboard pulse dot */
.dash-pulse-dot {
    width: 0.625rem;
    height: 0.625rem;
    background: #34d399;
    border-radius: 50%;
    display: inline-block;
    animation: dash-pulse 2s infinite;
}

/* Dashboard status dot (small) */
.dash-status-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}