@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   SEACOM Admin — Corporate Theme
   Navy #0d1b3e | Accent #38bdf8 | Gold #c4911a
   Fonts: Space Grotesk (headings), Inter (body)
   ══════════════════════════════════════════════════════════════════ */

:root {
    --sc-navy: #0d1b3e;
    --sc-navy-dark: #081228;
    --sc-navy-light: #162d5c;
    --sc-accent: #38bdf8;
    --sc-gold: #c4911a;
    --sc-gold-light: #e8b84b;
    --font-heading: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Headings use Space Grotesk ── */
h1, h2, h3, h4,
.fi-header-heading,
.fi-sidebar-group-label,
.fi-ta-header-cell-label,
.fi-section-header-heading {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.01em;
}

/* ── Sidebar ── */
.fi-sidebar {
    background: var(--sc-navy) !important;
    border-right-color: var(--sc-navy-light) !important;
}

.fi-sidebar-header {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

.fi-sidebar-nav-flat-item-button,
.fi-sidebar-item-button {
    color: rgba(255,255,255,0.7) !important;
    transition: all 0.15s ease;
}

.fi-sidebar-nav-flat-item-button:hover,
.fi-sidebar-item-button:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
}

.fi-sidebar-nav-flat-item-button.fi-active,
.fi-sidebar-item-button.fi-active {
    color: #fff !important;
    background: rgba(56,189,248,0.12) !important;
    border-left: 3px solid var(--sc-accent);
}

.fi-sidebar-group-label {
    color: var(--sc-accent) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.85;
}

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

.fi-sidebar-nav-flat-item-button.fi-active .fi-sidebar-nav-flat-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: var(--sc-accent) !important;
}

/* ── Topbar ── */
.fi-topbar {
    border-bottom: 2px solid var(--sc-accent) !important;
}

/* ── Brand logo / name ── */
.fi-logo {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Login page ── */
.fi-simple-layout {
    background: linear-gradient(135deg, var(--sc-navy-dark) 0%, var(--sc-navy) 50%, var(--sc-navy-light) 100%) !important;
}

.fi-simple-main-ctn {
    backdrop-filter: blur(8px);
}

/* ── Section headers ── */
.fi-section-header {
    border-bottom-color: rgba(13,27,62,0.08);
}

.dark .fi-section-header {
    border-bottom-color: rgba(56,189,248,0.1);
}

/* ── Table header cells ── */
.fi-ta-header-cell {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Badges ── */
.fi-badge {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* ── Stats widgets ── */
.fi-wi-stats-overview-stat {
    border-left: 3px solid var(--sc-accent);
}

/* ── Buttons primary ── */
.fi-btn-color-primary {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* ── Dark mode sidebar ── */
.dark .fi-sidebar {
    background: #060e1f !important;
    border-right-color: #0f1d3a !important;
}

.dark .fi-sidebar-header {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

.dark .fi-topbar {
    border-bottom-color: rgba(56,189,248,0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SEACOM Admin — Enhanced UX (April 2026)
   ══════════════════════════════════════════════════════════════════ */

/* ── Page header ── */
.fi-header {
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 1.5rem !important;
}
.dark .fi-header {
    border-bottom-color: rgba(255,255,255,0.06);
}
.fi-header-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--sc-navy) !important;
}
.dark .fi-header-heading {
    color: #fff !important;
}
.fi-header-subheading {
    color: #64748b !important;
    font-size: 0.875rem !important;
}

/* ── Table improvements ── */
.fi-ta-table {
    font-size: 0.8125rem !important;
}
.fi-ta-row {
    transition: background-color 0.1s ease;
}
.fi-ta-row:hover {
    background-color: rgba(59,130,246,0.03) !important;
}
.dark .fi-ta-row:hover {
    background-color: rgba(56,189,248,0.05) !important;
}
.fi-ta-cell {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

/* Table header polish */
.fi-ta-header-cell {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
.dark .fi-ta-header-cell {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

/* ── Form improvements ── */
.fi-fo-field-wrp {
    margin-bottom: 0.25rem !important;
}
.fi-input-wrp {
    border-radius: 0.5rem !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fi-input-wrp:focus-within {
    border-color: var(--sc-accent) !important;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.1) !important;
}

/* Section styling in forms */
.fi-section {
    border-radius: 0.75rem !important;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.dark .fi-section {
    border-color: #334155 !important;
}
.fi-section-header {
    background: #f8fafc !important;
    padding: 0.75rem 1rem !important;
}
.dark .fi-section-header {
    background: #1e293b !important;
}
.fi-section-header-heading {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* ── Action buttons ── */
.fi-btn {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
.fi-btn:hover {
    transform: translateY(-1px);
}
.fi-btn:active {
    transform: translateY(0);
}

/* Create button accent */
.fi-header .fi-btn-color-primary {
    background: var(--sc-navy) !important;
    border-color: var(--sc-navy) !important;
}
.fi-header .fi-btn-color-primary:hover {
    background: var(--sc-navy-light) !important;
}

/* ── Modal improvements ── */
.fi-modal-window {
    border-radius: 1rem !important;
    border: 1px solid rgba(0,0,0,0.08);
}
.fi-modal-header {
    border-bottom: 1px solid #e2e8f0;
    padding: 1.25rem 1.5rem !important;
}
.dark .fi-modal-header {
    border-bottom-color: #334155;
}

/* ── Notification toasts ── */
.fi-notification {
    border-radius: 0.75rem !important;
    border-left: 4px solid;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* ── Tabs in resources ── */
.fi-tabs-tab {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.01em;
    transition: all 0.15s ease;
}
.fi-tabs-tab:hover {
    color: var(--sc-navy) !important;
}
.dark .fi-tabs-tab:hover {
    color: var(--sc-accent) !important;
}

/* ── Toggle/switch styling ── */
.fi-toggle-input:checked {
    background-color: var(--sc-accent) !important;
}

/* ── Breadcrumb ── */
.fi-breadcrumbs {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

/* ── Empty state ── */
.fi-ta-empty-state {
    padding: 3rem 1rem !important;
}
.fi-ta-empty-state-heading {
    font-family: var(--font-heading) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--sc-navy) !important;
}
.dark .fi-ta-empty-state-heading {
    color: #e2e8f0 !important;
}
.fi-ta-empty-state-description {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    max-width: 24rem;
    margin: 0 auto;
}

/* ── Pagination ── */
.fi-pagination {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem;
}
.dark .fi-pagination {
    border-top-color: #334155;
}

/* ── Search / filter bar ── */
.fi-ta-search-field .fi-input-wrp {
    border-radius: 2rem !important;
    background: #f8fafc !important;
}
.dark .fi-ta-search-field .fi-input-wrp {
    background: #1e293b !important;
}

/* ── Card-like table wrapper ── */
.fi-ta-ctn {
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden;
    box-shadow: none !important;
}
.dark .fi-ta-ctn {
    border-color: #334155 !important;
}

/* ── Repeater (product images, items) ── */
.fi-fo-repeater-item {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    transition: border-color 0.2s;
}
.fi-fo-repeater-item:hover {
    border-color: #93c5fd !important;
}

/* ── File upload ── */
.fi-fo-file-upload .filepond--root {
    border-radius: 0.75rem;
}

/* ── Select / dropdown ── */
.fi-select-option {
    transition: background 0.1s;
}

/* ── Rich editor ── */
.fi-fo-rich-editor .tiptap {
    min-height: 12rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ── Status badge colors (consistent with dashboard) ── */
.fi-badge[style*="--c-50:var(--success"] { letter-spacing: 0.02em; }

/* ── Sidebar collapse button ── */
.fi-sidebar-close-btn {
    color: rgba(255,255,255,0.5) !important;
}
.fi-sidebar-close-btn:hover {
    color: #fff !important;
}

/* ── Page content max width ── */
.fi-page-content {
    max-width: 100% !important;
}

/* ── Global helpful tooltip ── */
.fi-fo-field-wrp-hint {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    font-style: italic;
}

/* ── Smooth transitions globally ── */
* {
    scroll-behavior: smooth;
}