/* ==========================================================================
   Bacher Design System — shared theme for all Bacher applications
   Import this file after Bootstrap/AG Grid and before any app-specific CSS
   so app-specific stylesheets can layer targeted overrides on top.
   ========================================================================== */

:root{
  /* Brand colours */
  --bacher-coral:#FF281F;
  --bacher-coral-hover:#E0211A;
  --bacher-coral-soft:#FFF0EF;
  --bacher-navy:#0F172A;
  --bacher-navy-hover:#1E293B;
  --bacher-navy-soft:#EEF2F7;
  --bacher-bg:#F8FAFC;
  --bacher-surface:#FFFFFF;
  --bacher-surface-muted:#F1F5F9;
  --bacher-border:#E2E8F0;
  --bacher-text:#0F172A;
  --bacher-text-muted:#64748B;
  --bacher-success:#10B981;
  --bacher-warning:#F59E0B;
  --bacher-danger:#EF4444;
  --bacher-info:#2563EB;

  /* Spacing tokens */
  --bacher-space-xs:.375rem;
  --bacher-space-sm:.75rem;
  --bacher-space-md:1.25rem;
  --bacher-space-lg:2rem;
  --bacher-space-xl:3rem;

  /* Radius + shadow tokens */
  --bacher-radius-sm:8px;
  --bacher-radius-md:12px;
  --bacher-radius-lg:16px;
  --bacher-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --bacher-shadow-md:0 4px 16px rgba(15,23,42,.08);
  --bacher-shadow-lg:0 12px 32px rgba(15,23,42,.14);

  /* Bootstrap variable overrides so all default Bootstrap components
     (buttons, badges, alerts, form focus rings, etc.) inherit the
     Bacher palette without needing markup changes. */
  --bs-primary:var(--bacher-coral);
  --bs-primary-rgb:255,40,31;
  --bs-secondary:var(--bacher-navy);
  --bs-secondary-rgb:15,23,42;
  --bs-success:var(--bacher-success);
  --bs-success-rgb:16,185,129;
  --bs-warning:var(--bacher-warning);
  --bs-warning-rgb:245,158,11;
  --bs-danger:var(--bacher-danger);
  --bs-danger-rgb:239,68,68;
  --bs-info:var(--bacher-info);
  --bs-info-rgb:37,99,235;
  --bs-body-bg:var(--bacher-bg);
  --bs-body-color:var(--bacher-text);
  --bs-border-radius:var(--bacher-radius-sm);
  --bs-border-radius-lg:var(--bacher-radius-md);
  --bs-border-color:var(--bacher-border);
  --bs-link-color:var(--bacher-coral);
  --bs-link-hover-color:var(--bacher-coral-hover);
}

/* ---------------------------------- base ---------------------------------- */
body{
  background:var(--bacher-bg);
  color:var(--bacher-text);
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

h1,h2,h3,h4,h5,h6{ color:var(--bacher-text); font-weight:700; letter-spacing:-.015em }
.text-muted{ color:var(--bacher-text-muted)!important }

/* --------------------------------- buttons --------------------------------- */
.btn{
  border-radius:var(--bacher-radius-sm);
  font-weight:600;
  padding:.5rem 1rem;
  min-height:40px;
  transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--bacher-coral); border-color:var(--bacher-coral); color:#fff }
.btn-primary:hover,.btn-primary:focus{ background:var(--bacher-coral-hover); border-color:var(--bacher-coral-hover); color:#fff }
.btn-outline-primary{ border-color:var(--bacher-coral); color:var(--bacher-coral) }
.btn-outline-primary:hover,.btn-outline-primary:focus{ background:var(--bacher-coral); border-color:var(--bacher-coral); color:#fff }
.btn-secondary{ background:var(--bacher-navy); border-color:var(--bacher-navy); color:#fff }
.btn-secondary:hover,.btn-secondary:focus{ background:var(--bacher-navy-hover); border-color:var(--bacher-navy-hover); color:#fff }
.btn-outline-secondary{ border-color:var(--bacher-navy); color:var(--bacher-navy) }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{ background:var(--bacher-navy); border-color:var(--bacher-navy); color:#fff }
.btn-danger{ background:var(--bacher-danger); border-color:var(--bacher-danger) }
.btn-outline-danger{ border-color:var(--bacher-danger); color:var(--bacher-danger) }
.btn-outline-danger:hover,.btn-outline-danger:focus{ background:var(--bacher-danger); border-color:var(--bacher-danger) }
.btn-link{ color:var(--bacher-coral); font-weight:600; text-decoration:none }
.btn-link:hover,.btn-link:focus{ color:var(--bacher-coral-hover); text-decoration:underline }

/* ----------------------------------- forms ---------------------------------- */
.form-control,.form-select{
  border-color:#CBD5E1;
  border-radius:var(--bacher-radius-sm);
  min-height:42px;
  padding:.55rem .8rem;
  font-size:.925rem;
}
textarea.form-control{ min-height:auto }
.form-control:focus,.form-select:focus{
  border-color:var(--bacher-coral);
  box-shadow:0 0 0 .2rem rgba(255,40,31,.14);
}
label,.form-label{ color:var(--bacher-text); font-weight:600; margin-bottom:.35rem; font-size:.82rem }
.form-floating>label{ font-weight:500; color:var(--bacher-text-muted) }
.was-validated .form-control:invalid,.form-control.is-invalid{ border-color:var(--bacher-danger) }
.was-validated .form-control:valid,.form-control.is-valid{ border-color:var(--bacher-success) }
.invalid-feedback{ color:var(--bacher-danger); font-weight:600 }

/* ---------------------------------- cards ----------------------------------- */
.card,.panel{
  background:var(--bacher-surface);
  border:1px solid var(--bacher-border);
  border-radius:var(--bacher-radius-lg);
  box-shadow:var(--bacher-shadow-sm);
}
.card-header,.panel-head{
  background:var(--bacher-surface);
  border-bottom:1px solid var(--bacher-border);
  font-weight:700;
  padding:var(--bacher-space-sm) var(--bacher-space-md);
}
.card-body{ padding:var(--bacher-space-md) }

/* ------------------------------- page header -------------------------------- */
.bacher-page-header{
  position:relative;
  padding:var(--bacher-space-md) 0 var(--bacher-space-sm);
  margin-bottom:var(--bacher-space-md);
}
.bacher-page-header::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  border-radius:4px;
  background:var(--bacher-coral);
  margin-top:var(--bacher-space-sm);
}
.bacher-page-header h1{
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:800;
  margin-bottom:.25rem;
}
.bacher-page-header p{
  color:var(--bacher-text-muted);
  margin-bottom:0;
  font-size:.95rem;
  max-width:60ch;
}

/* --------------------------------- KPI cards --------------------------------- */
.kpi{
  background:var(--bacher-surface);
  border:1px solid var(--bacher-border);
  border-top:4px solid var(--bacher-coral);
  border-radius:var(--bacher-radius-lg);
  box-shadow:var(--bacher-shadow-sm);
  padding:var(--bacher-space-md);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--bacher-shadow-md) }
.kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--bacher-text-muted); font-weight:700 }
.kpi-value{ font-size:20px; font-weight:800; margin-top:2px; color:var(--bacher-text) }
.kpi-clickable{ cursor:pointer }
.kpi-clickable:hover{ border-color:var(--bacher-coral) }
.kpi-active{ border-color:var(--bacher-coral); border-width:1px; box-shadow:0 0 0 2px rgba(255,40,31,.18) }

/* -------------------------------- navigation --------------------------------- */
.app-nav{
  background:var(--bacher-navy)!important;
  min-height:60px;
  box-shadow:0 1px 4px rgba(15,23,42,.2);
}
.app-nav .navbar-brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:#fff }
.app-nav .brand-mark{
  display:inline-grid; place-items:center; width:30px; height:30px;
  background:var(--bacher-coral); border-radius:var(--bacher-radius-sm); color:#fff; font-weight:800;
}
.app-nav .nav-link{
  border-bottom:3px solid transparent;
  color:#CBD5E1;
  padding:.9rem .9rem .75rem;
  font-weight:500;
  transition:color .15s ease,border-color .15s ease;
}
.app-nav .nav-link:hover,.app-nav .nav-link:focus{ color:#fff }
.app-nav .nav-link.active{ border-bottom-color:var(--bacher-coral); color:#fff; font-weight:700 }

.nav-tabs{ border-bottom-color:var(--bacher-border) }
.nav-tabs .nav-link{ color:var(--bacher-text-muted); font-weight:600; border-radius:0 }
.nav-tabs .nav-link.active{
  border-color:var(--bacher-border) var(--bacher-border) var(--bacher-surface);
  border-top:3px solid var(--bacher-coral);
  color:var(--bacher-text);
}

/* Sidebar-style navigation (for apps using a vertical nav) */
.bacher-sidebar{ background:var(--bacher-navy); min-height:100%; padding:var(--bacher-space-md) 0 }
.bacher-sidebar .nav-link{
  color:#CBD5E1; font-weight:500; border-left:3px solid transparent;
  padding:.65rem var(--bacher-space-md); border-radius:0;
}
.bacher-sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.04) }
.bacher-sidebar .nav-link.active{ color:#fff; font-weight:700; border-left-color:var(--bacher-coral); background:rgba(255,40,31,.08) }

/* ----------------------------------- badges ---------------------------------- */
.badge{ border-radius:50rem; font-weight:600; padding:.4em .75em; letter-spacing:.01em }
.badge-status-open{ background:var(--bacher-coral); color:#fff }
.badge-status-awaiting-customer{ background:var(--bacher-warning); color:#3F2A00 }
.badge-status-awaiting-warehouse{ background:var(--bacher-navy); color:#fff }
.badge-status-resolved{ background:var(--bacher-success); color:#fff }
.badge-status-closed{ background:#94A3B8; color:#fff }

/* ---------------------------------- AG Grid ----------------------------------- */
.ag-theme-quartz{
  --ag-background-color:var(--bacher-surface);
  --ag-foreground-color:var(--bacher-text);
  --ag-border-color:var(--bacher-border);
  --ag-header-background-color:var(--bacher-navy);
  --ag-header-foreground-color:#fff;
  --ag-odd-row-background-color:var(--bacher-surface-muted);
  --ag-row-border-color:var(--bacher-border);
  --ag-row-hover-color:var(--bacher-coral-soft);
  --ag-selected-row-background-color:var(--bacher-coral-soft);
  --ag-header-height:42px;
  --ag-row-height:38px;
  --ag-cell-horizontal-padding:12px;
  --ag-font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ag-font-size:13px;
  border-radius:var(--bacher-radius-md);
  overflow:hidden;
}
.ag-theme-quartz .ag-header-cell-label{ font-weight:700 }
.ag-theme-quartz .ag-header{ position:sticky; top:0; z-index:2 }
.ag-theme-quartz .ag-row-selected{ box-shadow:inset 4px 0 0 var(--bacher-coral) }
.ag-theme-quartz .ag-cell-focus:not(.ag-cell-range-selected):focus-within{ border:1px solid var(--bacher-coral) }
.ag-theme-quartz .ag-icon-asc,.ag-theme-quartz .ag-icon-desc{ color:var(--bacher-coral) }
.ag-theme-quartz .ag-header-cell.ag-header-cell-filtered .ag-header-cell-label,
.ag-theme-quartz .ag-header-cell.ag-column-menu-visible{ color:var(--bacher-coral) }

/* Row/header selection checkboxes: coral when checked, ~13% smaller, vertically centred */
.ag-theme-quartz{
  --ag-checkbox-checked-color:var(--bacher-coral);
  --ag-checkbox-unchecked-color:#94A3B8;
  --ag-checkbox-background-color:var(--bacher-surface);
  --ag-checkbox-border-radius:4px;
}
.ag-theme-quartz .ag-selection-checkbox,
.ag-theme-quartz .ag-header-select-all{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  margin:0;
}
.ag-theme-quartz .ag-checkbox-input-wrapper{
  width:14px;
  height:14px;
  font-size:14px;
}
.ag-theme-quartz .ag-checkbox-input-wrapper.ag-checked::after{
  color:var(--bacher-coral);
}
.ag-theme-quartz .ag-checkbox-input-wrapper:focus-within{
  box-shadow:0 0 0 2px rgba(255,40,31,.25);
}

/* --------------------------------- responsive --------------------------------- */
@media(max-width:991.98px){
  .bacher-page-header p{ max-width:none }
}
@media(max-width:767.98px){
  .app-nav .brand-product{ display:none }
  .kpi{ padding:var(--bacher-space-sm) }
  .bacher-page-header{ padding-bottom:var(--bacher-space-xs) }
}