@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');
:root{
    --primary-color: #00b074;
    --primary-hover: #009663;
    --primary-light-bg: #f0fdf9;
    --primary-light-card: #edfaf3;
    --primary-border: #c7f0df;
    --primary-shadow: rgba(0, 176, 116, 0.28);
    --primary-gradient: linear-gradient(90deg, var(--primary-color) 0%, #34d399 100%);
    --primary-gradient-v: linear-gradient(180deg, var(--primary-color), #4ade80);
    --black:#070808;--surface:#111314;--gold:#edae18;--gold2:#f5bb2b;--white:#f8f8f8;--muted:#c6c6c6;--line:rgba(255,255,255,.12);--body:'Manrope',sans-serif;--head:'Outfit',sans-serif;
}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--body);background:var(--black);color:var(--white);overflow-x:hidden;letter-spacing:-.01em}a{text-decoration:none;color:inherit}button{font:inherit;border:0;cursor:pointer}ul{list-style:none}img{display:block;max-width:100%}.nav-container,.hero-container,.grid-container,.stats-container,.banner-container,.footer-container,.footer-bottom{width:min(100%,1428px);margin:auto}
.navbar{height:88px;position:absolute;z-index:20;inset:0 0 auto;background:rgba(0,0,0,.75);border-bottom:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);padding:0 54px}.navbar.scrolled{position:fixed;background:rgba(3,4,4,.94)}.nav-container{height:100%;display:flex;align-items:center;justify-content:space-between}.brand-logo{display:flex;align-items:center;gap:13px}.logo-icon-wrap{width:52px;height:64px}.logo-svg{width:100%;height:100%}.brand-text{display:flex;flex-direction:column}.brand-name{font-family:var(--head);font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1}.brand-sub{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:3.2px;margin-top:7px}.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:52px;height:100%}.nav-item{height:100%;position:relative;display:flex;align-items:center;font-size:13px;font-weight:700;color:#f5f5f5;white-space:nowrap}.nav-item.active{color:var(--gold)}.nav-item:after{position:absolute;content:"";height:2px;bottom:0;left:-8px;right:-8px;background:var(--gold);transform:scaleX(0);transition:.2s}.nav-item.active:after,.nav-item:hover:after{transform:scaleX(1)}.nav-actions{display:flex;gap:17px;align-items:center}.btn-quote{display:flex;align-items:center;gap:18px;border-radius:12px;background:linear-gradient(135deg,#f2b526,#d79209);font-weight:800;font-size:12px;padding:12px 18px;color:#090909}.btn-quote i{width:17px}.mobile-menu-toggle{height:40px;width:40px;border:1px solid #2d3335;border-radius:50%;color:white;background:#121516;display:grid;place-items:center}.mobile-menu-toggle i{width:20px}
.hero-section{height:514px;position:relative;overflow:hidden;padding:88px 54px 0}.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0}.hero-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.84) 26%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.04) 100%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 49%,rgba(0,0,0,.18))}.hero-container{height:100%;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.hero-left-content{max-width:555px;margin-top:6px}.hero-tagline{color:var(--gold2);font-size:14px;font-weight:600;margin-bottom:13px}.tagline-dot{display:none}.hero-title{font:800 51px/1.01 var(--head);letter-spacing:-1.7px;margin-bottom:8px}.highlight-gold{color:var(--gold);display:inline-block}.hero-title:after{content:"";display:block;width:87px;height:2px;background:#fff;margin-top:8px}.hero-subtext{font-size:14px;line-height:1.62;max-width:395px;color:#eee;margin:9px 0 21px}.hero-subtext strong{font-weight:800}.hero-cta-group{display:flex;gap:15px;align-items:center}.btn-primary-gold,.btn-outline-dark{height:40px;display:inline-flex;align-items:center;gap:12px;border-radius:22px;padding:0 21px;font-weight:700;font-size:12px}.btn-primary-gold{background:var(--gold2);color:#080808}.btn-outline-dark{border:1px solid var(--gold);background:rgba(0,0,0,.25);color:#fff}.btn-primary-gold i,.btn-outline-dark i{width:17px}.hero-right-glass-card{width:270px;margin-right:0;margin-top:8px;padding:16px 17px;border-radius:14px;background:linear-gradient(135deg,rgba(41,45,45,.72),rgba(181,166,138,.58));border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);box-shadow:0 12px 22px rgba(0,0,0,.25)}.glass-feature-list{display:grid;gap:12px}.glass-feature-item{display:flex;align-items:center;gap:13px}.feature-icon-badge{width:29px;height:29px;display:grid;place-items:center;color:white;flex:0 0 auto}.feature-icon-badge i{width:27px;height:27px;stroke-width:1.45}.feature-info h4{font-size:13px;line-height:1.1;margin-bottom:4px}.feature-info p{font-size:9.5px;color:#f0f0f0}.glass-card-header,.btn-ai-trigger{display:none}
.glass-grid-section{height:274px;padding:0 54px;background:linear-gradient(105deg,#101212,#171818 55%,#0d0f0f);border-bottom:1px solid #252626}.grid-container{height:100%;display:grid;grid-template-columns:300px 528px 1fr;gap:22px}.grid-card{position:relative;padding:25px 0;background:transparent}.card-who-we-are{border-right:1px solid rgba(255,255,255,.06);padding-right:35px}.card-label{display:inline-block;color:var(--gold2);font-size:12px;font-weight:800;margin-bottom:10px;position:relative}.card-label:after{content:"";height:2px;width:28px;background:var(--gold);position:absolute;left:0;bottom:-8px}.card-who-we-are .card-heading{font:700 21px/1.16 var(--head);margin:7px 0 9px}.card-who-we-are .card-text{font-size:11px;line-height:1.52;color:#ddd;max-width:230px}.founder-signature-wrap{display:flex;align-items:flex-end;gap:11px;margin-top:15px}.signature-line{font-family:'Reenie Beanie',cursive;color:var(--gold);font-size:38px;line-height:.8}.signature-title{padding-bottom:1px}.signature-title strong,.signature-title span{display:block;font-size:9px;line-height:1.6}.signature-title span{font-size:7.5px}.card-expertise{padding-left:7px;padding-right:7px}.expertise-items-grid{height:174px;margin-top:11px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.expertise-tile{border:1px solid rgba(255,255,255,.1);border-radius:5px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.01));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:8px 3px;text-align:center}.tile-icon{color:var(--gold);height:55px}.tile-icon i{width:49px;height:49px;stroke-width:1.8}.expertise-tile h4{font-size:10px;line-height:1.45;color:#fff}.card-featured-projects{padding-left:0}.projects-card-header{height:27px;display:flex;justify-content:space-between;align-items:flex-start}.link-view-all{font-size:10px;margin-top:2px;display:flex;align-items:center;gap:9px}.link-view-all i{border:1px solid white;border-radius:50%;width:17px;height:17px;padding:3px}.featured-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:8px}.project-thumb-card{height:178px;position:relative;overflow:hidden;border-radius:4px}.project-thumb-card img{height:100%;width:100%;object-fit:cover}.project-thumb-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%);padding:13px 10px;display:flex;align-items:flex-end}.project-info h4{font-size:11px;white-space:nowrap}.project-loc{display:block;font-size:8px;color:#ddd;margin-top:2px}.project-loc i{display:none}.project-arrow-btn{position:absolute;right:10px;bottom:15px;width:17px;height:17px;background:var(--gold);border-radius:50%;color:#111;display:grid;place-items:center}.project-arrow-btn i{width:11px}
.stats-counter-section{height:137px;background:#f4f4f4;padding:0 54px;color:#111}.stats-container{height:100%;display:grid;grid-template-columns:repeat(5,1fr) 215px;align-items:center}.stat-item{height:64px;display:flex;align-items:center;gap:17px;padding:0 25px;border-right:1px solid #ddd}.stat-item:first-child{padding-left:0}.stat-icon-circle{width:62px;height:62px;flex:0 0 62px;border-radius:50%;background:#111;display:grid;place-items:center;color:var(--gold)}.stat-icon-circle i{width:31px;height:31px}.stat-number{color:#b47c05;font:800 32px/1 var(--head)}.stat-label{font-size:12px;white-space:nowrap;margin-top:7px}.ai-widget-badge-card{justify-self:end;width:215px;height:102px;border-radius:12px;background:linear-gradient(120deg,#e5e5e5,#d5d5d5);padding:12px 12px 9px;position:relative;cursor:pointer}.ai-bot-avatar{position:absolute;left:10px;bottom:6px;width:57px;height:71px;border-radius:20px;background:linear-gradient(145deg,#eaf7ff,#94bdd3);display:grid;place-items:center;color:#122537}.ai-bot-avatar i{width:38px;height:38px}.status-pulse{display:none}.ai-widget-text{margin-left:57px}.ai-widget-text strong{font-size:10px}.ai-widget-text p{font-size:8px;white-space:nowrap;margin-top:2px}.btn-chat-ai{position:absolute;right:14px;bottom:7px;border-radius:16px;background:var(--gold);font-size:8px;padding:7px 11px}.btn-chat-ai i{width:10px;vertical-align:middle}
.bottom-banner-section{height:100px;padding:0;background:#111}.banner-container{height:100%;width:100%;display:grid;grid-template-columns:66% 34%}.banner-left-dark{display:flex;align-items:center;justify-content:space-between;padding:0 54px;background:linear-gradient(105deg,#111415,#111b1c)}.dark-banner-header{width:275px;display:flex;align-items:center;gap:11px}.gold-mini-emblem{color:var(--gold)}.gold-mini-emblem i{width:31px}.dark-banner-header h3{font:700 18px/1.18 var(--head);color:#ecb429}.banner-features-row{flex:1;display:flex;justify-content:space-around;gap:15px}.b-feature{display:flex;align-items:center;gap:10px}.b-icon{border:1px solid var(--gold);border-radius:50%;height:39px;width:39px;display:grid;place-items:center;color:var(--gold)}.b-icon i{width:21px}.b-text strong,.b-text span{display:block;white-space:nowrap}.b-text strong{font-size:10px}.b-text span{font-size:8px;color:#ddd;margin-top:3px}.banner-right-gold{background:linear-gradient(125deg,#d8930c,#f7bb25);display:flex;align-items:center;justify-content:space-between;padding:0 63px 0 37px;color:#101010}.gold-banner-content{display:flex;align-items:center;gap:13px}.phone-call-icon{background:#1a1a19;color:#eeb11d;border-radius:50%;width:39px;height:39px;display:grid;place-items:center}.phone-call-icon i{width:22px}.gold-call-text h3{font-size:12px}.gold-call-text p{font-size:9px;margin-top:3px}.btn-contact-action{background:#151515;color:white;border-radius:18px;padding:10px 16px;font-size:10px;font-weight:700}.btn-contact-action i{width:13px;vertical-align:middle;margin-left:10px}
.site-footer{padding:55px 54px 0;background:#0b0c0c}.footer-container{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:30px}.footer-col h4{color:var(--gold);margin-bottom:15px}.footer-about,.footer-col li,.footer-col p{font-size:12px;color:#bbb;margin-bottom:7px}.footer-col p i{width:14px;vertical-align:middle;margin-right:5px}.footer-admin-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 13px;border:1px solid rgba(237,174,24,.7);border-radius:6px;color:var(--gold2);font-size:12px;font-weight:800;transition:.2s}.footer-admin-link:hover{background:var(--gold);color:#111}.footer-admin-link i{width:16px;height:16px}.footer-bottom{border-top:1px solid var(--line);padding:18px 0;margin-top:40px;font-size:11px;color:#999}.modal-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);padding:20px}.modal-overlay.active{display:flex}.modal-content{position:relative;max-height:90vh;overflow:auto;background:#16191a;border:1px solid #55451d;border-radius:12px;padding:28px;color:#fff}.modal-close{position:absolute;right:15px;top:8px;font-size:28px;background:none;color:#fff}.quote-modal-content{max-width:650px}.estimator-modal-content{max-width:1040px}.modal-header h2{font-family:var(--head);margin-bottom:6px}.modal-header p{color:#bbb;font-size:13px}.quote-form-grid,.estimator-grid{display:grid;gap:13px;margin-top:24px}.form-field label{display:block;font-size:12px;margin-bottom:5px}.form-field input,.form-field select{width:100%;padding:10px;border-radius:5px;border:1px solid #444;background:#242727;color:#fff}.hidden{display:none}.ai-chatbot-drawer{position:fixed;z-index:80;right:-390px;bottom:0;width:360px;height:540px;background:#171a1b;border:1px solid #55451d;transition:.3s}.ai-chatbot-drawer.active{right:15px}.chatbot-header{padding:15px;display:flex;justify-content:space-between}.chatbot-messages{padding:15px}.chatbot-input-area{position:absolute;bottom:0;display:flex;width:100%;padding:12px}.chatbot-input-area input{flex:1;padding:10px}.chatbot-input-area button{background:var(--gold);padding:8px}
@media(max-width:1200px){.nav-links{gap:18px;margin-right:25px}.grid-container{grid-template-columns:250px 450px 1fr}.expertise-tile h4{font-size:8px}.stat-item{padding:0 12px}.stat-number{font-size:27px}.stat-icon-circle{height:49px;width:49px;flex-basis:49px}.ai-widget-badge-card{display:none}.stats-container{grid-template-columns:repeat(5,1fr)}}@media(max-width:850px){.navbar{height:74px;padding:0 20px}.nav-links{position:absolute;top:74px;left:0;right:0;height:auto;display:none;flex-direction:column;align-items:stretch;background:#0b0c0c;padding:15px 25px;margin:0}.nav-links.active{display:flex}.nav-item{height:38px}.nav-actions .btn-quote{display:none}.hero-section{height:650px;padding:74px 25px 0}.hero-container{display:block;padding-top:85px}.hero-title{font-size:39px}.hero-right-glass-card{width:100%;max-width:330px;margin-top:26px}.glass-feature-list{grid-template-columns:1fr 1fr}.feature-info p{display:none}.grid-container{display:block}.glass-grid-section{height:auto;padding:28px 25px}.grid-card{padding:20px 0;border:0}.card-who-we-are{padding-top:0}.expertise-items-grid{height:145px}.featured-projects-grid{grid-template-columns:repeat(3,1fr)}.project-thumb-card{height:135px}.stats-counter-section{height:auto;padding:22px 25px}.stats-container{grid-template-columns:1fr 1fr;gap:15px}.stat-item{border:0;padding:0}.bottom-banner-section{height:auto}.banner-container{grid-template-columns:1fr}.banner-left-dark{padding:25px;display:block}.banner-features-row{margin-top:18px;flex-wrap:wrap}.banner-right-gold{padding:25px}.footer-container{grid-template-columns:1fr 1fr;padding:0 25px}.footer-bottom{padding:18px 25px}.site-footer{padding:45px 0 0}}

/* Inner pages: a shared, deliberate editorial layout for every navigation item. */
.page-shell{min-height:100vh;background:#0b0d0d}.page-nav{position:relative;height:88px}.page-hero{padding:86px 54px 70px;background:linear-gradient(112deg,rgba(4,5,5,.94),rgba(13,17,18,.72)),url('assets/hero_bg.png') center 46%/cover;position:relative;border-bottom:1px solid var(--line)}.page-hero__inner,.page-content{width:min(100%,1428px);margin:auto}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold2);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}.eyebrow:before{content:"";width:28px;height:2px;background:var(--gold)}.page-title{max-width:720px;margin:15px 0 15px;font:800 clamp(37px,4vw,61px)/1.05 var(--head);letter-spacing:-1.8px}.page-lead{max-width:620px;color:#e0e0e0;font-size:16px;line-height:1.75}.page-content{padding:64px 0 80px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card{min-height:205px;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.015))}.info-card__icon{height:45px;width:45px;display:grid;place-items:center;border-radius:50%;background:#161717;color:var(--gold);margin-bottom:20px}.info-card__icon i{width:24px}.info-card h2{font:700 20px/1.2 var(--head);margin-bottom:10px}.info-card p{font-size:13px;line-height:1.7;color:#c7c7c7}.section-title{font:750 32px/1.15 var(--head);margin-bottom:13px}.section-intro{max-width:670px;color:#bbb;font-size:14px;line-height:1.7;margin-bottom:30px}.project-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-page-card{border:1px solid #303434;border-radius:8px;overflow:hidden;background:#121414}.project-page-card img{height:210px;width:100%;object-fit:cover}.project-page-card div{padding:17px}.project-page-card h2{font:700 18px var(--head);margin-bottom:5px}.project-page-card p{font-size:12px;color:#bbb}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px}.contact-panel{padding:30px;border-radius:9px;background:#151717;border:1px solid var(--line)}.contact-panel h2{font:700 24px var(--head);margin-bottom:13px}.contact-panel p{font-size:13px;color:#c9c9c9;line-height:1.7;margin:9px 0}.contact-panel form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-panel form .form-field:last-of-type{grid-column:span 2}.contact-panel textarea{width:100%;min-height:115px;padding:10px;border-radius:5px;border:1px solid #444;background:#242727;color:#fff;resize:vertical}.form-submit{grid-column:span 2;background:var(--gold);padding:12px 18px;border-radius:5px;font-size:12px;font-weight:800;color:#111}.page-footer{margin-top:0}.page-footer .footer-container{padding-top:0}
@media(max-width:850px){.page-hero{padding:65px 25px 50px}.page-content{padding:45px 25px}.info-grid,.project-page-grid,.contact-layout{grid-template-columns:1fr}.contact-panel form{grid-template-columns:1fr}.contact-panel form .form-field:last-of-type,.form-submit{grid-column:auto}.page-title{letter-spacing:-1px}.page-lead{font-size:14px}}

/* Type refinement: compact, legible and less decorative at every size. */
.hero-title{font-family:var(--head);line-height:1.05;letter-spacing:-1.35px}.page-title,.section-title,.card-who-we-are .card-heading,.dark-banner-header h3{font-family:var(--head);letter-spacing:-.045em}.hero-subtext,.page-lead,.card-who-we-are .card-text,.info-card p,.contact-panel p{font-family:var(--body);font-weight:500}.nav-item,.btn-quote,.btn-primary-gold,.btn-outline-dark,.card-label,.eyebrow{letter-spacing:0}.brand-name{font-family:var(--head);letter-spacing:-.035em}.stat-number{font-family:var(--head);letter-spacing:-.045em}

/* Surface enhancement: restrained radius, depth and interaction feedback. */
.expertise-tile,.project-thumb-card,.info-card,.project-page-card,.contact-panel,.ai-widget-badge-card{border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.expertise-tile{border-color:rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.018))}.expertise-tile:hover,.info-card:hover,.project-page-card:hover{transform:translateY(-5px);border-color:rgba(237,174,24,.58);box-shadow:0 16px 35px rgba(0,0,0,.35),0 0 0 1px rgba(237,174,24,.08)}.project-thumb-card{box-shadow:0 10px 22px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}.project-thumb-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(0,0,0,.4);border-color:rgba(237,174,24,.65)}.project-thumb-card img,.project-page-card img{transition:transform .45s ease}.project-thumb-card:hover img,.project-page-card:hover img{transform:scale(1.055)}.info-card{border-color:rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.2)}.info-card__icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 7px 16px rgba(0,0,0,.26)}.project-page-card{border-color:rgba(255,255,255,.13);box-shadow:0 12px 28px rgba(0,0,0,.25)}.contact-panel{border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 32px rgba(0,0,0,.22)}.stat-icon-circle,.phone-call-icon,.b-icon{box-shadow:0 7px 17px rgba(0,0,0,.22)}.btn-quote,.btn-primary-gold,.btn-contact-action{box-shadow:0 7px 15px rgba(0,0,0,.2)}

/* ==========================================================================
   ENTERPRISE ADMIN PORTAL — COMPLETE LIGHT THEME
   Emerald Green #00b074 | Canvas #f4f6f8 | Cards #ffffff
   ========================================================================== */

/* ---- RESET FOR ADMIN BODY ---- */
body.admin-app-body,
body.admin-app-body.light-theme {
    background: #f4f6f8 !important;
    color: #1e293b !important;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Hide homepage body styles when on admin page */
body.admin-app-body .navbar,
body.admin-app-body .hero-section,
body.admin-app-body .stats-counter-section { display: none !important; }

/* ---- APP WRAPPER (100% FULL SCREEN VIEW) ---- */
.admin-app-wrapper {
    display: flex !important;
    min-height: 100vh;
    width: 100% !important;
    background: #f4f6f8;
    max-width: 100% !important;
    margin: 0;
    border-radius: 0;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* =============================================
   SIDEBAR
   ============================================= */
.admin-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex-shrink: 0 !important;
    background: #ffffff;
    border-right: 1px solid #eef2f7;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 90;
    overflow-y: auto;
    transition: transform 0.3s ease;
    border-radius: 0;
    box-sizing: border-box !important;
}

/* Hide scrollbar for sidebar */
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* Brand */
.sidebar-brand {
    height: 68px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.sidebar-brand .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand .logo-icon-wrap {
    width: 32px;
    height: 38px;
    flex-shrink: 0;
}

.sidebar-brand .brand-text {
    display: flex;
    flex-direction: column;
}

.sidebar-brand .brand-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    line-height: 1;
}

.sidebar-brand .brand-sub {
    font-size: 8px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1.8px;
    margin-top: 3px;
}

.sidebar-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px var(--primary-shadow);
}

.sidebar-toggle-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.08);
}

.sidebar-toggle-btn i { width: 14px; height: 14px; }

/* Nav Menu */
.sidebar-menu {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Section label (e.g. 'Home') */
.sidebar-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 8px 12px 4px;
    margin-bottom: 2px;
}

/* Direct nav item (e.g. Dashboard) */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    cursor: pointer;
}

.sidebar-item i {
    width: 17px; height: 17px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.18s;
}

.sidebar-item:hover {
    background: var(--primary-light-bg);
    color: var(--primary-color);
}

.sidebar-item:hover i { color: var(--primary-color); }

.sidebar-item.active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--primary-shadow);
}

.sidebar-item.active i { color: #ffffff; }

/* Group accordion */
.sidebar-group { margin-bottom: 1px; }

.sidebar-group-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border: 0;
    transition: all 0.18s ease;
}

.sidebar-group-title .title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-group-title .title-left i {
    width: 17px; height: 17px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.18s;
}

.sidebar-group-title:hover {
    background: var(--primary-light-bg);
    color: var(--primary-color);
}

.sidebar-group-title:hover .title-left i { color: var(--primary-color); }

.sidebar-group-title.active,
.sidebar-group.open > .sidebar-group-title {
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 14px var(--primary-shadow);
}

.sidebar-group-title.active .title-left i,
.sidebar-group.open > .sidebar-group-title .title-left i,
.sidebar-group.open > .sidebar-group-title .group-arrow {
    color: #ffffff;
    opacity: 1;
}

.sidebar-group.open .group-arrow { transform: rotate(90deg); opacity: 0.8; }

/* Sub-menu */
.sidebar-sub-menu {
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    gap: 1px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-top 0.3s ease, opacity 0.25s ease;
    opacity: 0;
}

.sidebar-group.open .sidebar-sub-menu {
    max-height: 300px;
    padding-top: 2px;
    opacity: 1;
}

.sub-item {
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.16s ease;
}

.sub-item:hover, .sub-item.active {
    color: var(--primary-color);
    background: var(--primary-light-bg);
    font-weight: 700;
}

/* AI pill tag in sidebar */
.ai-pill-tag {
    font-size: 9px;
    font-weight: 800;
    background: var(--primary-color);
    color: #fff;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: auto;
}

/* Zoom meeting bottom card */
.sidebar-zoom-card {
    margin: 10px;
    padding: 14px;
    background: var(--primary-light-card);
    border: 1px solid var(--primary-border);
    border-radius: 16px;
    flex-shrink: 0;
}

.zoom-avatars-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.avatar-stack { display: flex; }

.avatar-stack img {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -8px;
}

.avatar-stack img:first-child { margin-left: 0; }

.zoom-icon-badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: grid;
    place-items: center;
}

.zoom-icon-badge i { width: 13px; height: 13px; }

.sidebar-zoom-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.sidebar-zoom-card p {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 10px;
}

.btn-zoom-join {
    width: 100%;
    padding: 8px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-zoom-join:hover { background: var(--primary-hover); }

.btn-zoom-join:hover { background: #009663; }

/* =============================================
   MAIN CONTENT CONTAINER
   ============================================= */
.admin-main-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 0 !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f4f6f8;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* =============================================
   TOPBAR
   ============================================= */
.admin-topbar {
    height: 68px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 80;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mobile-sidebar-toggle {
    display: none;
    background: none;
    border: 0;
    color: #1e293b;
    cursor: pointer;
}

.topbar-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 8px 16px;
    width: 320px;
}

.topbar-search-box i { width: 15px; height: 15px; color: #94a3b8; }

.topbar-search-box input {
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
    color: #1e293b;
    width: 100%;
    font-family: inherit;
}

.topbar-search-box input::placeholder { color: #94a3b8; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn-round {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: background 0.18s;
}

.icon-btn-round:hover { background: #f0fdf9; color: #00b074; }
.icon-btn-round i { width: 17px; height: 17px; }

.notif-dot {
    position: absolute;
    top: 2px; right: 2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
}

.user-profile-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    cursor: pointer;
}

.pill-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.pill-info { display: flex; flex-direction: column; }
.pill-info strong { font-size: 12px; font-weight: 700; color: #0f172a; }
.pill-info span { font-size: 10px; color: #64748b; }
.pill-arrow { width: 13px; height: 13px; color: #94a3b8; }

/* Topbar Dropdowns Container & Positioning */
.topbar-dropdown-wrapper {
    position: relative;
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 330px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.15), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 120;
    overflow: hidden;
}

.topbar-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notif-dropdown, .chat-dropdown {
    width: 350px;
}

.profile-dropdown {
    width: 290px;
}

/* Dropdown Header */
.dropdown-header {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-header h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.dropdown-sub-text {
    font-size: 11px;
    color: #64748b;
    display: block;
    margin-top: 1px;
}

.dropdown-action-link {
    background: none;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    color: #00b074;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.dropdown-action-link:hover {
    background: #e6f7f1;
}

/* Dropdown Item List */
.dropdown-list {
    max-height: 310px;
    overflow-y: auto;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: #f1f5f9;
}

.dropdown-item.unread {
    background: #f0fdf9;
}

.dropdown-item.unread:hover {
    background: #e6f7f1;
}

.item-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.item-icon-box i { width: 16px; height: 16px; }
.item-icon-box.green { background: #dcfce7; color: #16a34a; }
.item-icon-box.yellow { background: #fef9c3; color: #ca8a04; }
.item-icon-box.blue { background: #dbeafe; color: #2563eb; }
.item-icon-box.purple { background: #f3e8ff; color: #9333ea; }

.item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.item-text {
    flex: 1;
    font-size: 12px;
    color: #334155;
    line-height: 1.4;
}

.item-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.item-top-row strong {
    color: #0f172a;
    font-size: 12px;
}

.item-time {
    font-size: 10px;
    color: #94a3b8;
}

.msg-snippet {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.dropdown-footer {
    padding: 10px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.dropdown-footer-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #00b074;
    cursor: pointer;
    width: 100%;
}

.dropdown-footer-btn:hover {
    text-decoration: underline;
}

/* User Profile Dropdown Header Card */
.profile-card-header {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.profile-lg-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00b074;
}

.profile-lg-info {
    display: flex;
    flex-direction: column;
}

.profile-lg-info strong {
    font-size: 13px;
    color: #0f172a;
}

.profile-lg-info span {
    font-size: 10px;
    color: #64748b;
}

.admin-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #00b074;
    background: #e6f7f1;
    padding: 2px 7px;
    border-radius: 10px;
    margin-top: 4px;
    width: fit-content;
}

.admin-badge-tag i { width: 12px; height: 12px; }

/* Profile Menu Links */
.profile-menu-links {
    padding: 6px;
}

.profile-menu-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.profile-menu-btn i {
    width: 16px;
    height: 16px;
    color: #64748b;
    transition: color 0.15s ease;
}

.profile-menu-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.profile-menu-btn:hover i {
    color: #00b074;
}

.profile-menu-btn.danger-text {
    color: #ef4444;
}

.profile-menu-btn.danger-text i {
    color: #ef4444;
}

.profile-menu-btn.danger-text:hover {
    background: #fef2f2;
}

.menu-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

/* Stat Cards Hover & Clickable State */
.stat-card-white {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

/* =============================================
   WORKFORCE COMMAND CENTER CARD
   ============================================= */
.workforce-command-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 16px;
    padding: 24px 28px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
    border: 1px solid #334155;
    position: relative;
    overflow: hidden;
}

.workforce-command-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 176, 116, 0.15) 0%, rgba(0, 176, 116, 0) 70%);
    pointer-events: none;
}

.wcc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wcc-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #00b074;
    background: rgba(0, 176, 116, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.wcc-badge-live i { width: 12px; height: 12px; }

.wcc-title h2 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 4px 0 0 0;
    letter-spacing: -0.3px;
}

.btn-wcc-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00b074;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.btn-wcc-action:hover {
    background: #009663;
    transform: translateY(-1px);
}

.wcc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.wcc-mcard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}

.wcc-mnum {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}

.wcc-mlabel {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.wcc-attendance-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.wcc-att-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.wcc-att-header strong {
    color: #00b074;
    font-weight: 700;
}

.wcc-progress-bar-wrap {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.wcc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00b074 0%, #34d399 100%);
    border-radius: 6px;
}

.wcc-att-badges {
    display: flex;
    gap: 14px;
    font-size: 12px;
}

.wcc-badge {
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 500;
}

.wcc-ai-alert-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 12px 18px;
}

.wcc-ai-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f59e0b;
    color: #ffffff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wcc-ai-text {
    flex: 1;
    font-size: 12px;
    color: #fde68a;
}

.wcc-ai-text strong {
    display: block;
    color: #fbbf24;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.wcc-ai-text p {
    margin: 2px 0 0 0;
    line-height: 1.3;
}

.btn-ai-resolve {
    background: #f59e0b;
    color: #0f172a;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-ai-resolve:hover {
    background: #d97706;
}

/* =============================================
   360° PREMIUM EMPLOYEE PROFILE MODAL STYLES
   ============================================= */
.profile-360-modal {
    max-width: 820px !important;
    width: 90% !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px !important;
}

.p360-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ffffff;
    position: relative;
}

.p360-avatar-box {
    position: relative;
    flex-shrink: 0;
}

.p360-avatar-box img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00b074;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.p360-status-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    font-weight: 700;
    background: #064e3b;
    color: #34d399;
    padding: 2px 8px;
    border-radius: 12px;
    border: 2px solid #0f172a;
}

.p360-header-info {
    flex: 1;
}

.p360-id-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p360-emp-id {
    font-size: 11px;
    font-weight: 800;
    background: #00b074;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.p360-id-row h2 {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.p360-sub-desig {
    font-size: 14px;
    color: #cbd5e1;
    margin: 2px 0 4px 0;
}

.p360-project-tag {
    font-size: 12px;
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.p360-project-tag i { width: 14px; height: 14px; }

.p360-quick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11px;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
}

.p360-quick-meta strong {
    color: #cbd5e1;
}

/* 6 Modal Tabs Navigation */
.p360-tabs-nav {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.p360-tab-btn {
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.p360-tab-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.p360-tab-btn.active {
    color: #00b074;
    border-bottom-color: #00b074;
    background: #ffffff;
    font-weight: 700;
}

/* Tabs Content Viewport */
.p360-tabs-content {
    padding: 24px;
    max-height: 480px;
    overflow-y: auto;
}

.p360-tab-pane {
    display: none;
}

.p360-tab-pane.active {
    display: block;
}

/* Tab 1: Overview Grid */
.p360-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.p360-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.p360-info-card.full-width {
    grid-column: span 2;
}

.p360-info-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.p360-info-card h4 i { width: 16px; height: 16px; color: #00b074; }

.p360-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p360-drow {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 4px;
}

.p360-drow strong {
    color: #1e293b;
}

.p360-drow.total {
    border-top: 2px solid #cbd5e1;
    border-bottom: none;
    padding-top: 8px;
    font-size: 13px;
}

/* Tab 2: Attendance Summary */
.p360-att-summary-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.att-scard {
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.att-scard span { font-size: 11px; font-weight: 600; }
.att-scard strong { font-size: 16px; font-weight: 800; margin-top: 2px; }

.att-scard.green { background: #dcfce7; color: #166534; }
.att-scard.red { background: #fee2e2; color: #991b1b; }
.att-scard.yellow { background: #fef9c3; color: #854d0e; }
.att-scard.blue { background: #dbeafe; color: #1e40af; }
.att-scard.purple { background: #f3e8ff; color: #6b21a8; }

.p360-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.p360-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.p360-mini-table th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: left;
    color: #475569;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.p360-mini-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

/* Tab 5: Document Expiry List */
.p360-doc-expiry-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-expiry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.doc-expiry-card.valid { background: #f0fdf4; border-color: #bbf7d0; }
.doc-expiry-card.warning { background: #fffbeb; border-color: #fde68a; }

.doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.doc-expiry-card.valid .doc-icon { background: #dcfce7; color: #16a34a; }
.doc-expiry-card.warning .doc-icon { background: #fef3c7; color: #d97706; }

.doc-info { flex: 1; display: flex; flex-direction: column; }
.doc-info strong { font-size: 13px; color: #0f172a; }
.doc-info span { font-size: 11px; color: #64748b; }

.doc-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.doc-badge.green { background: #dcfce7; color: #166534; }
.doc-badge.yellow { background: #fef3c7; color: #92400e; }

/* Tab 6: AI Performance Scorecard */
.p360-ai-perf-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.ai-overall-score {
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.ai-overall-score span { font-size: 12px; color: #64748b; display: block; }
.ai-overall-score strong { font-size: 38px; font-weight: 800; color: #00b074; display: block; margin: 4px 0; }

.ai-skills-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #334155;
    flex-wrap: wrap;
}

.sk-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.sk-bar span {
    height: 100%;
    background: linear-gradient(90deg, #00b074 0%, #34d399 100%);
    display: block;
    border-radius: 4px;
}

/* =============================================
   CONSTRUCTION SITE HIERARCHY TREE VIEW
   ============================================= */
.hierarchy-glance-bar {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.hgb-item {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
}

.hgb-item:last-child { border-right: none; }

.hgb-item span { font-size: 11px; color: #64748b; font-weight: 500; }
.hgb-item strong { font-size: 16px; font-weight: 800; color: #0f172a; }

.hgb-item.green strong { color: #16a34a; }
.hgb-item.red strong { color: #dc2626; }
.hgb-item.blue strong { color: #2563eb; }

.project-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    padding: 10px 0;
}

.tree-root-node {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 16px 28px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.2);
    border: 2px solid #00b074;
    position: relative;
}

.node-badge-root {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    background: #00b074;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.node-badge-root i { width: 12px; height: 12px; }

.tree-root-node h4 {
    font-size: 18px;
    font-weight: 800;
    margin: 2px 0;
}

.tree-root-meta {
    font-size: 12px;
    color: #94a3b8;
}

.tree-branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    position: relative;
}

.site-branch-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease;
}

.site-branch-card:hover {
    transform: translateY(-2px);
    border-color: #00b074;
}

.sb-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.sb-tag {
    font-size: 10px;
    font-weight: 800;
    color: #00b074;
    background: #e6f7f1;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.sb-header h5 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 4px 0 2px 0;
}

.sb-status {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.sb-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #334155;
}

.team-role-item i { width: 14px; height: 14px; color: #00b074; flex-shrink: 0; }

.team-role-item.highlight {
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    color: #0f172a;
    border: 1px dashed #cbd5e1;
}

/* =============================================
   GPS + SITE ATTENDANCE VERIFICATION CARD
   ============================================= */
.gps-demo-container {
    padding: 10px 0;
}

.gps-user-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 20px;
}

.gps-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.gps-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00b074;
}

.gps-user-details {
    flex: 1;
}

.gps-user-details h4 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.gps-user-details span {
    font-size: 12px;
    color: #64748b;
}

.gps-status-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.gps-status-pill.green { background: #dcfce7; color: #166534; }

.gps-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.gps-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.gps-meta-item i { width: 20px; height: 20px; color: #00b074; flex-shrink: 0; }

.gps-meta-item div { display: flex; flex-direction: column; }
.gps-meta-item span { font-size: 11px; color: #64748b; }
.gps-meta-item strong { font-size: 12px; color: #0f172a; }

/* AI Quick Chips & Anomaly Detector */
.ai-quick-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    overflow-x: auto;
}

.chip-label { font-size: 11px; font-weight: 700; color: #64748b; white-space: nowrap; }

.ai-chip-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 11px;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.ai-chip-btn:hover {
    background: #00b074;
    color: #ffffff;
    border-color: #00b074;
}

.ai-anomalies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.ai-anomaly-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
}

.ai-anomaly-card i { width: 20px; height: 20px; flex-shrink: 0; }
.ai-anomaly-card.yellow i { color: #d97706; }
.ai-anomaly-card.blue i { color: #2563eb; }
.ai-anomaly-card.red i { color: #dc2626; }
.ai-anomaly-card.green i { color: #16a34a; }

.ai-anomaly-card div { display: flex; flex-direction: column; }
.ai-anomaly-card strong { font-size: 11px; color: #0f172a; }
.ai-anomaly-card p { font-size: 10px; color: #64748b; margin: 0; }

/* RBAC Role Switcher & Mobile PWA Button */
.rbac-role-switcher-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 4px 10px;
}

.rbac-role-switcher-wrap i { width: 14px; height: 14px; color: #00b074; }

.rbac-select-pill {
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-mobile-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f7f1;
    color: #00b074;
    border: 1px solid #a7f3d0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-mobile-preview-pill i { width: 14px; height: 14px; }
.btn-mobile-preview-pill:hover { background: #00b074; color: #ffffff; }
.admin-content-viewport {
    padding: 24px 28px;
    flex: 1;
}

.module-view { display: none; }
.module-view.active { display: block; }

/* =============================================
   DASHBOARD — STAT CARDS (TOP ROW)
   ============================================= */
.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.stat-card-white {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,176,116,0.1);
}

.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sc-title {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-info-icon { width: 13px; height: 13px; color: #cbd5e1; }

.btn-see-details {
    font-size: 11px;
    color: #00b074;
    background: transparent;
    border: 0;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.sc-metric-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
}

.sc-icon-square {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sc-icon-square.green { background: #edfaf3; color: #00b074; }
.sc-icon-square.yellow { background: #fff8e6; color: #f59e0b; }
.sc-icon-square.coral { background: #fff1f0; color: #f43f5e; }
.sc-icon-square i { width: 19px; height: 19px; }

.sc-number {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.badge-pill-green {
    background: #edfaf3;
    color: #00b074;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.badge-pill-yellow {
    background: #fff8e6;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.badge-pill-coral {
    background: #fff1f0;
    color: #f43f5e;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.sc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f8fafc;
}

.sc-footer p {
    font-size: 11px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

/* sparkline SVG — constrained */
.sparkline-svg {
    width: 72px !important;
    height: 28px !important;
    flex-shrink: 0;
    display: block;
}

/* mini bar graphic */
.mini-bar-graphic {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    flex-shrink: 0;
}

.mini-bar-graphic span {
    width: 5px;
    background: #cbd5e1;
    border-radius: 2px;
    display: block;
}

.mini-bar-graphic span.active { background: #00b074; }

.striped-bar-graphic { display: flex; gap: 3px; align-items: center; }

.yellow-stripe {
    width: 12px; height: 12px;
    background: #fff8e6;
    border: 1px solid #fcd34d;
    border-radius: 3px;
}

/* capsule progress bar */
.capsule-progress-bar {
    width: 70px;
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.capsule-fill {
    height: 100%;
    background: #f43f5e;
    border-radius: 10px;
}

/* =============================================
   WHITE CARD (universal card)
   ============================================= */
.white-card {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.margin-top-20 { margin-top: 20px; }

/* Card title bar (used inside white-card) */
.card-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.card-title-bar h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.heading-icon { width: 16px; height: 16px; color: #00b074; }

.ct-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.chart-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* colored dots for legend */
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot.green { background: #00b074; }
.dot.yellow { background: #f59e0b; }
.dot.coral { background: #f43f5e; }

/* select pill dropdown */
.select-pill {
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    outline: none;
}

/* =============================================
   DASHBOARD MIDDLE GRID
   ============================================= */
.dashboard-middle-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

/* Chart card */
.dash-chart-card { /* inherits .white-card */ }

/* BAR CHART LAYOUT */
.chart-container-box {
    display: flex;
    gap: 0;
    height: 200px;
    overflow: hidden;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-right: 8px;
    width: 42px;
    flex-shrink: 0;
}

.chart-y-axis span {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-align: right;
    line-height: 1;
}

.chart-bars-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 20px;
    overflow-x: auto;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 30px;
    height: 100%;
    justify-content: flex-end;
}

.bar-bg {
    width: 100%;
    background: linear-gradient(180deg, #00b074, #4ade80);
    border-radius: 6px 6px 0 0;
    transition: opacity 0.2s;
    min-height: 4px;
}

.bar-bg:hover { opacity: 0.8; }

/* Bar color variants matching reference chart */
.bar-bg.bar-color-gray { background: linear-gradient(180deg, #94a3b8, #cbd5e1); }
.bar-bg.bar-color-teal { background: linear-gradient(180deg, #14b8a6, #5eead4); }
.bar-bg.bar-color-green { background: linear-gradient(180deg, #00b074, #4ade80); }
.bar-bg.bar-color-purple { background: linear-gradient(180deg, #8b5cf6, #c4b5fd); }
.bar-bg.bar-color-orange { background: linear-gradient(180deg, #f97316, #fdba74); }

/* multi-segment bar */
.bar-multi {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 2px;
}

.bar-seg {
    width: 100%;
    border-radius: 4px;
    min-height: 4px;
    display: block;
}

.bar-seg.green { background: #00b074; }
.bar-seg.yellow { background: #f59e0b; }
.bar-seg.coral { background: #f43f5e; }

.x-label {
    font-size: 9.5px;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* =============================================
   LEAVE APPLICATION CARD
   ============================================= */
.dash-leave-card { /* inherits .white-card */ }

.leave-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 280px;
}

.leave-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.leave-item:last-child { border-bottom: 0; padding-bottom: 0; }

.leave-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.leave-info { flex: 1; }
.leave-info strong { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.leave-info p { font-size: 11.5px; color: #64748b; margin: 0; }

/* Status badges */
.badge-status-green {
    background: #edfaf3;
    color: #00b074;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-status-yellow {
    background: #fff8e6;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-status-red {
    background: #fff1f0;
    color: #f43f5e;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =============================================
   DASHBOARD BOTTOM GRID
   ============================================= */
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 18px;
}

/* =============================================
   NOTICE BOARD
   ============================================= */
.dash-notice-card { /* inherits .white-card */ }

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notice-item {
    padding: 12px 14px;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    background: #fafbfc;
    transition: background 0.16s;
}

.notice-item:hover { background: #f0fdf9; }

.notice-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.notice-main strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
}

.tag-pill-light {
    background: #eef2f7;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.notice-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #94a3b8;
}

.notice-meta i { width: 12px; height: 12px; }
.notice-meta span { display: flex; align-items: center; gap: 4px; }

/* Star icon */
.star-icon {
    width: 15px; height: 15px;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.2s;
}

.star-icon.active, .star-icon.starred { color: #f59e0b; }

/* =============================================
   AWARD LIST TABLE CARD
   ============================================= */
.dash-awards-card { /* inherits .white-card */ }

.table-tools-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-pill-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px 12px;
}

.search-pill-sm i { width: 13px; height: 13px; color: #94a3b8; }

.search-pill-sm input {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: #1e293b;
    width: 130px;
    font-family: inherit;
}

.btn-filter-sm {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.btn-filter-sm i { width: 13px; height: 13px; }

.btn-export-dark {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 16px;
    border: 0;
    background: #1e293b;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
}

.btn-export-dark i { width: 13px; height: 13px; }

/* Universal table container */
.table-responsive {
    overflow-x: auto;
    border-radius: 12px;
}

/* Light admin table */
.light-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.light-admin-table th {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    white-space: nowrap;
}

.light-admin-table td {
    padding: 13px 14px;
    font-size: 13px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.light-admin-table tr:last-child td { border-bottom: 0; }

.tbl-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.award-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #0f172a;
}

.trophy-gold {
    width: 14px; height: 14px;
    color: #f59e0b;
}

/* =============================================
   MODULE VIEW HEADER
   ============================================= */
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
}

.view-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.view-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* =============================================
   SUBTABS BAR
   ============================================= */
.subtabs-bar-light {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.subtab-btn {
    padding: 8px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.16s ease;
    font-family: inherit;
}

.subtab-btn:hover, .subtab-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary-green {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--primary-shadow);
    transition: background 0.18s;
    font-family: inherit;
}

.btn-primary-green:hover { background: var(--primary-hover); }
.btn-primary-green i { width: 15px; height: 15px; }

.btn-icon-light {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.16s;
    margin-right: 4px;
}

.btn-icon-light:hover { background: var(--primary-light-card); color: var(--primary-color); border-color: var(--primary-border); }
.btn-icon-light i { width: 14px; height: 14px; }

/* =============================================
   AI HR ASSISTANT MODULE
   ============================================= */
.ai-console-card { /* inherits .white-card */ }

.ai-console-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.ai-bot-icon {
    width: 42px; height: 42px;
    background: var(--primary-light-card);
    color: var(--primary-color);
    border-radius: 14px;
    padding: 8px;
}

.ai-console-header h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 3px;
}

.status-online-dot {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-online-dot .dot {
    width: 7px; height: 7px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse-green 1.5s ease infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ai-chat-output {
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 14px;
}

.ai-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ai-msg .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary-light-card);
    color: var(--primary-color);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ai-msg .avatar i { width: 16px; height: 16px; }

.ai-msg .bubble {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.6;
    max-width: 80%;
}

.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .bubble {
    background: var(--primary-color);
    color: #fff;
    border-radius: 12px 0 12px 12px;
    border-color: var(--primary-hover);
}

.ai-input-row {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.ai-input-row input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    font-family: inherit;
}

.ai-input-row input:focus { border-color: var(--primary-color); background: #fff; }

/* =============================================
   MODALS
   ============================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(4px);
    padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal-content-light {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    padding: 28px;
    color: #1e293b;
    box-shadow: 0 24px 48px rgba(0,0,0,0.14);
    width: 100%;
    max-width: 500px;
}

.modal-close-btn {
    position: absolute;
    right: 16px; top: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 0;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
}

.modal-header-light {
    margin-bottom: 20px;
}

.modal-header-light h2 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
}

.modal-header-light p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.form-grid-light {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field.full-width { grid-column: span 2; }

.form-field label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.form-field input, .form-field select {
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    font-family: inherit;
    transition: border-color 0.16s;
}

.form-field input:focus, .form-field select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light-bg);
}

.full-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
}

/* Profile modal */
.profile-drawer-body { padding: 8px 0; }
.profile-drawer-body h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.profile-drawer-body p { font-size: 13px; color: #64748b; margin: 0 0 8px; }
.profile-drawer-body p strong { color: #1e293b; }

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
.toast-container {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: #0f172a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    border-left: 4px solid #00b074;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
    .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .dashboard-middle-grid { grid-template-columns: 1fr; }
    .dashboard-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .admin-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        height: 100vh;
        transform: translateX(-100%);
    }
    .admin-sidebar.mobile-open { transform: translateX(0); }
    .admin-main-container { margin-left: 0; }
    .mobile-sidebar-toggle { display: block; }
    .topbar-search-box { width: 180px; }
    .kpi-grid-4 { grid-template-columns: 1fr 1fr; }
    .admin-app-wrapper {
        border-radius: 0;
        max-width: 100%;
    }
    body.admin-app-body, body.admin-app-body.light-theme {
        padding: 0 !important;
    }
}

@media (max-width: 600px) {
    .kpi-grid-4 { grid-template-columns: 1fr; }
    .admin-content-viewport { padding: 16px; }
    .admin-topbar { padding: 0 16px; }
    .topbar-search-box { display: none; }
    .form-grid-light { grid-template-columns: 1fr; }
    .form-field.full-width { grid-column: 1; }
}

/* =============================================
   ONBOARDING WIZARD & DOCUMENT GENERATOR STYLES
   ============================================= */
.wizard-step-pill {
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wizard-step-pill span {
    background: #cbd5e1;
    color: #1e293b;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    font-size: 9px;
}

.wizard-step-pill.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px var(--primary-shadow);
}

.wizard-step-pill.active span {
    background: #ffffff;
    color: var(--primary-color);
    font-weight: 800;
}

.wizard-step-pill.completed {
    background: #e6f7f1;
    color: var(--primary-color);
    border-color: var(--primary-border);
}

.wizard-step-pane {
    display: none;
    animation: fadeInStep 0.25s ease forwards;
}

.wizard-step-pane.active {
    display: block;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.wstep-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.doc-tab-btn {
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
}

.doc-tab-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.doc-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 800;
    background: #ffffff;
}

/* 🪪 Printable Official Employee ID Card Badge (300px x 480px) */
.printable-id-card {
    width: 320px;
    min-height: 500px;
    background: #ffffff;
    border: 2px solid #0f172a;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    color: #0f172a;
}

.id-card-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 16px 12px;
    text-align: center;
    border-bottom: 4px solid var(--primary-color);
}

.id-card-brand {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
}

.id-card-subbrand {
    font-size: 9px;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 2px;
}

.id-card-photo-box {
    text-align: center;
    margin: 16px 0 10px;
    position: relative;
}

.id-card-photo-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    margin: 0 auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.id-card-body {
    padding: 0 20px 16px;
    text-align: center;
}

.id-card-name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 4px 0 2px;
}

.id-card-desig {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.id-card-grid {
    text-align: left;
    font-size: 11px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
}

.id-card-grid div {
    display: flex;
    justify-content: space-between;
}

.id-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 20px 16px;
    border-top: 1px solid #f1f5f9;
}

.id-card-qr img {
    width: 64px;
    height: 64px;
    border: 1px solid #cbd5e1;
    padding: 2px;
    background: #fff;
    border-radius: 6px;
}

.id-card-sign {
    text-align: right;
    font-size: 9px;
    color: #64748b;
}

.id-card-sign strong {
    display: block;
    font-family: 'Reenie Beanie', cursive, sans-serif;
    font-size: 22px;
    color: #0f172a;
    line-height: 1;
}

/* 📜 Printable Letterhead Document Format */
.printable-letterhead {
    width: 100%;
    max-width: 720px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 36px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    color: #1e293b;
    font-size: 13px;
    line-height: 1.6;
}

.letterhead-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 14px;
    margin-bottom: 24px;
}

.letterhead-brand h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
}

.letterhead-brand p {
    font-size: 10px;
    color: #64748b;
    margin: 2px 0 0;
    letter-spacing: 1px;
}

.letterhead-meta {
    text-align: right;
    font-size: 11px;
    color: #475569;
}

.letterhead-title {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    text-decoration: underline;
    color: #0f172a;
    margin: 18px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.letterhead-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.letterhead-table th, .letterhead-table td {
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    font-size: 12px;
}

.letterhead-table th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
}

/* Print CSS Rule */
@media print {
    body * { visibility: hidden; }
    #docRenderOutput, #docRenderOutput * { visibility: visible; }
    #docRenderOutput {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        padding: 0;
        background: #fff;
    }
}

/* End of Stylesheet */