/* =====================================================================
   eRoyal Impex — Premium UI Theme
   Shared design system for E_royal_Impex_Main / eRoyalMasters_01 / E_royal_Impex_Home
   NOTE: Only visual styling. Menu markup/links are untouched originals.
   ===================================================================== */

:root {
    --bg-deep: #f3f5fb;
    --bg-panel: #ffffff;
    --bg-panel-alt: #f2f4fa;
    --bg-glass: rgba(255, 255, 255, 0.78);
    --border: rgba(20, 28, 55, 0.10);
    --border-soft: rgba(20, 28, 55, 0.06);
    --text-primary: #1a2137;
    --text-muted: #5b6584;
    --text-faint: #8892ac;
    --accent: #6c47ff;
    --accent-2: #0ea5b7;
    --accent-gold: #b8860b;
    --brand: #D79829;
    --brand-text: #a3721f;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-lg: 0 20px 45px rgba(30, 41, 80, 0.12);
    --shadow-md: 0 8px 24px rgba(30, 41, 80, 0.07);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body.premium-body {
    margin: 0;
    padding: 0;
    background: var(--bg-deep);
    font-family: var(--font);
    color: var(--text-primary);
}

body.premium-body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(124, 92, 255, 0.07), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(14, 165, 183, 0.06), transparent 55%),
        var(--bg-deep);
    min-height: 100vh;
}

a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #cdd4e6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b3bcd8; }

/* ---------------------------------------------------------------------
   Brand mark (shared)
   --------------------------------------------------------------------- */
.pm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pm-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.pm-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 6px 18px rgba(124, 92, 255, 0.45);
}

.pm-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.pm-brand-text .pm-brand-title { font-size: 15px; color: var(--text-primary); }
.pm-brand-text .pm-brand-sub { font-size: 10px; color: var(--accent-gold); letter-spacing: 1.5px; text-transform: uppercase; }

.pm-logo {
    height: 46px;
    width: auto;
    max-width: 230px;
    display: block;
    object-fit: contain;
}

/* =======================================================================
   1) TOP MEGA-NAV  (used by E_royal_Impex_Main.aspx)
   Reskins the untouched #myjquerymenu.jquerycssmenu markup.
   ======================================================================= */

.pm-topbar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 500;
}

.pm-topbar-right { display: flex; align-items: center; gap: 12px; }
#imgHeaderRobot { height: 34px; width: auto; display: block; }
#mainmastopbranch { margin-left: 10px; }

.pm-topbar-right #divBellIcon {
    cursor: pointer;
    color: #d4a017;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pm-topbar-right #divBellIcon:hover {
    color: var(--accent-gold);
    border-color: rgba(184, 134, 11, .35);
    background: rgba(184, 134, 11, .08);
}

/* Same pill-button design as #divBellIcon, for the Home icon beside it. */
.pm-topbar-right #divHomeIcon {
    cursor: pointer;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pm-topbar-right #divHomeIcon:hover {
    color: var(--accent-gold);
    border-color: rgba(184, 134, 11, .35);
    background: rgba(184, 134, 11, .08);
}

/* Same pill-button design as #divBellIcon, for the DSC Tool / ERI Support icons beside it,
   widened to fit a text label so the option is self-explanatory (not icon-only). */
.pm-topbar-right #divDscToolIcon,
.pm-topbar-right #divEriSupportIcon {
    cursor: pointer;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pm-topbar-right #divDscToolIcon:hover,
.pm-topbar-right #divEriSupportIcon:hover {
    color: var(--accent-gold);
    border-color: rgba(184, 134, 11, .35);
    background: rgba(184, 134, 11, .08);
}
.pm-topbar-icon-label {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
#spanBellDot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--bg-panel);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
#spanBellDot.is-zero {
    background: var(--text-faint);
}

@keyframes bellRing {
    0%   { transform: rotate(0deg);   }
    10%  { transform: rotate(15deg);  }
    20%  { transform: rotate(-15deg); }
    30%  { transform: rotate(10deg);  }
    40%  { transform: rotate(-10deg); }
    50%  { transform: rotate(5deg);   }
    60%  { transform: rotate(-5deg);  }
    70%  { transform: rotate(0deg);   }
    100% { transform: rotate(0deg);   }
}
#spanBellIcon { display: inline-block; transform-origin: top center; }

.pm-chip {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.10);
    color: #5c3adb;
    border: 1px solid rgba(124, 92, 255, 0.30);
    letter-spacing: 0.4px;
}

#mypanel, #mypanelcontent { background: transparent; }

#mainmastop1container_topmenu {
    background: linear-gradient(180deg, #132243 0%, #0d1a33 100%);
    border-bottom: 2px solid var(--brand);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* #myjquerymenu physically relocates into #pmSidebarPanel in vertical mode
   (see setPmMenuLayout()), so it needs to be able to shrink/scroll rather
   than force this bar wider than the viewport. */
#mainmastop1container_topmenu > #myjquerymenu { flex: 1 1 auto; min-width: 0; }

#navigationleftShadow { display: none; }

/* Legacy float-clearfix <br> left over from the original markup - the new
   flex layout doesn't need it, but it was still adding a blank line of height. */
.jquerycssmenu br { display: none; }

/* Root menu bar */
.jquerycssmenu, #myjquerymenu.jquerycssmenu {
    font-family: var(--font);
}

.jquerycssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-end;
    /* overflow-x:auto here used to give a horizontal scrollbar instead of
       wrapping to a second row when too many top-level items didn't fit -
       but this <ul> is also the ancestor of every flyout submenu (position:
       absolute, rendered well below its 32px height), and overflow-x/-y
       aren't independent: setting either to non-'visible' forces the other
       to 'auto' too, so the flyouts were being clipped away and never shown.
       Visible avoids that; on narrow screens items may wrap/overflow instead. */
    overflow: visible;
}

/* Firefox has no ::-webkit-scrollbar support, and can only be given a size
   via the standard scrollbar-width/-color properties (no exact px control).
   Scoped out of Chrome/Edge/Safari - there, the standard scrollbar-width
   property (now supported in modern Chromium too) would otherwise win over
   the pixel-precise ::-webkit-scrollbar height below and stop it shrinking. */
@supports not selector(::-webkit-scrollbar) {
    .jquerycssmenu > ul {
        scrollbar-width: thin;
        scrollbar-color: #3d5581 transparent;
    }
}

.jquerycssmenu > ul::-webkit-scrollbar { height: 7px; }
.jquerycssmenu > ul::-webkit-scrollbar-track { background: transparent; }
.jquerycssmenu > ul::-webkit-scrollbar-thumb { background: #3d5581; border-radius: 999px; }
.jquerycssmenu > ul::-webkit-scrollbar-thumb:hover { background: var(--brand); }
/* Once ::-webkit-scrollbar is customized at all, Chrome/Edge drop the native
   OS scrollbar (which had arrow buttons on Windows) in favor of this custom
   one, whose ::-webkit-scrollbar-button defaults to 0x0 - so the arrows need
   to be explicitly drawn back in (CSS border-triangles) to reappear. */
/* WebKit's default button placement is "double" - both a decrement AND an
   increment button rendered together at EACH end - unless :start/:end pin
   each one to a single side. Without that, the left-arrow rule below would
   also match a copy on the right end (and vice versa), showing both arrows
   on both sides. So: left arrow only at :start, right arrow only at :end,
   and the two opposite (unwanted) combos are explicitly zeroed out. */
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:start:decrement {
    width: 10px;
    height: 8px;
    background-color: transparent;
    border-style: solid;
    border-width: 4px 6px 4px 0;
    border-color: transparent #3d5581 transparent transparent;
}
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:end:increment {
    width: 10px;
    height: 8px;
    background-color: transparent;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #3d5581;
}
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:start:increment,
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
    width: 0;
    height: 0;
}
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:start:decrement:hover {
    border-color: transparent var(--brand) transparent transparent;
}
.jquerycssmenu > ul::-webkit-scrollbar-button:horizontal:end:increment:hover {
    border-color: transparent transparent transparent var(--brand);
}

.jquerycssmenu ul { list-style: none; }

/* Top-level items */
.jquerycssmenu > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.jquerycssmenu > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    letter-spacing: 0.2px;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
    white-space: nowrap;
}

.jquerycssmenu > ul > li > a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(215, 152, 41, .5);
}

/* Selected: the item whose flyout is currently open stays highlighted (not
   just on :hover) - full gold underline, gold text, tinted gold background.
   The "pm-menu-active" class is toggled by jquerycssmenu.js on open/close. */
.jquerycssmenu > ul > li.pm-menu-active > a {
    color: var(--brand);
    background: rgba(215, 152, 41, .16);
    border-bottom-color: var(--brand);
    font-weight: 700;
}

.jquerycssmenu > ul > li > a img.downarrowclass,
.jquerycssmenu > ul > li > a img.rightarrowclass {
    opacity: .55;
    width: 9px;
    height: auto;
    margin-left: 2px;
    filter: brightness(0) invert(1);
}

/* Top-level menu icons: only shown in the Sidebar Layout's vertical panel (see
   .pm-sidebar override below) - hidden here so the horizontal bar is unchanged. */
.pm-menu-icon { display: none; }

/* Dropdown panels (any depth) - a clean flat list, single column. This is
   the original, proven layout - unchanged, so the vast majority of menus
   (everything except the few very long lists targeted further below)
   behave exactly as they always did. */
.jquerycssmenu ul ul {
    /* visibility:hidden (not display:none) on purpose: jquerycssmenu.js measures each
       submenu's outerWidth/outerHeight on page load to position flyouts correctly -
       display:none would report 0x0 and break nested (3rd-level+) submenu positioning.
       The script switches this to display:none itself once it has measured everything. */
    visibility: hidden;
    position: absolute;
    min-width: 246px;
    /* Same dark navy card + gold pattern as the vertical sidebar's flyouts
       (was a plain white list) - see .pm-sidebar .jquerycssmenu ul ul below,
       which this now matches so both layouts read as one design. */
    background: linear-gradient(165deg, #1a2c52 0%, #0f1e3a 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    padding: 10px;
    z-index: 900;
}

/* Horizontal mode ONLY: the level-2 panel (Transaction/Report/Master/...'s own
   dropdown) can now grow tall when an accordion branch inside it expands
   (Import -> its own children, etc. - see the accordion rules further below),
   since that content grows the panel in normal flow instead of floating out
   sideways in its own card. Without a cap, a deep/long branch could grow the
   panel past the bottom of the screen and visually sit on top of the
   dashboard content behind it. Cap it and let the PANEL scroll instead -
   same treatment #Rpt_Import/#Rpt_Export already had, just generalized to
   every top-level menu now that any of them can have an expanding branch. */
body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul::-webkit-scrollbar { width: 7px; }
body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul::-webkit-scrollbar-track { background: transparent; }
body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul::-webkit-scrollbar-thumb { background: #3d5581; border-radius: 999px; }
body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.jquerycssmenu ul ul li {
    position: relative;
}

.jquerycssmenu ul ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 14px 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1px;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    border-radius: 9px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Bullet marker in place of the old left-border accent, same as the sidebar's */
.jquerycssmenu ul ul li a::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transition: background .12s ease, transform .12s ease;
}

.jquerycssmenu ul ul li a:hover {
    background: rgba(215, 152, 41, .18);
    color: var(--brand);
}
.jquerycssmenu ul ul li a:hover::before {
    background: var(--brand);
    transform: scale(1.3);
}

.jquerycssmenu ul ul li a img.rightarrowclass {
    /* NOTE: no padding-left here - padding on a flex-item <img> with an
       explicit width and height:auto breaks its aspect-ratio auto-sizing in
       flex layout (it collapsed a 9x9 icon down to 9x3, making it all but
       invisible). The gap on the row already provides the spacing. */
    opacity: .5;
    width: 9px;
    height: auto;
    margin-left: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.jquerycssmenu ul ul li a:hover img.rightarrowclass { opacity: .9; }

/* Selected: a submenu/sub-submenu branch (any depth) whose flyout is currently
   open stays highlighted, not just while hovered - "pm-menu-active" is the
   same class jquerycssmenu-premium.js already toggles at every depth (it's
   what drives the top-level header's own selected look above; this closes
   the gap where nothing below that level ever got a matching style, so an
   open branch looked identical to every unselected sibling once the mouse
   moved off it). Unscoped to Horizontal/Vertical on purpose - the underlying
   DOM is identical in both, only which container it's physically inside
   differs, so one rule covers both layouts. */
.jquerycssmenu ul ul li.pm-menu-active > a {
    background: rgba(215, 152, 41, .26);
    color: var(--brand);
    /* No font-weight:700 here (unlike the top-level header's own active state
       above) on purpose - bold glyphs render wider than regular ones, and a
       nested accordion branch (Customized DSR, MIS Report, Declaration, ...)
       has no fixed width of its own (min-width:0 in horizontal mode's ul ul ul
       override, so it just shrink-wraps to its widest row) - toggling one
       row's own text to bold the instant it's clicked/opened widened that
       row, which widened the whole accordion box around it, which visibly
       shifted every other row's alignment at that exact moment. Background +
       text color + the enlarged bullet below are already a clear enough
       "selected" signal without touching layout-affecting font-weight. */
}
.jquerycssmenu ul ul li.pm-menu-active > a::before {
    background: var(--brand);
    transform: scale(1.3);
}
.jquerycssmenu ul ul li.pm-menu-active > a img.rightarrowclass {
    opacity: .9;
}

/* Section labels: plain non-clickable <li> rows (no <a>/no nested <ul>, so
   jquerycssmenu-premium.js's own header/leaf-link detection - both keyed off
   ul/a presence - simply never sees them) inserted into the handful of very
   long Transaction/Report flyouts (Import/Export, each 15-25+ rows, several
   of them themselves mini sub-submenus) purely to break them into scannable
   groups. Unscoped to Horizontal/Vertical, same reasoning as the selected-
   state rule above - identical DOM, only the container differs. */
.jquerycssmenu ul ul li.pm-menu-section-label {
    padding: 10px 14px 5px 16px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
    user-select: none;
    cursor: default;
}
.jquerycssmenu ul ul li.pm-menu-section-label:first-child {
    margin-top: 0;
    padding-top: 4px;
    border-top: none;
}

.jquerycssmenu ul ul ul {
    top: 0;
}

/* Horizontal mode ONLY (sidebar/vertical mode is untouched below - unchanged
   flyout-card pattern at every level, still "ul ul ul { top:0 }" above).
   Level 3+ submenus (Import's children, TP, Cert, SDF FORMAT, BL Generation,
   Nippon Report, ...) are an inline accordion instead of a further flyout
   card: jquerycssmenu-premium.js slideDown/slideUp them in normal document
   flow, directly under their own trigger row, instead of computing left/top
   to float a card out sideways. The level-2 panel itself (Report/Master/...'s
   own dropdown) is unchanged - still a floating card below the top-bar
   trigger; only what's rendered INSIDE it, for items that have their own
   children, changed. No colors touched - same background/border/hover
   values as the flat list already used, just no separate card chrome around
   the nested branch (it's inline within the level-2 panel's own card now). */
/* .pm-menu-ready (added by jquerycssmenu-premium.js only after its whole
   $headers.each() measurement pass finishes) gates position:static here on
   purpose. Without it, this rule is active from first paint - a level 3+
   submenu would be in normal document flow with only visibility:hidden (not
   yet display:none, see the note below), so it'd still reserve its full
   layout height and inflate every ANCESTOR header's own measured size while
   the script is busy measuring them (e.g. Accounts' sidebar flyout measured
   ~600px tall for a 7-item list, because its descendants' collapsed
   accordion branches were all still taking up space at that exact moment).
   Everything stays position:absolute (out of flow, like it always was, and
   like sidebar mode still is below) until this class exists. */
body:not(.pm-vertical-menu) .jquerycssmenu.pm-menu-ready ul ul ul {
    position: static;
    /* NOT display:none here (see the base .jquerycssmenu ul ul comment above -
       jquerycssmenu-premium.js measures every submenu's real size at page
       load, in whatever the default/initial mode is, BEFORE any open/close
       state exists; display:none reports 0x0 for that measurement, same trap
       the original comment already warns about). visibility:hidden from the
       base rule covers this during measurement; the script itself switches
       every submenu (this level included) to display:none right after, for
       its actual initial collapsed state. */
    top: auto;
    left: auto;
    min-width: 0;
    max-height: none;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0 4px 16px;
    margin: 2px 0 4px 0;
    z-index: auto;
}
body:not(.pm-vertical-menu) .jquerycssmenu.pm-menu-ready ul ul ul li + li {
    margin-top: 2px;
}

/* Disclosure chevron for accordion branches: reuses the same right-arrow
   image/size/color as before, just rotated to read as "expand downward"
   instead of "flies out sideways", and rotated further once expanded. */
body:not(.pm-vertical-menu) .jquerycssmenu ul ul li a img.rightarrowclass {
    transform: rotate(90deg);
    transition: transform .15s ease, opacity .12s ease;
}
body:not(.pm-vertical-menu) .jquerycssmenu ul ul li.pm-menu-active > a > img.rightarrowclass {
    transform: rotate(-90deg);
}

/* Sign-out row inside the mega menu, keep it visually distinct */
.jquerycssmenu ul ul li a[onclick*="Session_Clear"] {
    color: #ff6a5c;
    font-weight: 700;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
    padding-top: 14px;
}

/* ---- Sidebar Layout = vertical: a different flyout pattern for submenus
   opened from the sidebar - a dark navy card (matching the sidebar itself)
   with pill-shaped hover rows and a bullet marker, instead of the plain
   white flat list horizontal mode uses. Any depth of "ul ul" is covered,
   so 2nd/3rd-level flyouts (Master > Common > Client, etc.) all match. */
.pm-sidebar .jquerycssmenu ul ul {
    background: linear-gradient(165deg, #1a2c52 0%, #0f1e3a 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    padding: 10px;
}
.pm-sidebar .jquerycssmenu ul ul li a {
    justify-content: flex-start;
    border-left: none;
    border-radius: 9px;
    color: rgba(255, 255, 255, .75);
    gap: 11px;
    padding: 10px 14px 10px 16px;
    font-size: 13px;
    letter-spacing: .1px;
    position: relative;
}
.pm-sidebar .jquerycssmenu ul ul li a img.rightarrowclass { margin-left: auto; }
.pm-sidebar .jquerycssmenu ul ul li a::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transition: background .12s ease, transform .12s ease;
}
.pm-sidebar .jquerycssmenu ul ul li a:hover {
    background: rgba(215, 152, 41, .18);
    color: var(--brand);
}
.pm-sidebar .jquerycssmenu ul ul li a:hover::before {
    background: var(--brand);
    transform: scale(1.3);
}
.pm-sidebar .jquerycssmenu ul ul li a img.rightarrowclass {
    /* Same fix as the horizontal version above: no padding-left, it broke
       height:auto's aspect ratio on this flex-item image. */
    filter: brightness(0) invert(1);
    opacity: .5;
    width: 9px;
    height: auto;
    flex-shrink: 0;
}
.pm-sidebar .jquerycssmenu ul ul li a:hover img.rightarrowclass { opacity: .9; }
/* Selected state (see the unscoped .jquerycssmenu ul ul li.pm-menu-active > a
   rule above, which already covers background/font-weight/arrow here too) -
   just the text color needs restating at this .pm-sidebar-scoped specificity,
   otherwise .pm-sidebar .jquerycssmenu ul ul li a's own unselected color
   above - same specificity, later in the file - would win and leave a
   selected sidebar row with the gold background but plain white text. */
.pm-sidebar .jquerycssmenu ul ul li.pm-menu-active > a { color: var(--brand); }
/* The handful of genuinely long lists (20-30 items: Admin, Billing...) split
   into 2 fixed-width columns with a thin divider, instead of running one
   column far down the screen. Master's Common/Import submenus (formerly
   #Li74/#Li73 here) are deliberately excluded - they're short enough
   (~11-12 items) that 2 columns just made them look like the horizontal
   top-level bar instead of a dropdown list; Export (#Li82, same length
   class) already rendered single-column, so Common/Import now match it.
   Rpt_Import/Rpt_Export are also deliberately excluded even though they're
   long - they're the only two menus with a 3rd nesting level (Declaration,
   TP, SDF FORMAT, BL Generation, Nippon Report, ...), and a CSS multicol
   container clips position:absolute descendants to their column box in most
   browsers, which made those 3rd-level flyouts invisible.
   Horizontal mode only: sidebar/vertical mode below keeps every submenu -
   these long ones included - a single column like Accounts and everything
   else, since that reads as one consistent pattern down the sidebar's own
   flyouts instead of some being uniquely wide 2-column cards. */
body:not(.pm-vertical-menu) #Billing > ul, body:not(.pm-vertical-menu) #Adm_Import > ul,
body:not(.pm-vertical-menu) #User_Admin_Id > ul {
    width: 480px;
    column-count: 2;
    column-gap: 22px;
    column-rule: 1px solid rgba(255, 255, 255, .12);
}
body:not(.pm-vertical-menu) #Billing > ul li, body:not(.pm-vertical-menu) #Adm_Import > ul li,
body:not(.pm-vertical-menu) #User_Admin_Id > ul li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
/* Same generic scroll cap as horizontal mode's level-2 panel rule above
   (body:not(.pm-vertical-menu) .jquerycssmenu > ul > li > ul), mirrored for
   sidebar mode: EVERY flyout here, at any depth, is a genuine floating card
   (position:fixed, computed fresh on open - see jquerycssmenu-premium.js),
   so any of them - not just Rpt_Import/Rpt_Export - can be long enough to
   run past the bottom of the screen. Cap them all and let them scroll. */
.pm-sidebar .jquerycssmenu ul ul {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.pm-sidebar .jquerycssmenu ul ul::-webkit-scrollbar { width: 7px; }
.pm-sidebar .jquerycssmenu ul ul::-webkit-scrollbar-track { background: transparent; }
.pm-sidebar .jquerycssmenu ul ul::-webkit-scrollbar-thumb {
    background: #3d5581;
    border-radius: 999px;
}
.pm-sidebar .jquerycssmenu ul ul::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.pm-sidebar .jquerycssmenu ul ul li a[onclick*="Session_Clear"] {
    color: #ff6a5c;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Loading overlay (Loading_ShowImage/HideImage from Validation.js) */
.loading { text-align: center; padding: 6px 0; }
.loading img { width: 32px; height: 32px; }
body.Background { overflow: hidden; }

/* ---- Sidebar Layout switcher: a normal submenu ("Horizontal"/"Vertical" under
   "Sidebar Layout", same as any other menu item), so it inherits all the usual
   jquerycssmenu submenu-link styling - this just adds the on/off checkmark. ---- */
.pm-layout-option .pm-layout-check { width: 12px; font-size: 11px; visibility: hidden; }
.pm-layout-option.on .pm-layout-check { visibility: visible; }

/* ---- Sidebar panel (vertical mode only) + the row it shares with .pm-stage ----
   Requested brand color for this panel: #132243 (deep navy). Everything below
   is keyed off --pm-sidebar-bg so the whole panel stays in that family. */
body { --pm-sidebar-w: 220px; }
body.pm-sidebar-collapsed { --pm-sidebar-w: 64px; }
.pm-body-row { display: flex; align-items: stretch; position: relative; }
.pm-sidebar {
    --pm-sidebar-bg: #132243;
    --pm-sidebar-bg-deep: #0d1a33;
    display: none;
    flex-direction: column;
    width: var(--pm-sidebar-w);
    min-width: var(--pm-sidebar-w);
    background: linear-gradient(180deg, var(--pm-sidebar-bg) 0%, var(--pm-sidebar-bg-deep) 100%);
    box-shadow: 3px 0 18px rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    /* No internal scrollbar - the panel grows to its full natural height
       (same as .pm-stage growing to fit the iframe), and the footer simply
       follows after, exactly like horizontal mode's single page flow. */
    padding: 4px 10px 14px 10px;
    animation: pmSidebarIn .22s ease;
    transition: width .2s ease, min-width .2s ease, padding .2s ease;
}
body.pm-vertical-menu .pm-sidebar { display: flex; }
body.pm-sidebar-collapsed .pm-sidebar { padding-left: 6px; padding-right: 6px; }

@keyframes pmSidebarIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* The mega-menu, reflowed as a vertical list once it's inside #pmSidebarPanel
   (moved there by setPmMenuLayout('vertical') - same DOM node, same links,
   just restyled). Flyout submenus already fixed-position via JS, so they're
   unaffected by this container's own scrolling. */
.pm-sidebar .jquerycssmenu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.pm-sidebar .jquerycssmenu > ul {
    flex: 1 1 auto;
    flex-direction: column;
    overflow: visible;
    justify-content: flex-start;
    gap: 2px;
}
.pm-sidebar .jquerycssmenu > ul > li { width: 100%; flex-shrink: 1; }

.pm-sidebar .jquerycssmenu > ul > li > a {
    width: 100%;
    padding: 10px 12px;
    gap: 12px;
    border-bottom: none;
    border-radius: 9px;
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    transition: color .15s ease, background .15s ease;
}
/* Icons: shown only here (see the hidden base rule) - the arrow (already a
   flex item after the icon+label) gets pushed to the far right instead. */
.pm-sidebar .pm-menu-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.pm-sidebar .pm-menu-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pm-sidebar .jquerycssmenu > ul > li > a img.rightarrowclass,
.pm-sidebar .jquerycssmenu > ul > li > a img.downarrowclass {
    margin-left: auto;
}
.pm-sidebar .jquerycssmenu > ul > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
    transition: height .15s ease;
}
/* Hover: soft highlight + the gold accent bar starts to show. */
.pm-sidebar .jquerycssmenu > ul > li > a:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border-bottom-color: transparent;
}
.pm-sidebar .jquerycssmenu > ul > li > a:hover::before { height: 60%; }

/* Selected: the item whose flyout is currently open stays highlighted (not
   just on hover) - full gold accent bar, gold text, tinted gold background.
   The "pm-menu-active" class is toggled by jquerycssmenu.js on open/close. */
.pm-sidebar .jquerycssmenu > ul > li.pm-menu-active > a {
    background: rgba(215, 152, 41, .16);
    color: var(--brand);
    font-weight: 700;
}
.pm-sidebar .jquerycssmenu > ul > li.pm-menu-active > a::before { height: 100%; }

/* Arrow icons are already inverted to white at the base rule (both this panel
   and the horizontal bar share the same navy background now) - here they just
   get a touch brighter on hover/active. */
.pm-sidebar .jquerycssmenu > ul > li > a img.rightarrowclass,
.pm-sidebar .jquerycssmenu > ul > li > a img.downarrowclass {
    transition: transform .15s ease, opacity .15s ease;
}
.pm-sidebar .jquerycssmenu > ul > li > a:hover img.rightarrowclass,
.pm-sidebar .jquerycssmenu > ul > li > a:hover img.downarrowclass,
.pm-sidebar .jquerycssmenu > ul > li.pm-menu-active > a img.rightarrowclass,
.pm-sidebar .jquerycssmenu > ul > li.pm-menu-active > a img.downarrowclass {
    opacity: .9;
}
/* Top-level dropdowns flyout sideways in sidebar mode (see jquerycssmenu.js),
   so this arrow should point right instead of down, to match. */
.pm-sidebar .jquerycssmenu > ul > li > a img.downarrowclass {
    transform: rotate(-90deg);
}

/* OCR's link carries inline position:relative/display:inline-block styles (and
   its "AI" badge span is inline position:absolute) baked into the markup for
   the horizontal bar, where they already look right - override just those here
   so the sidebar gets the same icon-gap/AI-badge-inline/right-aligned-arrow
   layout as every other item. */
.pm-sidebar .jquerycssmenu > ul > li#OCR_Module > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.pm-sidebar .jquerycssmenu > ul > li#OCR_Module > a > span:not(.pm-menu-icon) {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* "Sidebar Layout" pinned to the bottom, like a settings row in most
   premium app sidebars - visually separated from the navigation above it. */
.pm-sidebar .jquerycssmenu > ul > li#Li_SidebarLayout {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Collapsed (icon-only rail) state, toggled by the button below ----
   Labels are plain text nodes (no wrapping element) so font-size:0 hides them
   without any markup changes; the icon keeps its own fixed px size regardless. */
body.pm-sidebar-collapsed .pm-sidebar .jquerycssmenu > ul > li > a {
    justify-content: center;
    /* jquerycssmenu.js sets an inline padding-right (25px) on every item that
       has a submenu, to reserve room for the down-arrow - !important here so
       the icon centers the same for those items as for plain leaf links
       (Import/Export/Exchange-Rate etc.), which never get that inline style. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0;
    font-size: 0;
}
body.pm-sidebar-collapsed .pm-sidebar .jquerycssmenu > ul > li > a img,
body.pm-sidebar-collapsed .pm-sidebar .jquerycssmenu > ul > li > a > span:not(.pm-menu-icon) {
    display: none;
}
body.pm-sidebar-collapsed .pm-sidebar .pm-menu-icon { margin: 0 auto; }
/* OCR's link forces its own gap (see the #OCR_Module rule above, for the
   expanded icon+"OCR"+AI-badge row) - zero it too when collapsed so its icon
   centers the same as every other row instead of sitting off-center. */
body.pm-sidebar-collapsed .pm-sidebar .jquerycssmenu > ul > li#OCR_Module > a {
    gap: 0 !important;
}

/* Collapse/expand toggle - a small circular button straddling the sidebar's
   right edge (half in, half out), vertically centered. Its left position
   tracks --pm-sidebar-w so it always sits right on that edge, expanded or not. */
.pm-sidebar-toggle {
    display: none;
    position: absolute;
    top: 50%;
    left: var(--pm-sidebar-w);
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: #132243;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: left .2s ease, background .15s ease, color .15s ease;
}
.pm-sidebar-toggle:hover { background: var(--brand); color: #132243; }
body.pm-vertical-menu .pm-sidebar-toggle { display: flex; }
.pm-sidebar-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
body.pm-sidebar-collapsed .pm-sidebar-toggle svg { transform: rotate(180deg); }

/* Premium iframe stage - plain full-bleed container, no decorative frame
   around the main content (no border/shadow/rounded corners, no padding
   gap) - same for Horizontal and Vertical layout. */
.pm-stage {
    flex: 1 1 auto;
    min-width: 0;
}
body.pm-vertical-menu .pm-stage {
    display: flex;
    flex-direction: column;
}

.pm-stage-frame {
    background: #ffffff;
    padding: 16px;
    box-sizing: border-box;
}
body.pm-vertical-menu .pm-stage-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#mainiframecontainer {
    width: 100%;
    height: calc(100vh - 60px - 28px - 32px);
    border: 0;
    display: block;
    background: #ffffff;
}
/* Sidebar Layout = vertical: the menu bar shrinks to almost nothing (see
   #mainmastop1container_topmenu), so the fixed-pixel height formula above
   (tuned for horizontal mode's taller menu bar) would leave a gap. Flex-fill
   the remaining space instead - same idea as the sidebar stretching full
   height, just no leftover white strip under either column. */
body.pm-vertical-menu #UpdatePanel1 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.pm-vertical-menu .pm-body-row {
    flex: 1 1 auto;
    min-height: 0;
}
body.pm-vertical-menu #mainiframecontainer {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* =======================================================================
   2) SIDEBAR + HEADER + FOOTER  (used by eRoyalMasters_01.master)
   Reskins the untouched accordion sidebar markup (#newmenulist etc.)
   ======================================================================= */

.pm-shell {
    display: flex;
    height: 100vh;
}

/* --- Sidebar --- */
#sidebar {
    width: 264px;
    min-width: 264px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    box-shadow: 1px 0 0 var(--border-soft);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-wrapper { padding-bottom: 20px; }

#sidebar_main_logobg {
    padding: 18px 18px 14px 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

#sidebar_main_logo_container { display: flex; align-items: center; gap: 10px; }
#sidebar_main_logo_container img { max-width: 100%; height: auto; border-radius: 8px; }

#mainmastop2container_lft_inner {
    padding: 0 12px;
}

/* jQuery UI accordion overrides */
.accordion { border: none; background: transparent; }

.accordion h3,
.accordion .ui-accordion-header {
    background: var(--bg-panel-alt) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 11px 14px !important;
    margin: 8px 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
}

.accordion h3 a { text-decoration: none; color: inherit; }

.accordion .ui-accordion-header.ui-state-active,
.accordion .ui-accordion-header:hover {
    background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(14,165,183,.08)) !important;
    border-color: rgba(124, 92, 255, .35) !important;
    color: var(--accent) !important;
}

.accordion .ui-accordion-header .ui-icon { display: none !important; }
.accordion h3::after {
    content: '';
}

#newmenulistcont {
    padding: 2px 0 6px 4px;
    border-left: 2px solid var(--border);
    margin-left: 8px;
}

#newmenulist { padding: 0; }

#newmenulist a.smenu,
#newmenulist a {
    display: block;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 7px;
    margin: 1px 4px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

#newmenulist a:hover {
    background: rgba(124, 92, 255, .10);
    color: var(--accent);
    transform: translateX(3px);
}

#verticalmenu, #verticalmenu ul { list-style: none; margin: 0; padding: 0; }
#verticalmenu li.smenu, #verticalmenu li a.smenu {
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
}
#verticalmenu ul { display: none; }

/* DSC / contact box at bottom of sidebar */
#sidebar #mainmastop2container_lft_inner + #mainmastop2container_lft_inner,
#sidebar div[style*="height: 130px"] {
    margin-top: 12px;
    padding: 14px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 14px 12px;
}

/* --- Header --- */
#innerbox_Main_Top_User {
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

#mainmastopuserarea {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    width: auto !important;
}

#topslash { width: 1px; height: 22px; background: var(--border); }

/* User identity chip: avatar (left) + name / login-time (right). Click reveals Log out. */
.pm-userchip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 18px 6px 6px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: border-color .15s ease, background .15s ease;
}
.pm-userchip:hover {
    border-color: rgba(124, 92, 255, .35);
    background: rgba(124, 92, 255, .06);
}
.pm-user-avatar-wrap {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pm-user-avatar-icon { color: var(--text-muted); width: 30px; height: 30px; }
.pm-user-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 2px var(--bg-panel-alt);
    border: none;
}
.pm-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.pm-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-user-time {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .3px;
}

/* Dropdown revealed on click */
.pm-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 950;
}
.pm-user-dropdown.open { display: block; }
.pm-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #c0281c;
    text-decoration: none;
    border-radius: 7px;
    white-space: nowrap;
    transition: background .15s ease;
}
.pm-user-dropdown a:hover { background: rgba(220, 38, 38, .08); }
.pm-user-dropdown .pm-signout-icon { font-size: 13px; }
.pm-user-dropdown a.pm-user-dropdown-neutral {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-soft);
    border-radius: 7px 7px 0 0;
    margin-bottom: 2px;
}
.pm-user-dropdown a.pm-user-dropdown-neutral:hover { background: var(--bg-panel-alt); }

/* "Sidebar Layout" row inside the user-chip dropdown - click-to-expand
   accordion (togglePmSidebarLayoutSub) revealing Horizontal/Vertical right
   below it, instead of a flyout submenu, so it never has to worry about
   overflowing the narrow 190px dropdown panel. */
.pm-user-dropdown-sub { position: relative; }
.pm-sub-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-faint);
    transition: transform .15s ease;
}
.pm-user-dropdown-sub.open .pm-sub-arrow { transform: rotate(90deg); }
.pm-user-dropdown-submenu {
    display: none;
    flex-direction: column;
    padding: 2px 0 4px 20px;
}
.pm-user-dropdown-sub.open .pm-user-dropdown-submenu { display: flex; }
.pm-user-dropdown-submenu a {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 10px;
}

/* Premium centered sign-out confirmation (replaces native confirm()) */
.pm-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 20, 35, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.pm-confirm-overlay.open { display: flex; }

.pm-confirm-card {
    width: 340px;
    max-width: 90vw;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 28px 26px 22px 26px;
    text-align: center;
    animation: pmConfirmPop .18s ease;
}
@keyframes pmConfirmPop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Robot icon click popup - reuses .pm-confirm-overlay for the centered
   backdrop, just with its own (image-shaped) card instead of .pm-confirm-card. */
.pm-robot-img-card {
    position: relative;
    max-width: 640px;
    max-height: 85vh;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 16px;
    animation: pmConfirmPop .18s ease;
}
.pm-robot-img-card img {
    display: block;
    max-width: 100%;
    max-height: calc(85vh - 32px);
    border-radius: 8px;
    margin: 0 auto;
}
.pm-robot-img-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: color .15s ease, background .15s ease;
    z-index: 1;
}
.pm-robot-img-close:hover {
    color: var(--text-primary);
    background: var(--bg-panel);
}

/* Branch Selection modal - Bootstrap "modal-dialog-centered" style: fixed overlay +
   flexbox centering (inherited from .pm-confirm-overlay), card just hosts the
   Change_Branch.aspx iframe so its own server-side dropdown/postback logic is untouched. */
.pm-branch-modal-card {
    position: relative;
    width: 460px;
    max-width: 95vw;
    height: 270px;
    max-height: 92vh;
    animation: pmConfirmPop .18s ease;
}
.pm-branch-modal-frame {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    background: var(--bg-panel);
}

/* "Select Group"/"Select Branch" dropdown panel, reparented in from Change_Branch.aspx's
   iframe via pmMountBranchDropdown() (see the script block below) so it can overlap past
   the small popup card's edge instead of being clipped by the iframe's fixed-size box.
   Colors are hardcoded to match Change_Branch.aspx's own --pmb-* outlined-field palette
   exactly (rather than reusing this page's --accent etc., which is a different color)
   so the panel looks identical whether it's still sitting in the iframe or moved out here. */
#pmBranchDropdownHost .pmb-select-panel {
    display: none;
    background: #ffffff;
    border: 1px solid rgba(20, 28, 55, 0.10);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(30, 41, 80, .20);
    padding: 6px;
    overflow: hidden;
    max-height: 220px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#pmBranchDropdownHost .pmb-select-panel.open { display: flex; flex-direction: column; animation: pmbHostPanelPop .14s ease; }
@keyframes pmbHostPanelPop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#pmBranchDropdownHost .pmb-select-search-wrap { position: relative; flex: 0 0 auto; padding: 2px 2px 6px 2px; }
#pmBranchDropdownHost .pmb-select-search-wrap::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892ac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    background-size: 12px;
    pointer-events: none;
}
#pmBranchDropdownHost .pmb-select-search {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 28px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #1a2137;
    background: #f2f4fa;
    border: 1.5px solid transparent;
    border-radius: 7px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
#pmBranchDropdownHost .pmb-select-search:focus { background: #ffffff; border-color: rgba(37, 99, 235, .4); }
#pmBranchDropdownHost .pmb-select-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 28, 55, 0.10) transparent;
}
#pmBranchDropdownHost .pmb-select-list::-webkit-scrollbar { width: 7px; }
#pmBranchDropdownHost .pmb-select-list::-webkit-scrollbar-track { background: transparent; }
#pmBranchDropdownHost .pmb-select-list::-webkit-scrollbar-thumb { background: rgba(20, 28, 55, 0.10); border-radius: 10px; }
#pmBranchDropdownHost .pmb-select-list::-webkit-scrollbar-thumb:hover { background: #8892ac; }
#pmBranchDropdownHost .pmb-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin: 1px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a2137;
    border-radius: 7px;
    cursor: pointer;
    transition: background .1s ease, color .1s ease;
}
#pmBranchDropdownHost .pmb-select-option .pmb-opt-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: 14px;
}
#pmBranchDropdownHost .pmb-select-option:hover,
#pmBranchDropdownHost .pmb-select-option.pmb-active { background: #f2f4fa; }
#pmBranchDropdownHost .pmb-select-option.selected { color: #2563eb; background: rgba(37, 99, 235, .10); }
#pmBranchDropdownHost .pmb-select-option.selected .pmb-opt-check { opacity: 1; }
#pmBranchDropdownHost .pmb-select-option.selected.pmb-active { background: rgba(37, 99, 235, .16); }
#pmBranchDropdownHost .pmb-select-empty {
    padding: 14px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #8892ac;
    text-align: center;
}

/* "View All Customers" popup - shown here (not inside #mainiframecontainer)
   so it covers the full screen like the robot/bell popups; the iframe just
   supplies the title + rows HTML via window.parent.openViewAllCustomersModal(). */
.pm-viewall-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: pmConfirmPop .18s ease;
}
.pm-viewall-title {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: .2px;
    flex-shrink: 0;
    text-align: left;
    border-radius: 14px 14px 0 0;
}
.pm-viewall-body {
    overflow-y: auto;
    padding: 6px 8px;
    border-radius: 0 0 14px 14px;
}
/* Row styles ported from E_royal_Impex_Dashboard_New.aspx's .cust-rank-* (same
   class names/markup the iframe already builds) so the popped-out rows look
   identical to how they render inside the dashboard card. */
.pm-viewall-body .cust-rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; transition: background .12s ease; text-align: left; }
.pm-viewall-body .cust-rank-row:hover { background: var(--bg-panel-alt); }
.pm-viewall-body .cust-rank-num { width: 22px; height: 22px; border-radius: 50%; background: var(--border-soft); color: var(--text-muted); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-viewall-body .cust-rank-row:nth-child(1) .cust-rank-num { background: linear-gradient(150deg, #F5D061, #D9A017); color: #fff; }
.pm-viewall-body .cust-rank-row:nth-child(2) .cust-rank-num { background: linear-gradient(150deg, #CBD5E1, #8FA0B5); color: #fff; }
.pm-viewall-body .cust-rank-row:nth-child(3) .cust-rank-num { background: linear-gradient(150deg, #E8B48C, #C6835A); color: #fff; }
.pm-viewall-body .cust-rank-name { width: 220px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-viewall-body .cust-rank-bar-wrap { flex: 1; height: 8px; background: var(--border-soft); border-radius: 4px; overflow: hidden; min-width: 60px; }
.pm-viewall-body .cust-rank-bar { height: 100%; background: linear-gradient(90deg, #1A6FBF, #3D9BE9); border-radius: 4px; }
.pm-viewall-body .cust-rank-count { width: 64px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text-primary); }

/* Job Details popup (double-click a row in General_Search.aspx etc.) - shown here
   (not inside #mainiframecontainer) so the dark backdrop covers the full screen,
   same technique as .pm-viewall-card; this one just hosts a full page in an iframe
   instead of injected rows HTML. */
.pm-jobdetails-card {
    position: relative;
    width: min(1050px, 96vw);
    height: min(760px, 94vh);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pmConfirmPop .18s ease;
}
.pm-jobdetails-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.pm-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #c0281c;
    background: rgba(220, 38, 38, .10);
    border: 1px solid rgba(220, 38, 38, .25);
}

.pm-confirm-card h3 {
    margin: 0 0 8px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.pm-confirm-card p {
    margin: 0 0 20px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.pm-confirm-actions {
    display: flex;
    gap: 10px;
}

.pm-btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pm-btn-ghost {
    background: var(--bg-panel-alt);
    border-color: var(--border);
    color: var(--text-primary);
}
.pm-btn-ghost:hover { background: var(--border-soft); }
.pm-btn-danger {
    background: linear-gradient(135deg, #e5484d 0%, #c0281c 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(192, 40, 28, .3);
}
.pm-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(192, 40, 28, .4);
}
.pm-confirm-icon-success {
    color: var(--success);
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .25);
}
.pm-btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, .3);
}
.pm-btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, .4);
}

/* Premium announcement popup (bell icon) */
.pm-bell-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 20, 35, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pm-bell-overlay.open { display: flex; }

.pm-bell-card {
    position: relative;
    width: 420px;
    max-width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pmConfirmPop .18s ease;
}

.pm-bell-close {
    flex-shrink: 0;
    align-self: center;
    margin-left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(15, 20, 35, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.pm-bell-close:hover {
    background: #c0281c;
    transform: scale(1.06);
}

.pm-bell-media {
    background: var(--bg-panel-alt);
    line-height: 0;
}
.pm-bell-media img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

.pm-bell-links {
    padding: 14px 16px 16px 16px;
    text-align: center;
    border-top: 1px solid var(--border-soft);
}
.pm-bell-links-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-faint);
}
.pm-bell-links-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.pm-bell-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pm-bell-link:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.pm-bell-link-whatsapp { background: #25D366; }
.pm-bell-link-drive { background: #4285F4; }
.pm-bell-link-youtube { background: #FF0000; }
.pm-bell-link-website { background: #333333; }

.pm-bell-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 30px;
    text-align: center;
}
.pm-bell-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-panel-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.pm-bell-empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Bell popup tabs: Announcements (existing, server-driven media/links) / Job Alerts (new). */
.pm-bell-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
    flex-shrink: 0;
}
.pm-bell-tab {
    flex: 1;
    padding: 12px 8px 10px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .15s ease, border-color .15s ease;
}
.pm-bell-tab:hover { color: var(--text-primary); }
.pm-bell-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.pm-bell-tab-badge {
    background: #ff4d4f;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
}

.pm-bell-pane {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pm-bell-alerts-list { padding: 6px; }
.pm-bell-alert-section {
    padding: 10px 8px 6px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-faint);
}
.pm-bell-alert-row {
    display: flex;
    gap: 9px;
    padding: 9px 8px;
    border-radius: 10px;
    align-items: flex-start;
    transition: background .12s ease;
}
.pm-bell-alert-row:hover { background: var(--bg-panel-alt); }
.pm-bell-alert-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pm-bell-alert-ico svg { width: 14px; height: 14px; }
.pm-bell-alert-title { font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.pm-bell-alert-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.pm-bell-alert-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}

#mainmastophome a {
    display: inline-flex;
    align-items: center;
}
#mainmastophome .pm-logo {
    height: 32px;
}

#mainmastopbranch a.branch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px 6px 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#mainmastopbranch a.branch:hover {
    border-color: rgba(124, 92, 255, .35);
    background: rgba(124, 92, 255, .06);
    color: var(--accent);
}
#mainmastopbranch a.branch svg { flex-shrink: 0; color: #dc2626; }

.pm-branch-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}
.pm-branch-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-branch-period {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .3px;
}

#mainmastopusername {
    display: flex;
    align-items: center;
    gap: 8px;
}
#mainmastopplaceicon, #mainmastopusernamepic {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
#mainmastopbranchtxt, #mainmastopusernametxt {
    font-size: 12px;
    color: var(--text-primary);
}

/* --- Main content stage ---
   This page is loaded inside Main_01.aspx's <iframe scrolling="no">, so the iframe
   itself never grows a scrollbar - anything taller than its viewport used to just get
   clipped (e.g. the 2nd row of the importer/exporter card grid). Making #maincontent a
   fixed-height, independently-scrolling box (not the root html/body) sidesteps that:
   overflow on a nested element works regardless of the iframe's scrolling attribute. */
#maincontent {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg-deep);
}

#innerbox_MidMain_Grid_ {
    padding: 18px 22px 60px 22px;
}

/* =======================================================================
   3) DASHBOARD (used by E_royal_Impex_Home.aspx)
   Reskins the untouched dashboard-container / tabs / partition-box markup.
   ======================================================================= */

.pm-home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.pm-home-hero-left { display: flex; align-items: center; gap: 14px; }
.pm-home-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, #f0b942 100%);
    box-shadow: 0 8px 20px rgba(215, 152, 41, .35);
}
.pm-home-hero h1 {
    font-size: 21px;
    margin: 0 0 4px 0;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--brand-text) !important;
}
.pm-home-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.dashboard-container { background: transparent; }

#mainmastop2container_rght_tag2_txt1 { margin-bottom: 16px; }

.pm-dash-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Toolbar search (right side of the Import/Export tabs) - live-filters the card
   grid of whichever tab is active as you type. */
.pm-dash-search { position: relative; }

.pm-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 250px;
    padding: 0 12px;
    height: 38px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    color: var(--text-faint);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pm-search-box:focus-within {
    border-color: rgba(215, 152, 41, .5);
    box-shadow: 0 0 0 3px rgba(215, 152, 41, .12);
}
.pm-search-box svg { flex-shrink: 0; }
.pm-search-box input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.pm-search-box input::placeholder { color: var(--text-faint); font-weight: 500; }

.tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 6px;
    border-radius: 999px;
    width: fit-content;
    box-shadow: var(--shadow-md);
}
/* Import/Export were boxed at a fixed 85px by the original markup while Reports had
   no such constraint, so the three pills looked mismatched/cramped (and clipped the
   label once bold on the active state). liImport/liExport are runat="server" inside
   the master page's ContentPlaceHolder + UpdatePanel, so ASP.NET's Predictable
   ClientIDMode prefixes their rendered id (e.g. ContentPlaceHolder1_liImport) - a
   plain #liImport selector never matches at runtime. Match on the id suffix instead. */
.tabs span[id$="liImport"], .tabs span[id$="liExport"] {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
}
.tabs > div[style*="width: 5px"] { display: none !important; }

.tab {
    border-radius: 999px !important;
    padding: 0 !important;
}

.tab a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 34px;
    min-width: 120px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: all .18s ease;
}
.tab a::before {
    font-size: 13px;
    line-height: 1;
    opacity: .85;
    font-family: initial;
}
/* The tab <a> itself carries a FontAwesome class (fas fa-cloud-*) for an icon that was
   never actually wired up - that class's font-family was inheriting into the "Import" /
   "Export" / "Reports" text span, rendering it as icon glyphs instead of readable text. */
.tab a span { font-family: var(--font) !important; }
#tabImport a::before { content: '\2B07\FE0E'; }
#tabExport a::before { content: '\2B06\FE0E'; }

.tab:hover a {
    color: var(--brand-text);
    background: rgba(215, 152, 41, .08);
}

.tab.active a {
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, #f0b942 100%);
    box-shadow: 0 8px 18px rgba(215, 152, 41, .4);
}

.content { background: transparent; }

.Importmain-content, .Exportmain-content1, .Othermain-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

[class*="partition-box"] {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px 16px 16px;
    box-shadow: var(--shadow-md);
    flex: 1 1 300px;
    min-width: 280px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.partition-box2 { flex: 1 1 420px; min-width: 380px; }

[class*="partition-box"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #f0b942);
}
[class*="partition-box"]:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.partition-header h2 {
    margin: 0 0 12px 0;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.partition-header h2::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.menu { display: block; }
.menu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 7px;
}

.menu-row a, .menu-row span a {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: all .15s ease;
}

.menu-row a:hover, .menu-row span a:hover {
    color: var(--brand-text);
    border-color: var(--brand);
    background: rgba(215, 152, 41, .10);
    transform: translateY(-1px);
}

/* Per-name (importer/exporter) card grid - 4 columns, each card independent
   (own month dropdown + own chart), fed entirely from client-side jobData. */
.pm-imp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1500px) { .pm-imp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .pm-imp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pm-imp-grid { grid-template-columns: 1fr; } }

.pm-imp-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.pm-imp-card {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 14px 12px 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pm-imp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #f0b942);
}
.pm-imp-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.pm-imp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.pm-imp-card-name {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-imp-card-month {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    background: var(--bg-panel-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6584' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;
    background-size: 10px;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 20px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease;
}
.pm-imp-card-month:hover { border-color: var(--brand); }

/* Higher specificity than the base .chart-container rule below (which comes later
   in the cascade) so these overrides for the compact per-card chart actually win. */
.pm-imp-card .chart-container {
    height: 150px;
    min-height: 0;
    margin: 0 0 10px 0;
    padding: 8px;
}
/* The base .chart-container canvas rule below forces height:auto !important, which
   fights Chart.js's maintainAspectRatio:false sizing (used here so every card chart
   fills its fixed 150px box instead of just going by aspect ratio). This 3-class
   selector out-specifies that single-class rule so the canvas actually fills the box. */
.pm-imp-card .chart-container canvas {
    height: 100% !important;
    width: 100% !important;
}
.pm-imp-card .menu-row-chart a {
    padding: 8px 6px !important;
    font-size: 8.5px !important;
}
.pm-imp-card .menu-row-chart a span {
    font-size: 15px !important;
}

.chart-container {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin: 14px 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    box-shadow: inset 0 0 0 1px var(--border-soft);
}
.chart-container canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

.menu-row-chart { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-row-chart a {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 100px;
    min-width: 100px;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: none !important;
    color: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.menu-row-chart a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}
.menu-row-chart a span {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

/* Ad / bell popups keep functional, restyle container chrome */
.ad-popup, #divBellImagePopup > div > div {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
}

@media (max-width: 1100px) {
    #sidebar { position: fixed; left: -280px; z-index: 999; transition: left .2s ease; }
    #sidebar.pm-open { left: 0; }
    .pm-shell { flex-direction: column; }
}