/* ==========================================================================
   AL TASAMI BUSINESS CONTROL CENTER
   Global Application Stylesheet
   ========================================================================== */


/* ==========================================================================
   ROOT / THEME
   ========================================================================== */

:root {

    --bg:
        #08111f;

    --bg-deep:
        #050b14;

    --sidebar:
        #091524;

    --panel:
        #0d1829;

    --panel-2:
        #111e31;

    --panel-3:
        #142238;

    --panel-hover:
        #16283f;


    /*
    |--------------------------------------------------------------------------
    | Improved text contrast
    |--------------------------------------------------------------------------
    */

    --text:
        #f8fafc;

    --text-normal:
        #d7e0ec;

    --text-secondary:
        #aebdd0;

    --text-muted:
        #8fa2b8;

    --text-disabled:
        #70839a;


    /*
    |--------------------------------------------------------------------------
    | Brand / Accent
    |--------------------------------------------------------------------------
    */

    --primary:
        #3b82f6;

    --primary-dark:
        #2563eb;

    --primary-light:
        #60a5fa;

    --cyan:
        #0ea5e9;

    --link:
        #93c5fd;

    --link-hover:
        #bfdbfe;


    /*
    |--------------------------------------------------------------------------
    | Status colors
    |--------------------------------------------------------------------------
    */

    --success:
        #22c55e;

    --success-text:
        #86efac;

    --warning:
        #f59e0b;

    --warning-text:
        #fcd34d;

    --danger:
        #ef4444;

    --danger-text:
        #fca5a5;


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --border:
        rgba(148,163,184,.14);

    --border-soft:
        rgba(148,163,184,.09);

    --border-blue:
        rgba(96,165,250,.30);


    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow:
        0 18px 50px rgba(0,0,0,.25);

    --shadow-soft:
        0 10px 30px rgba(0,0,0,.16);


    /*
    |--------------------------------------------------------------------------
    | Radius
    |--------------------------------------------------------------------------
    */

    --radius-sm:
        10px;

    --radius:
        14px;

    --radius-lg:
        18px;

    --radius-xl:
        22px;


    /*
    |--------------------------------------------------------------------------
    | Sidebar dimensions
    |--------------------------------------------------------------------------
    */

    --sidebar-width:
        255px;
}


/* ==========================================================================
   RESET
   ========================================================================== */

* {
    box-sizing:
        border-box;
}


html {
    margin:
        0;

    padding:
        0;

    min-height:
        100%;

    background:
        var(--bg);
}


body {
    margin:
        0;

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text-normal);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


a {
    color:
        var(--link);
}


a:hover {
    color:
        var(--link-hover);
}


button,
input,
select,
textarea {
    font:
        inherit;
}


button {
    cursor:
        pointer;
}


img {
    max-width:
        100%;
}


/* ==========================================================================
   TEXT
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--text);

    font-weight:
        700;
}


p {
    color:
        var(--text-secondary);
}


strong {
    color:
        var(--text);
}


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

.login-body {
    margin:
        0;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--bg-deep);

    color:
        var(--text);
}


.login-background {
    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;
}


.orb {
    position:
        absolute;

    border-radius:
        999px;

    filter:
        blur(85px);

    opacity:
        .25;
}


.orb-one {
    width:
        420px;

    height:
        420px;

    left:
        -120px;

    top:
        -130px;

    background:
        #2563eb;
}


.orb-two {
    width:
        360px;

    height:
        360px;

    right:
        -100px;

    top:
        20%;

    background:
        #0ea5e9;
}


.orb-three {
    width:
        300px;

    height:
        300px;

    bottom:
        -140px;

    left:
        40%;

    background:
        #1d4ed8;
}


.login-layout {
    position:
        relative;

    z-index:
        2;

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(420px,.85fr);
}


.login-brand-panel {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(
            45px,
            7vw,
            100px
        );

    background:
        linear-gradient(
            135deg,
            rgba(10,24,44,.92),
            rgba(8,17,31,.65)
        );
}


.brand-badge {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        26px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(96,165,250,.20);

    border-radius:
        999px;

    background:
        rgba(59,130,246,.08);

    color:
        #93c5fd;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.login-brand-panel h1 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            40px,
            5vw,
            67px
        );

    line-height:
        1.03;

    letter-spacing:
        -.045em;
}


.login-brand-panel h1 span {
    display:
        block;

    color:
        #60a5fa;
}


.login-brand-description {
    max-width:
        640px;

    margin:
        24px 0 32px;

    color:
        #b9c8da;

    font-size:
        15px;

    line-height:
        1.75;
}


.login-feature-grid {
    max-width:
        680px;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        12px;
}


.login-feature {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px;

    border:
        1px solid
        rgba(148,163,184,.11);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);
}


.login-feature > i {
    width:
        39px;

    height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 39px;

    border-radius:
        11px;

    background:
        rgba(59,130,246,.11);

    color:
        #60a5fa;

    font-size:
        17px;
}


.login-feature strong {
    display:
        block;

    color:
        #f8fafc;

    font-size:
        12px;
}


.login-feature span {
    display:
        block;

    margin-top:
        3px;

    color:
        #9fb0c5;

    font-size:
        10px;
}


.login-form-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        35px;

    background:
        rgba(5,11,20,.45);
}


.login-card {
    width:
        100%;

    max-width:
        430px;

    padding:
        31px;

    border:
        1px solid
        rgba(148,163,184,.14);

    border-radius:
        23px;

    background:
        rgba(13,24,41,.88);

    backdrop-filter:
        blur(20px);

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


.login-card-header {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        27px;
}


.login-logo-icon {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color:
        #ffffff;

    font-size:
        20px;

    box-shadow:
        0 10px 28px
        rgba(37,99,235,.22);
}


.login-card-header h2 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        21px;
}


.login-card-header p {
    margin:
        4px 0 0;

    color:
        #9fb0c5;

    font-size:
        11px;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-box {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        18px;

    padding:
        11px 13px;

    border-radius:
        11px;

    font-size:
        11px;

    line-height:
        1.5;
}


.alert-box.danger {
    border:
        1px solid
        rgba(239,68,68,.20);

    background:
        rgba(239,68,68,.08);

    color:
        #fecaca;
}


.alert-box.warning {
    border:
        1px solid
        rgba(245,158,11,.20);

    background:
        rgba(245,158,11,.08);

    color:
        #fde68a;
}


.alert-box.success {
    border:
        1px solid
        rgba(34,197,94,.20);

    background:
        rgba(34,197,94,.08);

    color:
        #bbf7d0;
}


/* ==========================================================================
   FORM FIELDS
   ========================================================================== */

.form-group {
    margin-bottom:
        17px;
}


.form-group label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #cbd5e1;

    font-size:
        11px;

    font-weight:
        700;
}


.input-wrap {
    position:
        relative;
}


.input-wrap > i {
    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8295aa;

    pointer-events:
        none;
}


.input-wrap input {
    width:
        100%;

    min-height:
        46px;

    padding:
        10px 45px 10px 42px;

    border:
        1px solid
        rgba(148,163,184,.15);

    border-radius:
        12px;

    outline:
        none;

    background:
        rgba(255,255,255,.025);

    color:
        #f8fafc;

    transition:
        border-color .18s,
        box-shadow .18s,
        background .18s;
}


.input-wrap input::placeholder {
    color:
        #70839a;
}


.input-wrap input:focus {
    border-color:
        rgba(96,165,250,.55);

    background:
        rgba(255,255,255,.035);

    box-shadow:
        0 0 0 3px
        rgba(59,130,246,.08);
}


.password-toggle {
    position:
        absolute;

    right:
        7px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #94a3b8;
}


.password-toggle:hover {
    color:
        #ffffff;

    background:
        rgba(255,255,255,.04);
}


.login-button {
    width:
        100%;

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        23px;

    padding:
        10px 16px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    box-shadow:
        0 10px 30px
        rgba(37,99,235,.20);
}


.login-button:hover {
    filter:
        brightness(1.08);
}


.login-security {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        22px;

    color:
        #8fa2b8;

    font-size:
        10px;
}


/* ==========================================================================
   GENERAL FORM CONTROLS
   ========================================================================== */

input,
select,
textarea {
    border:
        1px solid
        rgba(148,163,184,.16);

    border-radius:
        10px;

    outline:
        none;

    background:
        #0b1728;

    color:
        #f8fafc;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(96,165,250,.52);

    box-shadow:
        0 0 0 3px
        rgba(59,130,246,.08);
}


select option {
    background:
        #0d1829;

    color:
        #f8fafc;
}


textarea {
    resize:
        vertical;
}


/* ==========================================================================
   DASHBOARD LAYOUT
   ========================================================================== */

.dashboard-body {
    background:
        var(--bg);

    min-height:
        100vh;
}


.app-shell {
    min-height:
        100vh;
}


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

.sidebar {
    position:
        fixed;

    top:
        0;

    left:
        0;

    bottom:
        0;

    width:
        var(--sidebar-width);

    display:
        flex;

    flex-direction:
        column;

    z-index:
        1000;

    border-right:
        1px solid
        rgba(148,163,184,.09);

    background:
        linear-gradient(
            180deg,
            #091524,
            #07111f
        );

    box-shadow:
        12px 0 35px
        rgba(0,0,0,.08);
}


.sidebar-brand {
    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        17px 20px;

    border-bottom:
        1px solid
        rgba(148,163,184,.08);
}


.sidebar-brand-icon {
    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 40px;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color:
        #ffffff;

    font-size:
        16px;
}


.sidebar-brand strong {
    display:
        block;

    color:
        #ffffff;

    font-size:
        12px;

    letter-spacing:
        .07em;
}


.sidebar-brand span {
    display:
        block;

    margin-top:
        3px;

    color:
        #93a6bc;

    font-size:
        8px;

    letter-spacing:
        .11em;
}


.sidebar-nav {
    flex:
        1;

    overflow-y:
        auto;

    padding:
        16px 11px 22px;
}


.nav-group-label {
    margin:
        17px 10px 8px;

    color:
        #8295aa;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .17em;
}


.nav-item {
    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        3px 0;

    padding:
        10px 12px;

    border:
        1px solid
        transparent;

    border-radius:
        11px;

    color:
        #bcc9d8;

    text-decoration:
        none;

    font-size:
        11px;

    transition:
        all .16s;
}


.nav-item > i {
    width:
        19px;

    color:
        #91a4ba;

    font-size:
        15px;
}


.nav-item:hover {
    border-color:
        rgba(148,163,184,.10);

    background:
        rgba(255,255,255,.035);

    color:
        #ffffff;
}


.nav-item:hover > i {
    color:
        #93c5fd;
}


.nav-item.active {
    border-color:
        rgba(96,165,250,.18);

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.18),
            rgba(14,165,233,.05)
        );

    color:
        #ffffff;

    font-weight:
        700;
}


.nav-item.active > i {
    color:
        #60a5fa;
}


.nav-item.disabled {
    cursor:
        default;

    color:
        #71849b;
}


.nav-item.disabled > i {
    color:
        #66798f;
}


.nav-item.disabled:hover {
    border-color:
        transparent;

    background:
        transparent;
}


.nav-item small {
    margin-left:
        auto;

    padding:
        3px 6px;

    border-radius:
        999px;

    background:
        rgba(148,163,184,.08);

    color:
        #7f92a8;

    font-size:
        7px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.sidebar-footer {
    padding:
        13px;

    border-top:
        1px solid
        rgba(148,163,184,.08);
}


.sidebar-logout {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 12px;

    border-radius:
        10px;

    color:
        #abb9c9;

    text-decoration:
        none;

    font-size:
        11px;
}


.sidebar-logout:hover {
    background:
        rgba(239,68,68,.07);

    color:
        #fca5a5;
}


/* ==========================================================================
   MAIN AREA
   ========================================================================== */

.main-area {
    min-height:
        100vh;

    margin-left:
        var(--sidebar-width);

    display:
        flex;

    flex-direction:
        column;
}


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

.topbar {
    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 27px;

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    border-bottom:
        1px solid
        rgba(148,163,184,.09);

    background:
        rgba(8,17,31,.91);

    backdrop-filter:
        blur(18px);
}


.topbar-left {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.topbar-left h1 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        17px;
}


.topbar-left p {
    margin:
        4px 0 0;

    color:
        #9fb0c5;

    font-size:
        10px;
}


.mobile-menu-button {
    display:
        none;

    width:
        39px;

    height:
        39px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(148,163,184,.12);

    border-radius:
        11px;

    background:
        #111e31;

    color:
        #ffffff;

    font-size:
        18px;
}


.topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.company-display,
.company-selector {
    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(148,163,184,.11);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.025);

    color:
        #c5d1df;

    font-size:
        10px;
}


.company-display i,
.company-selector i {
    color:
        #60a5fa;
}


.company-selector select {
    border:
        0;

    outline:
        none;

    padding:
        2px 22px 2px 3px;

    background:
        transparent;

    color:
        #d7e0ec;

    font-size:
        10px;
}


.user-pill {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        4px 7px 4px 4px;

    border:
        1px solid
        rgba(148,163,184,.10);

    border-radius:
        13px;

    background:
        rgba(255,255,255,.02);
}


.user-avatar {
    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;
}


.user-details strong,
.user-details span {
    display:
        block;
}


.user-details strong {
    color:
        #f8fafc;

    font-size:
        10px;
}


.user-details span {
    max-width:
        150px;

    margin-top:
        2px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    color:
        #8fa2b8;

    font-size:
        8px;
}


/* ==========================================================================
   DASHBOARD CONTENT
   ========================================================================== */

.dashboard-content {
    flex:
        1;

    width:
        100%;

    max-width:
        1600px;

    margin:
        0 auto;

    padding:
        29px;
}


/* ==========================================================================
   WELCOME
   ========================================================================== */

.welcome-section {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        30px;

    padding:
        27px;

    border:
        1px solid
        rgba(96,165,250,.13);

    border-radius:
        21px;

    background:
        linear-gradient(
            125deg,
            rgba(37,99,235,.12),
            rgba(14,165,233,.025)
        );
}


.welcome-label {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #7eb7ff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.welcome-section h2 {
    margin:
        9px 0 6px;

    color:
        #ffffff;

    font-size:
        clamp(
            25px,
            3.5vw,
            36px
        );

    letter-spacing:
        -.035em;
}


.welcome-section p {
    margin:
        0;

    color:
        #b6c4d5;

    font-size:
        12px;
}


.system-status {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex:
        0 0 auto;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(34,197,94,.12);

    border-radius:
        999px;

    background:
        rgba(34,197,94,.06);

    color:
        #86efac;

    font-size:
        10px;
}


.status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 12px
        rgba(34,197,94,.8);
}


/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.section-block {
    margin-top:
        30px;
}


.section-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        16px;
}


.section-eyebrow {
    color:
        #8295aa;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}


.section-heading h3 {
    margin:
        5px 0 0;

    color:
        #f8fafc;

    font-size:
        19px;
}


.section-heading > p {
    margin:
        0;

    color:
        #a3b3c5;

    font-size:
        10px;
}


/* ==========================================================================
   MODULE CARDS
   ========================================================================== */

.module-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        15px;
}


.module-card {
    min-height:
        208px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        20px;

    border:
        1px solid
        rgba(148,163,184,.12);

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            #111e31,
            #0d1829
        );

    color:
        #f8fafc;

    text-decoration:
        none;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.05);

    transition:
        transform .18s,
        border-color .18s,
        box-shadow .18s,
        background .18s;
}


a.module-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(96,165,250,.30);

    background:
        linear-gradient(
            145deg,
            #13233a,
            #0f1c30
        );

    box-shadow:
        0 17px 40px
        rgba(0,0,0,.16);
}


.module-card.coming-soon {
    opacity:
        .72;
}


.module-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.module-icon {
    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(59,130,246,.10);

    color:
        #60a5fa;

    font-size:
        20px;
}


.module-status {
    padding:
        5px 7px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}


.module-status.live {
    background:
        rgba(34,197,94,.09);

    color:
        #86efac;
}


.module-status.future {
    background:
        rgba(148,163,184,.08);

    color:
        #899bb0;
}


.module-card h4 {
    margin:
        20px 0 7px;

    color:
        #f8fafc;

    font-size:
        15px;
}


.module-card p {
    flex:
        1;

    margin:
        0;

    color:
        #aebdd0;

    font-size:
        10.5px;

    line-height:
        1.65;
}


.module-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        18px;

    color:
        #93c5fd;

    font-size:
        10px;

    font-weight:
        700;
}


.module-link.muted {
    color:
        #8295aa;
}


/* ==========================================================================
   FOUNDATION CARDS
   ========================================================================== */

.foundation-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        13px;
}


.foundation-card {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        94px;

    padding:
        16px;

    border:
        1px solid
        rgba(148,163,184,.10);

    border-radius:
        15px;

    background:
        rgba(17,30,49,.72);
}


.foundation-card > i {
    width:
        39px;

    height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 39px;

    border-radius:
        11px;

    background:
        rgba(59,130,246,.09);

    color:
        #60a5fa;

    font-size:
        17px;
}


.foundation-card strong {
    display:
        block;

    color:
        #f8fafc;

    font-size:
        11px;
}


.foundation-card span {
    display:
        block;

    margin-top:
        4px;

    color:
        #a1b1c4;

    font-size:
        9px;

    line-height:
        1.45;
}


/* ==========================================================================
   DASHBOARD FOOTER
   ========================================================================== */

.dashboard-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 29px;

    border-top:
        1px solid
        rgba(148,163,184,.07);

    color:
        #8295aa;

    font-size:
        9px;
}


/* ==========================================================================
   ADMIN / SETTINGS GENERIC
   ========================================================================== */

.admin-page,
.settings-body {
    color:
        var(--text-normal);
}


.admin-header h1,
.settings-title h1,
.settings-section-header h3 {
    color:
        #f8fafc;
}


.admin-header p,
.settings-title p {
    color:
        #aebdd0 !important;
}


.settings-user-text strong {
    color:
        #f8fafc;
}


.settings-user-text span {
    color:
        #9fb0c5 !important;
}


.settings-hero p {
    color:
        #b6c4d5 !important;
}


.settings-section-header span {
    color:
        #8fa2b8 !important;
}


.settings-card h4 {
    color:
        #f8fafc;
}


.settings-card p {
    color:
        #aebdd0 !important;
}


.settings-card-link {
    color:
        #93c5fd;
}


.settings-card-link.muted {
    color:
        #8295aa !important;
}


.settings-footer {
    color:
        #8fa2b8 !important;
}


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

.user-table-card,
.table-card {
    border:
        1px solid
        rgba(148,163,184,.12);

    background:
        #0d1829;

    color:
        #d7e0ec;
}


.user-table,
.data-table {
    width:
        100%;

    border-collapse:
        collapse;
}


.user-table th,
.data-table th {
    color:
        #9fb0c5 !important;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.user-table td,
.data-table td {
    color:
        #d7e0ec !important;
}


.user-name {
    color:
        #ffffff !important;

    font-weight:
        700;
}


.user-email {
    color:
        #9fb0c5 !important;
}


.edit-link {
    color:
        #93c5fd !important;

    font-weight:
        700;
}


.edit-link:hover {
    color:
        #bfdbfe !important;
}


.empty-state {
    color:
        #aebdd0 !important;
}


/* ==========================================================================
   GENERIC TABLE
   ========================================================================== */

table {
    color:
        var(--text-normal);
}


table th {
    color:
        #9fb0c5;
}


table td {
    color:
        #d7e0ec;
}


/* ==========================================================================
   GENERIC BUTTONS
   ========================================================================== */

.btn,
.admin-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid
        rgba(148,163,184,.15);

    border-radius:
        11px;

    background:
        #111e31;

    color:
        #f8fafc;

    text-decoration:
        none;

    transition:
        all .17s;
}


.btn:hover,
.admin-btn:hover {
    border-color:
        rgba(96,165,250,.35);

    background:
        #14243a;

    color:
        #ffffff;
}


.btn-primary,
.admin-btn.primary {
    border:
        0;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color:
        #ffffff;
}


.btn-primary:hover,
.admin-btn.primary:hover {
    filter:
        brightness(1.08);

    color:
        #ffffff;
}


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

.badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        700;
}


.badge.active,
.badge.success {
    background:
        rgba(34,197,94,.10);

    color:
        #86efac;
}


.badge.disabled,
.badge.danger {
    background:
        rgba(239,68,68,.10);

    color:
        #fca5a5;
}


.badge.warning {
    background:
        rgba(245,158,11,.10);

    color:
        #fcd34d;
}


/* ==========================================================================
   CHECKBOX / RADIO
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    accent-color:
        #3b82f6;
}


/* ==========================================================================
   LABELS / HELP TEXT
   ========================================================================== */

label {
    color:
        #cbd5e1;
}


small,
.help-text,
.form-help {
    color:
        #8fa2b8;
}


/* ==========================================================================
   CARD GENERIC
   ========================================================================== */

.card {
    border:
        1px solid
        rgba(148,163,184,.12);

    border-radius:
        17px;

    background:
        #0d1829;

    color:
        #d7e0ec;
}


.card h1,
.card h2,
.card h3,
.card h4 {
    color:
        #f8fafc;
}


.card p {
    color:
        #aebdd0;
}


/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}


::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,.01);
}


::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(148,163,184,.18);
}


::-webkit-scrollbar-thumb:hover {
    background:
        rgba(148,163,184,.30);
}


/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
    background:
        rgba(59,130,246,.38);

    color:
        #ffffff;
}


/* ==========================================================================
   MOBILE SIDEBAR OVERLAY
   ========================================================================== */

.sidebar-overlay {
    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        900;

    background:
        rgba(0,0,0,.60);

    backdrop-filter:
        blur(2px);
}


.sidebar-overlay.active {
    display:
        block;
}


/* ==========================================================================
   RESPONSIVE - LARGE TABLET
   ========================================================================== */

@media (
    max-width: 1250px
) {

    .module-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .foundation-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (
    max-width: 980px
) {

    .sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .22s ease;
    }


    .sidebar.mobile-open {
        transform:
            translateX(0);
    }


    .main-area {
        margin-left:
            0;
    }


    .mobile-menu-button {
        display:
            flex;
    }


    .module-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .topbar {
        padding:
            12px 18px;
    }


    .dashboard-content {
        padding:
            22px 18px;
    }


    .login-layout {
        grid-template-columns:
            1fr;
    }


    .login-brand-panel {
        min-height:
            auto;

        padding:
            45px 30px;
    }


    .login-form-panel {
        padding:
            35px 20px 55px;
    }

}


/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (
    max-width: 700px
) {

    .topbar {
        align-items:
            flex-start;

        padding:
            11px 13px;
    }


    .topbar-right {
        gap:
            6px;
    }


    .company-display,
    .company-selector {
        display:
            none;
    }


    .user-details {
        display:
            none;
    }


    .user-pill {
        padding:
            3px;
    }


    .dashboard-content {
        padding:
            17px 12px 35px;
    }


    .welcome-section {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            21px;
    }


    .welcome-section h2 {
        font-size:
            26px;
    }


    .section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }


    .module-grid {
        grid-template-columns:
            1fr;
    }


    .foundation-grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-footer {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;

        padding:
            16px;
    }


    .login-brand-panel {
        padding:
            35px 20px;
    }


    .login-brand-panel h1 {
        font-size:
            40px;
    }


    .login-feature-grid {
        grid-template-columns:
            1fr;
    }


    .login-form-panel {
        padding:
            25px 13px 45px;
    }


    .login-card {
        padding:
            24px 19px;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (
    max-width: 430px
) {

    .topbar-left h1 {
        font-size:
            14px;
    }


    .topbar-left p {
        font-size:
            8px;
    }


    .mobile-menu-button {
        width:
            36px;

        height:
            36px;
    }


    .welcome-section {
        padding:
            18px;
    }


    .module-card {
        min-height:
            190px;

        padding:
            17px;
    }

}