:root {
  --g-font-size: var(--mt-fluid-font, 0.9rem);
  --g-radius: 8px;
  --g-border: #c3c8cf;
  --g-border-strong: #9ea6b0;
  --g-bg: #ffffff;
  --g-text: #1f3347;
  --g-muted: #5a6876;
  --g-header-bg: #f3f6fb;
  --g-header-text: #4f6470;
  --g-row-even: #f8fafc;
  --g-row-odd: #ffffff;
}

/* 1) Button */
.g-btn {
  --g-btn-w: auto;
  --g-btn-h: 34px;
  --g-btn-px: 10px;
  --g-btn-bg: #ffffff;
  --g-btn-border: #c3c8cf;
  --g-btn-color: #1f3347;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--g-btn-w);
  min-width: var(--g-btn-w);
  max-width: var(--g-btn-w);
  min-height: var(--g-btn-h);
  padding: 4px var(--g-btn-px);
  border: 1px solid var(--g-btn-border);
  border-radius: var(--g-radius);
  background: var(--g-btn-bg);
  color: var(--g-btn-color);
  font: inherit;
  font-size: var(--mt-fluid-font, 0.9rem);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.g-btn:hover {
  border-color: var(--g-border-strong);
}

.g-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.g-btn.g-btn-danger {
  --g-btn-bg: #dc2626;
  --g-btn-border: #dc2626;
  --g-btn-color: #ffffff;
}

.g-btn.g-btn-danger:hover {
  --g-btn-bg: #b91c1c;
  --g-btn-border: #b91c1c;
}

.g-btn.g-btn-danger:disabled {
  --g-btn-bg: #eef2f6;
  --g-btn-border: #c3c8cf;
  --g-btn-color: #8a97a5;
  opacity: 1;
}

/* 2) Dropdown (adjustable width) */
.g-select {
  --g-control-w: 160px;
  width: var(--g-control-w);
  min-width: var(--g-control-w);
  max-width: var(--g-control-w);
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-bg);
  color: var(--g-text);
  font: inherit;
  font-size: var(--mt-fluid-font, 0.9rem);
  padding: 6px 26px 6px 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5a6e81 50%),
    linear-gradient(135deg, #5a6e81 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 3) Textbox (adjustable width) */
.g-input {
  --g-control-w: 160px;
  width: var(--g-control-w);
  min-width: var(--g-control-w);
  max-width: var(--g-control-w);
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-bg);
  color: var(--g-text);
  font: inherit;
  font-size: var(--mt-fluid-font, 0.9rem);
  padding: 6px 8px;
}

/* 4) Cards with configurable text sizes */
.g-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
}

.g-card {
  --g-card-title-size: var(--app-font-size-md, 0.8rem);
  --g-card-desc-size: var(--app-font-size-sm, 0.6rem);
  --g-card-count-size: var(--app-font-size-md, 0.8rem);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-bg);
  color: var(--g-text);
  padding: 10px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.g-card-title {
  font-size: var(--mt-fluid-font, 0.9rem);
  font-weight: 700;
  line-height: 1.2;
}

.g-card-desc {
  font-size: var(--mt-fluid-font-small, 0.6rem);
  color: var(--g-muted);
  line-height: 1.2;
}

.g-card-count {
  margin-top: auto;
  font-size: var(--mt-fluid-font, 0.9rem);
  font-weight: 700;
  line-height: 1.1;
}

/* 5) Table style + sticky "overtop" columns options */
.g-table-wrap {
  overflow: auto;
  border: 1px solid var(--g-border);
  border-radius: 10px;
  background: var(--g-bg);
}

.g-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mt-fluid-font, 0.9rem);
}

.g-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--g-header-bg);
  color: var(--g-header-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-bottom: 1px solid #d8e0ea;
  padding: 7px 8px;
  white-space: nowrap;
}

.g-table tbody td {
  border-top: 1px solid #e3e8ef;
  color: var(--g-text);
  padding: 6px 8px;
  line-height: 1;
  white-space: nowrap;
}

.g-table tbody tr:nth-child(odd) {
  background: var(--g-row-odd);
}

.g-table tbody tr:nth-child(even) {
  background: var(--g-row-even);
}

/* Filter + sorting UI (reusable with existing th-content/filter-menu structure) */
.g-table .th-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.g-table .th-content > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g-table .filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #5a6e81;
  line-height: 1;
  cursor: pointer;
}

.g-table .filter-toggle:hover,
.g-table .filter-toggle:focus-visible {
  border-color: var(--g-border);
  background: #ffffff;
  outline: none;
}

.g-table .filter-menu {
  min-width: 240px;
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid var(--g-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.18);
  padding: 8px;
  z-index: 1200;
}

.g-table .filter-menu.hidden {
  display: none;
}

.g-table .filter-menu button,
.g-table .filter-menu input[type="text"],
.g-table .filter-menu select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--mt-fluid-font, 0.9rem);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: #ffffff;
  color: var(--g-text);
  padding: 6px 8px;
  margin-bottom: 6px;
}

.g-table .filter-menu button:last-child,
.g-table .filter-menu input[type="text"]:last-child,
.g-table .filter-menu select:last-child {
  margin-bottom: 0;
}

.g-table .filter-menu .filter-check-option,
.g-table .filter-menu .select-all-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.g-table .filter-menu .filter-check-option:hover,
.g-table .filter-menu .select-all-option:hover {
  background: #f8fafc;
  border-color: #e3e8ef;
}

.g-table .filter-menu .filter-values {
  display: grid;
  gap: 4px;
}

.g-table .filter-menu .filter-values-empty {
  color: var(--g-muted);
  font-size: var(--mt-fluid-font, 0.9rem);
  padding: 6px;
}

.g-table.g-sort-running {
  cursor: progress;
}

.g-table th.is-sorting {
  position: relative;
  box-shadow: inset 0 -2px 0 #3b82f6;
}

.g-table th.is-sorting::after {
  content: "SORTING...";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--mt-fluid-font-small, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3b82f6;
  opacity: 0.9;
  pointer-events: none;
  animation: gSortPulse 0.9s ease-in-out infinite;
}

@keyframes gSortPulse {
  0% { opacity: 0.35; }
  50% { opacity: 0.95; }
  100% { opacity: 0.35; }
}

/* Sticky columns: set widths via CSS vars and apply g-stick-{n} on th/td */
.g-table--sticky {
  --g-col-1-w: 46px;
  --g-col-2-w: 104px;
  --g-col-3-w: 70px;
  --g-col-4-w: 120px;
  --g-col-5-w: 120px;
}

.g-table--sticky .g-stick-1,
.g-table--sticky .g-stick-2,
.g-table--sticky .g-stick-3,
.g-table--sticky .g-stick-4,
.g-table--sticky .g-stick-5 {
  position: sticky;
  z-index: 22;
}

.g-table--sticky .g-stick-1 {
  left: 0;
}

.g-table--sticky .g-stick-2 {
  left: var(--g-col-1-w);
}

.g-table--sticky .g-stick-3 {
  left: calc(var(--g-col-1-w) + var(--g-col-2-w));
}

.g-table--sticky .g-stick-4 {
  left: calc(var(--g-col-1-w) + var(--g-col-2-w) + var(--g-col-3-w));
}

.g-table--sticky .g-stick-5 {
  left: calc(var(--g-col-1-w) + var(--g-col-2-w) + var(--g-col-3-w) + var(--g-col-4-w));
}

.g-table--sticky thead .g-stick-1,
.g-table--sticky thead .g-stick-2,
.g-table--sticky thead .g-stick-3,
.g-table--sticky thead .g-stick-4,
.g-table--sticky thead .g-stick-5 {
  z-index: 30;
}