/* =====================================================================
   VASTRA ERP — THEME
   ---------------------------------------------------------------------
   Single source of truth for colors, fonts, sidebar, topbar and shared
   components. Edit the :root block below to re-theme the ENTIRE app —
   sidebar, header, buttons, badges, charts — from this one place.
   Every page links this file, so a change here applies everywhere.
   ===================================================================== */

:root{
  /* ---- Brand colors — change these to re-theme the whole app ---- */
  --indigo-deep:#1E3A56;     /* sidebar / header base */
  --indigo-deeper:#152C42;   /* sidebar gradient end / hover */
  --indigo-darker:#0F2233;   /* darkest shade, text-on-gold */
  --gold:#C69B3C;            /* primary accent / CTA */
  --gold-soft:#E4C77A;       /* accent hover / highlights */

  /* ---- Neutrals ---- */
  --ink:#2B2D33;             /* primary text */
  --slate:#6C7686;           /* secondary text */
  --fabric:#F6F4EF;          /* app background */
  --card:#FFFFFF;            /* card / panel background */
  --line:#E7E2D5;            /* borders */
  --stitch:#DCD4C4;          /* dashed divider color */

  /* ---- Status colors ---- */
  --success:#4F7A64;
  --warning:#D98E2B;
  --danger:#B5503A;
  --info:#3D7A82;

  /* ---- Module thread-colors (used for KPI accents, charts, tags) ---- */
  --purchase-thread:#3D6EA8;
  --production-thread:#C69B3C;
  --sales-thread:#4F7A64;
  --accounts-thread:#3D7A82;

  /* ---- Layout ---- */
  --sidebar-w:264px;
}

*{ font-family:'Inter',sans-serif; box-sizing:border-box; }
h1,h2,h3,h4,.brand{ font-family:'Sora',sans-serif; }
.mono{ font-family:'JetBrains Mono',monospace; }
body{ background:var(--fabric); color:var(--ink); margin:0; }
a{ text-decoration:none; }

/* ===================== Sidebar ===================== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:linear-gradient(185deg, var(--indigo-deep), var(--indigo-darker) 90%);
  display:flex; flex-direction:column; z-index:1000;
}
.sb-brand{ display:flex; align-items:center; gap:12px; padding:20px 20px 16px; }
.sb-mark{
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(155deg,var(--gold-soft),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--indigo-darker); font-family:'Sora',sans-serif;
}
.sb-brand .name{ color:#F7F3E8; font-weight:700; font-size:16px; letter-spacing:1.5px; }
.sb-brand .name small{
  display:block; font-family:'Inter',sans-serif; font-weight:400;
  font-size:10px; letter-spacing:.5px; color:#93A2AF;
}
.sb-scroll{ flex:1; overflow-y:auto; padding:6px 12px 20px; }
.sb-group-label{
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:#6E8091; padding:16px 12px 6px;
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer;
}
.sb-group-label:hover{ color:#93A2AF; }
.sb-caret{ font-size:10px; transition:transform .18s ease; }
.sb-caret.collapsed{ transform:rotate(-90deg); }
.sb-group-body{ display:flex; flex-direction:column; }
.sb-subgroup-label{
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:#8393A2; padding:10px 12px 4px 22px;
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer;
}
.sb-subgroup-label:hover{ color:#B0BCC7; }
.sb-subgroup-body{ display:flex; flex-direction:column; }
.sb-subgroup-body .nav-link{ padding-left:22px; }
.nav-link{
  display:flex; align-items:center; gap:11px; color:#C7D2DB;
  font-size:13.6px; font-weight:500; padding:9px 12px; border-radius:8px;
  margin-bottom:2px; position:relative;
}
.nav-link i{ font-size:15px; width:18px; text-align:center; color:#8FA1B0; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background:rgba(255,255,255,.08); color:#fff; }
.nav-link.active::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; border-radius:2px; background:var(--gold);
}
.nav-link.active i{ color:var(--gold-soft); }
.sb-foot{
  padding:14px 20px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
.sb-foot .av{
  width:32px; height:32px; border-radius:8px; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--indigo-darker); font-size:13px;
}
.sb-foot .who{ color:#EDE7D8; font-size:12.5px; font-weight:600; }
.sb-foot .role{ color:#8FA1B0; font-size:11px; }

/* ---- Hide / unhide (full-screen content) ----
   Toggled via the topbar's sidebar-toggle-btn. `body.sidebar-hidden` slides
   the sidebar off-canvas and lets .main reclaim the full width. The class
   is applied synchronously (see layouts/main.php, right after <body>) so
   there's no flash of the sidebar on page load when it was left hidden. */
.sidebar{ transition:transform .2s ease; }
.main{ transition:margin-left .2s ease; }
body.sidebar-hidden .sidebar{ transform:translateX(-100%); }
body.sidebar-hidden .main{ margin-left:0; }

/* ===================== Topbar ===================== */
.main{ margin-left:var(--sidebar-w); }
.topbar{
  height:64px; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; position:sticky; top:0; z-index:900;
}
.sidebar-toggle-btn{ margin-right:6px; }
.sidebar-toggle-btn i{ transition:transform .2s ease; }
body.sidebar-hidden .sidebar-toggle-btn i{ transform:rotate(180deg); }
.branch-pill{
  display:flex; align-items:center; gap:8px; background:var(--fabric);
  border:1px solid var(--line); padding:7px 14px; border-radius:20px;
  font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
}
.branch-pill i{ color:var(--gold); }
.search-box{ position:relative; width:340px; }
.search-box input{
  width:100%; border:1px solid var(--line); background:var(--fabric);
  border-radius:8px; padding:8px 14px 8px 36px; font-size:13.5px;
}
.search-box i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--slate); font-size:14px; }
.top-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--fabric); border:1px solid var(--line); color:var(--ink); cursor:pointer;
}
.icon-btn .dot{
  position:absolute; top:6px; right:7px; width:7px; height:7px;
  border-radius:50%; background:var(--danger); border:1.5px solid var(--card);
}
.user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.user-chip .av{
  width:34px; height:34px; border-radius:9px; background:var(--indigo-deep);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.user-chip .meta{ line-height:1.2; }
.user-chip .meta .nm{ font-size:13px; font-weight:600; }
.user-chip .meta .rl{ font-size:11px; color:var(--slate); }

.user-chip-wrap{ position:relative; }
.user-dropdown-menu{
  min-width:220px; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,34,51,.12); padding:0; overflow:hidden; margin-top:10px;
}
.user-dropdown-menu .ud-head{ padding:14px 16px; border-bottom:1px dashed var(--stitch); }
.user-dropdown-menu .ud-head .nm{ font-size:13.5px; font-weight:600; color:var(--ink); }
.user-dropdown-menu .ud-head .rl{ font-size:11.5px; color:var(--slate); margin-top:2px; }
.user-dropdown-menu .dropdown-divider{ margin:0; border-color:var(--stitch); border-style:dashed; }
.user-dropdown-menu .ud-item{
  display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13px; color:var(--ink);
}
.user-dropdown-menu .ud-item i{ font-size:15px; color:var(--slate); width:16px; }
.user-dropdown-menu .ud-item:hover{ background:var(--fabric); color:var(--ink); }
.user-dropdown-menu .ud-danger{ color:var(--danger); font-weight:600; }
.user-dropdown-menu .ud-danger i{ color:var(--danger); }
.user-dropdown-menu .ud-danger:hover{ background:#F6E7E2; color:var(--danger); }

/* ===================== Topbar dropdowns: branch / notifications / help ===================== */
.tb-dropdown-menu{
  min-width:250px; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,34,51,.12); padding:0; overflow:hidden; margin-top:10px;
}
.tb-dd-head{ padding:12px 16px; border-bottom:1px dashed var(--stitch); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--slate); }
.tb-dd-empty{ padding:16px; font-size:12.5px; color:var(--slate); text-align:center; }
.tb-dd-item{ display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13px; color:var(--ink); }
.tb-dd-item i{ font-size:15px; color:var(--slate); width:16px; }
.tb-dd-item:hover{ background:var(--fabric); color:var(--ink); }
.tb-dd-item.active{ background:#FBF6E9; color:var(--indigo-deep); font-weight:600; }
.tb-dd-check{ margin-left:auto; color:var(--gold) !important; }
.tb-dd-foot{ padding:9px 16px; border-top:1px dashed var(--stitch); text-align:center; }
.tb-dd-foot a{ font-size:12px; font-weight:600; color:var(--indigo-deep); }

.tb-notif-menu{ min-width:300px; }
.tb-notif-item{ display:flex; align-items:flex-start; gap:11px; padding:11px 16px; border-bottom:1px dashed var(--stitch); }
.tb-notif-item:last-of-type{ border-bottom:none; }
.tb-notif-ic{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.tb-notif-warning{ background:#FBEFDD; color:var(--warning); }
.tb-notif-info{ background:#E3EEEF; color:var(--info); }
.tb-notif-success{ background:#E7F0EA; color:var(--success); }
.tb-notif-title{ font-size:12.8px; font-weight:600; color:var(--ink); line-height:1.35; }
.tb-notif-meta{ font-size:11px; color:var(--slate); margin-top:2px; }

/* ===================== Page chrome ===================== */
.content{ padding:26px; }
.crumb{ font-size:12.5px; color:var(--slate); margin-bottom:4px; }
.crumb a{ color:var(--slate); }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.page-head h1{ font-size:23px; font-weight:700; margin:0; }
.page-head .sub{ font-size:13px; color:var(--slate); margin-top:3px; }

/* ===================== Buttons ===================== */
.btn-gold{
  background:var(--gold); border:none; color:var(--indigo-darker);
  font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:8px;
}
.btn-gold:hover{ background:var(--gold-soft); color:var(--indigo-darker); }
.btn-outline-line{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:8px;
}

/* ===================== Form controls (shared by every form in the app) ===================== */
.form-control, .form-select{
  border-radius:9px; border:1px solid var(--line); padding:9px 13px; font-size:13.8px;
  background:#fff; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,155,60,.15); outline:none;
}
.form-control::placeholder{ color:#A9AFB8; }
.form-control:disabled, .form-select:disabled{ background:var(--fabric); color:var(--slate); }
.form-label{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; display:inline-block; }
.form-text{ font-size:11.5px; color:var(--slate); margin-top:4px; }
.form-check-input{ border-color:var(--line); }
.form-check-input:checked{ background-color:var(--gold); border-color:var(--gold); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(198,155,60,.15); border-color:var(--gold); }

/* ===================== F-Construction rows (Fabric Creation) =====================
   Deliberately not a <table> -- a table forces every column to sit side by
   side and overflows into a horizontal scrollbar as soon as the panel gets
   narrower than the sum of its columns. flex-wrap lets each field wrap onto
   a new line instead, so the card never needs to scroll sideways. */
.fc-row{
  display:flex; gap:8px 18px; padding:12px 0; border-bottom:1px dashed var(--stitch);
}
.fc-row.fc-row-last{ border-bottom:none; padding-bottom:2px; }
.fc-row-label{
  width:64px; flex-shrink:0; font-weight:700; font-size:13px; color:var(--ink);
  padding-top:21px;
}
.fc-fields{ display:flex; flex-wrap:wrap; gap:10px 16px; flex:1; }
.fc-field{ display:flex; flex-direction:column; gap:4px; width:96px; flex-shrink:0; }
.fc-field label{
  font-size:10px; letter-spacing:.4px; text-transform:uppercase;
  font-weight:700; color:var(--slate);
}
.fc-field .form-control, .fc-field .form-select{ font-size:13.5px; padding:.3rem .5rem; }

/* ===================== Panels ===================== */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:12px; }
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px dashed var(--stitch);
}
.panel-head h3{ font-size:15px; font-weight:700; margin:0; }
.panel-head a{ font-size:12.5px; color:var(--indigo-deep); font-weight:600; }
.panel-body{ padding:18px; }

/* ===================== Tables ===================== */
table.tbl{ width:100%; border-collapse:collapse; font-size:13.3px; }
table.tbl thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--slate); padding:11px 18px; border-bottom:1px solid var(--line);
  background:#FBFAF7; white-space:nowrap;
}
table.tbl td{ padding:13px 18px; vertical-align:middle; }
/* Row divider is drawn as one continuous background on <tr>, not a
   border-bottom on each <td> -- with border-collapse:collapse a dashed
   border restarts its dash pattern at every cell boundary, so the line
   used to look cut/misaligned wherever two columns met. A single
   background image spans the full row width instead. */
table.tbl tbody tr{
  background-image: linear-gradient(to right, var(--stitch) 50%, transparent 0%);
  background-position: bottom;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
table.tbl tbody tr:hover{ background-color:#FCFBF8; }
table.tbl tbody tr:last-child{ background-image:none; }

/* ===================== Badges & tags ===================== */
.badge-soft{ padding:4px 11px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-success{ background:#E7F0EA; color:var(--success); }
.badge-warning{ background:#FBEFDD; color:var(--warning); }
.badge-danger{ background:#F6E7E2; color:var(--danger); }
.badge-info{ background:#E3EEEF; color:var(--info); }
.cat-tag{
  font-size:11.5px; padding:3px 10px; border-radius:6px; background:var(--fabric);
  border:1px solid var(--line); color:var(--ink); font-weight:500;
}

/* ===================== Row actions (used in every list screen) ===================== */
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-actions button{
  width:30px; height:30px; border-radius:7px; border:1px solid var(--line);
  background:#fff; color:var(--slate); display:flex; align-items:center; justify-content:center; font-size:13px;
}
.row-actions button:hover{ background:var(--fabric); color:var(--ink); }
.row-actions button.danger:hover{ color:var(--danger); border-color:var(--danger); }

/* ===================== Pagination (used in every list screen) ===================== */
.table-foot{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.table-foot .info{ font-size:12.5px; color:var(--slate); }
.pager{ display:flex; gap:6px; }
.pager button{ width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:#fff; font-size:12.5px; color:var(--ink); }
/* ===================== SweetAlert2 — Atlas ERP theme ===================== */
.atlas-swal{
  border-radius:16px !important; padding:30px 28px 26px !important;
  font-family:'Inter',sans-serif; box-shadow:0 1px 2px rgba(15,34,51,.03), 0 20px 48px rgba(30,58,86,.16) !important;
}
.atlas-swal .swal2-title{
  font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:var(--ink); padding:0; margin-top:18px;
}
.atlas-swal .swal2-html-container{
  font-size:13.8px; color:var(--slate); margin-top:6px; line-height:1.55;
}
.atlas-swal .swal2-actions{ gap:10px; margin-top:24px; }
.atlas-swal .swal2-timer-progress-bar{ background:var(--gold); }

.atlas-swal-confirm{
  background:var(--gold) !important; color:var(--indigo-darker) !important;
  font-weight:700 !important; font-size:13.5px !important; padding:10px 20px !important;
  border-radius:8px !important; border:none !important; box-shadow:none !important;
}
.atlas-swal-confirm:hover{ background:var(--gold-soft) !important; }
.atlas-swal-confirm.is-danger{ background:var(--danger) !important; color:#fff !important; }
.atlas-swal-confirm.is-danger:hover{ background:#9C4530 !important; }

.atlas-swal-cancel{
  background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important;
  font-weight:600 !important; font-size:13.5px !important; padding:10px 18px !important;
  border-radius:8px !important; box-shadow:none !important;
}
.atlas-swal-cancel:hover{ background:var(--fabric) !important; }

.atlas-swal .swal2-icon{ border-width:2.5px; }
.atlas-swal .swal2-icon.swal2-warning{ border-color:var(--gold); color:var(--gold); }
.atlas-swal .swal2-icon.swal2-error{ border-color:var(--danger); color:var(--danger); }
.atlas-swal .swal2-icon.swal2-info{ border-color:var(--info); color:var(--info); }
.atlas-swal .swal2-icon.swal2-question{ border-color:var(--indigo-deep); color:var(--indigo-deep); }
.atlas-swal .swal2-icon.swal2-success{ border-color:var(--success); color:var(--success); }
.atlas-swal .swal2-icon.swal2-success [class^="swal2-success-line"]{ background-color:var(--success); }
.atlas-swal .swal2-icon.swal2-success .swal2-success-ring{ border-color:var(--success); }

.atlas-swal-toast{
  border-radius:10px !important; box-shadow:0 8px 24px rgba(15,34,51,.12) !important;
  border:1px solid var(--line) !important; padding:10px 16px !important;
}
.atlas-swal-toast .swal2-title{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; margin:0;
}
.atlas-swal-toast .swal2-timer-progress-bar{ background:var(--gold); }

/* ===================== Select2 — Atlas ERP theme ===================== */
.select2-container--default .select2-selection--single{
  border-radius:9px !important; border:1px solid var(--line) !important; height:auto !important;
  padding:9px 13px !important; background:#fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0 !important; line-height:1.4 !important; color:var(--ink); font-size:13.8px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#A9AFB8; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100% !important; top:0 !important; right:10px !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(198,155,60,.15);
}
.select2-dropdown{ border-radius:9px; border:1px solid var(--line); overflow:hidden; font-size:13.8px; }
.select2-search--dropdown{ padding:8px; }
.select2-search--dropdown .select2-search__field{
  border-radius:7px; border:1px solid var(--line); padding:7px 10px; font-size:13px; outline:none;
}
.select2-results__option--highlighted[aria-selected]{ background:var(--gold) !important; color:var(--indigo-darker) !important; }
.select2-container--disabled .select2-selection--single{ background:var(--fabric) !important; color:var(--slate); }

.select-with-add{ display:flex; gap:8px; align-items:flex-start; }
.select-with-add .select2-container{ flex:1; min-width:0; }
.btn-quick-add{
  flex-shrink:0; width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:17px;
}
.btn-quick-add:hover{ background:var(--fabric); border-color:var(--gold); }

.atlas-swal-input{
  border-radius:8px !important; border:1px solid var(--line) !important; font-size:13.8px !important;
  padding:10px 13px !important; box-shadow:none !important;
}
.atlas-swal-input:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(198,155,60,.15) !important; }