/*
 * Dashboard PTCJM — custom visual theme.
 *
 * Plain, hand-written CSS (no Tailwind build step) loaded on top of
 * Filament's own pre-compiled stylesheet. This environment has no Node.js,
 * so we can't run a Tailwind/Vite build — instead we override the small set
 * of CSS custom properties and component classes Filament already exposes.
 */

/* ---------------------------------------------------------------------- */
/* 1. Softer, more rounded design tokens (cascades into every component)  */
/* ---------------------------------------------------------------------- */
:root {
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
}

/* ---------------------------------------------------------------------- */
/* 2. Page background — subtle tint instead of flat gray, less "stiff"    */
/* ---------------------------------------------------------------------- */
.fi-body {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.045) 0%, rgba(16, 185, 129, 0) 320px);
}

.dark .fi-body {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.07) 0%, rgba(9, 9, 11, 0) 320px);
}

/* ---------------------------------------------------------------------- */
/* 3. Cards / sections — soft shadow + gentle hover lift                  */
/* ---------------------------------------------------------------------- */
.fi-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-wi-stats-overview-stat {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px -4px rgba(16, 24, 40, 0.08) !important;
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 24px -4px rgba(16, 185, 129, 0.16) !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------- */
/* 4. Buttons — softer shadow, subtle press feedback                     */
/* ---------------------------------------------------------------------- */
.fi-btn:not(.fi-btn-color-gray) {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px -2px rgba(16, 185, 129, 0.28);
    transition: box-shadow 150ms ease, transform 100ms ease;
}

.fi-btn:not(.fi-btn-color-gray):active {
    transform: translateY(0.5px) scale(0.98);
}

/* ---------------------------------------------------------------------- */
/* 5. Inputs — softer border + focus glow                                */
/* ---------------------------------------------------------------------- */
.fi-input-wrp {
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* ---------------------------------------------------------------------- */
/* 6. Sidebar — rounded nav items with a colored active accent           */
/* ---------------------------------------------------------------------- */
.fi-sidebar-item-btn {
    border-radius: var(--radius-lg);
    transition: background-color 150ms ease, padding-left 150ms ease;
}

.fi-sidebar-item-btn:hover {
    padding-left: 0.625rem;
}

.fi-sidebar-item-active > .fi-sidebar-item-btn {
    position: relative;
    font-weight: 600;
}

.fi-sidebar-item-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 15%;
    height: 70%;
    width: 3px;
    border-radius: 999px;
    background: rgb(16, 185, 129);
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

/* ---------------------------------------------------------------------- */
/* 7. Topbar — soft shadow separating it from page content                */
/* ---------------------------------------------------------------------- */
.fi-topbar > nav {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ---------------------------------------------------------------------- */
/* 8. Tables — gentle row hover                                          */
/* ---------------------------------------------------------------------- */
.fi-ta-row {
    transition: background-color 100ms ease;
}

/* ---------------------------------------------------------------------- */
/* 9. Login page — full redesign with gradient backdrop + floating card  */
/* ---------------------------------------------------------------------- */
.fi-simple-layout {
    position: relative;
    min-height: 100dvh;
    background:
        radial-gradient(1200px circle at 15% -10%, rgba(16, 185, 129, 0.20), transparent 55%),
        radial-gradient(900px circle at 100% 10%, rgba(5, 150, 105, 0.16), transparent 50%),
        linear-gradient(160deg, #ecfdf5 0%, #f8fafc 45%, #ecfeff 100%);
}

.dark .fi-simple-layout {
    background:
        radial-gradient(1200px circle at 15% -10%, rgba(16, 185, 129, 0.14), transparent 55%),
        radial-gradient(900px circle at 100% 10%, rgba(5, 150, 105, 0.12), transparent 50%),
        linear-gradient(160deg, #052e2b 0%, #09090b 55%, #042f2e 100%);
}

.fi-simple-main-ctn {
    animation: fi-simple-fade-in 400ms ease both;
}

.fi-simple-main {
    border-radius: 1.5rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 48px -12px rgba(6, 95, 70, 0.22) !important;
    border-top: 4px solid rgb(16, 185, 129);
    backdrop-filter: blur(6px);
}

.fi-simple-header {
    margin-bottom: 0.5rem;
}

@keyframes fi-simple-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------------- */
/* 10. Shared "summary card" component — used by every Ringkasan section  */
/*     (Quotation/PO/Invoice/Project forms, Cash Flow Report) so they all */
/*     share one visual language instead of each page inventing its own. */
/*     See resources/views/filament/components/summary-cards.blade.php.  */
/* ---------------------------------------------------------------------- */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.summary-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.875rem;
    padding: 1.1rem 1.15rem 1.1rem 1.4rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px -4px rgba(16, 24, 40, .08);
}

.dark .summary-card {
    background: #18181b;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .06);
}

.summary-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}

.summary-card--success::before { background: #10b981; }
.summary-card--danger::before  { background: #ef4444; }
.summary-card--info::before    { background: #6366f1; }
.summary-card--warning::before { background: #f59e0b; }
.summary-card--gray::before    { background: #9ca3af; }

.summary-card__label {
    font-size: .8125rem;
    color: #6b7280;
    margin-bottom: .3rem;
}

.dark .summary-card__label { color: #9ca3af; }

.summary-card__value {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.summary-card__sub {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .15rem;
}

.summary-card--text-success .summary-card__value { color: #059669; }
.dark .summary-card--text-success .summary-card__value { color: #34d399; }

.summary-card--text-danger .summary-card__value { color: #dc2626; }
.dark .summary-card--text-danger .summary-card__value { color: #f87171; }

.summary-card--text-info .summary-card__value { color: #4f46e5; }
.dark .summary-card--text-info .summary-card__value { color: #818cf8; }

.summary-card--text-warning .summary-card__value { color: #b45309; }
.dark .summary-card--text-warning .summary-card__value { color: #fbbf24; }

/* ---------------------------------------------------------------------- */
/* 11. Shared data-table look (Cash Flow Report + any other custom table  */
/*     partial) — badges, tabular numbers, hover rows, footer totals.    */
/* ---------------------------------------------------------------------- */
.data-table-wrap { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 560px; }

.data-table thead th {
    text-align: left; font-weight: 600; color: #6b7280;
    padding: .55rem .75rem; border-bottom: 2px solid #e5e7eb; white-space: nowrap;
}
.dark .data-table thead th { color: #9ca3af; border-bottom-color: rgba(255,255,255,.12); }

.data-table tbody td { padding: .7rem .75rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.dark .data-table tbody td { border-bottom-color: rgba(255,255,255,.06); }

.data-table tbody tr:hover td { background: rgba(16,185,129,.045); }

.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.data-badge {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 500; background: #f3f4f6; color: #374151;
}
.dark .data-badge { background: rgba(255,255,255,.08); color: #d1d5db; }

.data-muted { color: #cbd5e1; }

.data-table .foot td { padding: .7rem .75rem; border-top: 2px solid #e5e7eb; font-weight: 700; }
.dark .data-table .foot td { border-top-color: rgba(255,255,255,.12); }

.data-table-empty { padding: 2.5rem 1rem; text-align: center; color: #9ca3af; }