/* ==================================================================================================
 ss.css
 01-02-2025 : Created by Abhay Sobti
 This is the main stylesheet containing StanSoft elements only. Should be used in conjuction
 with ss.js [to allow tab interactivity,etc]
 ================================================================================================== */

 /* SS-CARD1 */
.ss-card1 {
    display:inline-block;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #eaeaea;
    overflow: hidden;
    padding: 14px 16px;
    transition: all 0.3s ease;
    /* height:150px; */
    width: 100%;
    max-width: 100%;
    /* flex:1; */
    min-width: 250px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.ss-card1 .ss-card1-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.ss-card1 .ss-card1-title {
    margin: 0;
    font-size:1.0em;
    font-weight: bolder;
    color: #333;
}

/* Header corner icons/action-links (the "fa-inr" corner glyph, "Full Report"/"Capital Gains" links,
   etc.) were sitting unstyled in default black/blue - gives every card header the same brand color
   instead. Doesn't touch semantic red/green (P&L triangle, ledger Dr/Cr, ...): those aren't <i> tags
   or set their own inline color, so they're untouched by this. */
.ss-card1 .ss-card1-header > i,
.ss-card1 .ss-card1-header .pull-right i {
    color: var(--brand-500, #2d82b5);
}
.ss-card1 .ss-card1-header a {
    color: var(--brand-600, #246a96);
}

.ss-card1 .ss-card1-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    margin-top: 6px;
}

/* SS-TABLE-MINIMAL ==================================================================================================
 Basic table with simple styling
================================================================================================== */
.ss-table-minimal {
    width:100%;
    border-collapse: collapse;
    border-color: silver;
    border-width: 1px;
    font-size: 0.7em;
}

/* .ss-table-minimal thead {
    position:fixed;
    top:0px;
    z-index:10;
}  */

/* padding was 2px all round (too tight to read), and vertical-align was left at the UA default
   (middle) - fine for a row where every cell is one line, but several dashboard tables have one cell
   that wraps to several lines (share name + news + source badges) next to plain one-line numeric
   cells; middle-aligning those numbers against a much taller neighbour reads as "drifted"/misaligned.
   top-aligning + letting long unbroken tokens (isin codes, badge labels) wrap instead of forcing the
   column wider fixes both the misalignment and the occasional cell content pushing past the card. */
.ss-table-minimal td, .ss-table-minimal th {
    padding: 3px 6px;
    border-bottom: 0.5px solid rgb(247, 243, 243);
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Headers are short static labels (multi-word ones already control their own break point with an
   explicit <br/>, eg. "Cost<br/>Rate") - overflow-wrap:anywhere from the rule above is only meant for
   unpredictable body data, but applied to a header in a narrow column it was breaking a plain word
   ("Payment") mid-letter ("Paymen"/"t"). Reset back to normal so headers only ever wrap on a real
   space or an explicit <br/>. */
.ss-table-minimal th {
    font-weight: bold;
    background-color: whitesmoke;
    padding: 3px 6px;
    vertical-align: middle;
    overflow-wrap: normal;
    word-break: normal;
}

/* ================================================================================================== 
   StanSoft Shortcut classes *================================== 
================================================================================================== */

/* alignment  */
.al-right {
    text-align:right;
}

.al-left {
    text-align:left;
}

/* ============================================================== */
/* ss-colors  */
/* ============================================================== */
.ss-red {
    color: red;
}
.ss-green {
    color: green;
}

/* ============================================================== */
/* Utility classes
   Some have been picked from fontawesome.css and names modified for ss
/* ============================================================== */
.ss-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%
}

.ss-2x {
    font-size: 2em
}

.ss-3x {
    font-size: 3em
}

.ss-4x {
    font-size: 4em
}

.ss-5x {
    font-size: 5em
}

.ss-pull-left {
    float: left
}

.ss-pull-right {
    float: right
}

.ss-spin {
    -webkit-animation: ss-spin 2s infinite linear;
    animation: ss-spin 2s infinite linear
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

.ss-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.ss-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.ss-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.ss-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.ss-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1)
}


@-webkit-keyframes ss-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes ss-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}


/* ==================================================================================================
 StanSoft Media Queries
==================================================================================================*/ 
@media screen {
    .printOnly { display:none }
}

@media print {
    .screenOnly { display:none }
}

/* ==================================================================================================
  StanSoft Components
==================================================================================================*/ 

/* SSTAB Class */
.sstab {
    /* margin-bottom: 1rem;*/
}

/* .sstab-buttons {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    margin-bottom: rem;
} */

.sstab-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /*margin-bottom: rem;*/
}

.sstab-button {
    background: #e5e7eb;
    color: #374151;
}

.sstab-button.active {
    background: #2563eb;
    color: white;
}

.sstab-content {
    display: none;
    /* background: white; */
    /*padding: 1rem;*/
    padding:0px;
    margin:0px;
 /*   
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
*/    
}

.sstab-content.active {
    display: block;
}

.rolebuttonlink:focus {
    outline: 2px solid #005FCC;
    outline-offset: 2px;
}

/* Modern browsers also support :focus-visible, which only shows
   the ring for keyboard focus, not mouse clicks � cleaner UX */
.rolebuttonlink:focus-visible {
    outline: 2px solid #005FCC;
    outline-offset: 2px;
}

/* CSS override WCAG compliant*/
.btn-success {
    background-color: #2E7D32;
    border-color: #2E7D32;
    color: #FFFFFF;
}

.nav-tabs > li > a {
    color: #666666;
}

/* ==================================================================================================
   SS-SHELL : desktop application shell layout   (added 03-2026 for the Bootstrap 5 / SmartAdmin-removal
   migration, Step 3). Replaces the SmartAdmin shell: fixed left sidebar + header + tabbed iframe
   content. Works with the server nav markup from getNAVhtml:
     <nav><ul><li><a class="menuitem" url=".."><span class="menu-item-parent"><i class="fa .."></i> .. </span></a>[<ul>..children..</ul>]</li>
   Behaviour (accordion / tab switching / layout toggles) lives in js/ss-shell.js.
================================================================================================== */
:root {
    --ss-sidebar-width: 264px;
    --ss-sidebar-bg: #ffffff;
    --ss-sidebar-fg: #333333;
    --ss-sidebar-border: #dee2e6;
    --ss-sidebar-hover: var(--brand-50);
    --ss-accent: var(--brand-500);
    /* Shared by .login-info and #header so their border-bottoms meet at the exact same height
       instead of the sidebar/header seam stepping by a couple of px where they join. */
    --ss-topbar-height: 55px;

    /* Brand palette (shared with custom/login.swc) */
    --brand-50:  #eef6fb;
    --brand-100: #d6e9f4;
    --brand-200: #aed3e9;
    --brand-300: #7fb8d9;
    --brand-400: #519cc7;
    --brand-500: #2d82b5;
    --brand-600: #246a96;
    --brand-700: #1d5578;
    --brand-800: #18445f;
    --brand-900: #13374d;
}

html, body { height: 100%; }

/* Shell typography: Inter (Google Fonts CDN, loaded by maintabs.swc). Applied to the sidebar + header
   for clean, legible menu/labels; -webkit-font-smoothing for crisp rendering. */
.ss-shell,
.ss-shell #header,
.ss-shell #left-panel {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Sidebar menu: slightly tighter, medium weight for scannability */
.ss-shell #left-panel nav a.menuitem { font-weight: 500; letter-spacing: .1px; }
.ss-shell #left-panel nav li ul a.menuitem { font-weight: 400; }
/* Header brand: keep bold */
.ss-shell #header #logo { font-weight: 700; letter-spacing: .2px; }

/* ---- Sidebar --------------------------------------------------------------------------------- */
.ss-shell #left-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ss-sidebar-width);
    background: var(--ss-sidebar-bg);
    color: var(--ss-sidebar-fg);
    border-right: 1px solid var(--ss-sidebar-border);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1030;
    /* Flex column: nav grows/scrolls internally, the SharePro footer stays pinned at the bottom
       as a normal-flow child instead of its old position:fixed hack (see .ss-sidebar-footer). */
    display: flex;
    flex-direction: column;
}
/* The nav fills whatever space #login-info + the footer don't use, and scrolls internally if the
   menu is taller than that (it used to be overflow-y:hidden, silently clipping overflow content). */
.ss-shell #left-panel .ss-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 10px;
}
/* A normal-flow flex child now (was position:fixed to the viewport) so it always travels with the
   sidebar - including when the accessibility widget repositions #left-panel, which it has no way to
   do for a separately-fixed nested element. */
.ss-shell #left-panel .ss-sidebar-footer {
    flex: 0 0 auto;
    padding: 10px 12px 14px 20px;
    border-top: 1px solid var(--ss-sidebar-border);
}

/* Main area sits to the right of the fixed sidebar */
.ss-shell #main { margin-left: var(--ss-sidebar-width); }

/* Sidebar collapse: slides fully off-screen (not a narrow icon rail - tried that, reverted per
   request: closing the sidebar should show nothing of it, not a strip of icons). */
.ss-shell #left-panel { transition: transform .2s ease; }
.ss-shell #main { transition: margin-left .2s ease; }
.ss-shell.ss-nav-collapsed #left-panel { transform: translateX(-100%); }
.ss-shell.ss-nav-collapsed #main { margin-left: 0; }

/* Collapse toggle button (injected by js/ss-shell.js). Pinned to the sidebar's right edge so it
   stays visible when the sidebar is collapsed. Replaces the old header top-right collapse control. */
.ss-nav-toggle {
    position: fixed;
    top: 18px;
    left: calc(var(--ss-sidebar-width) - 35px);
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ss-sidebar-border);
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1040;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    transition: left .2s ease;
}
.ss-nav-toggle:hover { background: var(--ss-sidebar-hover); border-color: var(--brand-300); color: var(--brand-700); }
.ss-nav-toggle i { transition: transform .2s ease; }
.ss-shell.ss-nav-collapsed .ss-nav-toggle { left: 8px; }
.ss-shell.ss-nav-collapsed .ss-nav-toggle i { transform: rotate(180deg); }

/* The header's top-right collapse button ("#hide-menu", the reorder icon) is replaced by the
   sidebar toggle above. This was already supposed to be hidden, but a less-specific `display:none`
   here lost to the higher-specificity `.btn-header { display: inline-flex }` rule below (both are
   1-id selectors, but that rule has more classes) - so it kept rendering. `!important` fixes that. */
.ss-shell #hide-menu { display: none !important; }

/* ---- Sidebar user info ----------------------------------------------------------------------- */
/* min-height (not a hard height) matching #header's --ss-topbar-height keeps the two border-bottoms
   meeting exactly for the common one-line-name case, but still lets the row grow for a long name
   that wraps to 2 lines (see .fs-6 below) instead of clipping it.
   Right padding is widened to 46px to reserve clear space for .ss-nav-toggle (position:fixed at
   sidebar_width - 35px, so its left edge doesn't move with this content) - without it, a long enough
   name/chevron would run straight under the toggle button instead of stopping short of it. */
.ss-shell .login-info {
    height: var(--ss-topbar-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 8px 46px 8px 12px;
    border-bottom: 1px solid var(--ss-sidebar-border);
    overflow: hidden;
}
.ss-shell .login-info img.online { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
/* The actual flex container that needs to shrink-to-fit is 3 levels below .login-info's own flex
   child (<span> > <ul class="header-dropdown-list"> > <li> > .userdropdown) - none of those
   intermediate wrappers had a width/min-width constraint of their own, so the row's available width
   was never reaching .fs-6 below; it just grew to whatever the name's natural content width was and
   got clipped by #left-panel's overflow-x:hidden whenever that ran past the sidebar edge (which is
   what put the toggle button visually on top of the tail of a long name). */
.ss-shell .login-info > span { display: flex; flex: 1 1 auto; min-width: 0; }
.ss-shell .login-info .header-dropdown-list,
.ss-shell .login-info .header-dropdown-list > li { width: 100%; min-width: 0; }
.ss-shell .login-info .userdropdown { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 4px; border-radius: 10px; }
.ss-shell .login-info .userdropdown:hover { background: var(--brand-50); }
/* Bootstrap auto-adds a small triangle after any .dropdown-toggle - this element already carries its
   own FontAwesome angle-down icon, so Bootstrap's version was rendering a second, redundant caret
   right next to it. */
.ss-shell .login-info .userdropdown.dropdown-toggle::after { display: none; }
/* Old SmartAdmin-era rule (custom/custom.css: ".smart-style-2 .login-info a span { width:80% }") is
   still active - <body> still carries the smart-style-2 skin class - and was stretching the name
   span to 80% of the row. Overridden below regardless.
   Rev: .login-info is now a hard `height` (not min-height), so it can never grow past the header's
   height regardless of name length - that means this can't be "wrap to as many lines as needed"
   any more (a name long enough to need a 3rd line would get clipped by the row's overflow:hidden,
   mid-character, with no ellipsis). -webkit-line-clamp caps it at exactly 2 lines with a proper "..."
   instead, which is what actually guarantees the sidebar/header seam lines up for every name, not
   just the ones short enough to happen to fit. */
.ss-shell .login-info .userdropdown .fs-6 {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Bootstrap's .fs-6 is 1.25rem (20px) - too big to fit a longer name in the ~138px this column
       actually has (sidebar width, minus the avatar/gap/chevron/toggle-reservation) within 2 lines.
       At 0.8rem, a short name ("Kumar Avinash") stays on one line and a long one
       ("Ashiwini Kumar Tripathi") wraps to a much more reasonable two. */
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-800, #18445f);
}
.ss-shell .login-info .ss-user-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Left-nav menu --------------------------------------------------------------------------- */
.ss-shell nav ul { list-style: none; margin: 0; padding: 0; }
/* Style ALL nav links (not just a.menuitem) so server items that omit the class - e.g. the Re-KYC
   sub-items - are styled uniformly instead of rendering "cracked". */
.ss-shell nav li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin: 2px 10px;
    border-radius: 8px;
    color: var(--ss-sidebar-fg);
    text-decoration: none;
    white-space: normal;   /* long labels wrap to a second line instead of clipping/overflowing */
    transition: background .12s ease, color .12s ease;
}
.ss-shell nav li a:hover { background: var(--ss-sidebar-hover); color: var(--brand-700); }
.ss-shell nav li a:hover .menu-item-parent > i { color: var(--brand-600); }
/* Persistent highlight on whichever branch is currently expanded, so the selected section stays
   visually marked even after the hover state clears (matches the accordion behaviour in ss-shell.js). */
.ss-shell nav li.ss-open > a {
    background: var(--brand-50);
    color: var(--brand-700);
}
.ss-shell nav li.ss-open > a .menu-item-parent > i { color: var(--brand-600); }
.ss-shell nav li a .menu-item-parent { display: flex; align-items: center; width: 100%; }
/* Fixed-width icon column so every row's label lines up uniformly (neutralise fa-pull-left float) */
.ss-shell nav li a .menu-item-parent > i {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 1.4em;
    width: 1.4em;
    text-align: center;
    color: var(--brand-500);
    transition: color .12s ease;
}
/* Label uses the remaining (wider) sidebar width instead of the server's inline width:120px */
.ss-shell nav li a .menu-item-parent > span { flex: 1 1 auto; width: auto !important; }

/* Submenus: animated expand/collapse. Collapsed by default (max-height:0); js/ss-shell.js sets the
   exact pixel height on the <li>.ss-open toggle so the transition is tight. */
.ss-shell nav li > ul {
    background: transparent;
    border-left: 2px solid var(--ss-sidebar-border);
    margin-left: 22px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
}
.ss-shell nav li ul a {
    font-size: 13px;
}
/* Caret indicator on parent items (a <li> that contains a child <ul>) */
.ss-shell nav li:has(> ul) > a::after {
    content: "\f107";                       /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 12px;
    opacity: .6;
    transition: transform .25s ease;
}
.ss-shell nav li.ss-open:has(> ul) > a::after { transform: rotate(180deg); color: var(--brand-600); }  /* animated caret */

/* ---- Header bar ------------------------------------------------------------------------------ */
.ss-shell #header {
    min-height: var(--ss-topbar-height);
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid var(--ss-sidebar-border);
    padding: 6px 12px;
}
/* Neutralise BS5 .row gutter negative margins inside the shell (they caused horizontal overflow) */
.ss-shell #header .row,
.ss-shell #tabs .row,
.ss-shell #content > .row { margin-left: 0; margin-right: 0; }
.ss-shell #header .row { align-items: center; }
/* Contain the floated (pull-right) controls inside each header column */
.ss-shell #header [class^="col-"],
.ss-shell #header [class*=" col-"] { display: flow-root; }
/* Right-side controls column: lay the buttons (Quick Access / mega-menu, account year, fullscreen,
   logout, collapse) out as one right-aligned, vertically-centred flex row so they stop misaligning. */
.ss-shell #header .row > [class*="col-"]:has(.btn-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.ss-shell #header .row > [class*="col-"]:has(.btn-header) .btn-header { margin: 0; display: inline-flex; align-items: center; }
/* The buttons themselves sit inside one shared wrapper (div.pull-right); make that wrapper the
   actual flex row (its children ignore `float` once they become flex items) so every control -
   icon buttons, the account-year link, the Quick Access button - lines up on one baseline instead
   of stacking via mismatched float heights. */
.ss-shell #header .row > [class*="col-"] > div.pull-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
/* Header brand / logo */
.ss-shell #header #logo { font-size: 1.25rem; font-weight: 700; }
/* Header action buttons (SmartAdmin .btn-header) + dropdown lists -> inline, right-aligned */
.ss-shell #header .btn-header,
.ss-shell #header .header-dropdown-list { display: inline-block; vertical-align: middle; list-style: none; margin: 0 4px; padding: 0; }
.ss-shell #header .header-dropdown-list > li { display: inline-block; }
.ss-shell #header .btn-header a,
.ss-shell #header .header-dropdown-list a {
    text-decoration: none;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    transition: background .12s ease;
}
/* The icons/labels inside these buttons carry an inline `color:...!important` (theme-driven via
   m.cHeaderFontColor), which no external stylesheet rule can override - so the hover affordance is
   a background pill behind the icon rather than a text-color change.
   :not(.mega-menu-link) - the Quick Access widget's own container also carries .btn-header (see
   maintabs.swc), which was pulling every link *inside* its dropdown (Contract Notes, Ledger, ...)
   into this hover too, no matter what megaMenu.comp's own <style> said - #header gives this rule an
   ID in its specificity, which beats a plain class selector regardless of source order. The mega
   menu owns its own hover/no-hover styling entirely in its own <style> block now; #hide-menu,
   #fullscreen and #logout (the other plain .btn-header icon buttons) are unaffected by the
   exclusion since none of them carry .mega-menu-link. */
.ss-shell #header .btn-header a:hover:not(.mega-menu-link),
.ss-shell #header .header-dropdown-list a:hover { background: var(--brand-50); }
/* Font for other text-bearing header dropdown controls (eg. account-year label). Quick Access's own
   font is fully owned by megaMenu.comp's <style> now - it used to be forced to 14px/500 from here
   (an ID-scoped selector beats megaMenu.comp's plain class one), which is why changes made directly
   in that file kept appearing to "not take". */
.ss-shell #header .header-dropdown-list a span {
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
}

/* BS3 float helpers (removed in Bootstrap 5) - shimmed for the shell and legacy page markup */
.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* ---- Tab strip (#maintabs) ------------------------------------------------------------------- */
/* The tab markup is BS3-era (<li><a>) without BS5 .nav-item/.nav-link, and is generated both
   server-side and by smartadmin_loadUrlInNewTab; style it here rather than changing that markup. */
.ss-shell #maintabs {
    border-bottom: 1px solid var(--ss-sidebar-border);
    padding-left: 6px;
    margin: 0;
    flex-wrap: wrap;
}
.ss-shell #maintabs > li { position: relative; margin-bottom: -1px; }
.ss-shell #maintabs > li > a {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 3px;
    color: #495057;
    text-decoration: none;
    background: #f8f9fa;
    border: 1px solid var(--ss-sidebar-border);   /* thin gray border on inactive tabs */
    border-bottom-color: transparent;             /* bottom merges with the strip line */
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.ss-shell #maintabs > li > a:hover { background: var(--brand-50); border-color: var(--brand-200) var(--brand-200) transparent; color: var(--brand-700); }
.ss-shell #maintabs > li.active > a {
    color: var(--brand-800);
    font-weight: 700;
    background: #fff;
    border-color: var(--ss-sidebar-border) var(--ss-sidebar-border) #fff;
    box-shadow: inset 0 -2px 0 var(--brand-500);   /* brand accent underline on the active tab */
}

/* ---- Dropdown menus -------------------------------------------------------------------------- */
/* The user/header dropdowns carry SmartAdmin BS3 content (a .ssMenuFade wrapper, <li class="divider">
   and <a class="padding-5"> links) inside a Bootstrap 5 .dropdown-menu, so the items need styling.
   BS5 handles show/hide + positioning via data-bs-toggle="dropdown" for these - EXCEPT the sidebar's
   own .login-info .userdropdown, which was getting clipped by #left-panel's overflow-y:auto (Popper
   positions via position:absolute, which doesn't escape a scrollable ancestor's clip region) and now
   uses a small custom fixed-position toggle instead (js/ss-shell.js). It still reuses this exact same
   .dropdown-menu/.show CSS for the actual open/close + all the styling below - only how its position
   and click-to-open are driven is different. */
.ss-shell .header-dropdown-list { list-style: none; margin: 0; padding: 0; }
.ss-shell .header-dropdown-list > li { position: relative; }

/* Account-year button: thin grey border to match the Quick Access button. */
.ss-shell .ss-year-btn {
    border: 1px solid var(--ss-sidebar-border);
    border-radius: .375rem;
    padding: .375rem .75rem;
}

.ss-shell .dropdown-menu { padding: .3rem 0; font-size: .9rem; border-radius: 12px; overflow: hidden; border-color: var(--ss-sidebar-border); }
.ss-shell .dropdown-menu .ssMenuFade { display: block; }
.ss-shell .dropdown-menu li { list-style: none; }
.ss-shell .dropdown-menu li > a,
.ss-shell .dropdown-menu a.padding-5,
.ss-shell .dropdown-menu a.padding-10 {
    display: block;
    padding: .5rem 1rem;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
}
.ss-shell .dropdown-menu li > a:hover { background: var(--brand-50); color: var(--brand-700); }
.ss-shell .dropdown-menu i { width: 1.25em; text-align: center; color: #64748b; }
.ss-shell .dropdown-menu li > a:hover i { color: var(--brand-600); }
/* BS3 .divider -> BS5-style divider line */
.ss-shell .dropdown-menu .divider {
    height: 0;
    margin: .3rem 0;
    border-top: 1px solid #e9ecef;
    overflow: hidden;
}
/* Welcome / info block at the top of the user menu: tinted so it reads as a distinct "who you are"
   header above the plain action list below it. */
.ss-shell .dropdown-menu .padding-5,
.ss-shell .dropdown-menu .padding-10 { padding: .75rem 1rem; }
.ss-shell .dropdown-menu > .ssMenuFade > .padding-5:first-child { background: var(--brand-50); color: var(--brand-800); }

/* The user menu lives inside the fixed, overflow-clipped sidebar. It's widened to fill the sidebar
   (minus a small margin) rather than the old fixed 278px - that left a ~70px gap on the right where
   the underlying nav items' own expand-carets were still visible, showing through next to every
   dropdown row and reading as if each profile menu item had its own stray chevron. */
.ss-shell #left-panel .dropdown-menu {
    width: calc(var(--ss-sidebar-width) - 24px) !important;
    max-width: calc(var(--ss-sidebar-width) - 24px);
    white-space: normal;
}

/* ---- Tabbed iframe content ------------------------------------------------------------------- */
.ss-shell #tabContents > .tab-pane { display: none; }
.ss-shell #tabContents > .tab-pane.active { display: block; }

/* ==================================================================================================
   SS-CONFIRM-MODAL : $.SmartMessageBox (js/sa-compat.js) - the confirm/prompt dialog used for
   Logout, Reset Settings, etc. Full custom layout (centered icon badge, big title, side-by-side
   actions) generated directly in the JS template, rather than reusing Bootstrap's modal-header/
   modal-body/modal-footer bars - only .modal / .modal-dialog / .modal-content / .btn-close are still
   plain Bootstrap (so bootstrap.Modal, the backdrop and hidden.bs.modal all keep working unchanged).
================================================================================================== */
.ss-confirm-modal .ss-confirm-content {
    border: none;
    border-radius: 20px;
    padding: 36px 28px 24px;
    text-align: center;
    box-shadow: 0 24px 60px -12px rgba(19, 55, 77, .35);
}
.ss-confirm-modal .ss-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: .5;
    transition: background-color .12s ease, opacity .12s ease;
}
/* Close (X): Bootstrap's icon color is baked into an SVG data-uri, not easily recolored without a
   fragile CSS filter - a soft red hover halo behind it gives the same "this dismisses/cancels"
   affordance without fighting that. */
.ss-confirm-modal .ss-confirm-close:hover,
.ss-confirm-modal .ss-confirm-close:focus {
    opacity: 1;
    background-color: rgba(220, 38, 38, .14);
    box-shadow: none;
}
.ss-confirm-modal .ss-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand-50, #eef6fb);
    color: var(--brand-600, #246a96);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.ss-confirm-modal .ss-confirm-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-800, #18445f);
    margin: 0 0 8px;
}
.ss-confirm-modal .ss-confirm-text {
    font-size: .9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 26px;
}
.ss-confirm-modal .ss-confirm-input .form-control,
.ss-confirm-modal .ss-confirm-input .form-select {
    text-align: left;
    margin-top: 10px;
}
.ss-confirm-modal .ss-confirm-actions {
    display: flex;
    gap: 10px;
}
.ss-confirm-modal .ss-confirm-btn {
    flex: 1 1 0;
    min-height: 46px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .92rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ss-confirm-modal .ss-confirm-btn-secondary {
    background: #f5f7fa;
    border-color: #e2e8f0;
    color: #475569;
}
.ss-confirm-modal .ss-confirm-btn-secondary:hover { background: #eef1f5; }
.ss-confirm-modal .ss-confirm-btn-primary {
    background: var(--brand-500, #2d82b5);
    color: #fff;
}
.ss-confirm-modal .ss-confirm-btn-primary:hover,
.ss-confirm-modal .ss-confirm-btn-primary:focus {
    background: var(--brand-600, #246a96);
}

/* ==================================================================================================
   SS-AI-PANEL : right-side "Ask <Assistant>" slide-out (js/ss-ai-panel.js). UI-only prototype right
   now - no backend/LLM wired up, see the separate RAG/backend design discussion. Mirrors the existing
   left-sidebar push behaviour (.ss-shell.ss-nav-collapsed #main above) but on the right edge instead:
   #ss-ai-panel itself is fixed and slides in/out via transform; #main's margin-right (not the panel)
   is what actually pushes the page content over, exactly like #main's margin-left does for the
   sidebar. #header is a child of #main (see maintabs.swc), so it narrows along with everything else
   automatically - no separate header-specific rule needed.
================================================================================================== */
:root {
    --ss-ai-panel-width: 380px;
}

.ss-shell #ss-ai-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--ss-ai-panel-width);
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--ss-sidebar-border);
    box-shadow: -8px 0 24px -12px rgba(15, 42, 61, .25);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s ease;
}
.ss-shell.ss-ai-open #ss-ai-panel { transform: translateX(0); }
.ss-shell #main { transition: margin-left .2s ease, margin-right .2s ease; }
.ss-shell.ss-ai-open #main { margin-right: var(--ss-ai-panel-width); }

@media (max-width: 767.98px) {
    .ss-shell #ss-ai-panel { width: 100%; }
    .ss-shell.ss-ai-open #main { margin-right: 0; }   /* full-screen panel on small screens instead of squeezing #main to nothing */
}

.ss-ai-panel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ss-sidebar-border);
}
.ss-ai-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--brand-800, #18445f);
    flex: 1 1 auto;
}
.ss-ai-panel-title i { color: var(--brand-500); }
.ss-ai-panel-close {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}
.ss-ai-panel-close:hover { background: var(--brand-50); color: var(--brand-700); }

.ss-ai-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 16px;
}
.ss-ai-greeting { margin-bottom: 18px; }
.ss-ai-greeting-hello { display: block; font-size: 1.3rem; font-weight: 700; color: #0f2942; }
.ss-ai-greeting-sub { display: block; font-size: 1rem; color: var(--brand-600); font-weight: 600; margin-top: 2px; }

.ss-ai-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ss-ai-chip {
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    font-size: .85rem;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color .12s ease;
}
.ss-ai-chip:hover { background: var(--brand-100); }

/* Chat bubbles appended by ss-ai-panel.js once the user actually sends something */
.ss-ai-msg { margin-top: 14px; max-width: 92%; font-size: .88rem; line-height: 1.4; }
.ss-ai-msg-user {
    margin-left: auto;
    background: var(--brand-500);
    color: #fff;
    padding: 8px 14px;
    border-radius: 14px 14px 2px 14px;
}
.ss-ai-msg-assistant {
    background: #f1f5f9;
    color: #1e293b;
    padding: 8px 14px;
    border-radius: 14px 14px 14px 2px;
}
/* Placeholder bubble shown while the backend call is in flight (see ss-ai-panel.js's sendMessage) */
.ss-ai-msg-pending { color: #94a3b8; font-style: italic; }

.ss-ai-panel-footer {
    flex: 0 0 auto;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--ss-sidebar-border);
}
.ss-ai-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f7fa;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 6px 6px 6px 16px;
}
.ss-ai-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: .88rem;
    outline: none;
}
.ss-ai-send {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--brand-500);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-ai-send:hover { background: var(--brand-600); }
.ss-ai-disclaimer { margin-top: 8px; font-size: .7rem; color: #94a3b8; text-align: center; }