/* ==========================================================================
   red-radius admin themes + v2 shell
   - Theme = html[data-theme="light|noc|plum|zinc|oled"] (per user, users.theme)
   - html.rr-dark is added for every theme except light: section 5 re-colours
     Metronic 7 / Bootstrap 4 / plugins for dark themes.
   - The v2 shell (body.rr-shell) = icon sidebar + flyout panels + top bar.
   Loaded after style.bundle and custom.css; logical properties keep RTL/LTR.
   ========================================================================== */

/* ---------- 1. Theme tokens ---------- */
:root,
html[data-theme="light"] {
    --bg: #F2F3F7; --aside: #FFFFFF; --aside-ic: #A1A5B7; --aside-ic-on: #F50057; --aside-on-bg: #FFF0F5;
    --head: #FFFFFF; --card: #FFFFFF; --card-2: #F3F6F9; --line: #EBEDF3; --hover: #F3F6F9;
    --text: #181C32; --text-2: #3F4254; --muted: #7E8299;
    --primary: #3699FF; --primary-fg: #FFFFFF; --primary-soft: #E1F0FF; --link: #663259;
    --ok: #1BC5BD; --ok-soft: #C9F7F5; --warn: #FFA800; --warn-soft: #FFF4DE; --bad: #F64E60; --bad-soft: #FFE2E5; --info: #8950FC; --info-soft: #EEE5FF;
    --tile-ic: #3699FF;
    --fin-a: linear-gradient(135deg, #1bc5bd 0%, #0f9d8f 100%); --fin-a-fg: #FFFFFF; --fin-a-val: #FFFFFF; --fin-a-line: transparent;
    --fin-b: linear-gradient(135deg, #f64e60 0%, #cc2f45 100%); --fin-b-fg: #FFFFFF; --fin-b-val: #FFFFFF; --fin-b-line: transparent;
    --fin-c: linear-gradient(135deg, #3699ff 0%, #1b6fd8 100%); --fin-c-fg: #FFFFFF; --fin-c-val: #FFFFFF; --fin-c-line: transparent;
    --fin-d: linear-gradient(135deg, #ffa800 0%, #e08600 100%); --fin-d-fg: #FFFFFF; --fin-d-val: #FFFFFF; --fin-d-line: transparent;
    --fin-chip: rgba(255, 255, 255, .2);
    --input: #FFFFFF;
    --shadow: 0 0 30px 0 rgba(82, 63, 105, .06);
    --pop-shadow: 0 12px 32px -8px rgba(24, 28, 50, .18);
    --texture: none;
    --glow: none;
}
html[data-theme="noc"] {
    --bg: #0A0F1A; --aside: #0D1422; --aside-ic: #6F7E9C; --aside-ic-on: #FF4D8D; --aside-on-bg: rgba(255, 77, 141, .10);
    --head: #0D1422; --card: #111A2B; --card-2: #16213A; --line: #1F2B44; --hover: #18243D;
    --text: #EAF0FA; --text-2: #B4C0D6; --muted: #7D8CAA;
    --primary: #4C9DFF; --primary-fg: #06101F; --primary-soft: rgba(76, 157, 255, .14); --link: #7DB8FF;
    --ok: #2EE6C8; --ok-soft: rgba(46, 230, 200, .12); --warn: #FFC24B; --warn-soft: rgba(255, 194, 75, .12); --bad: #FF5C73; --bad-soft: rgba(255, 92, 115, .12); --info: #A78BFA; --info-soft: rgba(167, 139, 250, .14);
    --tile-ic: #4C9DFF;
    --fin-a: linear-gradient(135deg, rgba(46, 230, 200, .16), rgba(46, 230, 200, .03)); --fin-a-fg: #A9F5E8; --fin-a-val: #2EE6C8; --fin-a-line: rgba(46, 230, 200, .35);
    --fin-b: linear-gradient(135deg, rgba(255, 92, 115, .16), rgba(255, 92, 115, .03)); --fin-b-fg: #FFC2CB; --fin-b-val: #FF5C73; --fin-b-line: rgba(255, 92, 115, .35);
    --fin-c: linear-gradient(135deg, rgba(76, 157, 255, .16), rgba(76, 157, 255, .03)); --fin-c-fg: #C6DEFF; --fin-c-val: #4C9DFF; --fin-c-line: rgba(76, 157, 255, .35);
    --fin-d: linear-gradient(135deg, rgba(255, 194, 75, .16), rgba(255, 194, 75, .03)); --fin-d-fg: #FFE3AE; --fin-d-val: #FFC24B; --fin-d-line: rgba(255, 194, 75, .35);
    --fin-chip: rgba(255, 255, 255, .07);
    --input: #0D1422;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 12px 28px -18px rgba(0, 0, 0, .8);
    --pop-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
    --texture: linear-gradient(rgba(76, 157, 255, .045) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(76, 157, 255, .045) 1px, transparent 1px) 0 0 / 28px 100%;
    --glow: 0 0 12px;
}
html[data-theme="plum"] {
    --bg: #110C13; --aside: #160F19; --aside-ic: #957F9F; --aside-ic-on: #FF2E7A; --aside-on-bg: rgba(255, 46, 122, .13);
    --head: #160F19; --card: #1A131E; --card-2: #221828; --line: #2D2134; --hover: #261C2D;
    --text: #F5EDF7; --text-2: #CDBCD3; --muted: #957F9F;
    --primary: #FF2E7A; --primary-fg: #FFFFFF; --primary-soft: rgba(255, 46, 122, .14); --link: #FF7AAB;
    --ok: #3DDBB7; --ok-soft: rgba(61, 219, 183, .12); --warn: #FFB547; --warn-soft: rgba(255, 181, 71, .12); --bad: #FF5470; --bad-soft: rgba(255, 84, 112, .13); --info: #C084FC; --info-soft: rgba(192, 132, 252, .14);
    --tile-ic: #FF5C98;
    --fin-a: linear-gradient(135deg, #3B1B3D 0%, #22142A 100%); --fin-a-fg: #E9D7EE; --fin-a-val: #FFFFFF; --fin-a-line: rgba(255, 46, 122, .28);
    --fin-b: linear-gradient(135deg, #6D2460 0%, #3A1435 100%); --fin-b-fg: #F7D3E6; --fin-b-val: #FFFFFF; --fin-b-line: rgba(255, 46, 122, .45);
    --fin-c: linear-gradient(135deg, #2B1D45 0%, #1C142B 100%); --fin-c-fg: #E2D6F7; --fin-c-val: #FFFFFF; --fin-c-line: rgba(192, 132, 252, .3);
    --fin-d: linear-gradient(135deg, #4A2A1A 0%, #2A1810 100%); --fin-d-fg: #F7E1CC; --fin-d-val: #FFFFFF; --fin-d-line: rgba(255, 181, 71, .3);
    --fin-chip: rgba(255, 255, 255, .09);
    --input: #160F19;
    --shadow: 0 12px 30px -20px rgba(0, 0, 0, .9);
    --pop-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
    --texture: radial-gradient(900px 380px at 85% -10%, rgba(245, 0, 87, .10), transparent 70%);
    --glow: 0 0 12px;
}
html[data-theme="zinc"] {
    --bg: #161618; --aside: #1C1C1F; --aside-ic: #8B8B94; --aside-ic-on: #F4F4F5; --aside-on-bg: #27272A;
    --head: #1C1C1F; --card: #1C1C1F; --card-2: #232327; --line: #2E2E32; --hover: #27272A;
    --text: #F4F4F5; --text-2: #D4D4D8; --muted: #8B8B94;
    --primary: #3B82F6; --primary-fg: #FFFFFF; --primary-soft: rgba(59, 130, 246, .14); --link: #60A5FA;
    --ok: #34D399; --ok-soft: rgba(16, 185, 129, .14); --warn: #FBBF24; --warn-soft: rgba(245, 158, 11, .14); --bad: #F87171; --bad-soft: rgba(239, 68, 68, .14); --info: #A78BFA; --info-soft: rgba(139, 92, 246, .14);
    --tile-ic: #A1A1AA;
    --fin-a: #1F2724; --fin-a-fg: #A7F3D0; --fin-a-val: #34D399; --fin-a-line: #2B3A34;
    --fin-b: #2A1F21; --fin-b-fg: #FECACA; --fin-b-val: #F87171; --fin-b-line: #3D2A2D;
    --fin-c: #1E2330; --fin-c-fg: #BFDBFE; --fin-c-val: #60A5FA; --fin-c-line: #2A3346;
    --fin-d: #2A2519; --fin-d-fg: #FDE68A; --fin-d-val: #FBBF24; --fin-d-line: #3D3522;
    --fin-chip: rgba(255, 255, 255, .06);
    --input: #161618;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --pop-shadow: 0 16px 36px -12px rgba(0, 0, 0, .6);
    --texture: none;
    --glow: none;
}
html[data-theme="oled"] {
    --bg: #000000; --aside: #000000; --aside-ic: #858585; --aside-ic-on: #FFFFFF; --aside-on-bg: #161616;
    --head: #000000; --card: #0A0A0A; --card-2: #141414; --line: #232323; --hover: #161616;
    --text: #FFFFFF; --text-2: #D6D6D6; --muted: #858585;
    --primary: #3B8BFF; --primary-fg: #FFFFFF; --primary-soft: rgba(59, 139, 255, .16); --link: #6AA8FF;
    --ok: #22D3B6; --ok-soft: rgba(34, 211, 182, .13); --warn: #FFB020; --warn-soft: rgba(255, 176, 32, .13); --bad: #FF4D61; --bad-soft: rgba(255, 77, 97, .14); --info: #A78BFA; --info-soft: rgba(167, 139, 250, .15);
    --tile-ic: #FFFFFF;
    --fin-a: linear-gradient(135deg, #14b8a6 0%, #0b6f66 100%); --fin-a-fg: #FFFFFF; --fin-a-val: #FFFFFF; --fin-a-line: transparent;
    --fin-b: linear-gradient(135deg, #f43f5e 0%, #a3162e 100%); --fin-b-fg: #FFFFFF; --fin-b-val: #FFFFFF; --fin-b-line: transparent;
    --fin-c: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --fin-c-fg: #FFFFFF; --fin-c-val: #FFFFFF; --fin-c-line: transparent;
    --fin-d: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); --fin-d-fg: #FFFFFF; --fin-d-val: #FFFFFF; --fin-d-line: transparent;
    --fin-chip: rgba(255, 255, 255, .18);
    --input: #0A0A0A;
    --shadow: none;
    --pop-shadow: 0 0 0 1px #262626, 0 18px 40px -12px rgba(0, 0, 0, .9);
    --texture: none;
    --glow: none;
}
html.rr-dark { color-scheme: dark; }
/* "--dk-*" exist only in dark themes: pages written with `var(--dk-card-2, #f7f8fc)` keep their exact
   light colour in the light theme and follow the theme in dark ones. */
html.rr-dark {
    --dk-card: var(--card); --dk-card-2: var(--card-2); --dk-hover: var(--hover); --dk-line: var(--line);
    --dk-text: var(--text); --dk-text-2: var(--text-2); --dk-muted: var(--muted);
    --dk-primary-soft: var(--primary-soft); --dk-ok-soft: var(--ok-soft); --dk-warn-soft: var(--warn-soft);
    --dk-bad-soft: var(--bad-soft); --dk-info-soft: var(--info-soft);
}

/* Circular reveal when switching themes (rr-shell.js drives the clip-path). */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- 2. Shell: sidebar ----------
   Wide (default): section names + pages listed inline under the open section (accordion).
   Compact (html.rr-nav-mini, desktop only): icon rail; a section opens as a panel beside it.
   The choice is remembered in localStorage (inline script in master.blade.php <head>). */
body.rr-shell {
    --rr-side: 268px;
    --rr-rail: 72px;
    --rr-panel: 264px;
    --rr-head: 62px;
    background: var(--bg);
    background-image: var(--texture);
    background-attachment: fixed;
    color: var(--text-2);
}
body.rr-shell .wrapper {
    background: transparent;
    margin: 0 !important;
    border-radius: 0;
    padding: 0;
    padding-inline-start: var(--rr-side);
    min-height: 100vh;
    transition: padding .2s ease;
}
body.rr-shell .rr-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.rr-sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 99;
    width: var(--rr-side);
    background: var(--aside);
    border-inline-end: 1px solid var(--line);
    transition: width .2s ease;
}
.rr-rail { height: 100%; display: flex; flex-direction: column; padding: 14px 12px 12px; }
.rr-brand { display: flex; align-items: center; gap: 6px; padding: 0 4px 14px; flex: 0 0 auto; }
.rr-rail-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.rr-rail-logo img { width: 34px; height: auto; flex: 0 0 auto; }
.rr-brand-name { color: var(--text); font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-collapse, .rr-rail-close {
    flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
    display: grid; place-items: center; cursor: pointer; transition: background-color .12s, color .12s;
}
.rr-collapse:hover, .rr-rail-close:hover { background: var(--hover); color: var(--text); }
.rr-collapse:focus-visible, .rr-rail-btn:focus-visible, .rr-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
html[dir="rtl"] .rr-collapse .rr-ic { transform: scaleX(-1); }
.rr-rail-close { display: none; }

.rr-rail-nav {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding: 2px 0;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rr-rail-nav::-webkit-scrollbar { width: 6px; }
.rr-rail-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.rr-sec { position: relative; width: 100%; }
.rr-rail-btn {
    position: relative; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
    display: flex; align-items: center; gap: 12px; color: var(--text-2) !important; font: inherit; font-size: 14px; font-weight: 500;
    text-align: start; text-decoration: none !important; cursor: pointer; transition: background-color .12s, color .12s;
}
.rr-rail-btn > .rr-ic:first-child { color: var(--aside-ic); }
.rr-rail-btn:hover { background: var(--hover); color: var(--text) !important; }
.rr-rail-btn:hover > .rr-ic:first-child { color: var(--text); }
.rr-rail-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-chev { width: 16px !important; height: 16px !important; color: var(--muted); transition: transform .2s ease; }
.rr-sec.is-open > .rr-rail-btn .rr-chev { transform: rotate(180deg); }
.rr-sec.is-active > .rr-rail-btn { color: var(--text) !important; font-weight: 600; }
.rr-sec.is-active > .rr-rail-btn > .rr-ic:first-child { color: var(--aside-ic-on); }
.rr-sec.is-active > a.rr-rail-btn { background: var(--aside-on-bg); }

/* inline list under an open section */
.rr-panel {
    margin: 2px 0 6px; margin-inline-start: 22px; padding: 2px 0; padding-inline-start: 12px;
    border-inline-start: 1px solid var(--line);
}
.rr-panel[hidden] { display: none; }
.rr-panel-h { display: none; }
.rr-panel-sec {
    display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 4px 10px 4px;
    font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .4px; white-space: nowrap;
}
.rr-panel-sec::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.rr-panel-h + .rr-panel-sec { margin-top: 4px; }
.rr-panel-sec + .rr-link { margin-top: 2px; }
.rr-panel-sep { height: 1px; background: var(--line); margin: 6px 10px; }
.rr-link {
    position: relative; display: block; padding: 7px 10px; border-radius: 8px; color: var(--text-2) !important; font-size: 13.5px;
    font-weight: 500; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s, color .12s;
}
.rr-link:hover { background: var(--hover); color: var(--text) !important; }
.rr-link.is-active { background: var(--primary-soft); color: var(--primary) !important; font-weight: 600; }
.rr-link.is-active::before {
    content: ""; position: absolute; inset-inline-start: -13px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--primary);
}

.rr-rail-foot { flex: 0 0 auto; display: grid; gap: 2px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); }
.rr-license-row { display: flex; align-items: center; gap: 12px; padding: 6px 12px; color: var(--muted); font-size: 12.5px; cursor: default; }
.rr-license {
    flex: 0 0 auto; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center;
    font: 700 12px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: var(--muted); background: var(--card-2);
}
.rr-license.is-warn { color: var(--warn); background: var(--warn-soft); }
.rr-license.is-bad { color: var(--bad); background: var(--bad-soft); }

/* Tooltip for the compact rail (single element positioned by rr-shell.js) */
.rr-tip {
    position: fixed; z-index: 1100; pointer-events: none; padding: 5px 10px; border-radius: 7px;
    background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translateY(-50%) scale(.96); transition: opacity .12s, transform .12s;
}
.rr-tip.is-on { opacity: 1; transform: translateY(-50%) scale(1); }
.rr-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 97; background: transparent; }

/* compact mode (desktop) */
@media (min-width: 992px) {
    html.rr-nav-mini body.rr-shell { --rr-side: var(--rr-rail); }
    html.rr-nav-mini .rr-rail { padding: 14px 0 12px; align-items: center; }
    html.rr-nav-mini .rr-brand { flex-direction: column; gap: 10px; padding: 0 0 12px; }
    html.rr-nav-mini .rr-rail-logo { flex: 0 0 auto; }
    html.rr-nav-mini .rr-brand-name, html.rr-nav-mini .rr-rail-lbl, html.rr-nav-mini .rr-chev { display: none; }
    html.rr-nav-mini .rr-collapse .rr-ic { transform: scaleX(-1); }
    html[dir="rtl"].rr-nav-mini .rr-collapse .rr-ic { transform: none; }
    html.rr-nav-mini .rr-rail-nav { align-items: center; width: 100%; }
    html.rr-nav-mini .rr-sec { display: flex; justify-content: center; }
    html.rr-nav-mini .rr-rail-btn { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 11px; }
    html.rr-nav-mini .rr-rail-btn > .rr-ic:first-child { width: 22px; height: 22px; }
    html.rr-nav-mini .rr-rail-btn[aria-expanded="true"] { background: var(--aside-on-bg); }
    html.rr-nav-mini .rr-sec.is-active > .rr-rail-btn { background: var(--aside-on-bg); }
    html.rr-nav-mini .rr-sec.is-active > .rr-rail-btn::before {
        content: ""; position: absolute; inset-inline-start: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
        background: var(--aside-ic-on); box-shadow: var(--glow) var(--aside-ic-on);
    }
    html[data-theme="zinc"].rr-nav-mini .rr-sec.is-active > .rr-rail-btn::before,
    html[data-theme="oled"].rr-nav-mini .rr-sec.is-active > .rr-rail-btn::before { box-shadow: none; }
    html.rr-nav-mini .rr-panel {
        position: fixed; top: 0; bottom: 0; inset-inline-start: var(--rr-rail); z-index: 98; margin: 0;
        width: var(--rr-panel); max-width: calc(100vw - var(--rr-rail)); border-inline-start: 0;
        background: var(--card); border-inline-end: 1px solid var(--line); box-shadow: var(--pop-shadow);
        padding: 18px 12px 24px; overflow-y: auto;
        opacity: 0; transform: translateX(-8px); transition: opacity .16s ease, transform .16s ease;
    }
    html[dir="rtl"].rr-nav-mini .rr-panel { transform: translateX(8px); }
    html.rr-nav-mini .rr-panel.is-open { opacity: 1; transform: none; }
    html.rr-nav-mini .rr-panel-h { display: block; font-size: 15px; font-weight: 700; color: var(--text); padding: 0 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
    html.rr-nav-mini .rr-link.is-active::before { display: none; }
    html.rr-nav-mini .rr-rail-foot { width: 44px; justify-items: center; }
    html.rr-nav-mini .rr-license-row { padding: 6px 0; justify-content: center; }
    html.rr-nav-mini body.rr-panel-open .rr-sidebar-backdrop { display: block; }
}

/* ---------- 3. Shell: top bar ---------- */
.rr-header {
    position: sticky; top: 0; z-index: 96; height: var(--rr-head);
    display: flex; align-items: center; gap: 10px; padding: 0 22px;
    background: var(--head); border-bottom: 1px solid var(--line);
}
.rr-burger, .rr-header-logo { display: none !important; }
.rr-header-logo img { height: 30px; width: auto; }
.rr-search {
    display: flex; align-items: center; gap: 10px; height: 40px; min-width: 230px; padding: 0 12px; flex: 0 0 auto;
    border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
    font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.rr-search:hover { border-color: var(--primary); }
.rr-search .rr-search-txt { flex: 1; text-align: start; }
.rr-search kbd { font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; padding: 2px 6px; border-radius: 5px; background: var(--card); color: var(--muted); border: 1px solid var(--line); box-shadow: none; direction: ltr; }
.rr-header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.rr-header-extra { display: flex; align-items: center; gap: 2px; }
.rr-header-extra .btn.btn-icon { width: 38px; height: 38px; border-radius: 10px; }
.rr-header-extra .btn.btn-icon:hover { background: var(--card-2) !important; }
.rr-hbtn {
    position: relative; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent;
    display: grid; place-items: center; color: var(--muted); cursor: pointer; text-decoration: none !important;
    transition: background-color .15s, color .15s;
}
.rr-hbtn:hover, .rr-hbtn[aria-expanded="true"] { background: var(--card-2); color: var(--text); }
.rr-hbtn:focus-visible, .rr-user:focus-visible, .rr-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rr-hbtn-count {
    position: absolute; top: 3px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--head);
}
.rr-user {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px; margin-inline-start: 4px;
    border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit;
}
.rr-user:hover { background: var(--card-2); }
.rr-user-av {
    width: 32px; height: 32px; border-radius: 9px; object-fit: cover; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 14px;
}
.rr-user-name { color: var(--text); font-weight: 600; font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Top-bar menu: pages of the current section (built by shell/topnav-script.blade.php) */
.rr-topnav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.rr-topnav.is-empty { flex: 1 1 auto; }
.rr-tn-link {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-2) !important; font: inherit; font-size: 13.5px; font-weight: 500;
    text-decoration: none !important; cursor: pointer; transition: background-color .12s, color .12s;
}
.rr-tn-link:hover, .rr-tn-link[aria-expanded="true"] { background: var(--card-2); color: var(--text) !important; }
.rr-tn-link.is-active { background: var(--primary-soft); color: var(--primary) !important; font-weight: 600; }
.rr-tn-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rr-tn-chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.rr-tn-dd { position: relative; flex: 0 0 auto; }
.rr-tn-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 1000; min-width: 220px; max-height: 70vh; overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--pop-shadow); padding: 6px;
}
.rr-tn-head { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 10px 10px 4px; }
.rr-tn-item { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text-2) !important; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; }
.rr-tn-item:hover { background: var(--hover); color: var(--text) !important; }
.rr-tn-item.is-active { background: var(--primary-soft); color: var(--primary) !important; font-weight: 600; }
@media (max-width: 1279.98px) {
    .rr-search { min-width: 0; width: 40px; padding: 0; justify-content: center; }
    .rr-search .rr-search-txt, .rr-search kbd { display: none; }
}

/* ---------- 3b. Header dropdowns (shell/header-menus.blade.php) ---------- */
.rr-header-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.rr-user-chev { width: 16px !important; height: 16px !important; color: var(--muted); }
.rr-pop {
    position: fixed; z-index: 1001; width: 360px; max-height: calc(100vh - 90px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--pop-shadow);
    color: var(--text-2); text-align: start;
    opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top; transition: opacity .14s ease, transform .14s ease;
}
.rr-pop.is-open { opacity: 1; transform: none; }
.rr-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.rr-pop-h b { color: var(--text); font-size: 15px; font-weight: 700; }
.rr-pop-badge { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.rr-notes { display: grid; padding: 0 6px 8px; }
.rr-note { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none !important; }
.rr-note:hover { background: var(--hover); }
.rr-note-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.rr-note-ic .rr-ic { width: 18px; height: 18px; }
.rr-note-ic.is-warn { background: var(--warn-soft); color: var(--warn); }
.rr-note-ic.is-bad { background: var(--bad-soft); color: var(--bad); }
.rr-note-ic.is-ok { background: var(--ok-soft); color: var(--ok); }
.rr-note-txt { min-width: 0; display: grid; }
.rr-note-txt b { color: var(--text-2); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-note.is-unread .rr-note-txt b { color: var(--text); font-weight: 700; }
.rr-note.is-unread::after { content: ""; margin-inline-start: auto; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.rr-note-txt small { color: var(--muted); font-size: 12px; }
.rr-pop-empty { display: grid; justify-items: center; gap: 10px; padding: 26px 16px 30px; text-align: center; }
.rr-pop-empty b { color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.rr-pop-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); color: var(--muted); }
.rr-pop-empty-ic .rr-ic { width: 24px; height: 24px; }

.rr-pop-actions { width: 340px; }
.rr-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 14px; }
.rr-qa-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px;
    border: 1px solid var(--line); border-radius: 12px; color: var(--text-2) !important; font-size: 12.5px; font-weight: 600; text-align: center;
    text-decoration: none !important; transition: background-color .12s, border-color .12s;
}
.rr-qa-item .rr-ic { width: 22px; height: 22px; color: var(--tile-ic); }
.rr-qa-item:hover { background: var(--hover); border-color: var(--primary); color: var(--text) !important; }

.rr-pop-user { width: 340px; }
.rr-me { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.rr-me-av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 20px; font-weight: 700; }
.rr-me-txt { min-width: 0; display: grid; }
.rr-me-txt b { color: var(--text); font-size: 15px; font-weight: 700; }
.rr-me-txt small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-me-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 14px; }
.rr-me-stats > div { background: var(--card-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.rr-me-stats small { color: var(--muted); font-size: 11.5px; }
.rr-me-stats b { color: var(--text); font: 600 14px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
.rr-me-stats b.is-bad { color: var(--bad); }
.rr-me-links { display: grid; padding: 6px; border-top: 1px solid var(--line); }
.rr-me-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.rr-me-link .rr-ic { width: 19px; height: 19px; color: var(--muted); }
.rr-me-link span { display: grid; }
.rr-me-link small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rr-me-link:hover { background: var(--hover); }
.rr-me-link:hover .rr-ic { color: var(--primary); }
.rr-me-keys { border-top: 1px solid var(--line); }
.rr-me-keys summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; color: var(--text); font-size: 13.5px; font-weight: 600; }
.rr-me-keys summary::-webkit-details-marker { display: none; }
.rr-me-keys summary .rr-ic { width: 19px; height: 19px; color: var(--muted); }
.rr-me-keys summary .rr-me-chev { margin-inline-start: auto; width: 16px; height: 16px; transition: transform .15s; }
.rr-me-keys[open] summary .rr-me-chev { transform: rotate(180deg); }
.rr-me-keys form { display: grid; padding: 0 8px 10px; }
.rr-me-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--text-2) !important; }
.rr-me-switch:hover { background: var(--hover); }
.rr-me-switch kbd { font: 600 10.5px 'IBM Plex Mono', ui-monospace, monospace; padding: 1px 5px; border-radius: 5px; background: var(--card-2); color: var(--muted); border: 1px solid var(--line); box-shadow: none; direction: ltr; margin-inline-start: 6px; }
.rr-me-switch input { position: absolute; opacity: 0; pointer-events: none; }
.rr-me-switch i { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: var(--line); transition: background-color .15s; }
.rr-me-switch i::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: inset-inline-start .15s; }
.rr-me-switch input:checked + i { background: var(--primary); }
.rr-me-switch input:checked + i::after { inset-inline-start: 18px; }
.rr-me-switch input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 2px; }
.rr-me-foot { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.rr-me-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; background: var(--card-2); color: var(--text-2) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.rr-me-btn .rr-ic { width: 18px; height: 18px; }
.rr-me-btn:hover { background: var(--hover); color: var(--text) !important; }
.rr-me-btn.is-bad { background: var(--bad-soft); color: var(--bad) !important; }
.rr-me-btn.is-bad:hover { background: var(--bad); color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .rr-pop { transition: none; } }

/* ---------- 3c. Polish for every page inside the shell (all themes) ---------- */
body.rr-shell, body.rr-shell button, body.rr-shell input, body.rr-shell select, body.rr-shell textarea, body.rr-shell .btn, body.rr-shell .tooltip, body.rr-shell .popover {
    font-family: "sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* page heading: page title large, breadcrumb under it */
body.rr-shell .subheader { padding: 22px 0 6px !important; }
body.rr-shell .subheader .d-flex.align-items-baseline { flex-direction: column; align-items: flex-start !important; margin: 0 !important; }
body.rr-shell .subheader .rr-page-title { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: var(--text) !important; line-height: 1.35; }
body.rr-shell .subheader .breadcrumb { margin: 0 !important; font-size: 12.5px; }
body.rr-shell .subheader .breadcrumb .breadcrumb-item a, body.rr-shell .subheader .breadcrumb .breadcrumb-item { color: var(--muted) !important; }
/* cards */
body.rr-shell .card.card-custom { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.rr-shell .card.card-custom > .card-header { min-height: 64px; padding: 0 24px; border-bottom-color: var(--line); }
body.rr-shell .card.card-custom > .card-header .card-title, body.rr-shell .card.card-custom > .card-header .card-title .card-label { font-size: 16px; font-weight: 700; color: var(--text); }
body.rr-shell .card.card-custom > .card-body { padding: 22px 24px; }
/* fields & buttons */
body.rr-shell .form-control, body.rr-shell .bootstrap-select > .dropdown-toggle, body.rr-shell .input-group-text,
body.rr-shell .select2-container--default .select2-selection--single, body.rr-shell .select2-container--default .select2-selection--multiple, body.rr-shell .custom-file-label { border-radius: 10px; }
body.rr-shell .input-group > .form-control:not(:first-child), body.rr-shell .input-group > .input-group-append > .input-group-text { border-start-start-radius: 0; border-end-start-radius: 0; }
body.rr-shell .form-control:focus { box-shadow: 0 0 0 3px var(--primary-soft); }
body.rr-shell label, body.rr-shell .col-form-label { font-weight: 500; }
body.rr-shell .btn { border-radius: 10px; font-weight: 600; }
body.rr-shell .btn.btn-sm { border-radius: 8px; }
body.rr-shell .btn.btn-icon.btn-sm, body.rr-shell .btn.btn-icon.btn-xs { border-radius: 8px; }
body.rr-shell .dropdown-menu { border-radius: 12px; }
body.rr-shell .modal-content { border-radius: 18px; }
body.rr-shell .label.label-inline { border-radius: 6px; }
/* tables */
body.rr-shell .table thead th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card-2); border-bottom-width: 1px; white-space: nowrap; }
body.rr-shell .table td { vertical-align: middle; }
body.rr-shell .table:not(.table-sm) td, body.rr-shell .table:not(.table-sm) th { padding: .8rem .75rem; }
body.rr-shell .table-bordered { border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
body.rr-shell .table-bordered th, body.rr-shell .table-bordered td { border-width: 0 0 1px 0 !important; border-color: var(--line) !important; }
body.rr-shell .table-bordered { border: 1px solid var(--line) !important; }
body.rr-shell .table-bordered tbody tr:last-child td { border-bottom-width: 0 !important; }

/* alerts (toastr): a calm card instead of a coloured block */
body.rr-shell #toast-container { top: calc(var(--rr-head) + 12px); }
body.rr-shell #toast-container > .toast, body.rr-shell #toast-container > div {
    width: 340px; opacity: 1; padding: 14px 16px; padding-inline-start: 52px; border-radius: 14px;
    background-color: var(--card) !important; background-image: none !important; color: var(--text) !important;
    border: 1px solid var(--line); box-shadow: var(--pop-shadow) !important; font-size: 13.5px; position: relative;
}
body.rr-shell #toast-container > .toast:hover { box-shadow: var(--pop-shadow) !important; }
body.rr-shell #toast-container > .toast::before {
    content: ""; position: absolute; top: 14px; inset-inline-start: 14px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--tone, var(--primary)) center / 15px no-repeat;
}
body.rr-shell #toast-container > .toast-success { --tone: var(--ok); }
body.rr-shell #toast-container > .toast-error { --tone: var(--bad); }
body.rr-shell #toast-container > .toast-warning { --tone: var(--warn); }
body.rr-shell #toast-container > .toast-info { --tone: var(--primary); }
body.rr-shell #toast-container > .toast-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body.rr-shell #toast-container > .toast-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
body.rr-shell #toast-container > .toast-warning::before, body.rr-shell #toast-container > .toast-info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
body.rr-shell #toast-container > .toast .toast-title { color: var(--text); font-weight: 700; }
body.rr-shell #toast-container > .toast .toast-message { color: var(--text-2); }
body.rr-shell #toast-container > .toast .toast-progress { background: var(--tone, var(--primary)); opacity: .6; height: 3px; }

/* ---------- 3d. Metronic duotone icons → line icons (every page inside the shell, all themes) ----------
   Each filled shape is drawn as an outline instead of a fill; the 0.3-opacity "second tone" layer stays
   as a lighter outline. Colour follows the surrounding text (currentColor) or the svg-icon-* variant.
   Only elements carrying a fill attribute are stroked, so Metronic's invisible 24×24 bounding rect is untouched. */
body.rr-shell .svg-icon { color: inherit; }
/* :not(#_):not(#__) only raises specificity above Metronic's and the dark layer's fill rules */
body.rr-shell .svg-icon svg g [fill]:not(#_):not(#__), body.rr-shell .svg-icon svg > [fill]:not(g):not(#_):not(#__) {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
body.rr-shell .svg-icon svg [opacity="0.3"], body.rr-shell .svg-icon svg [opacity=".3"] { opacity: .45; }
body.rr-shell .svg-icon.svg-icon-primary { color: var(--link) !important; }
body.rr-shell .svg-icon.svg-icon-success { color: var(--ok) !important; }
body.rr-shell .svg-icon.svg-icon-danger { color: var(--bad) !important; }
body.rr-shell .svg-icon.svg-icon-warning { color: var(--warn) !important; }
body.rr-shell .svg-icon.svg-icon-info { color: var(--info) !important; }
body.rr-shell .svg-icon.svg-icon-white { color: #fff !important; }
body.rr-shell .svg-icon.svg-icon-dark, body.rr-shell .svg-icon.svg-icon-dark-75 { color: var(--text) !important; }
body.rr-shell .svg-icon.svg-icon-muted { color: var(--muted) !important; }
/* inside nav bars and side lists the icon follows the item: muted at rest, theme colour when active/hovered */
body.rr-shell .nav .nav-link .svg-icon, body.rr-shell .navi .navi-link .svg-icon { color: var(--muted); }
/* hovered/active: follow the item's own text colour (white on Metronic's solid light-theme active,
   theme colour on the dark themes' soft active) */
body.rr-shell .nav .nav-link:hover .svg-icon, body.rr-shell .nav .nav-link.active .svg-icon,
body.rr-shell .btn.btn-hover-primary:hover .svg-icon, body.rr-shell .btn.btn-hover-primary.active .svg-icon { color: inherit !important; }
body.rr-shell .nav .nav-link:hover .nav-icon, body.rr-shell .nav .nav-link.active .nav-icon,
body.rr-shell .btn.btn-hover-primary:hover .navi-icon, body.rr-shell .btn.btn-hover-primary.active .navi-icon { color: inherit !important; }
body.rr-shell .btn.btn-primary .svg-icon, body.rr-shell .btn.btn-success .svg-icon, body.rr-shell .btn.btn-danger .svg-icon { color: inherit !important; }

/* Group headings inside page side menus (user page, prepaid card page) */
.rr-menu-sec {
    display: flex; align-items: center; gap: 8px; margin: 14px 2px 6px; font-size: 11.5px; font-weight: 700;
    color: var(--muted); letter-spacing: .3px; white-space: nowrap;
}
.rr-menu-sec::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.navi > .rr-menu-sec:first-child { margin-top: 2px; }

/* key/value list laid out in columns (e.g. prepaid card "speed info") */
.rr-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 28px; }
.rr-kv-grid > h3, .rr-kv-grid > .text-primary { grid-column: 1 / -1; }
.rr-kv-grid > .text-primary:empty { margin-bottom: 14px !important; }

/* SVG.js (ApexCharts) appends a hidden 2px measuring <svg> at left:-100%; in RTL pages that off-screen
   element makes the whole page scroll sideways on phones. Pin it so it can never widen the page. */
body > svg[id^="SvgjsSvg"] { position: fixed !important; left: 0 !important; top: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none; }

/* Theme picker */
.rr-theme { position: relative; }
.rr-theme .rr-ic-moon { display: none; }
html[data-theme="light"] .rr-theme .rr-ic-sun { display: none; }
html[data-theme="light"] .rr-theme .rr-ic-moon { display: block; }
.rr-theme-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 1000; width: 300px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--pop-shadow); padding: 8px;
}
.rr-theme-h { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px 8px; }
.rr-theme-opt {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.rr-theme-opt:hover { background: var(--hover); }
.rr-theme-opt[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); }
.rr-theme-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rr-theme-sw { flex: 0 0 auto; display: flex; width: 50px; height: 32px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.rr-theme-sw i { flex: 1; }
.rr-theme-txt { flex: 1; min-width: 0; display: grid; }
.rr-theme-txt b { color: var(--text); font-size: 13.5px; font-weight: 700; }
.rr-theme-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.rr-theme-check { color: var(--primary); visibility: hidden; }
.rr-theme-opt[aria-checked="true"] .rr-theme-check { visibility: visible; }

/* Page chrome inside the shell */
body.rr-shell .subheader { background: transparent; }
body.rr-shell .footer { background: transparent !important; }

/* ---------- 4. Shell: tablet / phone ---------- */
@media (max-width: 991.98px) {
    body.rr-shell .wrapper { padding-inline-start: 0 !important; }
    body.rr-shell { --rr-side: 280px; }
    .rr-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
    .rr-collapse { display: none; }
    html[dir="rtl"] .rr-sidebar { transform: translateX(100%); }
    body.rr-drawer-open .rr-sidebar { transform: none !important; box-shadow: var(--pop-shadow); }
    body.rr-drawer-open .rr-sidebar-backdrop { display: block; background: rgba(0, 0, 0, .45); }
    .rr-rail-close { display: grid; }
    .rr-header { padding: 0 12px; gap: 6px; }
    .rr-burger, .rr-header-logo { display: grid !important; }
    .rr-topnav { display: none; }
    .rr-search { min-width: 0; width: 40px; padding: 0; justify-content: center; }
    .rr-search .rr-search-txt, .rr-search kbd { display: none; }
    .rr-user-name, .rr-hide-sm { display: none !important; }
}
@media (max-width: 575.98px) {
    .rr-header-extra { display: none; }
    .rr-theme-menu { position: fixed; top: calc(var(--rr-head) + 6px); inset-inline: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .rr-panel, .rr-sidebar, .rr-tip { transition: none !important; }
}

/* ---------- 5. Dashboard (Modules/Users/.../dashboard/index.blade.php) ---------- */
.rr-dash { display: grid; gap: 22px; }
.rr-dash-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rr-dash-h h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.rr-fin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rr-fcard {
    position: relative; overflow: hidden; border-radius: 16px; padding: 20px 22px; min-height: 150px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px; border: 1px solid;
    transition: transform .2s ease, box-shadow .2s ease;
}
.rr-fcard:hover { transform: translateY(-3px); box-shadow: var(--pop-shadow); }
.rr-fcard.is-a { background: var(--fin-a); color: var(--fin-a-fg); border-color: var(--fin-a-line); }
.rr-fcard.is-b { background: var(--fin-b); color: var(--fin-b-fg); border-color: var(--fin-b-line); }
.rr-fcard.is-c { background: var(--fin-c); color: var(--fin-c-fg); border-color: var(--fin-c-line); }
.rr-fcard.is-d { background: var(--fin-d); color: var(--fin-d-fg); border-color: var(--fin-d-line); }
.rr-fcard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rr-fcard-lbl { font-weight: 600; font-size: 15px; }
.rr-fcard-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--fin-chip); }
.rr-fcard-ic .rr-ic { width: 22px; height: 22px; }
.rr-fcard-val { font: 600 34px/1.1 'IBM Plex Mono', ui-monospace, Menlo, monospace; direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.rr-fcard.is-a .rr-fcard-val { color: var(--fin-a-val); } .rr-fcard.is-b .rr-fcard-val { color: var(--fin-b-val); }
.rr-fcard.is-c .rr-fcard-val { color: var(--fin-c-val); } .rr-fcard.is-d .rr-fcard-val { color: var(--fin-d-val); }
html[data-theme="noc"] .rr-fcard .rr-fcard-val { text-shadow: 0 0 18px currentColor; }
.rr-fcard-cur { font-size: 16px; opacity: .8; margin-inline-start: 6px; }
.rr-fcard-foot, .rr-fcard-foot a { font-size: 12.5px; font-weight: 600; color: inherit !important; opacity: .92; }
.rr-fcard-foot a:hover { opacity: 1; text-decoration: underline; }
.rr-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--fin-chip); font-size: 11.5px; font-weight: 600; }
.rr-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: rr-live 2s infinite; }
@keyframes rr-live { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.rr-tiles-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
.rr-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.rr-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 112px; padding: 16px 8px;
    border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text-2) !important;
    font-weight: 600; font-size: 13px; text-align: center; text-decoration: none !important;
    transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.rr-tile .rr-ic { width: 28px; height: 28px; color: var(--tile-ic); stroke-width: 1.6; }
.rr-tile:hover { background: var(--hover); border-color: var(--primary); transform: translateY(-2px); color: var(--text) !important; }
html[data-theme="noc"] .rr-tile:hover { box-shadow: 0 0 0 1px var(--primary), 0 0 22px -6px var(--primary); }
@media (max-width: 1399.98px) { .rr-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .rr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .rr-fin { grid-template-columns: 1fr; } .rr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 419.98px) { .rr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-fcard-val { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .rr-live i { animation: none; } .rr-tile, .rr-fcard { transition: none; } }

/* ==========================================================================
   6. Dark layer for Metronic 7 / Bootstrap 4 / plugins (html.rr-dark)
   Bootstrap utilities and several plugins use !important, hence the same here.
   ========================================================================== */
html.rr-dark body,
html.rr-dark .wrapper,
html.rr-dark #kt_content { background-color: var(--bg); color: var(--text-2); }
html.rr-dark h1, html.rr-dark h2, html.rr-dark h3, html.rr-dark h4, html.rr-dark h5, html.rr-dark h6 { color: var(--text); }
html.rr-dark a:not([class]), html.rr-dark .text-primary, html.rr-dark a.text-hover-primary:hover, html.rr-dark .text-hover-primary:hover { color: var(--link) !important; }
/* links WITH a class but no colour of their own kept Metronic's #663259 (dark purple on dark). :where() keeps
   this at the specificity of Metronic's own `a` rule, so any class that sets a colour still wins. */
:where(html.rr-dark) a { color: var(--link); }
html.rr-dark .label.label-outline-primary { color: var(--link); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
html.rr-dark hr { border-color: var(--line); }
html.rr-dark ::selection { background: var(--primary-soft); color: var(--text); }

/* text utilities */
html.rr-dark .text-dark, html.rr-dark .text-dark-75, html.rr-dark .text-body { color: var(--text) !important; }
html.rr-dark .text-dark-65, html.rr-dark .text-dark-50 { color: var(--text-2) !important; }
html.rr-dark .text-dark-25, html.rr-dark .text-muted, html.rr-dark .text-secondary, html.rr-dark .form-text, html.rr-dark .text-gray-500, html.rr-dark .text-gray-600 { color: var(--muted) !important; }
html.rr-dark .text-success { color: var(--ok) !important; }
html.rr-dark .text-danger { color: var(--bad) !important; }
html.rr-dark .text-warning { color: var(--warn) !important; }
html.rr-dark .text-info { color: var(--info) !important; }

/* backgrounds & borders */
html.rr-dark .bg-white, html.rr-dark .bg-body { background-color: var(--card) !important; }
html.rr-dark .bg-light, html.rr-dark .bg-gray-100, html.rr-dark .bg-gray-200, html.rr-dark .bg-gray-300, html.rr-dark .bg-secondary, html.rr-dark .bg-light-dark { background-color: var(--card-2) !important; }
html.rr-dark .bg-light-primary { background-color: var(--primary-soft) !important; }
html.rr-dark .bg-light-success { background-color: var(--ok-soft) !important; }
html.rr-dark .bg-light-danger { background-color: var(--bad-soft) !important; }
html.rr-dark .bg-light-warning { background-color: var(--warn-soft) !important; }
html.rr-dark .bg-light-info { background-color: var(--info-soft) !important; }
html.rr-dark .bg-hover-light:hover, html.rr-dark .bg-hover-white:hover { background-color: var(--hover) !important; }
html.rr-dark .border, html.rr-dark .border-top, html.rr-dark .border-bottom, html.rr-dark .border-left, html.rr-dark .border-right,
html.rr-dark .border-light, html.rr-dark .border-secondary, html.rr-dark .border-gray-200, html.rr-dark .border-gray-300 { border-color: var(--line) !important; }
html.rr-dark .separator { border-color: var(--line) !important; }
html.rr-dark .shadow, html.rr-dark .shadow-sm { box-shadow: var(--shadow) !important; }

/* page chrome */
html.rr-dark .subheader .subheader-title, html.rr-dark .breadcrumb .breadcrumb-item a { color: var(--text-2); }
html.rr-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
html.rr-dark .breadcrumb.breadcrumb-dot .breadcrumb-item:after { color: var(--muted); }
html.rr-dark .footer, html.rr-dark .footer .text-dark-75 { color: var(--muted) !important; }

/* cards */
html.rr-dark .card, html.rr-dark .card.card-custom { background-color: var(--card); border-color: var(--line); box-shadow: var(--shadow); color: var(--text-2); }
html.rr-dark .card .card-header, html.rr-dark .card .card-footer { background-color: transparent; border-color: var(--line); }
html.rr-dark .card.card-custom > .card-header .card-title, html.rr-dark .card.card-custom > .card-header .card-title .card-label,
html.rr-dark .card-title { color: var(--text); }
/* Metronic decorative shapes (white SVGs) — melt them into the dark card */
html.rr-dark .card[style*="svg/shapes/abstract"] { background-blend-mode: soft-light; }
html.rr-dark .card.card-custom.bg-light, html.rr-dark .card.card-custom.bg-gray-100 { background-color: var(--card-2) !important; }

/* svg icons (Metronic duotone) */
html.rr-dark .svg-icon svg g [fill] { fill: var(--muted); }
html.rr-dark .svg-icon.svg-icon-dark svg g [fill], html.rr-dark .svg-icon.svg-icon-dark-75 svg g [fill] { fill: var(--text) !important; }
html.rr-dark .svg-icon.svg-icon-primary svg g [fill] { fill: var(--link) !important; }
html.rr-dark .svg-icon-white svg g [fill] { fill: var(--text) !important; }

/* forms */
html.rr-dark .form-control,
html.rr-dark .custom-select,
html.rr-dark textarea.form-control,
html.rr-dark select.form-control { background-color: var(--input); border-color: var(--line); color: var(--text); }
html.rr-dark .form-control:focus { background-color: var(--input); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px var(--primary-soft); }
html.rr-dark .form-control::placeholder { color: var(--muted); opacity: 1; }
html.rr-dark .form-control:disabled, html.rr-dark .form-control[readonly] { background-color: var(--card-2); color: var(--text-2); }
html.rr-dark .form-control.form-control-solid { background-color: var(--card-2); border-color: var(--card-2); color: var(--text); }
html.rr-dark .form-control.form-control-solid:focus { background-color: var(--hover); border-color: var(--hover); }
html.rr-dark select option, html.rr-dark select optgroup { background-color: var(--card); color: var(--text); }
html.rr-dark input:-webkit-autofill, html.rr-dark input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--input) inset; -webkit-text-fill-color: var(--text); }
html.rr-dark .custom-file-label { background-color: var(--input); border-color: var(--line); color: var(--muted); }
html.rr-dark .custom-file-label::after { background-color: var(--card-2); color: var(--text-2); border-color: var(--line); }
html.rr-dark .input-group-text { background-color: var(--card-2); border-color: var(--line); color: var(--text-2); }
html.rr-dark label, html.rr-dark .col-form-label { color: var(--text-2); }
html.rr-dark .checkbox > span, html.rr-dark .radio > span { background-color: var(--card-2); border-color: var(--line); }
html.rr-dark .checkbox > input:checked ~ span, html.rr-dark .radio > input:checked ~ span { background-color: var(--primary); }
html.rr-dark .checkbox > input:checked ~ span:after { border-color: var(--primary-fg); }
html.rr-dark .radio > input:checked ~ span:after { background-color: var(--primary-fg); }
html.rr-dark .checkbox.checkbox-outline > span, html.rr-dark .radio.radio-outline > span { background-color: transparent; border-color: var(--muted); }
html.rr-dark .switch input:empty ~ span:before { background-color: var(--card-2); }
html.rr-dark .switch input:checked ~ span:before { background-color: var(--primary-soft); }
html.rr-dark .switch input:checked ~ span:after { background-color: var(--primary); opacity: 1; }
html.rr-dark .dropzone { background-color: var(--card-2); border-color: var(--line); color: var(--text-2); }
html.rr-dark .bootstrap-touchspin .btn { background-color: var(--card-2) !important; border-color: var(--line) !important; color: var(--text-2) !important; }

/* bootstrap-select (used ~1100 times) */
html.rr-dark .bootstrap-select > .dropdown-toggle,
html.rr-dark .bootstrap-select > .dropdown-toggle.btn-light,
html.rr-dark .bootstrap-select > .dropdown-toggle.btn-secondary { background-color: var(--input) !important; border-color: var(--line) !important; color: var(--text) !important; }
html.rr-dark .bootstrap-select > .dropdown-toggle.bs-placeholder,
html.rr-dark .bootstrap-select > .dropdown-toggle.bs-placeholder:hover { color: var(--muted) !important; }
html.rr-dark .bootstrap-select.show > .dropdown-toggle, html.rr-dark .bootstrap-select > .dropdown-toggle:focus { border-color: var(--primary) !important; }
html.rr-dark .bootstrap-select .dropdown-menu .dropdown-item { color: var(--text-2); }
html.rr-dark .bootstrap-select .dropdown-menu .dropdown-item:hover, html.rr-dark .bootstrap-select .dropdown-menu li a:hover { background-color: var(--hover); color: var(--text); }
html.rr-dark .bootstrap-select .dropdown-menu .dropdown-item.active, html.rr-dark .bootstrap-select .dropdown-menu .selected > .dropdown-item,
html.rr-dark .bootstrap-select .dropdown-menu > li.selected > a { background-color: var(--primary-soft) !important; color: var(--primary) !important; }
html.rr-dark .bootstrap-select .dropdown-menu .dropdown-header .text, html.rr-dark .bootstrap-select .dropdown-menu .no-results { background: var(--card-2); color: var(--muted); }
html.rr-dark .bootstrap-select .bs-searchbox .form-control { background-color: var(--input); }
/* Metronic paints the chosen value and every option label #3F4254 (the light-theme text colour), which is
   unreadable on the dark dropdowns — both in the closed select and inside the open list. */
html.rr-dark .bootstrap-select > .dropdown-toggle.btn-light .filter-option,
html.rr-dark .bootstrap-select > .dropdown-toggle.btn-secondary .filter-option,
html.rr-dark .bootstrap-select > .dropdown-toggle .filter-option .bs-icon { color: var(--text); }
html.rr-dark .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option { color: var(--muted); }
html.rr-dark .bootstrap-select > .dropdown-toggle.disabled .filter-option,
html.rr-dark .bootstrap-select > .dropdown-toggle:disabled .filter-option { color: var(--text-2); opacity: .7; }
html.rr-dark .bootstrap-select .dropdown-menu.inner > li > a .text,
html.rr-dark .bootstrap-select .dropdown-menu.inner > li > a .bs-icon { color: var(--text-2); }
html.rr-dark .bootstrap-select .dropdown-menu.inner > li:hover > a .text,
html.rr-dark .bootstrap-select .dropdown-menu.inner > li:hover > a .bs-icon { color: var(--text); }
html.rr-dark .bootstrap-select .dropdown-menu.inner > li.selected > a .text,
html.rr-dark .bootstrap-select .dropdown-menu.inner > li.selected > a .bs-icon,
html.rr-dark .bootstrap-select .dropdown-menu.inner > li.active > a .text { color: inherit; }
html.rr-dark .bootstrap-select .dropdown-menu.inner > li > a .text small,
html.rr-dark .bootstrap-select .dropdown-menu.inner > li > a .check-mark { color: var(--muted); }
html.rr-dark .bootstrap-select .dropdown-menu.inner > li.disabled > a .text { color: var(--muted); opacity: .6; }
html.rr-dark .bootstrap-select .bs-actionsbox .btn, html.rr-dark .bootstrap-select .bs-donebutton .btn { background: var(--card-2) !important; color: var(--text-2) !important; border-color: var(--line) !important; }

/* select2 */
html.rr-dark .select2-container--default .select2-selection--single,
html.rr-dark .select2-container--default .select2-selection--multiple { background-color: var(--input); border-color: var(--line); }
html.rr-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.rr-dark .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--text); }
html.rr-dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
html.rr-dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--card-2); border-color: var(--line); color: var(--text); }
html.rr-dark .select2-dropdown { background-color: var(--card); border-color: var(--line); box-shadow: var(--pop-shadow); }
html.rr-dark .select2-container--default .select2-results__option { color: var(--text-2); }
html.rr-dark .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--card-2); color: var(--text); }
html.rr-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-soft); color: var(--primary); }
html.rr-dark .select2-container--default .select2-search--dropdown .select2-search__field,
html.rr-dark .select2-container--default .select2-search--inline .select2-search__field { background-color: var(--input); border-color: var(--line); color: var(--text); }

/* date / time pickers */
html.rr-dark .datepicker.dropdown-menu, html.rr-dark .datepicker-dropdown, html.rr-dark .datetimepicker,
html.rr-dark .bootstrap-timepicker-widget.dropdown-menu, html.rr-dark .daterangepicker { background-color: var(--card); border-color: var(--line); color: var(--text-2); box-shadow: var(--pop-shadow); }
html.rr-dark .datepicker table tr td, html.rr-dark .datepicker table tr th, html.rr-dark .datetimepicker table tr td, html.rr-dark .datetimepicker table tr th { color: var(--text-2); }
html.rr-dark .datepicker table tr td.old, html.rr-dark .datepicker table tr td.new, html.rr-dark .datepicker table tr td.disabled,
html.rr-dark .datetimepicker table tr td.old, html.rr-dark .datetimepicker table tr td.new { color: var(--muted) !important; }
html.rr-dark .datepicker table tr td.day:hover, html.rr-dark .datepicker table tr td.focused, html.rr-dark .datepicker .datepicker-switch:hover,
html.rr-dark .datepicker .prev:hover, html.rr-dark .datepicker .next:hover, html.rr-dark .datepicker table tr td span:hover,
html.rr-dark .datetimepicker table tr td.day:hover, html.rr-dark .datetimepicker table tr td span:hover, html.rr-dark .datetimepicker table tr th:hover { background: var(--hover) !important; color: var(--text) !important; }
html.rr-dark .datepicker table tr td.today { background: var(--warn-soft) !important; color: var(--warn) !important; }
html.rr-dark .datepicker table tr td.active, html.rr-dark .datepicker table tr td.active:hover, html.rr-dark .datepicker table tr td span.active,
html.rr-dark .datetimepicker table tr td.active, html.rr-dark .datetimepicker table tr td span.active { background: var(--primary) !important; color: var(--primary-fg) !important; }
html.rr-dark .bootstrap-timepicker-widget table td a { color: var(--text-2); }
html.rr-dark .bootstrap-timepicker-widget table td a:hover { background: var(--hover); color: var(--text); }
html.rr-dark .bootstrap-timepicker-widget table td input { background: var(--input); border-color: var(--line); color: var(--text); }
html.rr-dark .datepicker-dropdown:after, html.rr-dark .datepicker-dropdown:before,
html.rr-dark .bootstrap-timepicker-widget.dropdown-menu:after, html.rr-dark .bootstrap-timepicker-widget.dropdown-menu:before { border-bottom-color: var(--card) !important; border-top-color: var(--card) !important; }

/* tables + DataTables */
html.rr-dark .table { color: var(--text-2); }
html.rr-dark .table th, html.rr-dark .table td, html.rr-dark .table thead th,
html.rr-dark .table-bordered, html.rr-dark .table-bordered th, html.rr-dark .table-bordered td { border-color: var(--line) !important; }
html.rr-dark .table thead th, html.rr-dark .table thead td, html.rr-dark .table .thead-light th { color: var(--muted); }
/* !important: several pages pin sticky headers with `#id thead th { background: #fff }` */
html.rr-dark .table thead:not([class*="bg-"]) tr:not([class*="bg-"]) th:not([class*="bg-"]),
html.rr-dark .table thead:not([class*="bg-"]) tr:not([class*="bg-"]) td:not([class*="bg-"]) { background-color: var(--card-2) !important; }
html.rr-dark .table.table-head-custom thead th, html.rr-dark .table.table-head-custom thead tr { color: var(--muted) !important; }
html.rr-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02); }
html.rr-dark .table-hover tbody tr:hover, html.rr-dark table.table-hover tbody tr:hover,
html.rr-dark table.dataTable.table-hover tbody tr:hover { background-color: var(--hover) !important; color: var(--text); }
html.rr-dark table.dataTable tbody tr { background-color: transparent; }
/* Metronic paints every DataTables cell #3F4254 (.dataTables_wrapper .dataTable td) — invisible on dark */
html.rr-dark .dataTables_wrapper .dataTable td, html.rr-dark .table td { color: var(--text-2); }
html.rr-dark .dataTables_wrapper .dataTable th { color: var(--muted); }
html.rr-dark table.dataTable tbody tr.selected, html.rr-dark table.dataTable tbody tr.active { background-color: var(--primary-soft) !important; }
html.rr-dark .table-active, html.rr-dark .table-active > td, html.rr-dark .table-active > th { background-color: var(--hover); }
html.rr-dark .dataTables_wrapper .dataTables_info, html.rr-dark .dataTables_wrapper .dataTables_length label, html.rr-dark .dataTables_wrapper .dataTables_filter label { color: var(--muted); }
html.rr-dark .dataTables_wrapper .dataTables_processing,
html.rr-dark div.dataTables_wrapper div.dataTables_processing { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--line); box-shadow: var(--pop-shadow) !important; }
html.rr-dark .dataTables_wrapper .dataTable th.sorting_asc, html.rr-dark .dataTables_wrapper .dataTable th.sorting_desc,
html.rr-dark .dataTables_wrapper .dataTable td.sorting_1 { color: var(--text); }
html.rr-dark .pagination .page-item .page-link, html.rr-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link { background-color: transparent; border-color: transparent; color: var(--text-2); }
html.rr-dark .pagination .page-item .page-link:hover { background-color: var(--hover); color: var(--text); }
html.rr-dark .pagination .page-item.active .page-link,
html.rr-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .pagination .page-item.disabled .page-link { color: var(--muted); opacity: .5; }

/* dropdowns, navi */
html.rr-dark .dropdown-menu { background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--pop-shadow); color: var(--text-2); }
html.rr-dark .dropdown-item, html.rr-dark .dropdown-menu > li > a { color: var(--text-2); }
html.rr-dark .dropdown-item:hover, html.rr-dark .dropdown-item:focus, html.rr-dark .dropdown-menu > li > a:hover { background-color: var(--hover); color: var(--text); }
html.rr-dark .dropdown-item.active, html.rr-dark .dropdown-item:active { background-color: var(--primary-soft); color: var(--primary); }
html.rr-dark .dropdown-divider { border-color: var(--line); }
html.rr-dark .dropdown-header { color: var(--muted); }
html.rr-dark .navi .navi-item .navi-link { color: var(--text-2); }
html.rr-dark .navi .navi-item .navi-link .navi-text { color: var(--text-2); }
html.rr-dark .navi .navi-item .navi-link .navi-icon i, html.rr-dark .navi .navi-item .navi-link .navi-icon .svg-icon svg g [fill] { color: var(--muted); fill: var(--muted); }
html.rr-dark .navi .navi-item .navi-link:hover, html.rr-dark .navi .navi-item .navi-link.active { background-color: var(--hover); }
html.rr-dark .navi .navi-item .navi-link:hover .navi-text, html.rr-dark .navi .navi-item .navi-link.active .navi-text { color: var(--primary); }
html.rr-dark .navi .navi-separator { border-color: var(--line); }
html.rr-dark .navi .navi-header, html.rr-dark .navi .navi-footer { border-color: var(--line); }

/* modals, offcanvas, popovers, tooltips */
html.rr-dark .modal-content { background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--pop-shadow); color: var(--text-2); }
html.rr-dark .modal-header, html.rr-dark .modal-footer { border-color: var(--line); }
html.rr-dark .modal-title { color: var(--text); }
html.rr-dark .modal .close, html.rr-dark .close { color: var(--text-2); text-shadow: none; opacity: .8; }
html.rr-dark .modal-backdrop.show { opacity: .6; }
html.rr-dark .offcanvas { background-color: var(--card); box-shadow: var(--pop-shadow); }
html.rr-dark .offcanvas .offcanvas-header, html.rr-dark .offcanvas .offcanvas-content { color: var(--text-2); }
html.rr-dark .offcanvas .offcanvas-header.offcanvas-header-navs { border-color: var(--line); }
html.rr-dark .offcanvas-overlay { background: rgba(0, 0, 0, .5); }
html.rr-dark .popover { background-color: var(--card); border-color: var(--line); box-shadow: var(--pop-shadow); }
html.rr-dark .popover .popover-header { background-color: var(--card-2); border-color: var(--line); color: var(--text); }
html.rr-dark .popover .popover-body { color: var(--text-2); }
html.rr-dark .popover .arrow::after { border-top-color: var(--card); border-bottom-color: var(--card); }
html.rr-dark .tooltip .tooltip-inner { background-color: var(--card-2); color: var(--text); box-shadow: var(--pop-shadow); }
html.rr-dark .tooltip .arrow::before { border-top-color: var(--card-2) !important; border-bottom-color: var(--card-2) !important; border-left-color: var(--card-2) !important; border-right-color: var(--card-2) !important; }

/* tabs & pills */
html.rr-dark .nav-tabs { border-color: var(--line); }
html.rr-dark .nav-tabs .nav-link, html.rr-dark .nav .nav-link { color: var(--text-2); }
html.rr-dark .nav-tabs .nav-link:hover { border-color: var(--line); color: var(--text); }
html.rr-dark .nav-tabs .nav-link.active, html.rr-dark .nav-tabs .nav-item.show .nav-link { background-color: var(--card); border-color: var(--line) var(--line) var(--card); color: var(--primary); }
html.rr-dark .nav.nav-tabs.nav-tabs-line .nav-link.active, html.rr-dark .nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) { background: transparent; border-color: transparent; border-bottom-color: var(--primary); color: var(--primary); }
html.rr-dark .nav.nav-tabs.nav-tabs-line { border-bottom-color: var(--line); }
html.rr-dark .nav-pills .nav-link.active, html.rr-dark .nav-pills .show > .nav-link { background-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .nav .nav-link .nav-icon i, html.rr-dark .nav .nav-link .nav-text { color: inherit; }

/* labels, badges, alerts, symbols */
html.rr-dark .label.label-light, html.rr-dark .label.label-light-dark, html.rr-dark .label.label-secondary, html.rr-dark .label.label-secondry, html.rr-dark .badge-light, html.rr-dark .badge-secondary { background-color: var(--card-2); color: var(--text-2); }
html.rr-dark .label.label-light-primary, html.rr-dark .badge-light-primary { background-color: var(--primary-soft); color: var(--primary); }
html.rr-dark .label.label-light-success { background-color: var(--ok-soft); color: var(--ok); }
html.rr-dark .label.label-light-danger { background-color: var(--bad-soft); color: var(--bad); }
html.rr-dark .label.label-light-warning { background-color: var(--warn-soft); color: var(--warn); }
html.rr-dark .label.label-light-info { background-color: var(--info-soft); color: var(--info); }
html.rr-dark .label.label-primary, html.rr-dark .badge-primary { background-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .alert.alert-light, html.rr-dark .alert.alert-secondary, html.rr-dark .alert.alert-white, html.rr-dark .alert.alert-custom.alert-white, html.rr-dark .alert.alert-custom.alert-light { background-color: var(--card-2); border-color: var(--line); color: var(--text-2); }
html.rr-dark .alert.alert-custom.alert-light-primary, html.rr-dark .alert.alert-light-primary { background-color: var(--primary-soft); border-color: transparent; color: var(--primary); }
html.rr-dark .alert.alert-custom.alert-light-success, html.rr-dark .alert.alert-light-success { background-color: var(--ok-soft); border-color: transparent; color: var(--ok); }
html.rr-dark .alert.alert-custom.alert-light-danger, html.rr-dark .alert.alert-light-danger { background-color: var(--bad-soft); border-color: transparent; color: var(--bad); }
html.rr-dark .alert.alert-custom.alert-light-warning, html.rr-dark .alert.alert-light-warning { background-color: var(--warn-soft); border-color: transparent; color: var(--warn); }
html.rr-dark .alert.alert-custom.alert-light-info, html.rr-dark .alert.alert-light-info { background-color: var(--info-soft); border-color: transparent; color: var(--info); }
html.rr-dark .alert[class*="alert-light-"] .alert-text, html.rr-dark .alert[class*="alert-light-"] .alert-icon i { color: inherit; }
html.rr-dark .symbol .symbol-label { background-color: var(--card-2); color: var(--text-2); }
html.rr-dark .symbol.symbol-light-primary .symbol-label { background-color: var(--primary-soft); color: var(--primary); }
html.rr-dark .symbol.symbol-light-success .symbol-label { background-color: var(--ok-soft); color: var(--ok); }
html.rr-dark .symbol.symbol-light-danger .symbol-label { background-color: var(--bad-soft); color: var(--bad); }
html.rr-dark .symbol.symbol-light-warning .symbol-label { background-color: var(--warn-soft); color: var(--warn); }
html.rr-dark .symbol.symbol-light-info .symbol-label { background-color: var(--info-soft); color: var(--info); }
html.rr-dark .progress { background-color: var(--card-2); }
html.rr-dark .timeline .timeline-item:before, html.rr-dark .timeline:before, html.rr-dark .timeline .timeline-line { background-color: var(--line) !important; border-color: var(--line) !important; }
html.rr-dark .timeline .timeline-badge, html.rr-dark .timeline .timeline-media { background-color: var(--card) !important; border-color: var(--line) !important; }
html.rr-dark .timeline .timeline-content { background-color: var(--card-2) !important; color: var(--text-2); }

/* buttons */
html.rr-dark .btn.btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .btn.btn-primary:hover:not(.btn-text), html.rr-dark .btn.btn-primary:focus:not(.btn-text) { filter: brightness(1.1); background-color: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .btn.btn-light, html.rr-dark .btn.btn-secondary, html.rr-dark .btn.btn-white, html.rr-dark .btn.btn-default { background-color: var(--card-2); border-color: var(--line); color: var(--text-2); }
html.rr-dark .btn.btn-light:hover:not(.btn-text), html.rr-dark .btn.btn-secondary:hover:not(.btn-text), html.rr-dark .btn.btn-white:hover:not(.btn-text),
html.rr-dark .btn.btn-light:focus:not(.btn-text), html.rr-dark .btn.btn-secondary:focus:not(.btn-text) { background-color: var(--hover); border-color: var(--line); color: var(--text); }
html.rr-dark .btn.btn-light .svg-icon svg g [fill], html.rr-dark .btn.btn-secondary .svg-icon svg g [fill] { fill: var(--text-2); }
html.rr-dark .btn.btn-light-primary { background-color: var(--primary-soft); border-color: transparent; color: var(--primary); }
html.rr-dark .btn.btn-light-success { background-color: var(--ok-soft); border-color: transparent; color: var(--ok); }
html.rr-dark .btn.btn-light-danger { background-color: var(--bad-soft); border-color: transparent; color: var(--bad); }
html.rr-dark .btn.btn-light-warning { background-color: var(--warn-soft); border-color: transparent; color: var(--warn); }
html.rr-dark .btn.btn-light-info { background-color: var(--info-soft); border-color: transparent; color: var(--info); }
html.rr-dark .btn.btn-light-dark { background-color: var(--card-2); border-color: transparent; color: var(--text-2); }
html.rr-dark .btn[class*="btn-light-"] i, html.rr-dark .btn[class*="btn-light-"] .svg-icon svg g [fill] { color: inherit; fill: currentColor; }
html.rr-dark .btn.btn-light-primary:hover:not(.btn-text) { background-color: var(--primary); color: var(--primary-fg); }
html.rr-dark .btn.btn-light-success:hover:not(.btn-text) { background-color: var(--ok); color: #0B1A16; }
html.rr-dark .btn.btn-light-danger:hover:not(.btn-text) { background-color: var(--bad); color: #fff; }
html.rr-dark .btn.btn-light-warning:hover:not(.btn-text) { background-color: var(--warn); color: #1A1305; }
html.rr-dark .btn.btn-light-info:hover:not(.btn-text) { background-color: var(--info); color: #fff; }
html.rr-dark .btn.btn-light-dark:hover:not(.btn-text) { background-color: var(--hover); color: var(--text); }
html.rr-dark .btn.btn-clean { color: var(--muted); }
html.rr-dark .btn.btn-clean:hover:not(.btn-text), html.rr-dark .btn.btn-clean.active { background-color: var(--hover); color: var(--primary); }
html.rr-dark .btn.btn-outline-secondary, html.rr-dark .btn.btn-outline-light { border-color: var(--line); color: var(--text-2); }
html.rr-dark .btn.btn-outline-secondary:hover, html.rr-dark .btn.btn-outline-light:hover { background-color: var(--hover); color: var(--text); }
html.rr-dark .btn.btn-icon.btn-borderless, html.rr-dark .btn.btn-hover-light:hover { color: var(--muted); }
html.rr-dark .btn.btn-hover-light-primary:hover, html.rr-dark .btn.btn-hover-bg-light:hover { background-color: var(--hover) !important; }

/* plugins */
html.rr-dark .swal2-popup { background: var(--card) !important; color: var(--text-2); }
html.rr-dark .swal2-popup .swal2-title { color: var(--text); }
html.rr-dark .swal2-popup .swal2-content, html.rr-dark .swal2-popup .swal2-html-container { color: var(--text-2); }
html.rr-dark .swal2-popup .swal2-input, html.rr-dark .swal2-popup .swal2-textarea, html.rr-dark .swal2-popup .swal2-select, html.rr-dark .swal2-popup .swal2-file { background: var(--input); border-color: var(--line); color: var(--text); }
html.rr-dark .swal2-popup .swal2-footer { border-color: var(--line); color: var(--muted); }
html.rr-dark .swal2-popup .swal2-validation-message { background: var(--card-2); color: var(--text-2); }
html.rr-dark .swal2-icon.swal2-success [class^="swal2-success-circular-line"], html.rr-dark .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--card) !important; }
html.rr-dark .jstree-default .jstree-anchor { color: var(--text-2); }
html.rr-dark .jstree-default .jstree-hovered, html.rr-dark .jstree-default .jstree-wholerow-hovered { background: var(--hover); box-shadow: none; }
html.rr-dark .jstree-default .jstree-clicked, html.rr-dark .jstree-default .jstree-wholerow-clicked { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
html.rr-dark .fc-unthemed th, html.rr-dark .fc-unthemed td, html.rr-dark .fc-unthemed thead, html.rr-dark .fc-unthemed tbody, html.rr-dark .fc-unthemed .fc-divider,
html.rr-dark .fc-unthemed .fc-row, html.rr-dark .fc-unthemed .fc-content, html.rr-dark .fc-unthemed .fc-popover, html.rr-dark .fc-unthemed .fc-list-view,
html.rr-dark .fc .fc-scrollgrid, html.rr-dark .fc td, html.rr-dark .fc th { border-color: var(--line) !important; }
html.rr-dark .fc-unthemed .fc-day-header, html.rr-dark .fc .fc-col-header-cell { background: var(--card-2); color: var(--muted); }
html.rr-dark .fc-unthemed td.fc-today, html.rr-dark .fc .fc-day-today { background: var(--primary-soft) !important; }
html.rr-dark .fc-unthemed .fc-popover { background: var(--card); }
html.rr-dark .fc .fc-button, html.rr-dark .fc-button { background: var(--card-2); border-color: var(--line); color: var(--text-2); }
html.rr-dark .leaflet-popup-content-wrapper, html.rr-dark .leaflet-popup-tip { background: var(--card); color: var(--text-2); box-shadow: var(--pop-shadow); }
html.rr-dark .leaflet-bar a, html.rr-dark .leaflet-control-layers { background: var(--card); color: var(--text); border-color: var(--line); }
html.rr-dark .leaflet-container .leaflet-control-attribution { background: rgba(0, 0, 0, .55); color: var(--muted); }
html.rr-dark .ck.ck-toolbar { background: var(--card-2) !important; border-color: var(--line) !important; }
html.rr-dark .ck.ck-button, html.rr-dark .ck.ck-toolbar .ck-toolbar__separator { color: var(--text-2) !important; }
html.rr-dark .ck.ck-button:hover:not(.ck-disabled), html.rr-dark .ck.ck-button.ck-on { background: var(--hover) !important; }
html.rr-dark .ck.ck-editor__main > .ck-editor__editable, html.rr-dark .ck.ck-editor__editable_inline { background: var(--input) !important; border-color: var(--line) !important; color: var(--text) !important; }
html.rr-dark .ck.ck-dropdown__panel, html.rr-dark .ck.ck-list, html.rr-dark .ck.ck-balloon-panel { background: var(--card) !important; border-color: var(--line) !important; }
html.rr-dark .ck.ck-list__item .ck-button { color: var(--text-2) !important; }
html.rr-dark .cke_chrome { border-color: var(--line) !important; }
html.rr-dark .cke_top, html.rr-dark .cke_bottom { background: var(--card-2) !important; border-color: var(--line) !important; }
html.rr-dark .wizard.wizard-1 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title { color: var(--text-2); }
html.rr-dark .wizard.wizard-1 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-title { color: var(--primary); }
html.rr-dark .ps > .ps__rail-y > .ps__thumb-y, html.rr-dark .ps > .ps__rail-x > .ps__thumb-x { background-color: var(--line); }
html.rr-dark .editable-click, html.rr-dark a.editable-click { color: var(--link); border-bottom-color: var(--link); }

/* project-specific: quick search modal (hard-coded light colours in quickSearch.blade.php) */
html.rr-dark #quickSearchModal .modal-content { background: var(--card) !important; }
html.rr-dark #quickSearchModal input, html.rr-dark #quickSearchModal .form-control { background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important; }
html.rr-dark #quickSearchModal [style*="background"] { background-color: var(--card-2) !important; }
html.rr-dark #quickSearchModal [style*="color:#4a2440"], html.rr-dark #quickSearchModal [style*="color: #4a2440"] { color: var(--text) !important; }

/* inline light backgrounds written in views (style="background:#fff" etc.) */
html.rr-dark [style*="background-color: #fff"], html.rr-dark [style*="background-color:#fff"],
html.rr-dark [style*="background: #fff"], html.rr-dark [style*="background:#fff"],
html.rr-dark [style*="background-color: white"], html.rr-dark [style*="background: white"],
html.rr-dark [style*="background-color: #ffffff"], html.rr-dark [style*="background:#ffffff"], html.rr-dark [style*="background: #ffffff"],
html.rr-dark [style*="background-color: #f3f6f9"], html.rr-dark [style*="background-color:#f3f6f9"], html.rr-dark [style*="background: #f3f6f9"],
html.rr-dark [style*="background-color: #F3F6F9"], html.rr-dark [style*="background: #F3F6F9"] { background-color: var(--card-2) !important; }
html.rr-dark [style*="color: #181c32"], html.rr-dark [style*="color:#181c32"], html.rr-dark [style*="color: #181C32"], html.rr-dark [style*="color: #3f4254"], html.rr-dark [style*="color: #3F4254"] { color: var(--text) !important; }

/* Metronic navigation icons & active states (nav-pills bars, side "btn-hover-primary" lists):
   grey icons, theme-coloured soft active state instead of Metronic's maroon/white blocks */
html.rr-dark .nav .nav-link .svg-icon svg g [fill],
html.rr-dark .navi .navi-link .svg-icon svg g [fill],
html.rr-dark .btn.btn-light .svg-icon:not([class*="svg-icon-primary"]):not([class*="svg-icon-success"]):not([class*="svg-icon-danger"]):not([class*="svg-icon-warning"]):not([class*="svg-icon-info"]) svg g [fill] { fill: var(--muted) !important; }
html.rr-dark .nav .nav-link .nav-icon i { color: var(--muted) !important; }
html.rr-dark .nav .nav-link:hover .svg-icon svg g [fill] { fill: var(--primary) !important; }
html.rr-dark .nav.nav-pills .nav-link.active, html.rr-dark .nav.nav-pills .show > .nav-link {
    background-color: var(--primary-soft) !important; color: var(--primary) !important; border-color: var(--primary) !important;
}
html.rr-dark .nav.nav-pills .nav-link.active .nav-text, html.rr-dark .nav.nav-pills .nav-link.active .nav-icon i,
html.rr-dark .nav.nav-pills .nav-link.active:after { color: var(--primary) !important; }
html.rr-dark .nav.nav-pills .nav-link.active .svg-icon svg g [fill] { fill: var(--primary) !important; }
html.rr-dark .btn.btn-hover-primary:not(:disabled):not(.disabled).active,
html.rr-dark .btn.btn-hover-primary:not(:disabled):not(.disabled):active:not(.btn-text),
html.rr-dark .btn.btn-hover-primary:not(:disabled):not(.disabled):hover:not(.btn-text),
html.rr-dark .btn.btn-hover-primary:not(:disabled):not(.disabled):focus:not(.btn-text) {
    background-color: var(--primary-soft) !important; border-color: var(--primary-soft) !important; color: var(--primary) !important;
}
html.rr-dark .btn.btn-hover-primary.active .svg-icon svg g [fill], html.rr-dark .btn.btn-hover-primary:hover .svg-icon svg g [fill],
html.rr-dark .btn.btn-hover-primary.active i, html.rr-dark .btn.btn-hover-primary:hover i { fill: var(--primary) !important; color: var(--primary) !important; }
html.rr-dark .btn.btn-hover-primary.active .navi-text, html.rr-dark .btn.btn-hover-primary:hover .navi-text { color: var(--primary) !important; }

/* project-specific: V2 subscriptions / customers pages
   (customer-services-v2/parts/shared-styles.blade.php pins light colours with !important) */
html.rr-dark .btn.btn-light { color: var(--text-2) !important; background-color: var(--card-2) !important; }
html.rr-dark .btn.btn-light:hover { color: var(--text) !important; background-color: var(--hover) !important; }
html.rr-dark .btn.btn-light-primary { color: var(--primary) !important; background-color: var(--primary-soft) !important; }
html.rr-dark .btn.btn-light-success { color: var(--ok) !important; background-color: var(--ok-soft) !important; }
html.rr-dark .btn.btn-light-warning { color: var(--warn) !important; background-color: var(--warn-soft) !important; }
html.rr-dark .btn.btn-light-danger { color: var(--bad) !important; background-color: var(--bad-soft) !important; }
html.rr-dark .btn.btn-light-info { color: var(--info) !important; background-color: var(--info-soft) !important; }
html.rr-dark .btn.btn-light-primary:hover { color: var(--primary-fg) !important; background-color: var(--primary) !important; }
html.rr-dark .btn.btn-light-success:hover { color: #0B1A16 !important; background-color: var(--ok) !important; }
html.rr-dark .btn.btn-light-warning:hover { color: #1A1305 !important; background-color: var(--warn) !important; }
html.rr-dark .btn.btn-light-danger:hover { color: #fff !important; background-color: var(--bad) !important; }
html.rr-dark .btn.btn-light-info:hover { color: #fff !important; background-color: var(--info) !important; }
html.rr-dark .label.label-light-success { color: var(--ok) !important; background-color: var(--ok-soft) !important; }
html.rr-dark .label.label-light-warning { color: var(--warn) !important; background-color: var(--warn-soft) !important; }
html.rr-dark .label.label-light-danger { color: var(--bad) !important; background-color: var(--bad-soft) !important; }
html.rr-dark .label.label-light-info { color: var(--info) !important; background-color: var(--info-soft) !important; }
html.rr-dark .label.label-light-primary { color: var(--primary) !important; background-color: var(--primary-soft) !important; }
html.rr-dark .label.label-light-secondary { color: var(--text-2) !important; background-color: var(--card-2) !important; }
html.rr-dark .cs-subscriber .cs-name, html.rr-dark .cs-kpi .cs-num { color: var(--text) !important; }
html.rr-dark .cs-subscriber .cs-meta, html.rr-dark .cs-kpi .cs-lbl { color: var(--muted) !important; }
html.rr-dark .cs-kpi { background: var(--card) !important; border-color: var(--line) !important; }
html.rr-dark .cs-bulk-bar { background: var(--card-2) !important; border: 1px solid var(--line); }
html.rr-dark .cs-drawer { background: var(--card) !important; box-shadow: var(--pop-shadow) !important; color: var(--text-2); }
html.rr-dark .cs-dw-back { color: var(--link) !important; }
html.rr-dark .cs-dw-head, html.rr-dark .cs-dw-finance, html.rr-dark .cs-dw-invoices, html.rr-dark .cs-dw-fin-row, html.rr-dark .cs-dw-inv { border-color: var(--line) !important; }
html.rr-dark .cs-dw-kpi { background: var(--card-2) !important; }
html.rr-dark .cs-dw-kpi-v { color: var(--text) !important; }
html.rr-dark .cs-dw-kpi-l, html.rr-dark .cs-dw-fin-k, html.rr-dark .cs-dw-sec { color: var(--muted) !important; }
html.rr-dark .cs-dw-op { background: var(--card) !important; border-color: var(--line) !important; color: var(--text-2) !important; }
html.rr-dark .cs-dw-op:hover { background: var(--hover) !important; border-color: var(--primary) !important; color: var(--text) !important; }
html.rr-dark .cs-drawer .bg-light-primary { background-color: var(--primary-soft) !important; }
html.rr-dark .cs-drawer .bg-light-success { background-color: var(--ok-soft) !important; }
html.rr-dark .cs-drawer .bg-light-warning { background-color: var(--warn-soft) !important; }
html.rr-dark .cs-drawer .bg-light-info { background-color: var(--info-soft) !important; }
html.rr-dark .cs-drawer .bg-light-danger { background-color: var(--bad-soft) !important; }
html.rr-dark .cs-drawer .bg-light-dark { background-color: var(--card-2) !important; }
html.rr-dark .cs-drawer .cs-dw-op-ic.text-dark { color: var(--text-2) !important; }

/* project-specific: required-amount box (customerServices/parts/required_amount_hint.blade.php) */
html.rr-dark .rr-due { background: var(--card-2) !important; border-color: var(--line) !important; }
html.rr-dark .rr-due [class*="rr-due__"] { border-color: var(--line) !important; }
html.rr-dark .rr-due__head, html.rr-dark .rr-due__total > span, html.rr-dark .rr-due__row > b { color: var(--text) !important; }
html.rr-dark .rr-due__row > span, html.rr-dark .rr-due__renew-label { color: var(--text-2) !important; }
html.rr-dark .rr-due__row em, html.rr-dark .rr-due__renew-note { color: var(--muted) !important; }
html.rr-dark .rr-due__row--good > b, html.rr-dark .rr-due__row--good em { color: var(--ok) !important; }
html.rr-dark .rr-due__row--bad > b, html.rr-dark .rr-due__row--bad em { color: var(--bad) !important; }
html.rr-dark .rr-due__total > b, html.rr-dark .rr-due__head i { color: var(--primary) !important; }

/* Metronic "offcanvas-mobile" side menus (e.g. subscription operations) turn white on small screens */
@media (max-width: 991.98px) {
    html.rr-dark .offcanvas-mobile { background-color: var(--bg) !important; box-shadow: var(--pop-shadow); }
}

/* Found by the dark-mode sweep of all admin pages (2026-10-08) */
html.rr-dark code, html.rr-dark kbd:not(.rr-search kbd) { background-color: var(--card-2) !important; color: var(--link); }
html.rr-dark pre, html.rr-dark pre.bg-light { background-color: var(--card-2) !important; color: var(--text-2) !important; border-color: var(--line); }
html.rr-dark .input-group.input-group-solid, html.rr-dark .input-group.input-group-solid .form-control,
html.rr-dark .input-group.input-group-solid .input-group-text { background-color: var(--card-2) !important; border-color: var(--card-2); color: var(--text); }
html.rr-dark .bg-light-secondary, html.rr-dark .card.bg-light-secondary { background-color: var(--card-2) !important; }
html.rr-dark .form-control-plaintext { color: var(--text) !important; }
html.rr-dark .custom-file-label, html.rr-dark .custom-file-input ~ .custom-file-label { background-color: var(--input) !important; border-color: var(--line) !important; color: var(--muted) !important; }
html.rr-dark .alert.alert-custom.alert-white .alert-text, html.rr-dark .alert.alert-custom.alert-light .alert-text, html.rr-dark .alert.alert-white .alert-text, html.rr-dark .alert.alert-light .alert-text { color: var(--text-2) !important; }
/* CKEditor 4 chrome (the editing area itself is an iframe and stays light) */
html.rr-dark .cke_inner, html.rr-dark .cke_chrome { background: var(--card) !important; }
html.rr-dark a.cke_combo_button, html.rr-dark .cke_combo_text, html.rr-dark a.cke_button { color: var(--text-2) !important; background: transparent !important; }
html.rr-dark a.cke_combo_button:hover, html.rr-dark a.cke_button:hover, html.rr-dark a.cke_button_on { background: var(--hover) !important; }
html.rr-dark .cke_toolgroup, html.rr-dark .cke_combo_button { border-color: var(--line) !important; background: var(--card-2) !important; }
html.rr-dark .cke_button_icon { filter: invert(.85); }
html.rr-dark .cke_combo_arrow { border-top-color: var(--text-2) !important; }
/* Coloris colour picker field + noUiSlider */
html.rr-dark .clr-field { background: transparent !important; }
html.rr-dark .clr-field input { background-color: var(--input); color: var(--text); border-color: var(--line); }
html.rr-dark .noUi-target { background: var(--card-2) !important; border-color: var(--line) !important; box-shadow: none !important; }
html.rr-dark .noUi-handle { background: var(--card) !important; border-color: var(--line) !important; box-shadow: none !important; }
html.rr-dark .noUi-tooltip { background: var(--card) !important; color: var(--text) !important; border-color: var(--line) !important; }

/* never darken print views */
@media print {
    html.rr-dark body, html.rr-dark .card, html.rr-dark .table { background: #fff !important; color: #000 !important; }
}

/* Phones: let the DataTables "show N entries" / search labels wrap instead of pushing the page wide. */
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; max-width: 100%; }
    .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
}

/* The Pace loading bar parks itself off-screen (right:100%) and slides in. In RTL that off-screen spot
   is past the left edge, so every ajax call made phones widen the page and scroll sideways.
   Clip it inside a fixed 3px strip across the top of the viewport. */
.pace:not(.pace-inactive) { position: fixed; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; z-index: 2000; }
.pace .pace-progress { position: absolute; }

/* jstree labels never wrap, so a deep tree with long names was wider than a phone and dragged the
   whole page sideways. Keep the scroll inside the tree. */
@media (max-width: 991.98px) {
    .jstree { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Labels coloured by a user-chosen status colour (--c): a dark colour (e.g. #212121) vanished on the dark card */
html.rr-dark .rr-tone-label { color: color-mix(in srgb, var(--c) 55%, #fff) !important; background-color: color-mix(in srgb, var(--c) 22%, transparent) !important; }

/* Print previews (card templates): what you see is what gets printed — keep the paper white in dark themes */
html.rr-dark .card.rr-paper, html.rr-dark .card.rr-paper > .card-body { background-color: #fff !important; }