:root{
  --navy:#123B5D;--deep:#0B2840;--blue:#1F6F9F;--lb:#EAF4FA;
  --bg:#F5F8FA;--white:#fff;--tp:#17212B;--ts:#607080;
  --border:#DCE5EB;--success:#15805D;--warn:#D89414;--crit:#C84A4A;--info:#2678B8;
  --sh:0 2px 8px rgba(18,59,93,.08);--shl:0 4px 24px rgba(18,59,93,.13);
  --r:8px;--rl:12px;--hh:64px;--nh:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tp);font-size:14px;line-height:1.5;overflow-x:hidden}
h1,h2,h3,h4,h5{line-height:1.2}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
input,select,textarea{font-family:inherit;font-size:14px;outline:none}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--ts);font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:#F9FBFD;position:sticky;top:0;z-index:1}
td{color:var(--tp)}
tr:hover td{background:#F5F8FA}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#F0F4F7}
::-webkit-scrollbar-thumb{background:#C0CDD6;border-radius:3px}

/* ===== UTILITIES ===== */
.hidden{display:none!important}
.flex{display:flex}.fac{align-items:center}.fjc{justify-content:center}.fsb{justify-content:space-between}.fgap{gap:12px}.fgap2{gap:16px}.fgap3{gap:24px}.fcol{flex-direction:column}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.w100{width:100%}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.p12{padding:12px}.p16{padding:16px}.p20{padding:20px}.p24{padding:24px}
.bold{font-weight:600}.bolder{font-weight:700}
.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs15{font-size:15px}.fs16{font-size:16px}.fs18{font-size:18px}.fs20{font-size:20px}.fs24{font-size:24px}.fs28{font-size:28px}.fs32{font-size:32px}
.ts{color:var(--ts)}.tn{color:var(--navy)}.tsuc{color:var(--success)}.twarn{color:var(--warn)}.tcrit{color:var(--crit)}.tinfo{color:var(--info)}.tblue{color:var(--blue)}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tright{text-align:right}.tcenter{text-align:center}
.cur{cursor:pointer}

/* ===== CARDS ===== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh)}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-body{padding:20px}
.card-title{font-size:15px;font-weight:600;color:var(--tp)}
.card-sub{font-size:12px;color:var(--ts);margin-top:2px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;transition:all .15s}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--deep)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#1860a0}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--tp)}.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{opacity:.9}
.btn-warn{background:var(--warn);color:#fff}.btn-warn:hover{opacity:.9}
.btn-crit{background:var(--crit);color:#fff}.btn-crit:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--ts);padding:6px 10px}.btn-ghost:hover{background:var(--lb);color:var(--navy)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:15px}
.btn-icon{padding:7px;border-radius:6px;background:transparent;color:var(--ts)}.btn-icon:hover{background:var(--lb);color:var(--navy)}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.3px}
.badge-success{background:#E8F5F0;color:var(--success)}
.badge-warn{background:#FDF3DC;color:var(--warn)}
.badge-crit{background:#FDEAEA;color:var(--crit)}
.badge-info{background:#E8F2FB;color:var(--info)}
.badge-navy{background:#E8EEF3;color:var(--navy)}
.badge-blue{background:#E5F0FA;color:var(--blue)}
.badge-grey{background:#EEF2F5;color:var(--ts)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot-success{background:var(--success)}.dot-warn{background:var(--warn)}.dot-crit{background:var(--crit)}.dot-info{background:var(--info)}.dot-grey{background:#aaa}

/* ===== PROGRESS ===== */
.progress-bar{height:6px;background:#E5EBF0;border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .4s}
.progress-fill.success{background:var(--success)}
.progress-fill.warn{background:var(--warn)}
.progress-fill.crit{background:var(--crit)}
.progress-fill.blue{background:var(--blue)}
.progress-fill.navy{background:var(--navy)}

/* ===== FORMS ===== */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--ts);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.form-input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;color:var(--tp);transition:border .15s;background:#fff}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,159,.1)}
.form-select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;color:var(--tp);background:#fff;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23607080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.form-select:focus{border-color:var(--blue)}
.form-textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;color:var(--tp);resize:vertical;min-height:80px}
.form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,159,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-check input{width:16px;height:16px;cursor:pointer}

/* ===== LOGIN PAGE ===== */
#login-page{position:fixed;inset:0;display:flex;z-index:9999;background:var(--deep)}
.login-left{flex:1;padding:48px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#0B2840 0%,#123B5D 50%,#1F6F9F 100%);position:relative;overflow:hidden}
.login-left::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none}
.login-left::after{content:'';position:absolute;bottom:-50px;left:-50px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none}
.login-brand{}
.login-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:1px;margin-bottom:4px}
.login-logo span{color:#7EC8E3}
.login-tagline{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.5px}
.login-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.login-hero h1{font-size:38px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px}
.login-hero h1 span{color:#7EC8E3}
.login-hero p{font-size:16px;color:rgba(255,255,255,.7);max-width:380px;line-height:1.7}
.login-stats{display:flex;gap:32px;margin-top:32px}
.login-stat .val{font-size:24px;font-weight:700;color:#fff}
.login-stat .lbl{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.login-bldg{position:relative;margin-top:24px}
.login-right{width:460px;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:52px 48px}
.login-right h2{font-size:24px;font-weight:700;color:var(--tp);margin-bottom:4px}
.login-right .sub{font-size:13px;color:var(--ts);margin-bottom:32px}
.login-error{background:#FEF2F2;border:1px solid #FCA5A5;border-radius:6px;padding:10px 14px;color:#DC2626;font-size:13px;margin-bottom:16px}
.demo-btn{width:100%;padding:10px;background:var(--lb);border:1px solid var(--border);border-radius:6px;color:var(--navy);font-size:13px;font-weight:600;cursor:pointer;margin-top:12px;transition:all .15s}
.demo-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.login-footer{font-size:11px;color:var(--ts);text-align:center;margin-top:24px}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ts)}
.pw-wrap{position:relative}

/* ===== HEADER ===== */
#main-app{display:none;flex-direction:column;min-height:100vh}
#header{height:var(--hh);background:var(--deep);border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;padding:0 20px;gap:16px;position:sticky;top:0;z-index:100}
.hdr-logo{display:flex;align-items:center;gap:10px;min-width:180px}
.hdr-logo .name{font-size:14px;font-weight:800;color:#fff;letter-spacing:.8px}
.hdr-logo .name span{color:#7EC8E3}
.hdr-logo .sub{font-size:9px;color:rgba(255,255,255,.4);letter-spacing:.5px;margin-top:1px}
.hdr-sep{width:1px;height:28px;background:rgba(255,255,255,.12)}
.hdr-sel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;padding:6px 10px;font-size:12px;cursor:pointer}
.hdr-sel option{background:#123B5D;color:#fff}
.hdr-search{flex:1;max-width:320px;position:relative}
.hdr-search input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:8px 12px 8px 36px;color:#fff;font-size:13px}
.hdr-search input::placeholder{color:rgba(255,255,255,.4)}
.hdr-search input:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.hdr-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4)}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shl);max-height:380px;overflow-y:auto;z-index:200}
.search-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--lb)}
.search-item .si-type{font-size:10px;font-weight:600;color:var(--ts);background:var(--bg);padding:2px 6px;border-radius:4px;min-width:60px;text-align:center}
.search-item .si-name{font-size:13px;font-weight:500;color:var(--tp)}
.search-item .si-sub{font-size:11px;color:var(--ts)}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:rgba(255,255,255,.8);padding:7px 10px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;position:relative}
.hdr-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.hdr-btn .badge-count{position:absolute;top:-4px;right:-4px;background:var(--crit);color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--deep)}
.hdr-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;cursor:pointer;border:2px solid rgba(255,255,255,.2)}
.hdr-user{color:rgba(255,255,255,.8);font-size:12px}
.hdr-user .name{font-weight:600;color:#fff}
.hdr-user .role{font-size:10px;color:rgba(255,255,255,.5)}

/* ===== MODULE NAV ===== */
#module-nav{height:var(--nh);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 20px;gap:4px;position:sticky;top:var(--hh);z-index:99;overflow-x:auto}
.mod-tab{display:flex;align-items:center;gap:7px;padding:0 16px;font-size:13px;font-weight:500;color:var(--ts);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all .15s}
.mod-tab:hover{color:var(--navy);background:var(--lb)}
.mod-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.mod-tab svg{opacity:.7}
.mod-tab.active svg{opacity:1}

/* ===== PAGE LAYOUT ===== */
#content-area{flex:1;padding:24px 20px;max-width:1600px;margin:0 auto;width:100%}
.page{display:none}.page.active{display:block}
.page-header{margin-bottom:24px}
.page-title{font-size:22px;font-weight:700;color:var(--tp)}
.page-sub{font-size:13px;color:var(--ts);margin-top:4px}

/* ===== INNER TABS ===== */
.inner-tabs{display:flex;gap:2px;margin-bottom:20px;background:#EEF2F5;padding:4px;border-radius:8px;flex-wrap:wrap}
.inner-tab{padding:8px 14px;border-radius:6px;font-size:12px;font-weight:500;color:var(--ts);cursor:pointer;transition:all .15s;white-space:nowrap}
.inner-tab:hover{background:rgba(255,255,255,.7);color:var(--navy)}
.inner-tab.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 1px 4px rgba(18,59,93,.1)}
.inner-content{display:none}.inner-content.active{display:block}

/* ===== KPI CARDS ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--navy)}
.kpi-card.success::before{background:var(--success)}
.kpi-card.warn::before{background:var(--warn)}
.kpi-card.crit::before{background:var(--crit)}
.kpi-card.info::before{background:var(--info)}
.kpi-label{font-size:11px;font-weight:600;color:var(--ts);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.kpi-value{font-size:22px;font-weight:700;color:var(--tp);line-height:1.2}
.kpi-value.large{font-size:26px}
.kpi-change{font-size:11px;margin-top:6px;display:flex;align-items:center;gap:4px}
.kpi-up{color:var(--success)}.kpi-down{color:var(--crit)}.kpi-neutral{color:var(--ts)}
.kpi-sparkline{margin-top:10px}

/* ===== SITE CARDS ===== */
.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.site-card{background:#fff;border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden;transition:box-shadow .2s;cursor:pointer}
.site-card:hover{box-shadow:var(--shl)}
.site-card-header{padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.site-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-bottom:10px;display:inline-block}
.site-badge.on-track{background:#E8F5F0;color:var(--success)}
.site-badge.attention{background:#FDF3DC;color:var(--warn)}
.site-badge.delayed{background:#FDEAEA;color:var(--crit)}
.site-name{font-size:17px;font-weight:700;color:var(--tp)}
.site-loc{font-size:12px;color:var(--ts);margin-top:2px}
.site-card-body{padding:16px 20px}
.site-progress-wrap{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.site-circle{position:relative;width:70px;height:70px;flex-shrink:0}
.site-circle svg{transform:rotate(-90deg)}
.site-circle-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--navy)}
.site-metrics{flex:1}
.site-metric{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px}
.site-metric .lbl{color:var(--ts)}
.site-metric .val{font-weight:600;color:var(--tp)}
.site-units{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.unit-stat{background:var(--bg);border-radius:6px;padding:8px;text-align:center}
.unit-stat .num{font-size:16px;font-weight:700;color:var(--tp)}
.unit-stat .lbl{font-size:10px;color:var(--ts);margin-top:2px}
.site-card-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px}

/* ===== CHARTS ===== */
.chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.chart-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.chart-title{font-size:14px;font-weight:600;color:var(--tp)}
.chart-body{padding:16px 20px}
.chart-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
.table-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.tbl-search{padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;width:220px}
.tbl-search:focus{border-color:var(--blue)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.pagination{display:flex;align-items:center;gap:6px;margin-top:14px;justify-content:flex-end}
.pg-btn{padding:5px 10px;border:1px solid var(--border);border-radius:5px;background:#fff;font-size:12px;cursor:pointer;color:var(--ts)}
.pg-btn:hover,.pg-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-info{font-size:12px;color:var(--ts);margin-right:8px}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--rl);box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:620px;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}
.modal-lg{max-width:860px}
.modal-xl{max-width:1100px}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-title{font-size:16px;font-weight:700;color:var(--tp)}
.modal-close{background:none;border:none;font-size:20px;color:var(--ts);cursor:pointer;padding:4px;border-radius:4px}
.modal-close:hover{background:var(--bg);color:var(--tp)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* ===== NOTIFICATIONS ===== */
#notif-panel{position:fixed;top:calc(var(--hh));right:0;width:380px;height:calc(100vh - var(--hh));background:#fff;border-left:1px solid var(--border);box-shadow:-4px 0 20px rgba(0,0,0,.1);z-index:98;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
#notif-panel.open{transform:translateX(0)}
.notif-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-list{flex:1;overflow-y:auto;padding:8px}
.notif-item{padding:12px 14px;border-radius:8px;margin-bottom:4px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:var(--lb);border-left-color:var(--blue)}
.notif-item.finance{border-left-color:var(--success)}
.notif-item.construction{border-left-color:var(--warn)}
.notif-item.sales{border-left-color:var(--blue)}
.notif-item.compliance{border-left-color:var(--crit)}
.notif-item.ai{border-left-color:#8B5CF6}
.notif-title{font-size:13px;font-weight:600;color:var(--tp)}
.notif-body{font-size:12px;color:var(--ts);margin-top:2px}
.notif-time{font-size:11px;color:var(--ts);margin-top:4px}
.notif-cat{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--bg);color:var(--ts);display:inline-block;margin-bottom:4px}

/* ===== TOAST ===== */
#toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 16px;box-shadow:var(--shl);display:flex;align-items:center;gap:10px;min-width:280px;max-width:380px;pointer-events:all;animation:toastIn .25s ease;font-size:13px}
.toast.success{border-left:3px solid var(--success)}
.toast.warn{border-left:3px solid var(--warn)}
.toast.crit{border-left:3px solid var(--crit)}
.toast.info{border-left:3px solid var(--info)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ===== AI CHAT ===== */
.ai-chat-wrap{display:flex;flex-direction:column;height:480px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#FAFBFC}
.ai-chat-header{padding:14px 18px;background:var(--deep);color:#fff;display:flex;align-items:center;gap:10px}
.ai-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:80%;display:flex;flex-direction:column;gap:4px}
.ai-msg.user{align-self:flex-end;align-items:flex-end}
.ai-msg.bot{align-self:flex-start;align-items:flex-start}
.ai-bubble{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6}
.ai-msg.user .ai-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:3px}
.ai-msg.bot .ai-bubble{background:#fff;border:1px solid var(--border);color:var(--tp);border-bottom-left-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ai-time{font-size:10px;color:var(--ts)}
.ai-input-wrap{padding:12px 14px;border-top:1px solid var(--border);background:#fff;display:flex;gap:8px}
.ai-input{flex:1;padding:9px 13px;border:1px solid var(--border);border-radius:20px;font-size:13px}
.ai-input:focus{border-color:var(--blue)}
.ai-send{padding:8px 16px;background:var(--navy);color:#fff;border-radius:20px;font-size:13px;font-weight:500}
.ai-send:hover{background:var(--deep)}
.ai-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;border-top:1px solid var(--border);background:#fff}
.ai-q{padding:5px 11px;background:var(--lb);border:1px solid var(--border);border-radius:16px;font-size:11px;color:var(--navy);cursor:pointer;font-weight:500}
.ai-q:hover{background:var(--navy);color:#fff}

/* ===== APPROVALS ===== */
.approval-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;box-shadow:var(--sh);margin-bottom:10px;display:flex;align-items:flex-start;gap:14px;transition:box-shadow .15s}
.approval-card:hover{box-shadow:var(--shl)}
.approval-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.approval-info{flex:1}
.approval-title{font-size:14px;font-weight:600;color:var(--tp)}
.approval-meta{font-size:12px;color:var(--ts);margin-top:3px}
.approval-amount{font-size:16px;font-weight:700;color:var(--navy);margin-top:4px}
.approval-actions{display:flex;gap:6px;flex-shrink:0}

/* ===== ORG CHART ===== */
.org-node{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 16px;text-align:center;box-shadow:var(--sh);cursor:pointer;transition:all .15s;min-width:140px}
.org-node:hover{border-color:var(--blue);box-shadow:var(--shl)}
.org-node.top{background:var(--navy);color:#fff;border-color:var(--navy)}
.org-node .name{font-size:13px;font-weight:600}
.org-node .title{font-size:11px;margin-top:2px;opacity:.7}
.org-tree{display:flex;flex-direction:column;align-items:center}
.org-row{display:flex;justify-content:center;gap:16px;position:relative;padding-top:24px}
.org-row::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--border);height:24px;transform:translateX(-50%)}
.org-children{display:flex;justify-content:center;gap:16px;padding-top:24px;position:relative}
.org-children::before{content:'';position:absolute;top:0;left:0;right:0;border-top:2px solid var(--border);margin:0 70px}

/* ===== CONSTRUCTION ===== */
.progress-circle{display:inline-block;width:60px;height:60px;position:relative}
.timeline-item{display:flex;gap:16px;margin-bottom:16px;position:relative}
.timeline-item::before{content:'';position:absolute;left:18px;top:36px;width:2px;height:calc(100% - 20px);background:var(--border)}
.timeline-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:2px solid var(--border);background:#fff}
.timeline-dot.done{background:var(--success);border-color:var(--success);color:#fff}
.timeline-dot.active{background:var(--blue);border-color:var(--blue);color:#fff}
.timeline-content{flex:1;padding-bottom:16px}

/* ===== FINANCE ===== */
.fin-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;box-shadow:var(--sh)}
.fin-amount{font-size:26px;font-weight:700;color:var(--tp)}
.fin-label{font-size:12px;color:var(--ts);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ledger-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center}
.ledger-row:last-child{border-bottom:none;font-weight:700}

/* ===== LOADING ===== */
#loader{position:fixed;inset:0;background:#fff;z-index:9998;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;transition:opacity .3s}
#loader.gone{opacity:0;pointer-events:none}
.loader-ring{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skel 1.5s infinite;border-radius:4px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== PROFILE DROPDOWN ===== */
#profile-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shl);width:220px;z-index:200;display:none}
#profile-menu.open{display:block}
.profile-header-card{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.profile-avatar-lg{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}
.profile-menu-item{padding:9px 16px;cursor:pointer;font-size:13px;color:var(--tp);display:flex;align-items:center;gap:9px;transition:background .12s}
.profile-menu-item:hover{background:var(--lb)}
.profile-menu-item.crit{color:var(--crit)}
.profile-wrap{position:relative}

/* ===== AI ALERT CARDS ===== */
.ai-alert{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:10px;border-left:4px solid var(--blue);box-shadow:var(--sh);display:flex;align-items:flex-start;gap:12px}
.ai-alert.warn{border-left-color:var(--warn)}
.ai-alert.crit{border-left-color:var(--crit)}
.ai-alert.success{border-left-color:var(--success)}
.ai-alert-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.ai-alert-title{font-size:13px;font-weight:600;color:var(--tp)}
.ai-alert-body{font-size:12px;color:var(--ts);margin-top:3px;line-height:1.5}
.ai-alert-actions{margin-top:8px;display:flex;gap:6px}
.ai-live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:600}
.ai-live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 1.5s infinite}
.ai-status-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.ai-status-row:last-child{border-bottom:none}
.ai-status-name{font-size:13px;font-weight:500;color:var(--tp)}

/* ===== UNIT INVENTORY ===== */
.unit-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.unit-card:hover{border-color:var(--blue);box-shadow:var(--sh)}
.unit-card.available{border-color:#d1fae5;background:#f0fdf4}
.unit-card.booked{border-color:#fde68a;background:#fffbeb}
.unit-card.blocked{border-color:#fca5a5;background:#fff1f2}
.unit-card.cancelled{border-color:#e5e7eb;background:#f9fafb}
.unit-card.registered{border-color:#a5b4fc;background:#eef2ff}
.unit-num{font-size:13px;font-weight:700;color:var(--tp)}
.unit-type{font-size:10px;color:var(--ts);margin:2px 0}
.unit-area{font-size:10px;color:var(--ts)}
.unit-price{font-size:11px;font-weight:600;color:var(--navy);margin-top:4px}
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){.site-grid{grid-template-columns:1fr 1fr}.kpi-grid{grid-template-columns:repeat(3,1fr)}.chart-grid2,.chart-grid3{grid-template-columns:1fr}}
@media(max-width:900px){.site-grid{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}.form-row3{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.login-left{display:none}.login-right{width:100%}.grid2{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr}.grid4{grid-template-columns:1fr}.hdr-search,.hdr-sel{display:none}.form-row{grid-template-columns:1fr}.inner-tabs{overflow-x:auto;flex-wrap:nowrap}}

/* ===== MISC ===== */
.section-divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-row .lbl{color:var(--ts)}
.info-row .val{font-weight:600;color:var(--tp)}
.empty-state{text-align:center;padding:48px 20px;color:var(--ts)}
.empty-state svg{margin-bottom:12px;opacity:.3}
.empty-state p{font-size:14px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg);border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:500;color:var(--ts)}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;background:var(--lb);color:var(--navy)}
.access-restricted{background:#FFF8E6;border:1px solid var(--warn);border-radius:8px;padding:24px;text-align:center;color:var(--warn)}
.score-bar{height:8px;border-radius:4px;background:#E5EBF0;overflow:hidden;margin-top:4px}
.score-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--navy))}
.highlight-box{background:var(--lb);border:1px solid var(--border);border-radius:8px;padding:16px 20px}
.risk-high{color:var(--crit);font-weight:600}
.risk-med{color:var(--warn);font-weight:600}
.risk-low{color:var(--success);font-weight:600}
.finance-summary{background:linear-gradient(135deg,var(--deep) 0%,var(--navy) 100%);border-radius:var(--rl);padding:28px 32px;color:#fff;margin-bottom:24px}
.finance-summary h2{font-size:22px;font-weight:800;margin-bottom:4px}
.finance-summary p{font-size:13px;opacity:.7;margin-bottom:24px}
.finance-option{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:28px;cursor:pointer;transition:all .2s;flex:1}
.finance-option:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.finance-option h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px}
.finance-option p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}
.fin-icon{font-size:32px;margin-bottom:12px}
.collection-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.collection-row:last-child{border-bottom:none}
.coll-avatar{width:36px;height:36px;border-radius:50%;background:var(--lb);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--navy);flex-shrink:0}
.rera-stage{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.rera-stage:last-child{border-bottom:none}
.rera-stage-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.rera-stage.done .rera-stage-num{background:var(--success);color:#fff}
.rera-stage.active .rera-stage-num{background:var(--blue);color:#fff}
.rera-stage.pending .rera-stage-num{background:var(--bg);color:var(--ts);border:1px solid var(--border)}
.dept-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;box-shadow:var(--sh)}
.perf-score{font-size:24px;font-weight:800;color:var(--navy)}
.emp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--sh);display:flex;gap:12px}
.emp-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}
.task-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);margin-bottom:8px}
.task-card.overdue{border-left:3px solid var(--crit)}
.task-card.progress{border-left:3px solid var(--info)}
.task-card.done{border-left:3px solid var(--success)}
.vendor-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;box-shadow:var(--sh);margin-bottom:8px}
.qty-bar{height:4px;background:#E5EBF0;border-radius:2px;margin-top:4px}
.qty-fill{height:100%;border-radius:2px;background:var(--blue)}