/* =====================================================================
   RedLime themes - modern look.
   <html data-rl-theme="..." data-rl-side="theme|dark|light" data-rl-font="sm|md|lg"
         data-rl-density="comfortable|compact" data-rl-corners="rounded|soft|square">
   Every theme sets the same variables; the rules below use them.
   ===================================================================== */
:root, [data-rl-theme="crimson"] {
    --rl-primary: #e11d48; --rl-primary-dark: #be123c; --rl-primary-soft: rgba(225,29,72,.12);
    --rl-side-bg: linear-gradient(165deg, #1f1b24 0%, #17141b 55%, #2a1420 100%);
    --rl-side-solid: #1c181f; --rl-side-fg: #cfc9d3; --rl-side-head: #ffffff; --rl-side-muted: #8d8594;
    --rl-side-hover: rgba(255,255,255,.07); --rl-side-active: linear-gradient(90deg, rgba(225,29,72,.95), rgba(244,63,94,.75)); --rl-side-border: rgba(255,255,255,.07);
    --rl-bg: #f6f5f8; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(225,29,72,.07), transparent 60%);
    --rl-logo: linear-gradient(135deg, #e11d48, #84cc16); --rl-grad: linear-gradient(135deg, #e11d48, #f43f5e 60%, #fb7185);
}
[data-rl-theme="ocean"] {
    --rl-primary: #2563eb; --rl-primary-dark: #1d4ed8; --rl-primary-soft: rgba(37,99,235,.12);
    --rl-side-bg: linear-gradient(165deg, #0b1b3a 0%, #0f2550 60%, #0b3a63 100%);
    --rl-side-solid: #0d2147; --rl-side-fg: #c7d6f2; --rl-side-head: #ffffff; --rl-side-muted: #8aa2cc;
    --rl-side-hover: rgba(255,255,255,.08); --rl-side-active: linear-gradient(90deg, rgba(37,99,235,.95), rgba(6,182,212,.75)); --rl-side-border: rgba(255,255,255,.08);
    --rl-bg: #f2f6fc; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(6,182,212,.10), transparent 60%);
    --rl-logo: linear-gradient(135deg, #2563eb, #06b6d4); --rl-grad: linear-gradient(135deg, #2563eb, #0ea5e9 60%, #06b6d4);
}
[data-rl-theme="emerald"] {
    --rl-primary: #059669; --rl-primary-dark: #047857; --rl-primary-soft: rgba(5,150,105,.12);
    --rl-side-bg: linear-gradient(165deg, #062b22 0%, #08372b 60%, #0c4a2f 100%);
    --rl-side-solid: #073126; --rl-side-fg: #c8e6da; --rl-side-head: #ffffff; --rl-side-muted: #86b8a4;
    --rl-side-hover: rgba(255,255,255,.08); --rl-side-active: linear-gradient(90deg, rgba(5,150,105,.95), rgba(132,204,22,.70)); --rl-side-border: rgba(255,255,255,.08);
    --rl-bg: #f2f8f5; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(132,204,22,.10), transparent 60%);
    --rl-logo: linear-gradient(135deg, #059669, #a3e635); --rl-grad: linear-gradient(135deg, #059669, #10b981 60%, #84cc16);
}
[data-rl-theme="royal"] {
    --rl-primary: #7c3aed; --rl-primary-dark: #6d28d9; --rl-primary-soft: rgba(124,58,237,.12);
    --rl-side-bg: linear-gradient(165deg, #1e1038 0%, #2a1352 60%, #3b0f4f 100%);
    --rl-side-solid: #24113f; --rl-side-fg: #ddd2f5; --rl-side-head: #ffffff; --rl-side-muted: #a593cc;
    --rl-side-hover: rgba(255,255,255,.08); --rl-side-active: linear-gradient(90deg, rgba(124,58,237,.95), rgba(236,72,153,.75)); --rl-side-border: rgba(255,255,255,.08);
    --rl-bg: #f7f4fd; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(236,72,153,.08), transparent 60%);
    --rl-logo: linear-gradient(135deg, #7c3aed, #ec4899); --rl-grad: linear-gradient(135deg, #7c3aed, #a855f7 55%, #ec4899);
}
[data-rl-theme="sunset"] {
    --rl-primary: #ea580c; --rl-primary-dark: #c2410c; --rl-primary-soft: rgba(234,88,12,.12);
    --rl-side-bg: linear-gradient(165deg, #2b1610 0%, #3a1a10 60%, #4a1d1d 100%);
    --rl-side-solid: #331a11; --rl-side-fg: #f2dccd; --rl-side-head: #ffffff; --rl-side-muted: #c79d86;
    --rl-side-hover: rgba(255,255,255,.08); --rl-side-active: linear-gradient(90deg, rgba(234,88,12,.95), rgba(245,158,11,.80)); --rl-side-border: rgba(255,255,255,.08);
    --rl-bg: #fcf6f1; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(245,158,11,.11), transparent 60%);
    --rl-logo: linear-gradient(135deg, #ea580c, #fbbf24); --rl-grad: linear-gradient(135deg, #ea580c, #f97316 55%, #f59e0b);
}
[data-rl-theme="teal"] {
    --rl-primary: #0d9488; --rl-primary-dark: #0f766e; --rl-primary-soft: rgba(13,148,136,.12);
    --rl-side-bg: linear-gradient(165deg, #042f2e 0%, #073b3a 60%, #0b4048 100%);
    --rl-side-solid: #063534; --rl-side-fg: #c4e5e1; --rl-side-head: #ffffff; --rl-side-muted: #82b5af;
    --rl-side-hover: rgba(255,255,255,.08); --rl-side-active: linear-gradient(90deg, rgba(13,148,136,.95), rgba(45,212,191,.70)); --rl-side-border: rgba(255,255,255,.08);
    --rl-bg: #f1f8f7; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(45,212,191,.10), transparent 60%);
    --rl-logo: linear-gradient(135deg, #0d9488, #5eead4); --rl-grad: linear-gradient(135deg, #0f766e, #0d9488 55%, #2dd4bf);
}
[data-rl-theme="graphite"] {
    --rl-primary: #475569; --rl-primary-dark: #334155; --rl-primary-soft: rgba(71,85,105,.13);
    --rl-side-bg: linear-gradient(165deg, #1e2329 0%, #262b33 60%, #2d333c 100%);
    --rl-side-solid: #23282f; --rl-side-fg: #cdd3db; --rl-side-head: #ffffff; --rl-side-muted: #8b95a3;
    --rl-side-hover: rgba(255,255,255,.07); --rl-side-active: linear-gradient(90deg, rgba(100,116,139,.95), rgba(148,163,184,.65)); --rl-side-border: rgba(255,255,255,.07);
    --rl-bg: #f3f4f6; --rl-bg-img: radial-gradient(1200px 500px at 100% -10%, rgba(100,116,139,.09), transparent 60%);
    --rl-logo: linear-gradient(135deg, #475569, #94a3b8); --rl-grad: linear-gradient(135deg, #334155, #475569 55%, #64748b);
}
[data-rl-theme="light"] {
    --rl-primary: #e11d48; --rl-primary-dark: #be123c; --rl-primary-soft: rgba(225,29,72,.10);
    --rl-side-bg: linear-gradient(180deg, #ffffff, #fbfbfd);
    --rl-side-solid: #ffffff; --rl-side-fg: #3f4652; --rl-side-head: #111827; --rl-side-muted: #8a93a1;
    --rl-side-hover: #f3f4f6; --rl-side-active: linear-gradient(90deg, var(--rl-primary-soft), var(--rl-primary-soft)); --rl-side-border: #eceef2;
    --rl-bg: #f7f8fa; --rl-bg-img: none;
    --rl-logo: linear-gradient(135deg, #e11d48, #84cc16); --rl-grad: linear-gradient(135deg, #e11d48, #fb7185);
}
[data-rl-theme="midnight"] {
    --rl-primary: #818cf8; --rl-primary-dark: #6366f1; --rl-primary-soft: rgba(129,140,248,.16);
    --rl-side-bg: linear-gradient(165deg, #0d1017 0%, #0a0c12 60%, #120f22 100%);
    --rl-side-solid: #0c0f15; --rl-side-fg: #c3c8d4; --rl-side-head: #ffffff; --rl-side-muted: #7a8293;
    --rl-side-hover: rgba(255,255,255,.06); --rl-side-active: linear-gradient(90deg, rgba(99,102,241,.85), rgba(168,85,247,.65)); --rl-side-border: rgba(255,255,255,.06);
    --rl-bg: #0b0e14; --rl-bg-img: radial-gradient(1000px 500px at 100% -10%, rgba(129,140,248,.10), transparent 60%);
    --rl-logo: linear-gradient(135deg, #818cf8, #c084fc); --rl-grad: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #c084fc);
}
[data-rl-theme="midnight"] { --bs-body-bg: #12161e; --bs-tertiary-bg: #171c26; --bs-border-color: #252b37; }

/* ---------- sidebar style override (Appearance > Sidebar style) ---------- */
[data-rl-side="dark"] {
    --rl-side-bg: linear-gradient(165deg, #111318 0%, #0c0e12 100%); --rl-side-solid: #0f1115;
    --rl-side-fg: #c4c9d2; --rl-side-head: #ffffff; --rl-side-muted: #7f8794;
    --rl-side-hover: rgba(255,255,255,.06); --rl-side-border: rgba(255,255,255,.06);
    --rl-side-active: linear-gradient(90deg, var(--rl-primary), var(--rl-primary-dark));
}
[data-rl-side="light"] {
    --rl-side-bg: linear-gradient(180deg, #ffffff, #fbfbfd); --rl-side-solid: #ffffff;
    --rl-side-fg: #3f4652; --rl-side-head: #111827; --rl-side-muted: #8a93a1;
    --rl-side-hover: #f3f4f6; --rl-side-border: #eceef2;
    --rl-side-active: linear-gradient(90deg, var(--rl-primary-soft), var(--rl-primary-soft));
}
[data-rl-theme="midnight"][data-rl-side="light"] {
    --rl-side-bg: #161b24; --rl-side-solid: #161b24; --rl-side-fg: #c3c8d4; --rl-side-head: #fff; --rl-side-hover: rgba(255,255,255,.05); --rl-side-border: #252b37;
}

/* ---------- text size ---------- */
html[data-rl-font="sm"] { font-size: 14px; }
html[data-rl-font="md"] { font-size: 15px; }
html[data-rl-font="lg"] { font-size: 17px; }

/* ---------- corners ---------- */
:root, [data-rl-corners="rounded"] { --rl-r: .9rem; --rl-r-sm: .6rem; --bs-border-radius: .55rem; --bs-border-radius-sm: .45rem; --bs-border-radius-lg: .8rem; }
[data-rl-corners="soft"]   { --rl-r: .45rem; --rl-r-sm: .35rem; --bs-border-radius: .3rem; --bs-border-radius-sm: .25rem; --bs-border-radius-lg: .45rem; }
[data-rl-corners="square"] { --rl-r: 0; --rl-r-sm: 0; --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-pill: 0; }

/* ---------- base ---------- */
body {
    font-family: var(--rl-font, "Segoe UI", system-ui, sans-serif);
    background-color: var(--rl-bg); background-image: var(--rl-bg-img); background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--rl-primary); }
::selection { background: var(--rl-primary-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(127,127,127,.35) transparent; }

.btn { font-weight: 500; transition: transform .08s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: var(--rl-primary); --bs-btn-border-color: var(--rl-primary);
    --bs-btn-hover-bg: var(--rl-primary-dark); --bs-btn-hover-border-color: var(--rl-primary-dark);
    --bs-btn-active-bg: var(--rl-primary-dark); --bs-btn-active-border-color: var(--rl-primary-dark);
    --bs-btn-disabled-bg: var(--rl-primary); --bs-btn-disabled-border-color: var(--rl-primary);
    box-shadow: 0 4px 14px -4px var(--rl-primary);
}
.btn-primary:hover { box-shadow: 0 6px 18px -4px var(--rl-primary); }
.btn-outline-primary {
    --bs-btn-color: var(--rl-primary); --bs-btn-border-color: var(--rl-primary);
    --bs-btn-hover-bg: var(--rl-primary); --bs-btn-hover-border-color: var(--rl-primary);
    --bs-btn-active-bg: var(--rl-primary-dark); --bs-btn-active-border-color: var(--rl-primary-dark);
}
.nav-pills .nav-link.active { background: var(--rl-primary); }
.nav-tabs .nav-link.active { color: var(--rl-primary); border-bottom-color: transparent; box-shadow: inset 0 -2px 0 var(--rl-primary); }
.form-control, .form-select { border-color: color-mix(in srgb, var(--bs-border-color) 85%, #888); }
.form-control:focus, .form-select:focus { border-color: var(--rl-primary); box-shadow: 0 0 0 .22rem var(--rl-primary-soft); }
.form-check-input:checked { background-color: var(--rl-primary); border-color: var(--rl-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem var(--rl-primary-soft); border-color: var(--rl-primary); }
.badge.bg-primary, .bg-primary { background-color: var(--rl-primary) !important; }
.text-primary { color: var(--rl-primary) !important; }
.page-link { color: var(--rl-primary); }
.active > .page-link, .page-link.active { background: var(--rl-primary); border-color: var(--rl-primary); }
.dropdown-menu { border: 1px solid var(--bs-border-color); border-radius: var(--rl-r-sm); box-shadow: 0 18px 40px -12px rgba(15,23,42,.25); padding: .35rem; }
.dropdown-item { border-radius: calc(var(--rl-r-sm) - .15rem); }
.dropdown-item:active, .dropdown-item.active { background: var(--rl-primary); }
.modal-content { border: 0; border-radius: var(--rl-r); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.alert { border: 0; border-inline-start: 4px solid currentColor; border-radius: var(--rl-r-sm); }
.toast { border-radius: var(--rl-r-sm); }

/* ---------- sidebar (!important beats Bootstrap's .offcanvas-lg transparent background) ---------- */
.rl-sidebar, .rl-sidebar.offcanvas-lg {
    background-color: var(--rl-side-solid) !important;
    background-image: var(--rl-side-bg) !important;
    color: var(--rl-side-fg) !important;
    --bs-offcanvas-bg: var(--rl-side-solid);
    --bs-offcanvas-color: var(--rl-side-fg);
    border-inline-end: 1px solid var(--rl-side-border);
}
.rl-sidebar .rl-brand, .rl-sidebar .offcanvas-header { background: transparent !important; }
.rl-brand { border-bottom: 1px solid var(--rl-side-border); }
.rl-brand a { color: var(--rl-side-head) !important; letter-spacing: -.01em; }
.rl-logo { background: var(--rl-logo); border-radius: calc(var(--rl-r-sm) + 2px); box-shadow: 0 6px 16px -6px var(--rl-primary); color: #fff; }
.rl-menu { padding: .6rem .6rem 2rem; }
.rl-menu-head {
    color: var(--rl-side-muted) !important; opacity: 1; font-size: .7rem; letter-spacing: .08em;
    padding: .9rem .7rem .35rem; border-radius: var(--rl-r-sm);
}
.rl-menu-head:hover { color: var(--rl-side-head) !important; }
.rl-menu-head i:first-child { color: var(--rl-side-muted); }
.rl-menu-link {
    color: var(--rl-side-fg) !important; border-inline-start: 0 !important; border-radius: var(--rl-r-sm);
    padding: .5rem .75rem .5rem 1rem; margin: 1px 0; font-size: .9rem; transition: background .15s, color .15s, transform .15s;
}
.rl-menu-link i { color: var(--rl-side-muted); font-size: 1.02rem; transition: color .15s; }
.rl-menu-link:hover { background: var(--rl-side-hover); color: var(--rl-side-head) !important; transform: translateX(2px); }
.rl-menu-link:hover i { color: var(--rl-side-head); }
.rl-menu-link.active { background: var(--rl-side-active) !important; color: #fff !important; font-weight: 600; box-shadow: 0 8px 20px -10px var(--rl-primary); }
.rl-menu-link.active i { color: #fff; }
[data-rl-side="light"] .rl-menu-link.active,
[data-rl-theme="light"]:not([data-rl-side="dark"]) .rl-menu-link.active { color: var(--rl-primary) !important; box-shadow: none; }
[data-rl-side="light"] .rl-menu-link.active i,
[data-rl-theme="light"]:not([data-rl-side="dark"]) .rl-menu-link.active i { color: var(--rl-primary); }
[data-rl-side="light"] .btn-close-white,
[data-rl-theme="light"]:not([data-rl-side="dark"]) .btn-close-white { filter: none; }
.rl-sidebar ::-webkit-scrollbar { width: 6px; }
.rl-sidebar ::-webkit-scrollbar-thumb { background: var(--rl-side-hover); border-radius: 6px; }

/* ---------- top bar: frosted glass ---------- */
.rl-topbar {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.rl-topbar .btn-light, .rl-topbar .btn-outline-secondary { border-radius: 999px; }

/* ---------- page and cards ---------- */
.rl-page-head h1 { font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; }
.rl-page-head h1 i {
    display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-size: 1.05rem;
    color: #fff; background: var(--rl-grad); border-radius: var(--rl-r-sm); box-shadow: 0 8px 18px -8px var(--rl-primary);
}
.rl-card {
    border-radius: var(--rl-r); border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px -12px rgba(16,24,40,.12);
    padding: 1.15rem 1.25rem;
}
.rl-card > h2, .rl-card > h3 { font-weight: 650; letter-spacing: -.01em; }
.rl-kpi {
    position: relative; overflow: hidden; border-radius: var(--rl-r); border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px -12px rgba(16,24,40,.14); padding: 1rem 1.1rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.rl-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rl-grad); }
.rl-kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px -14px rgba(16,24,40,.25); }
.rl-kpi i {
    float: inline-end; opacity: 1; font-size: 1.15rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
    color: var(--rl-primary); background: var(--rl-primary-soft); border-radius: var(--rl-r-sm);
}
.rl-kpi .value { font-weight: 750; letter-spacing: -.02em; }

.table-rl { --bs-table-bg: transparent; }
.table-rl th {
    color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
    background: color-mix(in srgb, var(--bs-tertiary-bg) 80%, transparent) !important; border-bottom-width: 1px;
}
.table-rl > tbody > tr { transition: background .12s; }
.table-rl > tbody > tr:hover > * { background: var(--rl-primary-soft); }
.table-responsive { border-radius: var(--rl-r-sm); }

/* ---------- density ---------- */
[data-rl-density="compact"] .rl-content { padding: .6rem .9rem; }
[data-rl-density="compact"] .rl-card { padding: .7rem .85rem; margin-bottom: .6rem; }
[data-rl-density="compact"] .rl-kpi { padding: .6rem .8rem; }
[data-rl-density="compact"] .rl-page-head { margin-bottom: .6rem; }
[data-rl-density="compact"] .table > :not(caption) > * > * { padding: .25rem .4rem; }
[data-rl-density="compact"] .form-control, [data-rl-density="compact"] .form-select { padding-top: .25rem; padding-bottom: .25rem; }
[data-rl-density="compact"] .btn:not(.btn-sm):not(.btn-lg) { padding-top: .25rem; padding-bottom: .25rem; }
[data-rl-density="compact"] .rl-menu-link { padding-top: .32rem; padding-bottom: .32rem; }
[data-rl-density="compact"] .row.g-3 { --bs-gutter-y: .6rem; --bs-gutter-x: .75rem; }

/* ---------- POS follows the theme ---------- */
.pos-top { background-color: var(--rl-side-solid); background-image: var(--rl-side-bg); }
/* light theme / light sidebar: keep the POS bar dark so its white buttons and the user chip stay readable */
[data-rl-theme="light"] .pos-top, [data-rl-side="light"] .pos-top {
    background-color: #1c1f26; background-image: linear-gradient(165deg, #23272f 0%, #15181d 100%);
}
.pos-mobile-tabs button.active { color: var(--rl-primary); border-bottom-color: var(--rl-primary); }
.pos-body { background-color: var(--rl-bg); background-image: var(--rl-bg-img); background-attachment: fixed; }
.pos-top .pos-channels .btn-light { color: var(--rl-primary-dark); }
.pos-cats .btn-dark { background: var(--rl-grad); border-color: var(--rl-primary-dark); color: #fff; }
.pos-cats .btn-light:hover { border-color: var(--rl-primary); color: var(--rl-primary-dark); }
.pos-subcats .btn-secondary { background: var(--rl-primary); border-color: var(--rl-primary); color: #fff; }
.pos-subcats .btn-outline-secondary:hover { background: var(--rl-primary-soft); border-color: var(--rl-primary); color: var(--rl-primary-dark); }
.pos-item .pr { color: var(--rl-primary-dark); }
.pos-item:hover { box-shadow: 0 0 0 2px var(--rl-primary-soft), 0 4px 12px -4px rgba(0,0,0,.18); }
.pos-search .form-control:focus { border-color: var(--rl-primary); box-shadow: 0 0 0 .2rem var(--rl-primary-soft); }
.pos-theme-menu { min-width: 300px; }
/* dark theme (midnight): POS panels use the Bootstrap dark colours */
[data-bs-theme="dark"] .pos-cart, [data-bs-theme="dark"] .pos-item, [data-bs-theme="dark"] .pos-mobile-tabs { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .pos-cart { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .pos-totals, [data-bs-theme="dark"] .pos-line.child, [data-bs-theme="dark"] .pos-item .im,
[data-bs-theme="dark"] .pos-item img.im { background-color: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .pos-totals { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .pos-line:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .pos-line.child { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .pos-order-info { background: #3b2f12; border-color: #6b5520; }
[data-bs-theme="dark"] .pos-item .pr { color: var(--rl-primary); }

/* ---------- quick theme picker (top bar) ---------- */
.rl-theme-menu { width: 340px; max-width: calc(100vw - 1.5rem); border: 0; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 1.25rem 2.5rem -1rem rgba(0,0,0,.35), 0 0 0 1px var(--bs-border-color-translucent); }
.rl-theme-head { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem .6rem;
    background: linear-gradient(135deg, var(--rl-primary-soft), transparent 75%); }
.rl-theme-head .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, var(--rl-primary), var(--rl-primary-dark, var(--rl-primary))); box-shadow: 0 6px 14px -6px var(--rl-primary); }
.rl-theme-head b { display: block; font-size: .95rem; line-height: 1.2; }
.rl-theme-head small { color: var(--bs-secondary-color); font-size: .75rem; }
.rl-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: .5rem .85rem .85rem; }
.rl-theme-swatch {
    display: flex; flex-direction: column; align-items: stretch; gap: .35rem; border: 0; padding: 0; background: none;
    font-size: .76rem; font-weight: 600; color: var(--bs-body-color); cursor: pointer;
}
.rl-theme-swatch .mini {
    position: relative; display: flex; height: 52px; border-radius: .6rem; overflow: hidden; background: var(--mini-main);
    box-shadow: 0 0 0 1px var(--bs-border-color); transition: transform .15s, box-shadow .15s;
}
.rl-theme-swatch .mini-side { width: 30%; background: var(--mini-side); display: flex; flex-direction: column; gap: 4px; padding: 7px 5px; }
.rl-theme-swatch .mini-side i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }
.rl-theme-swatch .mini-side i:first-child { background: var(--mini-accent); width: 80%; }
[data-theme="light"] .mini-side { box-shadow: inset -1px 0 0 rgba(0,0,0,.08); }
[data-theme="light"] .mini-side i { background: rgba(0,0,0,.15); }
.rl-theme-swatch .mini-main { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.rl-theme-swatch .mini-bar { height: 7px; border-radius: 3px; background: var(--mini-accent); width: 70%; }
.rl-theme-swatch .mini-line { height: 4px; border-radius: 2px; background: rgba(128,128,128,.28); }
.rl-theme-swatch .mini-line.s { width: 55%; }
.rl-theme-swatch .mini-btn { margin-top: auto; align-self: flex-end; width: 16px; height: 7px; border-radius: 3px; background: var(--mini-accent); }
.rl-theme-swatch .mini-check {
    position: absolute; top: 4px; inset-inline-end: 4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mini-accent); color: #fff; font-size: .7rem; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.rl-theme-swatch .nm { text-align: center; opacity: .8; }
.rl-theme-swatch:hover .mini { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 16px -8px rgba(0,0,0,.45); }
.rl-theme-swatch:focus-visible { outline: none; }
.rl-theme-swatch:focus-visible .mini { box-shadow: 0 0 0 2px var(--rl-primary); }
.rl-theme-swatch.active .mini { box-shadow: 0 0 0 2px var(--mini-accent), 0 8px 18px -10px var(--mini-accent); }
.rl-theme-swatch.active .mini-check { opacity: 1; transform: none; }
.rl-theme-swatch.active .nm { opacity: 1; color: var(--rl-primary); }
.rl-theme-foot { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-top: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg); font-size: .8rem; }
.rl-theme-foot a { text-decoration: none; font-weight: 600; color: var(--rl-primary); }
.rl-theme-foot a:hover { text-decoration: underline; }

/* ---------- Appearance page ---------- */
.rl-theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.rl-theme-card {
    display: flex; flex-direction: column; gap: .45rem; padding: .5rem; border: 2px solid var(--bs-border-color); border-radius: var(--rl-r);
    background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 600; font-size: .85rem; text-align: start;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rl-theme-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); }
.rl-theme-card.active { border-color: var(--rl-primary); box-shadow: 0 0 0 .22rem var(--rl-primary-soft); }
.rl-theme-card.active::after { content: "\2713  Selected"; font-size: .7rem; color: var(--rl-primary); font-weight: 700; }
.rl-theme-card .sw { display: block; height: 58px; border-radius: calc(var(--rl-r) - .3rem); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.rl-accent-dot {
    width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); transition: transform .12s, box-shadow .12s;
}
.rl-accent-dot:hover { transform: scale(1.12); }
.rl-accent-dot.active { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px currentColor, inset 0 0 0 2px rgba(255,255,255,.45); color: var(--bs-body-color); }

/* ---------- sign-in / register ---------- */
.rl-auth {
    background-color: var(--rl-side-solid);
    background-image:
        radial-gradient(600px 400px at 15% 15%, color-mix(in srgb, var(--rl-primary) 55%, transparent), transparent 70%),
        radial-gradient(500px 380px at 88% 85%, color-mix(in srgb, var(--rl-primary-dark) 55%, transparent), transparent 70%),
        var(--rl-side-bg);
}
.rl-auth-card {
    border-radius: calc(var(--rl-r) + .4rem);
    background: color-mix(in srgb, var(--bs-body-bg) 97%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.rl-auth-card .rl-logo { width: 38px; height: 38px; font-size: 1.15rem; }
[data-rl-theme="light"] .rl-auth {
    background-color: #f3f4f6;
    background-image: radial-gradient(600px 400px at 15% 15%, rgba(225,29,72,.22), transparent 70%), radial-gradient(500px 380px at 88% 85%, rgba(132,204,22,.25), transparent 70%);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- image picker (masters, item) ---------- */
.rl-image-pick { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.rl-image-pick .rl-image-preview { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rl-r-sm); border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.rl-image-pick.busy { opacity: .55; pointer-events: none; }

/* ---------- company logo ---------- */
img.rl-logo-img { width: auto; min-width: 30px; max-width: 120px; height: 34px; object-fit: contain; background: #fff; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.rl-auth-card img.rl-logo-img { height: 48px; max-width: 180px; }
.pos-logo img.rl-logo-img { height: 32px; max-width: 90px; }
.rl-brand a { min-width: 0; }
.rl-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-doc-logo { max-height: 64px; max-width: 160px; object-fit: contain; }

/* Bootstrap "active" colours follow the theme everywhere (lists, dropdowns, pagination, progress) */
.list-group { --bs-list-group-active-bg: var(--rl-primary); --bs-list-group-active-border-color: var(--rl-primary); --bs-list-group-active-color: #fff; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--rl-primary); --bs-dropdown-link-active-color: #fff; }
.pagination { --bs-pagination-active-bg: var(--rl-primary); --bs-pagination-active-border-color: var(--rl-primary); --bs-pagination-color: var(--rl-primary);
              --bs-pagination-hover-color: var(--rl-primary-dark); --bs-pagination-focus-box-shadow: 0 0 0 .22rem var(--rl-primary-soft); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--rl-primary); }
.list-group-item-action:not(.active):focus-visible { outline: 2px solid var(--rl-primary); outline-offset: -2px; }

/* ---------- master forms: titled sections and option tiles (MasterDef .Sec) ---------- */
.rl-form-sec { display: flex; align-items: center; gap: .65rem; margin-top: .75rem; padding-top: .9rem; border-top: 1px dashed var(--bs-border-color); }
.rl-form-sec .ico { width: 34px; height: 34px; border-radius: .6rem; display: grid; place-items: center; flex-shrink: 0;
    background: var(--rl-primary-soft); color: var(--rl-primary); font-size: 1.05rem; }
.rl-form-sec .t { font-weight: 700; }
.rl-form-sec .h { font-size: .8rem; color: var(--bs-secondary-color); }
.form-check.rl-opt-tile { height: 100%; min-height: 46px; margin: 0; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
    border: 1px solid var(--bs-border-color); border-radius: .65rem; background: var(--bs-body-bg); transition: border-color .15s, background-color .15s; }
.form-check.rl-opt-tile .form-check-input { float: none; margin: 0; flex-shrink: 0; cursor: pointer; }
.form-check.rl-opt-tile .form-check-label { cursor: pointer; flex: 1; }
.form-check.rl-opt-tile:has(.form-check-input:checked) { border-color: var(--rl-primary); background: var(--rl-primary-soft); }
.form-check.rl-opt-tile:has(.form-check-input:checked) .form-check-label { font-weight: 600; }

/* ---------- check box lists (asp:CheckBoxList RepeatLayout="UnorderedList"): aligned grid, box and text together ---------- */
.rl-check-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem 1.25rem; }
.rl-check-grid > li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }
.rl-check-grid > li > input[type=checkbox] { flex-shrink: 0; margin-top: .2rem; width: 1rem; height: 1rem; }
.rl-check-grid > li > label { margin: 0; cursor: pointer; line-height: 1.35; }