:root {
  --tc-primary: #0ea5e9;
  --tc-primary-strong: #0284c7;
  --tc-accent: #22c55e;
  --tc-electric: #a3e635;
  --tc-ink: #0f172a;
  --tc-ink-soft: #334155;
  --tc-muted: #64748b;
  --tc-canvas: #f3f7fb;
  --tc-surface: rgba(255, 255, 255, 0.92);
  --tc-border: rgba(148, 163, 184, 0.22);
  --tc-sidebar: #07111f;
  --tc-sidebar-soft: #0d1b2e;
  --tc-radius: 18px;
  --tc-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--tc-ink);
  background:
    radial-gradient(circle at 85% 5%, rgba(14, 165, 233, 0.11), transparent 25rem),
    radial-gradient(circle at 15% 95%, rgba(34, 197, 94, 0.07), transparent 28rem),
    var(--tc-canvas);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.012em;
}

.layout-wrapper,
.layout-container {
  min-height: 100vh;
}

.layout-container,
.layout-page {
  padding-top: 0;
}

.layout-page {
  background: transparent;
}

.tc-sidebar {
  width: 286px;
  color: #dbeafe;
  border: 0;
  background:
    linear-gradient(155deg, rgba(14, 165, 233, 0.09), transparent 38%),
    linear-gradient(180deg, var(--tc-sidebar) 0%, #091628 52%, #07111f 100%);
  box-shadow: 20px 0 60px rgba(2, 8, 23, 0.2);
  overflow: hidden;
}

.tc-sidebar::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 65%);
}

.tc-sidebar > * {
  position: relative;
  z-index: 1;
}

.tc-brand {
  height: auto;
  min-height: 88px;
  padding: 18px 18px 12px;
}

.tc-brand .app-brand-link {
  min-width: 0;
  color: #fff;
}

.tc-brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  color: #06111f;
  border-radius: 14px;
  background: linear-gradient(135deg, #67e8f9, var(--tc-electric));
  box-shadow: 0 0 28px rgba(103, 232, 249, 0.24);
}

.tc-brand-mark i {
  font-size: 26px;
}

.tc-brand-copy {
  display: flex;
  min-width: 0;
  margin-left: 12px;
  flex-direction: column;
  line-height: 1.1;
}

.tc-brand-copy strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 750;
  text-overflow: ellipsis;
}

.tc-brand-copy small {
  margin-top: 5px;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tc-brand .layout-menu-toggle {
  color: #64748b;
}

.tc-line-status {
  display: flex;
  margin: 0 16px 12px;
  padding: 11px 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 14px;
  background: rgba(15, 34, 57, 0.8);
}

.tc-line-status strong,
.tc-line-status small {
  display: block;
}

.tc-line-status strong {
  color: #e2e8f0;
  font-size: 12px;
}

.tc-line-status small {
  margin-top: 2px;
  color: #64748b;
  font-size: 10px;
}

.tc-status-pulse,
.blinking-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid #052e16;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.1), 0 0 16px rgba(74, 222, 128, 0.55);
  animation: tc-pulse 2s infinite;
}

@keyframes tc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

.tc-sidebar .menu-inner {
  padding: 0 12px 96px;
}

.tc-sidebar .menu-header {
  margin: 16px 10px 6px;
  padding: 0;
  color: #52627a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tc-sidebar .menu-header::before {
  display: none;
}

.tc-sidebar .menu-item {
  margin: 3px 0;
}

.tc-sidebar .menu-link {
  min-height: 44px;
  padding: 10px 12px;
  color: #91a4be;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 550;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.tc-sidebar .menu-link:hover {
  color: #e0f2fe;
  background: rgba(125, 211, 252, 0.07);
  transform: translateX(2px);
}

.tc-sidebar .menu-icon {
  width: 22px;
  margin-right: 10px;
  color: #6f87a6;
  font-size: 19px;
}

.tc-sidebar .menu-item.active > .menu-link,
.tc-sidebar .menu-item.open > .menu-link:not(.menu-sub .menu-link) {
  color: #effcff;
  background: linear-gradient(100deg, rgba(14, 165, 233, 0.22), rgba(34, 197, 94, 0.08));
  box-shadow: inset 3px 0 #38bdf8;
}

.tc-sidebar .menu-item.active > .menu-link .menu-icon,
.tc-sidebar .menu-item.open > .menu-link .menu-icon {
  color: #67e8f9;
}

.tc-sidebar .menu-sub {
  margin: 4px 0 8px 12px;
  padding-left: 10px;
  border-left: 1px solid rgba(100, 116, 139, 0.26);
}

.tc-sidebar .menu-sub::before,
.tc-sidebar .menu-sub .menu-link::before {
  display: none;
}

.tc-sidebar .menu-sub .menu-link {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
}

.tc-sidebar .menu-sub .menu-item.active > .menu-link {
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.09);
  box-shadow: none;
}

.tc-sidebar-footer {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  min-height: 62px;
  padding: 10px 11px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 16px;
  background: rgba(13, 27, 46, 0.96);
  backdrop-filter: blur(18px);
}

.tc-user-initial,
.tc-navbar-initial {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #05243a;
  border-radius: 12px;
  background: linear-gradient(135deg, #7dd3fc, #86efac);
  font-weight: 800;
}

.tc-sidebar-user-copy {
  min-width: 0;
  flex: 1;
}

.tc-sidebar-user-copy strong,
.tc-sidebar-user-copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tc-sidebar-user-copy strong { color: #e2e8f0; font-size: 12px; }
.tc-sidebar-user-copy small { margin-top: 3px; color: #64748b; font-size: 10px; }
.tc-sidebar-footer > a { color: #64748b; font-size: 19px; }
.tc-sidebar-footer > a:hover { color: #7dd3fc; }

.layout-navbar {
  min-height: 68px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

.layout-navbar::before {
  display: flex;
  color: var(--tc-ink);
  content: "Assembly Command Centre";
  align-items: center;
  font-size: 14px;
  font-weight: 750;
}

.layout-navbar::after {
  display: inline-flex;
  margin-left: 10px;
  padding: 4px 8px;
  color: #047857;
  content: "LIVE";
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.09);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.content-wrapper {
  background: transparent;
}

.container-xxl.container-p-y {
  padding-top: 24px;
  padding-bottom: 30px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tc-ink);
  letter-spacing: -0.025em;
}

.card,
.modal-content,
.accordion-item {
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}

.card-header {
  padding: 18px 20px;
  color: var(--tc-ink);
  border-bottom: 1px solid var(--tc-border);
  background: rgba(248, 250, 252, 0.72);
  font-weight: 750;
}

.card-body {
  padding: 14px;
}

.btn {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.btn-primary,
.bg-primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-strong));
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.btn-outline-primary {
  color: var(--tc-primary-strong);
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(14, 165, 233, 0.05);
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.selectize-input {
  min-height: 42px;
  color: var(--tc-ink);
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

/* Dense, mobile-first material workspace */
.tc-page { width: 100%; }
.tc-page-head { display:flex; margin-bottom:12px; align-items:flex-end; justify-content:space-between; gap:12px; }
.tc-page-head h1 { margin:2px 0 3px; font-size:clamp(21px,2.4vw,30px); font-weight:800; }
.tc-page-head p { max-width:760px; margin:0; color:var(--tc-muted); font-size:12px; }
.tc-eyebrow { display:block; color:#0284c7; font-size:9px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.tc-panel { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.86); border-radius:16px; background:rgba(255,255,255,.78); box-shadow:0 14px 32px rgba(15,23,42,.07),inset 0 1px 0 #fff; backdrop-filter:blur(20px); transform:translateZ(0); }
.tc-panel::before { position:absolute; inset:0 0 auto; height:1px; content:""; background:linear-gradient(90deg,transparent,rgba(14,165,233,.55),transparent); }
.tc-panel-head { display:flex; min-height:56px; padding:12px 14px; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--tc-border); }
.tc-panel-head h5 { margin:2px 0 0; font-size:15px; }
.tc-metric-grid { display:grid; margin-bottom:12px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.tc-metric { position:relative; overflow:hidden; min-height:84px; padding:13px 14px; border:1px solid rgba(255,255,255,.86); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,246,250,.86)); box-shadow:0 11px 24px rgba(15,23,42,.07),inset 0 1px 0 #fff; }
.tc-metric::after { position:absolute; right:-24px; bottom:-30px; width:78px; height:78px; content:""; border:14px solid rgba(14,165,233,.05); border-radius:50%; }
.tc-metric span { display:block; color:var(--tc-muted); font-size:10px; font-weight:750; text-transform:uppercase; }
.tc-metric strong { display:block; margin-top:6px; font-size:25px; line-height:1; }
.tc-metric--success { box-shadow:inset 3px 0 #22c55e,0 11px 24px rgba(15,23,42,.07); }
.tc-metric--danger { box-shadow:inset 3px 0 #ef4444,0 11px 24px rgba(15,23,42,.07); }
.tc-filterbar { display:grid; padding:10px; grid-template-columns:minmax(210px,2fr) repeat(5,minmax(110px,1fr)); align-items:center; gap:7px; border-bottom:1px solid var(--tc-border); background:rgba(248,250,252,.72); }
.tc-filterbar .form-control,.tc-filterbar .form-select,.tc-filterbar .btn { min-height:38px; padding-top:7px; padding-bottom:7px; }
.tc-search { position:relative; }
.tc-search i { position:absolute; top:50%; left:12px; z-index:2; color:#94a3b8; transform:translateY(-50%); }
.tc-search input { width:100%; min-height:38px; padding:7px 10px 7px 34px; border:1px solid #dbe3ed; border-radius:11px; background:#fff; outline:0; }
.tc-table { margin:0; }
.tc-table thead th { position:sticky; top:0; z-index:1; white-space:nowrap; }
.tc-table tbody td { padding:10px; font-size:12px; }
.tc-chip-list { display:flex; max-width:440px; margin-bottom:3px; flex-wrap:wrap; gap:4px; }
.tc-chip { display:inline-flex; padding:3px 7px; color:#075985; border:1px solid rgba(14,165,233,.18); border-radius:999px; background:rgba(14,165,233,.07); font:700 10px/1.4 ui-monospace,monospace; }
.tc-empty { display:flex; min-height:120px; padding:22px; color:#94a3b8; align-items:center; justify-content:center; flex-direction:column; gap:5px; text-align:center; }
.tc-empty i { font-size:27px; }
.tc-empty strong { color:#475569; }
.tc-empty span { font-size:11px; }
.tc-pagination { padding:10px 12px; border-top:1px solid var(--tc-border); }
.tc-pagination nav>div:first-child { display:none; }
.tc-form .form-label { margin-bottom:3px; color:#475569; font-size:10px; font-weight:750; letter-spacing:.025em; }
.tc-form-section { margin-bottom:11px; padding:12px; border:1px solid #e7edf3; border-radius:13px; background:rgba(248,250,252,.68); }
.tc-form-section h6 { display:flex; margin:0 0 9px; align-items:center; gap:7px; font-size:12px; }
.tc-form-section h6 span { display:grid; width:25px; height:25px; place-items:center; color:#0369a1; border-radius:8px; background:#e0f2fe; font-size:9px; }
.tc-drawer { width:min(520px,100vw); background:rgba(255,255,255,.96); backdrop-filter:blur(22px); }
.tc-drawer--wide { width:min(760px,100vw); }
.tc-list { max-height:280px; overflow:auto; }
.tc-list-item { display:flex; padding:10px 12px; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #edf2f7; }
.tc-list-item strong,.tc-list-item small { display:block; }
.tc-list-item small { margin-top:2px; color:var(--tc-muted); font-size:10px; }
.tc-dropzone { position:relative; display:flex; min-height:74px; padding:12px; align-items:center; gap:12px; border:1px dashed #9bcce3; border-radius:13px; background:#f3fbfe; }
.tc-dropzone>i { color:#0284c7; font-size:26px; }
.tc-dropzone input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.tc-dropzone strong,.tc-dropzone small { display:block; }
.tc-dropzone small { color:var(--tc-muted); font-size:10px; }
.tc-timeline { padding:14px; }
.tc-timeline-item { position:relative; display:grid; padding:0 0 16px; grid-template-columns:18px 1fr; gap:8px; }
.tc-timeline-item>span { width:10px; height:10px; margin-top:4px; border:2px solid #fff; border-radius:50%; background:#0ea5e9; box-shadow:0 0 0 3px #dff4fd; }
.tc-timeline-item:not(:last-child)::before { position:absolute; top:15px; bottom:1px; left:4px; width:1px; content:""; background:#dbe7ee; }
.tc-timeline-item strong,.tc-timeline-item small { display:block; }
.tc-timeline-item small { color:var(--tc-muted); font-size:10px; }
.tc-timeline-item p { margin:4px 0 0; font-size:11px; }

/* Advanced DataTables control surface */
.dataTables_wrapper { padding:8px 10px 10px; }
.dataTables_wrapper>.row { margin:0; }
.dataTables_wrapper .dataTables_filter input { min-width:220px; min-height:36px; margin-left:6px; padding:6px 10px; }
.dataTables_wrapper .dataTables_length select { min-height:36px; padding:5px 28px 5px 8px; }
.dt-buttons { display:flex; margin-bottom:7px; flex-wrap:wrap; gap:5px; }
.dt-buttons .dt-button { min-height:34px; margin:0; padding:6px 9px; font-size:11px; }
.dataTables_scrollBody { border:0; }
.dtr-details { width:100%; }
.dtr-details li { display:grid; padding:6px; grid-template-columns:42% 1fr; }
.dtr-title { color:#64748b; font-size:10px; text-transform:uppercase; }
.tc-dt-toolbar { display:flex; padding:5px 0 9px; align-items:center; flex-wrap:wrap; gap:8px; }
.tc-dt-toolbar .dataTables_filter { margin-left:auto; }
.tc-dt-date-range { display:flex; margin-left:4px; align-items:center; gap:5px; color:#64748b; font-size:10px; font-weight:700; }
.tc-dt-date-range input { width:132px; min-height:34px; padding:5px 7px; border:1px solid #dbe3ed; border-radius:9px; background:#fff; }

/* Final Pack digital traceability record */
.tc-pack-page { width:100%; }
.tc-pack-hero { position:relative; display:grid; overflow:hidden; margin-bottom:10px; padding:18px 20px; color:#dff6ff; border:1px solid rgba(56,189,248,.18); border-radius:19px; background:radial-gradient(circle at 82% 8%,rgba(163,230,53,.16),transparent 14rem),linear-gradient(120deg,#061524,#0a2944 60%,#063a4d); box-shadow:0 20px 44px rgba(6,21,36,.18); grid-template-columns:minmax(0,1fr) auto; gap:14px; }
.tc-pack-hero::after { position:absolute; right:-65px; bottom:-110px; width:280px; height:280px; content:""; border:1px solid rgba(125,211,252,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(125,211,252,.035),0 0 0 78px rgba(125,211,252,.018); }
.tc-pack-hero-main,.tc-pack-verdict,.tc-pack-actions { position:relative; z-index:1; }
.tc-pack-hero h1 { margin:0; color:#fff; font:800 clamp(25px,3.3vw,40px)/1.05 ui-monospace,SFMono-Regular,monospace; letter-spacing:-.04em; }
.tc-pack-hero p { max-width:680px; margin:7px 0 0; color:#8caac0; font-size:11px; }
.tc-pack-tags { display:flex; margin-top:12px; flex-wrap:wrap; gap:5px; }
.tc-pack-tags span { padding:4px 8px; color:#a9c5d8; border:1px solid rgba(148,203,228,.13); border-radius:999px; background:rgba(8,35,56,.55); font-size:9px; }
.tc-pack-verdict { display:flex; min-width:170px; padding:12px 15px; justify-content:center; flex-direction:column; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:rgba(2,14,25,.4); backdrop-filter:blur(12px); }
.tc-pack-verdict span,.tc-pack-verdict small { color:#84a1b5; font-size:9px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.tc-pack-verdict strong { margin:3px 0; font-size:20px; }
.tc-pack-verdict.is-ok { box-shadow:inset 3px 0 #4ade80; }
.tc-pack-verdict.is-ok strong { color:#86efac; }
.tc-pack-verdict.is-nok { box-shadow:inset 3px 0 #fbbf24; }
.tc-pack-verdict.is-nok strong { color:#fde68a; }
.tc-pack-actions { display:flex; grid-column:1/-1; gap:6px; }
.tc-pack-actions .btn { min-height:34px; padding:6px 10px; }
.tc-pack-kpis { display:grid; margin-bottom:10px; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.tc-pack-kpis>div { min-height:78px; padding:11px 12px; border:1px solid rgba(255,255,255,.88); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,251,.88)); box-shadow:0 10px 22px rgba(15,23,42,.06),inset 0 1px #fff; }
.tc-pack-kpis span { display:block; color:#64748b; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tc-pack-kpis strong { display:block; overflow:hidden; margin-top:7px; color:#0f172a; font-size:22px; white-space:nowrap; text-overflow:ellipsis; }
.tc-pack-kpis strong small { margin-left:3px; color:#64748b; font-size:10px; }
.tc-pack-kpis .tc-kpi-code { font:750 14px/1.4 ui-monospace,SFMono-Regular,monospace; }
.tc-gauge { height:3px; margin-top:6px; overflow:hidden; border-radius:99px; background:#dce8ee; }
.tc-gauge i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0ea5e9,#22c55e); }
.tc-station-rail { display:grid; padding:12px; grid-template-columns:repeat(8,minmax(105px,1fr)); gap:7px; overflow-x:auto; }
.tc-station-step { position:relative; display:flex; min-width:105px; padding:9px; align-items:center; gap:7px; border:1px solid #e2eaf0; border-radius:11px; background:#f8fafc; }
.tc-station-step::after { position:absolute; top:50%; right:-8px; width:8px; height:1px; content:""; background:#cdd9e2; }
.tc-station-step:last-child::after { display:none; }
.tc-station-step>span { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border-radius:8px; font-size:10px; font-weight:850; }
.tc-station-step strong,.tc-station-step small { display:block; white-space:nowrap; }
.tc-station-step strong { font-size:10px; }
.tc-station-step small { margin-top:2px; color:#8291a4; font-size:8px; }
.tc-station-step.is-complete>span { color:#047857; background:#d1fae5; }
.tc-station-step.is-missing { opacity:.58; }
.tc-station-step.is-missing>span { color:#9a3412; background:#ffedd5; }
.tc-detail-grid { display:grid; padding:10px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.tc-detail-grid>div { min-height:54px; padding:8px 10px; border:1px solid #e8eef3; border-radius:10px; background:rgba(248,250,252,.72); }
.tc-detail-grid span,.tc-detail-grid strong { display:block; }
.tc-detail-grid span { color:#708094; font-size:9px; font-weight:750; text-transform:uppercase; }
.tc-detail-grid strong { margin-top:3px; color:#182b3d; font-size:12px; overflow-wrap:anywhere; }
.tc-detail-grid strong small { color:#708094; font-size:9px; }
.tc-record-links { display:flex; padding:0 10px 10px; flex-wrap:wrap; gap:6px; }
.tc-record-links a { display:inline-flex; padding:6px 9px; color:#0369a1; align-items:center; gap:5px; border-radius:9px; background:#eaf7fd; font-size:10px; font-weight:700; }
.tc-check-grid { display:grid; padding:10px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.tc-check-grid>div { display:grid; min-height:58px; padding:8px; grid-template-columns:21px 1fr; align-items:center; gap:2px 6px; border:1px solid #e6edf2; border-radius:10px; background:#fafcfd; }
.tc-check-grid i { grid-row:1/3; font-size:18px; }
.tc-check-grid span { color:#506274; font-size:9px; line-height:1.25; }
.tc-check-grid strong { font-size:9px; }
.tc-check-grid .is-pass i,.tc-check-grid .is-pass strong { color:#059669; }
.tc-check-grid .is-fail i,.tc-check-grid .is-fail strong { color:#dc2626; }
.tc-check-grid .is-measured i,.tc-check-grid .is-measured strong { color:#0284c7; }
.tc-engineering-list { padding:8px 12px; }
.tc-engineering-list>div:not(.tc-empty) { display:flex; padding:9px 0; align-items:flex-start; gap:8px; border-bottom:1px solid #edf2f7; }
.tc-engineering-list strong,.tc-engineering-list small { display:block; }
.tc-engineering-list strong { font-size:11px; }
.tc-engineering-list small { margin-top:3px; color:#718095; font-size:9px; }

@media (max-width:991.98px) {
  .tc-pack-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tc-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:575.98px) {
  .tc-pack-hero { padding:15px; grid-template-columns:1fr; }
  .tc-pack-verdict { min-width:0; }
  .tc-pack-actions { position:sticky; bottom:8px; display:grid; grid-column:auto; grid-template-columns:repeat(3,1fr); }
  .tc-pack-actions .btn { padding:6px; }
  .tc-pack-actions i { margin:0; }
  .tc-pack-actions span { display:none; }
  .tc-pack-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tc-pack-kpis>div:first-child { grid-column:1/-1; }
  .tc-detail-grid,.tc-check-grid { grid-template-columns:1fr; }
}

@media (max-width: 991.98px) {
  .tc-filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tc-filterbar .tc-search { grid-column:1/-1; }
  .tc-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
  .tc-page-head { align-items:stretch; flex-direction:column; }
  .tc-page-head>.btn { width:100%; }
  .tc-filterbar { grid-template-columns:1fr 1fr; padding:8px; }
  .tc-filterbar>* { min-width:0; }
  .tc-filterbar .tc-search,.tc-filterbar select { grid-column:1/-1; }
  .tc-metric { min-height:72px; padding:11px; }
  .tc-metric strong { font-size:21px; }
  .tc-panel,.card { border-radius:13px; }
  .card-header,.card-body { padding:11px; }
  .table-responsive { margin:0; }
  .tc-table { min-width:720px; }
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length { width:100%; margin:3px 0; text-align:left; }
  .dataTables_wrapper .dataTables_filter input { width:calc(100% - 58px); min-width:0; }
  .tc-dt-toolbar { align-items:stretch; }
  .tc-dt-toolbar .dataTables_filter { margin-left:0; }
  .tc-dt-date-range { width:100%; margin-left:0; flex-wrap:wrap; }
  .tc-dt-date-range input { min-width:0; flex:1; }
}

.form-control:focus,
.form-select:focus,
.selectize-input.focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.table-responsive,
.card-datatable {
  border-radius: 14px;
}

.card-datatable {
  padding: 18px 20px;
}

table.dataTable,
.table {
  color: var(--tc-ink-soft);
  border-collapse: separate;
  border-spacing: 0;
}

table.dataTable thead th,
.table thead th {
  padding: 13px 12px;
  color: #64748b;
  border-bottom: 1px solid #dbe3ed;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

table.dataTable tbody td,
.table tbody td {
  padding: 13px 12px;
  color: #334155;
  border-color: #edf2f7;
  vertical-align: middle;
}

table.dataTable tbody tr:hover,
.table tbody tr:hover {
  background: rgba(14, 165, 233, 0.035);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #dbe3ed;
  border-radius: 10px;
  background: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-buttons .dt-button {
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.2);
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.06);
}

.alert {
  border: 0;
  border-radius: 14px;
}

.badge {
  padding: 6px 9px;
  color: inherit;
  border-radius: 999px;
  font-weight: 750;
}

.accordion-button {
  color: var(--tc-ink);
  background: #f8fafc;
  box-shadow: none;
  font-weight: 750;
}

.accordion-button.bg-primary,
.accordion-button .bg-primary {
  color: var(--tc-ink);
  background: transparent;
}

/* Dashboard command bar */
.tc-command-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 22px 24px;
  color: #e0f2fe;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 15%, rgba(163, 230, 53, 0.17), transparent 14rem),
    linear-gradient(125deg, #081a2e, #0b2843 62%, #07314a);
  box-shadow: 0 20px 50px rgba(7, 17, 31, 0.18);
}

.tc-command-hero::after {
  position: absolute;
  right: -35px;
  bottom: -65px;
  width: 250px;
  height: 250px;
  content: "";
  border: 1px solid rgba(125, 211, 252, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(125, 211, 252, 0.035), 0 0 0 72px rgba(125, 211, 252, 0.02);
}

.tc-command-kicker {
  display: inline-flex;
  margin-bottom: 7px;
  color: #67e8f9;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tc-command-hero h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 780;
}

.tc-command-hero p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #91a4be;
  font-size: 13px;
}

.tc-command-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tc-command-actions .btn-outline-light {
  border-color: rgba(224, 242, 254, 0.2);
  background: rgba(224, 242, 254, 0.06);
}

.tc-refresh-meta {
  margin-top: 9px;
  color: #6f87a6;
  font-size: 10px;
}

#loaddynamic {
  max-width: none;
  padding: 0;
}

#loaddynamic > .row.gy-4 {
  row-gap: 18px;
}

#loaddynamic .daily-card {
  position: relative;
  min-height: 154px;
  height: 100%;
  overflow: hidden;
  border-color: rgba(14, 165, 233, 0.13);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 252, 0.96));
  box-shadow: 0 13px 30px rgba(15, 23, 42, 0.065);
}

#loaddynamic .daily-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  background: linear-gradient(to bottom, #38bdf8, #4ade80);
}

#loaddynamic .daily-card .card-header {
  padding: 14px 16px 8px 19px;
  color: #475569;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
}

#loaddynamic .daily-card .card-body {
  display: flex;
  padding: 3px 16px 14px 19px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

#loaddynamic .daily-card .card-body h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
}

#loaddynamic .daily-card .card-footer {
  padding: 8px 16px 8px 19px;
  border-top: 1px solid rgba(248, 113, 113, 0.12);
  background: rgba(248, 113, 113, 0.07);
  text-align: left;
}

#loaddynamic .daily-card .card-footer h2,
#loaddynamic .daily-card .card-footer h2 span {
  margin: 0;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

#loaddynamic .form-floating + .row .btn,
#loaddynamic form .btn {
  min-width: 120px;
}

.tc-dashboard-skeleton {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tc-dashboard-skeleton span {
  display: block;
  height: 140px;
  border-radius: 18px;
  background: linear-gradient(90deg, #e9eff5 25%, #f8fafc 40%, #e9eff5 65%);
  background-size: 400% 100%;
  animation: tc-shimmer 1.4s ease infinite;
}

@keyframes tc-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (min-width: 1200px) {
  .layout-menu-fixed .layout-page {
    padding-left: 286px;
  }

  .layout-navbar-fixed .layout-navbar {
    left: 286px;
  }
}

@media (max-width: 1199.98px) {
  .tc-sidebar {
    width: 286px;
  }

  .layout-navbar::before,
  .layout-navbar::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .layout-navbar {
    margin: 10px 12px 0;
    border-radius: 14px;
  }

  .container-xxl.container-p-y {
    padding: 16px 12px 24px;
  }

  .tc-command-hero {
    padding: 19px;
  }

  .tc-command-actions {
    margin-top: 18px;
  }

  .tc-command-actions .btn,
  .tc-command-actions form {
    width: 100%;
  }

  .tc-command-actions form .btn {
    width: 100%;
  }

  .tc-dashboard-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-datatable {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* Dispatch, final-pack register and manufacturing intelligence */
.tc-dispatch-hero,
.tc-report-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(125deg, #13293d 0%, #14526f 52%, #087f8c 100%);
  box-shadow: 0 18px 45px rgba(16, 63, 84, .22);
}

.tc-report-hero { background: linear-gradient(125deg, #172554 0%, #3730a3 55%, #0e7490 100%); }
.tc-dispatch-hero::after,
.tc-report-hero::after { content:""; position:absolute; width:220px; height:220px; right:-70px; top:-110px; border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none; }
.tc-dispatch-hero > *, .tc-report-hero > * { position:relative; z-index:1; }
.tc-eyebrow { margin-bottom:5px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.tc-dispatch-hero p, .tc-report-hero p { color:rgba(255,255,255,.76); }

.tc-metric-card { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid rgba(110,130,150,.15); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(20,40,60,.06); }
.tc-metric-card small { color:#64748b; font-weight:650; }
.tc-metric-card strong { font-size:1.6rem; line-height:1; color:#172033; }
.tc-metric-icon { align-self:flex-end; margin-bottom:-22px; font-size:1.45rem; }
.tc-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tc-detail-grid > div, .tc-assumption { display:flex; flex-direction:column; gap:5px; }
.tc-detail-grid span, .tc-assumption span { color:#64748b; font-size:.78rem; }
.tc-detail-grid strong, .tc-assumption strong { color:#1e293b; }
.tc-note { padding:12px 14px; border-radius:12px; background:#f5f8fb; color:#334155; white-space:pre-wrap; }
.tc-contact-list { display:grid; gap:14px; }
.tc-contact-list > div { display:flex; gap:11px; align-items:flex-start; color:#475569; }
.tc-contact-list i { color:#0e7490; font-size:1.2rem; }
.tc-dispatch-modal-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#e7edf3; }
.tc-dispatch-modal-summary > div { display:flex; flex-direction:column; padding:14px 16px; background:#f8fafc; }
.tc-dispatch-modal-summary span { color:#64748b; font-size:.72rem; }
.tc-dispatch-modal-summary strong { color:#172033; }
.tc-pack-id-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px; }
.tc-pack-id-grid > a, .tc-pack-id-grid > div { display:flex; align-items:center; gap:11px; min-width:0; padding:13px; border:1px solid #e3eaf1; border-radius:13px; color:#334155; background:#fff; }
.tc-pack-id-grid > a:hover { border-color:#0e7490; transform:translateY(-1px); box-shadow:0 8px 20px rgba(15,118,128,.1); }
.tc-pack-id-grid span { min-width:0; flex:1; display:flex; flex-direction:column; }
.tc-pack-id-grid strong, .tc-pack-id-grid small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-pack-id-grid small { color:#788597; }
.tc-pack-id-grid .is-broken { color:#991b1b; background:#fff7f7; border-color:#fecaca; }
.tc-pack-id-grid .tc-empty { grid-column:1/-1; justify-content:center; flex-direction:column; padding:30px; text-align:center; }

.tc-pack-identity { display:flex; flex-direction:column; min-width:145px; }
.tc-pack-identity strong { color:#172033; font-weight:800; }
.tc-pack-identity small { color:#718096; font-size:11px; }
.tc-row-actions { position:static; }
.tc-row-actions .dropdown-menu { min-width:205px; border:0; box-shadow:0 16px 42px rgba(15,23,42,.18); }
.tc-row-actions .dropdown-item { padding:9px 14px; }

.tc-oee-card { display:flex; align-items:center; gap:14px; padding:17px; border-radius:18px; border:1px solid rgba(100,116,139,.13); background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(246,249,252,.88)); box-shadow:0 10px 30px rgba(15,23,42,.06); }
.tc-oee-card > div:last-child { min-width:0; display:flex; flex-direction:column; }
.tc-oee-card span { color:#64748b; font-size:.78rem; font-weight:700; }
.tc-oee-card strong { color:#172033; font-size:1.75rem; line-height:1.15; }
.tc-oee-card small { overflow:hidden; color:#7c8797; text-overflow:ellipsis; white-space:nowrap; }
.tc-oee-ring { flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:currentColor; }
.tc-oee-ring i { color:#fff; font-size:1.45rem; }
.tc-insight-list { display:grid; gap:0; }
.tc-insight-list > div { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:14px 0; border-bottom:1px solid #edf1f5; }
.tc-insight-list > div:last-child { border-bottom:0; }
.tc-insight-list span { color:#64748b; }
.tc-insight-list strong { color:#172033; font-size:1.15rem; }
.tc-insight-list small { grid-column:1/-1; color:#8b96a7; }
.tc-assumption { padding:13px; height:100%; border-radius:13px; background:#f5f8fb; }
.tc-integrity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tc-integrity-grid > div { display:flex; flex-direction:column; padding:14px; border:1px solid #e8edf3; border-radius:14px; }
.tc-integrity-grid strong { color:#172033; font-size:1.45rem; }
.tc-integrity-grid span { color:#64748b; font-size:.75rem; }

@media (max-width: 767.98px) {
  .tc-dispatch-hero, .tc-report-hero { align-items:flex-start; flex-direction:column; padding:20px; }
  .tc-dispatch-hero .btn, .tc-report-hero .btn { flex:1 1 auto; }
  .tc-detail-grid { grid-template-columns:1fr; }
  .tc-integrity-grid { grid-template-columns:1fr 1fr; }
  .tc-dispatch-modal-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tc-pack-id-grid { grid-template-columns:1fr; }
  .tc-oee-card { padding:14px; }
  .tc-oee-ring { display:none; }
}

@media print {
  .layout-menu, .layout-navbar, .tc-report-filter, .modal, .btn, footer { display:none; }
  .layout-page, .content-wrapper { padding:0; margin:0; }
  .card, .tc-oee-card { break-inside:avoid; box-shadow:none; }
}