.admin-body{
  background:var(--bg);
  overflow-y:auto;
  height:auto;
  min-height:100vh;
}
.admin-header-fixed{
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.admin-topbar{
  background:var(--navy);
  color:#fff;
  padding:18px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.admin-topbar h1{ margin:0; font-size:19px; }
.admin-topbar-links a{
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  margin-left:18px;
  background:rgba(255,255,255,.12);
  padding:8px 14px;
  border-radius:999px;
}

.identity-bar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 26px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.identity-status{
  font-size:13px;
  color:var(--ink-soft);
  flex:1;
}
.identity-status.logged-in{ color:var(--duty-strong); font-weight:700; }
.identity-form{ display:flex; gap:8px; }
.identity-form input{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13px;
  width:140px;
}
.identity-form button{
  padding:8px 16px;
  border:none;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.identity-logout{
  padding:8px 16px;
  border:none;
  border-radius:8px;
  background:#F1F4F6;
  color:var(--danger);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}

.tabs{
  display:flex;
  gap:4px;
  padding:14px 26px 0 26px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.tab-btn{
  border:none;
  background:transparent;
  padding:12px 18px;
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  border-bottom:3px solid transparent;
  cursor:pointer;
}
.tab-btn.active{
  color:var(--navy);
  border-bottom-color:var(--navy);
}

.admin-main{ max-width:980px; margin:0 auto; padding:24px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.table-search-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.table-search-bar input{
  flex:1;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
}
.table-search-bar input:focus{
  outline:none;
  border-color:var(--navy);
}
.table-search-count{
  font-size:12px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.card-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
}
.card-box h3{ margin-top:26px; color:var(--navy); font-size:15px; }
.hint{ color:var(--ink-soft); font-size:13px; margin-top:0; }
.hint code{ background:#F1F4F6; padding:2px 6px; border-radius:4px; }

.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{
  text-align:left;
  padding:8px 6px;
  border-bottom:2px solid var(--line);
  font-size:11.5px;
  text-transform:uppercase;
  color:var(--ink-soft);
  letter-spacing:.3px;
}
.data-table td{ padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top; }

.inline-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  align-items:center;
}
.inline-form input, .inline-form select{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
}
.inline-form button{
  padding:10px 20px;
  border:none;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.del-btn{
  background:var(--danger);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:5px 10px;
  font-size:11.5px;
  cursor:pointer;
}
.routing-group-header{
  background:#EEF1F4;
  color:var(--navy);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:8px 6px !important;
}
.pct-good{ color:var(--duty-strong); font-weight:700; }
.pct-bad{ color:var(--danger); font-weight:700; }
.small-note{ color:var(--ink-soft); font-size:11.5px; }

/* WKS <-> Routing many-to-many link UI */
.link-badge{
  display:inline-block;
  background:#E8EEF5;
  color:var(--navy);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  border-radius:6px;
  margin:1px 2px 1px 0;
}
.checklist{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  width:100%;
  max-height:120px;
  overflow-y:auto;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#FAFBFC;
  margin:2px 0;
}
.checklist-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
  cursor:pointer;
  white-space:nowrap;
}
.checklist-item input{ margin:0; cursor:pointer; }

.row-actions{ display:flex; gap:6px; }
.icon-btn{
  border:none;
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.icon-btn.edit-btn{ background:#E8EEF5; color:var(--navy); }
.icon-btn.delete-btn{ background:#FBE3E3; color:var(--danger); }
.icon-btn:disabled{ opacity:.4; cursor:not-allowed; }

tr.inactive-row{ color:#9AA5AF; }
tr.inactive-row td{ color:#9AA5AF; }
.inactive-tag{
  display:inline-block;
  margin-left:6px;
  font-size:10.5px;
  font-weight:700;
  background:#EDEFF1;
  color:#9AA5AF;
  padding:1px 7px;
  border-radius:999px;
}

tr.overdue-row{ background:#FDF3F3; }
.overdue-note{
  font-size:10.5px;
  color:var(--danger);
  font-weight:700;
  margin-top:2px;
}
.overtime-note{
  font-size:10.5px;
  color:var(--toilet-strong);
  font-weight:700;
  margin-top:2px;
}

.sap-info{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.sap-info b{ color:var(--ink); }
.view-materials-btn{
  background:#EAF3EE;
  color:var(--duty-strong);
  border:none;
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  margin-top:4px;
}

.import-status-box{
  background:#F4F6F8;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.import-status-box b{ color:var(--ink); }
.import-summary{
  margin-top:14px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--duty-bg);
  color:var(--duty-strong);
  font-size:13px;
}
.import-summary.has-errors{ background:var(--break-bg); color:var(--break-strong); }
.import-summary ul{ margin:8px 0 0 18px; padding:0; }

.materials-modal-box{ max-width:820px; }

.materials-export-bar{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.export-btn{
  background:#EEF1F4;
  color:var(--navy);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 14px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.export-btn:hover{ background:#E4E9EE; }

/* ---------------- Draggable Edit Modal ---------------- */
.draggable-modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,18,28,.35);
  z-index:300;
  align-items:flex-start;
  justify-content:center;
  padding:90px 16px 16px;
  overflow-y:auto;
}
.draggable-modal-backdrop.open{ display:flex; }
.draggable-modal{
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  width:100%;
  max-width:640px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  flex-shrink:0;
}
.draggable-modal-header{
  background:var(--navy);
  color:#fff;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:move;
  user-select:none;
  font-weight:700;
  font-size:14px;
}
.draggable-modal-close{
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;
  width:26px;
  height:26px;
  border-radius:6px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.draggable-modal-body{
  padding:18px;
  overflow-y:auto;
}
.draggable-modal-body .inline-form{ margin-top:0; }
.materials-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.materials-table th{
  text-align:left; padding:6px 8px; border-bottom:2px solid var(--line);
  font-size:10.5px; text-transform:uppercase; color:var(--ink-soft);
}
.materials-table td{ padding:6px 8px; border-bottom:1px solid var(--line); }
.mat-status-tag{
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  background:#EEF1F4; color:var(--ink-soft);
}
.mat-status-tag.critical{ background:#FBE3E3; color:var(--danger); }
.mat-status-tag.done{ background:var(--duty-bg); color:var(--duty-strong); }
.mat-status-tag.ok{ background:var(--toilet-bg); color:var(--toilet-strong); }