:root{
  --tf-navy:#0d1b6b;
  --tf-blue:#1e8fe1;
  --tf-orange:#f7941e;
  --tf-bg:#f4f6fb;
}
body{
  background:var(--tf-bg);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
.tf-sidebar{
  background:linear-gradient(180deg,var(--tf-navy) 0%,#142a8c 100%);
  min-height:100vh;
  width:250px;
  position:fixed;
  top:0;left:0;
  z-index:1030;
  transition:transform .25s ease;
}
.tf-sidebar .brand{
  padding:1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.tf-sidebar .brand img{height:36px;}
.tf-sidebar .brand span{color:#fff;font-weight:700;font-size:1.15rem;}
.tf-sidebar a.nav-link{
  color:rgba(255,255,255,.75);
  padding:.65rem 1.1rem;
  font-size:.92rem;
  border-left:3px solid transparent;
}
.tf-sidebar a.nav-link:hover,
.tf-sidebar a.nav-link.active{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-left:3px solid var(--tf-orange);
}
.tf-sidebar a.nav-link i{width:20px;display:inline-block;}
.tf-main{
  margin-left:250px;
  padding:0;
  min-height:100vh;
}
.tf-topbar{
  background:#fff;
  border-bottom:1px solid #e5e8f0;
  padding:.7rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.tf-content{padding:1.25rem;}
.tf-card{
  background:#fff;
  border-radius:.6rem;
  border:1px solid #e9ecf3;
  box-shadow:0 1px 3px rgba(20,30,80,.05);
}
.stat-card{
  border-radius:.6rem;
  padding:1.1rem;
  color:#fff;
}
.stat-card.blue{background:linear-gradient(135deg,#1e8fe1,#0d1b6b);}
.stat-card.orange{background:linear-gradient(135deg,#f7941e,#d9720b);}
.stat-card.navy{background:linear-gradient(135deg,#142a8c,#0d1b6b);}
.stat-card.green{background:linear-gradient(135deg,#22b573,#0f7a4b);}
.badge-status-Pending{background:#f7941e;}
.badge-status-Sent-to-Production{background:#1e8fe1;}
.badge-status-Packing{background:#7b2cf7;}
.badge-status-Order-Finished{background:#22b573;}
.btn-primary{background:var(--tf-blue);border-color:var(--tf-blue);}
.btn-primary:hover{background:var(--tf-navy);border-color:var(--tf-navy);}
.tf-toggle-btn{display:none;}
@media (max-width: 991.98px){
  .tf-sidebar{transform:translateX(-100%);}
  .tf-sidebar.show{transform:translateX(0);}
  .tf-main{margin-left:0;}
  .tf-toggle-btn{display:inline-block;}
}
table.table thead{background:#f4f6fb;}
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--tf-navy),var(--tf-blue));
}
.login-card{
  background:#fff;
  border-radius:1rem;
  padding:2.5rem;
  width:100%;
  max-width:400px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

/* =====================================================
   Select2 - minimal Bootstrap-matching skin
   ("select 2 min css" - lightweight override so every
   dropdown gets search + consistent 38px height)
   ===================================================== */
.select2-container{width:100% !important;}
.select2-container .select2-selection--single{
  height:38px;
  border:1px solid #ced4da;
  border-radius:.375rem;
  display:flex;
  align-items:center;
  padding:0 .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px;
  padding-left:.5rem;
  color:#212529;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px;right:6px;}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--tf-blue);
  box-shadow:0 0 0 .2rem rgba(30,143,225,.15);
}
.select2-dropdown{border-color:#ced4da;}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--tf-blue);
}
.select2-search--dropdown .select2-search__field{
  border:1px solid #ced4da;border-radius:.3rem;padding:.3rem .5rem;
}
.form-select-sm + .select2-container .select2-selection--single{height:31px;}
.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered{line-height:29px;font-size:.875rem;}
.form-select-sm + .select2-container .select2-selection--single .select2-selection__arrow{height:29px;}
select.no-select2 + .select2-container{display:none !important;}
/* Safety net on top of the JS dropdownParent fix: keep the open dropdown
   panel above Bootstrap's modal (z-index ~1055) and modal backdrop so it's
   never rendered underneath/behind a modal. */
.select2-container--open{z-index:2000;}
.select2-dropdown{z-index:2000;}
/* Select2 doesn't understand Bootstrap's .input-group border-joining, so a
   select2-ified select never looked right paired with a button in an
   .input-group. Selects are no longer put in .input-group for this reason
   (see order_form.php) - this rule is kept only as a fallback in case one
   shows up elsewhere, so it at least matches the height of its sibling button
   instead of looking visually broken. */
.input-group .select2-container .select2-selection--single{height:38px;}

/* =====================================================
   Accessory checkboxes (order lines)
   ===================================================== */
.accessory-check-group{display:flex;flex-wrap:wrap;gap:.9rem;}
.accessory-check-group .form-check{margin-bottom:0;}

/* =====================================================
   Serial number picker (inventory stock-in)
   ===================================================== */
.serial-input-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.4rem;}
.serial-input-row input{flex:1;}

/* =====================================================
   Production dashboard - order cards
   ===================================================== */
.prod-order-card{
  background:#fff;
  border:1px solid #e9ecf3;
  border-radius:.75rem;
  padding:1.25rem;
  box-shadow:0 1px 3px rgba(20,30,80,.05);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.prod-order-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(20,30,80,.12);
  border-color:var(--tf-blue);
}
.prod-order-card .order-no{font-size:1.05rem;font-weight:700;color:var(--tf-navy);}
.prod-order-card .customer-name{font-size:1.4rem;font-weight:700;color:#1c2333;}
.prod-rate-ring{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;color:#fff;
  background:conic-gradient(var(--tf-blue) calc(var(--rate,0) * 1%), #e9ecf3 0);
}
.prod-rate-ring span{
  width:48px;height:48px;border-radius:50%;background:#fff;color:var(--tf-navy);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
}

/* =====================================================
   Hourly production grid (target vs completed, like a
   spreadsheet: one column per working hour)
   ===================================================== */
.hour-grid-wrap{overflow-x:auto;}
table.hour-grid{border-collapse:collapse;min-width:100%;}
table.hour-grid th,table.hour-grid td{
  border:1px solid #e5e8f0;
  padding:.4rem .5rem;
  text-align:center;
  white-space:nowrap;
}
table.hour-grid thead th{background:#f4f6fb;font-weight:600;}
table.hour-grid td.row-label{
  text-align:left;font-weight:600;background:#fbfcfe;position:sticky;left:0;
}
table.hour-grid input.hour-input{
  width:64px;border:1px solid #dfe3ee;border-radius:.3rem;padding:.25rem;text-align:center;
}
table.hour-grid tr.completed-row input.hour-input{background:#f2fbf6;}
table.hour-grid tr.target-row input.hour-input{background:#f2f7fd;}
.rate-badge{font-weight:700;padding:.35rem .7rem;border-radius:1rem;}
.rate-badge.good{background:#d7f5e5;color:#0f7a4b;}
.rate-badge.warn{background:#ffeccb;color:#a35b00;}
.rate-badge.bad{background:#fbdada;color:#a3231f;}