*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body,#root{
  height:100%;
}

body{
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:12px;
  background:#f5f7fb;
  color:#1f2937;
  overflow:hidden;
}

/* ── layout ── */
.app{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  background:#ffffff;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
}

.topbar-logo{
  font-size:16px;
  font-weight:700;
  color:#2563eb;
  letter-spacing:.5px;
}

.topbar-sub{
  font-size:11px;
  color:#64748b;
}

.spacer{
  flex:1;
}

.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:#ffffff;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
  flex-wrap:wrap;
}

.lbl{
  font-size:11px;
  color:#64748b;
  white-space:nowrap;
}

input.inp{
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#1f2937;
  padding:4px 10px;
  border-radius:5px;
  font-size:12px;
  outline:none;
  width:130px;
}

input.inp:focus{
  border-color:#3b82f6;
}

button.btn{
  padding:4px 14px;
  border-radius:5px;
  font-size:12px;
  cursor:pointer;
  border:1px solid;
  transition:opacity .15s;
}

.btn-primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.btn-success{
  background:#10b981;
  border-color:#10b981;
  color:#fff;
}

.btn-cancel{
  background:#fff;
  border-color:#cbd5e1;
  color:#475569;
}

.btn-cancel:hover{
  background:#f1f5f9;
}

.chip{
  padding:3px 10px;
  border-radius:10px;
  font-size:11px;
  cursor:pointer;
  border:1px solid;
  transition:background .15s;
}

.chip-off{
  background:#fff;
  border-color:#cbd5e1;
  color:#64748b;
}

.chip-on{
  background:#dbeafe;
  border-color:#60a5fa;
  color:#1d4ed8;
}

/* ── main split ── */
.main{
  display:flex;
  flex:1;
  overflow:hidden;
}

.sidebar{
  width:240px;
  flex-shrink:0;
  background:#ffffff;
  border-right:1px solid #dbe3ef;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sidebar-hd{
  padding:8px 12px;
  font-size:10px;
  font-weight:600;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.7px;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
}

.proj-list{
  overflow-y:auto;
  flex:1;
}

.proj-item{
  padding:9px 12px;
  border-bottom:1px solid #eef2f7;
  cursor:pointer;
  transition:background .1s;
}

.proj-item:hover{
  background:#f8fafc;
}

.proj-item.sel{
  background:#eff6ff;
  border-left:3px solid #3b82f6;
}

.proj-no{
  font-weight:600;
  color:#2563eb;
  font-size:13px;
}

.proj-name{
  font-size:11px;
  color:#475569;
  margin-top:2px;
}

.proj-model{
  font-size:10px;
  color:#94a3b8;
  margin-top:1px;
}

/* ── content ── */
.content{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#f8fafc;
}

.no-sel{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  flex-direction:column;
  gap:8px;
  color:#94a3b8;
}

.no-sel-icon{
  font-size:36px;
}

/* ── project banner ── */
.proj-banner{
  padding:7px 14px;
  background:#ffffff;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.banner-field{
  display:flex;
  flex-direction:column;
}

.banner-key{
  font-size:9px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.banner-val{
  font-size:12px;
  font-weight:600;
  color:#111827;
  margin-top:1px;
}

/* ── stats ── */
.stats{
  display:flex;
  gap:8px;
  padding:8px 14px;
  background:#ffffff;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
}

.stat{
  background:#ffffff;
  border:1px solid #dbe3ef;
  border-radius:6px;
  padding:6px 12px;
  min-width:80px;
}

.stat-lbl{
  font-size:9px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.stat-val{
  font-size:18px;
  font-weight:700;
  margin-top:1px;
}

.c-blue{color:#2563eb}
.c-green{color:#059669}
.c-red{color:#dc2626}
.c-amber{color:#d97706}
.c-gray{color:#64748b}

/* ── legend ── */
.legend{
  display:flex;
  align-items:center;
  gap:14px;
  padding:5px 14px;
  background:#ffffff;
  border-bottom:1px solid #dbe3ef;
  flex-shrink:0;
  flex-wrap:wrap;
}

.leg-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#64748b;
}

.leg-box{
  width:18px;
  height:8px;
  border-radius:2px;
  border:1.5px solid;
}

/* ── grid ── */
.grid-wrap{
  flex:1;
  overflow:auto;
  position:relative;
  background:#ffffff;
}

table.sched{
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11px;
  background:#ffffff;
}

table.sched th,
table.sched td{
  border:1px solid #e2e8f0;
  white-space:pre-line;
  vertical-align:middle;
  padding:0;
}

/* header rows */
.th-fixed{
  background:#f1f5f9;
  color:#475569;
  font-weight:600;
  font-size:10px;
  text-align:center;
  padding:4px 3px;
  text-transform:uppercase;
  letter-spacing:.4px;
  position:sticky;
  top:0;
  z-index:30;
}

.th-date{
  background:#f8fafc;
  text-align:center;
  padding:2px 1px;
  font-size:9px;
  font-weight:500;
  position:sticky;
  top:0;
  z-index:20;
}

.th-date.weekend{
  background:#f1f5f9;
  color:#94a3b8;
}

.th-date.today-col{
  background:#fef3c7;
  color:#b45309;
  font-weight:700;
}

.th-date.plan-end-col {
  border-right: 2px solid #ef4444 !important;
}

/* plan / actual rows */
.tr-plan td{
  background:#eff6ff;
}

.tr-actual td{
  background:#ecfdf5;
}

.td-label{
  padding:3px 6px;
  font-size:10px;
  text-align: center;
  background:#ffffff;
}

.td-label .comp-name{
  font-weight:600;
  color:#111827;
  line-height:1.3;
}

.td-label .comp-sub{
  color:#64748b;
  font-size:9px;
  margin-top:1px;
}

td.plan-end-col {
  border-right: 2px solid #ef4444 !important;
}

/* cells */
.op-hrs {
  border-top: 1px solid #ccc;
  margin-top: 2px;
  padding-top: 2px;
  font-size: 10px;
  color: #64748b;
}

.op-group {
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px dashed #e2e8f0;
}

.op-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.op-workplace {
  font-size: 9px;
  color: #475569;
  font-weight: 600;
}

.cell-plan{
  background:#dbeafe;
  text-align:center;
  padding:2px 1px;
  line-height:1.3;
  font-size:9px;
  color:#1d4ed8;
}

.cell-plan .op-name{
  font-weight:600;
}

.cell-plan .op-hrs{
  color:#2563eb;
  font-size:8px;
}

.cell-actual-ok{
  /* background:#d1fae5; */
  text-align:center;
  padding:2px 1px;
  line-height:1.3;
  font-size:9px;
  color:#047857;
}

.cell-actual-late{
  /* background:#fee2e2; */
  text-align:center;
  padding:2px 1px;
  line-height:1.3;
  font-size:9px;
  color:#b91c1c;
}

.cell-actual-wip{
  /* background:#fef9c3; */
  text-align:center;
  padding:2px 1px;
  line-height:1.3;
  font-size:9px;
  color:#a16207;
  border:1px dashed #f59e0b!important;
}

.cell-empty-plan{
  background:#f8fafc;
}

.cell-empty-actual{
  background:#ffffff;
}

.td-today-plan,
.td-today-actual{
  border-left:2px solid #f59e0b!important;
}

/* sticky left cols */
.col-fixed{
  position:sticky;
  left:0;
  z-index:10;
  background:#ffffff;
}

.col-fixed-1{left:0px; border-right: 2px solid #94a3b8 !important;}
.col-fixed-2{left:160px}
.col-fixed-3{left:210px}
.col-fixed-4{left:240px}

.col-fixed-1,
.th-fixed.col-fixed-1,
.td-label.col-fixed-1 {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

/* loading */
.loading{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  gap:10px;
  color:#64748b;
}


@keyframes spin{
  to{transform:rotate(360deg)}
}

.spinner{
  width:18px;
  height:18px;
  border:2px solid #cbd5e1;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* scrollbar */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}

::-webkit-scrollbar-track{
  background:#f1f5f9;
}

::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:3px;
}

::-webkit-scrollbar-thumb:hover{
  background:#94a3b8;
}