/* ==========================================================
   UNITEDLYNKS CORPORATE PORTAL
   Role-specific layer.

   Shared brand foundation:
   unitedlynks-design-system.css

   IMPORTANT:
   - No sidebar width CSS
   - No table min-width hacks
   - No hidden overflow fixes
   - No !important
========================================================== */

@import url("./unitedlynks-design-system.css");


/* ==========================================================
   WORKSPACE
========================================================== */

.fi-body,
.fi-main-ctn {
    background: var(--ul-surface-workspace);
    color: var(--ul-text-primary);
}

.fi-main {
    padding-top: .75rem;
    padding-bottom: 1.75rem;
}

.fi-page {
    row-gap: .9rem;
}


/* ==========================================================
   TOP BAR
========================================================== */

.fi-topbar {
    background: var(--ul-surface-primary);

    border-bottom:
        1px solid
        var(--ul-border-default);

    box-shadow: none;
}

.fi-topbar nav {
    min-height: 3.8rem;
}

.fi-logo {
    color: var(--ul-brand-midnight);

    font-weight: var(--ul-weight-bold);

    letter-spacing: -.025em;
}


/* ==========================================================
   SIDEBAR
   Geometry is controlled by Filament provider.
========================================================== */

.fi-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--ul-brand-midnight) 0%,
            var(--ul-brand-navy) 100%
        );

    border-right:
        1px solid
        rgba(255,255,255,.07);
}

.fi-sidebar-nav {
    padding-inline: .55rem;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,.14)
        transparent;
}

.fi-sidebar-group {
    margin-top: .65rem;
}

.fi-sidebar-group-label {
    color: #8fa6b8;

    font-size: .63rem;
    font-weight: 760;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.fi-sidebar-item-button {
    min-height: 2.45rem;

    border-radius:
        var(--ul-radius-md);

    transition:
        background-color
        var(--ul-transition-fast),
        color
        var(--ul-transition-fast),
        box-shadow
        var(--ul-transition-fast);
}

.fi-sidebar-item-label {
    color: #e8edf2;

    font-size: .8rem;
    font-weight: 580;
}

.fi-sidebar-item-icon {
    color: #afc0cc;
}

.fi-sidebar-item-button:hover {
    background:
        rgba(255,255,255,.065);
}

.fi-sidebar-item-button:hover
.fi-sidebar-item-label,
.fi-sidebar-item-button:hover
.fi-sidebar-item-icon {
    color: #ffffff;
}

.fi-sidebar-item.fi-active
.fi-sidebar-item-button {
    background: #f5f2ec;

    box-shadow:
        inset 3px 0 0
        var(--ul-brand-gold);
}

.fi-sidebar-item.fi-active
.fi-sidebar-item-label {
    color: #15202a;
    font-weight: 700;
}

.fi-sidebar-item.fi-active
.fi-sidebar-item-icon {
    color: var(--ul-brand-gold);
}


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

.fi-header {
    margin-bottom: .65rem;
}

.fi-header-heading {
    color: #121c25;

    font-size: 1.48rem;
    font-weight: var(--ul-weight-bold);

    letter-spacing: -.03em;
    line-height: 1.15;
}

.fi-header-subheading {
    color: var(--ul-text-secondary);

    font-size: .76rem;
}

.fi-breadcrumbs {
    margin-bottom: .18rem;
}

.fi-breadcrumbs-item {
    color: var(--ul-text-muted);

    font-size: .69rem;
}


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

.fi-section,
.fi-ta,
.fi-wi-stats-overview-stat {
    background:
        var(--ul-surface-primary);

    border:
        1px solid
        var(--ul-border-default);

    border-radius:
        var(--ul-radius-lg);

    box-shadow:
        var(--ul-shadow-sm);
}

.fi-section,
.fi-wi-stats-overview-stat {
    transition:
        border-color
        var(--ul-transition-fast),
        box-shadow
        var(--ul-transition-fast);
}

.fi-section:hover,
.fi-wi-stats-overview-stat:hover {
    border-color:
        var(--ul-border-strong);

    box-shadow:
        var(--ul-shadow-md);
}

.fi-section-header {
    padding-top: .76rem;
    padding-bottom: .7rem;
}

.fi-section-header-heading {
    color: var(--ul-text-primary);

    font-weight: 710;
}

.fi-section-header-description {
    color: var(--ul-text-secondary);

    font-size: .72rem;
}


/* ==========================================================
   CORPORATE KPI CARDS
========================================================== */

.fi-wi-stats-overview-stat {
    position: relative;

    overflow: visible;

    padding: .9rem 1rem;
}

.fi-wi-stats-overview-stat::before {
    content: "";

    position: absolute;

    top: 0;
    left: 1rem;
    right: 1rem;

    height: 2px;

    background:
        var(--ul-brand-gold);

    opacity: .55;
}

.fi-wi-stats-overview-stat-label {
    color: var(--ul-text-secondary);

    font-size: .68rem;
    font-weight: 650;
}

.fi-wi-stats-overview-stat-value {
    color: var(--ul-brand-midnight);

    font-size: 1.42rem;
    font-weight: 740;

    letter-spacing: -.025em;
}

.fi-wi-stats-overview-stat-description {
    color: var(--ul-text-muted);

    font-size: .67rem;
}


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

.fi-ta-header {
    min-height: 3.1rem;

    background:
        var(--ul-surface-secondary);

    border-bottom:
        1px solid
        var(--ul-border-default);
}

.fi-ta-table {
    font-size: .77rem;
}

.fi-ta-header-cell {
    background: #f8f7f4;

    color: #505b65;

    font-size: .65rem;
    font-weight: 720;

    letter-spacing: .02em;
}

.fi-ta-header-cell,
.fi-ta-cell {
    padding-inline: .64rem;
}

.fi-ta-cell {
    color: #202a33;
}

.fi-ta-row {
    background: #ffffff;

    transition:
        background-color
        var(--ul-transition-fast),
        box-shadow
        var(--ul-transition-fast);
}

.fi-ta-row:hover {
    background: #f9f8f5;

    box-shadow:
        inset 3px 0 0
        rgba(152,112,58,.35);
}

.fi-ta-footer {
    border-top:
        1px solid
        var(--ul-border-default);
}


/* ==========================================================
   FORMS
========================================================== */

.fi-input-wrp {
    background: #ffffff;

    border-color:
        var(--ul-border-default);

    border-radius:
        var(--ul-radius-md);

    box-shadow: none;

    transition:
        border-color
        var(--ul-transition-fast),
        box-shadow
        var(--ul-transition-fast);
}

.fi-input-wrp:hover {
    border-color:
        var(--ul-border-strong);
}

.fi-input-wrp:focus-within {
    border-color:
        rgba(152,112,58,.7);

    box-shadow:
        0 0 0 3px
        rgba(152,112,58,.09);
}

.fi-fo-field-wrp-label {
    color: #39444e;

    font-size: .72rem;
    font-weight: 650;
}

.fi-fo-field-wrp-helper-text {
    color: var(--ul-text-muted);

    font-size: .68rem;
}


/* ==========================================================
   ACTIONS
========================================================== */

.fi-btn {
    border-radius:
        var(--ul-radius-md);

    font-weight: 660;

    transition:
        background-color
        var(--ul-transition-fast),
        border-color
        var(--ul-transition-fast),
        box-shadow
        var(--ul-transition-fast),
        transform
        var(--ul-transition-fast);
}

.fi-btn:hover {
    transform:
        translateY(-1px);

    box-shadow:
        var(--ul-shadow-sm);
}

.fi-btn.fi-color-primary {
    color: #ffffff;

    background:
        var(--ul-brand-gold);

    border-color:
        var(--ul-brand-gold);
}

.fi-btn.fi-color-primary:hover {
    color: #ffffff;

    background:
        var(--ul-brand-gold-hover);

    border-color:
        var(--ul-brand-gold-hover);
}


/* ==========================================================
   BADGES
========================================================== */

.fi-badge {
    border-radius:
        var(--ul-radius-pill);

    font-size: .64rem;
    font-weight: 700;
}


/* ==========================================================
   TABS
========================================================== */

.fi-tabs-item {
    border-radius:
        var(--ul-radius-md);

    transition:
        background-color
        var(--ul-transition-fast),
        color
        var(--ul-transition-fast);
}

.fi-tabs-item:hover {
    background:
        var(--ul-surface-secondary);
}

.fi-tabs-item.fi-active {
    color:
        var(--ul-brand-gold);
}


/* ==========================================================
   RECORD DETAILS
========================================================== */

.fi-in {
    gap: .72rem;
}

.fi-in .fi-section {
    box-shadow: none;
}

.fi-in .fi-section-header {
    padding: .68rem .9rem;

    background: #faf9f7;

    border-bottom:
        1px solid
        var(--ul-border-default);
}

.fi-in .fi-section-header-heading {
    color: #1b2731;

    font-size: .81rem;
    font-weight: 720;
}

.fi-in .fi-section-content {
    padding: .84rem .94rem;
}

.fi-in-entry-wrp-label {
    color: var(--ul-text-muted);

    font-size: .64rem;
    font-weight: 650;
}

.fi-in-entry-wrp-state {
    color: #17212b;

    font-size: .79rem;

    line-height: 1.45;
}


/* ==========================================================
   MODALS / DROPDOWNS
========================================================== */

.fi-modal-window,
.fi-dropdown-panel {
    border:
        1px solid
        var(--ul-border-default);

    border-radius:
        var(--ul-radius-lg);

    box-shadow:
        var(--ul-shadow-lg);
}


/* ==========================================================
   CORPORATE ACCOUNT CONTEXT
   Available for later dashboard/profile composition.
========================================================== */

.ul-corporate-context {
    padding: .9rem 1rem;

    background:
        var(--ul-surface-primary);

    border:
        1px solid
        var(--ul-border-default);

    border-left:
        3px solid
        var(--ul-brand-gold);

    border-radius:
        var(--ul-radius-lg);

    box-shadow:
        var(--ul-shadow-sm);
}

.ul-corporate-context__eyebrow {
    color:
        var(--ul-brand-gold);

    font-size: .61rem;
    font-weight: 780;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.ul-corporate-context__title {
    margin-top: .2rem;

    color:
        var(--ul-brand-midnight);

    font-size: 1.08rem;
    font-weight: 730;
}

.ul-corporate-context__meta {
    margin-top: .2rem;

    color:
        var(--ul-text-secondary);

    font-size: .72rem;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .fi-main {
        padding-top: .6rem;
    }

    .fi-header-heading {
        font-size: 1.32rem;
    }
}