/* ============================================================
   WORKFORCE ERP — LIGHT SAAS THEME
   Modern SaaS dashboard overrides for Filament v3
   ============================================================ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    --saas-bg:             #f1f5f9;
    --saas-surface:        #ffffff;
    --saas-surface-hover:  #f8fafc;
    --saas-border:         #e2e8f0;
    --saas-border-light:   #f1f5f9;
    --saas-shadow-xs:      0 1px 2px rgba(0,0,0,.04);
    --saas-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --saas-shadow-md:      0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
    --saas-shadow-lg:      0 10px 30px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
    --saas-radius-sm:      6px;
    --saas-radius:         10px;
    --saas-radius-md:      12px;
    --saas-radius-lg:      16px;
    --saas-primary:        #6366f1;
    --saas-primary-50:     #eef2ff;
    --saas-primary-100:    #e0e7ff;
    --saas-text:           #0f172a;
    --saas-text-secondary: #475569;
    --saas-text-muted:     #94a3b8;

    /* Legacy dark tokens (kept for attendance page inline CSS compatibility) */
    --erp-bg-card-primary:    rgba(15,23,42,.65);
    --erp-bg-card-secondary:  rgba(15,23,42,.5);
    --erp-bg-input:           rgba(15,23,42,.6);
    --erp-bg-input-focus:     rgba(15,23,42,.9);
    --erp-bg-input-dark:      rgba(15,23,42,.8);
    --erp-bg-row:             rgba(255,255,255,.03);
    --erp-bg-row-hover:       rgba(255,255,255,.06);
    --erp-bg-subtle:          rgba(255,255,255,.04);
    --erp-border-default:     rgba(255,255,255,.08);
    --erp-border-soft:        rgba(255,255,255,.07);
    --erp-border-hover:       rgba(255,255,255,.13);
    --erp-border-input:       rgba(255,255,255,.09);
    --erp-border-input-dark:  rgba(255,255,255,.10);
    --erp-border-divider:     rgba(255,255,255,.06);
    --erp-accent:             #6366f1;
    --erp-accent-light:       #818cf8;
    --erp-accent-bg:          rgba(99,102,241,.15);
    --erp-accent-border:      rgba(99,102,241,.25);
    --erp-accent-focus-ring:  rgba(99,102,241,.18);
    --erp-accent-focus-border:rgba(99,102,241,.70);
    --erp-text-primary:       #f1f5f9;
    --erp-text-bright:        #f9fafb;
    --erp-text-secondary:     #e5e7eb;
    --erp-text-muted:         #9ca3af;
    --erp-text-subtle:        #6b7280;
    --erp-text-faint:         #4b5563;
    --erp-green:              #4ade80;
    --erp-green-bg:           rgba(34,197,94,.12);
    --erp-green-border:       rgba(34,197,94,.22);
    --erp-green-glow:         rgba(74,222,128,.6);
    --erp-yellow:             #fbbf24;
    --erp-yellow-bg:          rgba(234,179,8,.12);
    --erp-yellow-border:      rgba(234,179,8,.22);
    --erp-yellow-glow:        rgba(251,191,36,.6);
    --erp-red:                #f87171;
    --erp-red-bg:             rgba(239,68,68,.12);
    --erp-red-border:         rgba(239,68,68,.22);
    --erp-red-glow:           rgba(248,113,113,.6);
    --erp-lime:               #a3e635;
    --erp-radius-sm:          8px;
    --erp-radius-md:          10px;
    --erp-radius-lg:          14px;
    --erp-radius-xl:          16px;
    --erp-radius-icon:        10px;
    --erp-radius-badge:       999px;
    --erp-radius-avatar:      50%;
    --erp-shadow-toast:       0 8px 30px rgba(0,0,0,.4);
    --erp-shadow-btn-primary: 0 4px 14px rgba(99,102,241,.35);
    --erp-shadow-btn-success: 0 4px 14px rgba(34,197,94,.3);
    --erp-text-xs:            .68rem;
    --erp-text-sm:            .75rem;
    --erp-text-base:          .875rem;
    --erp-text-md:            .9rem;
}


/* ============================================================
   GLOBAL PAGE SHELL
   ============================================================ */

html, body {
    background-color: var(--saas-bg) !important;
}

/* Main content area background */
.fi-main-ctn,
.fi-main {
    background-color: var(--saas-bg) !important;
}

/* Page content wrapper */
.fi-simple-main,
.fi-page {
    background-color: var(--saas-bg) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.fi-sidebar {
    background-color: var(--saas-surface) !important;
    border-right: 1px solid var(--saas-border) !important;
    box-shadow: 1px 0 0 0 var(--saas-border-light) !important;
}

.fi-sidebar-header {
    background-color: var(--saas-surface) !important;
    border-bottom: 1px solid var(--saas-border-light) !important;
    padding: 20px 16px !important;
}

/* Sidebar nav group labels */
.fi-sidebar-group-label {
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--saas-text-secondary) !important;
    padding: 0 12px !important;
    margin-top: 28px !important;
    margin-bottom: 6px !important;
}

/* Nav item buttons */
.fi-sidebar-item-button {
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    color: var(--saas-text-secondary) !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    transition: background .12s, color .12s !important;
}

.fi-sidebar-item-button:hover {
    background-color: var(--saas-bg) !important;
    color: var(--saas-text) !important;
}

/* Active nav item */
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current] {
    background-color: var(--saas-primary-100) !important;
    color: var(--saas-primary) !important;
}

.fi-sidebar-item-active-indicator {
    display: none !important;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.fi-topbar {
    background-color: var(--saas-surface) !important;
    border-bottom: 1px solid var(--saas-border) !important;
    box-shadow: none !important;
}

.fi-topbar-ctn {
    background-color: var(--saas-surface) !important;
}


/* ============================================================
   PAGE HEADING
   ============================================================ */

.fi-header {
    padding-bottom: 0 !important;
}

.fi-page-heading, .fi-header-heading {
    color: var(--saas-text) !important;
    font-weight: 700 !important;
}

.fi-breadcrumbs {
    display: none !important;
}


/* ============================================================
   FILAMENT TABLES  — Card container + rows
   ============================================================ */

/* Outer container card */
.fi-ta-ctn {
    background: var(--saas-surface) !important;
    border-radius: var(--saas-radius-md) !important;
    border: 1px solid var(--saas-border) !important;
    box-shadow: var(--saas-shadow-md) !important;
    overflow: hidden !important;
}

/* Toolbar (search + filter row) */
.fi-ta-header-toolbar {
    background: var(--saas-surface) !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--saas-border-light) !important;
}

/* Search input */
.fi-ta-search input,
.fi-ta-search .fi-input {
    background: var(--saas-bg) !important;
    border-color: var(--saas-border) !important;
    border-radius: 8px !important;
    color: var(--saas-text) !important;
    box-shadow: none !important;
    font-size: .875rem !important;
}
.fi-ta-search input:focus,
.fi-ta-search .fi-input:focus {
    border-color: var(--saas-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
}

/* Table header cells (column labels) */
.fi-ta-header-cell {
    background: var(--saas-surface) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--saas-border-light) !important;
}

.fi-ta-col-header-extra,
.fi-ta-header-cell > span,
.fi-ta-header-cell button span {
    color: var(--saas-text-muted) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

/* ── Standard (non-grid) table rows ────────────────────────── */
.fi-ta-row {
    border-bottom: 1px solid var(--saas-border-light) !important;
    background: var(--saas-surface) !important;
    transition: background .1s !important;
}
.fi-ta-row:hover {
    background: var(--saas-surface-hover) !important;
}
.fi-ta-row:last-child {
    border-bottom: none !important;
}

/* ── Cells ──────────────────────────────────────────────────── */
.fi-ta-cell {
    padding: 8px 16px !important;
    color: var(--saas-text) !important;
    font-size: .875rem !important;
}

/* ── Pagination footer ──────────────────────────────────────── */
.fi-ta-footer {
    background: var(--saas-surface) !important;
    border-top: 1px solid var(--saas-border-light) !important;
    padding: 12px 18px !important;
}

/* Empty state */
.fi-ta-empty-state {
    padding: 48px 24px !important;
    background: var(--saas-surface) !important;
}
.fi-ta-empty-state-heading {
    color: var(--saas-text-secondary) !important;
    font-weight: 600 !important;
}
.fi-ta-empty-state-description {
    color: var(--saas-text-muted) !important;
}


/* Filters dropdown */
.fi-ta-filters,
.fi-dropdown-panel {
    background: var(--saas-surface) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: var(--saas-radius-md) !important;
    box-shadow: var(--saas-shadow-lg) !important;
}


/* ============================================================
   BADGES
   ============================================================ */

.fi-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: .7rem !important;
    padding: 3px 10px !important;
    border: 1px solid transparent !important;
    letter-spacing: .02em !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.fi-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    transition: opacity .15s, transform .12s, box-shadow .15s !important;
}
.fi-btn:hover {
    opacity: .9 !important;
    transform: translateY(-1px) !important;
}
.fi-btn:active {
    transform: translateY(0) !important;
}


/* ============================================================
   FORMS — Sections, inputs, labels
   ============================================================ */

.fi-fo-section,
.fi-section {
    background: var(--saas-surface) !important;
    border-radius: var(--saas-radius-md) !important;
    border: 1px solid var(--saas-border) !important;
    box-shadow: var(--saas-shadow-sm) !important;
}

.fi-fo-section-header,
.fi-section-header {
    border-bottom: 1px solid var(--saas-border-light) !important;
    padding: 16px 20px !important;
}

.fi-fo-section-content,
.fi-section-content {
    padding: 20px !important;
}

/* Form inputs */
.fi-input,
.fi-select-input,
.fi-textarea,
input[data-filament-input],
.fi-fo-field-wrp input,
.fi-fo-field-wrp select,
.fi-fo-field-wrp textarea {
    background: var(--saas-bg) !important;
    border-color: var(--saas-border) !important;
    border-radius: 8px !important;
    color: var(--saas-text) !important;
    box-shadow: none !important;
}
.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus,
.fi-fo-field-wrp input:focus,
.fi-fo-field-wrp select:focus,
.fi-fo-field-wrp textarea:focus {
    border-color: var(--saas-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
    background: var(--saas-surface) !important;
}

/* Field labels */
.fi-fo-field-wrp > label,
.fi-fo-field-wrp-label {
    color: var(--saas-text-secondary) !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
    margin-bottom: 6px !important;
}

/* Field hint text */
.fi-fo-field-wrp-hint {
    color: var(--saas-text-muted) !important;
    font-size: .75rem !important;
}


/* ============================================================
   MODALS & SLIDE-OVERS
   ============================================================ */

/* ── General modal window aesthetics ─────────────────────────── */
.fi-modal-window {
    background: var(--saas-surface) !important;
    border-radius: var(--saas-radius-lg) !important;
    box-shadow: var(--saas-shadow-lg) !important;
    border: 1px solid var(--saas-border) !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--saas-border-light) !important;
    padding: 18px 20px !important;
}

.fi-modal-heading {
    color: var(--saas-text) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.fi-modal-footer {
    border-top: 1px solid var(--saas-border-light) !important;
    background: var(--saas-bg) !important;
    padding: 14px 20px !important;
}

/* ── Full-screen modal scroll fix ────────────────────────────────
   Scope: .fi-width-screen is added to the outer fi-modal div
   ONLY when modalWidth('screen') is used.

   The window already has: position:fixed; inset:0; height:100dvh;
   display:flex; flex-direction:column  (from Tailwind h-[100dvh]
   fixed inset-0 flex flex-col).

   Filament adds flex-1 to fi-modal-content for screen width but
   omits overflow-y:auto — we add it here, scoped to screen only.
   ──────────────────────────────────────────────────────────────── */

/* 1. Clip the window so flex children cannot grow past 100dvh */
.fi-width-screen .fi-modal-window {
    overflow: hidden !important;
    border-radius: 0 !important;  /* full-screen → no rounded corners */
    border: none !important;
}

/* 2. Header must not shrink — stays pinned at top */
.fi-width-screen .fi-modal-header {
    flex-shrink: 0 !important;
}

/* 3. Footer must not shrink — stays pinned at bottom */
.fi-width-screen .fi-modal-footer {
    flex-shrink: 0 !important;
}

/* 4. Content area fills remaining height and scrolls vertically.
      min-height:0 overrides the default min-height:auto on flex
      items, which would otherwise prevent the element from
      shrinking below its content height. */
.fi-width-screen .fi-modal-content {
    flex: 1 1 0% !important;      /* fill available space, can shrink */
    min-height: 0 !important;      /* allow shrinking below content height */
    overflow-y: auto !important;   /* show scrollbar when content overflows */
    -webkit-overflow-scrolling: touch !important; /* iOS momentum scroll */
}

/* ── Meals toggle buttons (Alpine.js, no Livewire re-renders) ─ */

.meal-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    transition: background .12s, border-color .12s, color .12s;
    user-select: none;
    white-space: nowrap;
}

.meal-btn--on {
    background: #eef2ff;
    border-color: #6366f1;
    color: #6366f1;
    font-weight: 600;
}

.meal-btn:not(.meal-btn--on):hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.fi-slide-over {
    background: var(--saas-surface) !important;
    box-shadow: var(--saas-shadow-lg) !important;
}

.fi-slide-over-header {
    border-bottom: 1px solid var(--saas-border-light) !important;
    background: var(--saas-surface) !important;
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.fi-dropdown-panel {
    background: var(--saas-surface) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: var(--saas-radius-md) !important;
    box-shadow: var(--saas-shadow-lg) !important;
    overflow: hidden !important;
}

.fi-dropdown-item {
    color: var(--saas-text-secondary) !important;
    font-size: .875rem !important;
    padding: 8px 14px !important;
    transition: background .1s !important;
}
.fi-dropdown-item:hover {
    background: var(--saas-bg) !important;
    color: var(--saas-text) !important;
}


/* ============================================================
   WIDGETS / DASHBOARD
   ============================================================ */

.fi-wi-stats-overview-stat {
    background: var(--saas-surface) !important;
    border-radius: var(--saas-radius-md) !important;
    border: 1px solid var(--saas-border) !important;
    box-shadow: var(--saas-shadow-sm) !important;
}


/* ============================================================
   STAFF CARD GRID
   ============================================================ */


/* Individual staff card */
.saas-staff-card {
    background: var(--saas-surface);
    border-radius: 12px;
    border: 1px solid var(--saas-border);
    box-shadow: var(--saas-shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .15s ease;
    height: 100%;
}
.saas-staff-card:hover {
    box-shadow: var(--saas-shadow-lg);
    transform: translateY(-2px);
}

/* Card header: avatar + name + role badge */
.saas-staff-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
}

/* Avatar */
.saas-staff-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.saas-staff-card__avatar--img {
    object-fit: cover;
    border: 2px solid var(--saas-border);
}
.saas-staff-card__avatar--initial {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Name + ID */
.saas-staff-card__name-group {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.saas-staff-card__name {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--saas-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saas-staff-card__empid {
    font-size: .72rem;
    color: var(--saas-text-muted);
    margin-top: 3px;
    font-weight: 500;
    font-family: ui-monospace, monospace;
}

/* Role badge */
.saas-staff-card__role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Divider */
.saas-staff-card__divider {
    height: 1px;
    background: var(--saas-border-light);
    margin: 0 18px;
}

/* Data grid inside card */
.saas-staff-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 14px 18px 18px;
}
.saas-staff-card__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.saas-staff-card__label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--saas-text-muted);
}
.saas-staff-card__value {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--saas-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saas-staff-card__value--accent {
    color: var(--saas-primary);
}
.saas-staff-card__field--full {
    grid-column: span 2;
}


/* ============================================================
   BANKS PAGE — Livewire table overrides (light theme)
   ============================================================ */

/* Override the Banks table dark styling to match light theme */
.saas-banks-table {
    background: var(--saas-surface);
    border-radius: var(--saas-radius-md);
    border: 1px solid var(--saas-border);
    box-shadow: var(--saas-shadow-md);
    overflow: hidden;
}

.saas-banks-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.saas-banks-table th {
    background: var(--saas-surface);
    color: var(--saas-text-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--saas-border-light);
    text-align: left;
}

.saas-banks-table td {
    padding: 12px 16px;
    color: var(--saas-text);
    border-bottom: 1px solid var(--saas-border-light);
    vertical-align: middle;
}

.saas-banks-table tr:last-child td {
    border-bottom: none;
}

.saas-banks-table tr:hover td {
    background: var(--saas-surface-hover);
}

/* Banks page inputs */
.saas-banks-input {
    background: var(--saas-bg) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 6px !important;
    color: var(--saas-text) !important;
    padding: 6px 10px !important;
    font-size: .875rem !important;
    max-width: 280px;
    width: 100%;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.saas-banks-input:focus {
    border-color: var(--saas-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}


/* ============================================================
   SHARED UTILITY COMPONENTS (light theme)
   ============================================================ */

/* Attendance page — keep dark tokens working */
.erp-card {
    background:    var(--erp-bg-card-primary);
    border:        1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-xl);
    padding:       20px 24px;
}
.erp-card--dark {
    background:    var(--erp-bg-card-secondary);
    border:        1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-xl);
    overflow:      hidden;
    padding:       0;
}
.erp-card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--erp-border-divider);
}
.erp-card__body   { padding: 16px 20px; }
.erp-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--erp-border-divider);
}
.erp-card__icon {
    width:36px; height:36px; border-radius: var(--erp-radius-icon);
    background: var(--erp-accent-bg); border: 1px solid var(--erp-accent-border);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.erp-card__title    { font-size:var(--erp-text-md); font-weight:600; color:var(--erp-text-primary); }
.erp-card__subtitle { font-size:var(--erp-text-sm); color:var(--erp-text-subtle); }

.erp-button {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 20px; border-radius:var(--erp-radius-md);
    font-size:var(--erp-text-base); font-weight:600; border:none; cursor:pointer;
    transition:opacity .15s, transform .12s;
}
.erp-button:hover   { opacity:.88; transform:translateY(-1px); }
.erp-button:active  { transform:translateY(0); }
.erp-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.erp-button--primary { background:linear-gradient(135deg,#6366f1,#818cf8); color:#fff; box-shadow:var(--erp-shadow-btn-primary); }
.erp-button--success { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; box-shadow:var(--erp-shadow-btn-success); }
.erp-button--danger  { background:linear-gradient(135deg,#b91c1c,#dc2626); color:#fff; }

.erp-avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.04em;
}

.erp-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 11px; border-radius:var(--erp-radius-badge);
    font-size:.7rem; font-weight:700; letter-spacing:.05em; white-space:nowrap;
}
.erp-badge::before { content:''; width:6px; height:6px; border-radius:50%; display:inline-block; }
.erp-badge--success { background:var(--erp-green-bg); color:var(--erp-green); border:1px solid var(--erp-green-border); }
.erp-badge--success::before { background:var(--erp-green); }
.erp-badge--warning { background:var(--erp-yellow-bg); color:var(--erp-yellow); border:1px solid var(--erp-yellow-border); }
.erp-badge--warning::before { background:var(--erp-yellow); }
.erp-badge--danger  { background:var(--erp-red-bg); color:var(--erp-red); border:1px solid var(--erp-red-border); }
.erp-badge--danger::before  { background:var(--erp-red); }

.erp-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--erp-bg-subtle); border:1px solid var(--erp-border-default);
    border-radius:var(--erp-radius-sm); padding:5px 12px;
    font-size:var(--erp-text-sm); color:var(--erp-text-muted);
}

.erp-numeric {
    font-variant-numeric:tabular-nums; font-weight:600;
    font-size:.9rem; color:var(--erp-lime); letter-spacing:.02em;
}

@keyframes erp-spin { to { transform: rotate(360deg); } }
.erp-spin { animation: erp-spin .7s linear infinite; }

/* ============================================================
   ULTRA-COMPACT TABLE DENSITY (global — all Filament tables)
   Filament v3 class names used (fi-* prefix)
   ============================================================ */

/* Header cells — zero outer, control via inner wrapper */
.fi-ta-header-cell {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    line-height:    1.2 !important;
}
.fi-ta-header-cell .fi-ta-col-wrp {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
}

/* Data cells — zero outer padding entirely */
.fi-ta-cell {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    line-height:    1.2 !important;
    font-size:      13px !important;
}

/* Target every inner layer where Filament applies spacing */
.fi-ta-cell .fi-ta-col-wrp,
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-badge,
.fi-ta-cell .fi-icon {
    padding-top:    1px !important;
    padding-bottom: 1px !important;
}

/* Strip any margin/padding from direct div children */
.fi-ta-cell > div {
    margin:  0 !important;
    padding: 0 !important;
}

/* Row height — fixed + min ensures actual visual reduction */
.fi-ta-row {
    height:     28px !important;
    min-height: 28px !important;
}

/* Badges — role + status */
.fi-badge {
    padding:     1px 7px !important;
    font-size:   10px !important;
    line-height: 1.2 !important;
}

/* Action icon buttons */
.fi-ta-row-actions button svg,
.fi-ta-actions button svg {
    width:  14px !important;
    height: 14px !important;
}


/* Tabulator overrides (attendance page) */
.erp-table .tabulator                  { background:transparent !important; border:none !important; font-family:inherit !important; }
.erp-table .tabulator-header           { background:transparent !important; border:none !important; margin-bottom:4px; }
.erp-table .tabulator-col              { background:transparent !important; border:none !important; padding:0 16px 10px !important; }
.erp-table .tabulator-col-title        { color:var(--erp-text-subtle) !important; font-size:var(--erp-text-xs) !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; }
.erp-table .tabulator-col-sorter       { color:var(--erp-text-faint) !important; }
.erp-table .tabulator-tableholder      { background:transparent !important; overflow:visible !important; }
.erp-table .tabulator-table            { background:transparent !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
.erp-table .tabulator-row              { background:var(--erp-bg-row) !important; border:1px solid var(--erp-border-soft) !important; border-radius:var(--erp-radius-lg) !important; transition:background .18s, border-color .18s, transform .15s !important; }
.erp-table .tabulator-row:hover        { background:var(--erp-bg-row-hover) !important; border-color:var(--erp-border-hover) !important; transform:translateY(-1px); }
.erp-table .tabulator-cell             { border:none !important; color:var(--erp-text-secondary) !important; font-size:var(--erp-text-base) !important; padding:0 16px !important; display:flex !important; align-items:center !important; }
.erp-table .tabulator-footer           { display:none !important; }
.erp-table .tabulator-placeholder      { background:transparent !important; border:none !important; }