: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;}

/* =====================================================
   v3 - Order statuses (new workflow)
   ===================================================== */
.badge-status-Waiting-for-Gate-Pass{background:#0aa2c0;}
.badge-status-Payment-Pending{background:#d63384;}
.badge-status-Payment-Completed{background:#198754;}
.badge-status-Work-Completed{background:#0d1b6b;}
.badge-status-Order-Finished{background:#0d1b6b;}
.status-stepper{display:flex;gap:0;overflow-x:auto;padding-bottom:.25rem;}
.status-stepper .step{flex:1;min-width:88px;text-align:center;position:relative;}
.status-stepper .step::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:3px;background:#e5e8f0;z-index:0;}
.status-stepper .step:first-child::before{display:none;}
.status-stepper .step.done::before,.status-stepper .step.current::before{background:var(--tf-blue);}
.status-stepper .dot{width:30px;height:30px;border-radius:50%;margin:0 auto .3rem;display:flex;align-items:center;justify-content:center;
  background:#e5e8f0;color:#6c757d;font-size:.8rem;font-weight:700;position:relative;z-index:1;}
.status-stepper .step.done .dot{background:var(--tf-blue);color:#fff;}
.status-stepper .step.current .dot{background:var(--tf-orange);color:#fff;box-shadow:0 0 0 4px rgba(247,148,30,.2);}
.status-stepper .lbl{font-size:.72rem;line-height:1.15;color:#6c757d;}
.status-stepper .step.current .lbl{color:#1c2333;font-weight:700;}

/* =====================================================
   Style codes (RMD / Ready-made)
   ===================================================== */
.code-chip{display:inline-block;font-size:.7rem;font-weight:600;padding:.12rem .45rem;border-radius:.3rem;margin:0 .2rem .1rem 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;vertical-align:middle;}
.code-rmd{background:#e7f1fd;color:#0b5aa6;border:1px solid #c5dcf6;}
.code-rm{background:#fff2e2;color:#9a5300;border:1px solid #f6d9b3;}

/* =====================================================
   Admin-only price & values (production)
   ===================================================== */
.admin-only-box{background:#f5f5f7;border:1px dashed #adb5bd;border-radius:.4rem;padding:.15rem .35rem;}
.value-strip{display:flex;flex-wrap:wrap;gap:.5rem;}
.value-strip > div{background:#f8f9fc;border:1px solid #e9ecf3;border-radius:.45rem;padding:.35rem .6rem;display:flex;flex-direction:column;min-width:140px;}
.value-strip > div span{font-size:.7rem;color:#6c757d;}
.value-strip > div strong{font-size:.92rem;}
.admin-summary{border-left:4px solid #212529;}

/* =====================================================
   Finance
   ===================================================== */
.fin-box{background:#f8f9fc;border:1px solid #e9ecf3;border-radius:.6rem;padding:.75rem;height:100%;}
.fin-box.income{background:#effaf4;border-color:#c9ecd9;}
.fin-box.expense{background:#fdf1f1;border-color:#f3cfcf;}
.fin-box.profit{background:#eaf4fe;border-color:#c5dcf6;}
.fin-box.loss{background:#fff4e5;border-color:#f6d9b3;color:#a3231f;}
.finance-tabs .nav-link{font-size:.88rem;color:#495057;}
.finance-tabs .nav-link.active{color:var(--tf-navy);font-weight:600;}
.mini-bar{height:7px;border-radius:4px;margin:2px 0;min-width:2px;}
.mini-bar.income,.legend.income{background:#22b573;}
.mini-bar.expense,.legend.expense{background:#e05555;}
.legend{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;}

/* =====================================================
   Dashboard / branding
   ===================================================== */
.home-hero{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  background:linear-gradient(120deg,#fff 55%,#eef4fd);}
.home-logo{max-height:70px;max-width:220px;object-fit:contain;}
.mini-stat{background:#fff;border:1px solid #e9ecf3;border-radius:.6rem;padding:.8rem 1rem;display:flex;gap:.8rem;align-items:center;color:#1c2333;}
.mini-stat i{font-size:1.4rem;color:var(--tf-blue);width:28px;text-align:center;}
.mini-stat:hover{border-color:var(--tf-blue);}
.logo-preview{background:repeating-conic-gradient(#f1f3f7 0% 25%,#fff 0% 50%) 50%/16px 16px;border:1px solid #e9ecf3;border-radius:.5rem;
  padding:1rem;text-align:center;}
.logo-preview img{max-height:90px;max-width:100%;object-fit:contain;}
.tf-sidebar .brand{justify-content:center;background:rgba(255,255,255,.96);}
.tf-sidebar .brand img{height:auto;max-height:44px;max-width:200px;object-fit:contain;}
.tf-sidebar{display:flex;flex-direction:column;overflow-y:auto;max-height:100vh;}
.tf-sidebar-credit{margin-top:auto;padding:.9rem 1rem;font-size:.7rem;line-height:1.35;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.1);}
.tf-sidebar-credit a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;}
.tf-footer{border-top:1px solid #e5e8f0;margin-top:1rem;}
.tf-credit-link{color:var(--tf-blue);text-decoration:none;font-weight:600;}
.tf-credit-link:hover{text-decoration:underline;}
.login-wrap{flex-direction:column;gap:1rem;padding:1rem;}
.login-logo{max-height:70px;max-width:260px;object-fit:contain;}
.login-footer{color:rgba(255,255,255,.8);text-align:center;}
.login-footer a{color:#fff;}

/* =====================================================
   Print (gate pass + finance reports)
   ===================================================== */
.print-header{display:none;}
.print-page{background:#fff;}
.print-sheet{max-width:820px;margin:1.5rem auto;padding:2rem;background:#fff;border:1px solid #e5e8f0;}
.print-logo{max-height:60px;max-width:180px;object-fit:contain;}
.sign-line{border-top:1px solid #333;padding-top:.3rem;margin:0 1rem;}
@media print{
  .tf-sidebar,.tf-topbar,.no-print,.alert,.btn,.modal{display:none !important;}
  .tf-main{margin-left:0 !important;}
  .tf-content{padding:0 !important;}
  .tf-card{border:none !important;box-shadow:none !important;}
  .print-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;border-bottom:1px solid #999;padding-bottom:.5rem;}
  .print-sheet{border:none;margin:0;padding:0;max-width:none;}
  body{background:#fff !important;}
  a{color:inherit !important;text-decoration:none !important;}
}
.admin-summary table{font-size:.84rem;}
.admin-summary td,.admin-summary th{white-space:nowrap;}