/* =========================================================
   Galaxy → Payroll bridge layer
   Maps Galaxy's legacy CSS vocabulary (style.css) and in-page
   chrome onto the payroll-theme.css design system, so unchanged
   content pages inherit the modern look.
   LOAD ORDER (in master): style.css → payroll-theme.css → galaxy-bridge.css
   ========================================================= */

/* ---- 1. Reset hostile globals from style.css -------------------------- */
body { background: var(--bg) !important; color: var(--text); }

/* Font family can safely be normalized everywhere. */
.content, .content td, .content th, .content span, .content div, .content p,
.content label, .content font {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* COLOR reset is intentionally NARROW. style.css sets td{color:#fff} which makes
   legacy table-page text invisible on the new white surface, so we re-base the
   base content color and <td> text only. We deliberately DO NOT recolor generic
   div/span/p/h*, so self-contained modern pages (e.g. Admin/Dashboard.aspx) that
   put white text on their own dark bands keep rendering correctly. */
.content { color: var(--text); }
.content td { color: var(--text); font-size: 13.5px; margin-left: 0; }
/* Legacy white-on-navy text helpers that now sit on white cards. Scoped so a
   page can still override locally if it owns a dark band. */
.content td.white, .content td.boldwhite,
.content span.white, .content span.boldwhite { color: var(--text); }

/* ---- 2. Neutralize legacy in-page chrome ------------------------------ */
/* The sliced-image blue frames + spacers content pages draw around panels. */
.content img[src*="blue_corner"],
.content img[src*="14bg"],
.content img[src*="top_bg"],
.content img[src*="top_bottom"],
.content img[src*="spacer"],
.content img[src*="th_bg"] { display: none !important; }

/* The dark-navy panels (bgcolor="#244163"/"#223F61") become white card surfaces. */
.content [bgcolor="#244163"],
.content [bgcolor="#223F61"],
.content [bgcolor="#5D7B9D"],
.content [bgcolor="#244163"] td,
.content [bgcolor="#223F61"] td {
    background-color: #fff !important;
    color: var(--text) !important;
}

/* Cells using sliced navy textures as a background ATTRIBUTE (not <img>): the
   14px frame columns and top textures. Strip the image + collapse the column. */
.content td[background*="14bg"],
.content td[background*="top_bg"],
.content td[background*="top_bottom"],
.content [background*="14bg"],
.content [background*="top_bg"] {
    background-image: none !important;
    background-color: #fff !important;
    width: 0 !important;
}
/* Telerik / theme grid background-texture helper class */
.content .tgbg { background-image: none !important; background-color: #fff !important; }

/* The page's own bordered panel table gets a soft card frame instead. */
.content #tblReportArea,
.content table[id*="tblReportArea"] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* ---- 3. Page captions / section titles -------------------------------- */
.content .Captionfont,
.content em span,
.content > center > em,
.content .dept,
.content .bfont {
    color: var(--text) !important;
}
.content .Captionfont { text-align: center; }

/* ---- 4. Inputs, selects, textareas, Telerik combos -------------------- */
.content input[type="text"],
.content input[type="password"],
.content input[type="email"],
.content input[type="number"],
.content input[type="date"],
.content input[type="file"],
.content textarea,
.content select,
.content .forms, .content .forms1, .content .forms2, .content .forms3,
.content .forms4, .content .forms5, .content .forms6, .content .forms7,
.content .forms8, .content .formsN, .content .forms_grd, .content .formsAddress,
.content .ForeColor, .content .txt_box, .content .txt_box_mand,
.content .idleField, .content .focusField,
.content .riTextBox {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--text) !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    min-height: 34px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.content input[type="text"]:focus,
.content input[type="password"]:focus,
.content textarea:focus,
.content select:focus,
.content .focusField,
.content .forms2:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0,120,200,.12) !important;
}
/* Mandatory fields keep a subtle amber tint cue */
.content .txt_box_mand { background: #fffdf2 !important; border-color: #f0d98a !important; }

.content input[type="checkbox"],
.content input[type="radio"] {
    width: 15px; height: 15px; accent-color: var(--primary);
    vertical-align: middle; box-shadow: none !important; border: 0 !important;
    background: none !important;
}

/* Telerik RadComboBox — COLORS / BORDER / ARROW ONLY (layout-neutral).
   We deliberately set NO height, overflow, display, line-height, or table
   width/height — those broke text alignment and the dropdown's JS positioning.
   The combo keeps Telerik's own sizing & dropdown placement. */
.content .RadComboBox {
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    vertical-align: middle;
    /* The combo span often carries CssClass="forms8", so the generic input rule
       above adds padding+min-height to the WRAPPER (made it ~48px). Cancel that;
       height comes from the inner input only → matches the 34px text inputs. */
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 210px;   /* legacy combos are often too narrow → wrap text; give a sane floor */
}
/* but don't force the floor on combos packed into grid cells / inline filter strips */
.content table[id*="grd" i] .RadComboBox, .content table[id*="gv" i] .RadComboBox,
.content table[id*="grid" i] .RadComboBox { min-width: 0; }
/* Grid-edit RadComboBoxes render ~40px tall with a fat (~43px) arrow cell — chunky
   next to the 34px text inputs beside them. ROOT CAUSE: the grid body-cell rule below
   (`table[id*=grd] td { padding:8px 12px !important }`) ALSO lands on the combo's OWN
   inner <td> cells (rcbInputCell/rcbArrowCell are tds nested inside the grid table) at
   higher specificity than the combo's `padding:0` reset — that 16px vertical padding is
   what balloons the combo (and, with the wrapped YCMID label beside it, doubled the
   GrossSheet edit row to 77px vs 38px display rows). Fix: null the grid padding on the
   combo's internals and keep the input compact + the arrow slim. */
.content table[id*="grd" i] .RadComboBox td,
.content table[id*="gv" i] .RadComboBox td,
.content table[id*="grid" i] .RadComboBox td {
    padding: 0 !important;
}
.content table[id*="grd" i] .RadComboBox .rcbInput,
.content table[id*="gv" i] .RadComboBox .rcbInput,
.content table[id*="grid" i] .RadComboBox .rcbInput {
    padding: 6px 8px !important; line-height: 16px !important; font-size: 13px !important;
}
.content table[id*="grd" i] .RadComboBox .rcbArrowCell,
.content table[id*="gv" i] .RadComboBox .rcbArrowCell,
.content table[id*="grid" i] .RadComboBox .rcbArrowCell {
    width: 22px !important;
}
/* Hide the edit-mode YCMID reference label under the GrossSheet Fabric combo (the stray
   "81"). It is DISPLAY-ONLY: the saved YCMID comes from CmbYarnDesc.SelectedValue, not
   this label — its only RowUpdating read (aspx.vb ~line 126) is commented out. Wrapping
   below the combo also inflated the edit row. The `[id$="_lblYCMID"]` ends-with match
   hits ONLY the edit label (id ..._lblYCMID); the display-row "2799"/"374" labels end in
   ..._lblYCMID1 and are untouched. display:none keeps it in the DOM/ViewState (no save
   risk). */
.content table[id*="grd" i] [id$="_lblYCMID"] { display: none !important; }
.content .RadComboBox table { background: transparent !important; border: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; }
.content .RadComboBox td, .content .RadComboBox .rcbInputCell {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; vertical-align: middle !important;
}
/* Match the height of the themed text inputs (padding 7/10 + line-height 18 ≈ 34px
   total, same as .form-control). We grow the input naturally — NO fixed wrapper
   height — so the text stays vertically centered. */
.content .RadComboBox .rcbInput {
    border: 0 none !important; background: transparent !important; background-image: none !important;
    box-shadow: none !important; min-height: 0 !important; border-radius: 0 !important;
    padding: 7px 10px !important; line-height: 18px !important;
    font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: var(--text) !important;
}
/* Swap Telerik's grey sprite arrow for a clean chevron (absolutely positioned,
   so it adds no layout/size change). */
.content .RadComboBox .rcbArrowCell, .content .RadComboBox a.rcbArrowCell {
    background: #fff !important; background-image: none !important;
    border: 0 !important; border-left: 1px solid var(--border-light) !important; position: relative;
}
/* Hide Telerik's arrow sprite/label text but keep the cell clickable. */
.content .RadComboBox .rcbArrowCell a, .content .RadComboBox .rcbArrowCell span {
    font-size: 0 !important; color: transparent !important; background-image: none !important;
}
.content .RadComboBox .rcbArrowCell::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 10px; color: var(--text-muted);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
/* Dropdown panel — colors only; Telerik keeps its own JS positioning. */
.RadComboBoxDropDown {
    font-family: 'Inter', sans-serif !important;
    border: 1px solid var(--border) !important; border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(15,40,64,.16) !important; background: #fff !important;
}
.RadComboBoxDropDown .rcbItem, .RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown li, .RadComboBoxDropDown a, .RadComboBoxDropDown span {
    color: var(--text) !important; text-decoration: none !important; background-image: none !important;
}
.RadComboBoxDropDown .rcbItem, .RadComboBoxDropDown li { padding: 7px 12px !important; }
.RadComboBoxDropDown .rcbHovered, .RadComboBoxDropDown .rcbHovered a, .RadComboBoxDropDown .rcbHovered span {
    background-color: var(--primary-light) !important; color: var(--primary) !important;
}

/* Telerik RadDatePicker / RadDateInput — match form-control look */
.content .RadPicker { vertical-align: middle; }
.content .RadPicker .riTextBox, .content .RadInput .riTextBox {
    border: 1px solid var(--border) !important; border-radius: 6px !important;
    padding: 7px 10px !important; height: 34px !important; box-sizing: border-box;
    background: #fff !important; font-size: 13px !important;
}
.content .RadPicker .rcCalPopup { filter: none; }

/* ---- 5. Buttons ------------------------------------------------------- */
.content .btn, .content .btn2, .content .IdleBtn, .content .focusBtn,
.content input[type="submit"], .content input[type="button"], .content button,
.content .RadButton, .content a.rbButton {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    cursor: pointer;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background .15s, box-shadow .15s;
    min-height: 34px;
    box-sizing: border-box;
    /* Legacy buttons carry small fixed inline widths (e.g. Width="48px") that clip
       the label under the themed padding — let every button size to its text. */
    width: auto !important;
    min-width: 64px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.2;
}
.content .btn:hover, .content .IdleBtn:hover, .content .focusBtn:hover,
.content input[type="submit"]:hover, .content input[type="button"]:hover,
.content button:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--card-shadow-hover);
}
.content input[type="submit"][value*="Delete" i],
.content input[type="button"][value*="Delete" i],
.content input[type="submit"][value*="Cancel" i] {
    background: var(--danger) !important; border-color: var(--danger) !important;
}

/* ---- 5b. Radio / checkbox spacing ------------------------------------------
   Legacy inline radios/checkboxes (and their labels) render with margin:0, so
   groups like "Un-Shipped Shipped Sample Order" jam together. Give them air. */
.content input[type="radio"], .content input[type="checkbox"] {
    width: auto !important; min-width: 0 !important; height: auto !important;
    margin: 0 4px 0 12px; vertical-align: middle; box-shadow: none !important;
}
.content input[type="radio"] + label, .content input[type="checkbox"] + label {
    margin-right: 8px; vertical-align: middle; cursor: pointer; font-weight: 500;
    white-space: nowrap; /* keep "Sample Order" etc. on one line */
}
/* don't indent the first control in a cell/row */
.content td > input[type="radio"]:first-child,
.content td > input[type="checkbox"]:first-child,
.content .form-group input[type="radio"]:first-child,
.content .form-group input[type="checkbox"]:first-child { margin-left: 0; }

/* ---- 6. Links --------------------------------------------------------- */
.content a, .content a.lnk, .content a.white, .content a.black,
.content a.boldblue, .content a.boldwhite {
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 500;
}
.content a:hover, .content a.lnk:hover { text-decoration: underline; color: var(--primary-dark) !important; }
/* Delete link buttons read as danger */
.content a[onclick*="delete" i], .content a[id*="Delete" i] { color: var(--danger) !important; }

/* ---- 7. Labels / readable text helpers -------------------------------- */
.content .bottom, .content .bottomCell, .content .bottomCell1, .content .bottomCell2,
.content .boldblue, .content .bold, .content .ForeColor {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
}
.content .red { color: var(--danger) !important; }
.content .green { color: var(--success) !important; }
.content .orange { color: var(--warning) !important; }

/* ---- 8. Data tables: GridView (grd*/gv*/grid*) + Telerik RadGrid ------- */
/* GridView control IDs render as the table id; match grd/gv/grid case-insensitively.
   We override the legacy inline HeaderStyle/RowStyle/FooterStyle/Alternating colors. */
.content table[id*="grd" i], .content table[id*="gv" i], .content table[id*="grid" i] {
    width: 100% !important;   /* override legacy inline Width="130px" so grids use the page width */
    border-collapse: collapse; background: #fff;
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    font-family: 'Inter', sans-serif !important; font-size: 13px;
}
/* Header cells — also catches bare <th> data grids + legacy header classes. */
.content th, .content .tableHeader, .content .dynRow, .content .pagerstyle,
.content .rgHeader, .content .GridViewHeader,
.content table[id*="grd" i] th, .content table[id*="gv" i] th, .content table[id*="grid" i] th {
    background: #f1f5f9 !important;
    background-image: none !important;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--border) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
/* Body cells — force white (kills the inline RowStyle/Alternating/Footer colors). */
.content table[id*="grd" i] td, .content table[id*="gv" i] td,
.content table[id*="grid" i] td, .content .rgMasterTable td {
    background-color: #fff !important; color: var(--text);
    padding: 8px 12px !important; border: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 13px; vertical-align: middle;
}
.content table[id*="grd" i] tr:hover td, .content table[id*="gv" i] tr:hover td,
.content table[id*="grid" i] tr:hover td { background-color: #f8fafb !important; }
/* GridView "footer" add-row (legacy dark FooterStyle) → light surface. */
.content table[id*="grd" i] tr td .btn,
.content table[id*="grd" i] tr td input[type="submit"] { min-height: 30px; padding: 6px 12px !important; }

/* Telerik RadGrid surface */
.content .RadGrid, .content .rgMasterTable {
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;   /* use the page width instead of a fixed Width */
}

/* ---- 8c. Telerik RadGrid command bar (Add new record / Refresh / Export …) -
   Telerik renders an icon <input type=submit value=" "> + a separate text <a> for each
   command. Our global button styling turns the empty icon inputs into blank blue boxes —
   hide them and promote the text links to proper buttons. */
.content .rgCommandRow td, .content .rgCommandCell { background: #f8fafc !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; }
.content .rgCommandTable { width: auto !important; background: transparent !important; }
.content .rgCommandRow input[type="submit"],
.content .rgCommandRow input[type="image"],
.content .rgCommandRow input[type="button"] { display: none !important; }
.content .rgCommandRow a {
    display: inline-flex !important; align-items: center; gap: 7px;
    padding: 8px 15px; margin: 0 8px 0 0; border-radius: 8px;
    background: var(--primary); color: #fff !important;
    font-weight: 600; font-size: 13px; text-decoration: none !important;
    border: 1px solid var(--primary); line-height: 1.2; white-space: nowrap;
}
.content .rgCommandRow a:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff !important; text-decoration: none !important; }
.content .rgCommandRow a[id*="InitInsert" i]::before,
.content .rgCommandRow a[id*="AddNew" i]::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f067"; font-size: 11px; }
.content .rgCommandRow a[id*="Refresh" i], .content .rgCommandRow a[id*="Rebind" i] { background: #fff; color: var(--primary) !important; border-color: var(--border); }
.content .rgCommandRow a[id*="Refresh" i]:hover, .content .rgCommandRow a[id*="Rebind" i]:hover { background: var(--primary-light); color: var(--primary) !important; }
.content .rgCommandRow a[id*="Refresh" i]::before, .content .rgCommandRow a[id*="Rebind" i]::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f021"; font-size: 11px; }

/* ---- 8d. Telerik RadGrid pager (First/Prev/Next/Last + page numbers + page size) -
   The nav buttons are empty-value <input type=submit> that our global button styling
   blew up into blue boxes. Make them neat arrow buttons; page numbers become pills. */
.content .rgPager td, .content .rgPagerCell, .content td.rgPagerCell { background: #f8fafc !important; border: 0 !important; }
.content .rgPager > td, .content .rgPager td.rgPagerCell, .content .rgPager td.rgStatus { padding: 8px 12px !important; }
.content .rgPager input.rgPageFirst, .content .rgPager input.rgPagePrev,
.content .rgPager input.rgPageNext,  .content .rgPager input.rgPageLast {
    width: 30px !important; height: 30px !important; min-width: 0 !important; padding: 0 !important;
    margin: 0 2px !important; border-radius: 7px !important; box-shadow: none !important; font-size: 0 !important;
    background-color: #fff !important; border: 1px solid var(--border) !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 15px 15px !important;
    cursor: pointer; vertical-align: middle;
}
.content .rgPager input.rgPageFirst:hover, .content .rgPager input.rgPagePrev:hover,
.content .rgPager input.rgPageNext:hover,  .content .rgPager input.rgPageLast:hover {
    background-color: var(--primary-light) !important; border-color: var(--primary) !important;
}
.content .rgPager input.rgPagePrev  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10 4 6 8 10 12' fill='none' stroke='%230078c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.content .rgPager input.rgPageNext  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 4 10 8 6 12' fill='none' stroke='%230078c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.content .rgPager input.rgPageFirst { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M9 4 5 8 9 12 M13 4 9 8 13 12' fill='none' stroke='%230078c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.content .rgPager input.rgPageLast  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7 4 11 8 7 12 M3 4 7 8 3 12' fill='none' stroke='%230078c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
/* Page number links + current page → pills. */
.content .rgPager .rgNumPart a, .content .rgPager .rgNumPart span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px; margin: 0 2px; border-radius: 7px;
    border: 1px solid var(--border); background: #fff; color: var(--primary) !important;
    font-weight: 600; font-size: 13px; text-decoration: none !important;
}
.content .rgPager .rgNumPart a:hover { background: var(--primary-light); border-color: var(--primary); text-decoration: none !important; }
.content .rgPager .rgNumPart span.rgCurrentPage, .content .rgPager .rgCurrentPage {
    background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
/* Page-size label + combo + "N items in M pages" status. */
.content .rgPager .rgPagerLabel, .content .rgPager .rgStatus, .content .rgPager .rgInfoPart { color: var(--text-muted); font-size: 12.5px; }
.content .rgPager .RadComboBox { min-width: 64px !important; vertical-align: middle; margin: 0 4px; }
.content .rgPager .rgWrap { vertical-align: middle; }

/* ---- 8b. Setup/Dynamic grids: action column + modern action buttons ------- */
/* Action column (first cell) hugs its buttons so the data columns get the width.
   Scoped to the Setup workspace, where the first column is always the action column. */
.gx-setup-main table[id*="grid" i] td:first-child,
.gx-setup-main table[id*="grid" i] th:first-child {
    width: 1%; white-space: nowrap; text-align: left;
}
.gx-grid-acthdr { letter-spacing: .5px; }
/* Modern Font-Awesome action buttons (DynamicGrid edit/delete/add/save/cancel LinkButtons). */
.content a.gx-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0 3px 0 0; border-radius: 8px;
    border: 1px solid var(--border); background: #fff; color: var(--text-muted) !important;
    font-size: 13px; text-decoration: none !important; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* Default state: each action icon carries its own colour + a matching tinted border. */
.content a.gx-act-edit   { color: var(--primary) !important; border-color: #bcd9ee; }
.content a.gx-act-del    { color: #e5484d !important;        border-color: #f1c3c5; }
.content a.gx-act-add,
.content a.gx-act-save   { color: #2f9e60 !important;        border-color: #bae3cb; }
.content a.gx-act-cancel { color: #6b7888 !important;        border-color: var(--border); }
/* Hover: fill with the matching tint. */
.content a.gx-act:hover { text-decoration: none !important; box-shadow: 0 1px 4px rgba(15,40,64,.12); }
.content a.gx-act-edit:hover   { background: var(--primary-light); border-color: var(--primary); color: var(--primary) !important; }
.content a.gx-act-del:hover    { background: #fdecec; border-color: #e5484d; color: #e5484d !important; }
.content a.gx-act-add:hover,
.content a.gx-act-save:hover   { background: #e9f9ef; border-color: #2f9e60; color: #2f9e60 !important; }
.content a.gx-act-cancel:hover { background: #f1f3f6; border-color: #9aa4b2; color: var(--text) !important; }
/* Legacy gif ImageButtons that remain elsewhere → keep them tidy too. */
.content table[id*="grid" i] td input[type="image"],
.content table[id*="grd" i] td input[type="image"] {
    height: 16px; padding: 6px; margin: 0 2px; border: 1px solid var(--border);
    border-radius: 7px; background: #fff; box-sizing: content-box; vertical-align: middle;
}

/* Setup workspace grids: full width (legacy .scrolltable has a fixed px width that is
   only overridden under .gx-page; the Setup rewrite uses .gx-setup-main instead) + larger
   type and roomier rows for a professional look. */
.gx-setup-main .scrolltable, .gx-setup-main .scrolltable > div,
.gx-setup-main table[id*="grid" i] { width: 100% !important; max-width: 100%; }
.gx-setup-main table[id*="grid" i] td { font-size: 14px !important; padding: 13px 16px !important; }
.gx-setup-main table[id*="grid" i] th { font-size: 12.5px !important; padding: 13px 16px !important; }
.gx-setup-main table[id*="grid" i] td .bottom,
.gx-setup-main table[id*="grid" i] td a { font-size: 14px; }
/* Redundant underlined "Setup <Category>" heading — the active nav item already shows it. */
.gx-setup-main [id$="lblOptMsg"] { display: none !important; }
/* Setup search bar (above the grid): icon-input + Search + Reset. */
.gx-setup-search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gx-setup-search .gx-search-field { position: relative; flex: 1 1 320px; min-width: 220px; display: flex; align-items: center; }
.gx-setup-search .gx-search-field > i { position: absolute; left: 13px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.gx-setup-search .gx-search-field input[type="text"] { width: 100%; padding-left: 36px !important; }
.gx-setup-search .gx-search-reset { cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 7px; user-select: none; }
.gx-setup-search .gx-search-reset:hover { color: var(--primary); background: var(--primary-light); }

/* Zebra striping + clearer row hover for readability. */
.content table[id*="grid" i] tr:nth-child(even) td,
.content table[id*="grd" i] tr:nth-child(even) td { background-color: #fafbfc !important; }
.content table[id*="grid" i] tbody tr:hover td,
.content table[id*="grid" i] tr:hover td,
.content table[id*="grd" i] tr:hover td { background-color: #eef5fb !important; }

/* Pager row (GridView PagerStyle CssClass="tableHeader") → centered pill buttons.
   The legacy pager stretches its inner <table> to full width (numbers spread out) and
   carries an inline color:White; we collapse it to auto width and style each page as a button. */
.gx-setup-main table[id*="grid" i] tr.tableHeader > td {
    background: #f8fafc !important; padding: 12px 14px !important; text-align: center;
    border-top: 1px solid var(--border) !important; border-bottom: 0 !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
.gx-setup-main table[id*="grid" i] tr.tableHeader table {
    width: auto !important; margin: 0 auto;
    border-collapse: separate !important; border-spacing: 6px 0;
}
.gx-setup-main table[id*="grid" i] tr.tableHeader table td {
    padding: 0 !important; background: transparent !important; border: 0 !important; width: auto !important;
}
.gx-setup-main table[id*="grid" i] tr.tableHeader a,
.gx-setup-main table[id*="grid" i] tr.tableHeader span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 9px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
    color: var(--primary) !important; font-size: 13.5px !important; font-weight: 600;
    text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important;
    transition: background .15s, border-color .15s, color .15s;
}
.gx-setup-main table[id*="grid" i] tr.tableHeader a:hover {
    background: var(--primary-light) !important; border-color: var(--primary); text-decoration: none !important;
}
.gx-setup-main table[id*="grid" i] tr.tableHeader span {  /* current page (non-link) */
    background: var(--primary) !important; border-color: var(--primary); color: #fff !important;
}

/* ---- 9b. Sidebar nav: asp:Menu (menuMain) — fully static accordion ---- */
.gx-menu, .gx-menu ul { list-style: none; margin: 0; padding: 0; }
.gx-menu li { position: relative; }
.gx-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px;
    color: #cfd8e3; font-size: 14px; font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s; white-space: normal; line-height: 1.35;
    cursor: pointer;
}
/* Menu item icons (root = module icon, inner = folder/arrow) */
.gx-menu a > i { width: 18px; flex: 0 0 auto; text-align: center; font-size: 13px; color: #8aa3bb; transition: color .15s; }
.gx-menu > li > a > i { color: var(--xero-blue); }
.gx-menu a:hover > i, .gx-menu-active > i { color: var(--xero-blue); }
.gx-menu a:hover, .gx-menu-hover {
    background: #1a3a5a !important; color: #fff !important;
    border-left-color: var(--xero-blue);
    text-decoration: none !important;
}
.gx-menu-active {
    background: linear-gradient(90deg,rgba(19,181,234,.18),transparent) !important;
    color: #fff !important; border-left-color: var(--xero-blue) !important;
}
/* Top-level module rows: brighter + bold */
.gx-menu > li > a { font-weight: 600; color: #eaf1f8; }
/* Collapsible accordion: submenus are hidden by DEFAULT (CSS, no JS needed for
   the initial state) and revealed only when their <li> carries .gx-open. The
   delegated click handler in Main.master toggles .gx-open. */
.gx-menu li > ul { display: none; }
.gx-menu li.gx-open > ul { display: block; }
/* Items with children get a chevron toggle indicator (set via JS: .gx-has-sub) */
.gx-menu li.gx-has-sub > a::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 9px; color: #7e94a8; margin-left: auto; transition: transform .15s;
}
.gx-menu li.gx-open > a::after { transform: rotate(180deg); color: var(--xero-blue); }
/* Nested submenu indentation + dimmer tone, with a guide rail */
.gx-menu ul { background: rgba(0,0,0,.18); }
.gx-menu ul a { padding-left: 34px; font-size: 13.5px; font-weight: 500; color: #aebfd0; }
.gx-menu ul ul a { padding-left: 48px; font-size: 13px; }
.gx-menu ul ul ul a { padding-left: 62px; }
.gx-menu ul a:hover { color: #fff; }

/* Topbar helpers */
.gx-burger { display: none; width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); background: #f4f6f8; }
.gx-burger:hover { background: var(--primary-light); color: var(--primary); }
.topbar .user-chip .avatar i { font-size: 12px; }
.gx-side-link { display: flex; align-items: center; gap: 8px; color: #cfd8e3; font-size: 12.5px; text-decoration: none; padding: 6px 0; }
.gx-side-link:hover { color: #fff; }
.gx-side-link i { color: var(--xero-blue); width: 16px; }
@media (max-width: 768px) { .gx-burger { display: flex; } }

/* ---- 9d. Module launcher (Admin/Modules.aspx) ------------------------- */
.gx-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.gx-modcard { background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; }
.gx-modcard:hover { box-shadow: var(--card-shadow-hover); }
.gx-modhead { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-weight: 700; font-size: 14px; color: var(--text); background: #fff; }
.gx-modicon { width: 34px; height: 34px; border-radius: 8px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.gx-modcount { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--border-light); border-radius: 20px; padding: 2px 9px; }
.gx-modlinks { padding: 6px 0; max-height: 280px; overflow-y: auto; }
.gx-modlinks a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; color: var(--text); text-decoration: none; }
.gx-modlinks a:hover { background: var(--primary-light); color: var(--primary); }
.gx-modlinks a i { color: var(--text-muted); font-size: 11px; }
.gx-modlinks a:hover i { color: var(--primary); }

/* ---- 9e. Rewritten Payroll-style form cards (e.g. IMS/AddOrder) ------- */
.gx-form-card { text-align: left; margin: 0 auto; }
.content .form-group label, .content .form-group label .boldwhite,
.content .form-group label .bottom {
    color: var(--text) !important; font-size: 13px !important; font-weight: 600 !important;
    text-decoration: none !important;
}
.content .form-group input[type="text"]:not(.radPreventDecorate):not(.rdfd_), .content .form-group input[type="password"],
.content .form-group textarea, .content .form-group select,
.content .form-group .forms8 {
    width: 100% !important; box-sizing: border-box;
}
.content .form-group textarea { min-height: 64px; }
.content .form-group .hint { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.content .gx-form-foot {
    display: flex; align-items: center; gap: 14px;
    margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border-light);
}
.content .gx-form-foot.gx-foot-left { justify-content: flex-start; border-top: 0; padding-top: 4px; }
/* Compulsory fields (detected by the naming convention in JS) — light-red shade
   + a red asterisk on the label. Applied via .gx-required-group on the form-group. */
.content .form-group.gx-required-group input[type="text"],
.content .form-group.gx-required-group input[type="password"],
.content .form-group.gx-required-group textarea,
.content .form-group.gx-required-group select,
.content .form-group.gx-required-group .RadComboBox,
.content .form-group.gx-required-group .rcbInput {
    background-color: #fff5f5 !important;
    border-color: #f1c2c2 !important;
}
.gx-req { color: var(--danger); font-weight: 700; margin-left: 2px; }
/* boldwhite labels sit on white cards now (legacy navy panels are neutralized) */
.content .boldwhite { color: var(--text) !important; }

/* ---- 9f. Full-width page wrapper for rewritten pages (e.g. AddOrder) --
   The legacy markup centers everything inside a fixed width="730" table inside
   a WIDTH:1% navy panel. We neutralize those so the rewritten card uses the
   real content width instead of floating centered with huge side margins. */
.gx-page { width: 100%; text-align: left; }
.gx-page center { display: block; text-align: left; }
.gx-page table[width="730"], .gx-page > table[align="center"] { width: 100% !important; }
/* The shrink-wrap panel table — match the width:1% style case-insensitively
   (AddOrder uses "WIDTH: 1%", EditOrder uses "width: 1%"). */
.gx-page table[style*="WIDTH: 1%"], .gx-page table[style*="width: 1%"] { width: 100% !important; }
.gx-page .scrolltable, .gx-page .scrolltableSmall, .gx-page .scrolltable1,
.gx-page .scrolltable_withHeight, .gx-page .scrolltable_withHeight2 { width: 100% !important; max-width: 100%; }
/* Legacy .scrolltable has a fixed narrow px width unless under .gx-page — broaden to every
   main-app (.content) page so bare secondary panels stop rendering narrow/left-aligned. */
.content .scrolltable, .content .scrolltable1,
.content .scrolltable_withHeight, .content .scrolltable_withHeight2 { width: 100% !important; max-width: 100%; }
.gx-page .gx-form-card { width: 100% !important; max-width: 100%; margin: 0; }
/* Per-tab panels on grid pages (EditOrder/RevisionOrder size-ratio, accessories,
   packing) render as a table CENTERED in an align="center" cell, so they float
   mid-page with big empty margins. LEFT-align them at their natural width (combos
   are already 500px) so controls stay grouped — stretching to 100% just flings the
   button/heading cells to opposite edges. */
.content table[id*="tblSizeItem"], .content table[id*="tblAccessories"],
.content table[id*="tblPackingInfo"], .content table[id*="tblItemSize"] {
    margin-left: 0 !important; margin-right: auto !important;
}

/* ---- 9g. GLOBAL full-width pages -------------------------------------------
   Legacy pages center their content inside a fixed-width wrapper table, leaving
   large empty side margins. Stretch the OUTERMOST table(s) inside .content to the
   full content width so every page uses the available space. The `:not(.content
   table table)` guard restricts this to TOP-LEVEL tables — nested tables (data
   grids, control groups, Telerik widget internals) keep their own sizing. */
.content > center, .content > form > center,
.content > div > center { display: block; text-align: left; }
.content table:not(.content table table) { width: 100% !important; max-width: 100%; }
/* Telerik widgets render their own tables — don't let the full-width rule stretch
   the dropdown list / calendar popups. */
.content table[id*="rcbList" i], .content .RadCalendar table { width: auto !important; }
/* ASP.NET TreeView renders each node as its OWN <table>; the full-width rule stretches
   them to the container and scrambles the node indentation (siblings land at different
   x). Keep TreeView node tables auto-width so the hierarchy lines up. (.gx-tree = the
   CssClass on those TreeViews, e.g. Admin/AddUser user-rights tree.) The doubled
   `.gx-tree.gx-tree` lifts specificity above the full-width rule's :not() selector. */
.content .gx-tree.gx-tree table { width: auto !important; }
/* RadComboBox: its inner table must FILL its own (width-constrained) wrapper span,
   not shrink to the text — otherwise the arrow floats inward leaving dead space to
   its right. The wrapper's own Width (px or 100%) still bounds it. */
.content .RadComboBox > table, .content .RadComboBox table.rcbInner { width: 100% !important; }
.content .RadComboBox .rcbInputCell { width: 100% !important; }          /* greedy: absorbs slack */
.content .RadComboBox .rcbArrowCell { width: 1% !important; white-space: nowrap; } /* shrink to arrow */
.content .RadComboBox .rcbInput { width: 100% !important; box-sizing: border-box; }
/* RadDatePicker: we set Width="100%" so the date input fills the form column. Its
   inner table MUST be bounded to the picker wrapper — otherwise, in div-based
   (table-less) forms, the input's width:100% has no constraining table and blows
   the input out to the full page width. Bound the table to 100% of the wrapper. */
.content .RadPicker { max-width: 100%; }
/* RadDateInput renders a hidden, absolutely-positioned value <input> marked
   radPreventDecorate / rdfd_ with an inline width:1px. The generic form-control
   width:100% rule (above) is excluded from these via :not(), so the inline 1px
   stands and the hidden input no longer blows the page out to a phantom scroll.
   Do NOT add a width !important here — it would re-override that inline 1px and,
   combined with the input's abs-positioning, re-expand it to the page width. */
/* Edit-menu LinkButtons rendered as Payroll tabs. Code-behind assigns boldblue to
   the active tab + boldwhite to the rest, so we key off those (not a .tab class). */
.content .tabs a {
    padding: 12px 18px !important; font-size: 13.5px !important; font-weight: 600 !important;
    color: var(--text-muted) !important; border-bottom: 2px solid transparent;
    white-space: nowrap; text-decoration: none !important; display: inline-block;
}
.content .tabs a:hover { color: var(--text) !important; background: #f8fafb; }
.content .tabs a.boldblue { color: var(--primary) !important; border-bottom-color: var(--primary) !important; }
/* Compact, colourful page header (used by rewritten pages + Modules launcher).
   A slim tinted bar with a gradient icon badge — shorter than the default. */
.content .page-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    background: linear-gradient(135deg, #eaf4fc 0%, #ffffff 70%);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 10px 18px;
    margin: 0 0 16px 0;
}
.content .page-header > div:first-child { display: flex; flex-direction: column; }
.content .page-header h2 {
    display: flex; align-items: center; gap: 11px;
    font-size: 17px; font-weight: 700; color: var(--sidebar-bg); line-height: 1.2; margin: 0;
}
.content .page-header h2 i {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #0078c8, #13b5ea); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; box-shadow: 0 3px 8px rgba(0,120,200,.28);
}
.content .page-header p { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0 41px; }

/* Close the dead space the legacy wrapper leaves between the heading and the
   first card (stray <br>s + an empty spacer row). Scoped to .gx-page = this
   rewritten page only. */
.gx-page br { display: none; }
.gx-page td:empty { padding: 0 !important; height: 0 !important; line-height: 0 !important; }

/* ---- 9h. Global date picker (js/gx-datepicker.js) --------------------------
   Calendar popup attached to every legacy free-text date field app-wide. */
.gx-dp {
    position: absolute; z-index: 100000; display: none;
    width: 252px; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(15,40,64,.18);
    padding: 10px; font-family: inherit; user-select: none;
}
.gx-dp-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gx-dp-title { font-weight: 700; font-size: 13.5px; color: var(--text); }
.gx-dp-nav {
    border: 1px solid var(--border); background: #fff; color: var(--text);
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1;
}
.gx-dp-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.gx-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gx-dp-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding: 4px 0; }
.gx-dp-day {
    border: 0; background: transparent; color: var(--text); cursor: pointer;
    height: 30px; border-radius: 7px; font-size: 12.5px;
}
.gx-dp-day:hover { background: var(--primary-light); }
.gx-dp-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--primary); }
.gx-dp-day.is-sel { background: var(--primary); color: #fff; font-weight: 700; }
.gx-dp-ft { display: flex; gap: 8px; margin-top: 8px; }
.gx-dp-ft button {
    flex: 1; border: 1px solid var(--border); background: #fff; color: var(--text);
    padding: 6px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.gx-dp-ft button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Fixed nav entry (Modules / Dashboard) above the dynamic menu */
.gx-fixed-nav { display: flex; align-items: center; gap: 11px; padding: 9px 20px; color: #eaf1f8; font-size: 13px; font-weight: 600; text-decoration: none; border-left: 3px solid transparent; }
.gx-fixed-nav:hover { background: #1a3a5a; color: #fff; border-left-color: var(--xero-blue); }
.gx-fixed-nav i { width: 18px; text-align: center; color: var(--xero-blue); }

/* ---- 9c. Popup master frame (PopUpMaster.master) ---------------------- */
.popup-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.popup-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--sidebar-bg); color: #fff;
    padding: 10px 18px; box-shadow: 0 2px 8px rgba(15,40,64,.15);
}
.popup-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #fff; }
.popup-content { padding: 20px 24px; }

/* ---- 9. Scroll containers keep modern scrollbars ---------------------- */
.content .scrolltable, .content .scrolltableSmall, .content .scrolltable1,
.content .scrolltable_withHeight, .content .scrolltable_withHeight2,
.content .scrollTableSmall, .content .scrollTableSmall2, .content .scrolldtable {
    scrollbar-width: thin;
    scrollbar-color: #bcc6d2 #f1f3f6;
    border-radius: 8px;
    overflow-x: auto !important;   /* legacy style.css forces overflow:scroll → always-visible bar; only show when needed */
}

/* =========================================================================
   10. Page styles moved out of inline <style>/style="" so theme changes
       propagate app-wide. (No page should embed its own CSS.)
   ========================================================================= */

/* ---- 10a. Login / Customer split-screen (Admin/Login.aspx, Customer/login.aspx) */
.auth-wrap { min-height: 100vh; display: flex; background: linear-gradient(135deg, #0f2840 0%, #1a3a5a 60%, #13b5ea 100%); }
.auth-side { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 50px; color: #fff; }
.auth-side .logo { display: flex; align-items: center; gap: 14px; }
.auth-side .logo-mark { width: 48px; height: 48px; background: linear-gradient(135deg, #13b5ea, #fff); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #0f2840; font-weight: 800; font-size: 18px; }
.auth-brand-name { font-weight: 700; font-size: 18px; }
.auth-brand-sub { font-size: 12px; opacity: .7; }
.auth-side h1 { font-size: 42px; font-weight: 800; margin-top: 80px; letter-spacing: -1px; line-height: 1.1; }
.auth-side h1 span { background: linear-gradient(90deg, #13b5ea, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-side p { font-size: 17px; opacity: .85; margin-top: 18px; max-width: 480px; line-height: 1.55; }
.auth-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; max-width: 520px; }
.auth-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; opacity: .9; }
.auth-feature i { color: #13b5ea; margin-top: 3px; }
.auth-footer { font-size: 12px; opacity: .7; }
.auth-card { flex: 0 0 480px; background: #fff; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
.auth-card h2 { font-size: 26px; font-weight: 700; color: var(--text); }
.auth-card .sub { color: var(--text-muted); margin-top: 6px; margin-bottom: 32px; font-size: 13.5px; }
.auth-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; margin-top: 14px; color: var(--text); }
.auth-form input[type=text], .auth-form input[type=password] { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #f8fafb; font-family: inherit; color: var(--text); box-sizing: border-box; }
.auth-form input[type=text]:focus, .auth-form input[type=password]:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,120,200,.12); }
.auth-form .row-link { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; }
.auth-form .row-link a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-form .row-link span { color: var(--text-muted); }
.auth-form .auth-remember { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; cursor: pointer; user-select: none; }
.auth-form .auth-remember span { color: var(--text); }
.auth-form .auth-remember input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.auth-form .auth-casenote { margin-top: 12px; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.auth-form .auth-casenote i { color: var(--primary); }
.auth-form input[type=submit] { width: 100%; padding: 13px 18px; margin-top: 22px; background: linear-gradient(135deg, #0078c8, #13b5ea); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: .3px; box-shadow: 0 6px 16px rgba(0,120,200,.25); transition: all .15s; -webkit-appearance: none; appearance: none; font-family: inherit; line-height: 1.2; }
.auth-form input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,120,200,.3); background: linear-gradient(135deg, #005a96, #0078c8); }
.auth-form input[type=submit]:active { transform: translateY(0); }
.auth-help { margin-top: 28px; padding: 14px 16px; background: #f4f8fb; border: 1px dashed #b3d4e6; border-radius: 8px; font-size: 12px; color: #4a5b6e; line-height: 1.6; }
.auth-help i { color: var(--primary); margin-right: 6px; }
.auth-error { background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; font-weight: 600; }
@media (max-width: 920px) { .auth-side { display: none; } .auth-card { flex: 1; } }

/* ---- 10b. Dashboard (Admin/Dashboard.aspx) ---------------------------- */
.gx-dash { font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif; color: #2b3a4a; padding: 12px; background: #f4f6fa; }
.gx-dash * { box-sizing: border-box; }
.gx-header { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #0f2840 0%, #0078c8 100%); color: #fff; padding: 16px 22px; border-radius: 10px; box-shadow: 0 4px 14px rgba(15,40,64,0.18); margin-bottom: 16px; }
.gx-header h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.gx-header h2 { margin: 0; font-size: 12px; opacity: .85; font-weight: 400; }
.gx-header .gx-user { font-size: 12px; opacity: .9; }
.gx-grid { display: grid; gap: 14px; }
.gx-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gx-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gx-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .gx-cols-3, .gx-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .gx-cols-3, .gx-cols-4, .gx-cols-2 { grid-template-columns: 1fr; } }
.gx-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(20,30,60,0.06); border: 1px solid #e7ecf3; }
.gx-card h3 { margin: 0 0 10px 0; font-size: 13px; color: #0078c8; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; border-bottom: 2px solid #eaeef5; padding-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.gx-section-title { margin: 18px 0 8px 0; padding: 8px 12px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0f2840, #1a3a5a); border-radius: 6px; letter-spacing: .5px; display: flex; justify-content: space-between; align-items: center; }
.gx-grid.gx-mb { margin-bottom: 14px; }
.gx-empty { padding: 8px; color: #95a4b8; }
.gx-kpi { background: #fff; border-radius: 10px; padding: 14px; border: 1px solid #e7ecf3; box-shadow: 0 2px 8px rgba(20,30,60,0.06); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.gx-kpi:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #0078c8; }
.gx-kpi.k-green:before { background: #27ae60; }
.gx-kpi.k-amber:before { background: #f39c12; }
.gx-kpi.k-red:before { background: #e74c3c; }
.gx-kpi.k-purple:before { background: #8e44ad; }
.gx-kpi .lbl { font-size: 11px; color: #6b7c93; text-transform: uppercase; letter-spacing: .4px; }
.gx-kpi .val { font-size: 22px; font-weight: 700; color: #0078c8; }
.gx-kpi .sub { font-size: 11px; color: #95a4b8; }
.gx-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.gx-tbl th, .gx-tbl td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; text-align: left; }
.gx-tbl th { background: #f4f7fb; color: #2b3a4a; font-weight: 700; }
.gx-tbl tr:hover td { background: #fafbfd; }
.gx-tbl td.num, .gx-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; height: 240px; cursor: pointer; }
.chart-wrap.sm { height: 200px; }
.chart-wrap.lg { height: 280px; }
.gx-view-btn { font-size: 10px; font-weight: 600; letter-spacing: .3px; background: #e6f3fb; color: #0078c8; border: 1px solid #b3d4e6; padding: 3px 8px; border-radius: 4px; cursor: pointer; text-transform: none; }
.gx-view-btn:hover { background: #0078c8; color: #fff; }
.gx-modal-bg { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(20,30,60,0.55); z-index: 9998; }
.gx-modal { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1100px, 94vw); height: min(720px, 88vh); background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 9999; overflow: hidden; flex-direction: column; }
.gx-modal.open, .gx-modal-bg.open { display: flex; }
.gx-modal-head { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #0f2840 0%, #0078c8 100%); color: #fff; padding: 10px 14px; }
.gx-modal-head h4 { margin: 0; font-size: 14px; }
.gx-modal-close { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 16px; }
.gx-modal-close:hover { background: rgba(255,255,255,.30); }
.gx-modal iframe { flex: 1 1 auto; width: 100%; border: 0; }

/* ---- 10c. Small layout helpers (replace inline style="") -------------- */
.gx-filerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gx-fileinput { width: 254px; height: 19px; }
.gx-radiorow { display: flex; align-items: center; gap: 22px; }
.gx-radio { display: flex; align-items: center; gap: 6px; }
.gx-copyright { margin-top: 10px; font-size: 11px; color: #7e94a8; }
.gx-filter-input { width: 260px; }
.popup-brand .brand-logo { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }

/* ---- Setup workspace (Admin/Setup.aspx): left category nav + content pane ---- */
.gx-setup-layout { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.gx-setup-nav { flex: 0 0 235px; align-self: stretch; }
.gx-setup-nav .card-body { padding: 10px; }
.gx-setup-navlist { display: flex; flex-direction: column; gap: 3px; }
.content a.gx-setup-link {
    display: flex !important; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: 8px;
    color: var(--text) !important; text-decoration: none !important;
    font-weight: 600; font-size: 13.5px; width: 100%;
    border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.content a.gx-setup-link i { width: 17px; text-align: center; color: var(--text-muted); font-size: 13px; }
.content a.gx-setup-link:hover {
    background: var(--primary-light); color: var(--primary) !important;
    text-decoration: none !important; border-color: var(--border);
}
.content a.gx-setup-link:hover i { color: var(--primary); }
.content a.gx-setup-link.gx-setup-active { background: var(--primary); color: #fff !important; border-color: var(--primary); }
.content a.gx-setup-link.gx-setup-active i { color: #fff; }
.gx-setup-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gx-setup-main > .gx-form-card { margin: 0; }
@media (max-width: 900px) {
    .gx-setup-layout { flex-direction: column; }
    .gx-setup-nav { flex-basis: auto; width: 100%; }
}

/* ---- Yarn balance readout (YMS/YarnAdjustment*.aspx) ---- */
.gx-balance {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid #dfe4ea;
    border-left: 3px solid #b9c2cc;
    border-radius: 4px;
    background: #f7f9fb;
    color: #6b7785;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    min-width: 190px;
}
.gx-balance.pos { border-left-color: #2e8b57; background: #f2faf5; color: #1f6b41; }
.gx-balance.neg { border-left-color: #c0392b; background: #fdf4f3; color: #a5342a; }
.gx-balance .gx-balance-kg { font-weight: 500; opacity: .75; }