:root{
    --navy:#0b1d2d;
    --navy2:#10283d;
    --navy3:#15324b;

    --green:#84c63f;
    --green2:#239b4a;
    --green3:#0f8e45;

    --green-soft:#eff9e9;

    --gold:#f2bd3d;

    --ink:#0c1a2b;
    --text:#253342;
    --muted:#6d7985;

    --line:#e3e8e6;
    --page:#f7f9f8;
    --white:#ffffff;

    --red:#dc3d3d;
    --red-soft:#fff0f0;

    --yellow:#c88915;
    --yellow-soft:#fff8e6;

    --sidebar:380px;
}


/* ==========================================
   GLOBAL
========================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

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

    background:var(--page);
    color:var(--text);

    line-height:1.45;
}

a{
    color:inherit;
    text-decoration:none;
}

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


/* ==========================================
   APP SHELL
========================================== */

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


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

.sidebar{
    width:var(--sidebar);

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    z-index:20;

    overflow-y:auto;

    padding:
        22px
        18px
        28px;

    color:white;

    background:
        radial-gradient(
            circle at 70% 5%,
            rgba(39,103,133,.30),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #0b2133 0%,
            #0c1b2a 55%,
            #081723 100%
        );

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

    box-shadow:
        8px 0 30px
        rgba(12,26,43,.08);

    display:flex;
    flex-direction:column;
}


/* ==========================================
   LARGE BARBERLEDGER LOGO
========================================== */

.sidebar-logo-link{
    display:flex;

    justify-content:center;
    align-items:center;

    min-height:170px;

    padding:0 4px;

    overflow:hidden;
}


/*
   TEMPORARY:
   current uploaded logo is JPEG.

   Once transparent PNG is added,
   simply change the image URL in
   base.html. No CSS changes needed.
*/

.sidebar-logo{
    display:block;

    width:100%;
    max-width:340px;

    height:auto;

    object-fit:contain;

    border:0;

    box-shadow:none;

    border-radius:0;
}


/* ==========================================
   BRAND MOTTO
========================================== */

.brand-motto{
    margin:
        4px
        28px
        27px;

    padding-bottom:17px;

    border-bottom:
        2px solid
        rgba(132,198,63,.80);

    text-align:center;

    font-size:13px;

    line-height:1.45;

    letter-spacing:2.5px;

    font-weight:900;

    color:#f4f7fa;
}

.brand-motto span,
.brand-motto strong{
    display:block;
}

.brand-motto strong{
    color:var(--green);
}


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

.sidebar-nav{
    display:flex;
    flex-direction:column;

    gap:4px;
}

.nav-heading{
    margin:
        7px
        18px
        13px;

    color:#94a3b2;

    font-size:10px;

    font-weight:900;

    letter-spacing:2px;
}

.admin-heading{
    margin-top:10px;
}

.nav-divider{
    height:1px;

    margin:
        15px
        5px
        16px;

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


/* ==========================================
   NAV LINKS
========================================== */

.nav-link{
    display:flex;

    align-items:center;

    gap:14px;

    min-height:46px;

    padding:
        10px
        17px;

    border-radius:24px;

    font-size:15px;

    font-weight:700;

    color:#edf2f5;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.nav-icon{
    width:26px;

    text-align:center;

    color:#c6d4df;

    font-weight:900;
}


/* HOVER EFFECT USER REQUESTED */

.nav-link:hover{
    background:
        linear-gradient(
            90deg,
            var(--green3),
            var(--green)
        );

    color:white;

    transform:
        translateX(3px);

    box-shadow:
        0 6px 18px
        rgba(35,155,74,.25);
}

.nav-link:hover .nav-icon{
    color:white;
}


/* ACTIVE PAGE */

.nav-link.active{
    background:
        linear-gradient(
            90deg,
            #068642,
            #8ccc38
        );

    color:white;

    box-shadow:
        0 7px 20px
        rgba(31,154,73,.28);
}

.nav-link.active .nav-icon{
    color:white;
}


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

.sidebar-bottom{
    margin-top:auto;

    padding:
        25px
        18px
        3px;

    border-top:
        1px solid
        rgba(255,255,255,.15);
}

.sidebar-message{
    margin-bottom:18px;

    display:grid;

    gap:3px;

    font-size:12px;

    color:#b9c5ce;
}

.sidebar-message strong{
    color:#fff;
}

.logout-link{
    color:var(--green);

    font-weight:800;

    font-size:13px;
}

.logout-link:hover{
    color:#fff;
}


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

.main{
    min-height:100vh;

    margin-left:var(--sidebar);

    padding:
        0
        38px
        55px;
}


/* ==========================================
   TOP HEADER
========================================== */

.topbar{
    min-height:126px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:
        14px
        8px;

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

.eyebrow{
    color:#4f962c;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}

.page-heading h1{
    margin:
        4px
        0
        0;

    color:var(--ink);

    font-size:45px;

    line-height:1.05;

    letter-spacing:-1.5px;
}

.topbar-right{
    display:flex;

    align-items:center;

    gap:27px;
}

.topbar-motto{
    padding-right:27px;

    border-right:
        1px solid
        var(--line);

    color:#67737f;

    font-size:10px;

    font-weight:900;

    letter-spacing:1px;
}

.topbar-motto strong{
    color:#5ca72d;
}

.account-chip{
    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--ink);
}

.avatar{
    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #08a45b,
            #7bc83e
        );

    color:#fff;

    font-size:16px;

    font-weight:900;

    box-shadow:
        0 5px 16px
        rgba(16,151,80,.22);
}


/* ==========================================
   PAGE CONTENT
========================================== */

.page-content{
    padding-top:28px;
}


/* ==========================================
   STANDARD CARDS / PANELS
========================================== */

.panel,
.metric-card,
.question-card,
.review-card,
.close-item,
.integration-card,
.plan-card,
.acceptance-row{

    background:#fff;

    border:
        1px solid
        var(--line);

    border-radius:16px;

    box-shadow:
        0 7px 23px
        rgba(11,29,45,.055);
}

.panel{
    padding:26px;

    margin-bottom:18px;
}

.panel h2{
    margin-top:0;

    color:var(--ink);

    font-size:26px;
}

.panel h3{
    color:var(--ink);
}


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

.primary{
    border:0;

    padding:
        11px
        19px;

    border-radius:9px;

    color:white;

    background:
        linear-gradient(
            135deg,
            var(--green3),
            var(--green)
        );

    font-weight:800;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

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

    box-shadow:
        0 8px 20px
        rgba(24,150,75,.24);
}

.secondary{
    padding:
        10px
        16px;

    border:
        1px solid
        var(--line);

    border-radius:9px;

    color:var(--ink);

    background:white;

    font-weight:800;

    cursor:pointer;
}


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

input,
select,
textarea{

    width:100%;

    border:
        1px solid
        #dbe2df;

    border-radius:9px;

    padding:
        11px
        12px;

    background:#fff;

    color:var(--text);
}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:
        var(--green);

    box-shadow:
        0 0 0
        3px
        rgba(132,198,63,.14);
}


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

table{
    width:100%;

    border-collapse:collapse;
}

th,
td{
    padding:
        13px
        12px;

    text-align:left;

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

th{
    color:var(--ink);

    font-size:12px;

    font-weight:800;
}


/* ==========================================
   METRIC CARDS
========================================== */

.metric-grid{
    display:grid;

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

    gap:16px;

    margin-bottom:20px;
}

.metric-card{
    padding:20px;
}

.metric-card span{
    color:var(--muted);

    font-size:11px;

    text-transform:uppercase;
}

.metric-card strong{
    display:block;

    margin:
        6px
        0;

    color:var(--ink);

    font-size:28px;
}


/* ==========================================
   EMPTY STATE
========================================== */

.empty-state{
    min-height:360px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    border:
        1px solid
        var(--line);

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 7px 23px
        rgba(11,29,45,.05);
}

.empty-check{
    width:90px;
    height:90px;

    margin-bottom:20px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#fff;

    background:
        radial-gradient(
            circle,
            #129542 0 42%,
            #daf4dd 44% 100%
        );

    font-size:38px;

    font-weight:900;
}

.empty-state h2{
    margin:
        0
        0
        7px;

    color:var(--ink);

    font-size:29px;
}

.empty-state p{
    margin:0;

    color:var(--muted);
}


/* ==========================================
   INTEGRATIONS
========================================== */

.integration-card{
    padding:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}

.integration-card>div:first-child{
    display:flex;

    align-items:center;

    gap:16px;
}

.integration-icon{
    width:54px;
    height:54px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:#2ca01c;

    color:white;

    font-weight:900;
}


/* ==========================================
   MONTHLY CLOSE
========================================== */

.progress-track{
    height:10px;

    overflow:hidden;

    border-radius:99px;

    background:#e6ece8;
}

.progress-fill{
    height:100%;

    background:
        linear-gradient(
            90deg,
            var(--green3),
            var(--green)
        );
}

.close-item{
    margin-bottom:9px;

    padding:15px 17px;

    display:flex;

    align-items:center;

    gap:12px;
}


/* ==========================================
   STATUS COLORS
========================================== */

.success{
    padding:12px;

    border-radius:8px;

    color:#397a27;

    background:#eef9e9;
}

.alert{
    padding:12px;

    border-radius:8px;

    color:#9b2f2f;

    background:#fff0f0;
}

.confidence{
    display:inline-block;

    padding:
        5px
        9px;

    border-radius:99px;

    font-size:11px;

    font-weight:800;
}

.confidence.high{
    color:#397a27;
    background:#e8f7df;
}

.confidence.medium{
    color:#84610c;
    background:#fff5db;
}

.confidence.low{
    color:#9d3030;
    background:#fdeaea;
}


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

.login-body{
    min-height:100vh;

    display:grid;

    place-items:center;

    background:
        radial-gradient(
            circle at top right,
            rgba(132,198,63,.10),
            transparent 34%
        ),
        #f4f7f5;
}

.login-card{
    width:
        min(
            470px,
            92vw
        );

    padding:38px;

    border:
        1px solid
        var(--line);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 28px 80px
        rgba(11,29,45,.13);
}


/* ==========================================
   OTHER EXISTING APPLICATION COMPONENTS
========================================== */

.content-grid{
    display:grid;

    grid-template-columns:
        1.7fr 1fr;

    gap:18px;
}

.form-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px;
}

.plan-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}

.question-card,
.review-card{
    padding:18px;

    margin-bottom:12px;
}

.client-row{
    display:grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:12px;

    align-items:center;
}


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

@media(max-width:1200px){

    :root{
        --sidebar:310px;
    }

    .page-heading h1{
        font-size:38px;
    }

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


@media(max-width:900px){

    :root{
        --sidebar:250px;
    }

    .topbar-motto{
        display:none;
    }

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

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


@media(max-width:720px){

    :root{
        --sidebar:0px;
    }

    .sidebar{
        display:none;
    }

    .main{
        margin-left:0;

        padding:
            0
            18px
            35px;
    }

    .metric-grid,
    .form-grid{

        grid-template-columns:1fr;
    }

    .page-heading h1{
        font-size:31px;
    }

    .topbar{
        min-height:100px;
    }
}

/* ==========================================
   PROFESSIONAL NAVIGATION SVG ICONS
========================================== */

.nav-svg{
    width:20px;
    height:20px;
    min-width:20px;

    fill:none;
    stroke:#c7d4df;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        stroke .16s ease,
        transform .16s ease;
}

.nav-link:hover .nav-svg,
.nav-link.active .nav-svg{
    stroke:#ffffff;
}

.nav-link:hover .nav-svg{
    transform:scale(1.06);
}


/* ==========================================
   TRANSPARENT BARBERLEDGER LOGO
========================================== */

.sidebar-logo-link{
    display:flex;
    justify-content:center;
    align-items:center;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    min-height:150px;
    padding:8px 15px 0;

    overflow:visible;
}

.sidebar-logo{
    width:100%;
    max-width:340px;
    height:auto;

    display:block;
    object-fit:contain;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
}