/*
 * SIMAD Global Panel Theme
 * Ubah token di :root untuk mengganti warna, radius, table style, card style,
 * dan nuansa umum panel secara global.
 */

:root {
    --simad-font-body: "Poppins", "Public Sans", "Segoe UI", sans-serif;

    --simad-page-bg: #f4f7fb;
    --simad-page-accent-a: rgba(16, 185, 129, 0.08);
    --simad-page-accent-b: rgba(59, 130, 246, 0.08);

    --simad-surface: #ffffff;
    --simad-surface-soft: #f8fafc;
    --simad-surface-strong: #eef4f8;
    --simad-border: #dfe7ee;
    --simad-border-strong: #c7d3df;

    --simad-text: #233044;
    --simad-text-muted: #66758b;
    --simad-heading: #162033;

    --simad-primary: #0f766e;
    --simad-primary-strong: #115e59;
    --simad-primary-soft: #e8f7f4;
    --simad-info: #2563eb;
    --simad-info-soft: #eaf2ff;
    --simad-success: #16a34a;
    --simad-success-soft: #edf9f0;
    --simad-warning: #d97706;
    --simad-warning-soft: #fff5e8;
    --simad-danger: #e11d48;
    --simad-danger-soft: #fff0f4;

    --simad-card-radius: 18px;
    --simad-control-radius: 12px;
    --simad-badge-radius: 999px;

    --simad-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
    --simad-shadow-md: 0 18px 38px rgba(15, 23, 42, 0.08);
    --simad-shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.12);

    --simad-table-header-bg: linear-gradient(180deg, #fbfdff 0%, #f1f6fb 100%);
    --simad-table-row-even: #fbfdff;
    --simad-table-row-hover: #eefaf7;
    --simad-table-cell-px: 0.9rem;
    --simad-table-cell-py: 0.78rem;
}

.dark,
:root.dark {
    --simad-page-bg: #0b1220;
    --simad-page-accent-a: rgba(45, 212, 191, 0.08);
    --simad-page-accent-b: rgba(59, 130, 246, 0.08);

    --simad-surface: #111827;
    --simad-surface-soft: #162033;
    --simad-surface-strong: #1b2940;
    --simad-border: #26354d;
    --simad-border-strong: #324765;

    --simad-text: #e5edf7;
    --simad-text-muted: #9db0c7;
    --simad-heading: #f8fbff;

    --simad-primary-soft: rgba(15, 118, 110, 0.18);
    --simad-info-soft: rgba(37, 99, 235, 0.16);
    --simad-success-soft: rgba(22, 163, 74, 0.16);
    --simad-warning-soft: rgba(217, 119, 6, 0.16);
    --simad-danger-soft: rgba(225, 29, 72, 0.16);

    --simad-shadow-sm: 0 10px 24px rgba(2, 6, 23, 0.28);
    --simad-shadow-md: 0 18px 38px rgba(2, 6, 23, 0.34);
    --simad-shadow-lg: 0 28px 60px rgba(2, 6, 23, 0.42);

    --simad-table-header-bg: linear-gradient(180deg, #162033 0%, #101827 100%);
    --simad-table-row-even: #101827;
    --simad-table-row-hover: #132235;
}

html,
body,
.fi-body,
.fi-layout {
    font-family: var(--simad-font-body);
    color: var(--simad-text);
}

.fi-layout,
.fi-body,
.fi-main,
.fi-main-ctn {
    background:
        radial-gradient(1200px 420px at 100% -5%, var(--simad-page-accent-a), transparent 55%),
        radial-gradient(1000px 420px at -10% 100%, var(--simad-page-accent-b), transparent 55%),
        var(--simad-page-bg);
}

.fi-topbar,
.fi-sidebar,
.fi-main-ctn,
.fi-main .fi-section,
.fi-main .fi-ta-ctn,
.fi-main .fi-wi,
.fi-main .fi-modal-window,
.fi-main .fi-dropdown-panel,
.fi-main .fi-in-entry-wrp,
.fi-main .fi-fo-field-wrp {
    border-radius: var(--simad-card-radius);
}

.fi-topbar,
.fi-sidebar,
.fi-main .fi-section,
.fi-main .fi-ta-ctn,
.fi-main .fi-wi,
.fi-main .fi-modal-window,
.fi-main .fi-dropdown-panel,
.fi-main .fi-in-entry-wrp {
    background: var(--simad-surface);
    border: 1px solid var(--simad-border);
    box-shadow: var(--simad-shadow-sm);
}

.fi-topbar {
    backdrop-filter: blur(12px);
}

.fi-sidebar {
    background: linear-gradient(180deg, var(--simad-surface) 0%, var(--simad-surface-soft) 100%);
}

.fi-sidebar-nav,
.fi-main {
    color: var(--simad-text);
}

.fi-sidebar-item-button,
.fi-topbar-item-btn,
.fi-dropdown-list-item {
    border-radius: 12px;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background: var(--simad-primary-soft);
    color: var(--simad-primary-strong);
}

.fi-btn,
.fi-icon-btn,
.fi-badge,
.fi-input-wrp,
.fi-select-input,
.fi-input,
.fi-fo-date-time-picker-panel,
.fi-ta-header-toolbar,
.fi-ta-filters,
.fi-pagination-item,
.fi-pagination-item-button {
    border-radius: var(--simad-control-radius);
}

.fi-btn {
    transition: transform 140ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.fi-btn:hover,
.fi-icon-btn:hover {
    transform: translateY(-1px);
}

.fi-btn-color-primary {
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.2);
}

.fi-badge {
    border-radius: var(--simad-badge-radius);
}

.fi-input-wrp,
.fi-select-input,
.fi-input,
.fi-fo-date-time-picker-panel,
.fi-ta-header-toolbar,
.fi-ta-filters {
    border-color: var(--simad-border);
}

.fi-input:focus,
.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-fo-date-time-picker-panel:focus-within {
    border-color: var(--simad-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.fi-main .fi-ta-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--simad-border);
    border-radius: var(--simad-card-radius);
    overflow: hidden;
    background: var(--simad-surface);
}

.fi-main .fi-ta-content {
    border-radius: var(--simad-card-radius);
}

.fi-main .fi-ta-table thead th,
.fi-main .fi-ta-header-cell {
    background: var(--simad-table-header-bg);
    color: var(--simad-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--simad-border);
}

.fi-main .fi-ta-table td,
.fi-main .fi-ta-table th,
.fi-main .fi-ta-cell,
.fi-main .fi-ta-header-cell {
    padding: var(--simad-table-cell-py) var(--simad-table-cell-px);
    vertical-align: middle;
}

.fi-main .fi-ta-table tbody tr:nth-child(even),
.fi-main .fi-ta-record:nth-child(even) {
    background: var(--simad-table-row-even);
}

.fi-main .fi-ta-table tbody tr:hover,
.fi-main .fi-ta-record:hover {
    background: var(--simad-table-row-hover);
}

.fi-main .fi-ta-table td,
.fi-main .fi-ta-table th {
    border-color: var(--simad-border);
}

.fi-main h1,
.fi-main h2,
.fi-main h3,
.fi-main h4,
.fi-main .fi-header-heading {
    color: var(--simad-heading);
}

.fi-main .text-gray-500,
.fi-main .text-gray-600,
.fi-main .fi-section-description,
.fi-main .fi-header-subheading {
    color: var(--simad-text-muted);
}

/* Utility classes for stat cards or custom dashboard cards. */
.simad-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.simad-stat-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--simad-card-radius);
    padding: 1rem;
    color: #fff;
    box-shadow: var(--simad-shadow-md);
}

.simad-stat-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.simad-stat-card__value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.simad-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.18);
}

.simad-stat-card::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.simad-stat-card--teal { background: #0f766e; }
.simad-stat-card--green { background: #10b981; }
.simad-stat-card--blue { background: #3b82f6; }
.simad-stat-card--amber { background: #f59e0b; }
.simad-stat-card--rose { background: #f43f5e; }
.simad-stat-card--slate { background: #475569; }

@media (max-width: 768px) {
    .fi-topbar,
    .fi-sidebar,
    .fi-main .fi-section,
    .fi-main .fi-ta-ctn,
    .fi-main .fi-wi,
    .fi-main .fi-modal-window {
        border-radius: 14px;
    }

    .fi-main .fi-ta-table td,
    .fi-main .fi-ta-table th,
    .fi-main .fi-ta-cell,
    .fi-main .fi-ta-header-cell {
        padding: 0.72rem;
    }
}