/* ==========================================================================
   ELYTECH Unified Admin Theme
   --------------------------------------------------------------------------
   Source of truth: ELYTECH_统一后台设计与技术交接规范_v2.0.md
   (Merchant_UI_Prototype — React 19 / HeroUI 3.2.3 / Tailwind 4 prototype)

   This stylesheet expresses the HeroUI/Tailwind design language of the
   prototype as plain CSS, applied over the existing stack:
   Bootstrap 3 / AdminLTE 2.3.8 / jQuery (server-rendered FreeMarker pages).

   Sections:
     1. Design tokens (CSS custom properties)
     2. Base typography
     3. App Shell (index.ftl: sidebar, account summary, tab bar)
     4. ELYTECH component classes (e-* : buttons, chips, cards, tables...)
     5. Bootstrap 3 / AdminLTE overrides (business pages)
     6. Dialogs (jquery-confirm, layer)
     7. Login page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand gold */
    --e-gold: #C69216;
    --e-gold-hover: #B48112;
    --e-gold-text: #9A6D00;
    --e-gold-bg: #FFF5D8;
    --e-gold-bg-soft: #FFFDF7;
    --e-gold-ring: rgba(198, 146, 22, .12);

    /* Neutrals */
    --e-bg: #F6F6F5;
    --e-sidebar-bg: #FBFBFA;
    --e-surface: #FFFFFF;
    --e-text-strong: #17191D;
    --e-text: #292C32;
    --e-text-2: #70747D;
    --e-text-3: #858993;
    --e-text-4: #92959C;
    --e-border: #DEDEDB;
    --e-border-strong: #E2E2DF;
    --e-divider: #ECECEA;
    --e-input-border: #D9D9D5;
    --e-weak-bg: #F6F6F4;

    /* Status */
    --e-success: #16865A;
    --e-success-bg: #EAF6F0;
    --e-warning: #B77A12;
    --e-warning-bg: #FBF3E2;
    --e-danger: #C94A4A;
    --e-danger-bg: #FCEEEE;
    --e-neutral: #667085;
    --e-neutral-bg: #F1F3F5;

    /* Shape & elevation */
    --e-radius: 7px;
    --e-radius-btn: 6px;
    --e-radius-input: 5px;
    --e-radius-chip: 999px;
    --e-shadow: 0 2px 7px rgba(35, 38, 43, .035);
    --e-shadow-pop: 0 12px 32px rgba(35, 38, 43, .12);

    /* Typography */
    --e-font: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --e-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--e-font);
    background: var(--e-bg);
    color: var(--e-text);
    font-size: 12px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

body.elytech-shell {
    background: var(--e-bg);
    overflow: hidden;
}

a { color: var(--e-gold-text); }
a:hover, a:focus { color: var(--e-gold-hover); }

.e-mono {
    font-family: var(--e-mono);
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--e-gold-bg); color: var(--e-text-strong); }

/* Thin unobtrusive scrollbars */
.elytech-shell .sidebar::-webkit-scrollbar { width: 6px; }
.elytech-shell .sidebar::-webkit-scrollbar-thumb { background: var(--e-border-strong); border-radius: 3px; }
.elytech-shell .sidebar::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   3. App Shell (index.ftl)
   -------------------------------------------------------------------------- */

/* --- Sidebar --- */
.elytech-shell .elytech-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 14px;
    background: var(--e-sidebar-bg);
    border-right: 1px solid var(--e-border-strong);
    overflow: hidden;
}

.elytech-shell .brand {
    display: flex;
    align-items: center;
    flex: none;
    height: 58px;
    padding: 0 8px;
}

.elytech-shell a.brand:hover,
.elytech-shell a.brand:focus { text-decoration: none; }

.elytech-shell .brand img {
    width: 177px;
    max-height: 46px;
    height: auto;
    display: block;
}

/* inline SVG wordmark: bigger than the old 177px raster and crisp at any DPI */
.elytech-shell .brand svg.brand-logo {
    height: 48px;
    width: auto;
    display: block;
}

/* environment watermark: fixed, eye-catching but non-interactive background
   indicator (replaces the sidebar badge that disturbed the layout) */
.env-watermark {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    align-items: center;
    justify-items: center;
    overflow: hidden;
    pointer-events: none;
}

.env-watermark span {
    transform: rotate(-22deg);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .35em;
    color: rgba(240, 82, 24, .09);
    white-space: nowrap;
    user-select: none;
}

/* stagger the middle column for a brick-pattern watermark */
.env-watermark span:nth-child(3n+2) { transform: rotate(-22deg) translateY(120px); }

/* menu container (section.sidebar kept for AdminLTE tree()/fixSidebar()) */
.elytech-shell .sidebar {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* --- Sidebar menu (flat level-1 navigation) --- */
.elytech-shell .sidebar-menu { margin: 0; padding: 0; list-style: none; }

.elytech-shell .sidebar-menu > li { margin: 0 0 4px; }

/* Two-line nav item: icon | name/desc block | chevron (matches prototype .nav-item) */
.elytech-shell .sidebar-menu li > a.nav-link {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #71757E;
    background: transparent;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.elytech-shell .sidebar-menu li > a.nav-link:hover {
    background: #F3F2EF;
    color: #71757E;
    text-decoration: none;
}

.elytech-shell .sidebar-menu a.nav-link > i:first-child {
    font-size: 19px;
    width: 21px;
    text-align: center;
    color: var(--e-text-3);
}

/* name + description stacked text block */
.elytech-shell .sidebar-menu a.nav-link .menu-text-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elytech-shell .sidebar-menu a.nav-link .menu-text {
    display: block;
    color: #32353B;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elytech-shell .sidebar-menu a.nav-link .menu-desc {
    display: block;
    color: #92959C;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elytech-shell .sidebar-menu a.nav-link .menu-arrow {
    color: #AAADB2;
    font-size: 13px;
    justify-self: end;
}

/* active section indicator (set by switchSection in index.ftl) */
.elytech-shell .sidebar-menu li.active > a.nav-link {
    position: relative;
    background: var(--e-surface);
    border-color: #E5E3DC;
    box-shadow: 0 2px 8px rgba(28, 31, 36, .04);
}

.elytech-shell .sidebar-menu li.active > a.nav-link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--e-gold);
    border-radius: 2px;
}

.elytech-shell .sidebar-menu li.active > a.nav-link .menu-text,
.elytech-shell .sidebar-menu li.active > a.nav-link > i:first-child,
.elytech-shell .sidebar-menu li.active > a.nav-link .menu-arrow {
    color: var(--e-gold-text);
}

.elytech-shell .sidebar-menu a.nav-link .label {
    justify-self: start;
    align-self: start;
    margin-top: 6px;
}

/* --- Account summary (sidebar bottom) --- */
.elytech-shell .account-summary {
    flex: none;
    margin-top: auto;
    border-top: 1px solid #E3E3E0;
    padding: 14px 8px 2px;
}

.elytech-shell .account-summary > a.dropdown-toggle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    color: #25282E;
}

.elytech-shell .account-summary > a.dropdown-toggle:hover,
.elytech-shell .account-summary > a.dropdown-toggle:focus {
    text-decoration: none;
    color: var(--e-text-strong);
}

.elytech-shell .account-summary .avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--e-gold);
    border-radius: 50%;
    font-size: 13px;
    color: var(--e-gold-text);
    background: var(--e-gold-bg-soft);
}

.elytech-shell .account-summary .as-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.elytech-shell .account-summary .as-text strong {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elytech-shell .account-summary .as-text small {
    color: #888C94;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elytech-shell .account-summary > a > i.fa-chevron-right {
    color: #AAADB2;
    font-size: 12px;
    transition: transform .15s, color .15s;
}

.elytech-shell .account-summary.open > a > i.fa-chevron-right {
    color: var(--e-gold-text);
    transform: rotate(90deg);
}

/* opens upward: the summary sits at the sidebar bottom (dropup) */
.elytech-shell .account-summary .dropdown-menu {
    left: 6px;
    right: 6px;
    width: auto;
    top: auto;
    bottom: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    box-shadow: var(--e-shadow-pop);
}

/* --- Main column --- */
.elytech-shell .elytech-main {
    margin-left: 240px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Workspace: one section per level-1 menu; level-2 menus are tabs --- */
/* 22px top offset mirrors the sidebar padding so the page title band
   lines up with the 58px logo zone (band: 22px - 80px from viewport top) */
.elytech-shell .e-workspace {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: var(--e-bg);
    padding-top: 22px;
}

.elytech-shell .e-section {
    display: none;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}

.elytech-shell .e-section.active { display: flex; }

/* page title band (section name + description) sits on the page background,
   matching the prototype content header (title + grey subtitle, no band) */
.elytech-shell .e-topbar {
    position: static;
    height: auto;
    display: block;
    background: transparent;
    border-bottom: 0;
    padding: 4px 0 18px;
}

.elytech-shell .e-topbar h1,
.elytech-shell .e-topbar .e-topbar-title { font-size: 24px; font-weight: 700; }

.elytech-shell .e-topbar-titles p { margin-top: 8px; font-size: 13px; }

/* level-2 tab strip below the page title band (hidden while a section
   shows a single static page); divider spans the full content width */
.elytech-shell .e-section-head {
    flex: none;
    height: 46px;
    border-bottom: 1px solid #E1E1DE;
}

.elytech-shell .e-section.tabs-hidden .e-section-head { display: none; }

.elytech-shell .e-tabs-inner {
    width: calc(100% - 96px);
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.elytech-shell .e-tabs-inner::-webkit-scrollbar { display: none; }

.elytech-shell a.e-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
    margin-right: 32px;
    color: var(--e-text-3);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s;
}

.elytech-shell a.e-tab:hover { color: var(--e-text); text-decoration: none; }

.elytech-shell a.e-tab.active { color: var(--e-gold-text); font-weight: 600; }

.elytech-shell a.e-tab.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--e-gold);
}

.elytech-shell .e-tab-title {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elytech-shell .e-tab-close {
    color: #AAADB2;
    font-size: 12px;
    padding: 2px;
    border-radius: 3px;
    transition: color .15s, background .15s;
}

.elytech-shell .e-tab-close:hover { color: var(--e-danger); background: var(--e-danger-bg); }

/* section panes (one iframe per level-2 page / dynamic page) */
.elytech-shell .e-section-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: var(--e-bg);
}

.elytech-shell .e-pane { position: relative; height: 100%; display: none; }

.elytech-shell .e-pane.active { display: block; }

.elytech-shell .e-pane iframe.tab_iframe { display: block; width: 100%; height: 100%; border: 0; }

/* per-pane loading overlay */
.elytech-shell .e-pane-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: var(--e-bg);
    color: var(--e-text-4);
    font-size: 24px;
}

/* --------------------------------------------------------------------------
   4. ELYTECH component classes (e-*)
   -------------------------------------------------------------------------- */

/* --- Buttons --- */
.e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--e-radius-btn);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.e-btn:focus, .e-btn:active:focus, .e-btn.focus { outline: none; }
.e-btn i { font-size: 14px; }

.e-btn-primary { background: var(--e-gold); color: var(--e-text-strong); }
.e-btn-primary:hover, .e-btn-primary:focus, .e-btn-primary:active {
    background: var(--e-gold-hover);
    color: var(--e-text-strong);
    box-shadow: 0 2px 8px rgba(198, 146, 22, .25);
}

.e-btn-outline { background: var(--e-surface); border-color: var(--e-input-border); color: var(--e-text); }
.e-btn-outline:hover, .e-btn-outline:focus, .e-btn-outline:active {
    background: #FAFAF8;
    border-color: #C4C4BE;
    color: var(--e-text-strong);
}

.e-btn-ghost {
    min-height: 30px;
    padding: 0 8px;
    background: transparent;
    color: var(--e-gold-text);
    font-size: 12px;
}

.e-btn-ghost:hover, .e-btn-ghost:focus { color: var(--e-gold-hover); text-decoration: none; }

.e-btn-sm { min-height: 30px; padding: 0 12px; font-size: 12px; }
.e-btn-sm i { font-size: 13px; }
.e-btn-block { width: 100%; }

/* --- Chips (HeroUI Chip, soft variant) --- */
.e-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--e-radius-chip);
    background: var(--e-neutral-bg);
    color: var(--e-neutral);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.e-chip i { font-size: 11px; }
.e-chip-success { background: var(--e-success-bg); color: var(--e-success); }
.e-chip-warning { background: var(--e-warning-bg); color: var(--e-warning); }
.e-chip-danger { background: var(--e-danger-bg); color: var(--e-danger); }
.e-chip-gold { background: var(--e-gold-bg); color: var(--e-gold-text); }

/* --- Cards --- */
.e-card {
    background: var(--e-surface);
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    box-shadow: var(--e-shadow);
}

.e-card-body { padding: 20px 22px; }

/* per-card padding overrides matching prototype exactly */
.e-receiving-card .e-card-body { padding: 22px; }
.e-merchant-card .e-card-body { padding: 18px 20px; }

/* card whose direct child is a flush table (clip corners) */
.e-card.e-flush { overflow: hidden; }

/* --- Tables (HeroUI Table look) --- */
.e-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--e-surface);
}

.e-table th {
    height: 38px;
    padding: 0 18px;
    background: var(--e-weak-bg);
    color: var(--e-text-3);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.e-table td {
    padding: 0 18px;
    height: 39px;
    border-bottom: 1px solid var(--e-divider);
    color: #35383F;
    font-size: 12px;
    vertical-align: middle;
}

.e-table tbody tr:last-child td { border-bottom: 0; }
.e-table .num { text-align: right; }
.e-table thead th + th { border-left: 1px solid var(--e-divider); }

/* inline action links inside table rows (e.g. 查看详情: dark text, gold on hover) */
.e-row-link { color: #35383F; font-size: 13px; cursor: pointer; margin-right: 12px; white-space: nowrap; }
.e-row-link:hover { color: var(--e-gold-text); text-decoration: none; }

/* statistics line rendered above list tables (#sum) */
.e-sum-line { display: inline-block; margin: 0; color: var(--e-text-2); font-size: 12px; }
.e-sum-line:empty { display: none; }

/* export + statistics row: export button left, stats right */
.e-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.e-sum-row:has(.e-sum-line:empty):not(:has(.e-sum-row-actions)) { display: none; }

/* --- Unified top bar: page title band aligned with the sidebar logo zone.
   58px tall (same as .brand), used by the shell and by pages that render
   their own header (e.g. welcome.ftl). Global on purpose. --- */
.e-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    flex: none;
    height: 58px;
    display: flex;
    align-items: center;
    background: var(--e-surface);
    border-bottom: 1px solid var(--e-divider);
}

.e-topbar-inner {
    width: calc(100% - 96px);
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.e-topbar-titles { min-width: 0; }

.e-topbar h1, .e-topbar .e-topbar-title {
    margin: 0;
    font-size: 25px;
    font-weight: 650;
    color: var(--e-text-strong);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e-topbar-titles p {
    margin: 2px 0 0;
    color: var(--e-text-3);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Page scaffolding for rebuilt pages ---
   No top padding: the shell already offsets the iframe by 22px (same as the
   sidebar padding), so the content top edge lines up with the logo top edge. */
.e-content {
    width: calc(100% - 96px);
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0 44px;
}

/* Page header: title + description + primary action (prototype .page-header) */
.e-page-header {
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E1E1DE;
}

.e-page-header-titles { min-width: 0; }

.e-page-header h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 650;
    color: var(--e-text-strong);
    line-height: 1.25;
}

.e-page-header p { margin: 5px 0 0; color: var(--e-text-3); font-size: 12px; }

.e-section { margin-bottom: 22px; }

.e-section-heading {
    min-height: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}

.e-section-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--e-text-strong);
}

.e-section-heading p { margin: 3px 0 0; color: #898D95; font-size: 11px; }

/* --- Sub navigation tabs (underline style) --- */
.e-subnav {
    display: flex;
    gap: 24px;
    margin: -2px 0 18px;
    border-bottom: 1px solid var(--e-border);
}

.e-subnav > a, .e-subnav > button {
    position: relative;
    padding: 0 2px 11px;
    border: 0;
    background: transparent;
    color: var(--e-text-3);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.e-subnav > a:hover, .e-subnav > button:hover { color: var(--e-text); text-decoration: none; }

.e-subnav > a.active, .e-subnav > button.active {
    color: var(--e-gold-text);
    font-weight: 650;
}

.e-subnav > a.active::after, .e-subnav > button.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--e-gold);
}

/* --- Filter bar (list pages) --- */
.e-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; margin-top: 8px; }
.e-filter-bar .form-control { width: auto; height: 40px; font-size: 13px; }
.e-filter-bar input[type="text"].form-control { width: 220px; }
.e-filter-bar select.form-control { min-width: 140px; }
.e-filter-bar .btn { padding: 10px 20px; font-size: 13px; border-radius: 10px; }
.e-filter-bar .e-filter-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.e-filter-bar .e-date-range { height: 40px; }
.e-filter-bar .e-date-range .form-control { height: 38px; }
.e-filter-bar .e-date-range .input-group-addon { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 38px; padding: 0 8px; flex-shrink: 0; }

/* --- daterangepicker: recolor selection from default blue to brand gold
       (plugin css loads after this file, so !important is required) --- */
.daterangepicker .ranges li:hover { background-color: var(--e-gold-bg) !important; }
.daterangepicker .ranges li.active { background-color: var(--e-gold) !important; color: var(--e-text-strong) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--e-gold) !important; border-color: transparent !important; color: var(--e-text-strong) !important; }
.daterangepicker td.in-range { background-color: var(--e-gold-bg) !important; color: var(--e-text) !important; }
.daterangepicker td.available:hover { background-color: var(--e-gold-bg-soft) !important; }

/* --- Legacy list pages: unify 搜索/导出 toolbar buttons with the
       交易查询 filter-bar design (gold search w/ icon, neutral export) --- */
.content form .btn.btn-primary.btn-sm {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 10px;
    background: var(--e-gold);
    border-color: var(--e-gold);
    color: #fff;
}

.content form .btn.btn-primary.btn-sm:hover,
.content form .btn.btn-primary.btn-sm:focus,
.content form .btn.btn-primary.btn-sm:active {
    background: var(--e-gold-hover);
    border-color: var(--e-gold-hover);
    color: #fff;
}

/* legacy search buttons ship without an icon: prepend the fa-search glyph */
.content form .btn.btn-primary.btn-sm::before {
    content: "\f002";
    font: normal normal normal 14px FontAwesome;
    margin-right: 6px;
}

.box-header .btn.btn-success.btn-sm {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 10px;
    background: var(--e-surface);
    border: 1px solid var(--e-border);
    color: var(--e-text);
}

.box-header .btn.btn-success.btn-sm:hover,
.box-header .btn.btn-success.btn-sm:focus {
    background: #FAFAF8;
    border-color: #C9C9C4;
    color: var(--e-gold-text);
}

/* --- Definition grids (receiving / merchant info) --- */
.e-account-details {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 17px 24px;
    margin: 20px 0 0;
}

.e-account-details .address { grid-column: 1 / -1; }

.e-account-details dt, .e-merchant-details dt {
    margin-bottom: 5px;
    color: #8A8E96;
    font-size: 10px;
    font-weight: 400;
}

.e-account-details dd, .e-merchant-details dd {
    margin: 0;
    color: var(--e-text);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.e-merchant-details {
    display: grid;
    grid-template-columns: 1.5fr .8fr 1.3fr .7fr;
    gap: 16px 22px;
    margin: 0;
}

/* --- Dashboard pieces --- */
.e-dashboard-grid {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.e-right-column { min-width: 0; }

.e-left-column { min-width: 0; }

.e-currency-code { font-size: 12px; font-weight: 600; color: var(--e-text-strong); }

.e-balance-value { font-variant-numeric: tabular-nums; }
.e-balance-value span { margin-left: 4px; color: #797D86; font-size: 10px; }

/* --- Monthly statement panel (welcome.ftl) --- */
.e-statement-month { font-size: 12px; font-weight: 600; color: var(--e-text-strong); }

.e-statement-date { white-space: nowrap; }

.e-statement-new { margin-left: 6px; }

.e-statement-empty { height: 60px; text-align: center; color: var(--e-text-3); }

.e-statement-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 18px;
    border-top: 1px solid var(--e-divider);
}

.e-statement-pager { display: flex; align-items: center; gap: 10px; }

.e-statement-page-info { min-width: 72px; text-align: center; color: var(--e-text-3); font-size: 11px; }

.e-bank-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #E9E9E6;
}

.e-bank-heading > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.e-bank-heading strong { font-size: 14px; color: var(--e-text-strong); }
.e-bank-heading small { color: #888C94; font-size: 11px; }
.e-bank-heading .e-chip { justify-self: end; }

.e-icon-box {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--e-gold-text);
    background: var(--e-gold-bg);
    border-radius: 6px;
}

.e-icon-box i { font-size: 17px; }

/* --- Accordion (intermediary panel) --- */
.e-accordion-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
}

.e-accordion-heading .e-icon-box { flex: none; }

.e-accordion-heading > .e-accordion-title { flex: 1; min-width: 0; }

.e-accordion-title strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--e-text-strong);
}

.e-accordion-title small { display: block; margin-top: 2px; color: #8A8E96; font-size: 10px; }

.e-accordion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.e-accordion-trigger {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--e-text-3);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.e-accordion-trigger:hover { background: var(--e-weak-bg); color: var(--e-text); }

.e-accordion-trigger i { transition: transform .2s; }
.e-card.e-open .e-accordion-trigger i { transform: rotate(180deg); }
.e-card.e-open .e-accordion-heading { border-bottom: 1px solid var(--e-divider); }

.e-accordion-body { padding: 4px 20px 16px 72px; }

.e-accordion-body .e-btn { margin-top: 12px; }

.e-accordion-summary { margin: 10px 0 0; padding: 0; color: #737780; font-size: 11px; }

/* welcome.ftl: the intermediary table breaks out of the indented accordion body */
#intermediaryTableWrapper { margin: 16px -20px -16px -72px; }

/* copy row buttons inside tables */
#intermediaryTableWrapper .copy-row-btn {
    background: transparent;
    color: var(--e-gold-text);
    border: 0;
    font-size: 12px;
    padding: 2px 4px;
    cursor: pointer;
}

#intermediaryTableWrapper .copy-row-btn:hover { color: var(--e-gold-hover); text-decoration: none; }
#intermediaryTableWrapper .copy-row-btn i { margin-right: 3px; }

/* --- Summary strip (funds page pattern) --- */
.e-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 18px;
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    background: var(--e-surface);
}

.e-summary-strip > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 20px;
    border-right: 1px solid var(--e-divider);
}

.e-summary-strip > div:last-child { border-right: 0; }
.e-summary-strip span { color: var(--e-text-3); font-size: 11px; }
.e-summary-strip strong { color: var(--e-text); font-size: 16px; font-weight: 650; }

/* --- Responsive grid --- */
@media (max-width: 1240px) {
    .e-dashboard-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 18px; }
    .e-account-details { grid-template-columns: 1fr 1fr; }
    .e-merchant-details { grid-template-columns: 1fr 1fr; }
    .e-content { width: calc(100% - 40px); }
}

/* --------------------------------------------------------------------------
   5. Bootstrap 3 / AdminLTE overrides (business pages)
   -------------------------------------------------------------------------- */

/* --- content area --- */
body.elytech-page .wrapper, .elytech-page .wrapper { min-height: 100vh; background: var(--e-bg); }

/* same container grid as the top bar / .e-content so page edges line up */
.content {
    width: calc(100% - 96px);
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 0 44px;
}

/* --- Boxes (AdminLTE .box -> ELYTECH card) --- */
.box {
    position: relative;
    border: 1px solid var(--e-border);
    border-top: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    background: var(--e-surface);
    box-shadow: var(--e-shadow);
    margin-bottom: 20px;
}

.box > .box-header { padding: 14px 18px; }

.box-header.with-border { border-bottom: 1px solid var(--e-divider); }

.box-header > .box-tools { top: 10px; right: 12px; }

.box-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--e-text-strong);
    line-height: 1.4;
}

.box-title i { color: var(--e-gold-text); margin-right: 4px; }

.box-body { padding: 18px; border-radius: 0 0 var(--e-radius) var(--e-radius); }

/* card whose only child is a flush table (query list pages):
   inset rounded grey header strip + tall rows, per prototype table-card */
.box.box-flush { overflow: hidden; }
.box.box-flush > .box-body { padding: 16px 28px 20px; }
.box.box-flush .table { font-size: 13px; }
.box.box-flush .table > thead > tr > th:first-child { border-radius: 8px 0 0 8px; }
.box.box-flush .table > thead > tr > th:last-child { border-radius: 0 8px 8px 0; }
.box.box-flush .table > tbody > tr > td { height: 64px; }

.box-footer {
    background: transparent;
    border-top: 1px solid var(--e-divider);
    border-radius: 0 0 var(--e-radius) var(--e-radius);
    padding: 12px 18px;
}

/* form submit/cancel row: no card chrome, blends into the page background */
.e-form-actions { text-align: center; padding: 6px 0 2px; }

/* --- Buttons (Bootstrap -> ELYTECH) --- */
.btn {
    border-radius: var(--e-radius-btn);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 14px;
    transition: all .15s;
}

.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus {
    background: var(--e-gold);
    border-color: var(--e-gold);
    color: var(--e-text-strong);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: var(--e-gold-hover);
    border-color: var(--e-gold-hover);
    color: var(--e-text-strong);
}

.btn-primary.disabled,
.btn-primary[disabled] {
    background: #DDC48A;
    border-color: #DDC48A;
    color: #8A8375;
}

.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    background: var(--e-surface);
    border-color: var(--e-input-border);
    color: var(--e-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background: #FAFAF8;
    border-color: #C4C4BE;
    color: var(--e-text-strong);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
    background: var(--e-danger-bg);
    border-color: #EFD3D3;
    color: var(--e-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #F7DEDE;
    border-color: #E4B9B9;
    color: #A93F3F;
}

/* positive actions (submit / add / send code) share the gold primary tone */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--e-gold);
    border-color: var(--e-gold);
    color: var(--e-text-strong);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--e-gold-hover);
    border-color: var(--e-gold-hover);
    color: var(--e-text-strong);
}

.btn-success.disabled, .btn-success[disabled],
.btn-info.disabled, .btn-info[disabled] {
    background: #DDC48A;
    border-color: #DDC48A;
    color: #8A8375;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus {
    background: var(--e-warning-bg);
    border-color: #EBD9AE;
    color: var(--e-warning);
}

/* large action size (filter bar / toolbar / form actions / footers) */
.e-form-actions .btn,
.box-footer .btn {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 10px;
}

.btn-link { color: var(--e-gold-text); }
.btn-link:hover, .btn-link:focus { color: var(--e-gold-hover); }

.btn-sm, .btn-xs { border-radius: 5px; }

/* --- Alerts -> soft pastel bands (AdminLTE ships these with !important) --- */
.alert { border-radius: var(--e-radius); }
.alert-warning { background: #FFF9E8 !important; border-color: #F0E3BC !important; color: #8A6D1A !important; }
.alert-danger { background: var(--e-danger-bg) !important; border-color: #EFD3D3 !important; color: var(--e-danger) !important; }
.alert-success { background: var(--e-success-bg) !important; border-color: #CDE8DB !important; color: var(--e-success) !important; }
.alert-info { background: #EDF4F8 !important; border-color: #D3E2EB !important; color: #33647A !important; }

/* --- Select2 -> same field language as .form-control --- */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--e-input-border);
    border-radius: var(--e-radius-input);
    background: var(--e-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 11px;
    color: var(--e-text);
    font-size: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--e-gold);
    box-shadow: 0 0 0 2px var(--e-gold-ring);
    outline: none;
}

.select2-dropdown {
    border: 1px solid var(--e-input-border);
    border-radius: var(--e-radius-input);
    box-shadow: var(--e-shadow);
    font-size: 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--e-gold-bg);
    color: var(--e-gold-text);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--e-weak-bg);
    color: var(--e-text);
}

/* --- Forms --- */
label { font-weight: 500; color: var(--e-text-2); font-size: 12px; }

.control-label { color: var(--e-text-2); font-size: 12px; }

.form-control {
    height: 38px;
    padding: 6px 11px;
    border: 1px solid var(--e-input-border);
    border-radius: var(--e-radius-input);
    color: var(--e-text);
    background: var(--e-surface);
    font-family: inherit;
    font-size: 12px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.form-control::-webkit-input-placeholder { color: var(--e-text-4); }
.form-control::-moz-placeholder { color: var(--e-text-4); }
.form-control:-ms-input-placeholder { color: var(--e-text-4); }

.form-control:focus {
    border-color: var(--e-gold);
    box-shadow: 0 0 0 2px var(--e-gold-ring);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background: var(--e-weak-bg);
    color: #777B84;
    border-color: var(--e-input-border);
    cursor: default;
}

select.form-control { -webkit-appearance: none; appearance: none; }

textarea.form-control { height: auto; min-height: 72px; padding: 8px 11px; }

.input-group-addon {
    border-color: var(--e-input-border);
    background: var(--e-weak-bg);
    color: var(--e-text-2);
    border-radius: var(--e-radius-input);
}

.help-block { font-size: 11px; color: var(--e-text-3); }

.has-error .form-control,
.has-error .form-control:focus {
    border-color: var(--e-danger);
    box-shadow: 0 0 0 2px rgba(201, 74, 74, .12);
}

.has-error .control-label,
.has-error .help-block { color: var(--e-danger); }

.has-success .form-control,
.has-success .form-control:focus {
    border-color: var(--e-success);
    box-shadow: 0 0 0 2px rgba(22, 134, 90, .12);
}

.has-success .control-label { color: var(--e-success); }

.has-feedback label ~ .form-control-feedback { top: 27px; color: #AAADB2; }

.form-control-feedback { color: #AAADB2; }

/* --- Tables (Bootstrap + DataTables) --- */
.table {
    background: transparent;
    font-size: 12px;
}

.table > thead > tr > th {
    background: var(--e-weak-bg);
    color: var(--e-text-3);
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--e-divider);
    padding: 11px 18px;
    white-space: nowrap;
    text-align: left;
}

/* thin column separators in table headers (prototype look) */
.table > thead > tr > th + th { border-left: 1px solid var(--e-divider); }

.table > thead > tr > td {
    background: var(--e-weak-bg);
    color: var(--e-text-3);
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--e-divider);
    padding: 11px 18px;
}

.table > tbody > tr > td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--e-divider);
    color: #35383F;
    vertical-align: middle;
}

.table > tfoot > tr > td {
    padding: 10px 18px;
    border-top: 1px solid var(--e-divider);
    color: var(--e-text-2);
    font-size: 11px;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr:hover { background: #FAFAF8; }

.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }

.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td { border-color: var(--e-divider); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--e-text-3);
    font-size: 11px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--e-input-border);
    border-radius: var(--e-radius-input);
    height: 30px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--e-text);
}

.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--e-gold); outline: none; }

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: .45; }

/* DataTables (Bootstrap 3 integration) renders pagination as
   ul.pagination > li.paginate_button > a — keep all visuals on the anchor
   (styled by the .pagination rules below); the li stays chrome-less. */
.dataTables_wrapper .dataTables_paginate { margin-top: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 2px; }

.dataTables_wrapper .dataTables_paginate .paginate_button > a { cursor: pointer; }

.dataTables_processing { border-radius: var(--e-radius) !important; }

/* bottom chrome row: info + pagination — flex so they sit on the same baseline */
.dataTables_wrapper > .row:last-of-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.dataTables_wrapper > .row:last-of-type > [class*="col-"] {
    float: none;
    display: flex;
    align-items: center;
}
.dataTables_wrapper > .row:last-of-type > .col-sm-7 {
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_info { padding-top: 0; }

.dataTables_wrapper .dataTables_paginate ul.pagination { margin: 0; }

.dataTables_wrapper .page-length-custom { margin-top: 0; text-align: right; }

/* --- Labels / badges -> chips --- */
.label {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--e-radius-chip);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

/* AdminLTE declares these with !important saturated colors: override with !important */
.label-success { background: var(--e-success-bg) !important; color: var(--e-success) !important; }
.label-warning { background: var(--e-warning-bg) !important; color: var(--e-warning) !important; }
.label-danger, .label-important { background: var(--e-danger-bg) !important; color: var(--e-danger) !important; }
.label-info { background: #EDF4F8 !important; color: #33647A !important; }
.label-default { background: var(--e-neutral-bg) !important; color: var(--e-neutral) !important; }
.label-primary { background: var(--e-gold-bg) !important; color: var(--e-gold-text) !important; }

.badge { background: var(--e-neutral-bg); color: var(--e-neutral); font-weight: 600; }

/* --- Pagination --- */
.pagination > li > a,
.pagination > li > span {
    color: var(--e-text-2);
    font-size: 12px;
    border-color: var(--e-divider);
    padding: 5px 11px;
    margin: 0 2px;
    border-radius: 5px;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    background: var(--e-weak-bg);
    border-color: #C4C4BE;
    color: var(--e-text-strong);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background: var(--e-gold);
    border-color: var(--e-gold);
    color: var(--e-text-strong);
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover { color: #B8BBC1; background: transparent; border-color: var(--e-divider); }

/* --- Alerts --- */
.alert { border-radius: var(--e-radius); border: 1px solid transparent; font-size: 12px; padding: 10px 14px; }

.alert-success { background: var(--e-success-bg); color: var(--e-success); border-color: #D5EEE3; }
.alert-danger, .alert-error { background: var(--e-danger-bg); color: var(--e-danger); border-color: #F5D7D7; }
.alert-warning { background: var(--e-warning-bg); color: var(--e-warning); border-color: #F1E3C4; }
.alert-info { background: var(--e-neutral-bg); color: var(--e-neutral); border-color: #E2E6EA; }

.alert .close { opacity: .45; text-shadow: none; }
.alert .close:hover { opacity: .8; }

/* --- Modals --- */
.modal-content {
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    box-shadow: var(--e-shadow-pop);
}

.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--e-divider); }

.modal-title { font-size: 15px; font-weight: 650; color: var(--e-text-strong); }

.modal-body { padding: 20px; }

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--e-divider);
    background: transparent;
    border-radius: 0 0 var(--e-radius) var(--e-radius);
}

.modal-backdrop.in { opacity: .32; }

/* --- Dropdown menus --- */
.dropdown-menu {
    border-radius: var(--e-radius);
    border: 1px solid var(--e-border);
    box-shadow: var(--e-shadow-pop);
    padding: 6px;
    min-width: 160px;
}

.dropdown-menu > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
    color: var(--e-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--e-weak-bg);
    color: var(--e-text-strong);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--e-weak-bg);
    color: var(--e-gold-text);
}

.dropdown-menu .divider { margin: 5px 6px; background: var(--e-divider); }

.dropdown-menu > li > a i { color: var(--e-text-3); width: 16px; }

/* --- Nav tabs (Bootstrap -> ELYTECH subnav) --- */
.nav-tabs { border-bottom: 1px solid var(--e-border); }

.nav-tabs > li { margin: 0 24px 0 0; }

.nav-tabs > li > a {
    color: var(--e-text-3);
    font-size: 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 2px 11px;
    margin-right: 0;
    background: transparent;
}

.nav-tabs > li > a:hover {
    color: var(--e-text);
    border-color: transparent transparent transparent;
    background: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--e-gold-text);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid var(--e-gold);
    background: transparent;
}

/* --- Panels (fallback for pages using panels) --- */
.panel {
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    box-shadow: var(--e-shadow);
}

.panel-heading { border-radius: var(--e-radius) var(--e-radius) 0 0; padding: 12px 18px; }
.panel-title { font-size: 15px; font-weight: 650; color: var(--e-text-strong); }
.panel-body { padding: 18px; }
.panel-footer { background: transparent; border-top: 1px solid var(--e-divider); }

.panel-default > .panel-heading { background: var(--e-surface); border-color: var(--e-divider); color: var(--e-text-strong); }
.panel-default { border-color: var(--e-border); }

/* --- Breadcrumbs, wells, misc --- */
.breadcrumb {
    background: var(--e-surface);
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius-btn);
    font-size: 12px;
    padding: 8px 14px;
}

.well {
    background: var(--e-weak-bg);
    border: 1px solid var(--e-divider);
    border-radius: var(--e-radius);
    box-shadow: none;
    color: var(--e-text-2);
    font-size: 12px;
}

.progress { border-radius: 6px; height: 8px; box-shadow: none; background: var(--e-weak-bg); }
.progress-bar { background: var(--e-gold); box-shadow: none; }

/* --- Select2 --- */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--e-input-border);
    border-radius: var(--e-radius-input);
    background: var(--e-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: var(--e-text);
    font-size: 12px;
    padding-left: 11px;
    padding-right: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--e-gold);
    box-shadow: 0 0 0 2px var(--e-gold-ring);
}

.select2-dropdown { border-color: var(--e-border); border-radius: var(--e-radius); box-shadow: var(--e-shadow-pop); }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--e-weak-bg);
    color: var(--e-gold-text);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--e-gold-bg);
    color: var(--e-gold-text);
}

/* --- DateRangePicker --- */
.daterangepicker {
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius);
    box-shadow: var(--e-shadow-pop);
    font-family: var(--e-font);
    font-size: 12px;
}

.daterangepicker .calendar-table { border-radius: var(--e-radius-btn); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--e-gold); }
.daterangepicker td.in-range { background: var(--e-gold-bg-soft); color: var(--e-text); }
.daterangepicker .drp-buttons { border-top: 1px solid var(--e-divider); }
.daterangepicker .drp-selected { color: var(--e-gold-text); font-size: 12px; }

/* --- AdminLTE misc --- */
.content-wrapper { background: var(--e-bg); }
.main-footer { background: var(--e-surface); border-top: 1px solid var(--e-divider); color: var(--e-text-3); font-size: 11px; padding: 10px 16px; }

/* pace progress bar */
.pace .pace-progress { background: var(--e-gold); }

/* --------------------------------------------------------------------------
   6. Dialogs
   -------------------------------------------------------------------------- */

/* --- jquery-confirm --- */
.jconfirm .jconfirm-box {
    border-radius: var(--e-radius) !important;
    border: 1px solid var(--e-border);
    box-shadow: var(--e-shadow-pop) !important;
    font-family: var(--e-font);
}

.jconfirm .jconfirm-title {
    font-size: 15px !important;
    font-weight: 650 !important;
    color: var(--e-text-strong) !important;
    font-family: var(--e-font);
}

.jconfirm .jconfirm-content-pane { color: var(--e-text); font-size: 13px; }

.jconfirm .jconfirm-buttons button {
    border-radius: var(--e-radius-btn);
    font-family: var(--e-font);
    font-size: 12px;
    font-weight: 500;
    height: 34px;
    padding: 0 16px;
}

.jconfirm .jconfirm-buttons button.btn-default {
    background: var(--e-surface);
    border: 1px solid var(--e-input-border);
    color: var(--e-text);
}

.jconfirm .jconfirm-buttons button.btn-default:hover {
    background: #FAFAF8;
    color: var(--e-text-strong);
}

.jconfirm .jconfirm-buttons button.btn-blue {
    background: var(--e-gold) !important;
    border-color: var(--e-gold) !important;
    color: var(--e-text-strong) !important;
}

.jconfirm .jconfirm-buttons button.btn-blue:hover,
.jconfirm .jconfirm-buttons button.btn-blue:focus {
    background: var(--e-gold-hover) !important;
    border-color: var(--e-gold-hover) !important;
}

/* type accent (plugin default blue/orange) -> brand gold; plugin css loads
   after this file on the index page, so !important + body prefix (higher
   specificity than the plugin's !important icon rule) are required. The
   plugin's type-* keyframes animate border-color on all four sides, which
   tints the theme's 1px side borders blue/yellow — drop the pulse. */
.jconfirm .jconfirm-box.jconfirm-type-blue,
.jconfirm .jconfirm-box.jconfirm-type-orange {
    border-top-color: var(--e-gold) !important;
    -webkit-animation: none !important;
    animation: none !important;
}

body .jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c,
body .jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c { color: var(--e-gold) !important; }

.jconfirm.jconfirm-warning .jconfirm-box .jconfirm-title-c .jconfirm-icon-c i { color: var(--e-warning); }
.jconfirm.jconfirm-error .jconfirm-box .jconfirm-title-c .jconfirm-icon-c i { color: var(--e-danger); }
.jconfirm.jconfirm-success .jconfirm-box .jconfirm-title-c .jconfirm-icon-c i { color: var(--e-success); }

/* --- layer.js --- */
.layui-layer {
    border-radius: var(--e-radius) !important;
    box-shadow: var(--e-shadow-pop) !important;
    font-family: var(--e-font);
}

.layui-layer-title {
    background: var(--e-surface) !important;
    color: var(--e-text-strong) !important;
    font-size: 14px;
    font-weight: 650;
    border-bottom: 1px solid var(--e-divider) !important;
    border-radius: var(--e-radius) var(--e-radius) 0 0 !important;
    padding: 0 18px;
}

.layui-layer-setwin .layui-layer-close2 { color: var(--e-text-3); }

.layui-layer-btn { border-top: 1px solid var(--e-divider); padding-top: 10px; }

.layui-layer-btn a {
    border-radius: var(--e-radius-btn);
    border-color: var(--e-input-border);
    color: var(--e-text);
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 16px;
}

.layui-layer-btn a:hover { border-color: #C4C4BE; color: var(--e-text-strong); }

.layui-layer-btn .layui-layer-btn0 {
    background: var(--e-gold) !important;
    border-color: var(--e-gold) !important;
    color: var(--e-text-strong) !important;
}

.layui-layer-btn .layui-layer-btn0:hover { background: var(--e-gold-hover) !important; }

/* --------------------------------------------------------------------------
   7. Login page — customer-facing split screen (brand hero + sign-in panel)
   -------------------------------------------------------------------------- */
.e-login-body {
    min-height: 100vh;
    margin: 0;
    background: var(--e-surface);
    font-family: var(--e-font);
}

.e-login-shell { display: flex; min-height: 100vh; }

/* --- left brand hero: value proposition for cross-border payment clients --- */
.e-login-hero {
    position: relative;
    flex: 1 1 54%;
    max-width: 54%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 48px 64px 40px;
    background: linear-gradient(155deg, #FEFDFB 0%, #FCFAF3 48%, #FAF4E4 100%);
    /* curved right edge + gold shadow spill soften the seam into the panel */
    border-radius: 0 40px 40px 0;
    box-shadow: 18px 0 50px rgba(198, 146, 22, .08);
    z-index: 1;
}

/* soft gold glow, top right */
.e-login-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(198, 146, 22, .10) 0%, rgba(198, 146, 22, 0) 65%);
    pointer-events: none;
}

.e-login-hero-copy {
    position: relative;
    z-index: 1;
    margin: auto 0;
    max-width: 540px;
    padding: 48px 0;
}

.e-login-hero-copy h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--e-text-strong);
}

.e-login-hero-copy p {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--e-text-2);
}

.e-login-hero-feats { list-style: none; margin: 34px 0 0; padding: 0; }

.e-login-hero-feats li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--e-text);
}

.e-login-hero-feats li:last-child { margin-bottom: 0; }

.e-login-hero-feats i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--e-surface);
    border: 1px solid #EFDDB0;
    color: var(--e-gold-text);
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(198, 146, 22, .10);
}

/* decorative concentric rings + dot grid, bottom right */
.e-login-hero-art {
    position: absolute;
    right: -170px;
    bottom: -190px;
    width: 560px;
    height: 560px;
    border: 1.5px solid rgba(198, 146, 22, .18);
    border-radius: 50%;
    pointer-events: none;
}

.e-login-hero-art::before {
    content: "";
    position: absolute;
    inset: 56px;
    border: 1px solid rgba(198, 146, 22, .14);
    border-radius: 50%;
}

.e-login-hero-art::after {
    content: "";
    position: absolute;
    inset: 118px;
    border-radius: 50%;
    background: radial-gradient(rgba(198, 146, 22, .20) 1.2px, transparent 1.3px) 0 0 / 16px 16px;
}

/* --- right sign-in panel --- */
.e-login-panel {
    position: relative;
    overflow: hidden;
    flex: 1 1 46%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 48px 48px;
    /* warm tint bleeding from the hero seam + faint gold glow keep the
       panel from feeling empty and blend the two halves together */
    background-color: var(--e-surface);
    background-image:
        radial-gradient(620px 320px at 72% -90px, rgba(198, 146, 22, .07), transparent 70%),
        linear-gradient(90deg, #FBF7EC 0%, rgba(255, 255, 255, 0) 30%);
}

/* brand logo anchors the sign-in column */
.e-login-panel-logo { margin-bottom: 22px; }

.e-login-panel-logo img { width: 180px; height: auto; }

/* role tag pill above the card: tells merchants where they are */
.e-login-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 16px;
    border-radius: var(--e-radius-chip);
    background: var(--e-gold-bg);
    border: 1px solid #F0E3BC;
    color: var(--e-gold-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
}

.e-login-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--e-gold);
}

/* faint gold mark watermark fills the panel's lower corner */
.e-login-panel::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -24px;
    width: 260px;
    height: 203px;
    background: url("/manage/assert/image/elytech-mark.png") no-repeat center / contain;
    opacity: .06;
    pointer-events: none;
}

/* no box chrome: the form sits directly on the page surface */
.e-login-card {
    width: 400px;
    max-width: 100%;
}

.e-login-card-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--e-text-strong);
}

.e-login-card-sub { margin: 0 0 28px; font-size: 13px; color: var(--e-text-3); }

.e-login-card .form-control { height: 46px; font-size: 13.5px; border-radius: 8px; }

.e-login-card .btn-primary {
    min-height: 46px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 8px;
}

.e-login-card .btn-primary i { font-size: 14px; }

/* login form uses placeholder-only inputs (no <label>), so the icon must
   align to the input itself, not below a label */
.e-login-card .form-group.has-feedback .form-control-feedback {
    top: 0;
    height: 46px;
    line-height: 46px;
    color: #AAADB2;
}

.e-login-card .form-group { margin-bottom: 18px; }

.e-login-card .alert { text-align: center; }

.e-login-help {
    width: 400px;
    max-width: 100%;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--e-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--e-text-3);
}

.e-login-help i { color: var(--e-gold-text); font-size: 14px; }

.e-login-copy {
    margin-top: 14px;
    text-align: center;
    color: var(--e-text-4);
    font-size: 11px;
}

/* narrow screens: fold the hero away and center the sign-in card */
@media (max-width: 991px) {
    .e-login-hero { display: none; }

    .e-login-panel {
        flex: 1 1 100%;
        padding: 72px 24px 48px;
    }
}

/* language switcher (anchored to the sign-in panel) */
.e-login-body .lang-switch {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.e-login-body .lang-select-wrap .lang-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--e-text-3);
    font-size: 14px;
    pointer-events: none;
}

.e-login-body .lang-select-wrap select {
    padding: 8px 34px 8px 34px;
    border: 1px solid var(--e-input-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    background: var(--e-surface);
    color: var(--e-text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
    transition: all .3s;
    box-shadow: var(--e-shadow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2370747D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.e-login-body .lang-select-wrap select:hover {
    border-color: #C4C4BE;
    box-shadow: 0 2px 12px rgba(35, 38, 43, .08);
}

.e-login-body .lang-select-wrap select option {
    background: var(--e-surface);
    color: var(--e-text);
}

/* payment page heading description text */
.e-heading-desc {
    margin: 4px 0 0;
    color: var(--e-text-3);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}