/* ============================================================
   MayorCred Admin — Tema unificado premium v2
   Dark sidebar + light content area
   ============================================================ */

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

/* ── Design tokens ────────────────────────────────────────── */
:root {
    /* Brand */
    --mc-primary:          #59C3B0;
    --mc-primary-dark:     #3fa896;
    --mc-primary-glow:     rgba(89,195,176,.22);

    /* Sidebar — dark navy */
    --mc-sidebar-bg:       #0f172a;
    --mc-sidebar-top-bg:   #090e1a;
    --mc-sidebar-border:   rgba(255,255,255,.09);
    --mc-sidebar-text:     #cbd5e1;
    --mc-sidebar-text-h:   #ffffff;
    --mc-sidebar-active:   rgba(89,195,176,.18);
    --mc-sidebar-active-t: #5ed8c4;
    --mc-sidebar-group:    #64748b;

    /* Main area */
    --mc-body-bg:          #f0f4f8;
    --mc-topbar-bg:        #ffffff;
    --mc-topbar-border:    #e2e8f0;

    /* Cards */
    --mc-card-bg:          #ffffff;
    --mc-card-border:      #e8edf3;
    --mc-card-shadow:      0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --mc-card-shadow-lg:   0 8px 24px rgba(15,23,42,.10);

    /* Typography */
    --mc-t1:               #0f172a;
    --mc-t2:               #334155;
    --mc-t3:               #64748b;
    --mc-t4:               #94a3b8;

    /* Table */
    --mc-th-bg:            #f8fafc;
    --mc-tr-alt:           #fcfcfd;
    --mc-tr-hover:         #f0f7ff;
    --mc-td-border:        #edf1f7;

    /* Inputs */
    --mc-in-bg:            #ffffff;
    --mc-in-border:        #cbd5e1;
    --mc-in-focus:         #59C3B0;

    /* Radius */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   18px;

    /* Transitions */
    --t-fast: 140ms cubic-bezier(.4,0,.2,1);
    --t-mid:  220ms cubic-bezier(.4,0,.2,1);
}

/* ── Global typography ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, .fi-body,
input, select, textarea, button {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Layout base ──────────────────────────────────────────── */
body, .fi-body { background: var(--mc-body-bg) !important; }
.fi-main       { background: var(--mc-body-bg) !important; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — dark navy premium
   ═══════════════════════════════════════════════════════════ */
.fi-sidebar {
    background: var(--mc-sidebar-bg) !important;
    border-right: 1px solid var(--mc-sidebar-border) !important;
}

/* Brand / logo area */
.fi-sidebar-header {
    background: var(--mc-sidebar-top-bg) !important;
    border-bottom: 1px solid var(--mc-sidebar-border) !important;
    padding: 1rem 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 4rem !important;
}
.fi-sidebar-header img {
    max-height: 2.2rem !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}
.fi-sidebar-header .fi-brand-name,
.fi-sidebar-header span {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: -.01em !important;
}

/* Group labels */
.fi-sidebar-group-label {
    color: var(--mc-sidebar-group) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding-inline: 1rem !important;
    margin-top: .5rem !important;
}

/* Nav items */
.fi-sidebar-item-button {
    color: var(--mc-sidebar-text) !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    border-radius: var(--r-md) !important;
    margin-inline: .5rem !important;
    padding: .5rem .7rem !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
    letter-spacing: .005em !important;
}
.fi-sidebar-item-button:hover {
    background: rgba(255,255,255,.09) !important;
    color: var(--mc-sidebar-text-h) !important;
}
/* Active */
.fi-sidebar-item-button[aria-current],
.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active {
    background: var(--mc-sidebar-active) !important;
    color: var(--mc-sidebar-active-t) !important;
    font-weight: 600 !important;
}
/* Icons */
.fi-sidebar-item-icon { opacity: .9 !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon { opacity: 1 !important; }

/* Scrollbar inside sidebar */
.fi-sidebar *::-webkit-scrollbar { width: 4px; }
.fi-sidebar *::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════ */
.fi-topbar {
    background: var(--mc-topbar-bg) !important;
    border-bottom: 1px solid var(--mc-topbar-border) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
}
.fi-topbar * { color: var(--mc-t2) !important; }

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.fi-header {
    padding-block: 1.75rem 1.25rem !important;
    background: transparent !important;
}
.fi-header-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--mc-t1) !important;
    letter-spacing: -.025em !important;
    line-height: 1.2 !important;
}
.fi-header-subheading {
    color: var(--mc-t3) !important;
    font-size: 0.9rem !important;
    margin-top: .2rem !important;
}
.fi-breadcrumbs-item-label { color: var(--mc-t3) !important; font-size: .8rem !important; }
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--mc-t1) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS / SECTIONS
   ═══════════════════════════════════════════════════════════ */
.fi-section, .fi-card {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--mc-card-shadow) !important;
    overflow: hidden !important;
}
.fi-section-header {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--mc-card-border) !important;
    padding: 1rem 1.5rem !important;
}
.fi-section-content { padding: 1.5rem !important; }
.fi-section-header-heading {
    font-size: .925rem !important;
    font-weight: 700 !important;
    color: var(--mc-t1) !important;
    letter-spacing: -.01em !important;
}
.fi-section-header-description {
    color: var(--mc-t3) !important;
    font-size: .8rem !important;
}

/* ═══════════════════════════════════════════════════════════
   WIDGETS — Stats Overview
   ═══════════════════════════════════════════════════════════ */
.fi-wi-stats-overview-stat {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--mc-card-shadow) !important;
    padding: 1.4rem 1.6rem !important;
    transition: box-shadow var(--t-mid) !important;
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--mc-card-shadow-lg) !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--mc-t3) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
.fi-wi-stats-overview-stat-value {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--mc-t1) !important;
    letter-spacing: -.03em !important;
    line-height: 1.1 !important;
    margin-block: .35rem .25rem !important;
}
.fi-wi-stats-overview-stat-description {
    font-size: .78rem !important;
    color: var(--mc-t3) !important;
}
.fi-wi-stats-overview-stat-description-icon { opacity: .7; }

/* Stat icon - use brand green */
.fi-wi-stats-overview-stat-icon {
    background: var(--mc-primary-light, #e6f7f5) !important;
    color: var(--mc-primary) !important;
    border-radius: var(--r-md) !important;
    padding: .6rem !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.fi-ta-ctn {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--mc-card-shadow) !important;
    overflow: hidden !important;
}
.fi-ta-header {
    background: var(--mc-card-bg) !important;
    border-bottom: 1px solid var(--mc-card-border) !important;
    padding: 1rem 1.25rem !important;
}
.fi-ta-header-cell {
    background: var(--mc-th-bg) !important;
    color: var(--mc-t1) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: .75rem 1rem !important;
    border-bottom: 1px solid #dde4ee !important;
}
.fi-ta-cell {
    color: var(--mc-t2) !important;
    font-size: .875rem !important;
    padding: .85rem 1rem !important;
    border-bottom: 1px solid var(--mc-td-border) !important;
    transition: background var(--t-fast) !important;
}
.fi-ta-row:nth-child(even) .fi-ta-cell { background: var(--mc-tr-alt) !important; }
.fi-ta-row:hover .fi-ta-cell           { background: var(--mc-tr-hover) !important; }
.fi-ta-row:last-child .fi-ta-cell      { border-bottom: none !important; }

/* Empty state */
.fi-ta-empty-state-heading { color: var(--mc-t1) !important; font-weight: 700 !important; }
.fi-ta-empty-state-description { color: var(--mc-t3) !important; }

/* Filters */
.fi-ta-filters-form { background: #fafbfc !important; border-bottom: 1px solid var(--mc-card-border) !important; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp > label {
    color: var(--mc-t1) !important;
    font-size: .825rem !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
}
.fi-fo-field-wrp-helper-text { color: var(--mc-t3) !important; font-size: .78rem !important; }

.fi-input, .fi-select-input, textarea.fi-input {
    background: var(--mc-in-bg) !important;
    border: 1.5px solid var(--mc-in-border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--mc-t1) !important;
    font-size: .875rem !important;
    padding: .55rem .75rem !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.fi-input:focus, .fi-select-input:focus {
    border-color: var(--mc-in-focus) !important;
    box-shadow: 0 0 0 3px var(--mc-primary-glow) !important;
    outline: none !important;
}
.fi-input::placeholder { color: var(--mc-t4) !important; }

/* Toggle */
.fi-toggle-button[aria-checked="true"] { background-color: var(--mc-primary) !important; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.fi-btn {
    font-size: .85rem !important;
    font-weight: 600 !important;
    border-radius: var(--r-md) !important;
    padding: .55rem 1.1rem !important;
    transition: filter var(--t-fast), box-shadow var(--t-fast) !important;
    letter-spacing: -.01em !important;
}
.fi-btn:hover { filter: brightness(1.06) !important; }
.fi-btn:active { filter: brightness(.96) !important; }

.fi-btn-color-primary {
    background: var(--mc-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(89,195,176,.35) !important;
}
.fi-btn-color-primary:hover {
    box-shadow: 0 4px 12px rgba(89,195,176,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.fi-badge {
    font-size: .72rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: .2rem .65rem !important;
    letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.fi-modal-window {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08) !important;
}
.fi-modal-header {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--mc-card-border) !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.fi-modal-header-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--mc-t1) !important;
    letter-spacing: -.015em !important;
}
.fi-modal-content { padding: 1.5rem !important; }
.fi-modal-footer {
    border-top: 1px solid var(--mc-card-border) !important;
    background: #fafbfc !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
}
/* Overlay */
.fi-modal-close-overlay { background: rgba(15,23,42,.45) !important; backdrop-filter: blur(4px); }

/* ═══════════════════════════════════════════════════════════
   TABS / RELATION MANAGERS
   ═══════════════════════════════════════════════════════════ */
.fi-tabs-tab {
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: var(--mc-t3) !important;
    padding-block: .75rem !important;
    transition: color var(--t-fast) !important;
}
.fi-tabs-tab:hover { color: var(--mc-t1) !important; }
.fi-tabs-tab[aria-selected="true"] {
    color: var(--mc-t1) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--mc-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.fi-pagination { padding: .75rem 1rem !important; }
.fi-pagination-item-button {
    font-size: .825rem !important;
    color: var(--mc-t2) !important;
    border-color: var(--mc-card-border) !important;
    border-radius: var(--r-sm) !important;
    min-width: 2rem !important;
    transition: background var(--t-fast) !important;
}
.fi-pagination-item-button:hover { background: #eef2ff !important; }
.fi-pagination-item-button[aria-current="page"] {
    background: var(--mc-primary) !important;
    color: #fff !important;
    border-color: var(--mc-primary) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */
.fi-no-notification {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--mc-card-shadow-lg) !important;
}
.fi-no-notification-title { color: var(--mc-t1) !important; font-weight: 700 !important; }
.fi-no-notification-body  { color: var(--mc-t3) !important; font-size: .85rem !important; }

/* ═══════════════════════════════════════════════════════════
   DROPDOWN PANELS
   ═══════════════════════════════════════════════════════════ */
.fi-dropdown-panel {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--mc-card-shadow-lg) !important;
}

/* ═══════════════════════════════════════════════════════════
   INFOLIST entries
   ═══════════════════════════════════════════════════════════ */
.fi-in-entry-wrp-label { color: var(--mc-t3) !important; font-size: .72rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .07em !important; }
.fi-in-text { color: var(--mc-t1) !important; font-size: .9rem !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════
   ACTIONS inside forms (download template button etc.)
   ═══════════════════════════════════════════════════════════ */
.fi-ac-actions { gap: .5rem !important; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDE — force everything to light
   ═══════════════════════════════════════════════════════════ */
.dark .fi-main,
.dark .fi-section,
.dark .fi-card,
.dark .fi-ta-ctn,
.dark .fi-topbar {
    background: var(--mc-card-bg) !important;
    color: var(--mc-t1) !important;
}
.dark .fi-sidebar { background: var(--mc-sidebar-bg) !important; }
.dark body        { background: var(--mc-body-bg) !important; }