:root{--bg:#111;--panel:#1c1c1c;--text:#f7f2e8;--muted:#9b9488;--gold:#c8a45c;--gold2:#f2d28a;--green:#75d99f;--red:#ff8080;--border:rgba(255,255,255,.08)}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 20% 0,rgba(200,164,92,.16),transparent 30%),var(--bg);font-family:Inter,Segoe UI,system-ui,sans-serif;color:var(--text)}
#app{display:flex;min-height:100vh}.sidebar{width:270px;position:fixed;inset:0 auto 0 0;padding:24px 16px;background:rgba(15,15,15,.9);border-right:1px solid var(--border)}
.brand{display:flex;gap:14px;align-items:center;margin:0 8px 32px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.logo{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,var(--gold2),var(--gold));color:#111;display:grid;place-items:center;font-weight:900;letter-spacing:.08em}
.nav{display:block;width:100%;margin:7px 0;padding:14px 16px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--muted);text-align:left;font-size:15px;cursor:pointer}.nav:hover{background:rgba(255,255,255,.05);color:var(--text)}.nav.active{background:rgba(200,164,92,.12);border-color:rgba(200,164,92,.28);color:var(--gold2)}
.main{margin-left:270px;width:calc(100% - 270px);padding:30px 34px 70px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}h1{margin:0;font-size:36px;letter-spacing:-.04em}p{margin:0;color:var(--muted)}
.btn{border:0;border-radius:16px;padding:12px 18px;font-weight:800;cursor:pointer;margin-left:10px}.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111}.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border)}.danger{background:rgba(255,128,128,.12);color:var(--red);border:1px solid rgba(255,128,128,.22)}
.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,1fr)}.cards{grid-template-columns:repeat(3,1fr)}.card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--border);border-radius:26px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.label{color:var(--muted);font-size:13px}.value{font-size:30px;font-weight:900;margin-top:8px;letter-spacing:-.04em}.green{color:var(--green)}.red{color:var(--red)}.goldText{color:var(--gold2)}
.projectTop{display:flex;justify-content:space-between;gap:12px}.name{font-size:18px;font-weight:900}.client{color:var(--muted);font-size:13px;margin-top:6px}.badge{font-size:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 10px;color:var(--gold2);white-space:nowrap}.money{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.box{background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:18px;padding:12px}.box b{display:block;margin-top:4px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.small{border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);border-radius:13px;padding:9px 11px;font-weight:700;cursor:pointer}
.row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}.row:last-child{border-bottom:0}.toolbar{display:flex;justify-content:space-between;margin-bottom:18px;gap:12px}.input,select,textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:15px;color:var(--text);padding:12px 14px;outline:0}label{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:28px;z-index:20}.hidden{display:none}.modalBox{width:min(980px,100%);max-height:90vh;overflow:auto;background:#171717;border:1px solid var(--border);border-radius:30px;box-shadow:0 40px 130px rgba(0,0,0,.6)}.modalTop{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--border)}.modalTop h2{margin:0}.x{width:42px;height:42px;border:0;border-radius:14px;background:rgba(255,255,255,.06);color:var(--text);font-size:25px;cursor:pointer}#modalBody{padding:24px}.progress{height:12px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:18px 0}.progress div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.print{background:white;color:#111;padding:28px;border-radius:12px}.print p{color:#111}.print table{width:100%;border-collapse:collapse;margin-top:18px}.print td,.print th{border:1px solid #ddd;padding:10px;color:#111;text-align:left}
@media(max-width:1000px){.stats,.cards{grid-template-columns:1fr 1fr}.main{padding:22px}.form{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:static;width:100%}.main{margin:0;width:100%}#app{display:block}.stats,.cards{grid-template-columns:1fr}header{display:block}header>div:last-child{margin-top:12px}}
@media print{body{background:#fff}.sidebar,.main,.modalTop .x{display:none}.modal{display:block;position:static;background:#fff;padding:0}.modalBox{box-shadow:none;border:0}.modalTop{display:none}}

/* Native select fallback — no custom dropdown, only original browser select */
select {
  color-scheme: dark;
  background-color: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}

select option {
  background-color: #232323;
  color: #ffffff;
}


/* Employee operations */
.op-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.card .actions .small{white-space:nowrap}


/* KPI rating */
.kpi-note{color:var(--muted);font-size:13px;margin:12px 0}


/* Project status select */
select#pStatus {
  font-size: 14px;
  font-weight: 700;
}


/* KPI active projects button */
.miniLink{
  display:block;
  margin-top:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--gold2);
  border-radius:9px;
  padding:6px 8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.miniLink:hover{background:rgba(200,164,92,.12)}


/* Salary closed-paid logic */
.salary-note{color:var(--muted);font-size:13px;margin-top:12px}


/* Finance category validation */
select#fCat{font-size:14px;font-weight:700}


/* Finance project dropdown */
select#fProject option{font-size:13px}


/* Project history */
.projectHistoryHead{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.print h3{color:#111;margin-top:24px}


/* Salary paid base salary */
.salary-paid-note{color:var(--muted);font-size:13px}


/* Founder finance payout */
#fFounderBox{transition:.2s}


/* Finance project operation details */
.projectHistoryHead{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}


/* Employee profile card */
.employeeCard .badge{font-size:13px}
.employeePeriodLine{
  color:var(--muted);
  font-size:13px;
  margin-top:12px;
}
.employeeCard .miniLink{
  display:block;
  width:max-content;
}


/* KPI formula and top employees */
.kpiFormula p{
  color:var(--muted);
  line-height:1.6;
}
.topKpiBlock h2{margin-bottom:0}
.topKpiCard{
  text-align:center;
  border-color:rgba(200,164,92,.35);
}
.topMedal{
  font-size:34px;
  margin-bottom:8px;
}
.topKpiCard .value{
  margin-top:10px;
  font-size:28px;
  font-weight:900;
}


/* Late completed project */
.badge.red{border-color:rgba(255,93,93,.35)}


/* KPI late project modal */
.badge.red{
  border-color:rgba(255,93,93,.45);
}


/* Closed month and project advance salary */
.salary-close-note{color:var(--muted);font-size:13px}


/* Salary project period sync */


/* Year dropdown */
#fltYear{
  min-height:44px;
}


/* Deep audit fixes */
.auditNote{
  color:var(--muted);
  font-size:13px;
}


/* Source of money finance fields */
#fSourceBox select,
#fProjectBox select{
  min-height:44px;
}


/* Project USD per m² */


/* Quick project finish button */
button.small.gold{
  border-color:rgba(214,183,106,.65);
  color:#f6dc9a;
}


/* Backups */
#backupList .row{
  align-items:center;
}


/* Excel export */
.btn.ghost[onclick*="exportFinanceExcel"]{
  border-color:rgba(214,183,106,.35);
}


/* Salary Excel export */
.btn.ghost[onclick*="exportSalaryExcel"]{
  border-color:rgba(214,183,106,.35);
}


/* Individual salary Excel export */
button.small[onclick*="exportEmployeeSalaryExcel"]{
  border-color:rgba(214,183,106,.45);
  color:#f6dc9a;
}


/* Salary print one page fix */
@media print{
  .print{
    padding:0 !important;
    border-radius:0 !important;
  }
  #modalBody > .btn,
  #modalBody > br{
    display:none !important;
  }
}


/* Backup restore */
.dangerMini{
  margin-top:6px;
  border:1px solid rgba(255,93,93,.45);
  color:#ff8b8b;
}


/* Backup delete */
.deleteBackupBtn{
  margin-left:6px;
  border-color:rgba(255,93,93,.65);
  color:#ff6b6b;
}


/* Founders report */
.founderReportCard{
  border-color:rgba(214,183,106,.22);
}
.founderNote p{
  color:var(--muted);
  line-height:1.55;
}


/* Dashboard 2.0 */
.dashboardAction .value{
  font-size:34px;
  font-weight:900;
  margin:16px 0;
}
.dashboardAction p{
  min-height:34px;
}
.dashboardActions .small{
  margin-top:6px;
}


/* Owner login and branding */
body.auth-mode{
  background:radial-gradient(circle at 50% 0,rgba(200,164,92,.22),transparent 34%),#111;
}
body.auth-mode .sidebar{
  display:none !important;
}
body.auth-mode .main{
  margin-left:0 !important;
  width:100% !important;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
body.auth-mode header{
  display:none !important;
}
.authShell{
  width:min(520px,100%);
}
.authCard{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(214,183,106,.24);
  border-radius:34px;
  padding:34px;
  box-shadow:0 40px 140px rgba(0,0,0,.55);
  text-align:center;
}
.authLogo{
  width:78px;
  height:78px;
  margin:0 auto 18px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:1000;
  font-size:28px;
  letter-spacing:.05em;
}
.authCard h1{
  font-size:34px;
  margin-bottom:10px;
}
.authForm{
  text-align:left;
  margin-top:22px;
}
.authBtn{
  width:100%;
  margin:18px 0 0 0;
  min-height:50px;
}
.authHint{
  margin-top:14px;
  font-size:13px;
}
#ownerBadgeFixed{
  position:fixed;
  top:16px;
  right:18px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:18px;
  background:rgba(17,17,17,.78);
  border:1px solid rgba(214,183,106,.28);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.ownerMiniLogo{
  width:38px;
  height:38px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  color:#111;
  display:grid;
  place-items:center;
  font-weight:1000;
  letter-spacing:.04em;
}
.ownerText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.ownerText b{
  font-size:13px;
}
.ownerText span{
  margin-top:4px;
  color:var(--gold2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
#ownerBadgeFixed button{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:8px 9px;
  cursor:pointer;
  font-weight:800;
}
.ownerSettingsCard{
  border-color:rgba(214,183,106,.3);
}
@media(max-width:760px){
  #ownerBadgeFixed{
    position:static;
    margin:0 0 18px auto;
    width:max-content;
  }
}


/* Owner badge position fix: do not cover top buttons */
#ownerBadgeFixed{
  top:auto !important;
  right:auto !important;
  left:16px !important;
  bottom:16px !important;
  width:238px !important;
  max-width:238px !important;
  padding:8px !important;
  border-radius:18px !important;
}
#ownerBadgeFixed .ownerText{
  min-width:0;
  flex:1;
}
#ownerBadgeFixed .ownerText b,
#ownerBadgeFixed .ownerText span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#ownerBadgeFixed button{
  padding:7px 8px !important;
  font-size:12px !important;
}
.sidebar{
  padding-bottom:92px !important;
}
@media(max-width:760px){
  #ownerBadgeFixed{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }
}


/* Roles and users */
.usersCard{
  border-color:rgba(214,183,106,.24);
}
.userRow{
  align-items:center;
}
.userRow .small{
  margin-left:6px;
}
.userRoleBadge{
  display:inline-flex;
  border:1px solid rgba(214,183,106,.26);
  color:var(--gold2);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:800;
}


/* Employee privacy */
.privateProjectCard{
  border-color:rgba(214,183,106,.18);
}
.privateProjectCard .money{
  margin-top:16px;
}
body .privateProjectCard .client{
  color:var(--gold2);
  font-weight:800;
}


/* Users manager compact layout */
.usersPreview{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.userCompact{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.userCompactAvatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:1000;
}
.userCompact p,
.usersMore{
  font-size:13px;
  color:var(--muted);
}
.miniUserStats{
  grid-template-columns:repeat(3,1fr);
}
.usersToolbar{
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
}
.usersToolbar .input{
  min-width:260px;
  flex:1;
}
.usersToolbar select{
  min-width:170px;
}
.usersManagerList{
  margin-top:18px;
}
.usersTable{
  margin-top:16px;
  display:grid;
  gap:8px;
}
.usersTableHead,
.usersTableRow{
  display:grid;
  grid-template-columns:1.25fr .9fr 1fr .7fr 1.1fr;
  gap:12px;
  align-items:center;
}
.usersTableHead{
  color:var(--muted);
  font-size:12px;
  padding:0 12px 6px;
}
.usersTableRow{
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.userActions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.userActions .small{
  margin-left:0;
}
@media(max-width:1050px){
  .usersTableHead{display:none}
  .usersTableRow{
    grid-template-columns:1fr;
  }
  .userActions{
    justify-content:flex-start;
  }
  .miniUserStats{
    grid-template-columns:1fr;
  }
}


/* DAS branded background */
body{
  background:
    linear-gradient(90deg, rgba(17,17,17,.96) 0%, rgba(17,17,17,.88) 35%, rgba(17,17,17,.82) 100%),
    url("./das_crm_background.png") center center / cover fixed no-repeat !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 22% 0, rgba(200,164,92,.16), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.48));
}
#app{
  background:transparent !important;
}
.sidebar{
  background:rgba(13,13,13,.86) !important;
  backdrop-filter:blur(10px);
}
.card,
.modalBox{
  background:linear-gradient(180deg, rgba(31,31,31,.82), rgba(22,22,22,.72)) !important;
  backdrop-filter:blur(8px);
}
.authCard{
  background:linear-gradient(180deg, rgba(31,31,31,.88), rgba(20,20,20,.78)) !important;
}
body.auth-mode{
  background:
    linear-gradient(90deg, rgba(17,17,17,.92), rgba(17,17,17,.78)),
    url("./das_crm_background.png") center center / cover fixed no-repeat !important;
}


/* DAS background size/position fix */
body{
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.80) 42%, rgba(17,17,17,.72) 100%),
    url("./das_crm_background.png") !important;
  background-position:center top, center top !important;
  background-size:100% 100%, contain !important;
  background-repeat:no-repeat, no-repeat !important;
  background-attachment:fixed, fixed !important;
}
body.auth-mode{
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg, rgba(17,17,17,.88), rgba(17,17,17,.68)),
    url("./das_crm_background.png") !important;
  background-position:center top, center top !important;
  background-size:100% 100%, contain !important;
  background-repeat:no-repeat, no-repeat !important;
  background-attachment:fixed, fixed !important;
}
body::before{
  background:
    radial-gradient(circle at 22% 0, rgba(200,164,92,.10), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.38)) !important;
}


/* DAS real logo in sidebar */
.brand{
  display:block !important;
  margin:0 8px 34px !important;
}
.brand .logo{
  width:198px !important;
  height:72px !important;
  border-radius:0 !important;
  background:transparent url("./das_sidebar_logo.png") left center / contain no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
.brand .logo::before,
.brand .logo::after{
  display:none !important;
}
.brand > div:not(.logo){
  margin-top:8px !important;
}
.brand b{
  display:block !important;
  color:#fff !important;
  font-size:17px !important;
  letter-spacing:.01em !important;
}
.brand span{
  color:var(--muted) !important;
  font-size:12px !important;
}
@media(max-width:760px){
  .brand .logo{
    width:170px !important;
    height:60px !important;
  }
}


/* Sidebar logo back to icon style */
.brand{
  display:flex !important;
  gap:14px !important;
  align-items:center !important;
  margin:0 8px 32px !important;
}
.brand .logo{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  border-radius:18px !important;
  background:
    url("./das_sidebar_icon.png") center center / 78% auto no-repeat,
    linear-gradient(145deg,var(--gold2),var(--gold)) !important;
  color:transparent !important;
  font-size:0 !important;
  box-shadow:none !important;
}
.brand > div:not(.logo){
  margin-top:0 !important;
}
.brand b{
  display:block !important;
  color:#fff !important;
  font-size:16px !important;
  line-height:1.1 !important;
}
.brand span{
  display:block !important;
  color:var(--muted) !important;
  font-size:12px !important;
  margin-top:4px !important;
}
@media(max-width:760px){
  .brand .logo{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
  }
}


/* Bigger DAS mark inside sidebar icon */
.brand .logo{
  background-size:96% auto, cover !important;
}


/* DAS mark not cut inside sidebar icon */
.brand .logo{
  background-size:82% auto, cover !important;
  background-position:center center, center center !important;
}


/* DAS sidebar icon bottom cut final fix */
.brand .logo{
  background-image:
    url("./das_sidebar_icon_v2.png"),
    linear-gradient(145deg,var(--gold2),var(--gold)) !important;
  background-position:center center, center center !important;
  background-size:86% auto, cover !important;
  background-repeat:no-repeat, no-repeat !important;
}