:root{
  --primary:#1e40af;
  --primary-dark:#1e3a8a;
  --accent:#ea580c;
  --bg:#f3f5fa;
  --card:#ffffff;
  --border:#dfe3ee;
  --text:#16203a;
  --muted:#6b7280;
  --danger:#dc2626;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 28px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.brand h1{font-size:17px;margin:0;line-height:1.1;}
.brand-sub{font-size:11px;color:var(--muted);}
.tabs{display:flex;gap:8px;}
.tab-btn{
  padding:8px 16px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
}
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.setup-banner{
  background:#fff7ed;
  border-bottom:1px solid #fdba74;
  color:#9a3412;
  padding:10px 28px;
  font-size:14px;
  display:flex;align-items:center;gap:12px;
}
main{padding:24px 28px;max-width:1280px;margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.panel-header h2{margin:0;font-size:20px;}
h3{font-size:14px;margin:18px 0 4px;color:var(--primary-dark);}

.two-col{display:flex;gap:22px;align-items:flex-start;}
.form-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  width:460px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-card h2{margin:0 0 8px;font-size:18px;}
.form-card label{font-size:13px;font-weight:600;margin-top:8px;}
.form-card .opt{font-weight:400;color:var(--muted);font-size:12px;}
.form-card input[type=text],.form-card input[type=number],.form-card input[type=date],
.form-card select,.form-card textarea{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
}
.form-card input[readonly]{background:#f1f4fb;color:var(--primary-dark);font-weight:700;}
.form-card textarea{resize:vertical;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.upload-row{display:flex;align-items:center;gap:8px;margin-top:4px;}
.upload-row .muted{font-size:11px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:12px;cursor:pointer;}
.checkbox-row input{width:auto!important;}
.btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

.btn-primary{
  background:var(--primary);color:#fff;border:none;
  padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;
}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{
  background:#fff;border:1px solid var(--border);
  padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;
}
.btn-small{
  background:#eef2ff;border:1px solid var(--border);
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;
}
.btn-danger{
  background:var(--danger);color:#fff;border:none;
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;
}

.items-section{border:1px solid var(--border);border-radius:8px;padding:10px;margin-top:6px;}
.items-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px;}
.items-table th{
  text-align:left;padding:4px 6px;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;
}
.items-table td{padding:3px;}
.items-table input{
  width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;
}
.items-table .amt-cell{text-align:right;font-weight:600;white-space:nowrap;padding-right:6px;}
.totals-preview{font-size:13px;text-align:right;align-self:end;line-height:1.7;}
.totals-preview b{font-size:15px;}

.preview-card{
  flex:1;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  min-height:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.center-note{margin:auto;}
.preview-pages{
  display:flex;flex-direction:column;gap:14px;
  max-height:76vh;overflow:auto;width:100%;align-items:center;
}
.preview-pages canvas{
  max-width:100%;
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.card-pair{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.card-pair canvas{width:240px;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.1);}

.mini-preview{
  margin-top:6px;min-height:40px;border:1px dashed var(--border);
  border-radius:8px;padding:6px;display:flex;align-items:center;justify-content:center;
}
.mini-preview img{max-height:90px;max-width:100%;}
.mini-preview.sq img{max-height:60px;}

.search-box{
  padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:14px;width:280px;
}
.records-heading{margin:20px 0 8px;}
.records-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.records-table{width:100%;border-collapse:collapse;font-size:14px;}
.records-table th{
  text-align:left;padding:10px 14px;background:#f6f8fd;color:var(--muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border);
}
.records-table td{padding:10px 14px;border-bottom:1px solid var(--border);}
.records-table tr:last-child td{border-bottom:none;}
.records-table .num{font-weight:700;color:var(--primary-dark);}
.records-actions{display:flex;gap:6px;}
.empty-state{color:var(--muted);padding:26px;text-align:center;font-size:14px;}
.muted{color:var(--muted);font-size:13px;}
.hidden{display:none!important;}

@media (max-width:980px){
  .two-col{flex-direction:column;}
  .form-card{width:100%;}
}

/* ===== auth / shell ===== */
.login-body{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:linear-gradient(135deg,#1e3a8a 0%,#2f6fed 60%,#ea580c 130%);
}
.login-box{
  background:#fff;border-radius:14px;padding:30px 28px;width:360px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 16px 48px rgba(0,0,0,.25);
}
.login-box label{font-size:13px;font-weight:600;margin-top:10px;}
.login-box input{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;}
.login-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;padding:8px 10px;font-size:13px;margin-top:8px;}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px;}
.user-chip #userName{font-weight:600;}
.role-badge{
  background:#eef2ff;color:#1e3a8a;border-radius:20px;padding:2px 10px;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
.tabs .tab-btn{padding:7px 12px;font-size:13px;}

/* ===== dashboard ===== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px;}
.dash-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;
}
.dash-card .dc-value{font-size:26px;font-weight:800;color:var(--primary-dark);}
.dash-card .dc-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.dash-card.warn .dc-value{color:var(--accent);}
.dash-body{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;}
.dash-panel{flex:1;min-width:300px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;}
.dash-panel h3{margin:0 0 10px;}
.dash-panel ul{margin:0;padding-left:18px;font-size:14px;line-height:1.9;}
.big-checkin{font-size:17px;padding:14px 22px;}

/* ===== attendance ===== */
.att-status{
  background:#f6f8fd;border:1px solid var(--border);border-radius:10px;
  padding:14px;font-size:15px;text-align:center;
}
.att-status b{font-size:20px;color:var(--primary-dark);}

/* ===== tasks ===== */
.task-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.task-col{background:#eceff7;border-radius:12px;padding:10px;}
.task-col h4{margin:2px 6px 10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.task-card{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;font-size:13px;
}
.task-card .tk-title{font-weight:600;font-size:14px;margin-bottom:4px;}
.task-card .tk-meta{color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.task-card select{width:100%;padding:5px;border:1px solid var(--border);border-radius:6px;font-size:12px;}
.prio-high{color:#b91c1c;font-weight:700;}
.prio-low{color:#6b7280;}
.overdue{color:#b91c1c;font-weight:700;}
@media (max-width:1100px){.task-board{grid-template-columns:repeat(2,1fr);}}

/* ===== badges / status ===== */
.badge{border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;display:inline-block;}
.badge.lead{background:#f3f4f6;color:#374151;}
.badge.onboarded{background:#eef2ff;color:#1e3a8a;}
.badge.inprogress{background:#fef3c7;color:#92400e;}
.badge.delivered{background:#d1fae5;color:#065f46;}
.badge.amc{background:#e0e7ff;color:#3730a3;}
.badge.closed{background:#f3f4f6;color:#9ca3af;}
.badge.active{background:#d1fae5;color:#065f46;}
.badge.onboarding{background:#fef3c7;color:#92400e;}
.badge.notice{background:#ffedd5;color:#9a3412;}
.badge.relieved{background:#f3f4f6;color:#6b7280;}
.badge.due{background:#fee2e2;color:#b91c1c;}
.toggle-btn{cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:20px;padding:3px 10px;font-size:12px;}
.toggle-btn.on{background:#d1fae5;border-color:#a7f3d0;color:#065f46;font-weight:700;}

/* ===== employee profile ===== */
.emp-prof-head{display:flex;gap:14px;align-items:center;margin-bottom:12px;}
.emp-prof-head .avatar{
  width:56px;height:56px;border-radius:50%;background:#eef2ff;color:#1e3a8a;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
}
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13px;margin:10px 0;}
.kv-grid .k{color:var(--muted);}

/* ===== sidebar layout ===== */
.app-shell{background:var(--bg);}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:232px;
  background:#101a33;display:flex;flex-direction:column;z-index:40;
}
.side-brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08);
}
.side-brand h1{font-size:17px;margin:0;line-height:1.1;color:#fff;}
.side-brand .brand-sub{color:rgba(255,255,255,.5);}
.side-nav{flex:1;overflow-y:auto;padding:8px 10px 14px;display:flex;flex-direction:column;gap:2px;}
.nav-section{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin:14px 8px 4px;font-weight:700;
}
.side-nav .tab-btn{
  background:transparent;border:none;color:rgba(255,255,255,.78);
  text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;
  display:flex;gap:10px;align-items:center;width:100%;
}
.side-nav .tab-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.side-nav .tab-btn.active{background:var(--primary);color:#fff;font-weight:600;}
.nav-ico{width:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;opacity:.85;}
.tab-btn.active .nav-ico{opacity:1;}
.ico{display:inline-block;vertical-align:-3px;flex-shrink:0;}
.inline-ico{display:inline-flex;vertical-align:-3px;margin-right:2px;}
.inline-ico .ico{vertical-align:baseline;}
.side-user{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);
  color:#fff;font-size:13px;display:flex;flex-direction:column;gap:8px;
}
.side-user #userName{font-weight:600;}
.side-user .role-badge{background:rgba(255,255,255,.16);color:#fff;}
.content{margin-left:232px;min-height:100vh;}
.content main{max-width:1280px;}
.lead-board{grid-template-columns:repeat(5,1fr);}
@media (max-width:980px){
  .sidebar{position:static;width:100%;height:auto;}
  .side-nav{flex-direction:row;flex-wrap:wrap;}
  .nav-section{width:100%;margin:8px 8px 2px;}
  .side-nav .tab-btn{width:auto;}
  .content{margin-left:0;}
  .lead-board{grid-template-columns:repeat(2,1fr);}
}

/* ===== modals (restored) ===== */
.modal{
  position:fixed;inset:0;
  background:rgba(16,26,51,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;
}
.modal.hidden{display:none!important;}
.modal-box{
  background:#fff;border-radius:14px;padding:22px 24px;
  width:420px;max-width:100%;max-height:90vh;overflow:auto;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-box h3{margin:0 0 8px;font-size:18px;color:var(--text);}
.modal-box label{font-size:13px;font-weight:600;margin-top:8px;display:block;}
.modal-box .opt{font-weight:400;color:var(--muted);font-size:12px;}
.modal-box input[type=text],.modal-box input[type=number],.modal-box input[type=date],
.modal-box input[type=month],.modal-box input[type=password],
.modal-box select,.modal-box textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;margin-top:3px;
}
.modal-box textarea{resize:vertical;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

/* ===== project team picker + my projects ===== */
.team-picker{
  border:1px solid var(--border);border-radius:8px;padding:8px;margin-top:3px;
  max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:2px;
}
.team-picker label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin:0;cursor:pointer;padding:3px;}
.team-picker input{width:auto!important;margin:0;}
.team-picker .muted{padding:4px;}
.myprj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.myprj-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;}
.myprj-card h3{margin:0 0 4px;color:var(--text);font-size:16px;}
.myprj-card .client{color:var(--muted);font-size:13px;margin-bottom:10px;}
.myprj-card .ms-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;}
.myprj-card .ms-row input{width:auto;}
.myprj-card .prj-tasks{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;}
.myprj-card .prj-tasks .t{font-size:13px;padding:3px 0;display:flex;justify-content:space-between;gap:8px;}

/* ===== visual table builder ===== */
.tb-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.tb-controls input{width:64px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;margin-left:4px;}
.tb-grid{display:grid;gap:4px;margin-top:6px;overflow:auto;max-height:52vh;padding:2px;}
.tb-grid input{padding:7px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;width:100%;}
.tb-grid input.tb-head{background:#eef2ff;font-weight:700;color:var(--primary-dark);}

/* ===== rich text editor ===== */
.rich-toolbar{
  display:flex;gap:4px;flex-wrap:wrap;
  border:1px solid var(--border);border-bottom:none;
  border-radius:8px 8px 0 0;padding:6px;background:#f6f8fd;
}
.rich-toolbar button{
  min-width:32px;height:30px;padding:0 8px;border:1px solid var(--border);
  background:#fff;border-radius:6px;cursor:pointer;font-size:13px;line-height:1;
}
.rich-toolbar button:hover{background:#eef2ff;}
.rich-editor{
  border:1px solid var(--border);border-radius:0 0 8px 8px;
  padding:12px 14px;min-height:200px;max-height:420px;overflow:auto;
  font-size:14px;line-height:1.6;background:#fff;outline:none;
}
.rich-editor:empty:before{content:attr(data-placeholder);color:var(--muted);}
.rich-editor h2{font-size:15px;color:var(--primary-dark);margin:12px 0 4px;}
.rich-editor h3{font-size:14px;color:var(--text);margin:10px 0 4px;}
.rich-editor p{margin:6px 0;}
.rich-editor ul,.rich-editor ol{margin:6px 0;padding-left:22px;}
.rich-editor table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px;}
.rich-editor th,.rich-editor td{border:1px solid var(--border);padding:6px 8px;text-align:left;}
.rich-editor th{background:#eef2ff;color:var(--primary-dark);font-weight:700;}

/* ===== doc edit banner + pending/issued badges ===== */
.edit-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff7ed;border:1px solid #fdba74;color:#9a3412;
  border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:6px;
}
.badge.pending{background:#fef3c7;color:#92400e;}
.badge.issued{background:#d1fae5;color:#065f46;}
.doc-status-bar{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:8px 12px;background:#f6f8fd;border:1px solid var(--border);border-radius:8px;
  font-size:13px;width:100%;
}

/* ===== chat ===== */
.chat-badge{
  margin-left:auto;background:var(--accent);color:#fff;border-radius:20px;
  font-size:10px;font-weight:700;padding:1px 7px;line-height:1.5;
}
.side-nav .tab-btn{position:relative;}
.side-nav .tab-btn .chat-badge{position:static;}
.chat-shell{
  display:flex;height:calc(100vh - 110px);min-height:480px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.chat-sidebar{width:280px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;}
.chat-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px;}
.chat-sidebar-head h3{margin:0;font-size:15px;}
.chat-conv-list{flex:1;overflow-y:auto;padding:4px 8px;}
.chat-conv-item{
  display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:8px;
  cursor:pointer;margin-bottom:2px;
}
.chat-conv-item:hover{background:#f3f5fa;}
.chat-conv-item.active{background:#eef2ff;}
.chat-conv-top{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.chat-conv-name{font-weight:600;font-size:14px;}
.chat-conv-time{font-size:11px;color:var(--muted);flex-shrink:0;}
.chat-conv-preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-conv-unread{
  background:var(--primary);color:#fff;border-radius:20px;font-size:11px;font-weight:700;
  padding:1px 7px;flex-shrink:0;
}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.chat-header{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;}
.chat-messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:64%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.45;position:relative;}
.chat-msg.mine{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:3px;}
.chat-msg.theirs{align-self:flex-start;background:#f1f4fb;color:var(--text);border-bottom-left-radius:3px;}
.chat-msg .chat-msg-sender{font-size:11px;font-weight:700;opacity:.75;margin-bottom:2px;display:block;}
.chat-msg .chat-msg-time{font-size:10px;opacity:.65;margin-top:3px;display:block;text-align:right;}
.chat-input-row{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--border);align-items:flex-end;}
.chat-input-row textarea{
  flex:1;resize:none;max-height:120px;padding:9px 12px;border:1px solid var(--border);
  border-radius:10px;font-family:inherit;font-size:14px;
}
.chat-empty{margin:auto;color:var(--muted);font-size:14px;}