/* ============================================================
   Arton ERP — Custom Filament 5 Theme
   Brand: Navy #0a1730 · Gold #f5c518 · Paper #f8f9fa
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */

/* Dark background ONLY on login/simple pages so the fixed canvas shows through.
   :has() guard prevents this from bleeding into the admin panel. */
html:has(.fi-simple-layout),
body:has(.fi-simple-layout) {
    background: #050d1a !important;
    min-height: 100vh;
}

/* Layout wrapper must be TRANSPARENT so the fixed canvas shows */
.fi-simple-layout {
    background: transparent !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* All layout children above the canvas (z-index:0) */
.fi-simple-layout > * {
    position: relative;
    z-index: 2;
}

/* ── The card — outer wrapper (and ALL ancestor wrappers must be transparent) */
.fi-simple-main,
.fi-simple-layout > div,
.fi-simple-layout > div > div {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── The card — actual glass surface (Filament renders .fi-simple-page inside) */
.fi-simple-page,
.fi-simple-main > section,
.fi-simple-main > div > section,
.fi-simple-main section,
[class*="fi-simple-page"] {
    background: rgba(4, 10, 24, 0.86) !important;
    backdrop-filter: blur(52px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(52px) saturate(1.8) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 197, 24, 0.20) !important;
    border-top: 1.5px solid rgba(245, 197, 24, 0.42) !important;
    box-shadow:
        0 0 0 1px rgba(245,197,24,0.06) inset,
        0 48px 96px rgba(0,0,0,0.70),
        0 12px 32px rgba(0,0,0,0.45) !important;
    padding: 42px 40px !important;
}

/* Kill any white/light bg on form containers inside the card */
.fi-simple-page *,
.fi-simple-main section *:not(input):not(button):not([type="checkbox"]) {
    --tw-bg-opacity: 0 !important;
}

/* ── Brand / logo area ─────────────────────────────────────── */
.fi-simple-layout .fi-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none !important;
    margin-bottom: 6px;
    /* Color must be on the element itself for direct text nodes */
    color: #f5c518 !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-shadow: 0 0 32px rgba(245,197,24,0.45) !important;
}

.fi-simple-layout .fi-logo img {
    display: none !important;
}

/* Also target any wrapping element Filament might insert */
.fi-simple-layout .fi-logo a,
.fi-simple-layout .fi-logo span,
.fi-simple-layout .fi-logo * {
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #f5c518 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 0 32px rgba(245,197,24,0.45) !important;
}

/* Gold divider + ERP label below the name */
.fi-simple-layout .fi-logo span::after {
    content: '';
    display: block;
    width: 42px;
    height: 2px;
    background: #f5c518;
    margin: 10px auto 8px;
    border-radius: 2px;
}

.fi-simple-layout .fi-logo::after {
    content: 'ERP SYSTEM';
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.30em;
    color: #f5c518;
    margin-top: 0;
}

/* ── Page heading "Sign in" ────────────────────────────────── */
.fi-simple-main h1,
.fi-simple-main h2,
.fi-simple-page-heading {
    color: rgba(255,255,255,0.90) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* ── Labels ────────────────────────────────────────────────── */
.fi-simple-main label,
.fi-simple-main .fi-fo-field-wrp-label label,
.fi-simple-main [class*="label"] {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ── Inputs ────────────────────────────────────────────────── */
.fi-simple-main input,
.fi-simple-main .fi-input {
    background: rgba(3, 9, 22, 0.70) !important;
    border: 1px solid rgba(245,197,24,0.18) !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.875rem !important;
    transition: border-color .18s, box-shadow .18s !important;
}

.fi-simple-main input::placeholder {
    color: rgba(255,255,255,0.20) !important;
}

.fi-simple-main input:focus,
.fi-simple-main .fi-input:focus {
    background: rgba(3, 9, 22, 0.85) !important;
    border-color: rgba(245,197,24,0.55) !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,0.12) !important;
    outline: none !important;
}

/* Input wrapper border (Filament wraps inputs) */
.fi-simple-main .fi-input-wrp {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Eye / reveal button */
.fi-simple-main [data-field-suffix] button,
.fi-simple-main button[type="button"]:not([data-filament-button]) {
    color: rgba(245,197,24,0.45) !important;
    background: transparent !important;
}
.fi-simple-main [data-field-suffix] button:hover,
.fi-simple-main button[type="button"]:not([data-filament-button]):hover {
    color: #f5c518 !important;
}

/* ── Remember me ───────────────────────────────────────────── */
.fi-simple-main .fi-checkbox-label,
.fi-simple-main [class*="checkbox"] ~ label,
.fi-simple-main [class*="checkbox"] + span {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.80rem !important;
}

.fi-simple-main input[type="checkbox"] {
    border-color: rgba(245,197,24,0.30) !important;
    background: rgba(3,9,22,0.70) !important;
}
.fi-simple-main input[type="checkbox"]:checked {
    background: #f5c518 !important;
    border-color: #f5c518 !important;
}

/* ── Submit button ─────────────────────────────────────────── */
.fi-simple-main .fi-btn-primary,
.fi-simple-main [type="submit"],
.fi-simple-main button[type="submit"] {
    background: #f5c518 !important;
    color: #05111f !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 24px rgba(245,197,24,0.28) !important;
    transition: box-shadow .18s, transform .12s !important;
}
.fi-simple-main .fi-btn-primary:hover,
.fi-simple-main [type="submit"]:hover {
    box-shadow: 0 6px 32px rgba(245,197,24,0.45) !important;
    transform: translateY(-1px) !important;
}

/* ── Dividers & links ──────────────────────────────────────── */
.fi-simple-main a {
    color: rgba(245,197,24,0.75) !important;
}
.fi-simple-main a:hover {
    color: #f5c518 !important;
}
.fi-simple-main hr,
.fi-simple-main [class*="divider"] {
    border-color: rgba(245,197,24,0.10) !important;
}

/* Hide background canvas inside the main admin panel */
body:has(.fi-sidebar) #arton-erp-bg,
body:has(.fi-topbar) #arton-erp-bg {
    display: none !important;
}

/* ── Base font size & body ───────────────────────────────── */
html {
    font-size: 14px !important;
}

body {
    font-size: 0.875rem !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.fi-sidebar {
    background: #0a1730 !important;
    border-right: none !important;
}

/* All text inside sidebar defaults to readable white */
.fi-sidebar-nav-group-label,
.fi-sidebar-item-label {
    color: rgba(255,255,255,0.60) !important;
    font-size: 0.78rem !important;
}

/* Nav group toggle button (the collapsible header row) */
.fi-sidebar-nav-group-button {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.60) !important;
}

.fi-sidebar-nav-group-button:hover,
.fi-sidebar-nav-group-button:focus,
.fi-sidebar-nav-group-button:focus-visible {
    background: rgba(245,197,24,0.08) !important;
    color: #f5c518 !important;
    outline: none !important;
    box-shadow: none !important;
}

.fi-sidebar-nav-group-button:hover .fi-sidebar-nav-group-label,
.fi-sidebar-nav-group-button:focus .fi-sidebar-nav-group-label {
    color: #f5c518 !important;
}

/* Nav group toggle chevron */
.fi-sidebar-nav-group-button svg {
    color: rgba(255,255,255,0.40) !important;
}

.fi-sidebar-nav-group-button:hover svg,
.fi-sidebar-nav-group-button:focus svg {
    color: #f5c518 !important;
}

/* Item rows */
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    color: #f5c518 !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button[aria-current="page"] {
    background: rgba(245,197,24,0.08) !important;
    border-radius: 6px !important;
    outline: none !important;
    box-shadow: none !important;
}

.fi-sidebar-item-button:focus,
.fi-sidebar-item-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(245,197,24,0.05) !important;
}

.fi-sidebar-item-button[aria-current="page"] {
    border-left: 3px solid #f5c518 !important;
}

.fi-sidebar-item-icon,
.fi-sidebar-nav-group-label svg {
    color: rgba(255,255,255,0.45) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #f5c518 !important;
}

/* (sidebar search handled in the brand/logo block above) */

/* Prevent any white background leaking onto sidebar elements */
.fi-sidebar *:not([class*="fi-dropdown"]):not(input):not(textarea):focus {
    outline: none !important;
}

/* Highlighted / selected text in sidebar stays readable */
.fi-sidebar ::selection {
    background: rgba(245,197,24,0.30) !important;
    color: #ffffff !important;
}

.fi-sidebar-nav-group-label {
    font-size: 0.6rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.30) !important;
    padding-left: 14px !important;
    margin-top: 10px !important;
}

/* ── Topbar / Header ─────────────────────────────────────── */
.fi-topbar {
    background: #0a1730 !important;
    border-bottom: 1px solid rgba(245,197,24,0.15) !important;
}

.fi-topbar .fi-breadcrumbs-item-label,
.fi-topbar .fi-icon-btn,
.fi-topbar svg {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.8rem !important;
}

.fi-topbar .fi-icon-btn:hover {
    color: #f5c518 !important;
}

/* ── Brand / Logo in sidebar ─────────────────────────────── */
.fi-sidebar-header {
    background: #0a1730 !important;
    border-bottom: 1px solid rgba(245,197,24,0.12) !important;
    padding: 14px 16px !important;
}

/* Brand name — exact Filament 5 structure:
   aside.fi-sidebar > div.fi-sidebar-header-ctn > header.fi-sidebar-header
   > div.fi-sidebar-header-logo-ctn > a > div.fi-logo { text node } */
.fi-sidebar-header-logo-ctn .fi-logo,
.fi-sidebar-header-logo-ctn a,
.fi-sidebar-header-logo-ctn {
    color: #f5c518 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 0 0 16px rgba(245,197,24,0.40) !important;
}

/* Sidebar global-search / nav-search input — full dark theme */
.fi-sidebar input,
.fi-sidebar .fi-input,
.fi-sidebar .fi-input-wrp,
.fi-global-search-field,
.fi-global-search-field input,
.fi-global-search-field .fi-input-wrp {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.fi-sidebar input::placeholder,
.fi-global-search-field input::placeholder {
    color: rgba(255,255,255,0.30) !important;
}

.fi-sidebar input:focus,
.fi-global-search-field input:focus {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(245,197,24,0.45) !important;
    box-shadow: 0 0 0 2px rgba(245,197,24,0.12) !important;
    outline: none !important;
}

/* Search icon inside the sidebar search field */
.fi-sidebar .fi-input-wrp svg,
.fi-global-search-field svg {
    color: rgba(255,255,255,0.35) !important;
}

/* ── Page header & headings ──────────────────────────────── */
.fi-header-heading {
    color: #0a1730 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
}

.fi-header-subheading {
    font-size: 0.8rem !important;
    color: #64748b !important;
}

.fi-section-header-heading {
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #0a1730 !important;
    letter-spacing: 0.01em !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.fi-breadcrumbs-item-label {
    font-size: 0.75rem !important;
}

/* ── Primary Buttons ─────────────────────────────────────── */
.fi-btn {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.fi-btn-color-primary,
.fi-ac-action[data-action-color="primary"] {
    background: #f5c518 !important;
    color: #0a1730 !important;
    border-color: #f5c518 !important;
    font-weight: 700 !important;
    transition: background 0.15s ease !important;
}

.fi-btn-color-primary:hover {
    background: #e6b800 !important;
}

/* ── Tables ──────────────────────────────────────────────── */
.fi-ta-header-cell {
    background: #f8fafc !important;
    font-size: 0.65rem !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

.fi-ta-cell {
    font-size: 0.8rem !important;
}

.fi-ta-row:hover td,
.fi-ta-row:hover .fi-ta-cell {
    background: #fefdf0 !important;
}

/* ── Form fields ─────────────────────────────────────────── */
.fi-fo-field-wrp label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.fi-fo-field-wrp input,
.fi-fo-field-wrp select,
.fi-fo-field-wrp textarea {
    font-size: 0.8rem !important;
}

.fi-fo-field-wrp input:focus,
.fi-fo-field-wrp select:focus,
.fi-fo-field-wrp textarea:focus {
    border-color: #f5c518 !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,0.15) !important;
}

/* ── Section headings ────────────────────────────────────── */
.fi-section {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.fi-section-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e8edf3 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 16px !important;
}

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

/* ── Stats Overview Widgets ──────────────────────────────── */
.fi-wi-stats-overview-stat {
    border-top: 3px solid #f5c518 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    transform: translateY(-1px) !important;
}

.fi-wi-stats-overview-stat-value {
    color: #0a1730 !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.02em !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

/* ── Chart Widgets ───────────────────────────────────────── */
.fi-wi-chart {
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    border: 1px solid #e8edf3 !important;
    transition: box-shadow 0.2s ease !important;
}

.fi-wi-chart:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important;
}

.fi-wi-chart-header {
    padding: 14px 18px 8px !important;
}

.fi-wi-chart-heading {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0a1730 !important;
    letter-spacing: -0.01em !important;
}

.fi-wi-chart-description {
    font-size: 0.7rem !important;
    color: #64748b !important;
}

/* ── Table Widget (My Tasks) ─────────────────────────────── */
.fi-wi-table {
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    border: 1px solid #e8edf3 !important;
}

.fi-wi-table-header-heading {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0a1730 !important;
}

/* ── Sidebar group lines ─────────────────────────────────── */
.fi-sidebar-group-items {
    border-left: 1px solid rgba(245,197,24,0.10) !important;
    margin-left: 18px !important;
}

/* ── Action buttons in tables ────────────────────────────── */
.fi-ac-action[data-action-color="success"] {
    background: #059669 !important;
    color: white !important;
    font-size: 0.72rem !important;
}

.fi-ac-action[data-action-color="warning"] {
    background: #d97706 !important;
    color: white !important;
    font-size: 0.72rem !important;
}

.fi-ac-action[data-action-color="danger"] {
    background: #dc2626 !important;
    color: white !important;
    font-size: 0.72rem !important;
}

/* ── Notification toasts ─────────────────────────────────── */
.fi-no-notification {
    border-left: 4px solid #f5c518 !important;
    font-size: 0.78rem !important;
}

/* ── Dashboard grid spacing ──────────────────────────────── */
.fi-dashboard-widgets-ctn {
    gap: 1rem !important;
}

/* ── Dropdown menus ──────────────────────────────────────── */
.fi-dropdown-panel {
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

.fi-dropdown-list-item-label,
.fi-dropdown-list-item button,
.fi-dropdown-list-item a,
.fi-dropdown-list-item span {
    color: #1e293b !important;
}

.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:hover button,
.fi-dropdown-list-item:hover span {
    color: #0a1730 !important;
}

.fi-dropdown-list-item:hover {
    background: #f8fafc !important;
}

/* ── Select option lists (native & custom) ───────────────── */
.fi-select-option,
.choices__item,
.choices__list--dropdown .choices__item {
    color: #1e293b !important;
    background: #ffffff !important;
}

.fi-select-option:hover,
.choices__item--selectable:hover {
    background: #f1f5f9 !important;
    color: #0a1730 !important;
}

/* ── Filament select dropdown (livewire) ─────────────────── */
[data-headlessui-state] ul li,
[data-headlessui-state] ul button {
    color: #1e293b !important;
}

[data-headlessui-state] ul li:hover {
    background: #f1f5f9 !important;
    color: #0a1730 !important;
}

/* ── Table filter dropdowns ──────────────────────────────── */
.fi-ta-filters-dropdown .fi-dropdown-panel,
.fi-table-filters .fi-dropdown-panel {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* ── Action group dropdowns ──────────────────────────────── */
.fi-ac-action-group-dropdown-panel {
    background: #ffffff !important;
}

.fi-ac-action-group-dropdown-panel button,
.fi-ac-action-group-dropdown-panel a {
    color: #1e293b !important;
    font-size: 0.78rem !important;
}

.fi-ac-action-group-dropdown-panel button:hover,
.fi-ac-action-group-dropdown-panel a:hover {
    background: #f1f5f9 !important;
    color: #0a1730 !important;
}

/* ── User menu (account dropdown) ───────────────────────── */
.fi-user-menu-dropdown .fi-dropdown-panel {
    background: #ffffff !important;
}

.fi-user-menu-dropdown button,
.fi-user-menu-dropdown a {
    color: #1e293b !important;
}

/* ── Highlighted / selected text in inputs ───────────────── */
input::selection,
textarea::selection {
    background: rgba(245,197,24,0.25) !important;
    color: #0a1730 !important;
}

/* ── Combobox/listbox popups ─────────────────────────────── */
[role="listbox"],
[role="option"] {
    background: #ffffff !important;
    color: #1e293b !important;
}

[role="option"]:hover,
[role="option"][aria-selected="true"] {
    background: #f1f5f9 !important;
    color: #0a1730 !important;
}

[role="option"][aria-selected="true"] {
    font-weight: 600 !important;
}

/* ── Modal dialogs ───────────────────────────────────────── */
.fi-modal-window {
    border-radius: 12px !important;
}

.fi-modal-header-heading {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0a1730 !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.fi-pagination {
    font-size: 0.75rem !important;
}

/* ── Tabs ────────────────────────────────────────────────── */
.fi-tabs-tab {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

/* ── Select/Search inputs ────────────────────────────────── */
.fi-input {
    font-size: 0.8rem !important;
}

/* ── Empty state text ────────────────────────────────────── */
.fi-ta-empty-state-heading {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.fi-ta-empty-state-description {
    font-size: 0.78rem !important;
    color: #64748b !important;
}

/* ── Scroll areas ────────────────────────────────────────── */
.fi-main {
    background: #f1f5f9 !important;
}

/* ── Gold accent on active nav ───────────────────────────── */
.fi-sidebar-item-button[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #f5c518;
    border-radius: 0 3px 3px 0;
}