/* ===================================================================
   GSMobile Modern UI Framework
   Modern, mobile-friendly, transparent controls with minimal spacing
   =================================================================== */

/* Poppins font - self-hosted for offline/intranet use (v22, SIL OFL 1.1) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../Fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../Fonts/Poppins-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../Fonts/Poppins-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../Fonts/Poppins-Bold.woff2') format('woff2');
}

/* ===================================================================
   CSS Variables - Design System
   -------------------------------------------------------------------
   TO REBRAND: Change only these variables to update the entire app.
   The SVG icon files in /Images/ also use #2E9F48 as their fill color.
   To change icon color, find-replace #2E9F48 in all .svg files.
   See README-UI-THEMING.md for full instructions.
   =================================================================== */
:root {
  /* Typography - Poppins is primary; Segoe UI / system fonts as fallback */
  --gs-font: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --gs-font-size-xs: 0.75rem;      /* 12px - fine print, badges */
  --gs-font-size-sm: 0.8125rem;    /* 13px - captions, secondary text */
  --gs-font-size-base: 0.875rem;   /* 14px - compact but readable */
  --gs-font-size-lg: 1rem;         /* 16px */
  --gs-font-size-xl: 1.125rem;     /* 18px */

  /* ===== GSS V2 Skin Palette (from gss vector skin v3 skin.xml) ===== */

  /* Primary Green - icons, emphasis, toggles, tab focus */
  --gs-primary: #2E9F48;            /* KeyPaint */
  --gs-primary-dark: #257F39;       /* KeyPaintDark */
  --gs-primary-light: #4FB962;      /* KeyPaintHigh */
  --gs-primary-highlight: #D1E9CD;  /* Primary Background Highlight */

  /* Accent Blue - selection, row highlight, field focus */
  --gs-blue: #365ECB;               /* AccentPaint */
  --gs-blue-light: #2960EA;         /* AccentPaintLight */
  --gs-blue-dark: #2C50AA;          /* AccentPaintDark */
  --gs-blue-highlight: #D5E0FF;     /* Accent Background Highlight */

  /* Accent Minor Orange - primary action buttons ONLY */
  --gs-accent-minor: #F16C22;       /* AccentMinor Background 0 */
  --gs-accent-minor-light: #F38347; /* AccentMinorLight */
  --gs-accent-minor-dark: #EF5D0F;  /* AccentMinorDark */

  /* Legacy aliases (keep for backward compat in code-behind) */
  --gs-indigo: #365ECB;
  --gs-cyan: #3B8CA2;
  --gs-orange: #F16C22;
  --gs-yellow: #FCA90A;
  --gs-teal: #20c997;

  /* Surface / Background Colors (V2 Background scale) */
  --gs-surface: #FFFFFF;             /* Background 200 - cards, inputs */
  --gs-surface-muted: #EEEEEE;      /* Background -50 - info boxes */
  --gs-surface-header: #F9F9F9;     /* Grid column headers */
  --gs-background: #F3F3F3;         /* Background 0 / Paint - page bg */

  /* Text Colors (V2 Foreground scale) */
  --gs-text: #242424;               /* Foreground 100 / Brush */
  --gs-text-muted: #6b6b6b;         /* Foreground 75 / BrushLight (Genii subtext) */
  --gs-text-light: #9C9C9C;         /* Foreground 50 / BrushLighter */
  --gs-text-disabled: #AAAAAA;      /* Foreground 25 / BrushDisabled */

  /* Border / Line Colors (V2 Line scale) */
  --gs-border: #E4E4E4;             /* Line 25 - subtle borders */
  --gs-border-strong: #D0D0D0;      /* Line 50 - grid lines, dividers */
  --gs-border-heavy: #C0C0C0;       /* Line 75 - emphasis borders */
  --gs-border-focus: #365ECB;       /* Accent blue for focus borders */

  /* Status Colors */
  --gs-success: #2E9F48;
  --gs-danger: #E23642;
  --gs-danger-dark: #B91C26;
  --gs-warning: #F16C22;
  --gs-info: #365ECB;

  /* Contrast / "on-color" tokens */
  --gs-on-primary: #ffffff;
  --gs-on-danger: #ffffff;
  --gs-on-accent-minor: #ffffff;

  /* Icon Color */
  --gs-icon-color: #2E9F48;

  /* Spacing Scale */
  --gs-spacing-xs: 8px;
  --gs-spacing-sm: 12px;
  --gs-spacing-md: 16px;
  --gs-spacing-lg: 24px;
  --gs-spacing-xl: 32px;

  /* Border Radius (set to 0 for sharp/flat; increase for rounded modern look) */
  --gs-radius-sm: 4px;    /* inputs, buttons, checkboxes */
  --gs-radius-md: 6px;    /* cards, banners, dropdowns */
  --gs-radius-lg: 8px;    /* modals, large containers */
  --gs-radius-xl: 12px;   /* hero sections, overlays */

  /* Shadows */
  --gs-shadow-sm: 0 2px 8px rgba(23, 43, 77, 0.08);
  --gs-shadow-md: 0 8px 24px rgba(23, 43, 77, 0.12);
  --gs-shadow-lg: 0 28px 70px rgba(23, 43, 77, 0.18);
  --gs-shadow-focus: 0 0 0 3px rgba(58, 116, 194, 0.2);
  --gs-focus-ring: 3px solid var(--gs-blue);  /* V2: thick border, no gap (Win11 style) */
  --gs-focus-offset: 0px;                      /* No gap between element and focus ring */

  /* Transitions */
  --gs-transition-fast: 0.15s ease;
  --gs-transition-base: 0.18s ease;
  --gs-transition-slow: 0.25s ease;
}

/* ===================================================================
   Dark Mode
   ------------------------------------------------------------------- */
[data-theme="dark"] {
  --gs-surface: #1E1E1E;
  --gs-surface-muted: #2A2A2A;
  --gs-surface-header: #252525;
  --gs-background: #141414;

  --gs-text: #E0E0E0;
  --gs-text-muted: #A0A0A0;
  --gs-text-light: #787878;
  --gs-text-disabled: #555555;

  --gs-border: #333333;
  --gs-border-strong: #444444;
  --gs-border-heavy: #555555;

  --gs-primary-highlight: #1A3D23;
  --gs-blue-highlight: #1A2544;

  --gs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --gs-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --gs-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --gs-shadow-focus: 0 0 0 3px rgba(58, 116, 194, 0.4);
}

/* Topnav logo — dark mode variant */
[data-theme="dark"] .gs-topnav::after {
  background-image: url('../../Images/logo_gs_full_dark.svg');
}

/* Expand/collapse chevron SVGs — invert for dark backgrounds */
[data-theme="dark"] table input[type="image"][id*="imageLines"],
[data-theme="dark"] table input[type="image"][id*="imageItems"],
[data-theme="dark"] table input[type="image"][id*="imageOrders"],
[data-theme="dark"] table input[type="image"][id*="Show"],
[data-theme="dark"] input[type="image"][src*="icon_plus"],
[data-theme="dark"] input[type="image"][src*="minus_black"],
[data-theme="dark"] input[type="image"][src*="chevron"] {
  filter: invert(1);
}

/* Grid row text and links */
[data-theme="dark"] .gs-table td,
[data-theme="dark"] .grid-container td,
[data-theme="dark"] .grid-section td {
  color: var(--gs-text);
}
[data-theme="dark"] .gs-table a,
[data-theme="dark"] .grid-container a,
[data-theme="dark"] .grid-section a {
  color: var(--gs-blue-light);
}

/* Grid row hover */
[data-theme="dark"] .gs-table tr:hover td:not([class*="gs-status"]),
[data-theme="dark"] .grid-container table tr:hover td:not([class*="gs-status"]) {
  background: var(--gs-surface-muted) !important;
}

/* Inputs, selects, textareas in dark mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--gs-surface) !important;
  color: var(--gs-text) !important;
  border-color: var(--gs-border-strong) !important;
}

/* Buttons in dark mode (keep brand orange on cmdButton, gray non-brand) */
[data-theme="dark"] input[type="button"]:not(.cmdButton),
[data-theme="dark"] input[type="submit"]:not(.cmdButton):not(.gs-btn-primary) {
  background: var(--gs-surface-muted) !important;
  color: var(--gs-text) !important;
  border-color: var(--gs-border-strong) !important;
}
[data-theme="dark"] .cmdButton {
  background: var(--gs-accent-minor) !important;
  color: var(--gs-on-accent-minor) !important;
  border-color: var(--gs-accent-minor) !important;
}
[data-theme="dark"] .cmdButton:hover {
  background: var(--gs-accent-minor-dark) !important;
  border-color: var(--gs-accent-minor-dark) !important;
}

/* Warning/error banners */
[data-theme="dark"] .warning-banner,
[data-theme="dark"] .gs-info-box,
[data-theme="dark"] .auth-error {
  background: rgba(235, 125, 58, 0.15) !important;
  color: var(--gs-text) !important;
}

/* Status banner */
[data-theme="dark"] .status-banner {
  background: rgba(226, 54, 66, 0.15) !important;
}

/* Labels */
[data-theme="dark"] .field-label,
[data-theme="dark"] label,
[data-theme="dark"] span[id*="lbl"] {
  color: var(--gs-text);
}

/* ASP.NET inline background overrides for grid headers */
[data-theme="dark"] .gs-table th,
[data-theme="dark"] .grid-container table th,
[data-theme="dark"] .grid-section table th {
  background: var(--gs-surface-header) !important;
  color: var(--gs-text) !important;
  border-color: var(--gs-border-strong) !important;
}

/* Sticky first column background in dark mode (desktop only) */
@media (min-width: 601px) {
  [data-theme="dark"] .grid-container table td:first-child:not([class*="gs-status"]),
  [data-theme="dark"] .grid-section table td:first-child:not([class*="gs-status"]) {
    background: var(--gs-surface) !important;
  }
}

/* Even rows */
[data-theme="dark"] .gs-table tr:not(.gs-section-header):nth-child(even) td:not([class*="gs-status"]),
[data-theme="dark"] .grid-container table tr:not(.gs-section-header):nth-child(even) td:not([class*="gs-status"]) {
  background: var(--gs-surface-muted) !important;
}

/* Odd rows */
[data-theme="dark"] .gs-table tr:not(.gs-section-header):nth-child(odd) td:not([class*="gs-status"]),
[data-theme="dark"] .grid-container table tr:not(.gs-section-header):nth-child(odd) td:not([class*="gs-status"]) {
  background: var(--gs-surface) !important;
}

/* Nested/child grids */
[data-theme="dark"] td[colspan="999"] {
  background: var(--gs-surface) !important;
}

/* Menu cards */
[data-theme="dark"] .Panel {
  background: var(--gs-surface) !important;
  border-color: var(--gs-border) !important;
}
[data-theme="dark"] .Panel:hover {
  box-shadow: var(--gs-shadow-md);
}

/* Page card / main content wrapper */
[data-theme="dark"] .page-card,
[data-theme="dark"] .gs-card {
  background: var(--gs-surface) !important;
  border-color: var(--gs-border) !important;
}

/* Toasts in dark mode */
[data-theme="dark"] .gs-toast {
  background: #2A2A2A !important;
  color: #E0E0E0 !important;
  border: 1px solid #444 !important;
}

/* Legend sections */
[data-theme="dark"] .gs-legend,
[data-theme="dark"] fieldset {
  border-color: var(--gs-border) !important;
}

/* Disabled / readonly fields - light mode */
input[readonly],
input[disabled],
select[disabled] {
  background: #F0F0F0 !important;
  color: #666 !important;
  border-color: #D0D0D0 !important;
}

/* Disabled / readonly fields - dark mode */
[data-theme="dark"] input[readonly],
[data-theme="dark"] input[disabled],
[data-theme="dark"] select[disabled] {
  background: #2A2A2A !important;
  color: #B0B0B0 !important;
  border-color: #444 !important;
}

/* ASP.NET inline color:Black — invisible on dark backgrounds */
[data-theme="dark"] [style*="color:Black"],
[data-theme="dark"] [style*="color: Black"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"] {
  color: var(--gs-text) !important;
}

/* Info banners / section headers */
[data-theme="dark"] .info-banner {
  background: var(--gs-surface-muted) !important;
  color: var(--gs-text) !important;
  border-color: var(--gs-border) !important;
}

/* Legend containers (ActiveWS etc.) */
[data-theme="dark"] .legend-container {
  background: var(--gs-surface-muted);
  border-radius: 4px;
}
[data-theme="dark"] .legend-item {
  color: var(--gs-text) !important;
}
[data-theme="dark"] .legend-inactive     { background-color: #555 !important; }
[data-theme="dark"] .legend-active-gs    { background-color: #3DBF5C !important; }
[data-theme="dark"] .legend-active-gui   { background-color: #5A7FE6 !important; }
[data-theme="dark"] .legend-multi-active { background-color: #F0545E !important; }

/* Grid status indicator cells (narrow color strip in first column) */
.gs-status-green     { background-color: #2E9F48 !important; }
.gs-status-blue      { background-color: #365ECB !important; }
.gs-status-red       { background-color: #E23642 !important; }
.gs-status-grey      { background-color: #D5D5D5 !important; }
.gs-status-lightblue { background-color: #3B8CA2 !important; }
.gs-status-yellow    { background-color: #FCA90A !important; }
.gs-status-orange    { background-color: #EB7D3A !important; }
.gs-status-teal      { background-color: #20c997 !important; }

[data-theme="dark"] .gs-status-green     { background-color: #3DBF5C !important; }
[data-theme="dark"] .gs-status-blue      { background-color: #5A7FE6 !important; }
[data-theme="dark"] .gs-status-red       { background-color: #F0545E !important; }
[data-theme="dark"] .gs-status-grey      { background-color: #555 !important; }
[data-theme="dark"] .gs-status-lightblue { background-color: #52A8BF !important; }
[data-theme="dark"] .gs-status-yellow    { background-color: #E8A820 !important; }
[data-theme="dark"] .gs-status-orange    { background-color: #F09050 !important; }
[data-theme="dark"] .gs-status-teal      { background-color: #38DEAB !important; }

/* Section header rows (DailyWorkSch work center dividers) */
.gs-section-header { background-color: #3A74C2 !important; color: #fff !important; }
.gs-section-header td { color: #fff !important; }
[data-theme="dark"] .gs-section-header { background-color: #2C5A9E !important; }

/* Text utility classes for status colors */
.gs-text-danger  { color: #E23642 !important; }
.gs-text-success { color: #2E9F48 !important; }
[data-theme="dark"] .gs-text-danger  { color: #FF6B6B !important; }
[data-theme="dark"] .gs-text-success { color: #5DD97B !important; }

/* Found / status labels */
[data-theme="dark"] .found-label,
[data-theme="dark"] .found-label span {
  color: var(--gs-text) !important;
}

/* Date hints */
[data-theme="dark"] .date-hint {
  color: var(--gs-text-muted) !important;
}

/* Auth card on login page */
[data-theme="dark"] .auth-card {
  background: var(--gs-surface) !important;
  border-color: var(--gs-border) !important;
}
[data-theme="dark"] .auth-form {
  background: var(--gs-background) !important;
}
[data-theme="dark"] .auth-label {
  color: var(--gs-text) !important;
}

/* Grid sort header links */
[data-theme="dark"] .gs-table th a {
  color: var(--gs-text) !important;
  text-decoration: none;
}
[data-theme="dark"] .gs-table th a:hover {
  text-decoration: underline;
}

/* Sort indicators */
.gs-table th.gs-sortable { cursor: pointer; user-select: none; }
.gs-table th.gs-sortable::after { content: ' \25B2\25BC'; font-size: 0.5em; opacity: 0.3; letter-spacing: -0.15em; }
.gs-table th.gs-sort-asc::after { content: ' \25B2'; font-size: 0.65em; opacity: 0.7; letter-spacing: normal; }
.gs-table th.gs-sort-desc::after { content: ' \25BC'; font-size: 0.65em; opacity: 0.7; letter-spacing: normal; }

/* Scrollbars - light mode */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gs-background); }
::-webkit-scrollbar-thumb { background: var(--gs-border-heavy); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gs-text-light); }

/* Scrollbars - dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a1a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #777; }

/* Firefox scrollbar theming */
* { scrollbar-width: thin; scrollbar-color: var(--gs-border-heavy) var(--gs-background); }
[data-theme="dark"] * { scrollbar-color: #555 #1a1a1a; }

/* Dark mode toggle button */
.gs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--gs-border-strong);
  border-radius: var(--gs-radius-sm);
  color: var(--gs-text);
  cursor: pointer;
  padding: 5px 8px;
  line-height: 1;
  transition: background var(--gs-transition-fast), border-color var(--gs-transition-fast);
}
.gs-theme-toggle:hover {
  background: var(--gs-surface-muted);
  border-color: var(--gs-border-heavy);
}
.gs-theme-toggle svg {
  display: block;
}

/* ===================================================================
   Base Reset & Typography
   =================================================================== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  font-weight: 400;
  color: var(--gs-text);
  line-height: 1.6;
  letter-spacing: -0.006em;
  margin: 0;
  padding: 0;
  background: var(--gs-background) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global focus-visible ring for keyboard accessibility */
*:focus-visible {
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===================================================================
   Layout Utilities
   =================================================================== */

/* Container for form content */
.gs-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--gs-spacing-md);
}

/* Card component */
.gs-card,
.page-card,
.po-card,
.landing-card,
.auth-card {
  border-radius: var(--gs-radius-md) !important;
}

.gs-card {
  background: var(--gs-surface);
  border-radius: var(--gs-radius-md);
  padding: var(--gs-spacing-md);
  border: 1px solid var(--gs-border);
  box-shadow: var(--gs-shadow-sm);
}

/* Flexbox utilities */
.gs-flex {
  display: flex;
}

.gs-flex-col {
  display: flex;
  flex-direction: column;
}

.gs-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-gap-xs { gap: var(--gs-spacing-xs); }
.gs-gap-sm { gap: 6px; }
.gs-gap-md { gap: var(--gs-spacing-md); }
.gs-gap-lg { gap: var(--gs-spacing-lg); }
.gs-gap-xl { gap: var(--gs-spacing-xl); }

/* ===================================================================
   Form Controls - Transparent Design
   =================================================================== */

/* Base input styling - TRANSPARENT until focus */
.gs-input,
.gs-select,
.gs-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--gs-font-size-base);
  font-family: var(--gs-font);
  color: var(--gs-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--gs-radius-sm);
  transition: all var(--gs-transition-base);
  outline: none;
  min-height: 38px;
}

/* Hover state - subtle border */
.gs-input:hover,
.gs-select:hover,
.gs-textarea:hover {
  border-color: var(--gs-border);
}

/* Focus state - outline ring only on keyboard navigation */
.gs-input:focus-visible,
.gs-select:focus-visible,
.gs-textarea:focus-visible {
  background: var(--gs-surface);
  border-color: var(--gs-blue);
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
  box-shadow: none;
}

/* Disabled state */
.gs-input:disabled,
.gs-select:disabled,
.gs-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* TextArea specific */
.gs-textarea {
  min-height: 88px;
  resize: vertical;
}

/* Select/Dropdown specific */
.gs-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ===================================================================
   Buttons
   =================================================================== */

.gs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gs-spacing-sm) var(--gs-spacing-lg);
  font-size: var(--gs-font-size-base);
  font-weight: 600;
  font-family: var(--gs-font);
  color: var(--gs-on-accent-minor);
  background: var(--gs-accent-minor);
  border: 2px solid var(--gs-accent-minor);
  border-radius: var(--gs-radius-sm);
  cursor: pointer;
  transition: all var(--gs-transition-base);
  min-height: 40px;
  text-decoration: none;
  white-space: nowrap;
}

.gs-button:hover {
  background: var(--gs-accent-minor-dark);
  border-color: var(--gs-accent-minor-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(241, 108, 34, 0.25);
}

.gs-button:active {
  transform: translateY(0);
}

.gs-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Button variants */
.gs-button-secondary {
  background: transparent;
  color: var(--gs-text);
  border: 2px solid var(--gs-border-strong);
}

.gs-button-secondary:hover {
  background: var(--gs-surface-muted);
  border-color: var(--gs-border-heavy);
  box-shadow: var(--gs-shadow-sm);
}

.gs-button-danger {
  background: var(--gs-danger);
  border-color: var(--gs-danger);
  color: var(--gs-on-danger);
}

.gs-button-small {
  padding: 8px 16px;
  font-size: 0.875rem;
  min-height: 36px;
}

.gs-button-large {
  padding: 16px 32px;
  font-size: var(--gs-font-size-lg);
  min-height: 52px;
}

/* ===================================================================
   Field Groups
   =================================================================== */

/* Field row with label and input */
.gs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.gs-field-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  padding-bottom: 2px; /* Tiny reserve for absolute-positioned validators */
}

/* When a field-row has only one child (no label), span full width */
.gs-field-row > .field-input:only-child,
.gs-field-row > .gs-field-label:only-child {
  grid-column: 1 / -1;
}

.gs-field-label {
  position: relative;
  font-weight: 600;
  color: var(--gs-text);
  font-size: var(--gs-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.field-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  position: relative;
}

.field-input .TextBox,
.field-input .DropDown,
.field-input select {
  flex: 1;
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box;
}

/* ALWAYS keep label + input on same line (scanner/tablet friendly) */
@media (max-width: 600px) {
  .gs-field-row {
    grid-template-columns: 110px 1fr;
    gap: 2px 6px;
  }
  .gs-field-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ===================================================================
   UPC Scan / Carton Scan Components
   Now render as <div class="gs-field-row"> so they use the standard
   field-row grid layout automatically. No special CSS needed.
   =================================================================== */

/* ===================================================================
   Dynamic control tables (e.g., Custom.aspx tableControls)
   Style server-generated <table> forms to match field-row layout
   =================================================================== */
table[id$="tableControls"] {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

table[id$="tableControls"] tr {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  margin-bottom: 4px;
}

table[id$="tableControls"] td {
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

table[id$="tableControls"] td:first-child {
  font-weight: 600;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table[id$="tableControls"] td[colspan] {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 400;
  text-align: left;
  padding: 6px 0;
}

/* Checkbox/radio cells span both columns - style the text beside the control */
table[id$="tableControls"] td .CheckBox,
table[id$="tableControls"] td .RadioButton,
table[id$="tableControls"] td .radioButtonListClass {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
}

/* Control cells - flex layout aligns checkbox + bare LiteralControl text */
table[id$="tableControls"] td:last-child {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

table[id$="tableControls"] td input[type="text"],
table[id$="tableControls"] td select,
table[id$="tableControls"] td textarea {
  width: 100% !important;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: var(--gs-font-size-base);
  font-family: var(--gs-font);
  color: var(--gs-text);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  min-height: 34px;
}

@media (max-width: 600px) {
  table[id$="tableControls"] tr {
    grid-template-columns: 110px 1fr;
    gap: 2px 6px;
  }
  table[id$="tableControls"] td:first-child {
    font-size: 0.75rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  table[id$="tableControls"] td input[type="text"],
  table[id$="tableControls"] td select {
    padding: 4px 6px;
    font-size: 0.8125rem;
    min-height: 30px;
  }
}

/* ===================================================================
   Tables
   =================================================================== */

.gs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--gs-surface);
  border-radius: 0;
}

/* V2 Grid: gray header, white rows, horizontal lines only */
.gs-table thead {
  background: var(--gs-surface-header);
  color: var(--gs-text);
}

.gs-table th {
  padding: 3px 5px;
  text-align: left;
  font-weight: 400;
  font-size: var(--gs-font-size-base);
  white-space: nowrap;
  color: var(--gs-text) !important;
  background: var(--gs-surface-header) !important;
  border-bottom: 1px solid var(--gs-border-strong) !important;
}

.gs-table th a,
.gs-table th a:link,
.gs-table th a:visited {
  color: var(--gs-text) !important;
}

.gs-table td {
  padding: 3px 5px;
  font-size: var(--gs-font-size-base);
  border-bottom: 1px solid var(--gs-border-strong) !important;
  line-height: 1.4;
}

.gs-table tbody tr:last-child td {
  border-bottom: none !important;
}

.gs-table tbody tr:hover td:not([style*="background-color"]):not([class*="gs-status"]) {
  background: var(--gs-blue-highlight);
}

/* ===================================================================
   Messages & Alerts
   =================================================================== */

.gs-alert {
  padding: var(--gs-spacing-md);
  border-radius: var(--gs-radius-sm);
  border-left: 4px solid;
  margin: var(--gs-spacing-md) 0;
}

.gs-alert-success {
  background: rgba(46, 159, 72, 0.1);
  border-color: var(--gs-success);
  color: var(--gs-success);
}

.gs-alert-danger {
  background: rgba(226, 54, 66, 0.1);
  border-color: var(--gs-danger);
  color: var(--gs-danger);
}

.gs-alert-warning {
  background: rgba(235, 125, 58, 0.1);
  border-color: var(--gs-warning);
  color: #8a4a1a;
}

.gs-alert-info {
  background: rgba(58, 116, 194, 0.1);
  border-color: var(--gs-info);
  color: #1e40af;
}

/* ===================================================================
   Validators - ASP.NET specific
   =================================================================== */

/* ===================================================================
   Validation UX: Red border highlight + subtle hint text
   =================================================================== */

/* 1. Red border glow on the INPUT when its sibling validator is VISIBLE and has content.
   ASP.NET RegularExpressionValidator/RequiredFieldValidator spans always contain
   error text (from .skin), even when valid — they're just hidden via display:none.
   We must exclude hidden validators so red borders only appear for actual errors. */
.field-input:has(.gs-validator:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) .TextBox,
.field-input:has(.gs-validator:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) .DropDown,
.field-input:has(.gs-validator:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) select,
.field-input:has(span[id*="Valid"]:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) .TextBox,
.field-input:has(span[id*="Valid"]:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) .DropDown,
.field-input:has(span[id*="Valid"]:not(:empty):not([style*="display:none"]):not([style*="visibility:hidden"])) select {
  border-color: var(--gs-danger) !important;
  box-shadow: 0 0 0 2px rgba(226, 54, 66, 0.15) !important;
}

/* 1b. Red border when RequiredFieldValidator fires (lives in .gs-field-label, not .field-input).
   ASP.NET Display="Dynamic" renders style="display:none;" when valid, removes it when invalid. */
.gs-field-row:has(.gs-field-label .field-required:not([style*="display:none"]):not([style*="display: none"])) .field-input .TextBox,
.gs-field-row:has(.gs-field-label .field-required:not([style*="display:none"]):not([style*="display: none"])) .field-input .DropDown,
.gs-field-row:has(.gs-field-label .field-required:not([style*="display:none"]):not([style*="display: none"])) .field-input select {
  border-color: var(--gs-danger) !important;
  box-shadow: 0 0 0 2px rgba(226, 54, 66, 0.15) !important;
}

/* Hide the star (*) text from RequiredFieldValidators -- red textbox is the indicator now.
   The span remains in the DOM for :has() detection but is completely invisible. */
.field-required {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Show "Required" text under the field when RequiredFieldValidator fires */
.gs-field-row:has(.gs-field-label .field-required:not([style*="display:none"]):not([style*="display: none"])) .field-input::after {
  content: "Required";
  display: block;
  color: var(--gs-danger);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--gs-font);
  line-height: 1.4;
  flex-basis: 100%;
  order: 99;
}

/* 2. Validator text: flows below the input on its own line */
.gs-validator {
  color: var(--gs-danger) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  font-family: var(--gs-font) !important;
  white-space: nowrap;
  line-height: 1.4;
  margin: 0;
}

/* Validators inside .field-input flow below the input, not overlap adjacent rows */
.field-input > .gs-validator,
.field-input > span[id*="Valid"],
.field-input > span[id*="valid"] {
  flex-basis: 100%;
  order: 99;
}

/* When validator is empty OR hidden by ASP.NET, collapse it so it takes no space */
.field-input > .gs-validator:empty,
.field-input > .gs-validator[style*="display:none"],
.field-input > .gs-validator[style*="visibility:hidden"],
.field-input > span[id*="Valid"]:empty,
.field-input > span[id*="valid"]:empty {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Validators are now descriptive text set server-side -- no JS cleanup needed */

/* Override the ugly Arial 8pt from SkinID="Valid" everywhere it appears */
span[style*="color:Red"],
span[style*="color: Red"],
label[style*="color:Red"],
label[style*="color: Red"] {
  color: var(--gs-danger) !important;
  font-size: 0.75rem !important;
  font-family: var(--gs-font) !important;
  font-weight: 600;
}

/* Error labels that appear outside field-input (standalone error messages) */
.error-message,
.page-card > span[style*="color:Red"],
.page-card > div > span[style*="color:Red"],
.po-card > span[style*="color:Red"],
.po-card > div > span[style*="color:Red"] {
  color: var(--gs-danger) !important;
  font-size: var(--gs-font-size-base) !important;
  font-family: var(--gs-font) !important;
  font-weight: 600;
  text-align: center;
  display: block;
  padding: 4px 0;
}

/* Error panels (no CssClass) - when they contain only SkinID="Valid" labels */
.page-card > div:not([class]) > span[style*="color:Red"],
.po-card > div:not([class]) > span[style*="color:Red"] {
  display: block;
  text-align: center;
  padding: 4px 0;
}

/* ForeColor="Red" on asp:Label generates style="color:Red" */
span[style*="ForeColor"][style*="Red"],
span[style*="font-weight:bold"][style*="color:Red"] {
  color: var(--gs-danger) !important;
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base) !important;
  font-weight: 600 !important;
}

/* Font-Bold="True" labels should use theme font */
span[style*="font-weight:bold"],
label[style*="font-weight:bold"] {
  font-family: var(--gs-font) !important;
}

/* ForeColor on any element */
span[style*="color:Red;font-family:Arial"],
span[style*="color: Red;font-family:Arial"],
span[style*="color:Red; font-family:Arial"] {
  color: var(--gs-danger) !important;
  font-family: var(--gs-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* ===================================================================
   Header & Logo
   =================================================================== */

.gs-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.gs-logo {
  max-width: 220px;
  height: auto;
}

.gs-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--gs-text);
  margin: 0;
  padding: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

/* ===================================================================
   Info Banner - Green header strips
   =================================================================== */
/* V2 Info-banner: bordered gray box with dark text (not green fill).
   Consecutive banners merge into a single visual card. */
.info-banner {
  background: var(--gs-surface-muted);
  color: var(--gs-text);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  padding: 5px 10px;
  text-align: left;
  font-weight: 600;
  font-size: var(--gs-font-size-base);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 0;
}

/* When banners are consecutive, merge into one card */
.info-banner:has(+ .info-banner) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.info-banner + .info-banner {
  border-top: 1px solid var(--gs-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.info-banner .TransName,
.info-banner span,
.info-banner label {
  color: var(--gs-text) !important;
  font-size: var(--gs-font-size-base);
}

/* Separator after info-banner group - equal spacing above and below */
.info-banner + :not(.info-banner) {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

@media (max-width: 600px) {
  .info-banner {
    padding: 4px 8px;
    font-size: 0.75rem;
    gap: 4px;
  }
  .info-banner span,
  .info-banner label {
    font-size: 0.75rem !important;
  }
}

/* PO-specific banners (warning/status) - base structure only.
   Page-level inline CSS on PORcpt.aspx defines the actual red/danger look. */
.po-banner {
  border-radius: var(--gs-radius-sm);
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}
.po-banner:empty { display: none !important; }

/* Warning banner - uses brand orange for warning-level notices */
.warning-banner {
  background: rgba(235, 125, 58, 0.1) !important;
  color: var(--gs-orange) !important;
  border-radius: var(--gs-radius-sm) !important;
  border-left: 3px solid var(--gs-orange);
  padding: 8px 14px !important;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--gs-font);
}
.warning-banner span,
.warning-banner label {
  color: var(--gs-orange) !important;
  font-family: var(--gs-font) !important;
}

/* Collapse warning-banner when its only child label/span is empty */
.warning-banner:has(> span:only-child:empty),
.warning-banner:has(> .error-message:only-child:empty) {
  display: none;
}

/* Found label - record count after grid searches */
.found-label {
  text-align: center;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text-muted);
  font-family: var(--gs-font);
  padding: 4px 0;
  font-weight: 500;
}

/* ===================================================================
   Form Helpers
   =================================================================== */

.field-required {
  color: var(--gs-danger);
  margin-left: 4px;
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
}

.checkbox-row span {
  display: inline-flex;
  align-items: center;
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  cursor: pointer;
}

.error-row {
  text-align: center;
  color: var(--gs-danger);
  font-size: var(--gs-font-size-base);
}

.error-row:has(> span:only-child:empty),
.error-row:has(> .error-message:only-child:empty) {
  display: none;
}

/* Read-only value label (e.g. Remaining Qty, UM labels beside inputs) */
.gs-field-value {
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  color: var(--gs-primary-dark);
  font-weight: 700;
}

/* Auto-theme bare <span> labels inside field-input (asp:Label with no CssClass) */
.field-input > span:not(.gs-validator):not([id*="Valid"]):not([id*="val"]):not(.TextBox):not(.DropDown):not(.error-message):not(.CheckBox):not(.RadioButton):not(:empty) {
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  font-weight: 600;
}

/* ===================================================================
   Bare Label Consistency
   Many ASP.NET pages use <asp:Label> without CssClass.
   These render as bare <span> elements. Ensure consistent font/color
   everywhere without requiring markup changes on 40+ pages.
   =================================================================== */

/* Labels inside gs-field-label inherit its style (already correct).
   But some pages have bare labels OUTSIDE gs-field-row, inside
   page-card or flat table layouts. Catch those here. */

/* Bare spans/labels inside page-card that look like field labels
   (contain "lbl" in ID - ASP.NET convention for label controls) */
.page-card > span[id*="lbl"],
.page-card > div > span[id*="lbl"],
.page-card > asp > span[id*="lbl"],
.po-card > span[id*="lbl"],
.po-card > div > span[id*="lbl"] {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  font-weight: 600;
}

/* Bare spans inside gs-field-row that are the label (first child of gs-field-label) */
.gs-field-label span,
.gs-field-label label {
  font-family: var(--gs-font) !important;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}

/* Field value spans inside field-input - consistent dark text */
.field-input > span:not([class]):not(:empty),
.field-input > label:not([class]):not(:empty) {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  font-weight: 600;
}

/* ===================================================================
   DocumentControlComponent - Attachments Section
   =================================================================== */

/* Outer wrapper - visually distinct section with top border */
.doc-section {
  width: 100%;
  border-top: 1px solid var(--gs-border);
  margin-top: 8px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.doc-toggle-btn {
  width: 100%;
}

.doc-upload-area {
  width: 100%;
  border: 1px solid var(--gs-border);
  background: var(--gs-surface-muted);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.doc-linktype-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.doc-error {
  text-align: center;
}

.panel-attach {
  border: none !important;
  border-radius: var(--gs-radius-md) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#attachmentSummary {
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-sm) !important;
  background-color: var(--gs-surface-muted) !important;
  padding: 6px 8px !important;
  margin-top: 6px !important;
  line-height: 1.3 !important;
  font-family: var(--gs-font) !important;
  font-size: 0.85rem !important;
}


input[type="file"],
.fileUploader {
  font-family: var(--gs-font);
  font-size: 0.85rem;
  color: var(--gs-text);
  padding: 6px 8px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface);
  width: 100%;
  box-sizing: border-box;
}

input[type="file"]::file-selector-button {
  font-family: var(--gs-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gs-on-accent-minor);
  background: var(--gs-accent-minor);
  border: none;
  border-radius: var(--gs-radius-sm);
  padding: 6px 16px;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

input[type="file"]::file-selector-button:hover {
  background: var(--gs-accent-minor-dark);
}

input[type="file"]:disabled::file-selector-button {
  background: var(--gs-border);
  cursor: not-allowed;
}

/* Inline image preview box */
.doc-preview-box {
  border: 1px solid var(--gs-border);
  background: var(--gs-surface);
  overflow: hidden;
}

.doc-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--gs-surface-header);
  color: var(--gs-text);
  border-bottom: 1px solid var(--gs-border);
  font-family: var(--gs-font);
  font-size: 0.85rem;
  font-weight: 600;
}

.doc-preview-close {
  background: none;
  border: none;
  color: var(--gs-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-weight: 700;
}

.doc-preview-close:hover {
  opacity: 0.7;
}

.doc-preview-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 10px auto;
  object-fit: contain;
}

/* LinkType sub-components: theme their bare <table> layout */
.panel-linktype {
  padding: 8px 0;
}

.panel-linktype table {
  width: 100%;
  border: none !important;
}

.panel-linktype table tr {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 4px;
}

.panel-linktype table td {
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.panel-linktype table td:first-child {
  font-weight: 600;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
}

.panel-linktype table td:first-child label {
  font-weight: 600;
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
}

/* ===================================================================
   Utility Classes
   =================================================================== */

.gs-text-center { text-align: center; }
.gs-text-right { text-align: right; }
.gs-text-muted { color: var(--gs-text-muted); }
.gs-text-light { color: var(--gs-text-light); }

.gs-mt-xs { margin-top: var(--gs-spacing-xs); }
.gs-mt-sm { margin-top: var(--gs-spacing-sm); }
.gs-mt-md { margin-top: var(--gs-spacing-md); }
.gs-mt-lg { margin-top: var(--gs-spacing-lg); }

.gs-mb-xs { margin-bottom: var(--gs-spacing-xs); }
.gs-mb-sm { margin-bottom: var(--gs-spacing-sm); }
.gs-mb-md { margin-bottom: var(--gs-spacing-md); }
.gs-mb-lg { margin-bottom: var(--gs-spacing-lg); }

.gs-w-full { width: 100%; }
.gs-w-auto { width: auto; }

/* Hide element */
.gs-hidden { display: none !important; }

/* ===================================================================
   Responsive Utilities
   =================================================================== */

@media (max-width: 768px) {
  :root {
    --gs-font-size-base: 0.8125rem; /* 13px on smaller screens */
  }

  .gs-card {
    padding: var(--gs-spacing-md);
    border-radius: var(--gs-radius-md);
  }

  .gs-container {
    padding: var(--gs-spacing-sm);
  }

  .gs-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .gs-button {
    width: 100%;
  }
}

/* ===================================================================
   Print Styles
   =================================================================== */

@media print {
  body {
    background: white;
  }

  .gs-card {
    box-shadow: none;
    border: 1px solid #000;
  }

  .gs-button {
    display: none;
  }
}

/* ===================================================================
   LEGACY CLASS OVERRIDES
   Auto-modernize existing ASP.NET controls without HTML changes
   =================================================================== */

/* TextBox - Modern input with visible border */
.TextBox {
  padding: 6px 8px;
  font-size: var(--gs-font-size-base);
  font-family: var(--gs-font);
  color: var(--gs-text);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  transition: all var(--gs-transition-base);
  min-height: 34px;
  height: auto;
  box-sizing: border-box;
  line-height: 1.4;
}

/* Scanner - compact inputs */
@media (max-width: 600px) {
  .TextBox {
    padding: 4px 6px;
    font-size: 0.8125rem;
    min-height: 30px;
  }
  .cmdButton {
    padding: 6px 8px;
    font-size: 0.8rem;
    min-height: 34px;
  }
}

/* Placeholder text styling */
.TextBox::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--gs-text-muted);
  opacity: 0.7;
  font-style: italic;
  font-size: 0.85rem;
}

.TextBox:hover {
  border-color: var(--gs-primary-light);
}

.TextBox:focus-visible {
  border-color: var(--gs-blue);
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
  box-shadow: none;
}

/* Multi-line TextBox */
.MLTxt {
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: var(--gs-font);
  color: var(--gs-text);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  transition: all var(--gs-transition-base);
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
}

.MLTxt:focus-visible {
  border-color: var(--gs-blue);
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
  box-shadow: none;
}

/* cmdButton - V2 hierarchy:
   Default = ORANGE primary action (most pages have one submit button)
   .cmdButton-secondary = outline/ghost for non-primary actions
   Home link = green outline (handled in topnav section) */
.cmdButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: var(--gs-font-size-base);
  font-weight: 600;
  font-family: var(--gs-font);
  color: var(--gs-on-accent-minor);
  background: var(--gs-accent-minor);
  border: 2px solid var(--gs-accent-minor);
  border-radius: var(--gs-radius-sm);
  cursor: pointer;
  transition: all var(--gs-transition-base);
  min-height: 38px;
  letter-spacing: 0.01em;
}

.cmdButton:hover {
  background: var(--gs-accent-minor-dark);
  border-color: var(--gs-accent-minor-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(241, 108, 34, 0.25);
}

.cmdButton:active {
  transform: translateY(0);
}

.cmdButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Secondary buttons = outline/ghost. Apply explicitly with .cmdButton-secondary class. */
.cmdButton-secondary {
  color: var(--gs-text) !important;
  background: transparent !important;
  border: 2px solid var(--gs-border-strong) !important;
}

.cmdButton-secondary:hover {
  border-color: var(--gs-border-heavy) !important;
  background: var(--gs-surface-muted) !important;
  box-shadow: var(--gs-shadow-sm);
}

/* ===================================================================
   Button Row - action buttons (Submit, Create New, Sub Part, etc.)
   =================================================================== */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding-left: 148px;
  margin-top: var(--gs-spacing-md);
}

.button-row .cmdButton {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Button group - left-aligned with text boxes (label column = 140px + 8px gap) */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding-left: 148px;
  margin-top: var(--gs-spacing-md);
}

/* Hide when it only has hidden children */
.button-group:empty,
.button-group:not(:has(.cmdButton)) {
  margin-top: 0;
  padding-top: 0;
}

/* Buttons stretch to fill - consistent sizing whether 1 or many */
.button-group .cmdButton {
  flex: 1 1 auto;
  min-width: 120px;
}

/* ===================================================================
   Sticky Action Footer (mobile only)
   Pushes buttons to the bottom on short pages (margin-top: auto)
   and keeps them pinned while scrolling on long pages (sticky).
   Desktop: buttons sit in normal flow right after form fields.
   =================================================================== */
@media (max-width: 600px) {
  .button-group:has(.cmdButton),
  .button-row:has(.cmdButton) {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: inherit;
    margin-top: auto;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: -8px;
    padding: 6px;
    padding-left: 6px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .button-group .cmdButton,
  .button-row .cmdButton {
    flex: 1 1 auto;
    min-width: fit-content;
  }
  .page-card > .cmdButton,
  .page-card > input[type="submit"].cmdButton {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: inherit;
    margin-top: auto;
    padding: 8px;
    width: 100%;
    display: block;
  }
}

/* DropDown - Modern select styling */
.DropDown,
.DropDown1 {
  padding: 6px 28px 6px 8px;
  font-size: var(--gs-font-size-base);
  font-family: var(--gs-font);
  color: var(--gs-text);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  transition: all var(--gs-transition-base);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  box-sizing: border-box;
}

.DropDown:hover,
.DropDown1:hover {
  border-color: var(--gs-border-heavy);
}

.DropDown:focus-visible,
.DropDown1:focus-visible {
  border-color: var(--gs-blue);
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
  box-shadow: none;
}

/* TransName - Modern title styling */
.TransName {
  font-size: var(--gs-font-size-base);
  font-weight: 600;
  color: inherit;
  font-family: var(--gs-font);
  display: inline;
  text-align: center;
}

/* CheckBox and RadioButton styling */
.CheckBox,
.RadioButton {
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  color: var(--gs-text);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
}

.CheckBox label,
.RadioButton label {
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base) !important;
  color: var(--gs-text) !important;
  font-weight: 400 !important;
  line-height: 20px;
  vertical-align: middle;
}

.CheckBox input[type="checkbox"],
.RadioButton input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gs-primary);
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
}

/* RadioButtonList (Custom.aspx dynamic radio groups) */
.radioButtonListClass,
.radioButtonListClass table {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base) !important;
  color: var(--gs-text) !important;
  border: none !important;
}

.radioButtonListClass label {
  font-family: var(--gs-font) !important;
  font-size: var(--gs-font-size-base) !important;
  color: var(--gs-text) !important;
  font-weight: 400 !important;
  cursor: pointer;
  padding-left: 4px;
}

.radioButtonListClass input[type="radio"] {
  accent-color: var(--gs-primary);
}

/* ===================================================================
   Table/Grid Improvements (Legacy)
   =================================================================== */

/* General table improvements - reset legacy/ASP.NET borders */
table, table[border], table[rules] {
  border-collapse: collapse;
  border: none !important;
  border-spacing: 0;
  font-family: var(--gs-font);
  text-decoration: none;
}

table td,
table th {
  font-family: var(--gs-font) !important;
  padding: 3px 5px !important;
  font-size: var(--gs-font-size-base) !important;
  border: none !important;
  text-decoration: none;
  line-height: 1.4;
}

table tr {
  text-decoration: none;
}

/* V2: Gray header, regular weight, dark text */
table th,
.GridViewHeader,
tr th {
  background: var(--gs-surface-header) !important;
  color: var(--gs-text) !important;
  padding: 3px 5px !important;
  font-weight: 400;
  font-size: var(--gs-font-size-base) !important;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--gs-border-strong) !important;
}

/* Fix links inside table headers */
table th a,
table th a:link,
table th a:visited,
tr th a,
tr th a:link,
tr th a:visited {
  color: var(--gs-text) !important;
  text-decoration: underline;
}

/* GridView row hover - blue highlight (skip status indicator cells) */
table tbody tr:hover td:not([style*="background-color"]):not([class*="gs-status"]) {
  background: var(--gs-blue-highlight);
}

/* NO alternating even/odd rows - all white per V2 */
table tbody tr:nth-child(even) td:not([style*="background-color"]):not([class*="gs-status"]) {
  background: var(--gs-surface);
}

table tbody tr:nth-child(even):hover td:not([style*="background-color"]):not([class*="gs-status"]) {
  background: var(--gs-blue-highlight);
}

/* ===================================================================
   Grid Buttons - ButtonField and inline buttons inside tables
   These render as plain <input type="submit"> or <a> with no CssClass
   =================================================================== */

/* ButtonField (ButtonType="Button") → renders as <input type="submit"> inside <td> */
table td input[type="submit"],
table td input[type="button"],
.gs-table td input[type="submit"],
.gs-table td input[type="button"],
.grid-container td input[type="submit"],
.grid-container td input[type="button"] {
  background: transparent;
  color: var(--gs-text);
  border: 1px solid var(--gs-border-strong);
  padding: 4px 10px;
  font-family: var(--gs-font);
  font-size: var(--gs-font-size-base);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--gs-radius-sm);
  min-height: 28px;
  transition: all var(--gs-transition-fast);
}

table td input[type="submit"]:hover,
table td input[type="button"]:hover,
.gs-table td input[type="submit"]:hover,
.gs-table td input[type="button"]:hover {
  background: var(--gs-surface-muted);
  border-color: var(--gs-border-heavy);
  box-shadow: var(--gs-shadow-sm);
}

/* Grid buttons (ButtonField) - ensure text never clips */
.grid-container td .cmdButton,
.grid-container td input[type="button"],
.grid-container td input[type="submit"] {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: fit-content;
}

/* ===================================================================
   Header Background Override (Legacy green header rows)
   =================================================================== */

/* Override legacy green (#95C26C) header backgrounds with V2 gray */
td[style*="background-color:#95C26C"],
td[style*="background-color: #95C26C"],
tr[style*="background-color:#95C26C"] td,
tr[style*="background-color: #95C26C"] td,
tr[style*="background-color:#95C26C"] th,
tr[style*="background-color: #95C26C"] th {
  background: var(--gs-surface-header) !important;
  color: var(--gs-text) !important;
}

/* Override other legacy header colors with V2 gray */
tr[style*="background-color:#6699FF"] th,
tr[style*="background-color:#FFFF66"] th,
tr[style*="background-color:#FFE699"] th,
tr[style*="background-color: #6699FF"] th,
tr[style*="background-color: #FFFF66"] th,
tr[style*="background-color: #FFE699"] th {
  background: var(--gs-surface-header) !important;
  color: var(--gs-text) !important;
}

/* ===================================================================
   ASP.NET Validator Styling
   =================================================================== */

span[id*="val"],
span[id*="Valid"],
.validator {
  color: var(--gs-danger);
  font-size: 0.875rem;
  font-family: var(--gs-font);
}

/* ===================================================================
   Link Styling
   =================================================================== */

a,
a:link,
a:visited {
  color: var(--gs-blue) !important;
  text-decoration: underline;
  transition: color var(--gs-transition-fast);
}

a:hover,
a:active {
  color: var(--gs-indigo) !important;
  text-decoration: underline;
}

/* Table/grid links - bold underline so they stand out */
.gs-table a,
.grid-container a,
.grid-section a,
table td a {
  color: var(--gs-blue) !important;
  text-decoration: underline !important;
  font-weight: 600;
}

/* Topnav links - green outline style, no underline */
.gs-topnav a,
.gs-topnav a:link,
.gs-topnav a:visited,
.gs-topnav a:hover {
  color: var(--gs-primary) !important;
  text-decoration: none !important;
}

/* Menu footer links - outline button style, no underline */
.menu-footer a,
.menu-footer a:link,
.menu-footer a:visited,
.menu-footer a:hover {
  color: var(--gs-text) !important;
  text-decoration: none !important;
}

/* ===================================================================
   Image Button Improvements
   =================================================================== */

input[type="image"] {
  border: none;
  cursor: pointer;
  transition: transform var(--gs-transition-fast);
}

input[type="image"]:hover {
  transform: scale(1.02);
}

/* ===================================================================
   Form and Layout Improvements
   =================================================================== */

form {
  font-family: var(--gs-font);
}

/* Center align improvements */
td[align="center"] {
  text-align: center;
}

/* Spacing between elements */
td > br + br {
  display: none;
}

/* ===================================================================
   Toast Notification System
   =================================================================== */
.gs-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 40px);
}

.gs-toast {
  pointer-events: auto;
  padding: 10px 16px;
  border-radius: var(--gs-radius-md);
  font-family: var(--gs-font);
  font-size: 0.92rem;
  font-weight: 500;
  color: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: gs-toast-in 0.3s ease forwards;
  cursor: pointer;
  line-height: 1.4;
}

.gs-toast.gs-toast-out {
  animation: gs-toast-out 0.25s ease forwards;
}

.gs-toast-error {
  background: var(--gs-danger);
}

.gs-toast-success {
  background: var(--gs-primary);
}

.gs-toast-warning {
  background: var(--gs-orange);
  color: #ffffff;
}

.gs-toast-info {
  background: var(--gs-blue);
}

.gs-toast-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

@keyframes gs-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gs-toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* ===================================================================
   Page Loading Overlay
   =================================================================== */
.gs-loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85);
  z-index: 99998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.gs-loading-overlay.active {
  display: flex;
}

.gs-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gs-border);
  border-top-color: var(--gs-blue);
  border-radius: 50%;
  animation: gs-spin 0.7s linear infinite;
}

.gs-loading-text {
  margin-top: 12px;
  color: var(--gs-blue);
  font-size: 0.9rem;
  font-weight: 600;
}

@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

/* ===================================================================
   Performance: GPU-accelerated animations
   =================================================================== */
.gs-toast,
.gs-spinner,
.cmdButton,
.gs-button,
input[type="image"] {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ===================================================================
   Top Navigation Bar (Home / Logo / Logout)
   =================================================================== */
.gs-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-top: 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gs-border);
  border-radius: 0;
  position: relative;
  min-height: 44px;
}

/* First nav item (Home / Last Transaction) pushes everything else right */
.gs-topnav > a:first-child,
.gs-topnav > span:first-child,
.gs-topnav > [id]:first-child {
  margin-right: auto;
}

/* Nav items after Home sit together with a small gap */
.gs-topnav {
  gap: 8px;
}

/* Home button = green outline (navigation accent) */
.gs-topnav a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gs-primary) !important;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--gs-radius-sm);
  border: 2px solid var(--gs-primary);
  background: transparent;
  z-index: 1;
}

.gs-topnav a:hover {
  background: var(--gs-primary-highlight);
  text-decoration: none;
}

/* Logout button = orange primary (matched by href containing Login) */
.gs-topnav a[href*="Login"],
.gs-topnav a[href*="login"] {
  color: var(--gs-on-accent-minor) !important;
  background: var(--gs-accent-minor);
  border-color: var(--gs-accent-minor);
}

.gs-topnav a[href*="Login"]:hover,
.gs-topnav a[href*="login"]:hover {
  background: var(--gs-accent-minor-dark);
  border-color: var(--gs-accent-minor-dark);
}

/* Center logo in topnav - full name on desktop, G icon on mobile */
.gs-topnav::after {
  content: '';
  display: block;
  width: 240px;
  height: 34px;
  background: url('../../Images/logo_gs_full.svg') center/contain no-repeat;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Hide the big logo from ALL page headers (now in topnav) */
.gs-header .gs-logo,
.gs-header input[type="image"].gs-logo,
input[type="image"][id="ImgGSLogo"],
input[type="image"][name="ImgGSLogo"] {
  display: none !important;
}

.gs-header,
.page-header {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
}

.page-header img {
  display: none !important;
}

/* Hide the bottom Home logo button (replaced by topnav Home link) */
.home-button,
input[type="image"][id*="imgBtnHome"],
input[type="image"][skinid="HomeLogo"] {
  display: none !important;
}

/* ===================================================================
   Expand/Collapse (+/-) Buttons in Grids
   =================================================================== */
table input[type="image"][id*="imageLines"],
table input[type="image"][id*="imageItems"],
table input[type="image"][id*="imageOrders"],
table input[type="image"][id*="Show"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity var(--gs-transition-fast);
}

table input[type="image"][id*="imageLines"]:hover,
table input[type="image"][id*="imageItems"]:hover,
table input[type="image"][id*="imageOrders"]:hover,
table input[type="image"][id*="Show"]:hover {
  opacity: 1;
}

/* Grid containers */
.grid-container,
.grid-section {
  border-radius: 0 !important;
  overflow: visible;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Nested/child grids (expand/collapse detail views) */
td[colspan="999"] {
  padding: 6px 4px 6px 8px !important;
  background: var(--gs-surface);
  border-left: 3px solid var(--gs-primary);
}

td[colspan="999"] > table,
td[colspan="999"] > div > table,
td[colspan="999"] .gs-table {
  margin: 0;
  font-size: 0.92em;
}

/* ===================================================================
   Sticky First Column (expand/collapse icons stay visible on scroll)
   Disabled on mobile (<600px) where it eats too much screen width
   =================================================================== */
@media (min-width: 601px) {
  .grid-container table th:first-child,
  .grid-section table th:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--gs-surface-header) !important;
  }

  .grid-container table td:first-child:not([style*="background-color"]):not([class*="gs-status"]),
  .grid-section table td:first-child:not([style*="background-color"]):not([class*="gs-status"]) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--gs-surface) !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.08);
  }

  .grid-container table tr:nth-child(even) td:first-child:not([style*="background-color"]):not([class*="gs-status"]),
  .grid-section table tr:nth-child(even) td:first-child:not([style*="background-color"]):not([class*="gs-status"]) {
    background: var(--gs-surface) !important;
  }
}

/* Status indicator cells (first column, e.g. ActiveWS / WIPStatus) */
table td:first-child[style*="background-color"],
.gs-table td:first-child[style*="background-color"],
table td:first-child[class*="gs-status"],
.gs-table td:first-child[class*="gs-status"] {
  padding: 0 !important;
  border-bottom: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

/* ===================================================================
   Sticky Column Headers (stay visible during vertical page scroll)
   No max-height - tables show at full page height.
   Headers stick to viewport top when scrolling down the page.
   =================================================================== */

/* Horizontal scroll only - no vertical constraint so sticky works with page scroll */
.grid-container,
.grid-section {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

/* Make ALL table headers sticky vertically */
.gs-table th,
.grid-container table th,
.grid-section table th,
table.gs-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--gs-surface-header) !important;
  color: var(--gs-text) !important;
}

/* First column + sticky header = highest z-index */
.grid-container table th:first-child,
.grid-section table th:first-child {
  z-index: 5;
}

/* ===================================================================
   Responsive Table Overrides
   Scanner (<600px): ultra-compact, minimal padding
   Tablet (600-1024px): moderate spacing
   Desktop (>1024px): comfortable spacing, show full content
   =================================================================== */

/* V2: NO vertical column dividers, NO alternating rows.
   Horizontal lines only via td border-bottom. */
.grid-container table td + td,
.grid-container table th + th,
.grid-section table td + td,
.grid-section table th + th {
  border-left: none !important;
}
.grid-container table tbody tr:nth-child(even),
.grid-section table tbody tr:nth-child(even) {
  background: var(--gs-surface);
}

/* Scanner / small mobile - compact but readable */
@media (max-width: 600px) {
  table td, table th {
    padding: 2px 3px !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
  }
  .grid-container, .grid-section {
    font-size: 0.75rem !important;
  }
}

/* Tablet - moderate */
@media (min-width: 601px) and (max-width: 1024px) {
  table td, table th {
    padding: 4px 6px !important;
    font-size: 0.8125rem !important;
  }
}

/* Desktop - comfortable, let content breathe */
@media (min-width: 1025px) {
  table td, table th {
    padding: 5px 8px !important;
    font-size: 0.875rem !important;
  }
  .grid-container, .grid-section {
    max-width: 100%;
  }
}

/* ===================================================================
   Global SELECT theming (all selects, not just .DropDown)
   =================================================================== */
select,
select[class],
.DropDown,
.DropDown1 {
  padding: 6px 28px 6px 8px !important;
  font-size: var(--gs-font-size-base) !important;
  font-family: var(--gs-font) !important;
  color: var(--gs-text) !important;
  background-color: var(--gs-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-sm) !important;
  box-sizing: border-box;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  overflow: visible !important;
  height: auto !important;
}

select:focus-visible,
.DropDown:focus-visible,
.DropDown1:focus-visible {
  border-color: var(--gs-blue) !important;
  outline: var(--gs-focus-ring);
  outline-offset: var(--gs-focus-offset);
  box-shadow: none;
}

/* ===================================================================
   Topnav - Mobile Responsive
   =================================================================== */
@media (max-width: 600px) {
  .gs-topnav {
    padding: 4px 2px;
    margin-bottom: 4px;
  }
  .gs-topnav a {
    font-size: 0.78rem;
    padding: 5px 10px;
  }
  .gs-topnav::after {
    width: 28px;
    height: 28px;
    background-image: url('../../Images/logo_gs_icon.svg');
  }
  [data-theme="dark"] .gs-topnav::after {
    background-image: url('../../Images/logo_gs_icon.svg');
  }
}

/* ===================================================================
   ABSOLUTE: Force V2 dark text in ALL table headers, everywhere
   =================================================================== */
th,
th *,
th a,
th a:link,
th a:visited,
th a:hover,
th span,
th label,
th div,
tr th,
tr th *,
table th,
table th *,
table thead td,
table thead td * {
  color: var(--gs-text) !important;
}

/* ===================================================================
   Font Override
   Force modern font on everything, including elements with inline
   font-family from ASP.NET controls or legacy code-behind.
   =================================================================== */
TABLE, TR, TD, TH, FORM,
input, select, textarea, button, label, span, a, div, p {
  font-family: var(--gs-font) !important;
}

[style*="font-family"] {
  font-family: var(--gs-font) !important;
}

[style*="font-size:8pt"],
[style*="font-size: 8pt"],
[style*="font-size:10pt"],
[style*="font-size: 10pt"] {
  font-size: inherit !important;
}

/* ===================================================================
   Grid container scroll fix for mobile
   =================================================================== */
.grid-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

/* Page form containers */
.page-form {
  width: 100% !important;
}

.page-card {
  padding: 8px 12px !important;
  gap: 6px !important;
}

/* Mobile: flex layout pushes buttons to bottom + sticky */
@media (max-width: 600px) {
  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 4px !important;
    overflow-x: hidden;
  }
  .page-form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .page-card {
    padding: 4px 8px !important;
    gap: 4px !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
  }
  .gs-title {
    font-size: 1.1rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gs-flex-col.gs-gap-sm {
    gap: 4px !important;
  }
}