/* ==========================================================================
   BAJAJ CRM — MODERN THEME
   Rich UI re-skin layered on top of Bootstrap 3 / AdminLTE 2.
   Loaded AFTER all legacy stylesheets so these rules win the cascade.
   Nothing here renames or removes existing classes/IDs used by
   server-generated markup (sidebar-menu, treeview, box, GridView, etc.)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root {
    /* Tuned to match the app's existing hard-coded brand blue (#2a8bcb,
       hover/active #0b66a2 - both forced via !important and inline
       GridView styles throughout the legacy pages). Using the same hue
       family means anything we can't override blends in instead of
       fighting the new theme. */
    --brand-50: #eaf4fb;
    --brand-100: #d3e9f6;
    --brand-400: #57a5d6;
    --brand-500: #3893cc;
    --brand-600: #2a8bcb;
    --brand-700: #0b66a2;
    --brand-900: #0c3a5c;

    --ink-900: #111827;
    --ink-700: #374151;
    --ink-500: #6b7280;
    --ink-300: #d1d5db;
    --ink-100: #f3f4f6;

    --surface: #f5f6fb;
    --card: #ffffff;
    --border: #e7e9f3;
    --border-strong: #cdd3e0;
    --table-border: #bcd7ea;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 6px 18px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 20px 40px rgba(30, 27, 75, 0.12);
    --sidebar-w: 260px;
    --topbar-h: 64px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', var(--font);
}

/* ---------- Base ---------- */
body.skin-blue,
body.hold-transition {
    font-family: var(--font);
    background: var(--surface);
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
}

.login-shell,
.login-shell *,
body.skin-blue .top-menu-bar,
body.skin-blue .top-menu-bar *,
#crmNavModeToggle {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 600;
}

a { transition: color .15s ease, background-color .15s ease; }

/* Custom scrollbar */
.main-sidebar::-webkit-scrollbar,
.content-wrapper ::-webkit-scrollbar { width: 8px; height: 8px; }
.main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.content-wrapper ::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 8px; }

/* ==========================================================================
   HEADER / TOPBAR
   ========================================================================== */
body.skin-blue .main-header {
    background: var(--card);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border);
}

body.skin-blue .main-header .logo {
    width: var(--sidebar-w);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-900)) !important;
    height: var(--topbar-h);
    line-height: var(--topbar-h);
    text-align: left;
    padding: 0 20px;
    transition: width .2s ease;
}

body.skin-blue .main-header .logo .logo-lg img,
body.skin-blue .main-header .logo .logo-mini img {
    max-height: 34px;
    width: auto;
}

body.skin-blue .main-header .navbar {
    margin-left: var(--sidebar-w);
    background: transparent !important;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    box-shadow: none;
    display: flex;
    align-items: center;
    transition: margin-left .2s ease;
}

body.skin-blue .main-header .navbar .sidebar-toggle,
body.skin-blue .main-header .sidebar-toggle {
    color: var(--ink-700) !important;
    padding: 20px 18px;
}
body.skin-blue .main-header .sidebar-toggle:hover { background: var(--ink-100); }
body.skin-blue .main-header .sidebar-toggle .icon-bar {
    background: var(--ink-700);
}

/* Nav-mode toggle — a self-contained floating control, appended directly to
   <body> by modern-ui.js (NOT inside .navbar-nav). Keeping it outside the
   legacy navbar markup means it can never inherit/collide with AdminLTE's
   ".navbar-nav > li > a" rules (that collision is what caused the earlier
   blank, oversized, overlapping pill). Every rule below carries !important
   as a second line of defense since this element must always render the
   same way regardless of whatever else is loaded on a given page. */
#crmNavModeToggle {
    all: initial !important;
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 99999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-700)) !important;
    color: #fff !important;
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    user-select: none !important;
}
#crmNavModeToggle:hover { filter: brightness(1.08) !important; }
#crmNavModeToggle i { font-size: 13px !important; }
#crmNavModeToggle span { color: #fff !important; }

.navbar-custom-menu { margin-left: auto; }

body.skin-blue .main-header .navbar .nav > li > a,
body.skin-blue .navbar-nav > li > a {
    color: var(--ink-700) !important;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 500;
}

body.skin-blue .main-header .navbar .nav > li > a:hover,
body.skin-blue .main-header .navbar .nav > li > a:active,
body.skin-blue .main-header .navbar .nav > li > a:focus,
body.skin-blue .main-header .navbar .nav .open > a,
body.skin-blue .main-header .navbar .nav .open > a:hover,
body.skin-blue .main-header .navbar .nav .open > a:focus {
    background: var(--ink-100) !important;
    color: var(--brand-700) !important;
}

body.skin-blue .navbar-nav .dropdown-menu {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 8px;
}
body.skin-blue .navbar-nav .dropdown-menu > li > a {
    border-radius: 6px;
    padding: 9px 12px;
    font-weight: 500;
    color: var(--ink-700);
}
body.skin-blue .navbar-nav .dropdown-menu > li > a:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
body.skin-blue .navbar-nav .dropdown-menu .user-header a i { margin-right: 8px; width: 16px; }

.logout, body.skin-blue .btn.logout {
    background: linear-gradient(135deg, var(--danger), #f43f5e);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 12.5px;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
body.skin-blue .main-sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(190deg, var(--brand-900) 0%, #241f5c 55%, var(--brand-700) 100%) !important;
    box-shadow: var(--shadow-lg);
    padding-top: var(--topbar-h);
    transition: width .2s ease, margin-left .2s ease;
}

body.skin-blue .sidebar { padding-bottom: 30px; }

body.skin-blue .user-panel {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 0;
}
body.skin-blue .user-panel .pull-left.image { display: none; }
body.skin-blue .user-panel p {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    letter-spacing: .2px;
}
body.skin-blue .user-panel a { color: rgba(255,255,255,.65); font-size: 12px; }
body.skin-blue .user-panel .fa.text-success { color: #34d399 !important; }

/* Sidebar search box removed per requirement — it consumed too much
   vertical space in the nav. Hidden defensively too, in case it's still
   present on any page/master we haven't touched. */
body.skin-blue .sidebar-form { display: none !important; }

/* Dynamic menu (rendered server-side into #myUL / .sidebar-menu) */
body.skin-blue .sidebar-menu { margin-top: 8px; padding: 0 10px; }
body.skin-blue .sidebar-menu > li { margin-bottom: 2px; }

body.skin-blue .sidebar-menu > li > a,
body.skin-blue .sidebar-menu li.treeview > a {
    color: rgba(255,255,255,.82) !important;
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-left: none;
}

body.skin-blue .sidebar-menu > li > a > i:first-child,
body.skin-blue .sidebar-menu li.treeview > a > i:first-child {
    width: 22px;
    text-align: center;
    margin-right: 10px;
    font-size: 15px;
    color: rgba(255,255,255,.65);
}

body.skin-blue .sidebar-menu > li > a:hover,
body.skin-blue .sidebar-menu li.treeview > a:hover,
body.skin-blue .sidebar-menu > li.active > a {
    background: rgba(255,255,255,.1);
    color: #fff;
}
body.skin-blue .sidebar-menu > li.active > a {
    background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    box-shadow: inset 3px 0 0 #818cf8;
}
body.skin-blue .sidebar-menu > li.active > a > i:first-child { color: #fff; }

body.skin-blue .sidebar-menu .treeview-menu {
    background: rgba(0,0,0,.15);
    border-radius: var(--radius-sm);
    margin: 2px 0 6px 8px;
    padding: 4px;
}
body.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: rgba(255,255,255,.68);
    padding: 9px 12px 9px 30px;
    font-size: 12.8px;
    border-radius: 6px;
}
body.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
body.skin-blue .sidebar-menu .treeview-menu > li > a i { margin-right: 8px; font-size: 6px; }

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
body.skin-blue .content-wrapper {
    margin-left: var(--sidebar-w);
    background: var(--surface);
    transition: margin-left .2s ease;
}
body.skin-blue .content { padding: 22px 26px 40px; }

/* AdminLTE "box" widget -> modern card */
body.skin-blue .box {
    background: var(--card) !important;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
}
body.skin-blue .box.box-primary,
body.skin-blue .box.box-solid { border-top: none; }
body.skin-blue .box-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
body.skin-blue .box-header:empty { display: none; }
body.skin-blue .box-header .box-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-900);
}
body.skin-blue .box-body { padding: 20px 22px; }
body.skin-blue .box-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--ink-100);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Dashboard stat widgets (AdminLTE ".small-box"). Several pages ship their
   own inline <style> block (loaded after this file, e.g. AdminDashboard.aspx
   sets `.small-box{background:linear-gradient(...)}`) so every property
   here carries !important and a body-scoped selector to guarantee a single,
   consistent, professional look everywhere regardless of per-page CSS. */
body.skin-blue .small-box {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 6px 4px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
body.skin-blue .small-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
    color: inherit !important;
}
body.skin-blue .small-box > .inner { padding: 18px 20px 14px; position: relative; z-index: 2; }
body.skin-blue .small-box h3 {
    font-family: var(--font-display);
    font-size: 28px !important;
    font-weight: 700;
    color: var(--ink-900) !important;
    margin: 0 0 4px 0 !important;
    white-space: normal !important;
}
body.skin-blue .small-box p {
    font-size: 12.5px !important;
    font-weight: 600;
    color: var(--ink-500) !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
}
body.skin-blue .small-box p > small { color: var(--ink-500) !important; }
body.skin-blue .small-box .icon {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    left: auto !important;
    font-size: 30px !important;
    color: var(--brand-600) !important;
    opacity: .16;
    z-index: 1;
}
body.skin-blue .small-box .icon i,
body.skin-blue .small-box .icon svg { font-size: 30px !important; }
body.skin-blue .small-box:hover .icon { font-size: 30px !important; opacity: .24; }
body.skin-blue .small-box > .small-box-footer {
    position: static !important;
    background: var(--ink-100) !important;
    color: var(--brand-700) !important;
    font-weight: 600;
    font-size: 12px;
    padding: 9px 0 !important;
    border-top: 1px solid var(--border);
}
body.skin-blue .small-box > .small-box-footer:hover {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
/* Neutralize the per-page colored border/gradient variants (first_box,
   second_box, third_box, four_box) so every card matches the same clean
   card look instead of a mismatched rainbow row. */
body.skin-blue .small-box.first_box,
body.skin-blue .small-box.second_box,
body.skin-blue .small-box.third_box,
body.skin-blue .small-box.four_box {
    background: var(--card) !important;
    border-top: 3px solid var(--brand-500) !important;
}

/* Bootstrap panels used on some pages */
/* Many pages (80+) reuse Bootstrap's .modal-dialog / .modal-content classes
   as a static "framed card" rather than an actual popup — Bootstrap forces
   those to width:600px; margin:30px auto at desktop widths, which is why
   sections like Print Order's search panel rendered narrow, off-center,
   with large empty gaps instead of spanning the card's full width. This
   only targets the *static* usage (not nested inside a real .modal popup),
   so genuine Bootstrap JS modals elsewhere keep their normal sizing. */
.modal-dialog:not(.modal .modal-dialog) {
    width: 100% !important;
    margin: 0 !important;
}
.modal-content:not(.modal .modal-content) {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.modal-header:not(.modal .modal-header) {
    border-bottom: 1px solid var(--border);
    padding: 0 0 16px 0;
    margin-bottom: 18px;
}
.modal-header:not(.modal .modal-header) .modal-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-900);
}
.modal-body:not(.modal .modal-body) { padding: 0; }

/* GridView ".footable" output (used on 60+ pages) — same modern treatment
   as .table, plus !important where GridView's HeaderStyle-BackColor /
   ForeColor properties render as inline style="" (which beats any
   non-!important external CSS regardless of selector specificity). */
/* Bootstrap's raw .container (used inside a few pages, e.g. Manage Order)
   forces a fixed 750/970/1170px centered width — appropriate for a
   full-viewport page, but when nested inside our sidebar-offset content
   area it creates large, unwanted empty margins on both sides instead of
   filling the available card width. */
body.skin-blue .box .container,
body.skin-blue .box-header .container,
body.skin-blue .box-body .container,
body.skin-blue .content .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Truncated composition preview cells (click to expand, hover for full text
   via the native title tooltip). */
.comp-truncate {
    cursor: pointer;
    display: inline-block;
    max-width: 460px;
}
.comp-truncate:hover { color: var(--brand-700); text-decoration: underline dotted; }

/* Grid toolbar — total-record count on the far left, filter controls on the
   far right, single row above the GridView. Replaces the old float-based
   layout (which had no vertical alignment and wrapped unpredictably). */
.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding: 10px 4px 14px;
}
.grid-toolbar-count {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--brand-700);
    white-space: nowrap;
}
.grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-left: auto;
}
.grid-pagesize-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    white-space: nowrap;
    margin: 0;
}
.grid-toolbar-pagesize.form-control {
    width: auto;
    min-width: 68px;
    padding: 6px 10px;
}
.grid-toolbar-filter.form-control {
    width: auto;
    min-width: 200px;
}
@media (max-width: 600px) {
    .grid-toolbar { flex-direction: column; align-items: stretch; }
    .grid-toolbar-right { margin-left: 0; flex-direction: column; align-items: stretch; }
    .grid-toolbar-filter.form-control,
    .grid-pagesize-label { width: 100%; }
}

.footable {
    width: 100% !important;
    background: var(--card) !important;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.footable > thead > tr > th {
    background: var(--ink-100) !important;
    color: var(--ink-700) !important;
    font-family: var(--font-display);
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--border-strong) !important;
    padding: 10px 12px !important;
}
.footable > tbody > tr > td {
    padding: 10px 12px;
    font-size: 13px;
    border-top: 1px solid var(--border-strong) !important;
    vertical-align: middle;
}
.footable > tbody > tr:nth-of-type(odd) { background: var(--brand-50); }
.footable > tbody > tr:hover { background: var(--brand-50); }

.panel {
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
}
.panel-heading {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 600;
    font-family: var(--font-display);
}

/* Buttons */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    letter-spacing: .1px;
    box-shadow: none;
}
.btn-primary, .btn-new {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border: none;
}
.btn-primary:hover, .btn-new:hover {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
}
.btn-default {
    background-color: var(--card);
    border: 1px solid var(--ink-300);
    color: var(--ink-700);
}
.btn-success { background: linear-gradient(135deg, #10b981, #059669); border: none; }
.btn-danger  { background: linear-gradient(135deg, #f43f5e, #e11d48); border: none; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); border: none; color: #fff; }
.btn-flat { border-radius: var(--radius-sm); }

/* Forms */
.form-control {
    background-color: var(--card);
    color: var(--ink-900);
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-300);
    box-shadow: none;
    padding: 9px 12px;
    font-size: 13.5px;
    height: auto;
}
/* Clean, standard dropdown arrow — explicit and self-contained so it can
   never again be knocked out by a shorthand `background` reset elsewhere.
   Applied at the plain element level too (not just .form-control) so any
   select on any page gets the same safe, single, non-repeating arrow. */
select,
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 34px;
}
.form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}
label { font-weight: 600; color: var(--ink-700); font-size: 13px; }

/* Tables / GridView / footable output */

/* Any wide table now scrolls inside its own card instead of blowing out
   the page width — this, combined with removing the earlier global
   box-sizing:border-box reset, is what fixes GridViews that previously
   didn't fit the viewport. */
body.skin-blue .box-body,
body.skin-blue .box-header,
body.skin-blue #no-more-tables,
body.skin-blue .content .table-responsive {
    overflow-x: auto;
}
/* Elements with overflow:auto/hidden get their content silently clipped
   to one page when printed instead of flowing across multiple pages —
   this is what caused the Print Order preview to "collapse" after a
   search. Restore normal flow specifically for print. */
@media print {
    body.skin-blue .box-body,
    body.skin-blue .box-header,
    body.skin-blue #no-more-tables,
    body.skin-blue .content .table-responsive {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}
.table { width: 100%; }
.table {
    background: var(--card) !important;
    border: 1px solid var(--table-border) !important;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
/* !important because ASP.NET GridView HeaderStyle-BackColor/ForeColor
   properties render as inline style="" attributes on <th>, which beat any
   non-!important external CSS regardless of selector specificity. */
.table > thead > tr > th {
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700)) !important;
    color: #ffffff !important;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    padding: 13px 16px;
    white-space: nowrap;
}
.table > thead > tr > th:last-child { border-right: none !important; }
.table > tbody > tr > td {
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--ink-700);
    border-top: 1px solid var(--table-border) !important;
    border-right: 1px solid var(--table-border);
    vertical-align: middle;
}
.table > tbody > tr > td:last-child { border-right: none; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--brand-50); }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background: var(--brand-100) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    border: 1px solid var(--table-border) !important;
}

/* Same premium blue-header treatment for .footable (60+ pages use this
   class instead of .table for their GridView). */
.footable {
    width: 100% !important;
    background: var(--card) !important;
    border: 1px solid var(--table-border) !important;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.footable > thead > tr > th {
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700)) !important;
    color: #ffffff !important;
    font-family: var(--font-display);
    font-size: 11.5px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    padding: 11px 14px !important;
}
.footable > thead > tr > th:last-child { border-right: none !important; }
.footable > tbody > tr > td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ink-700);
    border-top: 1px solid var(--table-border) !important;
    border-right: 1px solid var(--table-border);
    vertical-align: middle;
}
.footable > tbody > tr > td:last-child { border-right: none; }
.footable > tbody > tr:nth-of-type(odd) { background: var(--brand-50); }
.footable > tbody > tr:hover { background: var(--brand-100) !important; }

.GridPager td { padding: 10px !important; }
.GridPager a, .GridPager span {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
}
.GridPager span { background: var(--brand-600); color: #fff; }
.GridPager a { color: var(--brand-700); }
.GridPager a:hover { background: var(--brand-50); text-decoration: none; }

/* Default ASP.NET GridView pager: a small nested <table> of page-number
   links inside the last row's <td>, with no dedicated CSS class. Covers both
   .table and .footable grids — pagers that aren't wrapped in .GridPager so
   they don't render as bare unstyled blue text links. */
.table td > table,
.footable td > table {
    border: none;
    background: transparent;
    margin: 10px auto 4px;
}
.table td > table td,
.footable td > table td { border: none !important; padding: 0 3px !important; }
.table td > table a,
.table td > table span,
.footable td > table a,
.footable td > table span {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
}
.table td > table span,
.footable td > table span { background: var(--brand-600); color: #fff; }
.table td > table a,
.footable td > table a { color: var(--brand-700); }
.table td > table a:hover,
.footable td > table a:hover { background: var(--brand-50); text-decoration: none; }

/* Labels / badges */
.label {
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 11px;
}

/* Modals */
.modal-content {
    background: var(--card);
    color: var(--ink-700);
    border-radius: var(--radius);
    border: none;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
}
.modal-header .modal-title { font-family: var(--font-display); font-weight: 600; }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 22px; }

/* Footer */
body.skin-blue .main-footer {
    margin-left: var(--sidebar-w);
    background: var(--card);
    border-top: 1px solid var(--border);
    color: var(--ink-500);
    font-size: 12.5px;
    padding: 14px 26px;
    transition: margin-left .2s ease;
}

/* ==========================================================================
   DUAL NAV — collapsed sidebar mode (AdminLTE default behaviour, restyled)
   ========================================================================== */
body.sidebar-collapse .main-sidebar,
body.sidebar-collapse.skin-blue .main-sidebar { width: 60px; }
body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer,
body.sidebar-collapse .main-header .navbar { margin-left: 60px; }
body.sidebar-collapse .main-header .logo { width: 60px; padding: 0; text-align: center; }

/* ==========================================================================
   DUAL NAV — horizontal top-menu mode (added by modern-ui.js)
   ========================================================================== */
body.nav-mode-top .main-sidebar { display: none; }
body.nav-mode-top .content-wrapper,
body.nav-mode-top .main-footer { margin-left: 0; }
body.nav-mode-top .main-header .navbar { margin-left: 0; }
body.nav-mode-top .main-header .logo { width: var(--sidebar-w); }

.top-menu-bar {
    display: none;
    background: linear-gradient(90deg, var(--brand-900), var(--brand-700));
    padding: 0 16px;
    box-shadow: var(--shadow-sm);
}
body.nav-mode-top .top-menu-bar { display: block; }

.top-menu-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.top-menu-bar > ul > li { position: relative; }
.top-menu-bar > ul > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.85);
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 500;
}
.top-menu-bar > ul > li > a:hover,
.top-menu-bar > ul > li.open > a { background: rgba(255,255,255,.12); color: #fff; }
.top-menu-bar .fa-angle-left { display: none; } /* directional caret from sidebar markup not needed here */

.top-menu-bar .treeview-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1050;
}
.top-menu-bar > ul > li.open > .treeview-menu { display: block; }
.top-menu-bar .treeview-menu > li > a {
    color: var(--ink-700) !important;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    display: block;
}
.top-menu-bar .treeview-menu > li > a:hover,
.top-menu-bar .treeview-menu > li.active > a {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
/* Any second-level nested submenu (rare) renders inline instead of as a
   second flyout, so it's never invisible even without extra JS toggling. */
.top-menu-bar .treeview-menu .treeview-menu {
    position: static;
    box-shadow: none;
    background: var(--ink-100);
    margin: 2px 0 2px 10px;
    display: block !important;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

/* --- Hard reset of legacy bajaj_custom.css rules that centered the OLD
   login box with fixed-pixel absolute positioning (.login-page .frm { position:
   absolute; left:50%; margin-left:-225.2px; top:50%; margin-top:-177px; }).
   That rule pulled the form completely out of flow and on top of everything
   else, which is what caused the broken/overlapping look. We neutralize it
   here with matching-or-higher specificity + !important so it can never
   come back, regardless of stylesheet order. --------------------------- */
.login-page .frm,
.login-page .login-form-inner {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.login-page .form-box {
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
}
.login-page .form-top {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
}
.login-page .form-top-left {
    float: none !important;
    width: 100% !important;
    padding-top: 0 !important;
}
.login-page .form-top-right { display: none !important; }
.login-page .form-bottom {
    background: transparent !important;
    padding: 0 !important;
}

body.hold-transition.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-900) !important;
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAgMTAwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSIxMDAwIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iYmdHbG93IiBjeD0iNjAlIiBjeT0iNTUlIiByPSI4NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxZjZmYTgiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMGIzYTVjIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJjYXBPcmFuZ2UiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZiNzRkIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NSIgc3RvcC1jb2xvcj0iI2Y1N2MwMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNiMzU3MDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNhcE9yYW5nZUNhcCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGZlNmVjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwQmx1ZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM2ZmMzZjAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU1IiBzdG9wLWNvbG9yPSIjMmE4YmNiIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBjNWE4YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwQmx1ZUNhcCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGZlNmVjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwR3JlZW4iIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOGJkNjhiIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NSIgc3RvcC1jb2xvcj0iIzQzYTA0NyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZjZiMjMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNhcEdyZWVuQ2FwIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkZmU2ZWMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJXaGl0ZSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iNzUlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZWVmMmY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzY2FkNCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0idGFiWWVsbG93IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI3NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmYyYTgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmQ5M2QiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDY5ZjAwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJQaW5rIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI3NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmMyZDkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmMDYyOWEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjgyMzVmIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJSZWQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijc1JSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmOWE4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2U1NDczYSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YzFmMTYiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJib3R0bGVHbGFzcyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iI2VhZjZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN5cnVwTGlxdWlkIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmYjc0ZCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkOTcwMGMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPGZpbHRlciBpZD0ic29mdEJsdXJMZyIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIwIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIgaWQ9InNvZnRCbHVyU20iIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3Ii8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIgaWQ9ImRyb3BTaGFkb3ciIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIwIiBkeT0iMTYiIHN0ZERldmlhdGlvbj0iMTYiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjQiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjcwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ1cmwoI2JnR2xvdykiLz4KCiAgPCEtLSBCbHVycmVkIGJva2VoIHNwcmVhZCBhY3Jvc3MgdGhlIHdob2xlIHBhbmVsIC0tPgogIDxnIGZpbHRlcj0idXJsKCNzb2Z0Qmx1ckxnKSIgb3BhY2l0eT0iMC40Ij4KICAgIDxjaXJjbGUgY3g9IjU4MCIgY3k9IjEyMCIgcj0iNzAiIGZpbGw9IiM3ZmM0ZTgiLz4KICAgIDxjaXJjbGUgY3g9IjkwIiBjeT0iNDgwIiByPSI2NSIgZmlsbD0iI2ZmYjc0ZCIvPgogICAgPGNpcmNsZSBjeD0iNjAwIiBjeT0iNjQwIiByPSI5MCIgZmlsbD0iIzJhNmE5MiIvPgogICAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iODgwIiByPSI3MCIgZmlsbD0iIzhiZDY4YiIvPgogICAgPGNpcmNsZSBjeD0iNTAwIiBjeT0iOTIwIiByPSI1NSIgZmlsbD0iI2YwNjI5YSIvPgogIDwvZz4KCiAgPCEtLSBCbHVycmVkIG91dC1vZi1mb2N1cyBwaWxscyBmb3IgZGVwdGggLS0+CiAgPGcgZmlsdGVyPSJ1cmwoI3NvZnRCbHVyU20pIiBvcGFjaXR5PSIwLjU1Ij4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYxMCwzMDApIHJvdGF0ZSgzMCkiPgogICAgICA8cmVjdCB4PSItNDYiIHk9Ii0xNiIgd2lkdGg9IjkyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9InVybCgjY2FwQmx1ZSkiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDcwMCkgcm90YXRlKC0yNSkiPgogICAgICA8cmVjdCB4PSItNDAiIHk9Ii0xNCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9InVybCgjY2FwT3JhbmdlKSIvPgogICAgPC9nPgogIDwvZz4KCiAgPCEtLSA9PT09PT09PT09PT0gVEVYVC1TQUZFIFpPTkU6IGtlZXAgY2xlYXIsIHJvdWdobHkgeCAwLTU2MCwgeSAwLTMzMCA9PT09PT09PT09PT0gLS0+CgogIDwhLS0gVXBwZXItcmlnaHQgYWNjZW50LCBjbGVhciBvZiB0aGUgaGVhZGluZy9wYXJhZ3JhcGggb24gdGhlIGxlZnQgLS0+CiAgPGcgZmlsdGVyPSJ1cmwoI2Ryb3BTaGFkb3cpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMCwxNTApIHJvdGF0ZSgtMjUpIj4KICAgICAgPGNpcmNsZSByPSI0NiIgZmlsbD0idXJsKCN0YWJZZWxsb3cpIi8+CiAgICAgIDxsaW5lIHgxPSItMzAiIHkxPSIwIiB4Mj0iMzAiIHkyPSIwIiBzdHJva2U9IiNhMDZiMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjQiIHN0cm9rZS13aWR0aD0iMi41Ii8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTUiIGN5PSItMTUiIHJ4PSIxNSIgcnk9IjgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC41NSIvPgogICAgPC9nPgogIDwvZz4KCiAgPCEtLSA9PT09PT09PT09PT0gTUFJTiBDT01QT1NJVElPTjogZmlsbHMgdGhlIGxvd2VyIHR3by10aGlyZHMgb2YgdGhlIHBhbmVsID09PT09PT09PT09PSAtLT4KICA8ZyBmaWx0ZXI9InVybCgjZHJvcFNoYWRvdykiPgoKICAgIDwhLS0gSGVybyBjYXBzdWxlOiBvcmFuZ2UgKyB3aGl0ZSwgbGFyZ2UgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAsNDgwKSByb3RhdGUoLTE2KSI+CiAgICAgIDxyZWN0IHg9Ii0xNDAiIHk9Ii00NiIgd2lkdGg9IjI4MCIgaGVpZ2h0PSI5MiIgcng9IjQ2IiBmaWxsPSJ1cmwoI2NhcE9yYW5nZSkiLz4KICAgICAgPHBhdGggZD0iTSAtMTQwLC00NiBoIDE0MCBhIDQ2IDQ2IDAgMCAxIDAgOTIgaCAtMTQwIHoiIGZpbGw9InVybCgjY2FwT3JhbmdlQ2FwKSIvPgogICAgICA8ZWxsaXBzZSBjeD0iNTUiIGN5PSItMTkiIHJ4PSI0MCIgcnk9IjEzIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNDUiLz4KICAgICAgPGVsbGlwc2UgY3g9Ii04MCIgY3k9Ii0xOSIgcng9IjMwIiByeT0iMTAiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC41NSIvPgogICAgPC9nPgoKICAgIDwhLS0gQmx1ZS93aGl0ZSBjYXBzdWxlLCB1cHBlciBwYXJ0IG9mIG1haW4gY2x1c3RlciAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCwzMzApIHJvdGF0ZSgyNCkiPgogICAgICA8cmVjdCB4PSItNzAiIHk9Ii0yNCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSI0OCIgcng9IjI0IiBmaWxsPSJ1cmwoI2NhcEJsdWUpIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTcwLC0yNCBoIDcwIGEgMjQgMjQgMCAwIDEgMCA0OCBoIC03MCB6IiBmaWxsPSJ1cmwoI2NhcEJsdWVDYXApIi8+CiAgICA8L2c+CgogICAgPCEtLSBSb3VuZCB0YWJsZXRzIGNsdXN0ZXIgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NjAsNDIwKSI+CiAgICAgIDxjaXJjbGUgcj0iNTIiIGZpbGw9InVybCgjdGFiV2hpdGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTgiIGN5PSItMTgiIHJ4PSIxNyIgcnk9IjkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDcwLDM0MCkiPgogICAgICA8Y2lyY2xlIHI9IjMyIiBmaWxsPSJ1cmwoI3RhYlBpbmspIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTEiIGN5PSItMTEiIHJ4PSIxMCIgcnk9IjUiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsNjEwKSI+CiAgICAgIDxjaXJjbGUgcj0iMzYiIGZpbGw9InVybCgjdGFiUmVkKSIvPgogICAgICA8ZWxsaXBzZSBjeD0iLTEyIiBjeT0iLTEyIiByeD0iMTEiIHJ5PSI2IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNTUiLz4KICAgIDwvZz4KCiAgICA8IS0tIEdyZWVuIGNhcHN1bGUgYWNjZW50IC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDY1MCkgcm90YXRlKDUwKSI+CiAgICAgIDxyZWN0IHg9Ii02MiIgeT0iLTIyIiB3aWR0aD0iMTI0IiBoZWlnaHQ9IjQ0IiByeD0iMjIiIGZpbGw9InVybCgjY2FwR3JlZW4pIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTYyLC0yMiBoIDYyIGEgMjIgMjIgMCAwIDEgMCA0NCBoIC02MiB6IiBmaWxsPSJ1cmwoI2NhcEdyZWVuQ2FwKSIvPgogICAgPC9nPgoKICAgIDwhLS0gQW1iZXIgc3lydXAgYm90dGxlLCBsb3dlciByaWdodCAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0MCw3ODApIj4KICAgICAgPHBhdGggZD0iTSAtMzQsLTEzMCBMIC0zNCwtMTc0IEwgMzQsLTE3NCBMIDM0LC0xMzAKICAgICAgICAgICAgICAgQyA2MiwtMTA2IDc2LC03NiA3NiwtMzYKICAgICAgICAgICAgICAgTCA3NiwxMDYKICAgICAgICAgICAgICAgQyA3NiwxMzIgNTYsMTUyIDMwLDE1MgogICAgICAgICAgICAgICBMIC0zMCwxNTIKICAgICAgICAgICAgICAgQyAtNTYsMTUyIC03NiwxMzIgLTc2LDEwNgogICAgICAgICAgICAgICBMIC03NiwtMzYKICAgICAgICAgICAgICAgQyAtNzYsLTc2IC02MiwtMTA2IC0zNCwtMTMwIFoiCiAgICAgICAgICAgIGZpbGw9InVybCgjYm90dGxlR2xhc3MpIiBzdHJva2U9IiNlYWY2ZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjUiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cGF0aCBkPSJNIC03NCwyMiBMIDc0LDIyIEwgNzQsMTA0IEMgNzQsMTI4IDU1LDE1MCAzMCwxNTAgTCAtMzAsMTUwIEMgLTU1LDE1MCAtNzQsMTI4IC03NCwxMDQgWiIKICAgICAgICAgICAgZmlsbD0idXJsKCNzeXJ1cExpcXVpZCkiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogICAgICA8cmVjdCB4PSItNDAiIHk9Ii0xOTAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIyMiIgcng9IjQiIGZpbGw9IiNlMGU2ZWMiLz4KICAgICAgPGVsbGlwc2UgY3g9Ii00MiIgY3k9Ii00NCIgcng9IjExIiByeT0iNjYiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CiAgICA8L2c+CgogICAgPCEtLSBMb3dlci1sZWZ0IHRhYmxldCArIHNtYWxsIGNhcHN1bGUgZmlsbGluZyByZW1haW5pbmcgc3BhY2UgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MCw4NTApIj4KICAgICAgPGNpcmNsZSByPSIzMCIgZmlsbD0idXJsKCN0YWJZZWxsb3cpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTAiIGN5PSItMTAiIHJ4PSI5IiByeT0iNSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjYiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2MCw5MDApIHJvdGF0ZSgtMzUpIj4KICAgICAgPHJlY3QgeD0iLTQ4IiB5PSItMTciIHdpZHRoPSI5NiIgaGVpZ2h0PSIzNCIgcng9IjE3IiBmaWxsPSJ1cmwoI2NhcEJsdWUpIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTQ4LC0xNyBoIDQ4IGEgMTcgMTcgMCAwIDEgMCAzNCBoIC00OCB6IiBmaWxsPSJ1cmwoI2NhcEJsdWVDYXApIi8+CiAgICA8L2c+CiAgPC9nPgoKICA8IS0tIFNwYXJrbGUgYWNjZW50cywga2VwdCBvdXQgb2YgdGhlIHRleHQtc2FmZSB6b25lIC0tPgogIDxjaXJjbGUgY3g9IjY0MCIgY3k9IjI0MCIgcj0iMy41IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgogIDxjaXJjbGUgY3g9IjYxMCIgY3k9IjQ4MCIgcj0iMyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CiAgPGNpcmNsZSBjeD0iMjQwIiBjeT0iNDIwIiByPSIyLjUiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+CiAgPGNpcmNsZSBjeD0iODAiIGN5PSI1NjAiIHI9IjMiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgogIDxjaXJjbGUgY3g9IjM4MCIgY3k9Ijc4MCIgcj0iMi41IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSI2MjAiIGN5PSI5MDAiIHI9IjMiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+Cjwvc3ZnPgo="),
        radial-gradient(circle at 15% 20%, #1f6fa8 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, #0a2e47 0%, transparent 45%),
        linear-gradient(135deg, var(--brand-900) 0%, #061c2b 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: cover, auto, auto, auto !important;
    background-position: center, center, center, center !important;
    padding: 40px 16px;
}

.login-shell {
    width: 100%;
    max-width: 940px;
    background: rgba(255,255,255,.98);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-height: 480px;
}

.login-aside {
    flex: 1 1 45%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAgMTAwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSIxMDAwIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iYmdHbG93IiBjeD0iNjAlIiBjeT0iNTUlIiByPSI4NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxZjZmYTgiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMGIzYTVjIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJjYXBPcmFuZ2UiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZiNzRkIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NSIgc3RvcC1jb2xvcj0iI2Y1N2MwMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNiMzU3MDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNhcE9yYW5nZUNhcCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGZlNmVjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwQmx1ZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM2ZmMzZjAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjU1IiBzdG9wLWNvbG9yPSIjMmE4YmNiIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBjNWE4YSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwQmx1ZUNhcCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGZlNmVjIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iY2FwR3JlZW4iIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOGJkNjhiIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41NSIgc3RvcC1jb2xvcj0iIzQzYTA0NyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZjZiMjMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNhcEdyZWVuQ2FwIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkZmU2ZWMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJXaGl0ZSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iNzUlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZWVmMmY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzY2FkNCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0idGFiWWVsbG93IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI3NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmYyYTgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmQ5M2QiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDY5ZjAwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJQaW5rIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI3NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmMyZDkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmMDYyOWEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjgyMzVmIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0YWJSZWQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijc1JSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmOWE4YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2U1NDczYSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YzFmMTYiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJib3R0bGVHbGFzcyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iI2VhZjZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN5cnVwTGlxdWlkIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmYjc0ZCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkOTcwMGMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPGZpbHRlciBpZD0ic29mdEJsdXJMZyIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIwIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIgaWQ9InNvZnRCbHVyU20iIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3Ii8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIgaWQ9ImRyb3BTaGFkb3ciIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIwIiBkeT0iMTYiIHN0ZERldmlhdGlvbj0iMTYiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjQiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjcwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ1cmwoI2JnR2xvdykiLz4KCiAgPCEtLSBCbHVycmVkIGJva2VoIHNwcmVhZCBhY3Jvc3MgdGhlIHdob2xlIHBhbmVsIC0tPgogIDxnIGZpbHRlcj0idXJsKCNzb2Z0Qmx1ckxnKSIgb3BhY2l0eT0iMC40Ij4KICAgIDxjaXJjbGUgY3g9IjU4MCIgY3k9IjEyMCIgcj0iNzAiIGZpbGw9IiM3ZmM0ZTgiLz4KICAgIDxjaXJjbGUgY3g9IjkwIiBjeT0iNDgwIiByPSI2NSIgZmlsbD0iI2ZmYjc0ZCIvPgogICAgPGNpcmNsZSBjeD0iNjAwIiBjeT0iNjQwIiByPSI5MCIgZmlsbD0iIzJhNmE5MiIvPgogICAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iODgwIiByPSI3MCIgZmlsbD0iIzhiZDY4YiIvPgogICAgPGNpcmNsZSBjeD0iNTAwIiBjeT0iOTIwIiByPSI1NSIgZmlsbD0iI2YwNjI5YSIvPgogIDwvZz4KCiAgPCEtLSBCbHVycmVkIG91dC1vZi1mb2N1cyBwaWxscyBmb3IgZGVwdGggLS0+CiAgPGcgZmlsdGVyPSJ1cmwoI3NvZnRCbHVyU20pIiBvcGFjaXR5PSIwLjU1Ij4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYxMCwzMDApIHJvdGF0ZSgzMCkiPgogICAgICA8cmVjdCB4PSItNDYiIHk9Ii0xNiIgd2lkdGg9IjkyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9InVybCgjY2FwQmx1ZSkiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDcwMCkgcm90YXRlKC0yNSkiPgogICAgICA8cmVjdCB4PSItNDAiIHk9Ii0xNCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9InVybCgjY2FwT3JhbmdlKSIvPgogICAgPC9nPgogIDwvZz4KCiAgPCEtLSA9PT09PT09PT09PT0gVEVYVC1TQUZFIFpPTkU6IGtlZXAgY2xlYXIsIHJvdWdobHkgeCAwLTU2MCwgeSAwLTMzMCA9PT09PT09PT09PT0gLS0+CgogIDwhLS0gVXBwZXItcmlnaHQgYWNjZW50LCBjbGVhciBvZiB0aGUgaGVhZGluZy9wYXJhZ3JhcGggb24gdGhlIGxlZnQgLS0+CiAgPGcgZmlsdGVyPSJ1cmwoI2Ryb3BTaGFkb3cpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMCwxNTApIHJvdGF0ZSgtMjUpIj4KICAgICAgPGNpcmNsZSByPSI0NiIgZmlsbD0idXJsKCN0YWJZZWxsb3cpIi8+CiAgICAgIDxsaW5lIHgxPSItMzAiIHkxPSIwIiB4Mj0iMzAiIHkyPSIwIiBzdHJva2U9IiNhMDZiMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjQiIHN0cm9rZS13aWR0aD0iMi41Ii8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTUiIGN5PSItMTUiIHJ4PSIxNSIgcnk9IjgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC41NSIvPgogICAgPC9nPgogIDwvZz4KCiAgPCEtLSA9PT09PT09PT09PT0gTUFJTiBDT01QT1NJVElPTjogZmlsbHMgdGhlIGxvd2VyIHR3by10aGlyZHMgb2YgdGhlIHBhbmVsID09PT09PT09PT09PSAtLT4KICA8ZyBmaWx0ZXI9InVybCgjZHJvcFNoYWRvdykiPgoKICAgIDwhLS0gSGVybyBjYXBzdWxlOiBvcmFuZ2UgKyB3aGl0ZSwgbGFyZ2UgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAsNDgwKSByb3RhdGUoLTE2KSI+CiAgICAgIDxyZWN0IHg9Ii0xNDAiIHk9Ii00NiIgd2lkdGg9IjI4MCIgaGVpZ2h0PSI5MiIgcng9IjQ2IiBmaWxsPSJ1cmwoI2NhcE9yYW5nZSkiLz4KICAgICAgPHBhdGggZD0iTSAtMTQwLC00NiBoIDE0MCBhIDQ2IDQ2IDAgMCAxIDAgOTIgaCAtMTQwIHoiIGZpbGw9InVybCgjY2FwT3JhbmdlQ2FwKSIvPgogICAgICA8ZWxsaXBzZSBjeD0iNTUiIGN5PSItMTkiIHJ4PSI0MCIgcnk9IjEzIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNDUiLz4KICAgICAgPGVsbGlwc2UgY3g9Ii04MCIgY3k9Ii0xOSIgcng9IjMwIiByeT0iMTAiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC41NSIvPgogICAgPC9nPgoKICAgIDwhLS0gQmx1ZS93aGl0ZSBjYXBzdWxlLCB1cHBlciBwYXJ0IG9mIG1haW4gY2x1c3RlciAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCwzMzApIHJvdGF0ZSgyNCkiPgogICAgICA8cmVjdCB4PSItNzAiIHk9Ii0yNCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSI0OCIgcng9IjI0IiBmaWxsPSJ1cmwoI2NhcEJsdWUpIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTcwLC0yNCBoIDcwIGEgMjQgMjQgMCAwIDEgMCA0OCBoIC03MCB6IiBmaWxsPSJ1cmwoI2NhcEJsdWVDYXApIi8+CiAgICA8L2c+CgogICAgPCEtLSBSb3VuZCB0YWJsZXRzIGNsdXN0ZXIgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NjAsNDIwKSI+CiAgICAgIDxjaXJjbGUgcj0iNTIiIGZpbGw9InVybCgjdGFiV2hpdGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTgiIGN5PSItMTgiIHJ4PSIxNyIgcnk9IjkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDcwLDM0MCkiPgogICAgICA8Y2lyY2xlIHI9IjMyIiBmaWxsPSJ1cmwoI3RhYlBpbmspIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTEiIGN5PSItMTEiIHJ4PSIxMCIgcnk9IjUiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsNjEwKSI+CiAgICAgIDxjaXJjbGUgcj0iMzYiIGZpbGw9InVybCgjdGFiUmVkKSIvPgogICAgICA8ZWxsaXBzZSBjeD0iLTEyIiBjeT0iLTEyIiByeD0iMTEiIHJ5PSI2IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNTUiLz4KICAgIDwvZz4KCiAgICA8IS0tIEdyZWVuIGNhcHN1bGUgYWNjZW50IC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDY1MCkgcm90YXRlKDUwKSI+CiAgICAgIDxyZWN0IHg9Ii02MiIgeT0iLTIyIiB3aWR0aD0iMTI0IiBoZWlnaHQ9IjQ0IiByeD0iMjIiIGZpbGw9InVybCgjY2FwR3JlZW4pIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTYyLC0yMiBoIDYyIGEgMjIgMjIgMCAwIDEgMCA0NCBoIC02MiB6IiBmaWxsPSJ1cmwoI2NhcEdyZWVuQ2FwKSIvPgogICAgPC9nPgoKICAgIDwhLS0gQW1iZXIgc3lydXAgYm90dGxlLCBsb3dlciByaWdodCAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0MCw3ODApIj4KICAgICAgPHBhdGggZD0iTSAtMzQsLTEzMCBMIC0zNCwtMTc0IEwgMzQsLTE3NCBMIDM0LC0xMzAKICAgICAgICAgICAgICAgQyA2MiwtMTA2IDc2LC03NiA3NiwtMzYKICAgICAgICAgICAgICAgTCA3NiwxMDYKICAgICAgICAgICAgICAgQyA3NiwxMzIgNTYsMTUyIDMwLDE1MgogICAgICAgICAgICAgICBMIC0zMCwxNTIKICAgICAgICAgICAgICAgQyAtNTYsMTUyIC03NiwxMzIgLTc2LDEwNgogICAgICAgICAgICAgICBMIC03NiwtMzYKICAgICAgICAgICAgICAgQyAtNzYsLTc2IC02MiwtMTA2IC0zNCwtMTMwIFoiCiAgICAgICAgICAgIGZpbGw9InVybCgjYm90dGxlR2xhc3MpIiBzdHJva2U9IiNlYWY2ZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjUiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cGF0aCBkPSJNIC03NCwyMiBMIDc0LDIyIEwgNzQsMTA0IEMgNzQsMTI4IDU1LDE1MCAzMCwxNTAgTCAtMzAsMTUwIEMgLTU1LDE1MCAtNzQsMTI4IC03NCwxMDQgWiIKICAgICAgICAgICAgZmlsbD0idXJsKCNzeXJ1cExpcXVpZCkiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogICAgICA8cmVjdCB4PSItNDAiIHk9Ii0xOTAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIyMiIgcng9IjQiIGZpbGw9IiNlMGU2ZWMiLz4KICAgICAgPGVsbGlwc2UgY3g9Ii00MiIgY3k9Ii00NCIgcng9IjExIiByeT0iNjYiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CiAgICA8L2c+CgogICAgPCEtLSBMb3dlci1sZWZ0IHRhYmxldCArIHNtYWxsIGNhcHN1bGUgZmlsbGluZyByZW1haW5pbmcgc3BhY2UgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MCw4NTApIj4KICAgICAgPGNpcmNsZSByPSIzMCIgZmlsbD0idXJsKCN0YWJZZWxsb3cpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSItMTAiIGN5PSItMTAiIHJ4PSI5IiByeT0iNSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjYiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2MCw5MDApIHJvdGF0ZSgtMzUpIj4KICAgICAgPHJlY3QgeD0iLTQ4IiB5PSItMTciIHdpZHRoPSI5NiIgaGVpZ2h0PSIzNCIgcng9IjE3IiBmaWxsPSJ1cmwoI2NhcEJsdWUpIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTQ4LC0xNyBoIDQ4IGEgMTcgMTcgMCAwIDEgMCAzNCBoIC00OCB6IiBmaWxsPSJ1cmwoI2NhcEJsdWVDYXApIi8+CiAgICA8L2c+CiAgPC9nPgoKICA8IS0tIFNwYXJrbGUgYWNjZW50cywga2VwdCBvdXQgb2YgdGhlIHRleHQtc2FmZSB6b25lIC0tPgogIDxjaXJjbGUgY3g9IjY0MCIgY3k9IjI0MCIgcj0iMy41IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgogIDxjaXJjbGUgY3g9IjYxMCIgY3k9IjQ4MCIgcj0iMyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CiAgPGNpcmNsZSBjeD0iMjQwIiBjeT0iNDIwIiByPSIyLjUiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+CiAgPGNpcmNsZSBjeD0iODAiIGN5PSI1NjAiIHI9IjMiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgogIDxjaXJjbGUgY3g9IjM4MCIgY3k9Ijc4MCIgcj0iMi41IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSI2MjAiIGN5PSI5MDAiIHI9IjMiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+Cjwvc3ZnPgo="), linear-gradient(155deg, var(--brand-600), var(--brand-900));
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-aside::after {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    right: -120px; bottom: -120px;
}
.login-aside img.brand-logo { max-height: 42px; margin-bottom: 30px; }
.login-aside h2 { color: #fff; font-size: 26px; margin-bottom: 12px; }
.login-aside p { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.6; max-width: 320px; }
.login-aside .login-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; position: relative; z-index: 1; }
.login-aside .login-badges span {
    display: inline-block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.login-form-col {
    flex: 1 1 55%;
    padding: 56px 52px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.form-top-left h3 {
    font-family: var(--font-display);
    font-size: 24px;
    margin-bottom: 6px;
    color: var(--ink-900);
}
.form-top-left p { color: var(--ink-500); font-size: 13.5px; margin-bottom: 28px; }

.form-bottom .form-group { margin-bottom: 18px; position: relative; }
.form-bottom .form-control {
    padding: 13px 16px 13px 42px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--ink-300);
    font-size: 14px;
    width: 100%;
}
.form-bottom .form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }
.form-group::before {
    font-family: FontAwesome;
    position: absolute;
    left: 14px;
    top: 13px;
    color: var(--ink-300);
    font-size: 14px;
    z-index: 2;
}
.form-group:has(#txtUserName)::before { content: "\f007"; }
.form-group:has(#txtPassword)::before { content: "\f023"; }

#btnLogin, .btn-new {
    width: 100%;
    padding: 13px;
    font-size: 14.5px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
    .login-shell { flex-direction: column; max-width: 420px; }
    .login-aside { padding: 34px 30px; }
    .login-form-col { padding: 34px 28px; }
}

/* ==========================================================================
   RESPONSIVE — sidebar app shell on small screens
   ========================================================================== */
@media (max-width: 767px) {
    body.skin-blue .main-header .navbar,
    body.skin-blue .content-wrapper,
    body.skin-blue .main-footer { margin-left: 0; }
    body.skin-blue .main-sidebar { width: var(--sidebar-w); left: calc(-1 * var(--sidebar-w)); }
    body.skin-blue.sidebar-open .main-sidebar { left: 0; }
    #crmNavModeToggle .mode-label { display: none !important; }
    #crmNavModeToggle { padding: 12px !important; }
}

/* ==========================================================================
   PRINT — clean, professional output for invoices / order sheets
   ========================================================================== */
@media print {
    /* Several pages (14+) that print a specific section via
       #section-to-print ship a page-level rule that reads
       "body * { visibility: visible; }" — the opposite of what's needed,
       which is why the sidebar/header/search boxes/buttons were printing
       alongside the actual invoice content. !important here always wins
       over that non-important page-level rule regardless of source order,
       correcting it site-wide without editing every page individually. */
    body:has(#section-to-print) * { visibility: hidden !important; }
    body:has(#section-to-print) #section-to-print,
    body:has(#section-to-print) #section-to-print * { visibility: visible !important; }
    #section-to-print {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    /* App chrome never belongs on a printed page. */
    body.skin-blue .main-header,
    body.skin-blue .main-sidebar,
    body.skin-blue .main-footer,
    .top-menu-bar,
    #crmNavModeToggle,
    .breadcrumb,
    .box-header input,
    .box-header select,
    .box-header button,
    .box-header .btn,
    .modal-header,
    .print,
    #ContentPlaceHolder1_btnSearchOrder,
    #ContentPlaceHolder1_btnBackToHome {
        display: none !important;
    }
    body.skin-blue .content-wrapper,
    body.skin-blue .content { margin: 0 !important; padding: 0 !important; }
    body.skin-blue .box {
        box-shadow: none !important;
        border: none !important;
    }

    /* Tables print cleanly: light, ink-friendly header instead of the
       on-screen blue gradient, solid borders, no rounded-corner clipping
       (which can crop content when a table breaks across pages). */
    .table, .footable {
        box-shadow: none !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .table > thead > tr > th,
    .footable > thead > tr > th {
        background: #eef1f6 !important;
        color: #0c3a5c !important;
        border: 1px solid #94a3b8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table > tbody > tr > td,
    .footable > tbody > tr > td {
        border: 1px solid #cbd5e1 !important;
        background: #fff !important;
    }
    .table > tbody > tr:nth-of-type(odd),
    .footable > tbody > tr:nth-of-type(odd) { background: #fff !important; }
    tr { page-break-inside: avoid; }
    table { page-break-inside: auto; }
}