/* =========================================================
   LAYERS (optional, for organization)
   =======================================================*/
@layer tokens, base, components, utilities;

/* =========================================================
   DESIGN TOKENS
   =======================================================*/
@layer tokens {
  :root{
      --footer-h: 48px; /* adjust to your footer’s actual height */


    --appbar-h: 30px; 
    /* Brand (HSL so you can derive shades) */
    --brand-h: 214; --brand-s: 82%; --brand-l: 52%;
    --clr-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
    --clr-primary-600: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
    --clr-accent: hsl(var(--brand-h) 92% 95%);

    /* Semantic */
    --clr-success: #188451;
    --clr-warning: #f59e0b;
    --clr-danger:  #ec1400;
    --clr-info:    #0ea5e9;

    /* Neutrals */
    --clr-text:    #0e0e0e;
    --clr-neutral: #5F6368;
    --clr-bg:      #F8FAFD;
    --clr-surface: #FFFFFF;
    --clr-border:  #E0E3E7;
    --clr-th:      #F1F3F4;
    --clr-hover:   #f8f9fa;

    /* Typography scale */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing & radii */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
    --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 9999px;

    /* Shadows */
    --shd-100: 0 1px 3px rgba(0,0,0,.08);
    --shd-200: 0 4px 12px rgba(0,0,0,.12);

    /* Tabs */
    --tab-bg-active: var(--clr-accent);
    --tab-fg-active: var(--clr-primary);
    --tab-fg: var(--clr-neutral);
    --tab-hover-bg: var(--clr-hover);
    --tab-hover-fg: var(--clr-danger);

    

    /* Buttons */
    --btn-primary-bg: var(--clr-primary);
    --btn-primary-bg-hover: var(--clr-primary-600);
    --btn-primary-fg: #fff;

    /* Tables */
    --table-head-bg: var(--clr-th);
    --table-head-fg: #3C4043;

    /* Matrix widths (frozen columns) */
    --w-name: 280px;   /* Product */
    --w-avl:   60px;   /* AVL     */
    --w-upc:   60px;   /* UPC     */
  }

  /* Dark mode overrides */
  @media (prefers-color-scheme: dark){
    :root{
      --clr-text:       #E8EAED;
      --clr-bg:         #121212;
      --clr-surface:    #1E1E1E;
      --clr-border:     #2C2C2C;
      --clr-th:         #2C2C2C;
      --tab-hover-bg:   #2a2a2a;
      --table-head-fg:  #E8EAED;
    }
  }
}

/* =========================================================
   BASE
   =======================================================*/
@layer base {
  html, body { height: 100%; }
  body{
    background: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);

  }
  main { scroll-margin-top: 72px; } /* anchors land below appbar */

  button, .btn, .nav-link{ transition: all .2s ease-in-out; }
}

/* =========================================================
   COMPONENTS
   =======================================================*/
@layer components {

  /* APP BAR & TABS */
  .appbar{
    position: sticky; top: 0; z-index: 1030;
    background: var(--clr-surface);
    /*border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 1px 3px rgba(60,64,67,.15);*/
    border-bottom: none !important;
  box-shadow: none !important;
  }
  .appbar.elevate{ box-shadow: var(--shd-200); }

  /* Tabs overflow on small screens */
  .appbar .nav-tabs{ overflow-x: auto; white-space: nowrap; scrollbar-width: thin; box-shadow: 0 1px 3px rgba(60,64,67,.15);}
  .appbar .nav-tabs::-webkit-scrollbar{ height: 6px; }

  .nav-tabs{ border-bottom: 1px; /*solid var(--clr-border);*/ }
  .nav-tabs .nav-link{
    color: var(--tab-fg);
    border: none;
    font-weight: var(--fw-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: .4rem .6rem;
  }
  .nav-tabs .nav-link.active{
    color: var(--tab-fg-active);
    background: var(--tab-bg-active);
    border: none;
    border-radius: 6px 6px 0 0;
  }
  .nav-link:hover {
    background-color: var(--tab-hover-bg);
    color: var(--tab-hover-fg);
  }
  .nav-link.disabled{ pointer-events: none; opacity: .5; }

  

  /* UTILITIES & MICRO UI */
  .badge-brand{
    background: var(--clr-accent);
    color: var(--clr-primary);
    border: none;
    font-weight: var(--fw-semibold);
    padding: 4px 8px;
    border-radius: var(--radius);
  }
  .btn-xxs{
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .35rem;
    --bs-btn-font-size: .7rem;
    --bs-btn-border-radius: .25rem;
    padding: .15rem .45rem;
    line-height: .5;
  }

  .btn.btn-xxs {
  padding: 0.35rem 0.35rem !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  border-radius: 0.25rem !important;
}
  .btn-ghost{ background: transparent; border: 1px solid var(--clr-border); }
  .btn-ghost:hover{ background: var(--clr-th); }

  .pill{
    border-radius: 12px;
    padding: .2rem .6rem;
    background: var(--clr-accent);
    color: var(--clr-primary);
    font-weight: var(--fw-medium);
    border: none;
  }
  .muted{ color: var(--clr-neutral); }
  .kpi{ font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--clr-primary); }

  /* FORMS */
  .form-control, .form-select{
    background: var(--clr-surface);
    border: 1px solid #DADCE0;
    color: var(--clr-text);
    border-radius: var(--radius);
    transition: border .2s, box-shadow .2s;
  }
  .form-control:focus, .form-select:focus{
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 25%, transparent);
    outline: none;
  }

  /* Buttons */
  .btn-primary{
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    font-weight: var(--fw-medium);
  }
  .btn-primary:hover{
    background-color: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
  }
  .btn-outline-light{
    color: var(--clr-primary);
    border-color: var(--clr-primary);
  }
  .btn-outline-light:hover{
    background: var(--clr-accent);
    color: var(--clr-primary-600);
    border-color: var(--clr-primary-600);
  }

  /* CHOICES.JS — CLASSIC BOOTSTRAP LOOK */
  
  /* TABLES & STICKY HEADERS (base visuals) */
  .table{ border-color: var(--clr-border); }
  .table thead th{
    background: var(--table-head-bg);
    color: var(--table-head-fg);
    font-weight: var(--fw-medium);
    border-bottom: 2px solid var(--clr-border);
  }
  .table td, .table th{
    border-color: var(--clr-border);
    color: var(--clr-text);
    vertical-align: middle;
  }
  .table td:hover, .table th:hover { background-color: var(--clr-bg); }
  .table tbody tr:hover{ background: var(--clr-bg); }

  /* Sticky header for any sticky table */
  .table-sticky thead th{
    position: sticky;
    top: 0; z-index: 6;
    background: var(--table-head-bg);
      background-clip: padding-box;         /* avoid bleed with borders */

  }

  /* CARDS (incl. Delivery Board cards) */
  .card{
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shd-100);
  }
  .card-header{
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    font-weight: var(--fw-semibold);
    color: #1F1F1F;
    padding: 0.5rem 1rem;
  }
  .card-body { padding: 0.75rem; }

  /* Delivery Board layout */
  .day-col{ padding:.25rem; }
  .day-title{ font-weight:var(--fw-semibold); margin-bottom:.4rem; color:#1f2937; }
  .day-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; justify-content:flex-start; }

  .delivery-card{
    border-radius:10px; padding:.65rem .75rem;
    border:1px solid transparent;
    width:fit-content; max-width:440px;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
  }
  .card-purchase{ background:#eaf3ff; border-color:#c5dcff; }
  .card-dropship{ background:#fff9e6; border-color:#f6e5b3; }
  .card-sale    { background:#e8f7ec; border-color:#c6e8cd; }
  .delivery-card .meta{
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; flex-wrap:wrap;
  }
  .delivery-card .party{ font-weight:var(--fw-semibold); color:#111827; }
  .delivery-card .subtle{ color:#374151; font-size:.85rem; }


  .badge, .badge-dn, .badge-po {
    display: inline-flex;  
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-pill);
    padding: .06rem .06rem !important; 
    font-weight: var(--fw-semibold);
    font-size: .75rem !important;
    line-height: 1 !important;

    }

  .badge-po{
    background: var(--clr-primary);
    color: #fff;
  }

  .badge-dn{
    background: var(--clr-success);
    color: #fff;
  }

  .badge-dn:hover, .badge-po:hover {
    background: var(--clr-danger);
    color: #fff;
    text-decoration: none;
  } 

  

  /* Matrix column header (compact) */
  .mx-head { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 6px 4px; line-height:1.15; }
  .mx-head-top { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; }
  .mx-party { font-weight:var(--fw-bold); font-size:1.05rem; text-align:center; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mx-kebab.btn { padding:0 4px; line-height:1; font-weight:var(--fw-bold); }
  .mx-sub { font-size:.8rem; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:center; }
  .mx-badges { display:flex; gap:6px; justify-content:center; align-items:center; }

  .mx-kebab {
    padding: 0 3px;
    line-height: 1;
    font-size: 1.1rem;
    color: #6b7280;
    background: transparent;
    border: none;
  }
  .mx-kebab:hover, .mx-kebab:focus { color: #111827; box-shadow: none; }
  .header-with-menu { display: flex; align-items: center; justify-content: flex-start; gap: 2px; }
  .header-with-menu .mx-kebab { padding: 0 2px 0 0; margin-right: 2px; line-height: 1; font-size: 1rem; color: #6b7280; background: transparent; border: none; }
  .header-with-menu .mx-kebab:hover { color: #111827; }
  .header-with-menu .party-name { font-weight: var(--fw-medium); font-size: .75rem; }

  /* matrix table + sticky header cells must NOT clip overflow */
  .table-matrix,
  .table-matrix thead,
  .table-matrix thead tr,
  .table-matrix th.order,
  .table-matrix th.order .head {
    overflow: visible !important;
    position: relative;
  }
  /* sticky layering: row1 above row2 */
  .table-matrix thead tr:first-child th { position: sticky; top: 0; z-index: 60; }
  .table-matrix thead tr:nth-child(2) th { position: sticky; top: var(--mx-head1-h, 32px); z-index: 30; }

  /* keep horizontal scroll, but allow dropdown to overflow vertically */
  .table-responsive { overflow-x: auto; overflow-y: visible; }
  /* ensure the menu stacks above sticky columns/header */
  .table-matrix .dropdown-menu { z-index: 2000; }

  /* PRODUCT TABLE LAYOUT */
  #tblProducts{ table-layout: fixed; }
  #tblProducts th, #tblProducts td{ vertical-align: middle; }
  #tblProducts thead th:nth-child(1){ width:28%; }                 /* Product  */
  #tblProducts thead th:nth-child(2){ width:10%; text-align:right; } /* Reorder  */
  #tblProducts thead th:nth-child(3){ width:12%; text-align:right; } /* Sale     */
  #tblProducts thead th:nth-child(4){ width:10%; text-align:right; } /* VAT      */
  #tblProducts thead th:nth-child(5){ width:auto; }                   /* Variants */
  #tblProducts thead th:nth-child(6){ width:140px; text-align:right; }/* Actions  */
  #tblProducts tbody td:nth-child(2),
  #tblProducts tbody td:nth-child(3),
  #tblProducts tbody td:nth-child(4),
  #tblProducts tbody td:nth-child(6){ text-align: right; }
  #tblProducts .variants-cell{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #productSearch{ max-width: 260px; }

  /* MATRIX TABLES (Open/Planned, Purchase) */
  .table-matrix{ table-layout: fixed; width: 100%; }
  .table-matrix th, .table-matrix td{ vertical-align: middle; text-align: center; }
  .table-matrix th.text-start, .table-matrix td.text-start{ text-align: left !important; }
  .mono{ font-variant-numeric: tabular-nums; }

  /* --- Frozen first 3 columns --- */
  .table-matrix .stick-0,
  .table-matrix .stick-1,
  .table-matrix .stick-2{
    position: sticky; z-index:5;
    background: var(--clr-surface);
    background-clip: padding-box;
    border-right: 1px solid var(--clr-border);
  }
  .table-matrix .stick-0{ left: 0; border-left: 1px solid var(--clr-border); }
  .table-matrix .stick-1{ left: var(--w-name); }
  .table-matrix .stick-2{ left: calc(var(--w-name) + var(--w-avl)); box-shadow: 2px 0 0 rgba(0,0,0,.05); }

  /* Widths (apply to th & td) */
  .table-matrix .col-name{
    width:var(--w-name); min-width:var(--w-name); max-width:var(--w-name);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .table-matrix .col-avl{
    width:var(--w-avl); min-width:var(--w-avl); max-width:var(--w-avl);
    white-space:nowrap;
  }
  .table-matrix .col-upc{
    width:var(--w-upc); min-width:var(--w-upc); max-width:var(--w-upc);
    white-space:nowrap;
  }

  /* Per-order columns (single line ~15ch) */
  .table-matrix th.order, .table-matrix td.order{
    width:17ch; min-width:17ch; max-width:17ch;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    border-left: 2px solid var(--clr-border);
  }
  .table-matrix th.order .head{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .table-matrix .actions{ gap:.25rem; }

  /* Availability coloring */
  .table-matrix td.cell-ok   { color: var(--clr-success) !important; }
  .table-matrix td.cell-short{ color: var(--clr-danger)  !important; }

  /* Rightmost edge */
  .table-matrix tr > *:last-child{ border-right: 2px solid var(--clr-border); }
  .table-matrix td.order:hover{ filter: brightness(.98); }

  .table-matrix .col-avl,
    .table-matrix .col-upc,
    .table-matrix thead tr:nth-child(2) .col-avl,
    .table-matrix thead tr:nth-child(2) .col-upc {
      text-align: center !important;
    }

  /* ===== FULL GRID BORDERS (APPLY AFTER BASE TABLE STYLES) ===== */

  /* General tables (Products, Customers, Suppliers, etc.) */
  .table,
  .table th,
  .table td {
    border: 1px solid var(--clr-border) !important;
    border-collapse: collapse !important;
  }
  .table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
  }
  .table th:first-child,
  .table td:first-child { border-left: 2px solid var(--clr-border); }
  .table th:last-child,
  .table td:last-child  { border-right: 2px solid var(--clr-border); }

  /* Matrix tables */
  .table-matrix,
  .table-matrix th,
  .table-matrix td {
    border: 1px solid var(--clr-border) !important;
    border-collapse: collapse !important;
    border-spacing: 0;
  }
  .table-matrix thead th {
    border-top: 2px solid var(--clr-border);
    border-bottom: 2px solid var(--clr-border);
    background: var(--table-head-bg);
    color: var(--table-head-fg);
    font-weight: var(--fw-semibold);
  }
  .table-matrix tbody tr:last-child td {
    border-bottom: 2px solid var(--clr-border);
  }

  /* Hover states with borders preserved */
  .table tbody tr:hover td,
  .table-matrix tbody tr:hover td {
    background: color-mix(in srgb, var(--clr-primary) 5%, var(--clr-bg));
  }
}

  /* Center-align all cells in the 2nd header row of matrix tables */
  .table-matrix thead tr:nth-child(2) th {
    text-align: center;
    vertical-align: middle;
  }

/* =========================================================
   UTILITIES
   =======================================================*/
@layer utilities {
  .text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .max-w-100 { max-width: 100%; }
  .w-15ch { width: 15ch; }
  .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  @media (max-width: 1100px) {
    #mainTabs .nav-link { padding: .45rem .5rem; }
    #mainTabs .nav-link i { margin-right: 0 !important; }
    #mainTabs .nav-link { gap: 0; }
    /* If you wrap text in a span.label, you can hide it like:
       #mainTabs .nav-link .label { display: none; } */
  }
}

/* === Nav tab color logic (active = blue, hover = red) === */

/* default/inactive */
.appbar .nav-tabs .nav-link {
  color: var(--tab-fg, var(--clr-neutral));      /* grey text */
  background: transparent;
}
.appbar .nav-tabs .nav-link i { color: inherit; } /* icons follow text color */

/* active */
.appbar .nav-tabs .nav-link.active {
  color: var(--tab-fg-active, var(--clr-primary));  /* blue text */
  background: var(--tab-bg-active, var(--clr-accent));
  border: none;
  border-radius: 6px 6px 0 0;
}

/* hover (only when NOT active) */
.appbar .nav-tabs .nav-link:not(.active):hover {
  color: var(--clr-danger);                        /* red text */
  background: var(--tab-hover-bg, var(--clr-hover));
}

/* optional: pressed/focus states stay red on inactive */
.appbar .nav-tabs .nav-link:not(.active):focus,
.appbar .nav-tabs .nav-link:not(.active):active {
  color: var(--clr-danger);
}




/* Make the Order modal use (almost) full viewport height */
#orderModal .modal-dialog{
  max-width: min(1100px, 96vw);          /* wide but responsive */
  height: 80%;                           /* take most of the screen */
  margin: 2vh auto;                       /* small breathing room */
}
#orderModal .modal-content{ height: 100%; }
#orderModal .modal-body{
  overflow: auto;                         /* scroll body, not the page */
  max-height: calc(90vh - 120px);         /* subtract header/footer */
}

/* On small screens, just go full-screen */
@media (max-width: 768px){
  #orderModal .modal-dialog{ height: 100dvh; margin: 0; }
  #orderModal .modal-body{ max-height: calc(100dvh - 120px); }
}

/* Choices.js dropdown: make the panel tall and scrollable */
.choices__list--dropdown,
.choices__list[aria-expanded]{
  max-height: 50vh !important;     /* show lots more options */
  overflow: auto;                  /* scroll inside the panel */
}

/* Optional: slightly bigger single-line input area */
.choices__inner{ min-height: 2.5rem; }  /* taller input chip area */

.toast {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.hide {
  opacity: 0;
  transform: translateY(-10px);
}

/* Choices.js — make it look exactly like Bootstrap form-select */
.choices { display:block; width:100%; min-width:0; font-size:1rem; }

.choices__inner{
  display:flex; align-items:center;
  min-height: calc(2.25rem + 2px);                /* same as .form-select */
  padding: .375rem 2.25rem .375rem .75rem;        /* room for caret */
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: none;
}

.choices__list--single { padding:0; margin:0; }
.choices__list--single .choices__item { margin:0; background:transparent; }

/* caret */
.choices[data-type*="select-one"]::after{
  content:"";
  width:.6rem; height:.6rem;
  border-right:2px solid var(--bs-secondary-color);
  border-bottom:2px solid var(--bs-secondary-color);
  transform: rotate(45deg);
  position:absolute; right:.9rem; top:50%; margin-top:-.35rem;
  pointer-events:none;
}
.choices[data-type*="select-one"].is-open::after{
  transform: rotate(-135deg); margin-top:-.15rem;
}

/* dropdown */
.choices__list--dropdown,
.choices__list[aria-expanded]{
  border:1px solid var(--bs-border-color);
  border-radius:.375rem;
  box-shadow: var(--bs-box-shadow);
  margin-top:.25rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted{
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* focus ring like Bootstrap */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  outline: 0;
}

/* === Size variants to match .form-select-sm / -lg === */
.form-select.form-select-sm + .choices .choices__inner,
.form-control.form-control-sm + .choices .choices__inner{
  min-height: calc(1.8125rem + 2px);
  padding: .25rem 2rem .25rem .5rem;
  font-size: .875rem;
  border-radius: .25rem;
}

.form-select.form-select-lg + .choices .choices__inner,
.form-control.form-control-lg + .choices .choices__inner{
  min-height: calc(3rem + 2px);
  padding: .5rem 2.5rem .5rem 1rem;
  font-size: 1.25rem;
  border-radius: .5rem;
}

/* --- Dark appbar override --- */

/* --- Dark topbar section (wide + glossy) --- */
.appbar .topbar {
  background: linear-gradient(90deg, #111827 0%, #1f2937 100%); /* dark gradient */
  color: #f5f5f5;
  /*border-radius: 6px;*/
  padding: .5rem .5rem;             /* increased padding for more height */
  min-height: 60px;                 /* ensures consistent height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle depth */
}

/* Make text and icons bright */
.appbar .topbar h1,
.appbar .topbar span,
.appbar .topbar i {
  color: #ffffff !important;
}

/* Muted (username etc.) */
.appbar .topbar .muted {
  color: #cbd5e1 !important;
}

/* Buttons on dark background */
.appbar .topbar .btn-outline-dark {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.appbar .topbar .btn-outline-dark:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

.appbar .topbar .btn-outline-primary,
.appbar .topbar .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.appbar .topbar .btn-outline-primary:hover,
.appbar .topbar .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

/* Optional: make buttons vertically centered visually */
.appbar .topbar .btn-sm {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Slight spacing tweak for logo/title alignment */
.appbar .topbar img {
  margin-right: .4rem;
}

/* Flat, minimal card header: no padding, only bottom border */
.card-header.header-flat {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* If you also want the content to align flush under flat headers */
.card.header-flat-body .card-body {
  padding: 0;
}

/* Flat header for all panels (no padding, only bottom border) */
.panel.card .card-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  padding: 5px 0px 10px 0px;
  margin: 0;
  box-shadow: none;
}

/* Remove body padding so table aligns flush with the header */
.panel.card .card-body { padding: 0; }

/* Remove card chrome around matrix panels */
.panel.card { border: 0; box-shadow: none; }

/* Matrix tables: flat header look + thin gridlines */
.table-matrix thead th{
  
  position: sticky;
  background: var(--clr-surface);        /* no transparency */
  z-index: 60;                            /* base for row 1 */
  color: var(--table-head-fg);
  border-bottom: 1px solid var(--clr-border);
}

/* Keep gridlines light */
.table-matrix th, .table-matrix td { border-color: #eceff3; }

/* Compact row height like your screenshot 2 */
.table.table-sm > :not(caption) > * > * { padding: .4rem .5rem; }

/* Hover stays subtle */
.table-matrix tbody tr:hover td { background: #fafcff; }

.table-matrix thead tr:first-child th { z-index: 60; top: 0; }
.table-matrix thead tr:nth-child(2) th { z-index: 50; }
.table-matrix thead th.stick-0 { z-index: 120; }
.table-matrix thead th.stick-1 { z-index: 110; }
.table-matrix thead th.stick-2 { z-index: 100; }

/* ===== SORTABLE TABLE HEADERS (used by Transactions, etc.) ===== */

/* Make sortable headers look interactive */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover effect */
th.sortable:hover {
  background-color: color-mix(in srgb, var(--clr-primary) 5%, var(--clr-th));
  color: var(--clr-primary);
}

/* Sorting arrow indicators */
th.sortable::after {
  content: "";
  display: inline-block;
  margin-left: .35rem;
  border: 4px solid transparent;
  vertical-align: middle;
  opacity: 0.5;
}

/* Up and down states */
th.sortable.sorted-asc::after {
  border-bottom-color: currentColor;
  transform: translateY(-1px);
}

th.sortable.sorted-desc::after {
  border-top-color: currentColor;
  transform: translateY(1px);
}

/* Optional: make the active header stand out */
th.sortable.sorted-asc,
th.sortable.sorted-desc {
  color: var(--clr-primary);
  font-weight: var(--fw-semibold);
}

#actionTotals {
  margin: .5rem 0 .25rem;
  /*
  padding: .25rem .5rem;

  /*background: color-mix(in srgb, var(--clr-primary) 5%, transparent);*/
  /*border: 1px solid var(--clr-border);*/
  border-radius: 6px;
}
#actionTotals strong { color: var(--clr-primary); }

.matrix-topbar {
  margin: .5rem 0 .25rem;
  /*padding: .35rem .6rem;
  /*border: 1px solid var(--clr-border);*/
  border-radius: 6px;
  /*background: color-mix(in srgb, var(--clr-primary) 5%, transparent);*/
}
.matrix-topbar-inner {
  color: var(--tab-fg, var(--clr-neutral));      /* grey text */
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
}