/* =========================================================================
   Utilitas custom untuk komponen absensi (stat cards, badge, matriks, kalender).
   Styling komponen Filament sendiri ditangani oleh tema asli
   (resources/css/filament/admin/theme.css) — file ini hanya tambahan.
   ========================================================================= */

:root {
    /* Warna status kehadiran */
    --st-hadir: #2fb380;
    --st-telat: #dc3545;
    --st-pulang-cepat: #f59e0b;
    --st-alpa: #9ca3af;
    --st-libur: #7c8aa5;
}

/* --- Stat cards custom (Rekap Bulanan & dashboard) --- */
.tailadmin-stat-card {
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 1.15rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tailadmin-stat-icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tailadmin-stat-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}
.tailadmin-stat-label {
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
}
.tailadmin-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1f2937;
}
.dark .tailadmin-stat-card {
    background: #161d2b;
    border-color: #232c3d;
}
.dark .tailadmin-stat-value { color: #e5e7eb; }

/* --- Badge status kehadiran --- */
.st-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}
.st-badge .st-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
}
.st-hadir     { color: var(--st-hadir);    background: rgba(47, 179, 128, 0.12); }
.st-telat     { color: var(--st-telat);    background: rgba(220, 53, 69, 0.12); }
.st-pulang    { color: var(--st-pulang-cepat); background: rgba(245, 158, 11, 0.14); }
.st-alpa      { color: var(--st-alpa);     background: rgba(156, 163, 175, 0.16); }
.st-libur     { color: var(--st-libur);    background: rgba(124, 138, 165, 0.16); }

/* --- Matriks Rekap Bulanan --- */
.st-matrix th, .st-matrix td {
    text-align: center;
    font-size: 0.75rem;
}
.st-matrix .st-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.375rem;
    font-weight: 600;
}
.st-matrix .st-cell.c-hadir  { background: rgba(47, 179, 128, 0.16); color: #1f8a5f; }
.st-matrix .st-cell.c-telat  { background: rgba(220, 53, 69, 0.14);  color: #c93a48; }
.st-matrix .st-cell.c-pulang { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.st-matrix .st-cell.c-alpa   { background: rgba(156, 163, 175, 0.18); color: #6b7280; }
.st-matrix .st-cell.c-libur  { background: rgba(124, 138, 165, 0.16); color: #7c8aa5; }
.st-matrix .st-cell.c-weekend { background: transparent; color: #d1d5db; }
.st-matrix .st-cell.c-null   { color: #d1d5db; }
.st-matrix .st-date {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.625rem;
    color: #6b7280;
}

/* --- Kalender detail pegawai --- */
.cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 2.9rem;
    border-radius: 0.5rem;
    border: 1px solid #e6eaf2;
    background: #ffffff;
    cursor: default;
}
.cal-cell .cal-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
}
.cal-cell .cal-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 9999px;
}
.cal-cell.c-hadir   { border-color: rgba(47, 179, 128, 0.4);  background: rgba(47, 179, 128, 0.08); }
.cal-cell.c-hadir .cal-dot   { background: var(--st-hadir); }
.cal-cell.c-telat   { border-color: rgba(220, 53, 69, 0.4);   background: rgba(220, 53, 69, 0.08); }
.cal-cell.c-telat .cal-dot   { background: var(--st-telat); }
.cal-cell.c-pulang  { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); }
.cal-cell.c-pulang .cal-dot  { background: var(--st-pulang-cepat); }
.cal-cell.c-alpa    { border-color: rgba(156, 163, 175, 0.35); background: rgba(156, 163, 175, 0.08); }
.cal-cell.c-alpa .cal-dot    { background: var(--st-alpa); }
.cal-cell.c-libur   { border-color: rgba(124, 138, 165, 0.35); background: rgba(124, 138, 165, 0.1); }
.cal-cell.c-libur .cal-dot   { background: var(--st-libur); }
.cal-cell.c-weekend { border-color: transparent; background: transparent; }
.cal-cell.c-weekend .cal-num { color: #d1d5db; }
.cal-cell.c-weekend .cal-dot { background: transparent; }
.cal-cell.c-null    { border-color: #e6eaf2; background: #ffffff; }
.cal-cell.c-null .cal-num    { color: #d1d5db; }
.cal-cell.c-null .cal-dot    { background: transparent; }
.cal-cell.cal-today {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}
.dark .cal-cell { background: #161d2b; border-color: #232c3d; }
.dark .cal-cell .cal-num { color: #e5e7eb; }
.dark .cal-cell.c-null { background: #161d2b; border-color: #232c3d; }
.dark .cal-cell.c-null .cal-num { color: #4b5563; }