/* =============================================
   TRAWERS BRAND STYLES — Filament Panel
   Primary: Navy #163e47 | Accent: #ff5a3d
   Fonts: Syne (headings) + Funnel Display (UI)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Funnel+Display:ital,wght@0,300..800;1,300..800&display=swap');

/* --- CSS Tokens --- */
:root {
    --tw-navy: #163e47;
    --tw-accent: #ff5a3d;
    --tw-light: #eeeeee;
    --tw-muted: #cdd8da;
    --tw-navy-border: rgba(22,62,71,0.35);
    --tw-accent-glass: rgba(255,90,61,0.25);
}

/* --- Global font override --- */
body,
.fi-sidebar-item-label,
.fi-topbar,
.fi-breadcrumbs-item,
.fi-btn-label,
.fi-section-header-description,
.fi-ta-cell,
.fi-fo-field-wrp-label {
    font-family: 'Funnel Display', sans-serif !important;
}

/* =============================================
   SIDEBAR NAVIGATION
   ============================================= */

.fi-sidebar {
    background-color: var(--tw-navy) !important;
    border-right: none !important;
}

/* Sidebar header (logo area) */
.fi-sidebar-header {
    background-color: var(--tw-navy) !important;
    border-bottom: 1px solid rgba(205,216,218,0.2) !important;
}

/* Logo image — padding wyrównuje z sidebar */
.fi-sidebar-header .fi-logo img {
    display: block;
}

/* Nav group labels */
.fi-sidebar-group-label {
    color: rgba(205,216,218,0.55) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Funnel Display', sans-serif !important;
    font-weight: 600 !important;
}

/* Nav item buttons */
.fi-sidebar-item-button {
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255,90,61,0.15) !important;
}

/* Nav item labels */
.fi-sidebar-item-label {
    color: rgba(238,238,238,0.85) !important;
    font-family: 'Funnel Display', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #ff5a3d !important;
}

/* Nav item icons */
.fi-sidebar-item-icon {
    color: rgba(205,216,218,0.7) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #ff5a3d !important;
}

/* Active nav item — accent background */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    background-color: var(--tw-accent) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

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

/* Hover on active item — navy text to stay readable on accent bg */
.fi-sidebar-item-active .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"]:hover .fi-sidebar-item-label {
    color: #163e47 !important;
}

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

/* Sidebar footer / user avatar area */
.fi-sidebar-footer {
    background-color: var(--tw-navy) !important;
    border-top: 1px solid rgba(205,216,218,0.2) !important;
}

/* =============================================
   TOPBAR
   ============================================= */

.fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--tw-navy-border) !important;
    box-shadow: none !important;
}

.fi-topbar-breadcrumbs {
    font-family: 'Funnel Display', sans-serif;
}

/* =============================================
   PAGE HEADER / HEADINGS
   ============================================= */

.fi-header-heading,
.fi-simple-layout-heading,
.fi-resource-pages-list-records-page .fi-header-heading {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--tw-navy) !important;
    letter-spacing: -0.5px !important;
}

.fi-section-header-heading {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--tw-navy) !important;
    letter-spacing: -0.3px !important;
}

/* =============================================
   BUTTONS — border-radius: 0, uppercase
   ============================================= */

.fi-btn {
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-family: 'Funnel Display', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Primary (navy) button */
.fi-btn-color-primary.fi-btn-style-filled {
    background-color: var(--tw-navy) !important;
    border-color: var(--tw-navy) !important;
    color: #ffffff !important;
}

.fi-btn-color-primary.fi-btn-style-filled:hover {
    background-color: var(--tw-accent) !important;
    border-color: var(--tw-accent) !important;
}

/* Outlined primary button */
.fi-btn-color-primary.fi-btn-style-outlined {
    border-color: var(--tw-navy) !important;
    color: var(--tw-navy) !important;
}

.fi-btn-color-primary.fi-btn-style-outlined:hover {
    background-color: var(--tw-navy) !important;
    color: #ffffff !important;
}

/* =============================================
   CARDS / SECTIONS
   ============================================= */

.fi-section {
    border-radius: 0 !important;
    border-color: var(--tw-navy-border) !important;
}

.fi-card {
    border-radius: 0 !important;
}

.fi-wi-stats-overview-stat {
    border-radius: 0 !important;
}

/* Stats widget value */
.fi-wi-stats-overview-stat-value {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    color: var(--tw-navy) !important;
}

.fi-wi-stats-overview-stat-label {
    font-family: 'Funnel Display', sans-serif !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}

/* =============================================
   TABLES
   ============================================= */

.fi-ta-header-cell-label {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    color: var(--tw-navy) !important;
}

.fi-ta-row:hover .fi-ta-cell {
    background-color: rgba(22,62,71,0.03) !important;
}

/* =============================================
   BADGES / PILLS — border-radius: 25px per DS
   ============================================= */

.fi-badge {
    border-radius: 25px !important;
    font-family: 'Funnel Display', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28px !important;
    padding: 3px 10px !important;
}

/* =============================================
   FORM INPUTS
   ============================================= */

.fi-input,
.fi-select-input,
.fi-fo-select,
.fi-fo-input-wrp input,
.fi-fo-input-wrp textarea,
.fi-fo-input-wrp select {
    border-radius: 0 !important;
    font-family: 'Funnel Display', sans-serif !important;
}

/* =============================================
   MODALS / DIALOGS
   ============================================= */

.fi-modal-window {
    border-radius: 0 !important;
}

/* =============================================
   SEPARATORS
   ============================================= */

hr,
.fi-section-header-separator {
    border-color: var(--tw-navy-border) !important;
}

/* =============================================
   LOGIN PAGE
   ============================================= */

.fi-simple-layout {
    background-color: var(--tw-light) !important;
}

.fi-simple-layout-logo {
    font-family: 'Syne', sans-serif !important;
}

.fi-simple-main {
    border-radius: 0 !important;
    border: 1px solid var(--tw-navy-border) !important;
}

/* Login page heading */
.fi-simple-layout h1,
.fi-simple-layout .fi-simple-layout-heading {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--tw-navy) !important;
    letter-spacing: -0.5px !important;
}

/* =============================================
   DASHBOARD WIDGETS
   ============================================= */

/* Widget card wrappers — no border radius */
.fi-wi > div,
.fi-wi .rounded-xl,
.fi-wi .rounded-2xl,
.fi-wi .rounded-lg {
    border-radius: 0 !important;
}

/* AccountWidget card */
.fi-wi-account > div {
    border-radius: 0 !important;
}

/* Widget table heading */
.fi-wi-tbl .fi-section-header-heading {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--tw-navy) !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
}

/* Widget table — no rounded container */
.fi-wi-tbl > div {
    border-radius: 0 !important;
    border: 1px solid var(--tw-navy-border) !important;
    box-shadow: none !important;
}

/* Empty state in widgets */
.fi-wi .fi-ta-empty-state-icon {
    color: var(--tw-muted) !important;
}

/* =============================================
   BREADCRUMBS
   ============================================= */

.fi-breadcrumbs-item-label {
    font-family: 'Funnel Display', sans-serif;
    font-size: 14px;
    color: #6b7280;
}

.fi-breadcrumbs-item-label:last-child {
    color: var(--tw-navy);
    font-weight: 500;
}