:root{
  --c-primary:#2f3852;
  --c-primary-2:#1f2536;
  --c-bg:#0b1020;
  --c-card: rgba(255,255,255,.08);
  --c-card-2: rgba(255,255,255,.06);
  --c-border: rgba(255,255,255,.12);
  --c-text:#e9edf7;
  --c-text-dim: rgba(233,237,247,.72);
  --c-accent-1:#4b6bfb;
  --c-accent-2:#35d0ba;
  --c-accent-3:#ff4d6d;
  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 35px rgba(0,0,0,.22);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(75,107,251,.28), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(53,208,186,.20), transparent 60%),
              radial-gradient(1100px 700px at 40% 110%, rgba(255,77,109,.12), transparent 60%),
              linear-gradient(180deg, #070a14, #0b1020);
  overflow-x:hidden;
}

/* Animated liquid blobs */
.bg-blobs{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.bg-blobs::before,
.bg-blobs::after{
  content:"";
  position:absolute;
  width:55vmax;
  height:55vmax;
  border-radius:999px;
  filter: blur(90px);
  opacity:.22;
  mix-blend-mode: normal;
  animation: blobFloat 16s ease-in-out infinite;
}
.bg-blobs::before{
  background: radial-gradient(circle at 30% 30%, rgba(75,107,251,.75), rgba(124,92,255,0) 60%),
              radial-gradient(circle at 70% 70%, rgba(53,208,186,.40), rgba(46,233,166,0) 60%);
  top:-18vmax;
  left:-18vmax;
}
.bg-blobs::after{
  background: radial-gradient(circle at 40% 40%, rgba(255,77,109,.35), rgba(255,79,216,0) 60%),
              radial-gradient(circle at 70% 30%, rgba(53,208,186,.28), rgba(46,233,166,0) 60%);
  bottom:-22vmax;
  right:-22vmax;
  animation-duration: 20s;
}
@keyframes blobFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(4vmax,2vmax,0) scale(1.08); }
}

/* Layout */
.app-shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width: 270px;
  padding: 18px;
  position: sticky;
  top:0;
  height:100vh;
  overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
}

.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding: 8px 8px 14px 8px;
}
.brand img, .brand-logo{
  height: 20px;
  width:auto;
  max-width: 100%;
}

.nav-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--c-text-dim);
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
  color: var(--c-text);
}
.nav-item.active{
  background: linear-gradient(135deg, rgba(124,92,255,.24), rgba(46,233,166,.14));
  border-color: rgba(75,107,251,.28);
  color: var(--c-text);
}

.nav-item .icon{
  width:18px;
  height:18px;
  opacity:.95;
}

.sidebar-footer{
  margin-top: 18px;
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.avatar{
  width:36px;
  height:36px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,92,255,.55), rgba(255,79,216,.40));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
}

.user-chip .meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.user-chip .meta .name{
  font-weight: 700;
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-chip .meta .role{
  font-size: 12px;
  color: var(--c-text-dim);
}

.main{
  flex:1;
  padding: 18px 18px 90px 18px;
}

.topbar{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  margin: 18px 18px 0 18px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 18px;
  z-index: 30;
}

.topbar-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.page-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topbar-main .page-title{
  min-width:0;
}

.topbar-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.topbar-page-actions:empty{
  display:none;
}

.topbar-utility-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}

.topbar-icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.topbar-icon-btn .icon,
.sidebar-toggle .icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:block;
}

.sidebar-toggle{
  display:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--c-text);
  border-radius: 14px;
  padding: 8px 10px;
}

.content{
  padding-top: 0;
}

/* Cards */
.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.card-kpi{
  padding: 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
}

.kpi-label{color: var(--c-text-dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;}
.kpi-value{font-size: 22px; font-weight: 800; letter-spacing: -0.02em;}

/* Buttons */
.btn-complem{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  color:#ffffff;
  font-weight:650;
  font-size:.95rem;
  background: linear-gradient(135deg, rgba(75,107,251,.95), rgba(53,208,186,.75));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-complem:hover{ transform: translateY(-1px); filter: brightness(1.02); color:#ffffff; }

.btn-soft{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight:600;
  font-size:.95rem;
  backdrop-filter: blur(8px);
  transition: transform .12s ease, background .12s ease;
}
.btn-soft:hover{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); }

.btn-ghost{
  border:0;
  background: transparent;
  color: var(--c-text-dim);
  padding: 8px 10px;
  border-radius: 12px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); color: var(--c-text); }

/* Tables */
.table{
  color: var(--c-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  background: transparent;
}
.table td, .table th, .table > :not(caption) > * > *{
  color: var(--c-text) !important;
}
.table .fw-semibold, .table .fw-bold{
  color: var(--c-text) !important;
}
.table a{
  color: var(--c-text) !important;
}
.table .text-muted{
  color: var(--c-text-dim) !important;
}
.table thead th{
  color: rgba(233,237,247,.80);
  font-size: 12px;
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: transparent;
}
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.04);
}

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--c-text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(233,237,247,.45) !important; }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(124,92,255,.18) !important;
  border-color: rgba(124,92,255,.45) !important;
}

.form-check-input{
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}

/* Alerts */
.alert{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--c-text);
}

/* Bootstrap fallbacks for legacy templates */
.text-muted{ color: rgba(233,237,247,.62) !important; }
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  color: var(--c-text);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}
.card-header, .card-footer{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.btn-outline-primary, .btn-outline-secondary{
  border-radius: 999px;
}
.btn-outline-secondary{
  color: rgba(233,237,247,.80);
  border-color: rgba(255,255,255,.16);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--c-text);
}

/* Modal */
.modal-content{
  background: rgba(15,18,31,.88) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px);
  border-radius: var(--radius-xl) !important;
  color: var(--c-text);
}

.modal-header{ border-bottom: 1px solid rgba(255,255,255,.10) !important; }
.modal-footer{ border-top: 1px solid rgba(255,255,255,.10) !important; }

/* Mobile bottom nav */
.bottom-nav{
  display:none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  padding: 10px;
  border-radius: 18px;
  background: rgba(15,18,31,.78);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.bottom-nav .items{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.bottom-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding: 10px 6px;
  border-radius: 16px;
  text-decoration:none;
  color: rgba(233,237,247,.70);
  font-size: 11px;
}
.bottom-nav a.active{
  background: linear-gradient(135deg, rgba(124,92,255,.25), rgba(46,233,166,.12));
  color: var(--c-text);
  border: 1px solid rgba(124,92,255,.25);
}
.bottom-nav svg{ width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 992px){
  .sidebar{ position: fixed; left:-290px; top:0; bottom:0; z-index: 80; transition: left .22s ease; }
  .sidebar.open{ left:0; }
  .sidebar-toggle{ display:inline-flex; }
  .main{ padding-left: 0; }
  .bottom-nav{ display:block; }
}

/* Login */
.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 28px 18px;
}
.auth-card{
  width: min(520px, 100%);
  padding: 22px;
}
.auth-brand{
  display:flex;
  justify-content:center;
  margin-bottom: 14px;
}
.auth-brand img{ height: 42px; }

.small-help{ color: rgba(233,237,247,.60); font-size: 12px; }

/* Badge chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.chip.ok{ background: rgba(46,233,166,.12); border-color: rgba(46,233,166,.22); }
.chip.warn{ background: rgba(255,205,86,.12); border-color: rgba(255,205,86,.22); }
.chip.danger{ background: rgba(255,99,132,.12); border-color: rgba(255,99,132,.22); }


.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-muted{ opacity:.75; }

/* Tiny utility */
.text-dim{ color: var(--c-text-dim) !important; }



/* -----------------------------
   V3.0 · Micro-interactions
------------------------------*/

.content{
  animation: pageEnter .28s ease-out both;
}
@keyframes pageEnter{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* HTMX insert animation */
.htmx-added{
  animation: popIn .22s ease-out both;
}
@keyframes popIn{
  from{ opacity:0; transform: translateY(8px) scale(.98); filter: blur(6px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Ripple */
[data-ripple]{
  position: relative;
  overflow:hidden;
}
.ripple{
  position:absolute;
  border-radius:999px;
  transform:scale(0);
  animation:ripple .65s ease-out;
  background: rgba(255,255,255,.25);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform:scale(4); opacity:0; }
}

/* Toasts */
.toast-stack{
  position: fixed;
  z-index: 2000;
  right: 14px;
  bottom: 92px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
@media (min-width:992px){
  .toast-stack{ bottom: 18px; }
}
.toast-item{
  pointer-events:auto;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(15,18,31,.92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  display:flex;
  align-items:flex-start;
  gap:10px;
  animation: toastIn .22s ease-out both;
}
@keyframes toastIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.toast-item .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(46,233,166,.85);
  margin-top: 6px;
}
.toast-item.danger .dot{ background: rgba(255,79,216,.85); }
.toast-item.warn .dot{ background: rgba(255,193,7,.85); }
.toast-item .t-title{ font-weight: 800; letter-spacing:-.01em; }
.toast-item .t-body{ color: var(--c-text-dim); font-size: 12px; }

/* Notifications badge */
.notif-btn{ position:relative; }
.notif-badge-wrap{ position:absolute; top:-2px; right:-2px; }
.notif-badge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,79,216,.95), rgba(124,92,255,.85));
  border: 1px solid rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Offcanvas glass */
.offcanvas-glass{
  background: rgba(10,12,22,.86);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255,255,255,.10);
  color: var(--c-text);
}
.offcanvas-glass .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.offcanvas-glass .btn-close{
  filter: invert(1);
  opacity:.9;
}

/* Notifications list */
.notif-list{ display:flex; flex-direction:column; gap:10px; }
.notif-item{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background .18s ease;
}
.notif-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.notif-item.unread{ border-color: rgba(46,233,166,.28); background: rgba(46,233,166,.07); }
.notif-title{ font-weight: 800; letter-spacing:-.01em; }
.notif-body{ font-size: 13px; margin-top: 2px; }
.notif-meta{ font-size: 11px; color: rgba(233,237,247,.55); margin-top: 6px; }

/* Assets */
.asset-card{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.asset-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(46,233,166,.20);
}
.asset-title{ font-weight: 900; letter-spacing:-.02em; }
.asset-desc{ margin-top: 8px; font-size: 13px; }
.asset-meta{ margin-top: 10px; font-size: 11px; color: rgba(233,237,247,.55); }


/* KPI draggable handle */
.kpi-handle{
  position:absolute;
  top:10px;
  right:12px;
  font-weight:900;
  letter-spacing:-.1em;
  color: rgba(233,237,247,.55);
  cursor: grab;
  user-select:none;
}
.card-kpi{ position:relative; }
.card-kpi:active .kpi-handle{ cursor: grabbing; }

/* ---------------------------------
   V4.0 · iOS-ish polish (no “tasks”)
-----------------------------------*/

:root{
  --ease-spring: cubic-bezier(.2, .9, .2, 1);
  --ease-pop: cubic-bezier(.22, 1, .36, 1);
}

/* Segmented control (Apple-like) */
.segmented{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.seg-item{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:12px;
  color: rgba(233,237,247,.78);
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  letter-spacing:-.01em;
  border: 1px solid transparent;
  transition: transform .18s var(--ease-spring), background .18s var(--ease-spring), color .18s var(--ease-spring);
  user-select:none;
}
.seg-item:hover{ color:#fff; transform: translateY(-1px); }
.seg-item.active{
  background: linear-gradient(135deg, rgba(86,112,255,.38), rgba(92,255,202,.20));
  border-color: rgba(255,255,255,.16);
  color:#fff;
}

/* iOS card list */
.card-ios{
  display:block;
  text-decoration:none;
  color: inherit;
  background: rgba(15,18,31,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-spring), border-color .18s var(--ease-spring);
}
.card-ios:active{ transform: scale(.985); }
.card-ios:hover{ border-color: rgba(255,255,255,.16); transform: translateY(-1px); }

/* “App feel” form spacing */
.ios-form .form-control,
.ios-form .form-select{
  border-radius: 14px;
}

/* Bottom-sheet modal (mobile) */
@media (max-width: 992px){
  #appModal .modal-dialog{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: translateY(100%);
    transition: transform .34s var(--ease-pop);
    pointer-events:none;
  }
  #appModal.show .modal-dialog{
    transform: translateY(0);
    pointer-events:auto;
  }
  #appModal .modal-content{
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  #appModal .modal-header{
    position: relative;
    padding-top: 18px;
  }
  #appModal .modal-header:before{
    content:"";
    position:absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: rgba(233,237,247,.25);
  }
}

/* Tap feedback everywhere */
.btn-complem, .btn-soft, .btn-ghost{
  transform-origin: center;
}
.btn-complem:active, .btn-soft:active, .btn-ghost:active{
  transform: scale(.98);
}

/* Slight iOS-like table rounding on mobile */
@media (max-width: 992px){
  .glass .table{
    border-radius: 18px;
    overflow:hidden;
  }
}

/* ===== V5 polish (readability + stability) ===== */


/* ---------------------------------
   Complem v6 polish
---------------------------------- */
:root{
  --glass: rgba(17, 22, 40, .72);
  --glass2: rgba(17, 22, 40, .60);
  --border: rgba(255,255,255,.12);
  --text: rgba(233,237,247,.92);
  --muted: rgba(233,237,247,.70);
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(75,107,251,.18), transparent 55%),
    radial-gradient(1100px 700px at 85% 100%, rgba(53,208,186,.12), transparent 60%),
    #0b1020;
}

/* Calmer background blobs */
.bg-blobs{
  opacity: .22;
  filter: blur(110px) saturate(1.03);
  background:
    radial-gradient(520px 520px at 20% 25%, rgba(75,107,251,.22), transparent 65%),
    radial-gradient(520px 520px at 78% 70%, rgba(53,208,186,.16), transparent 65%),
    radial-gradient(620px 620px at 55% 55%, rgba(255,255,255,.05), transparent 70%);
}

.glass{
  background: var(--glass);
  border-color: var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
.glass.soft{ background: var(--glass2); }

/* Brand calmer */
.brand img{ height: 24px; width:auto; }

/* Buttons */
.btn-complem{ text-decoration: none !important; -webkit-text-decoration:none !important; }
.btn-soft, .btn-ghost{ text-decoration: none !important; -webkit-text-decoration:none !important; }

.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,77,109,.35);
  background: rgba(255,77,109,.16);
  color:#fff;
  font-weight:650;
  font-size:.95rem;
}
.btn-danger:hover{ filter: brightness(1.03); color:#fff; }

.btn-sm{ padding:8px 10px; font-size:.86rem; border-radius:10px; }

/* Page header (mobile-friendly) */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 14px;
}
.page-head .h1{
  font-size: 22px;
  font-weight: 760;
  margin: 0;
  letter-spacing: -.01em;
}

@media (max-width: 560px){
  .page-head{ flex-direction: column; align-items: stretch; }
  .page-head .h1{ font-size: 18px; }
  .page-head .d-flex.gap-2{ width: 100%; }
  .page-head .btn-complem, .page-head .btn-soft, .page-head .btn-danger{ width: 100%; }
}

/* Stable chart sizing (prevents infinite height issues) */
.chart-box{ position: relative; height: 240px; overflow:hidden; }
.chart-box canvas{ width:100% !important; height:100% !important; display:block; }

@media (max-width: 992px){
  .chart-box{ height: 190px; }
}

/* AI chat UI */
.ai-chat{
  height: 360px;
  overflow:auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.12);
}
.ai-msg{ display:flex; margin-bottom:10px; }
.ai-msg.user{ justify-content:flex-end; }
.ai-bubble{
  max-width: 88%;
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.ai-msg.user .ai-bubble{ background: rgba(75,107,251,.16); border-color: rgba(75,107,251,.22); }
.ai-role{ font-size: 11px; color: rgba(255,255,255,.60); margin-bottom: 4px; }
.ai-text{ white-space: pre-wrap; font-size: 14px; color: rgba(255,255,255,.92); }

/* Mobile: app-like top bar (iOS-ish, stable spacing) */
@media (max-width: 560px){
  .main{ padding: 0 0 96px 0; }
  .content{ padding: 14px 14px 96px; }

  .topbar{
    margin: 0 0 14px 0;
    border-radius: 0 0 22px 22px;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
    top: 0;
    position: sticky;
    background: rgba(255,255,255,.075);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:start;
    row-gap: 10px;
  }

  .sidebar-toggle{
    display:inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    align-items:center;
    justify-content:center;
  }

  .topbar .page-title{
    position: static;
    transform: none;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    pointer-events: auto;
  }

  .topbar-page-actions{
    grid-column: 1 / -1;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .topbar-utility-actions{
    gap: 8px;
    justify-self: end;
  }

  .topbar-icon-btn{
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 14px;
  }

  .btn-complem, .btn-soft, .btn-ghost, .btn-danger{
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 14px;
  }

  .kpi-value{ font-size: 22px; }
}

.accent-green{ color: rgba(53,208,186,.92); }
.accent-blue{ color: rgba(75,107,251,.92); }


.dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:8px;background:rgba(255,255,255,.18);vertical-align:middle;}
.dot.green{background:rgba(53,208,186,.92);box-shadow:0 0 0 4px rgba(53,208,186,.16);}
.dot.blue{background:rgba(75,107,251,.92);box-shadow:0 0 0 4px rgba(75,107,251,.16);}


.pill-off{margin-left:auto;font-size:10px;letter-spacing:.08em;padding:2px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);}


/* Apple‑like rings */
.activity-rings{width:160px;height:160px;position:relative;display:inline-block;}
.activity-rings svg{width:160px;height:160px;display:block;}
.activity-rings .ring-track{stroke:rgba(255,255,255,.08);fill:none;}
.activity-rings .ring-progress{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));transition:stroke-dashoffset .8s cubic-bezier(.2,.9,.2,1);}
.activity-rings .r1{stroke:rgba(55,204,255,.95);} /* commandes */
.activity-rings .r2{stroke:rgba(80,255,160,.95);} /* CA */
.activity-rings .r3{stroke:rgba(190,120,255,.95);} /* panier */
.activity-rings .center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;text-align:center;}
.activity-rings .center .value{font-weight:750;letter-spacing:-.02em;}
.activity-rings .center .label{font-size:.78rem;color:rgba(233,237,247,.65);}
.ring-legend{display:flex;flex-direction:column;gap:10px;}
.ring-legend .item{display:flex;align-items:center;gap:10px;}
.ring-legend .dot{width:10px;height:10px;border-radius:999px;}
.ring-legend .dot.r1{background:rgba(55,204,255,.95);} 
.ring-legend .dot.r2{background:rgba(80,255,160,.95);} 
.ring-legend .dot.r3{background:rgba(190,120,255,.95);} 

/* ---------------------------------
   V11.1 · mobile header hotfix
---------------------------------- */
html,
body{
  max-width:100%;
}

body{
  min-height:100dvh;
  overscroll-behavior-y: none;
}

img,
svg,
canvas{
  max-width:100%;
}

.app-shell,
.main,
.content,
.topbar,
.glass,
.card,
.table-responsive,
.row > [class*="col-"]{
  min-width:0;
}

.app-shell{
  min-height:100dvh;
}

.main{
  width:100%;
}

.stack{
  display:grid;
  gap:12px;
}

.table-responsive{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.table-responsive::-webkit-scrollbar{
  height:6px;
}
.table-responsive::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius:999px;
}

.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(5,7,14,.46);
  backdrop-filter: blur(4px);
  z-index: 70;
}

.mobile-card-table td.no-label::before,
.mobile-card-table .no-label::before{
  content:none !important;
}

@media (max-width: 992px){
  body.nav-open{
    overflow:hidden;
    touch-action:none;
  }

  .sidebar{
    width:min(86vw, 320px);
    max-width:320px;
    left:-110%;
    height:100dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .sidebar.open{
    left:0;
  }

  body.nav-open .sidebar-backdrop{
    display:block;
  }

  .main{
    padding: 0 0 calc(108px + env(safe-area-inset-bottom)) 0;
  }

  .content{
    padding: 14px 14px calc(104px + env(safe-area-inset-bottom));
  }

  .glass,
  .card,
  .card-ios,
  .card-kpi{
    border-radius: 20px;
  }

  .topbar{
    margin: 0 0 12px 0;
    padding-bottom: 12px;
  }

  .topbar-page-actions > *{
    flex: 0 0 auto;
  }

  .page-head,
  .d-flex.flex-wrap{
    row-gap: 10px;
  }

  .bottom-nav{
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 20px;
  }

  .bottom-nav .items{
    gap:6px;
  }

  .bottom-nav a{
    min-width:0;
    padding: 10px 4px;
  }

  .offcanvas-glass{
    max-width: min(92vw, 420px);
  }
}

@media (max-width: 768px){
  input,
  select,
  textarea{
    font-size:16px !important;
  }

  .mobile-card-table{
    min-width: 100%;
  }

  .mobile-card-table thead{
    display:none;
  }

  .mobile-card-table tbody{
    display:grid;
    gap:12px;
  }

  .mobile-card-table tbody tr{
    display:block;
    padding:14px;
    border-radius:18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }

  .mobile-card-table tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:0;
    margin: 0 0 10px 0;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
  }

  .mobile-card-table tbody td:last-child{
    margin-bottom:0;
  }

  .mobile-card-table tbody td::before{
    content: attr(data-label);
    flex:0 0 88px;
    color: rgba(233,237,247,.68);
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
  }

  .mobile-card-table tbody td.text-center,
  .mobile-card-table tbody td.text-end{
    justify-content:space-between;
  }

  .mobile-card-table tbody td .form-control,
  .mobile-card-table tbody td .form-select,
  .mobile-card-table tbody td .form-check-input{
    width:100%;
    min-width:0;
  }

  .mobile-card-table tbody td .form-check-input{
    width: 20px;
    min-width: 20px;
  }

  .mobile-card-table tbody td img{
    flex:0 0 auto;
  }

  .ios-form .btn-complem,
  .ios-form .btn-soft,
  .ios-form .btn-ghost,
  .ios-form .btn-danger{
    width:100%;
  }
}

@media (max-width: 560px){
  .content{
    padding: 12px 12px calc(108px + env(safe-area-inset-bottom));
  }

  .topbar{
    margin: 0 0 10px 0;
    border-radius: 0 0 22px 22px;
  }

  .topbar-page-actions{
    justify-content:flex-start;
  }

  .topbar-page-actions .btn-complem,
  .topbar-page-actions .btn-soft,
  .topbar-page-actions .btn-ghost,
  .topbar-page-actions .btn-danger{
    flex:1 1 calc(50% - 8px);
    min-width:0;
  }

  .topbar-utility-actions{
    gap: 8px;
  }

  .topbar-utility-actions .topbar-icon-btn{
    flex: 0 0 40px;
  }

  .glass.p-3,
  .card.p-3,
  .card-ios{
    padding: 14px !important;
  }

  .btn-complem,
  .btn-soft,
  .btn-ghost,
  .btn-danger{
    min-height:42px;
  }
}