/*
 * USEP — Filament Panel Theme
 * Mirrors welcome.blade.php design system exactly.
 * DM Sans + DM Mono · Warm ramp · Border-first · No shadow noise
 * Injected via renderHook('panels::head.end') in all PanelProviders
 */

/* ── DM Mono (DM Sans already loaded via ->font()) ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

/* ── Force light mode — dark mode disabled entirely ─────────────── */
:root { color-scheme: light only !important; }
html  { color-scheme: light only !important; }

/* ── Design Tokens — single source of truth ─────────────────────── */
:root {
    --u-bg:           #fdf8f4;
    --u-bg-1:         #f7f0e8;
    --u-bg-2:         #ede4d8;
    --u-border:       #ddd4c6;
    --u-border-2:     #c9bfb1;
    --u-text:         #1a1612;
    --u-text-2:       #5a5248;
    --u-text-3:       #8c8076;
    --u-accent:       #c8501a;
    --u-accent-dim:   rgba(200,80,26,0.09);
    --u-r:            6px;
    --u-rl:           10px;
    --u-mono:         'DM Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════════════════════════════ */
body,
.fi-body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background-color: var(--u-bg) !important;
    color: var(--u-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT — Sidebar · Topbar · Main
   ═══════════════════════════════════════════════════════════════════ */
.fi-sidebar {
    background-color: var(--u-bg-1) !important;
    border-right: 1px solid var(--u-border) !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    background: transparent !important;
}

/* backdrop-filter creates a stacking context that traps Alpine.js
   teleported dropdowns (user menu, notifications) behind the bar —
   use a solid background instead and set an explicit z-index so
   teleported panels (z-50) can correctly escape above the topbar. */
.fi-topbar {
    background: var(--u-bg-1) !important;
    border-bottom: 1px solid var(--u-border) !important;
    box-shadow: none !important;
    z-index: 20 !important;
}

.fi-main {
    background-color: var(--u-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.fi-sidebar-group-label {
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--u-text-3) !important;
    padding-left: 8px !important;
}

.fi-sidebar-item-button {
    border-radius: var(--u-r) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--u-text-2) !important;
    transition: background 0.15s, color 0.15s !important;
}

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

.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[data-active="true"],
.fi-sidebar-item-button[aria-current] {
    background-color: var(--u-accent) !important;
    color: #fff !important;
}

.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[data-active="true"] .fi-sidebar-item-icon {
    color: #fff !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════════ */
.fi-header {
    border-bottom: 1px solid var(--u-border) !important;
}

.fi-header-heading {
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--u-text) !important;
}

.fi-header-subheading {
    font-size: 13px !important;
    color: var(--u-text-3) !important;
    font-weight: 400 !important;
}

.fi-breadcrumbs {
    font-family: var(--u-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.fi-breadcrumbs-item-label {
    color: var(--u-text-3) !important;
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--u-text-2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS / CARDS
   ═══════════════════════════════════════════════════════════════════ */
.fi-section {
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-rl) !important;
    box-shadow: none !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--u-border) !important;
    padding: 14px 20px !important;
}

.fi-section-header-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--u-text) !important;
}

.fi-section-header-description {
    font-size: 12px !important;
    color: var(--u-text-3) !important;
    font-weight: 400 !important;
}

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

/* ═══════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════ */
.fi-ta-ctn {
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-rl) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.fi-ta-header {
    background: var(--u-bg-1) !important;
    border-bottom: 1px solid var(--u-border) !important;
    padding: 12px 16px !important;
}

.fi-ta-header-cell {
    background: var(--u-bg-1) !important;
    border-bottom: 1px solid var(--u-border) !important;
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--u-text-3) !important;
    padding: 10px 16px !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--u-border) !important;
    transition: background 0.12s !important;
}

.fi-ta-row:last-child { border-bottom: none !important; }

.fi-ta-row:hover > td,
.fi-ta-row:hover {
    background-color: var(--u-bg-1) !important;
}

.fi-ta-cell {
    font-size: 13px !important;
    color: var(--u-text-2) !important;
    padding: 13px 16px !important;
}

.fi-ta-empty-state {
    background: var(--u-bg-1) !important;
}

.fi-ta-empty-state-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--u-text) !important;
}

.fi-ta-empty-state-description {
    font-size: 13px !important;
    color: var(--u-text-3) !important;
}

.fi-ta-search-field input {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    color: var(--u-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════ */
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp > label {
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--u-text-3) !important;
}

.fi-fo-helper-text,
.fi-fo-hint {
    font-size: 12px !important;
    color: var(--u-text-3) !important;
    font-weight: 400 !important;
}

/* ── Input wrapper — explicit border, no ring ───────────────────── */
.fi-input-wrp {
    background: var(--u-bg-1) !important;
    border-radius: var(--u-r) !important;
    border: 1px solid var(--u-border) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--u-accent) !important;
    box-shadow: 0 0 0 2px var(--u-accent-dim) !important;
}

/* ── Kill every Tailwind ring/shadow variant on all children ─────── */
.fi-input-wrp,
.fi-input-wrp *,
.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    --tw-ring-offset-width: 0px !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    --tw-ring-width: 0px !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Target exact classes Filament 3 renders on <input> elements ─── */
input.block,
textarea.block,
input[class*="border-gray"],
textarea[class*="border-gray"],
input[class*="shadow-sm"],
textarea[class*="shadow-sm"],
input[class*="focus:ring"],
textarea[class*="focus:ring"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    outline: none !important;
}

/* ── All inputs/textareas inside fi-input-wrp ───────────────────── */
.fi-input,
.fi-input-wrp input,
.fi-input-wrp textarea {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    color: var(--u-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    outline: none !important;
}

/* ── Standalone inputs not inside .fi-input-wrp ─────────────────── */
input.fi-input,
textarea.fi-input,
select.fi-input {
    background: var(--u-bg-1) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
}

input.fi-input:focus,
textarea.fi-input:focus,
select.fi-input:focus {
    border-color: var(--u-accent) !important;
    box-shadow: 0 0 0 2px var(--u-accent-dim) !important;
    outline: none !important;
}

.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: var(--u-text-3) !important;
}

.fi-select-input {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    border-radius: var(--u-r) !important;
    border-color: var(--u-border-2) !important;
    color: var(--u-text) !important;
    background: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN — explicit overrides so inputs are visible on warm bg
   ═══════════════════════════════════════════════════════════════════ */

/* Page bg — slightly darker so white card pops */
.fi-simple-main {
    background-color: var(--u-bg-2) !important;
}

/* Login card — pure white, clear border */
.fi-simple-page {
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-rl) !important;
    box-shadow: none !important;
}

/* Force input wrapper background + visible border inside login card */
.fi-simple-page .fi-input-wrp {
    background: var(--u-bg-1) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
}

.fi-simple-page .fi-input-wrp:focus-within {
    border-color: var(--u-accent) !important;
    box-shadow: 0 0 0 2px var(--u-accent-dim) !important;
}

.fi-simple-page .fi-input-wrp *,
.fi-simple-page .fi-input-wrp input,
.fi-simple-page .fi-input-wrp textarea {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input text inside login card */
.fi-simple-page .fi-input-wrp input,
.fi-simple-page .fi-input-wrp textarea {
    background: transparent !important;
    color: var(--u-text) !important;
    font-size: 13px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.fi-simple-page .fi-input-wrp input::placeholder,
.fi-simple-page .fi-input-wrp textarea::placeholder {
    color: var(--u-text-3) !important;
}

/* Field labels inside login */
.fi-simple-page .fi-fo-field-wrp-label label,
.fi-simple-page .fi-fo-field-wrp > label {
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--u-text-3) !important;
}

/* Login heading */
.fi-simple-page .fi-simple-page-logo + * h1,
.fi-simple-page h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--u-text) !important;
}

/* Login subtext */
.fi-simple-page p {
    font-size: 13px !important;
    color: var(--u-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.fi-btn {
    border-radius: var(--u-r) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transition: background 0.15s, opacity 0.15s !important;
}

.fi-btn:hover { opacity: 0.88 !important; }

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */
.fi-badge {
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS OVERVIEW WIDGET
   ═══════════════════════════════════════════════════════════════════ */
.fi-wi-stats-overview-stat {
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-rl) !important;
    box-shadow: none !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--u-accent) !important;
}

.fi-wi-stats-overview-stat-label {
    font-family: var(--u-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--u-text-3) !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 12px !important;
    color: var(--u-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
.fi-modal-window {
    background: var(--u-bg) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-rl) !important;
    box-shadow: 0 8px 32px rgba(26,22,18,0.12) !important;
}

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

.fi-modal-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--u-text) !important;
}

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

/* ═══════════════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════════════ */
.fi-dropdown-panel {
    background: var(--u-bg) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    box-shadow: 0 4px 16px rgba(26,22,18,0.08) !important;
}

.fi-dropdown-list-item-label {
    font-size: 13px !important;
    color: var(--u-text-2) !important;
}

.fi-dropdown-list-item:hover {
    background-color: var(--u-bg-1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════ */
.fi-no-notification {
    background: #fff !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    box-shadow: 0 4px 16px rgba(26,22,18,0.08) !important;
}

.fi-no-notification-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--u-text) !important;
}

/* Outer container — transparent, no card chrome here */
.fi-simple-page {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The actual form card Filament renders inside the simple page */
.fi-simple-main .fi-section,
.fi-simple-page .fi-section,
.fi-simple-page > section,
.fi-simple-page > div > section {
    background-color: var(--u-bg-2) !important;
}

/* Brand / logo text above the card */
.fi-simple-page .fi-logo,
.fi-simple-page [class*="brand"] {
    color: var(--u-text) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKBOXES & TOGGLES
   ═══════════════════════════════════════════════════════════════════ */
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--u-border-2) !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--u-accent) !important;
}

input[type="checkbox"]:checked {
    background-color: var(--u-accent) !important;
    border-color: var(--u-accent) !important;
    accent-color: var(--u-accent) !important;
}

   ═══════════════════════════════════════════════════════════════════ */
.fi-tabs {
    border-bottom: 1px solid var(--u-border) !important;
}

.fi-tabs-tab {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--u-text-3) !important;
    transition: color 0.15s !important;
}

.fi-tabs-tab:hover {
    color: var(--u-text) !important;
}

.fi-tabs-tab[aria-selected="true"] {
    color: var(--u-accent) !important;
    border-color: var(--u-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════ */
.fi-pagination {
    border-top: 1px solid var(--u-border) !important;
    background: var(--u-bg-1) !important;
    padding: 10px 16px !important;
}

.fi-pagination-items {
    gap: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL SEARCH
   ═══════════════════════════════════════════════════════════════════ */
.fi-global-search-field input {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    background: var(--u-bg-1) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-r) !important;
    color: var(--u-text) !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM PAGE CARDS
   ═══════════════════════════════════════════════════════════════════ */
.fi-page [style*="border:1px solid rgb(229,231,235)"],
.fi-page [style*="border: 1px solid rgb(229,231,235)"] {
    border-color: var(--u-border) !important;
}

.fi-page [style*="border-radius:0.875rem"],
.fi-page [style*="border-radius: 0.875rem"] {
    border-radius: var(--u-rl) !important;
}

.fi-page [style*="text-transform:uppercase"][style*="letter-spacing:0.08em"],
.fi-page [style*="text-transform: uppercase"][style*="letter-spacing: 0.08em"] {
    font-family: var(--u-mono) !important;
}