:root {
      --bg: #0f1115;
      --lightbg: #2f3135;
      --stickybg: #1f2125;
      --panel: #181b22;
      --text: #eaeef5;
      --muted: #a9b0be;
      --accent: #5ac8fa;
      --line: #2a2f3a;
      --danger: #ff5e57;
    }
 
    html, body {
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      margin: 0;
      padding: 0;
      height: 100%;   /* ensure root fills viewport */
    }
 
    /* Global page scrollbar */
    html {
      scrollbar-width: thin;
      scrollbar-color: #888 var(--bg);
    }
    html::-webkit-scrollbar { width: 8px; height: 8px; }
    html::-webkit-scrollbar-track { background: var(--bg); }
    html::-webkit-scrollbar-thumb { background-color: #888; border-radius: 4px; }

    /* Table scrollbars */
    .table-scroll {
      scrollbar-width: thin;
      scrollbar-color: #888 var(--bg);
    }
    .table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
    .table-scroll::-webkit-scrollbar-track { background: var(--bg); }
    .table-scroll::-webkit-scrollbar-thumb { background-color: #888; border-radius: 4px; }

    /* Filters scrollbars */
    .filters-body {
      scrollbar-width: thin;
      scrollbar-color: #888 var(--bg);
    }
    .filters-body::-webkit-scrollbar { width: 8px; height: 8px; }
    .filters-body::-webkit-scrollbar-track { background: var(--bg); }
    .filters-body::-webkit-scrollbar-thumb { background-color: #888; border-radius: 4px; }

    header {
      padding: 16px 24px;
      border-bottom: 1px dashed var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
 
    header h1 {
      font-size: 18px;
      margin: 0;
      font-weight: 600;
    }
 
    .container {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      padding: 16px;
    }
 
    .filter-group {
      margin-bottom: 14px;
      border-bottom: 1px dashed var(--line);
      padding-bottom: 12px;
    }
 
    .filter-group:first-child {
      border-top: none;
      padding-top: 0;
    }
 
    .filter-group.collapsible .filter-body {
      display: none;
    }
 
    .filter-group.collapsible.expanded .filter-body {
      display: block;
    }
 
    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 4px;
      border-collapse: collapse;
    }
 
    .filter-group.active .filter-header {
      font-weight: bold;
      background-color: var(--bg-light); /* lighter background */
      color: var(--accent);              /* highlight color */
    }

    .filter-actions {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      border-collapse: collapse;
      gap: 6px;
    }

    .toggle-btn {
      font-size: 0.8rem;
      padding: 2px 6px;
    }

    .inline {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    input[type="number"], input[type="text"], select {
      background: #13161c;
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      outline: none;
      width: 120px;
    }

    .checkbox {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }

    .multi-select {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      background: #13161c;
      max-height: 180px;
      overflow: auto;
    }
 
    .multi-select .item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 2px;
      font-size: 13px;
    }
 
    .multi-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .btn {
      background: #13161c;
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      cursor: pointer;
    }

    .btn.small {
      font-size: 0.75rem;   /* smaller text */
      padding: 2px 6px;     /* tighter padding */
      margin: 0 2px;        /* less spacing between buttons */
      line-height: 1.2;     /* compact height */
    }

    .btn.primary {
      background: var(--accent);
      border-color: transparent;
      color: #001018;
      font-weight: 600;
    }

    .btn.danger {
      background: var(--danger);
      border-color: transparent;
      color: #fff;
    }

    .status-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 14px;
      border-bottom: 1px dashed var(--line);
      padding-bottom: 12px;
    }

    .search-input {
      width: 100%;
      margin-bottom: 8px;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
    }

    .page {
      display: flex;
      flex-direction: column;
      height: 100vh; /* full viewport */
      overflow: hidden; /* prevent whole-page scroll */
    }

    .page-header {
      flex: 0 0 auto;
      padding: 8px;
      position: sticky;
      top: 0; /* always visible */
      z-index: 100;
    }

    .content {
      flex: 1 1 auto;
      display: flex;
      overflow: hidden; /* prevent double scrollbars */
    }

    .filters {
      width: 260;
      display: flex;
      flex-direction: column;
      transition: width 0.25s ease, transform 0.25s ease;
    }

    .filters.hidden {
      width: 0;
      transform: translateX(-100%);
      /* keep overflow-y: auto so vertical scroll still works */
    }

    /* Table expands automatically because of flex */
    .layout { 
      display: flex;
      width: 100%;
    }

    /* Button styling */ 
    .toggle-filters { 
      margin-left: 12px;
      padding: 2px 8px;
      font-size: 12px;
      cursor: pointer;
    }

    .filters-header {
      flex: 0 0 auto;
      padding: 8px;

      position: sticky;
      top: 0; /* always visible at top of sidebar */
      z-index: 10;
    }

    .filters-body {
      flex: 1 1 auto;
      overflow-y: auto; /* independent scroll */
      padding: 8px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .table-scroll {
      flex: 1 1 auto;
      overflow: auto;
    }
    
    .table-area {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      overflow: auto;
    }

    .table-header {
      position: sticky;
      top: 0px;
      left: 0; /* also pin horizontally */
      width: max-content; /* expand to fit all columns */
      z-index: 80;
      background: var(--bg);
    }

    .table-body {
      flex: 1 1 auto;
      display: block; /* ensures rows scroll inside */
    }

    /* Define grid columns once */
    .grid {
      display: grid;
    }

    .summary {
      position: sticky;
      top: 0px;
      left: 0; /* also pin horizontally */
      font-weight: bold;
      background: var(--bg);
      border-bottom: 1px solid #ccc;
    }

   .header-row {
      font-weight: bold;
      background: var(--lightbg);
      border-bottom: 2px solid #ccc;
    }

    .header-row .cell {
      cursor: pointer; /* indicate clickable for sorting */
    }

    .row {
      border-bottom: 1px solid #ddd;
      background: var(--bg);
    }

    .row:hover { 
      background-color: var(--lightbg); /* light highlight */
    }

    .col-hover {
      background-color: var(--lightbg); /* light blue highlight */
      transition: background-color 0.2s;
    }

    .cell {
      padding: 4px;
      border-right: 1px solid #ccc;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }