/* =====================================================================
   eRoyal Impex — Premium UI Theme
   Shared design system for E_royal_Impex_Main_01 / eRoyalMasters_01 / E_royal_Impex_Home_01
   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: 36px;
    width: auto;
    max-width: 190px;
    display: block;
    object-fit: contain;
}

/* =======================================================================
   1) TOP MEGA-NAV  (used by E_royal_Impex_Main_01.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);
}
#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;
}

.jquerycssmenu ul ul li {
    position: relative;
}

/* A little air between rows instead of a solid stacked block - list rhythm,
   not a fresh visual style (colors/marker untouched). */
.jquerycssmenu ul ul li + li {
    margin-top: 2px;
}

/* 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. A FIXED width + fixed column-count here (not
   column-width on an auto/shrink-to-fit box, which is what caused the
   earlier "opens then collapses" glitch - that combination resolves
   inconsistently across browsers) is deliberate: fixed width + fixed
   column-count has no sizing ambiguity at all.
   NOTE: Rpt_Import/Rpt_Export are deliberately excluded here even though
   they're just as long - they're the only two menus with a 3rd nesting
   level (Declaration, TP, SDF FORMAT, BL Generation, Nippon Report, ...).
   A CSS multicol container clips position:absolute descendants to their
   column box in most browsers, which made those 3rd-level flyouts
   invisible. Single column is the trade-off until the flyout positioning
   itself is made multicol-aware. */
#Li74 > ul, #Li73 > ul,
#Billing > ul, #Adm_Import > ul,
#User_Admin_Id > ul {
    width: 480px;
    column-count: 2;
    column-gap: 22px;
    column-rule: 1px solid rgba(255, 255, 255, .12);
}

#Li74 > ul li, #Li73 > ul li,
#Billing > ul li, #Adm_Import > ul li,
#User_Admin_Id > ul li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.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;
}

/* 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; }

.jquerycssmenu ul ul ul {
    top: 0;
}

/* 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; }
.pm-sidebar #Li74 > ul, .pm-sidebar #Li73 > ul,
.pm-sidebar #Billing > ul, .pm-sidebar #Adm_Import > ul,
.pm-sidebar #User_Admin_Id > ul {
    column-rule-color: rgba(255, 255, 255, .12);
}
.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: 150px;
    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;
    transition: background .15s ease;
}
.pm-user-dropdown a:hover { background: rgba(220, 38, 38, .08); }
.pm-user-dropdown .pm-signout-icon { font-size: 13px; }

/* 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);
}

/* "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);
}

/* 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 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    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;
    z-index: 2;
    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_01.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; }
}