/* Xscape Dispo Easy v3 */
:root{
  --bg:#0a0f1f;
  --card:#121b33;
  --muted:#8fb3ff;
  --text:#e8f0ff;
  --accent:#5fa3ff;
  --danger:#ff6b6b;
}

*{box-sizing:border-box}
body{
  margin:0;
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#0b1126, #0b1430 55%, #0b1126);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:20px 24px;
  background:rgba(9,12,24,.92);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(95,163,255,.28);
  overflow:hidden;
}

.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:58px; height:58px; border-radius:18px;
  display:grid; place-items:center;
  font-weight:800; font-size:22px;
  background: radial-gradient(circle at 30% 30%, rgba(95,163,255,.95), rgba(95,163,255,.10));
  border:1px solid rgba(95,163,255,.60);
  box-shadow: 0 8px 18px rgba(20,40,90,.40);
}
.titles .name{font-weight:800; font-size:22px; letter-spacing:.3px}
.titles .sub{color:var(--muted); font-size:13.5px}

.actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.actions .btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14);
}
.actions .btn,
.actions .btn.primary,
.actions .btn.danger{
  border-color:rgba(120,160,220,.40);
  background:rgba(120,160,220,.12);
}
.actions .btn:hover,
.actions .btn.primary:hover,
.actions .btn.danger:hover{
  background:rgba(120,160,220,.20);
}
.actions .group-project{border-color:rgba(120,190,255,.75); background:rgba(120,190,255,.24)}
.actions .group-data{border-color:rgba(95,163,255,.70); background:rgba(95,163,255,.20)}
.actions .group-nav{border-color:rgba(150,180,240,.70); background:rgba(150,180,240,.20)}
.actions .group-print{border-color:rgba(170,210,255,.80); background:rgba(170,210,255,.26)}
.actions .group-danger{border-color:rgba(255,140,140,.75); background:rgba(255,140,140,.22)}
.actions .group-project:hover{background:rgba(120,190,255,.26)}
.actions .group-data:hover{background:rgba(95,163,255,.24)}
.actions .group-nav:hover{background:rgba(150,180,240,.22)}
.actions .group-print:hover{background:rgba(170,210,255,.30)}
.actions .group-danger:hover{background:rgba(255,140,140,.26)}
.actions .group-project,
.actions .group-data,
.actions .group-nav,
.actions .group-print,
.actions .group-danger{
  position:relative;
  padding-left:18px;
}
.actions .group-project::before,
.actions .group-data::before,
.actions .group-nav::before,
.actions .group-print::before,
.actions .group-danger::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:999px;
  transform:translateY(-50%);
  box-shadow:0 0 6px rgba(255,255,255,.35);
}
.actions .group-print::before{background:rgba(190,225,255,.95)}
.actions .group-nav::before{background:rgba(170,195,245,.95)}
.actions .group-project::before{background:rgba(130,200,255,.95)}
.actions .group-data::before{background:rgba(110,175,255,.95)}
.actions .group-danger::before{background:rgba(255,160,160,.95)}


.btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{border-color:rgba(95,163,255,.65); background:rgba(95,163,255,.18)}
.btn.primary:hover{background:rgba(95,163,255,.26)}
.btn.danger{border-color:rgba(255,107,107,.45); background:rgba(255,107,107,.10)}
.btn.danger:hover{background:rgba(255,107,107,.15)}
.btn.file{position:relative; overflow:hidden}
.btn.file input{position:absolute; inset:0; opacity:0; cursor:pointer}

.layout{display:grid; grid-template-columns: 170px minmax(0, 1fr); gap:12px; align-items:start}
.content{display:grid; gap:14px; max-width:1100px; width:100%}
.side-nav{position:sticky; top:132px; align-self:start; display:flex; flex-direction:column; gap:10px}
.side-nav .nav-btn{justify-content:flex-start; text-align:left; width:100%; border-radius:999px; padding:6px 10px; font-size:12.5px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.nav-group{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}
.nav-label{font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); padding-left:4px}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .side-nav{position:static; flex-direction:row; flex-wrap:wrap; top:auto}
  .side-nav .nav-btn{flex:1 1 auto}
  .nav-group{flex:1 1 220px}
  .nav-label{display:none}
}

.grid{
  padding:14px 24px;
  display:grid;
  gap:14px;
  max-width:none;
  margin:0;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), rgba(18,24,41,.88);
  border:1px solid rgba(95,163,255,.12);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
}
h2{margin:0 0 10px; font-size:16px}
h3{margin:10px 0 8px; font-size:14px; color:#cfe0ff}

.form label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
input,select,textarea{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10);
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(122,162,255,.45)}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.small{font-size:12px}
.muted{color:var(--muted)}
.hint{margin:8px 0 0; color:var(--muted); font-size:12px}

.list{display:grid; gap:8px}
.item{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
  border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10);
}
.item .top{display:flex; justify-content:space-between; gap:10px; align-items:center}
.badge{
  cursor:pointer;
  padding:3px 8px; border-radius:999px;
  border:1px solid rgba(122,162,255,.35);
  background:rgba(122,162,255,.10);
  font-size:12px;
}
.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr} .split{grid-template-columns:1fr} }

.footer{padding:14px 16px; text-align:center}
.slot-table-wrap{overflow-x:auto}
.slot-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  line-height:1.2;
}
.slot-table th,.slot-table td{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:6px 6px;
  text-align:left;
  vertical-align:middle;
}
.slot-table th{
  color:var(--muted);
  font-weight:600;
  font-size:11px;
}
.slot-table td:first-child{min-width:120px}
.slot-table input,.slot-table select{
  padding:6px 8px;
  border-radius:10px;
}
.slot-table input[type="time"]{min-width:92px}
.slot-table .take-input{max-width:90px}
.slot-table .retake-input{min-width:160px; max-width:260px}
.slot-actions{display:flex; gap:6px; justify-content:flex-end; white-space:nowrap}
.slot-actions .btn{padding:6px 8px; font-size:12px}

.plan-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:14px}
@media (max-width: 900px){ .plan-grid{grid-template-columns:1fr} }
.slot-form{grid-template-columns: 1.1fr 1.3fr}
#f-roleselect{min-width:220px}
#f-tph-override{min-width:160px}
.speaker-stats{min-height:120px}
.speaker-stats .statrow{display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.08)}
.speaker-stats .statrow:last-child{border-bottom:none}

.badge.ok{border-color:rgba(110,220,160,.70); background:rgba(110,220,160,.22); color:#d9f7e8}
.badge.done{border-color:rgba(120,190,255,.80); background:rgba(120,190,255,.24); color:#e4f1ff}
.badge.open{border-color:rgba(255,214,102,.85); background:rgba(255,214,102,.22); color:#fff2c6}
.badge.planned{border-color:rgba(255,214,102,.85); background:rgba(255,214,102,.32); color:#fff2c6}
.badge.no{border-color:rgba(255,120,120,.82); background:rgba(255,120,120,.24); color:#ffe8e8}

.slot-table td:nth-child(1){min-width:150px}
.slot-table td:nth-child(2) select{min-width:200px}
.slot-table .take-input{max-width:120px; min-width:80px}
.slot-table .retake-input{min-width:160px}

.card.card-title{
  border-color: rgba(95,163,255,.40);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(22,30,52,.96), rgba(18,24,41,.86));
}
.card.card-roles{
  border-color: rgba(95,163,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(20,28,48,.95), rgba(18,24,41,.86));
}
.card.card-days{
  border-color: rgba(95,163,255,.36);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(24,30,54,.95), rgba(18,24,41,.86));
}
.overview-panel{
  border:1px solid rgba(95,163,255,.22);
  background: rgba(10,16,32,.42);
  border-radius:14px;
  padding:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
}


.section-sep{
  height:1px;
  background: linear-gradient(90deg, rgba(95,163,255,0), rgba(95,163,255,.45), rgba(95,163,255,0));
  margin:12px 0;
}

/* PRINT */@media print{
  *{-webkit-print-color-adjust: exact; print-color-adjust: exact; color:#000 !important;}
  @page{size:A4; margin:12mm 10mm;}
  body.print-contract{counter-reset: page;}
  body{background:white; color:black; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:10pt}
  .side-nav{display:none !important}
  .layout{display:block !important}
  .topbar,.footer,.card:not(#print-area){display:none !important}
  .grid{display:block !important; padding:0 !important; margin:0 !important; max-width:none !important}
  #print-area{display:block !important; background:white; border:none; box-shadow:none; padding:0 !important; margin:0 !important}
  body:not(.print-contract) #print-area{position:relative}
  body:not(.print-contract) #print-area .print-doc-header,
  body:not(.print-contract) #print-area .print-doc-footer{display:none !important}
  body:not(.print-contract) #print-area .print-doc-body{position:relative; padding-top:0; padding-bottom:0}
  .content{display:block !important}
  .sheet{break-after: page; page-break-after: always}
  .sheet:last-of-type{break-after: auto; page-break-after: auto}
}
.printonly{display:none}

.print-doc-header,
.print-doc-footer{display:none}
.print-doc-header{font:8.5pt/1.2 Arial, Helvetica, sans-serif; color:#111}
.print-doc-footer{font:8pt/1.2 Arial, Helvetica, sans-serif; color:#111}
.print-head-logo{max-height:10mm; max-width:46mm; object-fit:contain}
.print-head-prod{font-weight:700}
.sheet-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:6mm}
.sheet-logo{max-height:12mm; max-width:55mm; object-fit:contain}

.sheet{
  margin:0;
  padding:12mm;
  font:10pt/1.35 Arial, Helvetica, sans-serif;
  color:#111;
}
.sheet .sheet-title{
  font-size:12pt; font-weight:800; margin:0 0 6mm;
}
.sheet .meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4mm 10mm;
  margin-bottom:8mm;
}
.sheet .meta .k{color:#000; font-size:8.5pt}
.sheet .meta .v{font-size:10pt}
.hr{height:1px; background:#ddd; margin:6mm 0}
.statgrid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:5mm}
.stat{border:1px solid #e6e6e6; border-radius:10px; padding:4mm;}
.stat .k{font-size:8.5pt; color:#000}
.stat .v{font-size:10pt; font-weight:700}
.roleslist{margin-top:4mm; font-size:10pt}
.rolehead{display:flex; justify-content:space-between; gap:10mm; align-items:flex-end;}
.rolehead .rname{font-size:11pt; font-weight:800}
.rolehead .rtimes{font-size:10pt; color:#000}
.takelist{margin-top:4mm; border-top:1px solid #ddd}
.take{padding:3mm 0; border-bottom:1px solid #eee;}
.take .no{font-weight:700}
.take .txt{margin-top:1mm; color:#111}

.print-table{
  width:100%;
  border-collapse:collapse;
  font-size:10pt;
  line-height:1.25;
}
.print-table th,.print-table td{
  border-bottom:1px solid #000;
  padding:1.6mm 1.2mm;
  text-align:left;
  vertical-align:top;
}
.print-table th{
  font-size:9pt;
  color:#000;
  background:transparent;
}
.slot-block{
  margin-top:6mm;
}
.slot-title{
  font-size:10pt;
  font-weight:700;
  margin:0 0 2mm;
}
.slot-meta{
  font-size:10pt;
  color:#333;
  margin:0 0 3mm;
}
.checkhead{width:9mm}
.checkcell{width:9mm}
.check-box{
  display:inline-block;
  width:5mm;
  height:5mm;
  border:1px solid #000;
}
.hour-sep td{
  border-top:2px solid #000;
  border-bottom:none;
  padding:0;
  height:0;
}
.retake-sep td{
  border-top:1px dashed #666;
  font-weight:700;
  color:#333;
  background:#fafafa;
}
.retake-row td{
  background:#fdfdfd;
}
.nowrap{white-space:nowrap}

.print-table{page-break-inside:auto; break-inside:auto;}
.print-table tr{page-break-inside:avoid; break-inside:avoid-page;}
.print-doc-body{padding-bottom:0;}
.slot-title,.slot-meta{page-break-after:avoid; break-after:avoid-page;}
.take-sheet .sheet-title{margin-top:8mm;}


@-moz-document url-prefix(){
  @media print{
    @page{
      size: A4;
      margin: 22mm 10mm 30mm;
    }
  }
}


.topbar::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(95,163,255,0), rgba(95,163,255,.55), rgba(95,163,255,0));
}

.topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:65%;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.75;
  pointer-events:none;
}
.side-nav .nav-btn.active{border-color:rgba(170,210,255,.90); background:rgba(170,210,255,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transform:translateX(2px)}

.sort-toggle .btn{
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
}
.sort-toggle .btn.primary{
  background:rgba(170,210,255,.30);
  border-color:rgba(170,210,255,.85);
}

#sec-title, #sec-roles, #sec-days, #sec-days-overview{scroll-margin-top:110px}

@media print{
  body.print-contract .topbar,
  body.print-contract .footer,
  body.print-contract .card:not(#contract-print){display:none !important}
  body.print-contract #contract-print{display:block !important; background:white; border:none; box-shadow:none; padding:0 !important; margin:0 !important; position:relative}
  body.print-contract #print-area{display:none !important}
  body.print-contract #contract-print .print-doc-header,
  body.print-contract #contract-print .print-doc-footer{display:none !important}
  body.print-contract #contract-print .print-doc-body{position:relative; padding-top:0; padding-bottom:0}
  body.print-contract #contract-print .print-doc-body .sheet{padding-top:0; padding-bottom:0}
  body.print-contract .contract-text p{margin:0 0 3mm; text-align:justify}
  body.print-contract .contract-text{padding-bottom:0}
  body.print-contract .contract-text .contract-sec{font-weight:700; margin-top:2mm}
  body.print-contract .contract-text ul{margin:0 0 3mm 5mm; padding-left:5mm}
  body.print-contract .contract-signatures{page-break-inside:avoid; break-inside:avoid-page;}

}

.project-switch{display:flex; gap:6px; align-items:center}
.project-select{height:34px; padding:0 8px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:var(--text)}
.project-select:focus{outline:none; border-color:rgba(122,162,255,.7); box-shadow:0 0 0 2px rgba(122,162,255,.15)}

.hidden{display:none !important}

/*test*/

/* UI refresh 2026-02 */
:root{
  --bg:#0b111f;
  --bg-deep:#0a0f1d;
  --card:#111a2b;
  --card-2:#0f1828;
  --text:#e8f0ff;
  --muted:#9fb4d9;
  --accent:#5fa3ff;
  --accent-2:#9ac3ff;
  --line:rgba(130,170,240,.18);
  --shadow:0 18px 45px rgba(0,0,0,.35);
}

body{
  font:15px/1.45 "IBM Plex Sans","Fira Sans","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(70,120,255,.28), rgba(70,120,255,0)),
    radial-gradient(900px 380px at 90% 0%, rgba(30,70,140,.35), rgba(30,70,140,0)),
    linear-gradient(180deg, #0b111f 0%, #0a1224 55%, #0a0f1d 100%);
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  background-image:radial-gradient(rgba(130,170,240,.08) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.35;
}
body::after{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%);
  opacity:.5;
}

.topbar{
  background:linear-gradient(180deg, #0f172b, #0c1426 65%);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}

.topbar::before,
.topbar::after{
  opacity:.4;
}

.logo{
  width:60px;
  height:60px;
  border-radius:18px;
  font-weight:800;
  font-size:24px;
  color:#fff;
  background:linear-gradient(135deg, #3b7bff, #7fb0ff);
  border:1px solid rgba(95,163,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.45);
}

.titles .name{font-size:24px; letter-spacing:.2px}
.titles .sub{color:var(--muted)}

.actions{gap:8px; row-gap:8px}
.actions .btn,
.btn{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(120,160,220,.35);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.25);
  text-decoration:none;
}
.actions .btn:hover,
.btn:hover{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05))}

.btn.primary{
  background:linear-gradient(180deg,#5f9bff,#3b7bff);
  border-color:rgba(95,163,255,.7);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(30,70,140,.45);
}
.btn.primary:hover{background:linear-gradient(180deg,#6aa7ff,#3b7bff)}

.btn.danger{
  background:linear-gradient(180deg,#ff6b6b,#e24f4f);
  border-color:rgba(255,107,107,.55);
  color:#fff;
}
.btn.state-yes{
  background:linear-gradient(180deg,#53c98a,#2f9e66);
  border-color:rgba(83,201,138,.75);
  color:#fff;
}
.btn.state-yes:hover{background:linear-gradient(180deg,#61d998,#2f9e66)}
.btn.state-no{
  background:linear-gradient(180deg,#ff7a7a,#de4f4f);
  border-color:rgba(255,122,122,.75);
  color:#fff;
}
.btn.state-no:hover{background:linear-gradient(180deg,#ff8a8a,#de4f4f)}

.actions .group-project,
.actions .group-data,
.actions .group-nav,
.actions .group-print,
.actions .group-danger{
  padding-left:10px;
  border-color:rgba(120,160,220,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.actions .group-project::before,
.actions .group-data::before,
.actions .group-nav::before,
.actions .group-print::before,
.actions .group-danger::before{display:none}

.layout{grid-template-columns: 200px minmax(0, 1fr)}
.content{max-width:1200px}

.side-nav{
  top:118px;
  gap:12px;
}
.nav-group{
  border:1px solid rgba(130,170,240,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-label{color:var(--muted)}
.side-nav .nav-btn{
  border-radius:12px;
  padding:8px 10px;
  font-size:12.5px;
}
.side-nav .nav-btn.active{
  border-color:rgba(95,163,255,.7);
  background:rgba(95,163,255,.18);
  transform:none;
}

.grid{max-width:1400px; margin:0 auto}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 35%), rgba(16,24,40,.92);
  border:1px solid rgba(95,163,255,.2);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}

h2{font-size:17px}
h3{color:#cfe0ff}

input,select,textarea{
  background:rgba(0,0,0,.22);
  color:var(--text);
  border:1px solid rgba(120,160,220,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(95,163,255,.65);
  box-shadow:0 0 0 3px rgba(95,163,255,.18);
}

.item{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(120,160,220,.25);
}

.badge{
  border-color:rgba(95,163,255,.45);
  background:rgba(95,163,255,.14);
}

.overview-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(95,163,255,.22);
}

.section-sep{
  background:linear-gradient(90deg, rgba(95,163,255,0), rgba(95,163,255,.45), rgba(95,163,255,0));
}

.slot-table th{color:var(--muted)}
.slot-table th,.slot-table td{border-bottom:1px solid rgba(120,160,220,.22)}

.project-select{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid rgba(120,160,220,.35);
  border-radius:10px;
}

@keyframes rise{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
.card,
.nav-group{
  animation:rise .35s ease both;
}

.sheet{
  font-family:"IBM Plex Sans","Fira Sans","Segoe UI",sans-serif;
}


/* Project display + print button polish */
.project-switch{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(120,160,220,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.project-label{
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted);
}
.project-select{
  min-width:180px;
  height:38px;
  font-weight:600;
}
.actions #btn-print{
  font-size:14.5px;
  letter-spacing:.2px;
}

/* Print button vertical align */
.actions #btn-print{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding-top:9px;
  padding-bottom:9px;
}

/* Print button size adjust */
.actions #btn-print{
  font-size:13.5px;
  padding-top:8px;
  padding-bottom:8px;
}


/* Print button final alignment */
.actions #btn-print{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  line-height:1;
  font-size:13.5px;
}

/* Print button baseline tweak */
.actions #btn-print{transform: translateY(-1px);}


/* PDF export uses real header/footer from Puppeteer templates */


/* UI alignment 2026-02-14 */
.layout{
  grid-template-columns:190px minmax(0,1fr);
  gap:10px;
}
.content{
  max-width:1020px;
}
.grid{
  max-width:1240px;
}

.actions .btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 12px;
  font-size:13px;
  line-height:1.1;
}

.actions #btn-print{
  height:38px;
  transform:none;
  padding:0 12px;
  font-size:13px;
}

.side-nav .nav-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:38px;
  padding:0 12px;
  font-size:13px;
  line-height:1.1;
}

@media (max-width:900px){
  .content{max-width:none;}
  .grid{max-width:none;}
}


/* Dispo final alignment (menu width + left buttons parity) */
body.page-dispo .grid{
  width:min(100%, 1100px);
  max-width:1100px;
  margin:0 auto;
  padding-left:12px;
  padding-right:12px;
}
body.page-dispo .layout{
  grid-template-columns:190px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
body.page-dispo .content{
  width:100%;
  max-width:100%;
  min-width:0;
}
body.page-dispo .card,
body.page-dispo .overview-panel{
  width:100%;
  min-width:0;
}
body.page-dispo .btn,
body.page-dispo .actions .btn{
  min-height:34px;
  padding:0 10px;
  font-size:12px;
  line-height:1.1;
  border-radius:10px;
}
body.page-dispo .actions #btn-print{
  height:34px;
  min-height:34px;
  padding:0 10px;
  font-size:12px;
}
body.page-dispo .project-select{
  min-height:34px;
  height:34px;
  font-size:12px;
}
body.page-dispo .side-nav .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:34px;
  padding:0 10px;
  font-size:12px;
  line-height:1.1;
  border-radius:10px;
}

@media (max-width:900px){
  body.page-dispo .grid{
    width:100%;
    max-width:100%;
    padding-left:10px;
    padding-right:10px;
  }
  body.page-dispo .layout{
    grid-template-columns:1fr;
  }
  body.page-dispo .side-nav .nav-btn{
    justify-content:center;
  }
}

/* Global: number inputs without spinner arrows */
input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Xscape brand master theme 2026-02-16 */
:root{
  --menu-font-size:13px;
  --menu-line-height:1.1;
  --menu-height:38px;
  --menu-radius:12px;
  --xscape-blue:#4f8ed8;
  --xscape-silver:#c8d6eb;
}

body{
  font:15px/1.45 "IBM Plex Sans","Fira Sans","Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 520px at 18% -8%, rgba(214,236,255,.28), rgba(214,236,255,0) 60%),
    radial-gradient(900px 520px at 82% 6%, rgba(148,205,255,.25), rgba(148,205,255,0) 64%),
    radial-gradient(1100px 700px at -5% 100%, rgba(34,75,162,.72), rgba(34,75,162,0) 66%),
    linear-gradient(160deg, #1f4e9f 0%, #2f76be 38%, #4a95cf 58%, #2d66af 79%, #173f88 100%);
  background-attachment: fixed;
}

body::before{
  background:
    radial-gradient(72% 50% at 28% 10%, rgba(255,255,255,.20), rgba(255,255,255,0) 70%),
    radial-gradient(55% 42% at 74% 18%, rgba(255,255,255,.16), rgba(255,255,255,0) 75%),
    radial-gradient(60% 48% at 85% 88%, rgba(22,55,130,.42), rgba(22,55,130,0) 78%);
  opacity:.78;
}

body::after{
  background: linear-gradient(180deg, rgba(5,12,28,.42), rgba(8,20,46,.20) 28%, rgba(8,18,40,.44));
  opacity:1;
}

.topbar{
  background:linear-gradient(180deg, rgba(14,29,63,.88), rgba(12,24,52,.84));
  border-bottom:1px solid rgba(193,219,247,.38);
  box-shadow:0 12px 28px rgba(3,10,25,.36);
}

.logo{
  color:#f4f9ff;
  border:1px solid rgba(212,226,244,.75);
  background:
    linear-gradient(150deg, rgba(208,220,239,.52), rgba(123,168,228,.12) 45%, rgba(53,111,195,.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(7,22,56,.44);
}

.brand::after{
  content:"XSCAPE MASTERMIND";
  margin-left:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(212,226,244,.35);
  background:linear-gradient(180deg, rgba(200,214,235,.25), rgba(200,214,235,.08));
  color:#dce8f7;
  font-size:11px;
  letter-spacing:.8px;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:1200px){
  .brand::after{display:none}
}

.topbar .actions .btn,
.topbar .btn,
.topbar .project-select,
.side-nav .nav-btn,
.project-label,
.nav-label{
  font-size:var(--menu-font-size) !important;
  line-height:var(--menu-line-height) !important;
}

.topbar .actions .btn,
.topbar .btn,
.side-nav .nav-btn,
.topbar .project-select{
  min-height:var(--menu-height) !important;
  height:var(--menu-height);
  padding:0 12px !important;
  border-radius:var(--menu-radius) !important;
}

.project-switch{
  min-height:var(--menu-height);
  border-radius:var(--menu-radius);
}

body.page-dispo .topbar .btn,
body.page-dispo .topbar .actions .btn,
body.page-dispo .side-nav .nav-btn,
body.page-dispo .topbar .project-select,
body.page-dispo .topbar .actions #btn-print{
  min-height:var(--menu-height) !important;
  height:var(--menu-height) !important;
  font-size:var(--menu-font-size) !important;
  line-height:var(--menu-line-height) !important;
  border-radius:var(--menu-radius) !important;
  padding:0 12px !important;
  transform:none !important;
}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 42%),
    rgba(9,20,45,.86);
  border:1px solid rgba(194,218,247,.20);
  box-shadow:0 20px 44px rgba(3,10,25,.42), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Clarity layout pass 2026-02-16 */
:root{
  --menu-font-size:12.5px;
  --menu-height:36px;
  --menu-radius:10px;
}

body{
  background:linear-gradient(165deg, #1f4f98 0%, #356eb3 46%, #244f8f 100%);
}

body::before{
  background:
    radial-gradient(52% 38% at 18% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 72%),
    radial-gradient(45% 34% at 82% 14%, rgba(255,255,255,.14), rgba(255,255,255,0) 72%);
  opacity:.45;
}

body::after{
  background:linear-gradient(180deg, rgba(8,18,38,.25), rgba(8,18,38,.35));
  opacity:1;
}

.topbar{
  padding:14px 18px;
  backdrop-filter:blur(6px);
}

.topbar .actions{gap:6px}

.topbar .actions .btn,
.topbar .btn,
.side-nav .nav-btn,
.topbar .project-select{
  font-size:12.5px !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:10px !important;
  padding:0 10px !important;
}

.titles .name{font-size:21px}
.titles .sub{font-size:12px}

.brand::after{
  font-size:10px;
  padding:3px 8px;
}

.grid{max-width:1160px !important}
body.page-dispo .grid{
  width:min(100%, 1060px) !important;
  max-width:1060px !important;
}

.layout{gap:10px}
body.page-dispo .layout{grid-template-columns:180px minmax(0,1fr) !important}

.side-nav{gap:8px}
.nav-group{padding:7px}

.card{
  border-radius:14px;
  box-shadow:0 12px 28px rgba(3,10,25,.28), inset 0 1px 0 rgba(255,255,255,.10);
}

.card h2{font-size:16px; margin-bottom:8px}

.form label{font-size:12px; color:#d5e3f7}

input,select,textarea{
  border-radius:10px;
  background:rgba(8,20,45,.45);
  border:1px solid rgba(180,205,236,.30);
}

.table-wrap{
  border:1px solid rgba(180,205,236,.20);
  border-radius:12px;
  background:rgba(8,20,45,.45);
}

.calc-table th,.calc-table td,.slot-table th,.slot-table td{font-size:12px}
.calc-table th,.slot-table th{font-size:11px}

.card,.nav-group{animation:none !important}

@media (max-width:900px){
  .topbar{padding:12px}
  .brand::after{display:none}
  .grid{padding-left:10px; padding-right:10px}
}

/* Header logo switch 2026-02-16 */
.brand::after{
  display:none !important;
  content:none !important;
}

.brand-logo{
  display:block;
  width:auto;
  height:46px;
  max-width:min(44vw, 300px);
  object-fit:contain;
  background:transparent !important;
  filter:drop-shadow(0 2px 8px rgba(3,12,30,.25));
}

@media (max-width:900px){
  .brand-logo{
    height:38px;
    max-width:58vw;
  }
}

body.page-login{
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(5,10,24,.72), rgba(5,10,24,.82)),
    url("assets/aquax-blue.jpg") center center / cover no-repeat;
}

body.page-login .topbar{
  background:rgba(9,12,24,.72);
  border-bottom-color:rgba(180,220,255,.34);
}

body.page-login .card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%), rgba(10,16,32,.74);
  border-color:rgba(180,220,255,.28);
}