/* ==========================================================================
   FC Fredericia · Dark UI
   ========================================================================== */

/* ===== Core palette ======================================================= */
:root{
  --bg:#0b0f16;
  --surface:#121826;
  --surface-2:#0e1422;
  --surface-3:#0f182c;
  --border:#1f2a3a;

  --text:#eef3fb;
  --muted:#9aa3b2;

  /* Brand & module accents */
  --brand:#E2000F;
  --accent:#3b82f6;

  --accent-count:#3b82f6;
  --accent-consume:#f59e0b;
  --accent-stats:#16a34a;
  --accent-events:#8b5cf6;
  --accent-items:#0ea5e9;
  --accent-locations:#f97316;
  --accent-categories:#a855f7;

  --bs-primary:#2563eb;
  --bs-success:#198754;
  --bs-danger:#dc3545;
  --bs-warning:#ffc107;

  --sp-0:0; --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem;
}
@media (min-width:1200px){
  .container-xl{width:100%!important;max-width:min(1920px,calc(100vw - 4%))!important;margin:0 auto;}
}

/* ===== Theme hooks ======================================================= */
body.theme-count      { --accent:var(--accent-count); }
body.theme-consume    { --accent:var(--accent-consume); }
body.theme-stats      { --accent:var(--accent-stats); }
body.theme-events     { --accent:var(--accent-events); }
body.theme-items      { --accent:var(--accent-items); }
body.theme-locations  { --accent:var(--accent-locations); }
body.theme-categories { --accent:var(--accent-categories); }

html,body{height:100%;}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-weight:500;
}

/* ===== Layout ============================================================== */
.content-wrap{flex:1 0 auto;padding:0 var(--sp-0);padding-top:var(--sp-4);}
.content-wrap:has(>.page-subheader){padding-top:0;}
.row{--bs-gutter-y:var(--sp-4);}

/* ===== Header / Top Nav =================================================== */
.navbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding-top:.55rem;padding-bottom:.55rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[class*="theme-"] .navbar{
  border-bottom-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--accent) 16%, transparent);
}
.navbar .navbar-brand{font-weight:800;letter-spacing:.2px;color:var(--text);}
.navbar .brand-logo{height:36px !important;width:auto !important;display:inline-block}
.navbar .nav-link{font-weight:600;color:#cfd8e3;padding:.35rem .6rem;}
.navbar .nav-link:hover{color:#fff;}
.navbar .nav-link.active{color:var(--accent);}

/* 3-col header grid */
.nav-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:.6rem;}
.nav-left{display:flex;align-items:center;gap:.5rem;}
.nav-center{display:flex;justify-content:center;}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;}

/* Header search */
.header-search{position:relative;min-width:280px;width:540px;max-width:64vw;}
.nav-center .header-search{width:100%;max-width:980px;min-width:280px;}
.header-search .form-control{
  background:rgba(10,16,28,.55)!important;color:var(--text)!important;
  border:1px solid #2b3a55;border-radius:999px;
  padding:.55rem 2.5rem .55rem 1rem;backdrop-filter: blur(6px);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.header-search .form-control:focus,
.header-search .form-control:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 .18rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.header-search .bi-search{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);opacity:.85;pointer-events:none;}
.header-search .kbd{display:none;}

/* Search pop */
.search-pop{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:.75rem;overflow:hidden;box-shadow:0 18px 38px rgba(0,0,0,.45);z-index:1040;display:none;
}
.search-pop.show{display:block;}
.search-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .85rem;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(255,255,255,.03);
}
.search-item:last-child{border-bottom:0;}
.search-item:hover{background:#162238;}
.search-item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.75rem;}
.badge-cat{font-size:.72rem;border:1px solid currentColor;padding:.1rem .4rem;border-radius:.5rem;opacity:.9;}
.badge-vare{color:#7db3ff;}
.badge-lok{color:#d6a8ff;}
.badge-kamp{color:#9be6b1;}
.badge-side{color:#b9c2d3;}

/* ===== Subheader ========================================================== */
.page-subheader{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.6rem 0;margin:0 0 1rem 0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[class*="theme-"] .page-subheader{
  border-bottom-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--accent) 20%, transparent);
}
.page-subheader h4{font-size:1.08rem;line-height:1.2;margin:0;color:var(--text);}

/* ===== Cards =============================================================== */
.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:none;
  color:var(--text);
  margin-bottom:1.1rem;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);
}
.card-header{
  background:#0f1626;border-bottom:1px solid var(--border);
  font-weight:800;padding:.85rem 1rem;border-top-left-radius:12px;border-top-right-radius:12px;color:var(--text);
}
.card-body{padding:1.05rem;color:var(--text);}

/* ===== Type / utilities ================================================== */
a{color:#93c5fd;} a:hover{color:#cfe1ff;}
.text-muted{color:var(--muted)!important;}
.text-dark,.link-dark,.text-black,.text-body,.text-body-emphasis{color:var(--text)!important;}
.bg-body,.bg-white{background:var(--surface-2)!important;color:var(--text)!important;}
.bg-body-tertiary{background:var(--surface-3)!important;color:var(--text)!important;}
.list-group-item{background:transparent;color:var(--text);border-color:var(--border);}
.badge{color:var(--text);}

/* Outline badges */
.badge-outline{background:transparent;border:1px solid currentColor;}
.badge-kamp    {color:color-mix(in oklab, var(--accent-events) 80%, #fff);}
.badge-lokation{color:color-mix(in oklab, var(--accent-locations) 80%, #fff);}
.badge-varer   {color:color-mix(in oklab, var(--accent-items) 80%, #fff);}

/* Alerts */
.alert{background:var(--surface-3);color:var(--text);border-color:var(--border);}
.alert-success{border-left:3px solid var(--bs-success);}
.alert-danger{border-left:3px solid var(--bs-danger);}
.alert-warning{border-left:3px solid var(--bs-warning);}

/* ===== Tables ============================================================ */
.table{border-color:var(--border);color:var(--text);}
.table thead th,.table thead td{
  background:#0d1526;border-bottom:1px solid var(--border)!important;
  padding:.70rem .85rem;font-weight:800;color:var(--text)!important;
}
.table>:not(caption)>*>*{padding:.75rem .85rem;border-color:var(--border);color:var(--text)!important;}
.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:#101a2d;}
.table-striped>tbody>tr:nth-of-type(even)>*{background-color:#0c1324;}
.table-hover>tbody>tr:hover>*{background-color:#152136;}
.table tfoot th,.table tfoot td{
  background:#0d1526;border-top:2px solid var(--border)!important;font-weight:800;padding:.85rem;color:var(--text)!important;
}

/* ===== Forms ============================================================= */
.form-label{font-weight:700;margin-bottom:.3rem;color:#cbd5e1;}
.form-control,.form-select{
  background:var(--surface-3)!important;
  border:1px solid #2b3a55;color:var(--text)!important;border-radius:.5rem;
}
.form-control::placeholder{color:#7c889a;}
.form-control:focus,.form-select:focus{
  background:var(--surface-3)!important;color:var(--text)!important;caret-color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.input-qty{font-size:1.05rem;font-weight:800;text-align:center;background:var(--surface-3);color:var(--text);}
.input-qty.neg{ color:#ff9aa5; } /* negative displays red */

/* big forms for transfer page */
.form-xxl{padding:.7rem 1rem!important;font-size:1.05rem!important;border-radius:.75rem!important}

/* ===== Buttons =========================================================== */
.btn{border-radius:.45rem;font-weight:700;}
.btn-lg{min-height:2.1rem;padding:.42rem .9rem;font-size:.95rem;}
.btn-sm{padding:.25rem .5rem;font-size:.85rem;}
.btn-pill{border-radius:999px;}
.btn-primary{background-color:#2563eb;border-color:#2563eb;}
.btn-primary:hover{background-color:#1e4fd0;border-color:#1e4fd0;}
.btn-success{background-color:#1a9a55;border-color:#1a9a55;}
.btn-success:hover{background-color:#168349;border-color:#168349;}
.btn-danger{background-color:#e23a4a;border-color:#e23a4a;}
.btn-danger:hover{background-color:#c83240;border-color:#c83240;}
.btn-secondary{background-color:#3a4759;border-color:#3a4759;}
.btn-secondary:hover{background-color:#323f4f;border-color:#323f4f;}
.btn-outline-primary{color:#cfe1ff;border-color:#3566a8;}
.btn-outline-primary:hover{background:#172338;border-color:#3e73bd;color:#eaf2ff;}
.btn-outline-secondary{color:#cfd8e3;border-color:#3b4a63;}
.btn-outline-secondary:hover{background:#161e2c;border-color:#4a5b79;color:#eef2f8;}
.btn-outline-danger{color:#ffd7db;border-color:#a34752;}
.btn-outline-danger:hover{background:#2a1518;border-color:#ba5763;color:#ffecef;}

/* ===== KPIs / Tiles ====================================================== */
.kpi{font-size:1.6rem;font-weight:900;color:var(--text);}
.kpi-sub{color:var(--muted);font-size:.9rem;}
.metric-value{font-size:1.55rem;line-height:1.1;font-weight:800;color:var(--text);}
.metric-positive{color:#86efac;}
.metric-negative{color:#ff9aa5;}

.site-footer{color:#cbd5e1;background:var(--surface);border-top:1px solid var(--border);padding:.85rem 0;margin-top:0;}

.loc-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1rem;}
@media (min-width:576px){ .loc-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .loc-grid{grid-template-columns:1fr 1fr 1fr;} }

.loc-card{
  display:block;position:relative;text-decoration:none;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.9rem 1rem;color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:none;
}
.loc-card .lc-title{font-weight:800;}
.loc-card .lc-badges .badge{margin-left:.25rem;}
.loc-card:hover{
  transform:translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);
}
.loc-card.active{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}

.location-card.status-done{border-left:3px solid var(--bs-success);}
.drag-handle{cursor:grab;opacity:.65;}
tbody.reordering tr{user-select:none;}
tr.dragging{opacity:.55;}
.section-divider{display:flex;align-items:center;gap:.75rem;color:var(--muted);}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.section-divider>span{white-space:nowrap;font-weight:800;font-size:.9rem;letter-spacing:.2px;}

.home-tiles{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:768px){ .home-tiles{grid-template-columns:1fr 1fr;} }
@media (min-width:1200px){ .home-tiles{grid-template-columns:1fr 1fr 1fr;} }
.home-tile{position:relative;display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;box-shadow:none;color:var(--text);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;min-height:220px;}
.home-tile:hover{transform:translateY(-2px);border-color: color-mix(in oklab, var(--accent) 40%, var(--border));box-shadow:0 14px 32px rgba(0,0,0,.35),0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);}
.home-tile .tile-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));padding:.9rem 1rem;border-top-left-radius:14px;border-top-right-radius:14px;display:flex;align-items:center;gap:.6rem;}
.home-tile .tile-title{font-weight:800;letter-spacing:.2px;font-size:1.05rem;color:var(--text);}
.home-tile .tile-icon{font-size:1.35rem;opacity:.95;}
.home-tile .tile-body{padding:1rem;flex:1 1 auto;}
.home-tile .tile-footer{padding:.8rem 1rem;border-top:1px dashed var(--border);color:#93c5fd;position:relative;z-index:11;}
.home-tile .tile-footer .link-like,.home-tile .tile-footer a{color:#cfe1ff;cursor:pointer;text-decoration:none;}
.home-tile .tile-footer .link-like:hover,.home-tile .tile-footer a:hover{color:#ffffff;text-decoration:underline;}
.home-tile .tile-link{position:absolute;inset:0;z-index:10;border-radius:inherit;}
.home-tile.tile-blue   {background:linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.04)), var(--surface-2);border:1px solid rgba(59,130,246,.38);}
.home-tile.tile-orange {background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.05)), var(--surface-2);border:1px solid rgba(245,158,11,.40);}
.home-tile.tile-green  {background:linear-gradient(180deg, rgba(22,163,74,.16), rgba(22,163,74,.05)), var(--surface-2);border:1px solid rgba(22,163,74,.40);}
.home-tile.tile-purple {background:linear-gradient(180deg, rgba(139,92,246,.18), rgba(139,92,246,.05)), var(--surface-2);border:1px solid rgba(139,92,246,.42);}
.home-tile.tile-blue   .tile-icon{color:#93c5fd;}
.home-tile.tile-orange .tile-icon{color:#facc15;}
.home-tile.tile-green  .tile-icon{color:#86efac;}
.home-tile.tile-purple .tile-icon{color:#c4b5fd;}
.tile-kicker{color:var(--muted);font-size:.9rem;margin-bottom:.25rem;}
.tile-metric{font-size:1.6rem;font-weight:900;line-height:1.1;color:var(--text);}
.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== Responsive tweaks ================================================== */
@media (max-width:991.98px){
  .nav-grid{grid-template-columns:1fr;}
  .brand-logo{height:30px !important;}
  .navbar .navbar-brand span{font-size:1rem;}
  .nav-right{justify-content:space-between;gap:.35rem;}
  .header-search{max-width:100%!important;width:100%!important;min-width:0;}
  .navbar .btn.btn-light{padding:.375rem .6rem;}
  .navbar .nav-link{padding:.3rem .45rem;}
  .nav-right nav .navbar-nav{flex-wrap:wrap;row-gap:.2rem;}
  .nav-right nav .navbar-nav .nav-item{white-space:nowrap;}
}
@media (max-width:575.98px){
  .navbar{padding-top:.45rem;padding-bottom:.45rem;}
  .brand-logo{height:26px !important;}
  .navbar .navbar-brand span{font-size:.95rem;}
  .nav-right{gap:.25rem;}
}

/* ===== Optælling – left sidebar ===== */
.count-layout{ display:grid; grid-template-columns: 300px 1fr; gap:1rem; }
@media (max-width: 991.98px){ .count-layout{ grid-template-columns: 1fr; } }
.count-sidenav{
  position:sticky; top:72px; align-self:start;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:.6rem .6rem; max-height: calc(100vh - 96px); overflow:auto; box-shadow:none;
}
.sn-section + .sn-section{ margin-top:.35rem; padding-top:.35rem; border-top:1px dashed var(--border); }
.sn-title{ font-size:.88rem; font-weight:800; letter-spacing:.2px; color:#cfd8e3; padding:.35rem .4rem .25rem; }
.sn-list{ list-style:none; margin:0; padding:.15rem; }
.sn-list li{ margin:0; padding:0; }
.sn-link{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.48rem .6rem; border-radius:.55rem; color:#e6edf7; text-decoration:none; border:1px solid transparent; }
.sn-link:hover{ background:#131c2f; border-color:#23304a; }
.sn-link.active{ background:linear-gradient(180deg, rgba(59,130,246,.15), rgba(59,130,246,.05)); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent); }
.sn-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-badge{ font-size:.72rem; border:1px solid #485673; padding:.04rem .38rem; border-radius:.5rem; opacity:.95; }
.sn-badge.ok{ border-color:#2f855a; color:#86efac; }

.count-main{ min-width:0; }
#tblAll .input-qty{font-weight:900;}

/* ===== Transfer section v2 – full-width card, adaptive grid, mobile-first */
.transfer-card{ position: relative; z-index: 50; }
.transfer-card .card-body{ overflow: visible; }

.transfer-grid{
  display:grid;
  grid-template-columns: 440px 1fr;
  gap:1.1rem;
  align-items:stretch;
}
@media (max-width:1199.98px){ .transfer-grid{ grid-template-columns: 360px 1fr; } }
@media (max-width:991.98px){ .transfer-grid{ grid-template-columns: 1fr; } }

.tcol-left .form-select, .tcol-left .form-control{ width:100%; }
.tcol-left .form-group + .form-group{ margin-top:.75rem; }

/* sticky mobile action for the main button */
.sticky-mobile-action{ position:sticky; bottom:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.2)); padding-top:.5rem; }

/* toolbar */
.itm-toolbar{ display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
#searchInput{ flex:1; }

/* grid scroller */
.itm-grid-wrap{
  --card-min-h: 120px;
  --gap: .9rem;
  max-height: calc(var(--card-min-h) * 3 + var(--gap) * 4);
  overflow-y: auto;
  padding-right: .25rem;
  scrollbar-gutter: stable both-edges;
}
.itm-grid-wrap::-webkit-scrollbar { width: 10px; }
.itm-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.itm-grid-wrap::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background: rgba(100,100,100,.35);
  border-radius: 12px;
  border: 2px solid transparent;
}
.itm-grid-wrap:hover::-webkit-scrollbar-thumb { background: rgba(120,120,120,.55); }
.itm-grid-wrap { scrollbar-width: thin; scrollbar-color: rgba(120,120,120,.55) transparent; }

/* responsive grid – force card layout on tablets/phones */
.itm-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap);
}
@media (max-width:991.98px){
  .itm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:575.98px){
  .itm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* card in two states: face + edit */
.itm-card{
  border:1px solid var(--border);
  background: var(--surface-2);
  padding:1rem .9rem;
  border-radius: 1rem;
  transition: transform .08s ease, border-color .08s ease, background .08s ease;
  display:flex; flex-direction:column; justify-content:center; gap:.45rem;
  min-height: var(--card-min-h);
}
.itm-card:hover{ transform: translateY(-1px); }
.itm-card.active{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent), var(--surface-2);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent) inset;
}

.itm-face{ text-align:center; cursor:pointer; user-select:none; }
.itm-title{ font-weight:800; line-height:1.25; color:var(--text); margin-bottom:.15rem; }
.itm-meta{ display:flex; justify-content:center; align-items:center; gap:.6rem; opacity:.95; }
.itm-unit{ font-size:.78rem; opacity:.9; border:1px solid var(--border); border-radius:999px; padding:.12rem .6rem; }
.itm-help{ font-size:.78rem; color:var(--muted); }
.itm-stock{ margin-top:.2rem; }

.itm-edit{ display:flex; flex-direction:column; align-items:stretch; gap:.5rem; }
.itm-edit-title{ text-align:center; font-weight:800; letter-spacing:.2px; color:#cbd5e1; }
.itm-qty{ font-size:1.15rem; text-align:center; }

.itm-empty{ color:var(--muted); padding:.75rem 0; }

/* Modal */
.modal-content{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.modal-header,.modal-footer{ border-color: var(--border); }
.btn-close.btn-close-white{ filter: invert(1) grayscale(100%) brightness(200%); }

/* Badges */
.badge-warn{ background: rgba(255,193,7,.15); border:1px solid rgba(255,193,7,.4); color:#b08900; padding:.15rem .5rem; border-radius:.5rem; font-size:.8rem; }
.badge-err { background: rgba(220,53,69,.15); border:1px solid rgba(220,53,69,.45); color:#ff9aa5; padding:.15rem .5rem; border-radius:.5rem; font-size:.8rem; }

/* ===== Transfer – picked state improvements ============================== */
.itm-card.has-qty{
  border-color: color-mix(in oklab, var(--accent) 70%, var(--border));
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--accent) 14%, transparent),
              transparent),
              var(--surface-2);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent) 36%, transparent),
    0 10px 22px rgba(0,0,0,.35);
}

/* Stronger glow while editing */
.itm-card.active{
  border-color: color-mix(in oklab, var(--accent) 75%, var(--border));
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--accent) 20%, transparent),
              transparent),
              var(--surface-2);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent),
    0 12px 26px rgba(0,0,0,.38);
}

/* Hide the tip when a quantity has been set */
.itm-card.has-qty .itm-tip{ display:none; }

/* Big, bold, white "selected" amount on the face */
.itm-picked{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.4rem;
  margin-top:.15rem;
  color:#fff;
  font-weight:700;
}
.itm-picked .lbl{
  opacity:.85;
  letter-spacing:.2px;
}
.itm-picked .itm-picked-val{
  color:#fff;
  font-size:1.35rem;
  font-weight:900;
  line-height:1;
}

/* Slight spacing tweak when picked text is shown */
.itm-card.has-qty .itm-title{ margin-bottom:.25rem; }

/* ======== NEW: Waste/Consume – Unit/Serving toggle ======================= */
.itm-edit .mode-toggle{
  display:flex;
  justify-content:center;
  gap:.45rem;
  margin-bottom:.25rem;
}
.itm-edit .mode-btn{
  appearance:none; -webkit-appearance:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  color:#e6edf7;
  border:1px solid #2b3a55;
  border-radius:999px;
  padding:.30rem .70rem;
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.2px;
  cursor:pointer;
  line-height:1.1;
  transition:background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.itm-card.active .mode-btn{ border-color:#3b4a63; }
.itm-edit .mode-btn:hover{ background:#131c2f; border-color:#3e5c90; }
.itm-edit .mode-btn:focus-visible{ outline:0; box-shadow:0 0 0 .18rem color-mix(in oklab, var(--accent) 30%, transparent); }
.itm-edit .mode-btn.active{
  background: color-mix(in oklab, var(--accent) 38%, #172338);
  color:#fff;
  border-color: color-mix(in oklab, var(--accent) 70%, var(--border));
  box-shadow: 0 0 0 .12rem color-mix(in oklab, var(--accent) 28%, transparent);
}
.itm-edit .mode-btn:active{ transform: translateY(1px); }

/* ======== NEW: Wider quantity fields on count pages ====================== */
.input-qty{
  min-width:120px;           /* ensure full numbers are visible */
  padding:.45rem .75rem;
  border-radius:.6rem;
}
@media (max-width:575.98px){
  .input-qty{ min-width:100px; }
}

/* ======== NEW: Stats page polish ======================================== */
.stats-page .chip{
  display:inline-block; border:1px solid #2b3a55; background:#172338;
  padding:.08rem .45rem; border-radius:999px; font-size:.72rem; line-height:1; color:#cfe1ff;
}
.stats-page .wc{ text-align:right; }
.stats-page .wc .main{ font-weight:600; }
.stats-page .wc .sub{ color:var(--muted); font-size:.85rem; }

.stats-page .table thead th{ font-weight:700; letter-spacing:.12px; }
.stats-page .table tfoot th,.stats-page .table tfoot td{ font-weight:700; }
.stats-page .kpi{ font-weight:800; font-size:1.5rem; }

/* ===== Modal polish (center + darker, non-interactive background) ===== */
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: .75; }       /* darker overlay */

.modal.show { display: flex !important; align-items: center; } /* center even in fallback */
.modal.show .modal-dialog { margin: 0 auto; }

/* When a modal is open, don't allow clicking the page behind it */
body.modal-open .navbar,
body.modal-open .page-subheader,
body.modal-open .content-wrap,
body.modal-open .card { pointer-events: none; }
body.modal-open .modal,
body.modal-open .modal * { pointer-events: auto; }

/* ===== NEW: Grouped log styles ========================================== */
.log-group-row{ cursor:pointer; }
.log-group-row:hover > *{ background:#152136 !important; }
.group-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.12rem .45rem; border-radius:.5rem; font-size:.72rem;
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 42%, var(--border));
  color:#cfe1ff;
}
.group-caret{
  display:inline-block; width:.6rem; height:.6rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition: transform .12s ease; opacity:.9;
}
.log-group-row[aria-expanded="true"] .group-caret{ transform:rotate(45deg); }
.log-group-details{ background:#0c1324; }
.log-group-details .table{ margin:0; }
.log-group-details .table thead th{ background:#0b1220!important; }