/* =========================================================
   GROVIA 2.0
   Professional Dark Supervisor UI
========================================================= */

:root{

    --bg:#151c1b;
    --bg-2:#192220;

    --sidebar:#0d1413;
    --sidebar-2:#111a18;

    --surface:#202a27;
    --surface-2:#26322f;
    --surface-3:#2b3935;

    --border:#34423e;
    --border-light:#3b4b47;

    --text:#f2f7f5;
    --text-2:#d4dfdc;
    --muted:#91a19d;

    --teal:#16b8a6;
    --teal-dark:#0e8175;

    --blue:#3b82f6;
    --green:#22c55e;
    --orange:#f59e0b;
    --red:#ef4444;
    --purple:#9b7cf5;

    --shadow:0 20px 60px rgba(0,0,0,.25);

    --radius:18px;

    --font:"Cairo",sans-serif;
}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    min-height:100vh;
}

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

button{
    border:0;
    cursor:pointer;
}

input,
select,
textarea{
    outline:none;
}


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

.app{
    min-height:100vh;
    display:flex;
}


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

.sidebar{

    width:270px;

    background:
        linear-gradient(
            180deg,
            #0c1312 0%,
            #111a18 50%,
            #0c1211 100%
        );

    border-left:1px solid #26332f;

    position:fixed;
    right:0;
    top:0;
    bottom:0;

    display:flex;
    flex-direction:column;

    padding:25px 18px;

    z-index:100;
}


/* BRAND */

.brand{
    display:flex;
    align-items:center;
    gap:13px;

    padding:0 7px 25px;
}

.brand-logo{

    width:44px;
    height:44px;

    border-radius:13px;

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

    background:
        linear-gradient(
            135deg,
            var(--teal),
            #087f73
        );

    color:white;

    font-size:23px;
    font-weight:900;

    box-shadow:
        0 8px 25px rgba(22,184,166,.25);
}

.brand h2{
    font-size:20px;
    font-weight:900;
    letter-spacing:1px;
}

.brand span{
    display:block;
    color:#7f918c;
    font-size:10px;
    margin-top:-2px;
}


/* WORKSPACE */

.workspace{

    display:flex;
    align-items:center;
    gap:11px;

    padding:13px;

    background:#18221f;

    border:1px solid #2b3935;

    border-radius:14px;

    margin-bottom:27px;
}

.workspace-icon{

    width:35px;
    height:35px;

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

    border-radius:10px;

    background:#263a35;

    color:#67d7ca;

    font-size:17px;
}

.workspace strong{
    display:block;
    font-size:12px;
}

.workspace span{
    display:block;
    color:#81908c;
    font-size:10px;
    margin-top:2px;
}


/* NAV */

.nav-title{

    color:#62716d;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;

    padding:0 12px 10px;
}

nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.nav-item{

    width:100%;

    min-height:48px;

    padding:0 13px;

    display:flex;
    align-items:center;

    gap:13px;

    color:#8e9d99;

    background:transparent;

    border-radius:12px;

    font-size:13px;

    text-align:right;

    transition:.2s ease;
}

.nav-item:hover{

    background:#1b2824;

    color:white;
}

.nav-item.active{

    background:
        linear-gradient(
            90deg,
            #163d38,
            #18332f
        );

    color:#dffffa;

    box-shadow:
        inset -3px 0 var(--teal);
}

.nav-icon{

    width:25px;

    font-size:17px;

    text-align:center;
}


/* SIDEBAR BOTTOM */

.sidebar-bottom{
    margin-top:auto;
}

.ai-sidebar-btn{

    width:100%;

    display:flex;
    align-items:center;

    gap:10px;

    text-align:right;

    padding:14px;

    background:
        linear-gradient(
            135deg,
            #183b36,
            #152923
        );

    border:1px solid #27564e;

    border-radius:15px;

    color:white;

    position:relative;
}

.ai-sidebar-btn strong{
    display:block;
    font-size:12px;
}

.ai-sidebar-btn span:not(.online-dot){
    display:block;
    font-size:10px;
    color:#91b9b2;
}

.ai-icon{

    width:34px;
    height:34px;

    border-radius:10px;

    background:#1e756b;

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

    color:#9efff4;
}

.online-dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#22c55e;

    margin-right:auto;

    box-shadow:0 0 10px #22c55e;
}

.sidebar-footer{

    display:flex;
    justify-content:space-between;

    padding:18px 5px 0;

    color:#53635e;

    font-size:9px;
}


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

.main{

    width:calc(100% - 270px);

    margin-right:270px;

    min-height:100vh;
}


/* TOPBAR */

.topbar{

    height:86px;

    padding:0 35px;

    border-bottom:1px solid #293632;

    display:flex;
    align-items:center;

    justify-content:space-between;

    background:#171f1e;

    position:sticky;
    top:0;

    z-index:50;
}

.eyebrow{

    color:#70817c;

    font-size:9px;

    letter-spacing:1.5px;

    font-weight:800;
}

.top-title h1{

    font-size:24px;

    margin-top:-2px;

    font-weight:800;
}

.top-actions{

    display:flex;
    align-items:center;

    gap:12px;
}

.global-search{

    width:310px;
    height:43px;

    background:#202a27;

    border:1px solid #33413d;

    border-radius:12px;

    display:flex;
    align-items:center;

    padding:0 12px;

    gap:9px;
}

.global-search span{
    color:#71817c;
    font-size:19px;
}

.global-search input{

    flex:1;

    background:transparent;

    border:0;

    color:white;

    font-size:12px;
}

.global-search input::placeholder{
    color:#687873;
}

kbd{

    background:#2c3835;

    border:1px solid #3a4945;

    border-radius:5px;

    color:#899894;

    font-size:9px;

    padding:3px 6px;
}

.icon-button{

    width:43px;
    height:43px;

    border-radius:12px;

    background:#202a27;

    border:1px solid #33413d;

    color:#dce8e4;

    position:relative;

    font-size:17px;
}

.notification-count{

    position:absolute;

    top:-4px;
    left:-4px;

    min-width:18px;
    height:18px;

    border-radius:20px;

    background:var(--red);

    color:white;

    font-size:9px;

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

    border:2px solid #171f1e;
}

.profile{

    display:flex;
    align-items:center;

    gap:9px;

    background:transparent;

    color:white;

    text-align:right;
}

.avatar{

    width:40px;
    height:40px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #6d5ce7
        );

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

    font-weight:900;
}

.profile-info strong{
    display:block;
    font-size:12px;
}

.profile-info span{
    display:block;
    font-size:9px;
    color:#7e8d89;
}


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

.page-container{
    padding:30px 35px 60px;
}

.page{
    display:none;
}

.page.active{
    display:block;
}


/* =========================================================
   HERO
========================================================= */

.hero{

    min-height:210px;

    position:relative;
    overflow:hidden;

    border-radius:24px;

    padding:35px;

    background:
        linear-gradient(
            115deg,
            #172c28,
            #1b3832 50%,
            #172521
        );

    border:1px solid #2e4b44;

    box-shadow:var(--shadow);

    margin-bottom:22px;
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero-badge{

    width:max-content;

    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 11px;

    border-radius:30px;

    background:#163f38;

    border:1px solid #2a6258;

    color:#9cebe1;

    font-size:10px;

    margin-bottom:20px;
}

.pulse{

    width:7px;
    height:7px;

    background:#22c55e;

    border-radius:50%;

    box-shadow:0 0 10px #22c55e;
}

.hero h2{

    font-size:30px;

    font-weight:900;

    margin-bottom:7px;
}

.hero p{

    color:#a8c1bc;

    font-size:13px;
}

.hero-decoration{

    position:absolute;
    inset:0;
}

.hero-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(93,214,200,.12);
}

.circle-1{

    width:330px;
    height:330px;

    left:-100px;
    top:-150px;
}

.circle-2{

    width:500px;
    height:500px;

    left:50px;
    top:-290px;
}

.hero-grid{

    position:absolute;

    inset:0;

    opacity:.12;

    background-image:
        linear-gradient(#8be9df 1px,transparent 1px),
        linear-gradient(90deg,#8be9df 1px,transparent 1px);

    background-size:35px 35px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black,
            transparent
        );
}


/* =========================================================
   KPI
========================================================= */

.kpi-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:32px;
}

.kpi-card{

    padding:19px;

    border-radius:18px;

    background:var(--surface);

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

    position:relative;

    overflow:hidden;

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

.kpi-card::after{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    border-radius:50%;

    left:-30px;
    bottom:-50px;

    opacity:.1;
}

.kpi-card.blue::after{background:var(--blue)}
.kpi-card.green::after{background:var(--green)}
.kpi-card.orange::after{background:var(--orange)}
.kpi-card.purple::after{background:var(--purple)}

.kpi-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#9aa9a5;

    font-size:12px;
}

.kpi-icon{

    width:35px;
    height:35px;

    border-radius:10px;

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

    font-weight:900;
}

.blue .kpi-icon{
    background:#172f51;
    color:#5c9cff;
}

.green .kpi-icon{
    background:#173a29;
    color:#4ade80;
}

.orange .kpi-icon{
    background:#44331b;
    color:#fbbf24;
}

.purple .kpi-icon{
    background:#302746;
    color:#b29cff;
}

.kpi-card>strong{

    display:block;

    font-size:32px;

    margin:8px 0 2px;

    font-weight:900;
}

.kpi-meta{

    color:#73827e;

    font-size:11px;
}

.positive{
    color:#4ade80;
}


/* =========================================================
   SECTION HEAD
========================================================= */

.section-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:27px 0 13px;
}

.section-label{

    display:block;

    color:#667873;

    font-size:9px;

    letter-spacing:1.5px;

    font-weight:900;
}

.section-heading h3{

    font-size:18px;

    margin-top:1px;
}

.secondary-btn{

    height:40px;

    padding:0 15px;

    background:#26322f;

    color:#cbd8d4;

    border:1px solid #3a4945;

    border-radius:10px;

    font-size:12px;
}

.text-btn{

    background:transparent;

    color:#54cfc1;

    font-size:11px;
}


/* =========================================================
   DAILY BRIEF
========================================================= */

.brief-grid{

    display:grid;

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

    gap:12px;
}

.brief-card{

    padding:15px;

    background:#1d2724;

    border:1px solid #303e3a;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:12px;
}

.brief-card span{

    display:block;

    color:#82918d;

    font-size:10px;
}

.brief-card strong{

    display:block;

    font-size:13px;

    margin-top:2px;
}

.brief-icon{

    width:39px;
    height:39px;

    border-radius:11px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.blue-icon{
    background:#172e4e;
    color:#62a1ff;
}

.orange-icon{
    background:#43321a;
    color:#ffc04c;
}

.purple-icon{
    background:#302746;
    color:#b39cff;
}

.red-icon{
    background:#421f24;
    color:#ff7777;
}

.green-icon{
    background:#183a29;
    color:#52dc7d;
}

.teal-icon{
    background:#143c38;
    color:#54d9cb;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:17px;

    margin-top:17px;
}

.panel{

    background:var(--surface);

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

    border-radius:19px;

    padding:21px;

    box-shadow:0 10px 35px rgba(0,0,0,.1);
}

.panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;
}

.panel-header h3{

    font-size:18px;

    margin-top:1px;
}

.live-badge{

    font-size:9px;

    color:#61dc90;

    padding:4px 7px;

    background:#183b29;

    border:1px solid #285b3e;

    border-radius:6px;
}


/* ATTENTION */

.attention-list{

    display:flex;

    flex-direction:column;

    gap:9px;
}

.attention-item{

    display:flex;

    align-items:center;

    gap:11px;

    padding:11px;

    background:#1a2421;

    border:1px solid #2d3a36;

    border-radius:12px;
}

.attention-marker{

    width:9px;
    height:9px;

    border-radius:50%;

    flex-shrink:0;
}

.attention-marker.red{
    background:var(--red);
    box-shadow:0 0 9px rgba(239,68,68,.4);
}

.attention-marker.orange{
    background:var(--orange);
}

.attention-marker.blue{
    background:var(--blue);
}

.attention-copy{
    flex:1;
}

.attention-copy b{

    display:block;

    font-size:13px;
}

.attention-copy span{

    display:block;

    color:#778782;

    font-size:11px;
}

.attention-action{

    color:#7a8b86;

    background:transparent;

    font-size:14px;
}


/* AI PANEL */

.ai-panel{

    background:
        linear-gradient(
            145deg,
            #182f2b,
            #202d2a
        );

    border-color:#31534c;
}

.ai-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;
}

.ai-title{

    display:flex;

    gap:10px;

    align-items:center;
}

.ai-big-icon{

    width:43px;
    height:43px;

    border-radius:13px;

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

    background:
        linear-gradient(
            135deg,
            #1b756b,
            #144b44
        );

    color:#a6fff5;

    font-size:20px;

    box-shadow:
        0 8px 25px rgba(22,184,166,.18);
}

.ai-title h3{

    font-size:18px;

    margin-top:-2px;
}

.ai-status{

    font-size:10px;

    color:#61dc90;
}

.ai-panel>p{

    color:#9bb1ac;

    font-size:12px;

    line-height:1.8;

    margin-bottom:15px;
}

.quick-questions{

    display:flex;

    flex-wrap:wrap;

    gap:7px;
}

.quick-questions button,
.chat-suggestions button{

    padding:7px 10px;

    border-radius:8px;

    background:#203c37;

    color:#a8c9c3;

    border:1px solid #31534c;

    font-size:10px;

    transition:.2s;
}

.quick-questions button:hover,
.chat-suggestions button:hover{

    background:#295049;

    color:white;
}

.ai-main-btn{

    width:100%;

    height:42px;

    margin-top:15px;

    border-radius:10px;

    background:var(--teal);

    color:#08221f;

    font-weight:900;

    font-size:12px;

    transition:.2s;
}

.ai-main-btn:hover{
    filter:brightness(1.1);
}


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

.quick-actions{

    display:grid;

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

    gap:11px;
}

.action-card{

    padding:16px 12px;

    text-align:right;

    background:#1e2825;

    border:1px solid #303f3a;

    border-radius:15px;

    color:white;

    transition:.2s;
}

.action-card:hover{

    transform:translateY(-3px);

    border-color:#42605a;

    background:#24302d;
}

.action-icon{

    width:35px;
    height:35px;

    border-radius:10px;

    display:flex;

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

    margin-bottom:12px;
}

.action-card strong{

    display:block;

    font-size:12px;

    margin-bottom:3px;
}

.action-card small{

    display:block;

    color:#71817c;

    font-size:9px;

    line-height:1.6;
}


/* =========================================================
   EMPLOYEE MINI
========================================================= */

.employee-mini-grid{

    display:grid;

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

    gap:12px;
}

.employee-mini{

    padding:15px;

    background:#1e2825;

    border:1px solid #303e3a;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:10px;
}

.employee-avatar{

    width:39px;
    height:39px;

    border-radius:11px;

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

    background:#293936;

    color:#8ee5da;

    font-weight:900;
}

.employee-mini strong{

    display:block;

    font-size:12px;
}

.employee-mini span{

    display:block;

    color:#778681;

    font-size:9px;
}

.status-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    margin-right:auto;
}

.status-dot.present{
    background:var(--green);
}

.status-dot.absent{
    background:var(--red);
}

.status-dot.leave{
    background:var(--purple);
}


/* =========================================================
   PAGE INTRO
========================================================= */

.page-intro{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:23px;
}

.page-intro h2{

    font-size:31px;

    margin-top:1px;

    font-weight:900;
}

.page-intro p{

    color:#80908b;

    font-size:12px;

    margin-top:3px;
}

.primary-btn{

    height:43px;

    padding:0 17px;

    border-radius:10px;

    background:var(--teal);

    color:#06201d;

    font-weight:900;

    font-size:12px;
}


/* =========================================================
   FILTER
========================================================= */

.filter-bar{

    display:flex;

    gap:10px;

    margin-bottom:17px;
}

.filter-search{

    flex:1;

    height:44px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 13px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:11px;

    color:#75847f;
}

.filter-search input{

    flex:1;

    background:transparent;

    border:0;

    color:white;

    font-size:12px;
}

.filter-bar select{

    min-width:150px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:11px;

    color:#dce7e4;

    padding:0 12px;

    font-size:11px;
}


/* =========================================================
   EMPLOYEES
========================================================= */

.employees-grid{

    display:grid;

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

    gap:14px;
}

.employee-card{

    padding:19px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:17px;

    transition:.2s;
}

.employee-card:hover{

    transform:translateY(-2px);

    border-color:#47605a;
}

.employee-top{

    display:flex;

    align-items:center;

    gap:11px;
}

.employee-top .employee-avatar{

    width:47px;
    height:47px;
}

.employee-top b{

    display:block;

    font-size:14px;
}

.employee-top span{

    display:block;

    color:#7d8d88;

    font-size:11px;
}

.employee-role{

    margin:16px 0 12px;

    padding:11px;

    border-radius:10px;

    background:#18211f;

    color:#b5c2be;

    font-size:11px;
}

.employee-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.rest{

    color:#7c8b87;

    font-size:10px;
}

.status-badge{

    padding:5px 8px;

    border-radius:7px;

    font-size:9px;

    font-weight:800;
}

.status-badge.present{
    background:#183a28;
    color:#57dc80;
}

.status-badge.absent{
    background:#431f25;
    color:#ff7777;
}

.status-badge.leave{
    background:#302746;
    color:#bba8ff;
}

.card-actions{

    display:flex;

    gap:5px;

    margin-top:13px;
}

.card-actions button{

    flex:1;

    height:32px;

    border-radius:8px;

    background:#293530;

    color:#aebcb8;

    font-size:9px;
}


/* =========================================================
   FOLLOWUPS
========================================================= */

.progress-overview{

    background:#1e2825;

    border:1px solid #34423e;

    border-radius:16px;

    padding:17px;

    margin-bottom:17px;
}

.progress-overview>div:first-child{

    display:flex;

    justify-content:space-between;

    margin-bottom:9px;

    font-size:11px;

    color:#8d9b97;
}

.progress-overview strong{
    color:#5bd8cb;
}

.progress{

    height:7px;

    border-radius:20px;

    background:#111918;

    overflow:hidden;
}

.progress span{

    display:block;

    height:100%;

    width:0;

    background:
        linear-gradient(
            90deg,
            #0d8d81,
            #22c7b7
        );

    border-radius:20px;

    transition:.4s;
}

.followups-grid{

    display:grid;

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

    gap:14px;
}

.follow-card{

    padding:18px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:17px;
}

.follow-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:12px;
}

.follow-head b{
    font-size:14px;
}

.follow-head span{

    display:block;

    color:#73837e;

    font-size:10px;
}

.follow-head p{

    color:#82918c;

    font-size:11px;

    margin-top:4px;
}

.check{

    display:flex;

    align-items:center;

    gap:9px;

    padding:8px 0;

    color:#aab8b4;

    font-size:11px;

    border-top:1px solid #293632;
}

.check input{
    accent-color:var(--teal);
}

.follow-status{

    margin-top:13px;

    padding-top:11px;

    border-top:1px solid #293632;

    display:flex;

    justify-content:space-between;

    color:#73827e;

    font-size:10px;
}


/* =========================================================
   SCHEDULE
========================================================= */

.schedule-summary{

    display:grid;

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

    gap:13px;

    margin-bottom:18px;
}

.schedule-stat{

    padding:20px;

    border-radius:16px;

    border:1px solid;

}

.schedule-stat span{

    display:block;

    font-size:11px;

    color:#9aa7a3;
}

.schedule-stat strong{

    display:block;

    font-size:30px;

    margin-top:3px;
}

.green-stat{
    background:#172b20;
    border-color:#294e37;
}

.green-stat strong{
    color:#54dc7e;
}

.red-stat{
    background:#301b1f;
    border-color:#553037;
}

.red-stat strong{
    color:#ff7777;
}

.purple-stat{
    background:#292238;
    border-color:#44385e;
}

.purple-stat strong{
    color:#bba6ff;
}


/* TABLE */

.table-container{

    overflow:auto;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:17px;
}

table{

    width:100%;

    border-collapse:collapse;

    min-width:700px;
}

th{

    text-align:right;

    color:#687974;

    font-size:10px;

    font-weight:700;

    padding:14px;

    background:#1b2422;
}

td{

    padding:15px 14px;

    border-top:1px solid #2d3a36;

    color:#bac6c2;

    font-size:11px;
}

.employee-table-name{

    display:flex;

    align-items:center;

    gap:8px;

    color:white;

    font-weight:700;
}

.table-action{

    padding:6px 9px;

    border-radius:7px;

    background:#2a3733;

    color:#9eada8;

    font-size:9px;
}


/* =========================================================
   COMPANIES
========================================================= */

.company-summary{

    display:grid;

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

    gap:13px;

    margin-bottom:18px;
}

.company-summary>div{

    padding:17px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:15px;
}

.company-summary span{

    display:block;

    color:#82918d;

    font-size:10px;
}

.company-summary strong{

    display:block;

    font-size:27px;

    margin-top:3px;
}

.companies-grid{

    display:grid;

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

    gap:14px;
}

.company-card{

    padding:18px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:17px;
}

.company-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;
}

.company-head b{
    font-size:14px;
}

.company-head span{

    display:block;

    color:#75847f;

    font-size:10px;

    margin-top:2px;
}

.return-badge{

    padding:5px 8px;

    border-radius:7px;

    font-size:9px;
}

.return-yes{
    background:#183a28;
    color:#54dc7e;
}

.return-no{
    background:#431f25;
    color:#ff7777;
}

.company-items{

    margin:15px 0;

    padding:11px;

    background:#19221f;

    border-radius:10px;

    color:#aab8b4;

    font-size:11px;

    line-height:1.8;
}

.company-note{

    color:#75847f;

    font-size:10px;

    line-height:1.7;
}


/* =========================================================
   TASKS
========================================================= */

.kanban{

    display:grid;

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

    gap:15px;
}

.kanban-column{

    background:#19221f;

    border:1px solid #303e3a;

    border-radius:17px;

    padding:13px;

    min-height:450px;
}

.kanban-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:4px 4px 12px;

    color:#c9d5d1;

    font-size:12px;
}

.kanban-title b{

    min-width:22px;
    height:22px;

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

    background:#2b3734;

    border-radius:7px;

    color:#8c9b96;

    font-size:9px;
}

.task-card{

    background:#222d29;

    border:1px solid #34423e;

    border-radius:13px;

    padding:14px;

    margin-bottom:9px;
}

.task-card b{

    display:block;

    font-size:12px;

    margin-bottom:5px;
}

.task-card p{

    color:#788883;

    font-size:10px;

    line-height:1.7;

    margin-bottom:9px;
}

.task-meta{

    display:flex;

    justify-content:space-between;

    color:#667570;

    font-size:9px;
}

.task-actions{

    display:flex;

    gap:5px;

    margin-top:10px;
}

.task-actions button{

    flex:1;

    height:28px;

    background:#2b3834;

    color:#9caaa6;

    border-radius:7px;

    font-size:8px;
}


/* =========================================================
   REPORTS
========================================================= */

.report-grid{

    display:grid;

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

    gap:13px;

    margin-bottom:18px;
}

.report-score-card{

    min-height:170px;

    position:relative;

    padding:20px;

    background:
        linear-gradient(
            135deg,
            #173732,
            #1f2e2b
        );

    border:1px solid #31564e;

    border-radius:17px;

    overflow:hidden;
}

.report-score-card>span{

    color:#8ba49e;

    font-size:10px;
}

.report-score{

    display:block;

    font-size:55px;

    font-weight:900;

    color:#65e2d5;

    margin-top:7px;
}

.score-ring{

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    border:1px solid rgba(91,226,213,.13);

    left:-20px;
    bottom:-75px;
}

.report-card{

    padding:20px;

    background:#1f2926;

    border:1px solid #34423e;

    border-radius:17px;
}

.report-card span{

    display:block;

    color:#82918d;

    font-size:10px;
}

.report-card strong{

    display:block;

    font-size:31px;

    margin-top:20px;
}

.report-text-panel pre{

    white-space:pre-wrap;

    font-family:var(--font);

    color:#aebbb7;

    font-size:12px;

    line-height:2;

}


/* =========================================================
   AI DRAWER
========================================================= */

.overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(3px);

    opacity:0;

    pointer-events:none;

    transition:.25s;

    z-index:500;
}

.overlay.show{

    opacity:1;

    pointer-events:auto;
}

.ai-drawer{

    position:fixed;

    top:0;
    left:-430px;

    width:430px;

    max-width:95vw;

    height:100vh;

    background:#121a18;

    border-right:1px solid #30403b;

    z-index:600;

    display:flex;

    flex-direction:column;

    transition:.3s ease;

    box-shadow:20px 0 60px rgba(0,0,0,.35);
}

.ai-drawer.open{
    left:0;
}

.drawer-header{

    padding:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #293632;
}

.drawer-header h2{

    font-size:20px;

    margin-top:2px;
}

.drawer-header button{

    width:34px;
    height:34px;

    border-radius:9px;

    background:#27332f;

    color:#b6c4c0;

    font-size:21px;
}

.ai-welcome{

    margin:17px;

    padding:16px;

    display:flex;

    gap:11px;

    background:#18322e;

    border:1px solid #2d574f;

    border-radius:14px;
}

.ai-welcome strong{
    font-size:12px;
}

.ai-welcome p{

    color:#91aaa4;

    font-size:10px;

    line-height:1.8;

    margin-top:4px;
}

.chat-messages{

    flex:1;

    overflow-y:auto;

    padding:0 17px 17px;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.message{

    max-width:88%;

    padding:11px 13px;

    border-radius:12px;

    font-size:11px;

    line-height:1.9;
}

.message.ai{

    align-self:flex-start;

    background:#202b28;

    border:1px solid #34423e;

    color:#c1cdca;
}

.message.user{

    align-self:flex-end;

    background:#126d64;

    color:white;
}

.chat-suggestions{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

    padding:10px 17px;

    border-top:1px solid #293632;
}

.chat-form{

    display:flex;

    gap:7px;

    padding:14px 17px;

    border-top:1px solid #293632;
}

.chat-form input{

    flex:1;

    height:44px;

    background:#202a27;

    border:1px solid #34423e;

    border-radius:10px;

    color:white;

    padding:0 12px;

    font-size:12px;
}

.chat-form button{

    width:44px;

    border-radius:10px;

    background:var(--teal);

    color:#08201d;

    font-weight:900;
}


/* =========================================================
   MODAL
========================================================= */

.modal-backdrop{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    pointer-events:none;

    transition:.2s;

    z-index:800;

    padding:20px;
}

.modal-backdrop.show{

    opacity:1;

    pointer-events:auto;
}

.modal{

    width:500px;

    max-width:100%;

    max-height:90vh;

    overflow:auto;

    background:#1d2724;

    border:1px solid #3a4945;

    border-radius:20px;

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

.modal-header{

    padding:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #303d39;
}

.modal-header h2{

    font-size:20px;

    margin-top:2px;
}

.modal-header button{

    width:34px;
    height:34px;

    border-radius:9px;

    background:#293632;

    color:#b8c5c1;

    font-size:20px;
}

#modalForm{

    padding:20px;
}

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

.form-group label{

    display:block;

    color:#9ca9a5;

    font-size:11px;

    margin-bottom:6px;
}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    background:#141c1a;

    border:1px solid #35443f;

    color:#eef5f2;

    border-radius:10px;

    padding:11px;

    font-size:12px;
}

.form-group textarea{
    min-height:90px;
    resize:vertical;
}

.form-submit{

    width:100%;

    height:44px;

    border-radius:10px;

    background:var(--teal);

    color:#05201c;

    font-size:12px;

    font-weight:900;

    margin-top:5px;
}


/* =========================================================
   TOAST
========================================================= */

#toastContainer{

    position:fixed;

    bottom:20px;
    right:20px;

    z-index:1000;

    display:flex;

    flex-direction:column;

    gap:8px;
}

.toast{

    min-width:260px;

    padding:13px 15px;

    background:#202b28;

    border:1px solid #3a4a45;

    border-right:3px solid var(--teal);

    border-radius:11px;

    color:#d9e4e1;

    font-size:11px;

    box-shadow:var(--shadow);

    animation:toastIn .3s ease;
}

@keyframes toastIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}


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

.empty{

    padding:45px 20px;

    text-align:center;

    color:#687873;

    background:#1c2623;

    border:1px dashed #34423e;

    border-radius:15px;

    font-size:12px;
}


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

@media(max-width:1200px){

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

    .quick-actions{
        grid-template-columns:repeat(3,1fr);
    }

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

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

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

}

@media(max-width:900px){

    .sidebar{

        width:76px;

        padding:20px 10px;
    }

    .brand{
        justify-content:center;
    }

    .brand>div:last-child,
    .workspace>div:last-child,
    .nav-item span:last-child,
    .ai-sidebar-btn>div:nth-child(2),
    .sidebar-footer{
        display:none;
    }

    .workspace{
        justify-content:center;
    }

    .nav-item{
        justify-content:center;
        padding:0;
    }

    .ai-sidebar-btn{
        justify-content:center;
    }

    .main{

        width:calc(100% - 76px);

        margin-right:76px;
    }

    .topbar{
        padding:0 20px;
    }

    .global-search{
        width:220px;
    }

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

}

@media(max-width:700px){

    .topbar{
        height:auto;
        min-height:75px;
        padding:12px 15px;
        gap:10px;
    }

    .top-title .eyebrow{
        display:none;
    }

    .top-title h1{
        font-size:19px;
    }

    .global-search{
        display:none;
    }

    .profile-info,
    .profile>span{
        display:none;
    }

    .page-container{
        padding:20px 15px 40px;
    }

    .hero{
        padding:25px;
    }

    .hero h2{
        font-size:25px;
    }

    .kpi-grid,
    .brief-grid,
    .schedule-summary,
    .company-summary,
    .report-grid{
        grid-template-columns:1fr 1fr;
    }

    .quick-actions{
        grid-template-columns:1fr 1fr;
    }

    .employees-grid,
    .companies-grid,
    .followups-grid,
    .kanban{
        grid-template-columns:1fr;
    }

    .employee-mini-grid{
        grid-template-columns:1fr;
    }

    .page-intro{
        align-items:flex-start;
        gap:12px;
    }

    .page-intro h2{
        font-size:25px;
    }

    .filter-bar{
        flex-direction:column;
    }

    .filter-bar select{
        height:42px;
    }

}

@media(max-width:480px){

    .sidebar{
        display:none;
    }

    .main{
        width:100%;
        margin-right:0;
    }

    .kpi-grid,
    .brief-grid,
    .schedule-summary,
    .company-summary,
    .report-grid{
        grid-template-columns:1fr;
    }

    .quick-actions{
        grid-template-columns:1fr 1fr;
    }

    .top-actions{
        margin-right:auto;
    }
}

/* =========================================================
   RESPONSIVE MOBILE UI
========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

button,
.nav-item,
.icon-button,
.primary-btn,
.secondary-btn,
.ai-main-btn,
.chat-suggestions button,
.card-actions button,
.mobile-nav-item{
    min-height:44px;
}

.mobile-nav{
    display:none;
}

@media(max-width:768px){

    body{
        font-size:14px;
        padding-bottom:78px;
    }

    .sidebar{
        display:none;
    }

    .main{
        width:100%;
        margin-right:0;
    }

    .topbar{
        position:sticky;
        top:0;
        z-index:80;
        min-height:68px;
        padding:10px 16px;
        background:rgba(21,28,27,.96);
        border-bottom:1px solid var(--border);
    }

    .top-title{
        min-width:0;
    }

    .top-title h1{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:20px;
    }

    .top-actions{
        flex-shrink:0;
        gap:8px;
    }

    .global-search,
    .profile-info,
    .profile>span{
        display:none;
    }

    .profile{
        padding:0;
        min-width:44px;
    }

    .page-container{
        padding:22px 16px 28px;
    }

    .hero{
        min-height:0;
        padding:24px 20px;
        border-radius:16px;
    }

    .hero h2{
        max-width:100%;
        font-size:25px;
        line-height:1.45;
    }

    .hero p{
        max-width:100%;
        line-height:1.8;
    }

    .hero-decoration{
        opacity:.45;
    }

    .kpi-grid,
    .brief-grid,
    .schedule-summary,
    .company-summary,
    .report-grid,
    .quick-actions,
    .employees-grid,
    .companies-grid,
    .followups-grid,
    .employee-mini-grid,
    .kanban{
        grid-template-columns:1fr;
        gap:12px;
    }

    .kpi-card,
    .brief-card,
    .panel,
    .action-card,
    .employee-card,
    .company-card,
    .follow-card,
    .report-card,
    .report-score-card,
    .kanban-column{
        border-radius:14px;
    }

    .section-heading,
    .page-intro,
    .panel-header,
    .drawer-header,
    .modal-header{
        gap:12px;
    }

    .section-heading,
    .page-intro{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .section-heading h2,
    .page-intro h2{
        font-size:21px;
        line-height:1.45;
    }

    .section-heading>button,
    .page-intro>button{
        width:100%;
    }

    .filter-bar{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:14px;
    }

    .filter-search,
    .filter-bar select,
    .global-search input{
        width:100%;
        min-height:44px;
    }

    .table-container{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table-container table{
        min-width:620px;
    }

    .ai-drawer{
        width:min(100%, 430px);
        max-width:100%;
    }

    .ai-welcome{
        margin:14px 16px;
        padding:16px;
    }

    .chat-messages{
        padding:14px 16px;
    }

    .chat-suggestions{
        display:flex;
        gap:8px;
        padding:10px 16px;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .chat-suggestions::-webkit-scrollbar{
        display:none;
    }

    .chat-suggestions button{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .chat-form{
        position:sticky;
        bottom:0;
        padding:12px 16px calc(12px + env(safe-area-inset-bottom));
        background:var(--surface);
    }

    .chat-form input{
        min-height:46px;
        font-size:16px;
    }

    .chat-form button{
        width:46px;
        height:46px;
    }

    .modal-backdrop{
        align-items:flex-end;
        padding:0;
    }

    .modal{
        width:100%;
        max-width:none;
        max-height:92vh;
        border-radius:20px 20px 0 0;
        padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        min-height:46px;
        font-size:16px;
    }

    .form-group textarea{
        min-height:110px;
    }

    .mobile-nav{
        position:fixed;
        right:0;
        bottom:0;
        left:0;
        z-index:120;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:2px;
        padding:7px 8px calc(7px + env(safe-area-inset-bottom));
        background:rgba(13,20,19,.98);
        border-top:1px solid var(--border);
        box-shadow:0 -10px 30px rgba(0,0,0,.22);
    }

    .mobile-nav-item{
        display:flex;
        min-width:0;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        padding:4px 2px;
        color:var(--muted);
        background:transparent;
        border-radius:10px;
    }

    .mobile-nav-item span{
        font-size:19px;
        line-height:1;
    }

    .mobile-nav-item small{
        overflow:hidden;
        max-width:100%;
        font-size:10px;
        line-height:1.4;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-nav-item.active{
        color:var(--teal);
        background:rgba(22,184,166,.12);
    }

    .mobile-nav-ai span{
        color:var(--orange);
    }
}

@media(max-width:480px){

    .topbar{
        padding-inline:12px;
    }

    .page-container{
        padding:16px 12px 24px;
    }

    .hero{
        padding:20px 16px;
    }

    .hero h2{
        font-size:22px;
    }

    .hero p{
        font-size:13px;
    }

    .kpi-card{
        padding:16px;
    }

    .kpi-card>strong{
        font-size:28px;
    }

    .panel{
        padding:14px;
    }

    .panel-header{
        align-items:flex-start;
    }

    .panel-header .live-badge{
        flex-shrink:0;
    }

    .action-card{
        min-height:92px;
        padding:14px;
    }

    .mobile-nav{
        padding-inline:4px;
    }

    .mobile-nav-item small{
        font-size:9px;
    }
}

/* =========================================================
   FINTECH-INSPIRED VISUAL SYSTEM
========================================================= */

:root{
    --bg:#08110f;
    --bg-2:#0c1714;
    --surface:#101d19;
    --surface-2:#14241f;
    --surface-3:#1a2d27;
    --border:rgba(147,202,187,.14);
    --border-light:rgba(147,202,187,.24);
    --text:#f4fbf8;
    --text-2:#c8dad4;
    --muted:#80968f;
    --teal:#39ddc5;
    --teal-dark:#159d8c;
    --shadow:0 24px 80px rgba(0,0,0,.26);
    --radius:22px;
}

body{
    background:
        radial-gradient(circle at 14% 0%, rgba(31,133,112,.16), transparent 28rem),
        radial-gradient(circle at 80% 15%, rgba(20,103,91,.12), transparent 24rem),
        var(--bg);
}

body::before{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    content:"";
    opacity:.16;
    background-image:
        linear-gradient(rgba(111,211,193,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,211,193,.08) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(180deg, black, transparent 72%);
}

.sidebar{
    background:
        linear-gradient(180deg, rgba(8,18,16,.98), rgba(10,25,21,.98));
    border-left-color:rgba(119,211,193,.16);
    box-shadow:16px 0 60px rgba(0,0,0,.16);
}

.brand-logo{
    border-radius:15px;
    box-shadow:0 12px 32px rgba(57,221,197,.24);
}

.topbar{
    background:rgba(8,17,15,.72);
    border-bottom:1px solid rgba(147,202,187,.1);
    backdrop-filter:blur(18px);
}

.page-container{
    max-width:1560px;
    margin-inline:auto;
    padding-top:36px;
}

.hero{
    min-height:260px;
    border:1px solid rgba(92,216,193,.26);
    border-radius:28px;
    background:
        linear-gradient(120deg, rgba(17,57,48,.96), rgba(11,34,29,.94) 58%, rgba(9,25,22,.98)),
        var(--surface);
    box-shadow:0 28px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
}

.hero::after{
    position:absolute;
    right:10%;
    bottom:-70px;
    width:280px;
    height:180px;
    content:"";
    background:rgba(57,221,197,.18);
    border-radius:50%;
    filter:blur(70px);
}

.hero-badge{
    padding:8px 13px;
    border-color:rgba(120,235,215,.28);
    background:rgba(28,130,111,.2);
    color:#b9fff3;
    font-size:11px;
    font-weight:700;
}

.hero h2{
    max-width:680px;
    font-size:clamp(28px, 4vw, 46px);
    line-height:1.25;
    letter-spacing:-.8px;
}

.hero p{
    color:#b2d2ca;
    font-size:14px;
}

.hero-summary{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.hero-summary span{
    padding:8px 12px;
    border:1px solid rgba(143,222,207,.16);
    border-radius:999px;
    background:rgba(7,25,21,.3);
    color:#91b2aa;
    font-size:11px;
}

.hero-summary b{
    color:#d8fff7;
    margin-left:4px;
}

.hero-grid{
    opacity:.18;
    background-size:42px 42px;
}

.kpi-card,
.brief-card,
.panel,
.action-card,
.employee-card,
.company-card,
.follow-card,
.report-card,
.report-score-card,
.kanban-column{
    border-color:var(--border);
    background:linear-gradient(145deg, rgba(21,39,33,.92), rgba(13,27,23,.94));
    box-shadow:0 16px 44px rgba(0,0,0,.15);
}

.kpi-card:hover,
.brief-card:hover,
.action-card:hover,
.employee-card:hover,
.company-card:hover,
.follow-card:hover{
    border-color:rgba(76,218,195,.34);
    transform:translateY(-3px);
}

.kpi-card{
    padding:22px;
    border-radius:20px;
}

.kpi-card>strong{
    font-size:36px;
}

.section-label{
    color:#6fb3a7;
}

.section-heading h3,
.page-intro h2,
.panel-header h3{
    letter-spacing:-.25px;
}

.primary-btn,
.ai-main-btn{
    background:linear-gradient(135deg, var(--teal), #1fae9b);
    color:#05201a;
    box-shadow:0 10px 24px rgba(57,221,197,.18);
    font-weight:800;
}

.secondary-btn,
.text-btn{
    border-color:rgba(113,203,188,.22);
    background:rgba(27,68,58,.42);
    color:#a9e9df;
}

.nav-item.active{
    background:linear-gradient(90deg, rgba(53,204,180,.18), rgba(53,204,180,.04));
    box-shadow:inset -2px 0 var(--teal);
}

.ai-drawer,
.modal{
    border:1px solid var(--border-light);
    background:linear-gradient(160deg, #152a24, #0d1c18);
    box-shadow:var(--shadow);
}

.modal-backdrop,
.overlay{
    backdrop-filter:blur(8px);
}

@media(max-width:768px){
    .page-container{
        padding-top:24px;
    }

    .hero{
        min-height:0;
        padding:24px 20px;
    }

    .hero h2{
        font-size:clamp(25px, 8vw, 34px);
    }
}

@media(max-width:480px){
    .page-container{
        padding-top:18px;
    }

    .hero-summary{
        gap:7px;
    }

    .hero-summary span{
        width:100%;
    }
}

/* =========================================================
   LIGHT SAAS PALETTE
========================================================= */

:root{
    --bg:#f5f7fc;
    --bg-2:#eef1f8;
    --sidebar:#111a3a;
    --sidebar-2:#192451;
    --surface:#ffffff;
    --surface-2:#f8f9fd;
    --surface-3:#eef0fb;
    --border:#e2e6f1;
    --border-light:#cbd2e5;
    --text:#17213d;
    --text-2:#3e4b6a;
    --muted:#71809c;
    --teal:#13a995;
    --teal-dark:#087c70;
    --blue:#4f6df5;
    --purple:#8068df;
    --shadow:0 18px 50px rgba(35,47,91,.09);
}

body{
    background:
        radial-gradient(circle at 10% 0%, rgba(143,126,236,.16), transparent 24rem),
        radial-gradient(circle at 90% 18%, rgba(71,195,180,.13), transparent 25rem),
        var(--bg);
}

body::before{
    opacity:.42;
    background-image:
        linear-gradient(rgba(92,105,170,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92,105,170,.07) 1px, transparent 1px);
    mask-image:linear-gradient(180deg, black, transparent 62%);
}

.sidebar{
    background:
        radial-gradient(circle at 15% 8%, rgba(124,107,224,.2), transparent 18rem),
        linear-gradient(180deg, #111a3a, #0c1430);
    border-left-color:rgba(204,214,255,.16);
    box-shadow:16px 0 60px rgba(17,26,58,.16);
}

.brand span,
.workspace span,
.sidebar-footer,
.nav-title{
    color:#aab5d4;
}

.workspace{
    background:rgba(255,255,255,.07);
    border-color:rgba(214,222,255,.14);
}

.nav-item{
    color:#bec8e3;
}

.nav-item:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.nav-item.active{
    color:#fff;
    background:linear-gradient(90deg, rgba(124,107,224,.36), rgba(63,205,186,.12));
    box-shadow:inset -2px 0 #8e7cf0;
}

.topbar{
    background:rgba(245,247,252,.82);
    border-bottom-color:rgba(145,157,192,.18);
    backdrop-filter:blur(18px);
}

.eyebrow,
.section-label{
    color:#7b6ad7;
}

.global-search{
    background:#fff;
    border-color:#dfe4f0;
    color:#73809a;
    box-shadow:0 8px 22px rgba(35,47,91,.05);
}

.global-search input,
.global-search input::placeholder{
    color:#73809a;
}

.icon-button,
.profile{
    background:#fff;
    border-color:#dfe4f0;
    color:#354363;
    box-shadow:0 8px 22px rgba(35,47,91,.05);
}

.page-container{
    color:var(--text);
}

.hero{
    border-color:rgba(111,103,215,.32);
    background:
        radial-gradient(circle at 12% 10%, rgba(126,111,226,.38), transparent 20rem),
        linear-gradient(120deg, #1a2452, #252d68 54%, #123f51);
    box-shadow:0 28px 80px rgba(35,47,91,.2), inset 0 1px rgba(255,255,255,.14);
}

.hero-badge{
    border-color:rgba(165,230,220,.34);
    background:rgba(24,172,151,.2);
    color:#d8fff8;
}

.hero p{
    color:#d3d9f0;
}

.hero-summary span{
    border-color:rgba(214,220,255,.24);
    background:rgba(13,23,59,.3);
    color:#d1d8ed;
}

.hero-summary b{
    color:#fff;
}

.hero-grid{
    background-image:
        linear-gradient(rgba(218,223,255,.38) 1px,transparent 1px),
        linear-gradient(90deg,rgba(218,223,255,.38) 1px,transparent 1px);
}

.kpi-card,
.brief-card,
.panel,
.action-card,
.employee-card,
.company-card,
.follow-card,
.report-card,
.report-score-card,
.kanban-column{
    border-color:var(--border);
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 36px rgba(35,47,91,.07);
}

.kpi-card:hover,
.brief-card:hover,
.action-card:hover,
.employee-card:hover,
.company-card:hover,
.follow-card:hover{
    border-color:#a9b2df;
    box-shadow:0 18px 40px rgba(35,47,91,.12);
}

.kpi-top,
.kpi-meta,
.brief-card span,
.action-card small,
.employee-card small,
.company-card small,
.follow-card small{
    color:#71809c;
}

.kpi-card>strong,
.brief-card strong,
.action-card strong,
.employee-card strong,
.company-card strong,
.follow-card strong,
.panel-header h3,
.section-heading h3,
.page-intro h2{
    color:var(--text);
}

.brief-icon,
.action-icon,
.kpi-icon{
    border:1px solid rgba(111,122,190,.12);
}

.primary-btn,
.ai-main-btn{
    background:linear-gradient(135deg, #6d5ce7, #4c76f3 55%, #16aa97);
    color:#fff;
    box-shadow:0 12px 26px rgba(87,93,218,.22);
}

.secondary-btn,
.text-btn{
    border-color:#d3d8ec;
    background:#f0f1fb;
    color:#5549ae;
}

.live-badge,
.status-badge,
.online-dot{
    box-shadow:none;
}

input,
select,
textarea{
    background:#fff;
    border-color:#dbe1ef;
    color:var(--text);
}

input:focus,
select:focus,
textarea:focus{
    border-color:#8374e3;
    box-shadow:0 0 0 3px rgba(131,116,227,.14);
}

.ai-drawer,
.modal{
    border-color:#d7dcef;
    background:#fff;
    box-shadow:0 24px 80px rgba(29,39,79,.2);
}

.drawer-header,
.modal-header{
    border-bottom-color:#e7eaf3;
}

.chat-form{
    background:#f7f8fc;
    border-top-color:#e5e8f1;
}

.mobile-nav{
    background:rgba(255,255,255,.96);
    border-top-color:#dde2ef;
    box-shadow:0 -10px 30px rgba(35,47,91,.12);
}

.mobile-nav-item{
    color:#71809c;
}

.mobile-nav-item.active{
    color:#5549ae;
    background:#f0effd;
}

.mobile-nav-ai span{
    color:#0b9b89;
}

/* =========================================================
   DARK PREMIUM PALETTE
========================================================= */

:root{
    --bg:#070911;
    --bg-2:#0b0f1d;
    --sidebar:#090c18;
    --sidebar-2:#10152a;
    --surface:#111727;
    --surface-2:#151d31;
    --surface-3:#1c2640;
    --border:rgba(225,232,255,.13);
    --border-light:rgba(225,232,255,.27);
    --text:#f5f7ff;
    --text-2:#cbd4ed;
    --muted:#8995b2;
    --teal:#35e0c3;
    --teal-dark:#129b8a;
    --blue:#6388ff;
    --purple:#9b7cff;
    --shadow:0 24px 80px rgba(0,0,0,.34);
}

body{
    position:relative;
    isolation:isolate;
    background:
        radial-gradient(circle at 10% 4%, rgba(123,92,255,.2), transparent 25rem),
        radial-gradient(circle at 88% 10%, rgba(41,182,224,.16), transparent 26rem),
        var(--bg);
}

body::before{
    opacity:.2;
    background-image:
        linear-gradient(rgba(174,191,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(174,191,255,.12) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(180deg, black, transparent 68%);
}

body::after{
    position:fixed;
    inset:-20%;
    z-index:-1;
    pointer-events:none;
    content:"";
    opacity:.5;
    background:
        radial-gradient(ellipse at 22% 35%, rgba(126,86,255,.13), transparent 32%),
        radial-gradient(ellipse at 76% 66%, rgba(31,218,195,.1), transparent 28%),
        radial-gradient(ellipse at 52% 5%, rgba(66,112,255,.1), transparent 25%);
    filter:blur(32px);
    animation:ambientDrift 18s ease-in-out infinite alternate;
}

@keyframes ambientDrift{
    0%{transform:translate3d(-2%, -1%, 0) scale(1);}
    50%{transform:translate3d(2%, 1%, 0) scale(1.04);}
    100%{transform:translate3d(-1%, 2%, 0) scale(1.01);}
}

.sidebar{
    background:
        radial-gradient(circle at 8% 10%, rgba(113,78,234,.2), transparent 18rem),
        linear-gradient(180deg, #090c18, #0d1325);
    border-left-color:rgba(210,220,255,.16);
    box-shadow:16px 0 70px rgba(0,0,0,.28);
}

.brand span,
.workspace span,
.sidebar-footer,
.nav-title{
    color:#9ca8c6;
}

.workspace{
    background:rgba(255,255,255,.055);
    border-color:rgba(225,232,255,.13);
}

.nav-item{
    color:#bac5e2;
}

.nav-item:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.nav-item.active{
    color:#fff;
    background:linear-gradient(90deg, rgba(126,92,255,.29), rgba(44,214,191,.1));
    box-shadow:inset -2px 0 #9b7cff, 0 0 24px rgba(126,92,255,.08);
}

.topbar{
    background:rgba(7,9,17,.72);
    border-bottom-color:rgba(225,232,255,.12);
}

.eyebrow,
.section-label{
    color:#9b8aff;
}

.global-search,
.icon-button,
.profile{
    background:rgba(20,27,45,.78);
    border-color:rgba(225,232,255,.16);
    color:#cbd4ed;
    box-shadow:0 10px 26px rgba(0,0,0,.14);
}

.global-search input,
.global-search input::placeholder{
    color:#8d9ab8;
}

.hero{
    border-color:rgba(177,163,255,.34);
    background:
        radial-gradient(circle at 12% 5%, rgba(130,91,255,.42), transparent 22rem),
        radial-gradient(circle at 88% 88%, rgba(25,203,185,.2), transparent 20rem),
        linear-gradient(120deg, #171b39, #20294d 58%, #102f3d);
    box-shadow:0 30px 90px rgba(0,0,0,.36), 0 0 50px rgba(104,78,232,.1), inset 0 1px rgba(255,255,255,.1);
}

.hero-badge{
    border-color:rgba(126,241,221,.34);
    background:rgba(20,172,151,.18);
    color:#d4fff6;
    box-shadow:0 0 22px rgba(31,218,195,.1);
}

.hero p{
    color:#cbd5ec;
}

.hero-summary span{
    border-color:rgba(224,229,255,.23);
    background:rgba(5,8,22,.34);
    color:#c5d0e7;
}

.hero-summary b{
    color:#fff;
}

.hero-grid{
    background-image:
        linear-gradient(rgba(205,215,255,.3) 1px,transparent 1px),
        linear-gradient(90deg,rgba(205,215,255,.3) 1px,transparent 1px);
}

.kpi-card,
.brief-card,
.panel,
.action-card,
.employee-card,
.company-card,
.follow-card,
.report-card,
.report-score-card,
.kanban-column{
    border-color:rgba(225,232,255,.14);
    background:linear-gradient(145deg, rgba(23,31,53,.82), rgba(13,18,32,.9));
    box-shadow:0 18px 46px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(14px);
}

.kpi-card:hover,
.brief-card:hover,
.action-card:hover,
.employee-card:hover,
.company-card:hover,
.follow-card:hover{
    border-color:rgba(126,241,221,.38);
    box-shadow:0 20px 48px rgba(0,0,0,.28), 0 0 28px rgba(80,117,255,.08);
}

.kpi-top,
.kpi-meta,
.brief-card span,
.action-card small,
.employee-card small,
.company-card small,
.follow-card small{
    color:#92a0bd;
}

.kpi-card>strong,
.brief-card strong,
.action-card strong,
.employee-card strong,
.company-card strong,
.follow-card strong,
.panel-header h3,
.section-heading h3,
.page-intro h2{
    color:#f5f7ff;
}

.brief-icon,
.action-icon,
.kpi-icon{
    border-color:rgba(218,226,255,.15);
    box-shadow:0 0 20px rgba(103,91,245,.1);
}

.primary-btn,
.ai-main-btn{
    background:linear-gradient(135deg, #a174ff 0%, #5e7dff 52%, #32d9bf 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 12px 28px rgba(93,106,255,.28), 0 0 24px rgba(69,225,199,.1);
}

.secondary-btn,
.text-btn{
    border-color:rgba(197,204,255,.24);
    background:rgba(102,83,207,.16);
    color:#c9c0ff;
}

input,
select,
textarea{
    background:rgba(13,19,34,.78);
    border-color:rgba(225,232,255,.18);
    color:#f1f4ff;
}

input::placeholder,
textarea::placeholder{
    color:#7f8ca8;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#8d7aff;
    box-shadow:0 0 0 3px rgba(141,122,255,.18), 0 0 18px rgba(141,122,255,.1);
}

.ai-drawer,
.modal{
    border-color:rgba(225,232,255,.22);
    background:linear-gradient(160deg, #18213a, #0d1324);
    box-shadow:0 28px 90px rgba(0,0,0,.44), 0 0 36px rgba(94,79,218,.12);
}

.drawer-header,
.modal-header{
    border-bottom-color:rgba(225,232,255,.13);
}

.chat-form{
    background:rgba(12,18,32,.92);
    border-top-color:rgba(225,232,255,.12);
}

.mobile-nav{
    background:rgba(9,13,26,.96);
    border-top-color:rgba(225,232,255,.16);
    box-shadow:0 -12px 34px rgba(0,0,0,.28);
}

.mobile-nav-item{
    color:#929fbe;
}

.mobile-nav-item.active{
    color:#c5b9ff;
    background:rgba(126,92,255,.17);
    box-shadow:0 0 18px rgba(126,92,255,.1);
}

.mobile-nav-ai span{
    color:#42e1c5;
}

@media(prefers-reduced-motion:reduce){
    body::after{
        animation:none;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   BLACK NEON FINISH
========================================================= */

:root{
    --bg:#020308;
    --bg-2:#050711;
    --surface:#0b0d16;
    --surface-2:#101321;
    --surface-3:#171b2d;
    --border:rgba(255,255,255,.16);
    --border-light:rgba(255,255,255,.3);
    --text:#ffffff;
    --text-2:#d8def0;
    --muted:#9099b4;
    --shadow:0 26px 90px rgba(0,0,0,.5);
}

body{
    background:
        radial-gradient(circle at 8% 0%, rgba(133,70,255,.22), transparent 24rem),
        radial-gradient(circle at 92% 12%, rgba(25,222,197,.15), transparent 25rem),
        #020308;
}

body::before{
    opacity:.18;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px),
        linear-gradient(rgba(102,126,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102,126,255,.12) 1px, transparent 1px);
    background-position:0 0, 0 0, 0 0;
    background-size:34px 34px, 68px 68px, 68px 68px;
}

body::after{
    opacity:.62;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(126,74,255,.16), transparent 28%),
        radial-gradient(ellipse at 80% 60%, rgba(19,225,199,.12), transparent 25%),
        radial-gradient(ellipse at 50% 5%, rgba(74,103,255,.14), transparent 24%);
    animation-duration:24s;
}

.sidebar{
    background:linear-gradient(180deg, #03040a, #080b16);
}

.topbar{
    background:rgba(2,3,8,.78);
}

.kpi-card,
.brief-card,
.panel,
.action-card,
.employee-card,
.company-card,
.follow-card,
.report-card,
.report-score-card,
.kanban-column{
    background:linear-gradient(145deg, rgba(20,23,38,.78), rgba(7,9,16,.9));
    border-color:rgba(255,255,255,.17);
    box-shadow:0 18px 55px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
}

.kpi-card:hover,
.brief-card:hover,
.action-card:hover,
.employee-card:hover,
.company-card:hover,
.follow-card:hover{
    border-color:rgba(107,239,215,.55);
    box-shadow:0 20px 58px rgba(0,0,0,.44), 0 0 28px rgba(125,79,255,.14);
}

.employee-edit-btn{
    color:#bcaeff;
    border-color:rgba(157,124,255,.4);
    background:rgba(111,77,255,.14);
}

.employee-delete-btn{
    color:#ff91a9;
    border-color:rgba(255,104,137,.4);
    background:rgba(255,74,109,.1);
}

.employee-edit-btn:hover,
.employee-delete-btn:hover{
    filter:brightness(1.2);
    box-shadow:0 0 18px rgba(157,124,255,.16);
}

@media(max-width:480px){
    .card-actions{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* =========================================================
   PREMIUM COMMAND NAVIGATION
========================================================= */

.sidebar{
    width:286px;
    padding:22px 16px 18px;
    border-left:1px solid rgba(255,255,255,.15);
}

.brand{
    min-height:74px;
    padding:10px 10px 18px;
    gap:14px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.brand-logo{
    width:50px;
    height:50px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:16px;
    background:linear-gradient(135deg, #c29aff, #656fff 52%, #32dfc2);
    box-shadow:0 0 26px rgba(126,92,255,.32), inset 0 1px rgba(255,255,255,.6);
}

.brand h2{
    font-size:22px;
    letter-spacing:1.5px;
}

.brand span{
    color:#98a4c3;
    font-size:10px;
    letter-spacing:.35px;
}

.workspace{
    min-height:68px;
    margin:18px 0 22px;
    padding:10px 11px;
    border-color:rgba(255,255,255,.15);
    background:linear-gradient(135deg, rgba(126,92,255,.13), rgba(45,216,192,.06));
    box-shadow:inset 0 1px rgba(255,255,255,.05);
}

.workspace-icon{
    width:40px;
    height:40px;
    border:1px solid rgba(69,225,199,.32);
    background:rgba(39,217,190,.1);
    color:#6ff2dd;
    box-shadow:0 0 18px rgba(39,217,190,.12);
}

.workspace strong{
    color:#f8f9ff;
    font-size:12px;
}

.nav-section{
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 9px 9px;
}

.nav-section .nav-title{
    padding:0;
    color:#74809f;
    font-size:9px;
    letter-spacing:1.8px;
    white-space:nowrap;
}

.nav-section-line{
    height:1px;
    flex:1;
    background:linear-gradient(90deg, rgba(255,255,255,.13), transparent);
}

nav{
    gap:7px;
}

.nav-item{
    position:relative;
    min-height:52px;
    padding:0 13px;
    gap:12px;
    border:1px solid transparent;
    border-radius:14px;
    color:#9da9c7;
    font-size:13px;
    font-weight:600;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nav-item::after{
    position:absolute;
    right:0;
    width:3px;
    height:20px;
    content:"";
    background:linear-gradient(#c5a2ff, #38e0c3);
    border-radius:4px 0 0 4px;
    opacity:0;
    box-shadow:0 0 14px #8c73ff;
    transition:opacity .2s ease;
}

.nav-item:hover{
    color:#fff;
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    transform:translateX(-2px);
}

.nav-item:focus-visible,
.ai-sidebar-btn:focus-visible{
    outline:2px solid #55e8d0;
    outline-offset:3px;
}

.nav-item.active{
    border-color:rgba(169,144,255,.28);
    background:linear-gradient(90deg, rgba(126,92,255,.25), rgba(34,213,190,.08));
    color:#fff;
    box-shadow:0 0 24px rgba(126,92,255,.1), inset 0 1px rgba(255,255,255,.08);
}

.nav-item.active::after{
    opacity:1;
}

.nav-icon{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:rgba(255,255,255,.045);
    color:#a993ff;
    font-size:17px;
    box-shadow:inset 0 1px rgba(255,255,255,.05);
}

.nav-item.active .nav-icon{
    border-color:rgba(66,228,202,.3);
    background:rgba(43,221,194,.12);
    color:#6cefd9;
    box-shadow:0 0 17px rgba(43,221,194,.1);
}

.nav-section-secondary{
    margin-top:25px;
}

.sidebar-bottom{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.1);
}

.ai-sidebar-btn{
    min-height:70px;
    padding:12px;
    border:1px solid rgba(94,231,210,.3);
    border-radius:16px;
    background:
        radial-gradient(circle at 100% 0, rgba(126,92,255,.25), transparent 10rem),
        linear-gradient(135deg, rgba(27,66,72,.8), rgba(35,25,67,.82));
    box-shadow:0 0 28px rgba(60,219,195,.08), inset 0 1px rgba(255,255,255,.08);
}

.ai-sidebar-btn:hover{
    border-color:rgba(103,241,220,.62);
    box-shadow:0 0 30px rgba(60,219,195,.15), inset 0 1px rgba(255,255,255,.1);
}

.ai-icon{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.23);
    border-radius:12px;
    background:linear-gradient(135deg, #9677ff, #30d9bd);
    color:#fff;
    box-shadow:0 0 20px rgba(126,92,255,.25);
}

.ai-sidebar-btn strong{
    color:#fff;
    letter-spacing:.3px;
}

.ai-sidebar-btn span:not(.online-dot){
    color:#a8c7d0;
}

.online-dot{
    width:8px;
    height:8px;
    background:#48ebc9;
    box-shadow:0 0 12px #48ebc9;
}

.sidebar-footer{
    padding:15px 5px 0;
    color:#7783a1;
}