:root{
  /* Brand accent stays constant across every theme so the app is always
     recognizably "XPi" no matter which appearance is picked. */
  --xpi-accent:#f59e0b;
  --xpi-sidebar-w:250px;

  /* Light theme (default) */
  --xpi-primary:#0f766e;
  --xpi-primary-dark:#134e4a;
  --xpi-primary-light:#14b8a6;
  --xpi-bg:#f4f7f6;
  --xpi-surface:#ffffff;
  --xpi-surface-alt:#eef2f1;
  --xpi-text:#1f2937;
  --xpi-text-muted:#6b7280;
  --xpi-border:#e5e7eb;
  --xpi-shadow:rgba(15,23,42,.08);
  --xpi-shadow-lg:rgba(15,23,42,.16);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"]{
  --xpi-primary:#14b8a6;
  --xpi-primary-dark:#0d9488;
  --xpi-primary-light:#2dd4bf;
  --xpi-accent:#fbbf24;
  --xpi-bg:#0f1720;
  --xpi-surface:#182430;
  --xpi-surface-alt:#1f2e3c;
  --xpi-text:#e5e7eb;
  --xpi-text-muted:#94a3b8;
  --xpi-border:#2a3a4a;
  --xpi-shadow:rgba(0,0,0,.35);
  --xpi-shadow-lg:rgba(0,0,0,.55);
}

/* ---------- Ocean theme (alternate light) ---------- */
[data-theme="ocean"]{
  --xpi-primary:#2563eb;
  --xpi-primary-dark:#1e3a8a;
  --xpi-primary-light:#3b82f6;
  --xpi-bg:#eef4fb;
  --xpi-surface:#ffffff;
  --xpi-surface-alt:#e6eefc;
  --xpi-text:#1e293b;
  --xpi-text-muted:#64748b;
  --xpi-border:#dbe4f3;
  --xpi-shadow:rgba(30,64,175,.10);
  --xpi-shadow-lg:rgba(30,64,175,.18);
}

*{scrollbar-color:var(--xpi-text-muted) transparent;}
body{
  background:var(--xpi-bg);
  color:var(--xpi-text);
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  transition:background-color .25s ease,color .25s ease;
}

/* ---------- Layout ---------- */
.xpi-wrapper{display:flex;min-height:100vh;}
.xpi-sidebar{width:var(--xpi-sidebar-w);background:linear-gradient(180deg,var(--xpi-primary-dark),var(--xpi-primary));color:#fff;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:1040;transition:transform .25s ease,background .25s ease;}
.xpi-sidebar .brand{padding:1rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.15);}
.xpi-sidebar .brand img{height:36px;}
.xpi-sidebar .brand span{font-weight:700;font-size:.95rem;line-height:1.1;}
.xpi-sidebar .nav-link{color:#cbd5e1;padding:.55rem 1rem .55rem 1.15rem;font-size:.88rem;border-left:3px solid transparent;transition:background-color .15s ease,color .15s ease;}
.xpi-sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.xpi-sidebar .nav-link.active{background:rgba(255,255,255,.14);border-left-color:var(--xpi-accent);color:#fff;font-weight:600;}
.xpi-sidebar .nav-header{margin-top:.35rem;padding:.6rem 1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--xpi-accent);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;background:rgba(0,0,0,.12);border:0;border-top:1px solid rgba(255,255,255,.1);width:100%;text-align:left;}
.xpi-sidebar .nav-header:hover{color:#fde68a;background:rgba(0,0,0,.2);}
.xpi-sidebar .nav-header .nav-header-chevron{transition:transform .2s ease;font-size:.7rem;color:inherit;}
.xpi-sidebar .nav-header[aria-expanded="false"] .nav-header-chevron{transform:rotate(-90deg);}
.xpi-sidebar .nav-group-items{padding:0;margin:0;}
.xpi-content{margin-left:var(--xpi-sidebar-w);flex-grow:1;min-width:0;}
.xpi-topbar{background:var(--xpi-surface);border-bottom:1px solid var(--xpi-border);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1020;transition:background-color .25s ease,border-color .25s ease;}
.xpi-main{padding:1.25rem;}

@media (max-width:991.98px){
  .xpi-sidebar{transform:translateX(-100%);}
  .xpi-sidebar.show{transform:translateX(0);}
  .xpi-content{margin-left:0;}
  .xpi-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1030;display:none;}
  .xpi-backdrop.show{display:block;}
}

/* ---------- Responsive forms & tables (phones/tablets) ---------- */
/* Every scrollable table wrapper gets smoother touch scrolling and a subtle
   edge fade so it's obvious there's more content off-screen. */
.table-responsive{-webkit-overflow-scrolling:touch;}

@media (max-width:991.98px){
  .xpi-main{padding:1rem;}
  /* Bootstrap tables already shrink text a little; give a touch more room
     on tablets/phones so more columns are visible before scrolling kicks in. */
  .table td,.table th{padding:.5rem .6rem;}
}

@media (max-width:575.98px){
  .xpi-main{padding:.75rem;}
  .table td,.table th{font-size:.82rem;padding:.45rem .5rem;}
  .kpi-card .kpi-value{font-size:1.35rem;}
  .fo-total{font-size:1.4rem !important;}

  /* Bootstrap's bare col-N classes (col-6, col-4, etc., with no sm/md/lg
     prefix) stay a fixed % width at every screen size. On a phone that
     often squeezes two form fields side-by-side into ~150px each and
     makes them hard to tap/read. Force those to stack full-width below
     576px; anything already using col-sm-*/col-md-*/col-lg-* is untouched
     since those class names don't match here and keep their own behaviour. */
  .row>.col-1,.row>.col-2,.row>.col-3,.row>.col-4,.row>.col-5,
  .row>.col-6,.row>.col-7,.row>.col-8,.row>.col-9,.row>.col-10,.row>.col-11{
    flex:0 0 100%;max-width:100%;
  }

  /* Page-header rows that pair a title with an action button should wrap
     instead of forcing the button off-screen. */
  .xpi-main>.d-flex.justify-content-between{flex-wrap:wrap;gap:.5rem;}
}

/* ---------- Cards / KPI ---------- */
.kpi-card{border:0;border-radius:14px;background:var(--xpi-surface);color:var(--xpi-text);box-shadow:0 2px 10px var(--xpi-shadow);transition:transform .18s ease,box-shadow .18s ease,background-color .25s ease;}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--xpi-shadow-lg);}
.kpi-card .kpi-value{font-size:1.6rem;font-weight:700;}
.kpi-card .kpi-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;}

.card{border-radius:12px;background-color:var(--xpi-surface);color:var(--xpi-text);border-color:var(--xpi-border);transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.card:hover{box-shadow:0 4px 16px var(--xpi-shadow);}

.table{--bs-table-bg:var(--xpi-surface);--bs-table-color:var(--xpi-text);--bs-table-border-color:var(--xpi-border);--bs-table-hover-bg:var(--xpi-surface-alt);--bs-table-hover-color:var(--xpi-text);}
.table thead th{background:var(--xpi-surface-alt);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--xpi-text-muted);}
.table td,.table th{vertical-align:middle;font-size:.9rem;}
.badge-status-active,.badge-status-running,.badge-status-paid,.badge-status-delivered,.badge-status-completed,.badge-status-approved,.badge-status-resolved,.badge-status-received{background:#dcfce7;color:#166534;}
.badge-status-inactive,.badge-status-breakdown,.badge-status-cancelled,.badge-status-open{background:#fee2e2;color:#991b1b;}
.badge-status-pending,.badge-status-idle,.badge-status-scheduled,.badge-status-pendingapproval{background:#fef9c3;color:#854d0e;}
.badge-status-maintenance,.badge-status-inprogress,.badge-status-intransit,.badge-status-inrepair,.badge-status-partiallyreceived{background:#dbeafe;color:#1e40af;}

.btn-primary{background-color:var(--xpi-primary);border-color:var(--xpi-primary);transition:background-color .15s ease,border-color .15s ease,transform .1s ease;}
.btn-primary:hover{background-color:var(--xpi-primary-dark);border-color:var(--xpi-primary-dark);}
.btn:active{transform:translateY(1px);}
a{color:var(--xpi-primary);}
a:hover{color:var(--xpi-primary-dark);}

.login-shell{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#0b3d2e,#134e4a);}

@media print{
  .xpi-sidebar,.xpi-topbar,.no-print{display:none !important;}
  .xpi-content{margin-left:0 !important;}
}

.form-label{font-weight:600;font-size:.85rem;}
.section-title{font-weight:700;color:var(--xpi-primary-dark);border-bottom:2px solid var(--xpi-primary);padding-bottom:.35rem;margin-bottom:1rem;}

/* ---------- Theme picker (top bar dropdown) ---------- */
.xpi-theme-picker{display:flex;gap:.55rem;}
.xpi-theme-swatch{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.xpi-theme-swatch:hover{transform:scale(1.18);}
.xpi-theme-swatch.active{box-shadow:0 0 0 2px var(--xpi-surface),0 0 0 4px var(--xpi-text-muted);}
.xpi-theme-swatch-light{background:linear-gradient(135deg,#0f766e,#f59e0b);}
.xpi-theme-swatch-dark{background:linear-gradient(135deg,#0f1720,#14b8a6);}
.xpi-theme-swatch-ocean{background:linear-gradient(135deg,#2563eb,#f59e0b);}