@import '/css/filament/filament/app.css';

/* ─── BuildCore CMS — Custom Construction Theme ─────────────────────── */

/* Google Font: Inter */
@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800');

:root {
    /* Brand Colors — Construction Amber */
    --construction-amber:   #F59E0B;
    --construction-amber-light: #FCD34D;
    --construction-amber-dark:  #D97706;
    --construction-dark:    #0F172A;
    --construction-surface: #1E293B;
    --construction-card:    #293548;
    --construction-border:  #334155;
    --construction-text:    #F1F5F9;
    --construction-muted:   #94A3B8;
}

/* ─── Base Font ──────────────────────────────────────────────────────── */
body,
.fi-body {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.fi-sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%) !important;
    border-right: 1px solid var(--construction-border) !important;
}

.fi-sidebar-header {
    background: #0F172A !important;
    border-bottom: 1px solid var(--construction-border) !important;
    padding: 1.5rem 1rem !important;
}

/* Brand name in sidebar */
.fi-sidebar-header .fi-brand-name {
    color: var(--construction-amber) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.025em !important;
}

/* Sidebar nav items */
.fi-sidebar-nav-item {
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
}

.fi-sidebar-nav-item:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

.fi-sidebar-nav-item.fi-active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-left: 3px solid var(--construction-amber) !important;
}

.fi-sidebar-nav-item.fi-active .fi-sidebar-nav-item-label,
.fi-sidebar-nav-item.fi-active .fi-sidebar-nav-item-icon {
    color: var(--construction-amber) !important;
}

/* Group labels */
.fi-sidebar-group-label {
    color: var(--construction-muted) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* ─── Top Bar ────────────────────────────────────────────────────────── */
.fi-topbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--construction-border) !important;
}

/* ─── Page Content ───────────────────────────────────────────────────── */
.fi-main {
    background: #0F172A !important;
}

.fi-page {
    background: transparent !important;
}

/* ─── Cards & Sections ───────────────────────────────────────────────── */
.fi-section,
.fi-card {
    background: var(--construction-surface) !important;
    border: 1px solid var(--construction-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────── */
.fi-ta-table {
    background: var(--construction-surface) !important;
}

.fi-ta-row:hover td {
    background: rgba(245, 158, 11, 0.05) !important;
    transition: background 0.1s ease !important;
}

.fi-ta-header-cell {
    background: #1a2538 !important;
    color: var(--construction-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.fi-btn-primary {
    background: linear-gradient(135deg, var(--construction-amber), var(--construction-amber-dark)) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45) !important;
    transform: translateY(-1px) !important;
}

/* ─── Badges ─────────────────────────────────────────────────────────── */
.fi-badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* ─── Stats Widgets ──────────────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    background: var(--construction-surface) !important;
    border: 1px solid var(--construction-border) !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--construction-amber), var(--construction-amber-dark));
}

.fi-wi-stats-overview-stat:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--construction-amber), #fff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ─── Form Inputs ────────────────────────────────────────────────────── */
.fi-input {
    background: #1a2538 !important;
    border: 1px solid var(--construction-border) !important;
    color: var(--construction-text) !important;
    transition: border-color 0.15s ease !important;
}

.fi-input:focus {
    border-color: var(--construction-amber) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

.fi-fo-field-wrp-label {
    color: var(--construction-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ─── Page Header ────────────────────────────────────────────────────── */
.fi-header-heading {
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    background: linear-gradient(135deg, #F1F5F9, var(--construction-amber)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ─── Navigation Badges ──────────────────────────────────────────────── */
.fi-sidebar-nav-item-badge {
    background: var(--construction-amber) !important;
    color: #000 !important;
    font-weight: 700 !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ─── Modal ──────────────────────────────────────────────────────────── */
.fi-modal-content {
    background: var(--construction-surface) !important;
    border: 1px solid var(--construction-border) !important;
}

/* ─── Progress bars ──────────────────────────────────────────────────── */
.construction-progress-bar {
    height: 6px;
    border-radius: 9999px;
    background: var(--construction-border);
    overflow: hidden;
}

.construction-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--construction-amber), var(--construction-amber-light));
    border-radius: 9999px;
    transition: width 0.5s ease;
}

/* ─── Scrollbars ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--construction-dark); }
::-webkit-scrollbar-thumb {
    background: var(--construction-border);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--construction-amber-dark); }

/* ─── Section Headers ────────────────────────────────────────────────── */
.fi-section-header {
    border-bottom: 1px solid var(--construction-border) !important;
}

.fi-section-header-heading {
    color: var(--construction-text) !important;
    font-weight: 600 !important;
}

/* ─── Info Lists ─────────────────────────────────────────────────────── */
.fi-in-entry-wrp-label {
    color: var(--construction-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.fi-in-text {
    color: var(--construction-text) !important;
    font-weight: 500 !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 1.25rem !important;
    }
}