:root {
    --brand-violet: #6a1bce;
    --brand-blue: #1e88e5;
    --brand-indigo: #4a3bd1;
    --brand-turquoise: #00b9ad;
    --text-soft: #9aa4d6;
    --brand-gradient: linear-gradient(90deg, #6a1bce 0%, #4a3bd1 50%, #1e88e5 100%);
    --brand-gradient-glow: linear-gradient(135deg, rgba(106, 27, 206, 0.95), rgba(74, 59, 209, 0.9), rgba(30, 136, 229, 0.88));
    --app-bg: #f4f7ff;
    --app-surface: rgba(255, 255, 255, 0.94);
    --app-surface-strong: #151a42;
    --app-text: #1b2147;
    --app-text-soft: var(--text-soft);
    --app-primary: var(--brand-violet);
    --app-primary-deep: var(--brand-indigo);
    --app-accent: var(--brand-turquoise);
    --app-border: rgba(92, 104, 180, 0.14);
    --app-shadow: 0 30px 70px rgba(43, 54, 128, 0.15);
    --app-top-start: #0d1030;
    --app-top-end: #151a42;
    --app-orb-one: rgba(106, 27, 206, 0.26);
    --app-orb-two: rgba(0, 185, 173, 0.18);
    --shell-sidebar-bg: rgba(255, 255, 255, 0.88);
    --shell-sidebar-border: rgba(92, 104, 180, 0.12);
    --shell-brand-text: #1b2147;
    --shell-brand-subtle: #6d76a8;
    --shell-nav-bg: rgba(106, 27, 206, 0.05);
    --shell-nav-text: #516096;
    --shell-nav-active-bg: rgba(106, 27, 206, 0.12);
    --shell-nav-active-text: #3d2db3;
    --shell-content-bg: transparent;
    --shell-table-border: rgba(92, 104, 180, 0.1);
    --shell-check-bg: rgba(255, 255, 255, 0.72);
    --app-radius-xl: 28px;
    --app-radius-lg: 22px;
    --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #0d122d;
    --app-surface: rgba(15, 20, 46, 0.92);
    --app-surface-strong: #eef2ff;
    --app-text: #edf1ff;
    --app-text-soft: #aeb8e8;
    --app-border: rgba(132, 148, 255, 0.14);
    --app-shadow: 0 30px 70px rgba(4, 7, 22, 0.46);
    --app-top-start: #060816;
    --app-top-end: #10173a;
    --app-orb-one: rgba(106, 27, 206, 0.2);
    --app-orb-two: rgba(0, 185, 173, 0.14);
    --shell-sidebar-bg: rgba(9, 13, 36, 0.9);
    --shell-sidebar-border: rgba(255, 255, 255, 0.08);
    --shell-brand-text: #ffffff;
    --shell-brand-subtle: rgba(231, 235, 255, 0.6);
    --shell-nav-bg: rgba(255, 255, 255, 0.04);
    --shell-nav-text: rgba(235, 238, 255, 0.78);
    --shell-nav-active-bg: rgba(106, 27, 206, 0.16);
    --shell-nav-active-text: #ffffff;
    --shell-content-bg: transparent;
    --shell-table-border: rgba(132, 148, 255, 0.12);
    --shell-check-bg: rgba(21, 27, 62, 0.78);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Cairo", sans-serif;
    background:
        radial-gradient(circle at top right, var(--app-orb-one), transparent 24%),
        radial-gradient(circle at top left, var(--app-orb-two), transparent 18%),
        linear-gradient(180deg, var(--app-top-start) 0%, var(--app-top-end) 26%, var(--app-bg) 26%, var(--app-bg) 100%);
    color: var(--app-text);
    min-height: 100vh;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 18%, rgba(106, 27, 206, 0.08), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(30, 136, 229, 0.1), transparent 24%);
    pointer-events: none;
    z-index: -2;
}

a {
    text-decoration: none;
}

.marketing-body {
    background:
        radial-gradient(circle at top right, var(--app-orb-one), transparent 24%),
        radial-gradient(circle at top left, var(--app-orb-two), transparent 18%),
        linear-gradient(180deg, var(--app-top-start) 0%, var(--app-top-end) 26%, var(--app-bg) 26%, var(--app-bg) 100%);
}

.dashboard-body {
    background:
        radial-gradient(circle at top right, rgba(106, 27, 206, 0.14), transparent 26%),
        radial-gradient(circle at top left, rgba(30, 136, 229, 0.12), transparent 20%),
        linear-gradient(180deg, #fafcff 0%, #f2f6ff 100%);
}

html[data-theme="dark"] .dashboard-body {
    background:
        radial-gradient(circle at top right, rgba(106, 27, 206, 0.18), transparent 26%),
        radial-gradient(circle at top left, rgba(30, 136, 229, 0.14), transparent 20%),
        linear-gradient(180deg, #070b1d 0%, #0d122d 100%);
}

.app-shell {
    overflow-x: clip;
}

.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    overflow: hidden;
}

.auth-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    pointer-events: none;
}

.auth-orb--one {
    width: 26rem;
    height: 26rem;
    top: 3rem;
    inset-inline-end: -5rem;
    background: radial-gradient(circle, rgba(106, 27, 206, 0.28), transparent 68%);
}

.auth-orb--two {
    width: 22rem;
    height: 22rem;
    bottom: 2rem;
    inset-inline-start: -4rem;
    background: radial-gradient(circle, rgba(0, 185, 173, 0.18), transparent 68%);
}

.auth-card {
    max-width: 980px;
    margin-inline: auto;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(242, 246, 255, 0.96)),
        var(--app-surface);
    box-shadow: 0 30px 80px rgba(25, 33, 90, 0.16);
}

.auth-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 2rem;
    padding: 2.2rem;
    align-items: center;
}

.auth-title {
    /*font-size: clamp(2rem, 4vw, 3.75rem);*/
    margin: 1rem 0;
    color: var(--app-surface-strong);
}

.auth-lead {
    color: var(--app-text-soft);
    line-height: 1.9;
    max-width: 34rem;
}

.auth-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(92, 104, 180, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.auth-page {
    isolation: isolate;
    background:
        radial-gradient(circle at 15% 12%, rgba(0, 185, 173, .18), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(106, 27, 206, .24), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #edf4ff 45%, #f7f1ff 100%);
}

.auth-page--compact .container-xl {
    max-width: 760px;
}

.auth-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .42;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(106, 27, 206, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 136, 229, .08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

.auth-language-switch {
    position: absolute;
    top: 1.35rem;
    inset-inline-end: 1.35rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .58rem 1rem;
    border-radius: 999px;
    color: var(--brand-violet);
    font-weight: 900;
    text-decoration: none;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(154, 164, 214, .25);
    box-shadow: 0 18px 45px rgba(74, 59, 209, .12);
    backdrop-filter: blur(16px);
}

.auth-language-switch:hover {
    color: #fff;
    background: var(--brand-gradient);
}

.auth-card--premium {
    max-width: 1120px;
    position: relative;
    border-radius: 42px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74)),
        radial-gradient(circle at 12% 18%, rgba(0, 185, 173, .16), transparent 24%),
        radial-gradient(circle at 92% 14%, rgba(106, 27, 206, .18), transparent 28%);
    backdrop-filter: blur(26px);
    box-shadow:
        0 34px 120px rgba(20, 31, 76, .18),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.auth-card--narrow {
    max-width: 620px;
}

.auth-card__content--single {
    grid-template-columns: 1fr !important;
}

.auth-card--premium::before {
    content: "";
    position: absolute;
    inset: 1.15rem;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, .68);
    pointer-events: none;
}

.auth-card--premium .auth-card__content {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 440px);
    gap: 2.6rem;
    padding: clamp(1.4rem, 3vw, 3.25rem);
}

.auth-copy {
    position: relative;
    z-index: 1;
    padding: clamp(.4rem, 2vw, 1.2rem);
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    box-shadow: 0 14px 40px rgba(106, 27, 206, .13);
}

.auth-title {
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.auth-lead {
    font-size: 1.04rem;
}

.auth-edition-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.6rem 0 1.2rem;
}

.auth-edition-strip span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .62rem .95rem;
    border-radius: 999px;
    color: #17204d;
    font-weight: 800;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(154, 164, 214, .2);
    box-shadow: 0 12px 30px rgba(30, 42, 92, .08);
}

.auth-edition-strip i {
    color: var(--brand-turquoise);
}

.auth-highlights {
    display: grid;
    gap: .85rem;
    margin-top: 1.25rem;
}

.auth-highlights div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .15rem .85rem;
    align-items: center;
    padding: .9rem 1rem;
    border-radius: 22px;
    border: 1px solid rgba(154, 164, 214, .16);
    background: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .38));
}

.auth-highlights i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 30px rgba(74, 59, 209, .2);
}

.auth-highlights strong {
    color: #101846;
    font-weight: 900;
}

.auth-highlights span {
    color: var(--text-soft);
    line-height: 1.65;
    font-size: .92rem;
}

.auth-form--premium {
    position: relative;
    z-index: 1;
    padding: clamp(1.15rem, 2vw, 1.55rem);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 251, 255, .78)),
        radial-gradient(circle at top right, rgba(106, 27, 206, .12), transparent 28%);
    border: 1px solid rgba(154, 164, 214, .2);
    box-shadow:
        0 28px 70px rgba(17, 24, 61, .14),
        inset 0 1px 0 rgba(255, 255, 255, .74);
}

.auth-form__head {
    padding: .4rem .2rem .7rem;
}

.auth-form__head span {
    color: var(--brand-violet);
    font-weight: 900;
    font-size: .82rem;
}

.auth-form__head h1 {
    margin: .25rem 0 .35rem;
    color: #11183d;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 900;
}

.auth-form__head h2 {
    margin: .25rem 0 .35rem;
    color: #11183d;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
}

.auth-form__head p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.auth-form-links {
    display: flex;
    justify-content: flex-end;
    margin-top: -.25rem;
}

.auth-form-links--center {
    justify-content: center;
}

.auth-form-links a {
    color: var(--brand-violet);
    font-weight: 900;
    text-decoration: none;
}

.auth-form-links a:hover {
    color: var(--brand-blue);
}

.auth-status {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    font-weight: 800;
    line-height: 1.7;
}

.auth-status--success {
    color: #087267;
    background: rgba(0, 185, 173, .12);
    border: 1px solid rgba(0, 185, 173, .22);
}

.auth-field .form-label {
    margin-bottom: .45rem;
    font-weight: 900;
    color: #151d48;
}

.auth-input-shell {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 58px;
    padding-inline: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(154, 164, 214, .22);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.auth-input-shell:focus-within {
    border-color: rgba(106, 27, 206, .46);
    box-shadow: 0 18px 42px rgba(106, 27, 206, .13);
    transform: translateY(-1px);
}

.auth-input-shell i {
    color: var(--brand-indigo);
    font-size: 1.1rem;
}

.auth-input-shell .form-control {
    min-height: 54px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dir-rtl .auth-input-shell .form-control {
    direction: rtl;
    text-align: right;
}

.dir-ltr .auth-input-shell .form-control {
    direction: ltr;
    text-align: left;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    background: var(--brand-gradient);
    box-shadow: 0 22px 44px rgba(74, 59, 209, .26);
}

.auth-submit i {
    font-size: 1.35rem;
}

html[dir="ltr"] .auth-submit i {
    transform: scaleX(-1);
}

.auth-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: .15rem 0 0;
    color: var(--text-soft);
    font-size: .88rem;
    text-align: center;
}

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, rgba(13, 16, 48, 0.96), rgba(21, 26, 66, 0.82));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    animation: navbarDrop 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(92, 104, 180, 0.12);
    background: rgba(255, 255, 255, 0.84);
    color: var(--app-surface-strong);
    box-shadow: 0 18px 38px rgba(43, 54, 128, 0.08);
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-smooth),
        background-color var(--transition-smooth),
        color var(--transition-smooth);
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(43, 54, 128, 0.14);
    border-color: rgba(106, 27, 206, 0.22);
}

.theme-toggle__copy {
    display: grid;
    line-height: 1.1;
    text-align: start;
}

.theme-toggle__eyebrow {
    font-size: 0.72rem;
    color: var(--app-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.theme-toggle__label {
    font-size: 0.92rem;
    font-weight: 800;
}

.theme-toggle--navbar {
    min-width: 172px;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-toggle--navbar .theme-toggle__eyebrow {
    color: rgba(230, 234, 255, 0.72);
}

.theme-toggle--navbar:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.22);
}

.theme-toggle--dashboard {
    min-width: 178px;
}

.theme-toggle--icon {
    min-width: 0;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 14px;
    justify-content: center;
    padding: 0;
    display: inline-flex;
}

.theme-toggle--icon .theme-toggle__copy {
    display: none;
}

.theme-toggle--icon i {
    font-size: 1.05rem;
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(16, 21, 48, 0.88);
    border-color: rgba(130, 144, 243, 0.18);
    color: #f4f6ff;
    box-shadow: 0 18px 44px rgba(5, 8, 24, 0.3);
}

html[data-theme="dark"] .theme-toggle--navbar {
    background: rgba(12, 16, 38, 0.72);
    border-color: rgba(255, 255, 255, 0.1);
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(106, 27, 206, 0.35);
}

.hero-section {
    position: relative;
    padding: 4rem 0 3rem;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}

.hero-orb,
.hero-grid {
    pointer-events: none;
    position: absolute;
}

.hero-orb {
    border-radius: 999px;
    filter: blur(20px);
    opacity: 0.75;
    z-index: -1;
}

.hero-orb--violet {
    width: 22rem;
    height: 22rem;
    top: 2rem;
    right: -4rem;
    background: radial-gradient(circle, rgba(106, 27, 206, 0.42), transparent 70%);
    animation: floatOrb 12s ease-in-out infinite;
}

.hero-orb--blue {
    width: 18rem;
    height: 18rem;
    left: -3rem;
    bottom: 1rem;
    background: radial-gradient(circle, rgba(0, 185, 173, 0.26), transparent 70%);
    animation: floatOrbReverse 14s ease-in-out infinite;
}

.hero-grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 82%);
    z-index: -1;
}

.hero-copy {
    position: relative;
}

.hero-badge,
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-title {
    font-size: clamp(2.8rem, 4vw, 5.25rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.hero-title span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    max-width: 52rem;
    color: rgba(232, 236, 255, 0.82);
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 2rem;
}

.hero-panel {
    position: relative;
    border-radius: var(--app-radius-xl);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(138, 155, 255, 0.18);
    padding: 1.5rem;
    min-height: 100%;
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.hero-panel__glow {
    position: absolute;
    inset: auto -4rem -5rem auto;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, rgba(106, 27, 206, 0.45), transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
}

.hero-panel__content {
    position: relative;
}

.hero-panel__label {
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

.stack-diagram {
    display: grid;
    gap: 0.85rem;
    margin: 1.5rem 0;
}

.stack-layer {
    border-radius: 20px;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 700;
    transform-origin: center;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth);
}

.stack-layer:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.22);
}

.stack-layer--top {
    background: linear-gradient(135deg, rgba(106, 27, 206, 0.3), rgba(30, 136, 229, 0.12));
}

.stack-layer--base {
    background: linear-gradient(135deg, rgba(0, 185, 173, 0.26), rgba(74, 59, 209, 0.18));
}

.hero-panel__note {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
}

.hero-panel__note span {
    display: block;
    margin-top: 0.4rem;
    font-weight: 400;
    color: rgba(232, 236, 255, 0.7);
}

.hero-metrics {
    margin-top: 2rem;
}

.metric-card,
.foundation-card,
.foundation-banner,
.module-pill,
.roadmap-item {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(12px);
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-smooth),
        background-color var(--transition-smooth);
}

.metric-card {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.96)),
        var(--app-surface);
}

.metric-topline {
    height: 4px;
    width: 100%;
    border-radius: 999px;
    background: var(--brand-gradient);
    margin-bottom: 1.1rem;
    box-shadow: 0 10px 24px rgba(74, 59, 209, 0.22);
}

.metric-shine,
.module-pill__shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(106, 27, 206, 0.14), transparent 32%);
    pointer-events: none;
}

.metric-card::after,
.foundation-card::after,
.module-pill::after,
.roadmap-item::after,
.foundation-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
    transform: translateX(-120%);
    transition: transform 700ms ease;
    pointer-events: none;
}

.metric-card:hover::after,
.foundation-card:hover::after,
.module-pill:hover::after,
.roadmap-item:hover::after,
.foundation-banner:hover::after {
    transform: translateX(120%);
}

.metric-label {
    display: block;
    color: var(--app-text-soft);
    margin-bottom: 0.8rem;
}

.metric-value {
    display: block;
    font-size: 2rem;
    color: var(--app-surface-strong);
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
}

.metric-detail {
    color: var(--app-text-soft);
    line-height: 1.8;
}

.content-section {
    padding: 4.5rem 0;
}

.content-section--muted {
    background: linear-gradient(180deg, rgba(106, 27, 206, 0.05), rgba(30, 136, 229, 0.03));
}

.section-heading {
    max-width: 48rem;
    margin-bottom: 2.5rem;
}

.section-heading.text-center {
    margin-inline: auto;
}

.section-eyebrow {
    background: rgba(106, 27, 206, 0.12);
    color: var(--app-primary);
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--app-surface-strong);
}

.section-lead {
    color: var(--app-text-soft);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 0;
}

.foundation-card {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94)),
        var(--app-surface);
}

.foundation-card h3 {
    font-size: 1.2rem;
    color: var(--app-surface-strong);
    margin-bottom: 0.8rem;
}

.foundation-card p {
    color: var(--app-text-soft);
    line-height: 1.85;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.module-pill {
    padding: 1.4rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.95)),
        var(--app-surface);
}

.module-pill__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.module-pill__dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    box-shadow: 0 0 0 6px rgba(106, 27, 206, 0.12);
}

.module-pill__title {
    font-size: 1.05rem;
    margin: 0;
    color: var(--app-surface-strong);
}

.module-pill__description {
    color: var(--app-text-soft);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.foundation-banner {
    padding: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 1.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 246, 255, 0.88)),
        var(--app-surface);
}

.foundation-banner h2 {
    color: var(--app-surface-strong);
    margin-bottom: 1rem;
}

.foundation-banner p {
    color: var(--app-text-soft);
    line-height: 1.9;
}

.foundation-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.foundation-banner__meta span {
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-surface-strong);
    font-weight: 700;
}

.roadmap-list {
    display: grid;
    gap: 1rem;
}

.roadmap-item {
    padding: 1.4rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 248, 255, 0.94)),
        var(--app-surface);
}

.roadmap-step {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 18px;
    background: var(--brand-gradient-glow);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 16px 28px rgba(74, 59, 209, 0.24);
}

.interactive-panel:hover,
.metric-card:hover,
.module-pill:hover,
.foundation-banner:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow:
        0 42px 90px rgba(43, 54, 128, 0.22),
        0 0 0 1px rgba(106, 27, 206, 0.12);
    border-color: rgba(106, 27, 206, 0.28);
}

.metric-card:hover .metric-topline,
.module-pill:hover .module-pill__dot,
.roadmap-item:hover .roadmap-step {
    filter: saturate(1.18) brightness(1.08);
}

.glass-panel {
    box-shadow:
        0 30px 70px rgba(17, 22, 68, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-actions .btn,
.locale-switch,
.app-navbar .nav-link,
.navbar-brand {
    transition:
        transform var(--transition-smooth),
        color var(--transition-smooth),
        background-color var(--transition-smooth),
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth),
        opacity var(--transition-smooth);
}

.hero-actions .btn:hover,
.locale-switch:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(13, 16, 48, 0.18);
}

.btn.btn-light {
    background: linear-gradient(180deg, #ffffff, #eef3ff);
    border: 0;
}

.btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
}

.app-navbar .nav-link {
    position: relative;
}

.app-navbar .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-smooth);
}

.app-navbar .nav-link:hover::after {
    transform: scaleX(1);
}

.reveal {
    opacity: 0;
    animation-fill-mode: forwards;
}

.reveal-rise {
    animation: revealRise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.reveal-float {
    animation: revealFloat 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }
.reveal-delay-4 { animation-delay: 0.32s; }
.reveal-delay-5 { animation-delay: 0.40s; }
.reveal-delay-6 { animation-delay: 0.48s; }

.site-footer {
    position: relative;
    padding: 1rem 0 3rem;
}

.footer-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2rem;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(157, 168, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(13, 16, 48, 0.92), rgba(21, 26, 66, 0.94)),
        var(--brand-gradient-glow);
    box-shadow: 0 32px 80px rgba(13, 16, 48, 0.28);
}

.footer-shell::before {
    content: "";
    position: absolute;
    inset: auto auto -60px -40px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 185, 173, 0.22), transparent 70%);
    pointer-events: none;
}

.footer-shell::after {
    content: "";
    position: absolute;
    top: -80px;
    inset-inline-end: -20px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106, 27, 206, 0.24), transparent 72%);
    pointer-events: none;
}

.footer-brand,
.footer-links,
.footer-meta {
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-brand h3 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: 1.4rem;
}

.footer-brand p {
    margin: 0;
    color: rgba(226, 231, 255, 0.76);
    line-height: 1.8;
    max-width: 34rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-links a {
    color: #fff;
    opacity: 0.84;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), color var(--transition-smooth);
}

.footer-links a:hover {
    opacity: 1;
    color: #fff;
    transform: translateX(-6px);
}

.dir-ltr .footer-links a:hover {
    transform: translateX(6px);
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.footer-meta span {
    padding: 0.8rem 1rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@keyframes revealRise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFloat {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes navbarDrop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatOrb {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-20px, 22px, 0) scale(1.04);
    }
}

@keyframes floatOrbReverse {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(18px, -16px, 0) scale(1.06);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
    }
}

.roadmap-item h3 {
    color: var(--app-surface-strong);
    margin-bottom: 0.45rem;
    font-size: 1.15rem;
}

.roadmap-item p {
    margin: 0;
    color: var(--app-text-soft);
    line-height: 1.8;
}

@media (max-width: 991.98px) {
    .hero-section {
        padding-top: 2rem;
    }

    .foundation-banner {
        grid-template-columns: 1fr;
    }

    .foundation-banner__meta {
        justify-content: flex-start;
    }

    .footer-shell {
        grid-template-columns: 1fr;
    }

    .footer-meta {
        justify-content: flex-start;
    }

    .platform-permission-layout {
        grid-template-columns: 1fr;
    }
}

.admin-shell {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns var(--transition-smooth);
}

.admin-shell.is-sidebar-collapsed {
    grid-template-columns: 96px minmax(0, 1fr);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.5rem;
    background: var(--shell-sidebar-bg);
    border-inline-end: 1px solid var(--shell-sidebar-border);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: hidden;
    transition: padding var(--transition-smooth), gap var(--transition-smooth);
}

.admin-sidebar-backdrop,
.admin-mobile-menu {
    display: none;
}

.admin-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.admin-sidebar__collapse {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(124, 93, 255, 0.24);
    border-radius: 14px;
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-primary-deep);
    flex-shrink: 0;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}

.admin-sidebar__collapse:hover {
    transform: translateY(-2px);
    background: var(--shell-nav-active-bg);
    color: var(--shell-nav-active-text);
}

html[data-theme="dark"] .admin-sidebar__collapse {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--shell-brand-text);
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand small {
    color: var(--shell-brand-subtle);
}

.admin-nav {
    display: grid;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-inline-end: 0.2rem;
    padding-inline-end: 0.15rem;
    scrollbar-width: thin;
    align-content: start;
    padding-top: 10px;
}

.admin-nav__group {
    display: grid;
    gap: 0.45rem;
}

.admin-nav__toggle {
    width: 100%;
    text-align: start;
    position: relative;
    padding-inline-end: 2.2rem;
    cursor: pointer;
    appearance: none;
}

.admin-nav__toggle::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.95rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--transition-smooth);
}

.admin-nav__link {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    color: var(--shell-nav-text);
    background: var(--shell-nav-bg);
    border: 1px solid transparent;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}

.admin-nav__submenu {
    display: none;
    gap: 0.45rem;
}

.admin-nav__group.is-open .admin-nav__submenu {
    display: grid;
}

.admin-nav__group.is-open .admin-nav__toggle::after {
    transform: translateY(-40%) rotate(225deg);
}

.admin-nav__sublink {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.72rem 0.95rem;
    border-radius: 14px;
    color: var(--shell-nav-text);
    background: rgba(106, 27, 206, 0.03);
    border: 1px solid transparent;
    margin-inline-start: 0.6rem;
    font-size: 0.92rem;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}

.admin-nav__icon {
    width: 1.15rem;
    min-width: 1.15rem;
    text-align: center;
    font-size: 1rem;
}

.admin-nav__label {
    transition: opacity var(--transition-smooth), width var(--transition-smooth);
}

.admin-nav__sublink:hover,
.admin-nav__sublink.is-active {
    color: var(--shell-nav-active-text);
    background: var(--shell-nav-active-bg);
    border-color: rgba(124, 93, 255, 0.24);
    transform: translateY(-2px);
}

.admin-nav__link:hover,
.admin-nav__link.is-active {
    color: var(--shell-nav-active-text);
    background: var(--shell-nav-active-bg);
    border-color: rgba(124, 93, 255, 0.24);
    transform: translateY(-2px);
}

.admin-sidebar__footer {
    margin-top: auto;
    flex-shrink: 0;
}

.admin-sidebar__footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.admin-shell.is-sidebar-collapsed .admin-sidebar {
    padding: 1.25rem 0.85rem;
    gap: 1.35rem;
}

.admin-shell.is-sidebar-collapsed .admin-brand {
    justify-content: center;
}

.admin-shell.is-sidebar-collapsed .admin-brand > div,
.admin-shell.is-sidebar-collapsed .admin-nav__label,
.admin-shell.is-sidebar-collapsed .admin-sidebar__footer .btn span {
    display: none;
}

.admin-shell.is-sidebar-collapsed .admin-sidebar__top {
    flex-direction: column;
}

.admin-shell.is-sidebar-collapsed .admin-nav {
    justify-items: center;
}

.admin-shell.is-sidebar-collapsed .admin-nav__link,
.admin-shell.is-sidebar-collapsed .admin-nav__sublink {
    width: 100%;
    justify-content: center;
    padding-inline: 0.72rem;
}

.admin-shell.is-sidebar-collapsed .admin-nav__sublink {
    margin-inline-start: 0;
}

.admin-shell.is-sidebar-collapsed .admin-nav__toggle::after,
.admin-shell.is-sidebar-collapsed .admin-nav__submenu {
    display: none !important;
}

.admin-shell.is-sidebar-collapsed .admin-sidebar__footer {
    display: grid;
    gap: 0.5rem;
}

.admin-shell.is-sidebar-collapsed .admin-sidebar__footer .btn {
    width: 100%;
    padding-inline: 0.7rem;
}

.admin-sidebar .btn-light,
.admin-sidebar .btn-outline-light {
    border-color: rgba(106, 27, 206, 0.18);
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-primary-deep);
}

.admin-sidebar .btn-outline-light:hover,
.admin-sidebar .btn-light:hover {
    background: rgba(106, 27, 206, 0.14);
    color: var(--app-primary-deep);
}

html[data-theme="dark"] .admin-sidebar .btn-light,
html[data-theme="dark"] .admin-sidebar .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.admin-content {
    padding: 1.5rem;
    background: var(--shell-content-bg);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    align-items: center;
    position: relative;
    z-index: 5200;
}

.admin-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 18px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 16px 34px rgba(43, 54, 128, 0.1);
    position: relative;
    z-index: 5200;
    overflow: visible;
}

.admin-toolbar__btn {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 14px;
    border: 1px solid rgba(124, 93, 255, 0.22);
    color: var(--app-primary-deep);
    background: rgba(106, 27, 206, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition:
        transform var(--transition-smooth),
        color var(--transition-smooth),
        background-color var(--transition-smooth),
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.admin-toolbar__btn:hover {
    transform: translateY(-2px);
    color: var(--shell-nav-active-text);
    background: var(--shell-nav-active-bg);
    border-color: rgba(124, 93, 255, 0.34);
}

.admin-toolbar__btn i {
    font-size: 1rem;
    line-height: 1;
}

.admin-toolbar__dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: #14b86e;
    position: absolute;
    top: 0.4rem;
    inset-inline-end: 0.4rem;
    box-shadow: 0 0 0 3px rgba(20, 184, 110, 0.22);
}

.admin-toolbar__user {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(124, 93, 255, 0.2);
    padding: 0.35rem 0.75rem 0.35rem 0.38rem;
    background: rgba(106, 27, 206, 0.07);
    color: var(--app-primary-deep);
    max-width: 220px;
}

.admin-toolbar__avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(106, 27, 206, 0.24);
}

.admin-toolbar__name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-toolbar__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

html[data-theme="dark"] .admin-toolbar {
    background: rgba(12, 17, 40, 0.84);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 32px rgba(3, 7, 22, 0.35);
}

html[data-theme="dark"] .admin-toolbar__btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f6ff;
}

html[data-theme="dark"] .admin-toolbar__btn:hover {
    background: rgba(106, 27, 206, 0.28);
    border-color: rgba(130, 144, 243, 0.34);
    color: #fff;
}

html[data-theme="dark"] .admin-toolbar__user {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f4f6ff;
}

.admin-header__eyebrow {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: var(--brand-indigo);
    font-weight: 700;
}

.admin-header__title {
    margin: 0;
    font-size: clamp(1.9rem, 1.5vw, 2.8rem);
    color: var(--app-surface-strong);
}

.admin-flash {
    padding: 0.85rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 185, 173, 0.14), rgba(30, 136, 229, 0.12));
    color: var(--app-surface-strong);
    border: 1px solid rgba(0, 185, 173, 0.18);
    font-weight: 700;
}

.admin-main {
    display: grid;
    gap: 1.5rem;
}

.admin-grid {
    display: grid;
    gap: 1rem;
}

.admin-grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-section,
.admin-form-card,
.admin-table-card,
.admin-role-card,
.admin-empty-card {
    border-radius: 24px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96));
    box-shadow: var(--app-shadow);
}

.admin-section,
.admin-form-card {
    padding: 1.5rem;
}

.admin-table-card {
    overflow: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.admin-table-card .table {
    min-width: 760px;
}

.admin-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-section__head h2,
.admin-form-card h2 {
    margin: 0 0 0.4rem;
    color: var(--app-surface-strong);
    font-size: 1.25rem;
}

.admin-section__head p,
.admin-muted {
    color: var(--app-text-soft);
}

.admin-company-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.95fr);
    gap: 1.5rem;
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(160px, 0.7fr)) auto;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.admin-stack {
    display: grid;
    gap: 1.5rem;
}

.admin-form-panel {
    display: grid;
    gap: 1.5rem;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-form-grid__full {
    grid-column: 1 / -1;
}

.admin-table th {
    font-size: 0.84rem;
    color: var(--app-text-soft);
    font-weight: 700;
    border-bottom-width: 1px;
}

.admin-table td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-color: var(--shell-table-border);
}

.status-pill,
.tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-pill {
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-primary);
}

.status-pill.is-active {
    background: rgba(0, 185, 173, 0.12);
    color: #007970;
}

.status-pill.is-muted {
    background: rgba(154, 164, 214, 0.16);
    color: #67719f;
}

.admin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-row-actions .btn,
.admin-row-actions button,
.admin-row-actions a {
    min-height: 2.2rem;
}

.admin-actions-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.admin-actions-menu summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.admin-actions-menu summary::-webkit-details-marker {
    display: none;
}

.admin-actions-menu__toggle {
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(92, 104, 180, 0.18);
    background: rgba(106, 27, 206, 0.06);
    color: var(--app-primary-deep);
    font-weight: 800;
    transition: background-color var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth);
}

.admin-actions-menu__toggle:hover,
.admin-actions-menu[open] .admin-actions-menu__toggle {
    transform: translateY(-1px);
    border-color: rgba(106, 27, 206, 0.28);
    background: var(--shell-nav-active-bg);
    color: var(--shell-nav-active-text);
}

.admin-actions-menu__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.45rem);
    z-index: 20;
    width: max-content;
    min-width: 190px;
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
    border-radius: 16px;
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 52px rgba(37, 47, 112, 0.18);
}

.admin-actions-menu__item {
    width: 100%;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-surface-strong);
    font-weight: 700;
    padding: 0.45rem 0.7rem;
    text-align: start;
    text-decoration: none;
}

.admin-actions-menu__item:hover {
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-primary-deep);
}

.admin-actions-menu__item.is-primary {
    color: var(--brand-blue);
}

.admin-actions-menu__item.is-success {
    color: #007970;
}

.admin-actions-menu__item.is-danger {
    color: #d12222;
}

.admin-actions-menu__item i {
    width: 1rem;
    text-align: center;
}

.admin-actions-menu form {
    margin: 0;
}

html[data-theme="dark"] .admin-actions-menu__panel {
    border-color: rgba(130, 144, 243, 0.22);
    background: rgba(15, 21, 48, 0.98);
    box-shadow: 0 24px 52px rgba(3, 7, 22, 0.38);
}

html[data-theme="dark"] .admin-actions-menu__item {
    color: #edf1ff;
}

.tag-chip {
    background: rgba(106, 27, 206, 0.1);
    color: var(--app-primary);
}

.tag-chip--soft {
    background: rgba(30, 136, 229, 0.1);
    color: #2668c9;
}

.admin-role-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.workspace-tabs-shell {
    margin-top: 1rem;
}

.workspace-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.workspace-tab-trigger {
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: rgba(106, 27, 206, 0.05);
    color: var(--app-surface-strong);
    border-radius: 999px;
    padding: 0.58rem 1rem;
    font-weight: 700;
    line-height: 1.2;
    transition:
        transform var(--transition-smooth),
        background-color var(--transition-smooth),
        border-color var(--transition-smooth),
        color var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.workspace-tab-trigger:hover {
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, 0.26);
    background: rgba(106, 27, 206, 0.11);
}

.workspace-tab-trigger.is-active {
    border-color: transparent;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 30px rgba(74, 59, 209, 0.24);
}

html[data-theme="dark"] .workspace-tab-trigger {
    border-color: rgba(130, 144, 243, 0.2);
    background: rgba(106, 27, 206, 0.18);
    color: #edf1ff;
}

html[data-theme="dark"] .workspace-tab-trigger:hover {
    border-color: rgba(130, 144, 243, 0.35);
    background: rgba(106, 27, 206, 0.26);
}

.platform-role-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.platform-role-card {
    border-radius: 20px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96));
    box-shadow: var(--app-shadow);
    padding: 1rem;
    display: grid;
    gap: 0.7rem;
}

.platform-role-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.platform-role-card__head h3 {
    margin: 0;
    color: var(--app-surface-strong);
    font-size: 1.1rem;
}

.platform-role-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--app-text-soft);
    font-size: 0.92rem;
}

.platform-role-card__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.platform-role-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.platform-permission-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
}

.platform-permission-groups {
    display: grid;
    gap: 0.5rem;
}

.platform-permission-group {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(92, 104, 180, 0.12);
    background: rgba(106, 27, 206, 0.05);
    color: var(--app-surface-strong);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0.9rem;
    font-weight: 700;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth);
}

.platform-permission-group span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(106, 27, 206, 0.14);
}

.platform-permission-group:hover,
.platform-permission-group.is-active {
    border-color: rgba(106, 27, 206, 0.25);
    background: rgba(106, 27, 206, 0.12);
    transform: translateY(-2px);
}

.platform-permission-panels {
    border-radius: 18px;
    border: 1px solid rgba(92, 104, 180, 0.12);
    background: rgba(255, 255, 255, 0.78);
    padding: 1rem;
}

.platform-permission-panel {
    display: none;
}

.platform-permission-panel.is-active {
    display: block;
}

.platform-permission-panel h3 {
    margin: 0 0 0.8rem;
    color: var(--app-surface-strong);
    font-size: 1.05rem;
}

.platform-permission-checks {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.module-manager-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.module-upload-card {
    border-radius: 22px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96));
    box-shadow: var(--app-shadow);
    padding: 1rem;
}

.module-upload-form {
    display: grid;
    gap: 0.8rem;
}

.module-upload-dropzone {
    display: grid;
    place-items: center;
    gap: 0.45rem;
    min-height: 170px;
    border-radius: 18px;
    border: 2px dashed rgba(106, 27, 206, 0.28);
    background: linear-gradient(135deg, rgba(106, 27, 206, 0.05), rgba(30, 136, 229, 0.03));
    color: var(--app-surface-strong);
    text-align: center;
    padding: 1rem;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth);
    cursor: pointer;
}

.module-upload-dropzone:hover {
    transform: translateY(-3px);
    border-color: rgba(106, 27, 206, 0.48);
    background: linear-gradient(135deg, rgba(106, 27, 206, 0.08), rgba(30, 136, 229, 0.06));
}

.module-upload-dropzone__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(74, 59, 209, 0.3);
}

.module-upload-dropzone span {
    color: var(--app-text-soft);
}

.module-upload-actions {
    display: flex;
    justify-content: flex-end;
}

.module-manager-card {
    border-radius: 22px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96));
    box-shadow: var(--app-shadow);
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.module-manager-card:hover {
    transform: translateY(-5px);
    border-color: rgba(106, 27, 206, 0.26);
    box-shadow: 0 36px 66px rgba(43, 54, 128, 0.18);
}

.module-manager-card__head {
    display: grid;
    gap: 0.75rem;
}

.module-manager-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.module-manager-card__icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 14px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-manager-card h3 {
    margin: 0 0 0.35rem;
    color: var(--app-surface-strong);
    font-size: 1.06rem;
}

.module-manager-badges,
.module-manager-card__meta,
.module-manager-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.module-manager-card__provider {
    font-size: 0.82rem;
    color: var(--app-text-soft);
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(92, 104, 180, 0.2);
    word-break: break-word;
}

html[data-theme="dark"] .module-manager-card {
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.96), rgba(12, 17, 40, 0.92));
    border-color: rgba(130, 144, 243, 0.14);
}

html[data-theme="dark"] .platform-role-card,
html[data-theme="dark"] .platform-permission-panels {
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.96), rgba(12, 17, 40, 0.92));
    border-color: rgba(130, 144, 243, 0.14);
}

html[data-theme="dark"] .platform-permission-group {
    border-color: rgba(130, 144, 243, 0.16);
    background: rgba(106, 27, 206, 0.14);
    color: #f3f6ff;
}

html[data-theme="dark"] .platform-permission-group span {
    background: rgba(130, 144, 243, 0.22);
}

html[data-theme="dark"] .module-upload-card {
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.96), rgba(12, 17, 40, 0.92));
    border-color: rgba(130, 144, 243, 0.14);
}

html[data-theme="dark"] .module-upload-dropzone {
    border-color: rgba(130, 144, 243, 0.3);
    background: linear-gradient(135deg, rgba(106, 27, 206, 0.12), rgba(30, 136, 229, 0.08));
}

html[data-theme="dark"] .module-upload-dropzone:hover {
    border-color: rgba(130, 144, 243, 0.5);
}

html[data-theme="dark"] .module-manager-card__provider {
    border-top-color: rgba(130, 144, 243, 0.2);
}

.admin-role-card,
.admin-empty-card {
    padding: 1.25rem;
}

.admin-role-card h3 {
    margin: 0 0 0.35rem;
    color: var(--app-surface-strong);
    font-size: 1.08rem;
}

.permission-groups {
    display: grid;
    gap: 1rem;
}

.permission-group {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(106, 27, 206, 0.04);
    border: 1px solid rgba(106, 27, 206, 0.08);
}

.permission-group h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--app-surface-strong);
}

.permission-checklist {
    display: grid;
    gap: 0.65rem;
}

.permission-check {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: var(--shell-check-bg);
    border: 1px solid rgba(92, 104, 180, 0.08);
}

.permission-check input {
    accent-color: var(--brand-violet);
}

html[data-theme="dark"] .admin-section,
html[data-theme="dark"] .admin-form-card,
html[data-theme="dark"] .admin-table-card,
html[data-theme="dark"] .admin-role-card,
html[data-theme="dark"] .admin-empty-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .foundation-card,
html[data-theme="dark"] .foundation-banner,
html[data-theme="dark"] .module-pill,
html[data-theme="dark"] .roadmap-item,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] .permission-group,
html[data-theme="dark"] .permission-check {
    background:
        linear-gradient(180deg, rgba(18, 24, 54, 0.96), rgba(12, 17, 40, 0.92)),
        var(--app-surface);
    border-color: rgba(130, 144, 243, 0.14);
}

html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .foundation-card h3,
html[data-theme="dark"] .foundation-banner h2,
html[data-theme="dark"] .roadmap-item h3,
html[data-theme="dark"] .admin-section__head h2,
html[data-theme="dark"] .admin-form-card h2,
html[data-theme="dark"] .admin-role-card h3,
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .module-pill__title,
html[data-theme="dark"] .admin-header__title,
html[data-theme="dark"] .permission-group h3 {
    color: #f3f6ff;
}

html[data-theme="dark"] .roadmap-item p,
html[data-theme="dark"] .foundation-card p,
html[data-theme="dark"] .foundation-banner p,
html[data-theme="dark"] .section-lead,
html[data-theme="dark"] .metric-detail,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .module-pill__description,
html[data-theme="dark"] .admin-muted,
html[data-theme="dark"] .admin-section__head p,
html[data-theme="dark"] .auth-lead,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--app-text-soft);
}

html[data-theme="dark"] .auth-page {
    background:
        radial-gradient(circle at 15% 12%, rgba(0, 185, 173, .14), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(106, 27, 206, .2), transparent 30%),
        linear-gradient(135deg, #070b1d 0%, #0c1230 52%, #111036 100%);
}

html[data-theme="dark"] .auth-card--premium {
    background:
        linear-gradient(135deg, rgba(18, 24, 54, .94), rgba(10, 15, 38, .86)),
        radial-gradient(circle at 12% 18%, rgba(0, 185, 173, .12), transparent 24%),
        radial-gradient(circle at 92% 14%, rgba(106, 27, 206, .18), transparent 28%);
    border-color: rgba(154, 164, 214, .18);
    box-shadow:
        0 34px 120px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .auth-edition-strip span,
html[data-theme="dark"] .auth-highlights div,
html[data-theme="dark"] .auth-input-shell {
    background: rgba(12, 18, 48, .72);
    border-color: rgba(154, 164, 214, .18);
    color: #f4f7ff;
}

html[data-theme="dark"] .auth-highlights strong,
html[data-theme="dark"] .auth-form__head h2,
html[data-theme="dark"] .auth-form__head h1,
html[data-theme="dark"] .auth-field .form-label {
    color: #f6f8ff;
}

html[data-theme="dark"] .auth-language-switch {
    color: #f6f8ff;
    background: rgba(12, 18, 48, .76);
    border-color: rgba(154, 164, 214, .2);
}

html[data-theme="dark"] .auth-status--success {
    color: #8df2e8;
    background: rgba(0, 185, 173, .12);
    border-color: rgba(0, 185, 173, .22);
}

html[data-theme="dark"] .auth-form--premium {
    background:
        linear-gradient(180deg, rgba(18, 24, 54, .88), rgba(10, 15, 38, .8)),
        radial-gradient(circle at top right, rgba(106, 27, 206, .18), transparent 28%);
    border-color: rgba(154, 164, 214, .2);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: rgba(11, 16, 39, 0.86);
    border-color: rgba(130, 144, 243, 0.16);
    color: #f4f6ff;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: rgba(11, 16, 39, 0.95);
    color: #f4f6ff;
    border-color: rgba(106, 27, 206, 0.42);
    box-shadow: 0 0 0 0.25rem rgba(106, 27, 206, 0.16);
}

html[data-theme="dark"] .tag-chip {
    background: rgba(106, 27, 206, 0.18);
    color: #ddd9ff;
}

html[data-theme="dark"] .tag-chip--soft {
    background: rgba(30, 136, 229, 0.16);
    color: #b9d8ff;
}

html[data-theme="dark"] .status-pill {
    background: rgba(106, 27, 206, 0.18);
    color: #ddd9ff;
}

html[data-theme="dark"] .status-pill.is-active {
    background: rgba(0, 185, 173, 0.16);
    color: #8cf0e8;
}

html[data-theme="dark"] .status-pill.is-muted {
    background: rgba(154, 164, 214, 0.12);
    color: #bdc7f5;
}

.pagination {
    gap: 0.4rem;
}

.page-link {
    border-radius: 999px !important;
    color: var(--app-primary-deep);
    border-color: rgba(92, 104, 180, 0.12);
}

html[data-theme="dark"] .page-link {
    background: rgba(14, 19, 44, 0.86);
    color: #d6dfff;
    border-color: rgba(130, 144, 243, 0.14);
}

.page-item.active .page-link {
    background: var(--brand-gradient);
    border-color: transparent;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 1.2rem;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 36, 0.55);
    backdrop-filter: blur(2px);
}

.confirm-modal__dialog {
    position: relative;
    width: min(460px, 100%);
    max-height: min(92vh, 980px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px;
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 255, 0.98));
    box-shadow: 0 34px 84px rgba(20, 28, 78, 0.3);
    padding: 1.4rem 1.3rem 1.2rem;
    animation: confirmModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.confirm-modal__dialog--xl {
    width: min(980px, 100%);
}

.confirm-modal__close {
    position: absolute;
    top: 0.7rem;
    inset-inline-end: 0.7rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(106, 27, 206, 0.08);
    color: var(--app-surface-strong);
    font-size: 1.2rem;
    line-height: 1;
}

.confirm-modal__icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 104, 104, 0.2), rgba(255, 160, 92, 0.18));
    color: #d12222;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

.confirm-modal__title {
    margin: 0 0 0.45rem;
    color: var(--app-surface-strong);
    font-size: 1.3rem;
}

.confirm-modal__lead {
    margin: 0;
    color: var(--app-text-soft);
    line-height: 1.85;
}

.confirm-modal__actions {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.confirm-modal-open {
    overflow: hidden;
}

html[data-theme="dark"] .confirm-modal__dialog {
    border-color: rgba(130, 144, 243, 0.2);
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.98), rgba(12, 17, 40, 0.96));
}

html[data-theme="dark"] .confirm-modal__title {
    color: #f3f6ff;
}

html[data-theme="dark"] .confirm-modal__close {
    background: rgba(130, 144, 243, 0.2);
    color: #f3f6ff;
}

@keyframes confirmModalIn {
    from {
        transform: translateY(12px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.toast-stack {
    position: fixed;
    top: 1.15rem;
    inset-inline-end: 1rem;
    z-index: 1100;
    width: min(380px, calc(100vw - 1.5rem));
    display: grid;
    gap: 0.65rem;
}

.ui-toast {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 0.9rem 0.8rem;
    border-radius: 18px;
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 255, 0.98));
    box-shadow: 0 24px 52px rgba(20, 28, 78, 0.2);
    animation: toastIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-toast.is-leaving {
    animation: toastOut 220ms ease forwards;
}

.ui-toast__icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    margin-top: 0.05rem;
}

.ui-toast__title {
    margin: 0 0 0.2rem;
    font-size: 0.96rem;
    color: var(--app-surface-strong);
}

.ui-toast__message {
    margin: 0;
    line-height: 1.62;
    color: var(--app-text);
    font-size: 0.9rem;
}

.ui-toast__close {
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 999px;
    background: rgba(92, 104, 180, 0.12);
    color: var(--app-surface-strong);
    font-size: 1rem;
    line-height: 1;
    margin-top: 0.03rem;
}

.ui-toast__progress {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform-origin: left center;
    animation: toastProgress linear forwards;
    animation-duration: var(--toast-timeout, 4600ms);
}

.ui-toast--success .ui-toast__icon {
    background: linear-gradient(135deg, #00b9ad, #1e88e5);
}

.ui-toast--success .ui-toast__progress {
    background: linear-gradient(90deg, rgba(0, 185, 173, 0.88), rgba(30, 136, 229, 0.82));
}

.ui-toast--error .ui-toast__icon {
    background: linear-gradient(135deg, #d43f5e, #b32664);
}

.ui-toast--error .ui-toast__progress {
    background: linear-gradient(90deg, rgba(212, 63, 94, 0.92), rgba(179, 38, 100, 0.86));
}

.ui-toast--warning .ui-toast__icon {
    background: linear-gradient(135deg, #ff9d2f, #d97a00);
}

.ui-toast--warning .ui-toast__progress {
    background: linear-gradient(90deg, rgba(255, 157, 47, 0.92), rgba(217, 122, 0, 0.86));
}

.ui-toast--info .ui-toast__icon {
    background: var(--brand-gradient);
}

.ui-toast--info .ui-toast__progress {
    background: linear-gradient(90deg, rgba(106, 27, 206, 0.88), rgba(30, 136, 229, 0.82));
}

html[data-theme="dark"] .ui-toast {
    border-color: rgba(130, 144, 243, 0.2);
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.98), rgba(12, 17, 40, 0.96));
}

html[data-theme="dark"] .ui-toast__title {
    color: #f3f6ff;
}

html[data-theme="dark"] .ui-toast__message {
    color: #d4dbff;
}

html[data-theme="dark"] .ui-toast__close {
    background: rgba(130, 144, 243, 0.2);
    color: #f3f6ff;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

@keyframes toastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 1199.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.admin-sidebar-open {
        overflow: hidden;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-shell.is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        height: auto;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1050;
        width: min(320px, calc(100vw - 2rem));
        height: 100dvh;
        border-inline-end: 1px solid var(--shell-sidebar-border);
        border-bottom: 0;
        transform: translateX(-110%);
        transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    [dir="rtl"] .admin-sidebar {
        transform: translateX(110%);
    }

    .admin-shell.is-sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 26px 70px rgba(27, 33, 71, 0.25);
    }

    body.admin-sidebar-open .admin-header,
    body.admin-sidebar-open .admin-header__actions,
    body.admin-sidebar-open .admin-toolbar,
    body.admin-sidebar-open .notification-bell,
    body.admin-sidebar-open .notification-dropdown {
        z-index: 1 !important;
    }

    body.admin-sidebar-open .admin-sidebar {
        z-index: 10020 !important;
    }

    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10010;
        display: block;
        background: rgba(14, 18, 42, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-smooth);
        backdrop-filter: blur(3px);
    }

    .admin-sidebar__collapse {
        display: none;
    }

    .admin-shell.is-sidebar-open .admin-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-sidebar__collapse,
    .admin-mobile-menu {
        display: inline-flex;
    }

    .admin-mobile-menu {
        width: 2.65rem;
        height: 2.65rem;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 1px solid rgba(124, 93, 255, 0.22);
        color: var(--app-primary-deep);
        background: rgba(106, 27, 206, 0.08);
        flex: 0 0 auto;
    }

    .admin-company-layout {
        grid-template-columns: 1fr;
    }

    .admin-content {
        min-width: 0;
    }

    .platform-permission-layout {
        grid-template-columns: 1fr;
    }

    .platform-permission-groups {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-content {
        padding: 1rem;
    }

    .admin-header,
    .admin-section__head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-header__actions {
        justify-content: flex-start;
        justify-content: stretch;
        width: 100%;
    }

    .admin-toolbar {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-toolbar__name {
        max-width: 95px;
        max-width: 82px;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-filter-bar {
        grid-template-columns: 1fr;
    }

    .auth-card__content {
        grid-template-columns: 1fr;
    }

    .admin-section,
    .admin-form-card {
        padding: 1rem;
        border-radius: 18px;
    }

    .admin-table-card {
        border-radius: 18px;
    }

    .admin-table-card .table {
        min-width: 680px;
    }

    .admin-section__head .btn,
    .admin-section__head a.btn,
    .admin-form-grid__full .btn,
    .admin-filter-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .admin-row-actions {
        justify-content: flex-start;
    }

    .platform-role-grid,
    .admin-role-grid,
    .module-manager-grid {
        grid-template-columns: 1fr;
    }

    .platform-permission-groups {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .platform-permission-group {
        min-width: 190px;
    }

    .platform-permission-panels {
        padding: 0.75rem;
    }

    .platform-permission-checks {
        grid-template-columns: 1fr;
    }

    .confirm-modal__dialog {
        width: calc(100vw - 1.25rem);
        max-height: calc(100dvh - 1.25rem);
        overflow-y: auto;
        padding: 1.15rem;
        border-radius: 18px;
    }

    .confirm-modal__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .toast-stack {
        inset-inline: 0.75rem;
        max-width: none;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 2.4rem;
    }

    .content-section {
        padding: 3.5rem 0;
    }

    .metric-card,
    .foundation-card,
    .module-pill,
    .roadmap-item,
    .foundation-banner {
        border-radius: 18px;
    }

    .admin-content {
        padding: 0.75rem;
    }

    .admin-header__title {
        font-size: 1.65rem;
    }

    .admin-toolbar__user {
        padding-inline: 0.38rem;
    }

    .admin-toolbar__name {
        display: none;
    }
}

.order-thobe-card {
    position: relative;
}

.order-thobe-image {
    width: 100%;
    max-width: 440px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 16px 30px rgba(33, 51, 120, 0.24));
}

.order-reference-panel {
    border-radius: 20px;
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 255, 0.94));
    padding: 0.9rem;
}

.order-thobe-panel__title {
    margin: 0 0 0.7rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--app-surface-strong);
}

.order-reference-stage {
    position: relative;
    min-height: 900px;
}

.order-thobe-line {
    position: absolute;
    pointer-events: none;
    border-color: rgba(206, 27, 27, 0.427);
    border-color: rgba(106, 27, 206, 0.4);
    border-style: dashed;
    z-index: 1;
}

.order-thobe-line--v {
    top: 7%;
    top: 9%;
    bottom: 6%;
    left: 72%;
    border-left-width: 2px;
}

.order-thobe-line--v-front {
    top: 7%;
    bottom: 6%;
    left: 22%;
    border-left-width: 2px;
}

.order-thobe-line--v-front-1 {
    top: 5%;
    bottom: 93%;
    left: 33%;
    left: 59.8%;
    border-left-width: 2px;
}

.order-thobe-line--v-front-2{
     top: 8%;
    bottom: 82%;
    left: 35%;
    border-left-width: 2px;
}

.order-thobe-line--v-front-3 {
    top: 11%;
    bottom: 50%;
    left: 42.5%;
    border-left-width: 2px;
}

.order-thobe-line--h-shoulder-back {
    top: 11%;
    left: 58%;
    right: 14%;
    border-top-width: 2px;
}

.order-thobe-line--h-shoulder-front {
    top: 15%;
    left: 15%;
    right: 60%;
    border-top-width: 2px;
}

.order-thobe-line--h-front-1 {
    top: 25%;
    left: 17%;
    right: 61%;
    border-top-width: 2px;
}

.order-thobe-line--h-front-2 {
    top: 45%;
    left: 15%;
    right: 60%;
    border-top-width: 2px;
}

.order-thobe-line--h-front-3 {
    bottom: 9%;
    left: 13%;
    right: 58%;
    border-top-width: 2px;
}

.order-thobe-line--h-front-4 {
    top: 30%;
    left: 40%;
    right: 53.5%;
    border-top-width: 2px;
}

.order-thobe-line--h-shoulder-back-slanted {
    top: 10%;
    left: 13%;
    width: 10%;
    border-top-width: 2px;
    transform: rotate(338deg);
    transform-origin: left center;
}

.order-thobe-line--h {
    top: 58%;
    left: 13%;
    width: 10%;
    right: 9%;
    border-top-width: 2px;
    transform: rotate(338deg);
    transform-origin: left center;
}

.order-thobe-line--h-shoulder-back-curved {
    top: 12%;
    left: 58%;
    width: 24%;
    height: 0;
    border: 0;
    position: absolute;
    display: none;
}

.order-thobe-line--h-shoulder-back-curved::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -18px;
    height: 18px;
    border-top: 2px dashed rgba(206, 27, 27, 0.427);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.order-thobe-line--circle {
    top: 50%;
    left: 42%;
    width: 44px;
    height: 44px;
    border: 2px dashed rgba(206, 27, 27, 0.427);
    border-radius: 999px;
    /* display: none; */
}

.order-thobe-line--oval {
top: 3%;
    left: 24%;
    width: 72px;
    height: 38px;
    border: 2px dashed rgba(206, 27, 27, 0.427);
    border-radius: 999px;

}

.order-thobe-field {
    position: absolute;
    left: var(--field-x);
    top: var(--field-y);
    transform: translate(-50%, -50%);
    width: 120px;
    z-index: 2;
    animation: fadeUpIn 260ms ease both;
}

.order-reference-image {
    width: 100%;
    max-width: 980px;
    display: block;
    margin-inline: auto;
    border-radius: 16px;
    border: 1px solid rgba(92, 104, 180, 0.12);
}

.order-thobe-field .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 10px;
    padding: 0.14rem 0.38rem;
    display: inline-block;
}

.order-thobe-field .form-control {
    border-radius: 12px;
    border-color: rgba(106, 27, 206, 0.24);
    background: rgba(255, 255, 255, 0.92);
    min-height: 34px;
    padding-top: 0.24rem;
    padding-bottom: 0.24rem;
    width: 45%;
}

.order-thobe-field input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.order-thobe-field input[type="number"]::-webkit-outer-spin-button,
.order-thobe-field input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.order-option-card input[type="number"],
.order-items-card input[type="number"],
.order-invoice-card input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.order-option-card input[type="number"]::-webkit-outer-spin-button,
.order-option-card input[type="number"]::-webkit-inner-spin-button,
.order-items-card input[type="number"]::-webkit-outer-spin-button,
.order-items-card input[type="number"]::-webkit-inner-spin-button,
.order-invoice-card input[type="number"]::-webkit-outer-spin-button,
.order-invoice-card input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

html[data-theme="dark"] .order-reference-panel {
    border-color: rgba(130, 144, 243, 0.22);
    background: linear-gradient(180deg, rgba(18, 24, 54, 0.95), rgba(12, 18, 44, 0.95));
}

html[data-theme="dark"] .order-thobe-line {
    border-color: rgba(130, 144, 243, 0.48);
}

html[data-theme="dark"] .order-thobe-panel__title {
    color: #eff3ff;
}

html[data-theme="dark"] .order-thobe-field .form-label {
    background: rgba(19, 27, 62, 0.82);
    color: #e9edff;
}

html[data-theme="dark"] .order-thobe-field .form-control {
    border-color: rgba(130, 144, 243, 0.35);
    background: rgba(17, 24, 54, 0.9);
    color: #f6f8ff;
}

@media (max-width: 1399.98px) {
    .order-thobe-field {
        width: 106px;
    }
}

@media (max-width: 991.98px) {
    .order-reference-stage {
        min-height: 760px;
    }
}

@media (max-width: 767.98px) {
    .order-thobe-line {
        display: none;
    }

    .order-reference-stage {
        min-height: initial;
        display: grid;
        gap: 0.55rem;
    }

    .order-thobe-field {
        position: static;
        transform: none;
        width: 100%;
    }

    .order-reference-image {
        max-width: 100%;
        margin-bottom: 0.4rem;
    }
}

.order-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.order-option-card,
.order-stitching-card,
.order-items-card,
.order-invoice-card {
    border-radius: 18px;
    border: 1px solid rgba(92, 104, 180, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.95));
    padding: 1rem;
}

.order-option-card h5,
.order-stitching-card h5,
.order-items-card h5,
.order-invoice-card h5 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--app-surface-strong);
    font-weight: 800;
}

.order-option-card__preview {
    border-radius: 12px;
    border: 1px dashed rgba(106, 27, 206, 0.26);
    background: rgba(246, 249, 255, 0.9);
    padding: 0.35rem;
    margin-bottom: 0.7rem;
}

.order-option-card__preview img {
    width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 10px;
}

.order-radio-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.order-radio-grid--vertical {
    grid-template-columns: 1fr;
}

.order-radio-pill {
    border: 1px solid rgba(106, 27, 206, 0.2);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    background: rgba(247, 250, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.order-items-table th {
    white-space: nowrap;
}

.order-invoice-hero {
    display: grid;
    grid-template-columns: 240px 220px 1fr;
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(92, 104, 180, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.95));
}

.order-invoice-hero__total {
    border-radius: 12px;
    border: 1px solid rgba(106, 27, 206, 0.2);
    background: rgba(246, 240, 255, 0.58);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.2rem;
}

.order-invoice-hero__total span {
    font-size: 0.86rem;
    color: var(--app-surface-muted);
}

.order-invoice-hero__total strong {
    font-size: 2rem;
    line-height: 1;
    color: var(--app-surface-strong);
}

.order-invoice-hero__meta {
    border-radius: 12px;
    border: 1px dashed rgba(106, 27, 206, 0.22);
    background: rgba(248, 251, 255, 0.85);
    padding: 0.75rem;
    display: grid;
    gap: 0.4rem;
}

.order-invoice-hero__meta div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
}

.order-invoice-card--compact .order-invoice-hero {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
}

.order-invoice-card--compact .order-invoice-hero__total strong {
    font-size: 1.6rem;
}

.order-invoice-inline-field {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 0.5rem;
}

.order-invoice-inline-field .form-label {
    margin: 0;
    font-size: 0.88rem;
}

.order-invoice-inline-field .form-control,
.order-invoice-inline-field .form-select {
    min-height: 32px;
}

.order-invoice-card--compact .order-invoice-hero__meta {
    padding: 0.65rem;
}

.order-search-box {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: center;
    border: 1px solid rgba(92, 104, 180, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.94));
    padding: 0.6rem;
}

.order-search-box__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(106, 27, 206, 0.08);
}

.order-customer-card {
    border: 1px solid rgba(92, 104, 180, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.95));
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.order-top-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

.order-measurement-picker {
    border: 1px solid rgba(92, 104, 180, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.95));
    padding: 1rem;
}

.order-design-grid-five {
    display: grid;
    grid-template-columns: repeat(6, minmax(220px, 1fr));
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.order-design-grid-five .order-option-card {
    min-width: 230px;
}

.order-design-stack {
    display: grid;
    gap: 0.75rem;
}

.order-option-split {
    display: grid;
    grid-template-columns: 98px 1fr;
    grid-template-areas:
        "media picker"
        "fields fields";
    gap: 0.65rem;
    align-items: start;
}

.order-option-media {
    grid-area: media;
    width: 98px;
    height: 98px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px dashed rgba(106, 27, 206, 0.28);
    background: #f8faff;
}

.order-option-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-option-media--picker {
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.order-option-media--picker:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(70, 86, 173, 0.18);
}

.order-option-media__badge {
    position: absolute;
    inset-inline-start: 0.35rem;
    inset-block-end: 0.35rem;
    border-radius: 999px;
    background: rgba(27, 33, 71, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.45rem;
}

.order-option-fields {
    display: contents;
}

.order-option-fields > input[type="hidden"] {
    display: none;
}

.order-option-fields > .btn {
    grid-area: picker;
    align-self: center;
    min-height: 46px;
    white-space: normal;
    line-height: 1.35;
}

.order-option-fields > .row {
    grid-area: fields;
    width: 100%;
    --bs-gutter-x: 0.55rem;
    --bs-gutter-y: 0.55rem;
}

.order-option-fields .form-select {
    min-width: 100%;
}

.order-design-picker-modal {
    max-width: min(1080px, 96vw);
}

.order-design-upload-form {
    border: 1px solid rgba(92, 104, 180, 0.16);
    border-radius: 14px;
    padding: 0.9rem;
    background: rgba(247, 250, 255, 0.92);
}

.order-design-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-height: 58vh;
    overflow: auto;
    padding-inline-end: 0.25rem;
}

.order-design-gallery__item {
    border: 1px solid rgba(106, 27, 206, 0.22);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    display: grid;
    padding: 0;
    text-align: start;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.order-design-gallery__item:hover {
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, 0.42);
    box-shadow: 0 10px 22px rgba(62, 78, 158, 0.16);
}

.order-design-gallery__item.is-selected {
    border-color: rgba(106, 27, 206, 0.92);
    box-shadow: 0 0 0 2px rgba(106, 27, 206, 0.18);
}

.order-design-gallery__image {
    position: relative;
    overflow: hidden;
}

.order-design-gallery__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #eef3ff;
}

.order-design-gallery__name {
    position: absolute;
    inset-inline: 0.45rem;
    bottom: 0.45rem;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: rgba(23, 27, 67, 0.76);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgba(23, 27, 67, 0.22);
}

.order-design-gallery__meta {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.55rem 0.55rem;
}

.order-design-gallery__meta strong {
    font-size: 0.85rem;
    color: var(--app-text);
}

.order-design-gallery__meta span {
    font-size: 0.72rem;
    color: var(--app-text-soft);
}

.order-field-alert {
    margin-top: 0.32rem;
    font-size: 0.78rem;
    color: #dc3545;
}

.order-picker-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.15) !important;
}

.order-radio-grid.is-invalid {
    border: 1px dashed rgba(220, 53, 69, 0.6);
    border-radius: 12px;
    padding: 0.4rem;
}

.order-show-card {
    border-radius: 20px;
    border-color: rgba(92, 104, 180, 0.18);
    box-shadow: 0 14px 34px rgba(57, 71, 145, 0.09);
}

.order-show-block {
    border-radius: 20px;
    border-color: rgba(92, 104, 180, 0.14);
    padding: 1.1rem 1.25rem 1.25rem;
}

.order-show-block h5 {
    margin-bottom: 0.9rem !important;
}

.order-show-block .table {
    margin-bottom: 0;
}

.order-show-block .admin-table th,
.order-show-block .admin-table td {
    padding-inline: 0.85rem;
    vertical-align: middle;
}

.order-show-block .admin-table th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.order-show-block .admin-table td {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}

.order-show-design-list {
    display: grid;
    gap: 0.45rem;
}

.order-show-design-row {
    padding: 0.3rem 0.45rem;
    border-radius: 10px;
    background: rgba(246, 248, 255, 0.88);
}

.order-show-design-image-row {
    display: grid;
    gap: 0.35rem;
    padding: 0.45rem;
    border-radius: 12px;
    border: 1px dashed rgba(106, 27, 206, 0.24);
    background: rgba(246, 248, 255, 0.9);
}

.order-show-design-image-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(106, 27, 206, 0.2);
    background: #fff;
    max-width: 170px;
}

.order-show-design-image-frame img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

html[data-theme="dark"] .order-show-design-row {
    background: rgba(20, 29, 63, 0.9);
}

html[data-theme="dark"] .order-show-design-image-row {
    border-color: rgba(130, 144, 243, 0.34);
    background: rgba(18, 26, 56, 0.94);
}

html[data-theme="dark"] .order-show-design-image-frame {
    border-color: rgba(130, 144, 243, 0.4);
    background: rgba(11, 17, 38, 0.94);
}

/* Premium Global UI Redesign Pass
   A non-invasive design layer that upgrades existing Blade screens while
   preserving current routes, permissions, modules, and form names. */
:root {
    --premium-bg-soft: #f6f8ff;
    --premium-bg-lift: #ffffff;
    --premium-surface: rgba(255, 255, 255, 0.86);
    --premium-surface-strong: rgba(255, 255, 255, 0.96);
    --premium-line: rgba(92, 104, 180, 0.16);
    --premium-line-strong: rgba(106, 27, 206, 0.24);
    --premium-shadow-sm: 0 10px 26px rgba(43, 54, 128, 0.08);
    --premium-shadow-md: 0 22px 52px rgba(43, 54, 128, 0.13);
    --premium-shadow-lg: 0 34px 88px rgba(43, 54, 128, 0.18);
    --premium-radius-sm: 14px;
    --premium-radius-md: 20px;
    --premium-radius-lg: 28px;
    --premium-radius-xl: 34px;
    --premium-focus: 0 0 0 0.24rem rgba(30, 136, 229, 0.16);
    --premium-danger-soft: rgba(255, 82, 103, 0.11);
    --premium-success-soft: rgba(0, 185, 173, 0.13);
    --premium-warning-soft: rgba(255, 184, 77, 0.14);
    --premium-info-soft: rgba(30, 136, 229, 0.12);
}

html[data-theme="dark"] {
    --premium-bg-soft: #0c1230;
    --premium-bg-lift: #11183a;
    --premium-surface: rgba(15, 22, 52, 0.86);
    --premium-surface-strong: rgba(17, 24, 58, 0.96);
    --premium-line: rgba(154, 164, 214, 0.14);
    --premium-line-strong: rgba(130, 144, 243, 0.3);
    --premium-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.24);
    --premium-shadow-md: 0 22px 52px rgba(0, 0, 0, 0.32);
    --premium-shadow-lg: 0 34px 88px rgba(0, 0, 0, 0.42);
}

.dashboard-body {
    background:
        radial-gradient(circle at 82% 4%, rgba(106, 27, 206, 0.13), transparent 24rem),
        radial-gradient(circle at 12% 0%, rgba(0, 185, 173, 0.11), transparent 22rem),
        linear-gradient(135deg, #f8fbff 0%, #f1f5ff 46%, #eef4ff 100%);
}

html[data-theme="dark"] .dashboard-body {
    background:
        radial-gradient(circle at 82% 4%, rgba(106, 27, 206, 0.2), transparent 24rem),
        radial-gradient(circle at 12% 0%, rgba(0, 185, 173, 0.14), transparent 22rem),
        linear-gradient(135deg, #070b1e 0%, #0c1230 48%, #101735 100%);
}

.admin-content {
    min-width: 0;
}

.admin-main {
    gap: clamp(1rem, 2vw, 1.75rem);
}

.admin-header {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 248, 255, 0.72)),
        radial-gradient(circle at 18% 18%, rgba(106, 27, 206, 0.08), transparent 32%),
        radial-gradient(circle at 86% 0%, rgba(30, 136, 229, 0.1), transparent 30%);
    box-shadow: var(--premium-shadow-sm);
    padding: clamp(1rem, 2vw, 1.45rem);
    margin-bottom: clamp(1rem, 2vw, 1.55rem);
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .admin-header {
    background:
        linear-gradient(135deg, rgba(17, 24, 58, 0.9), rgba(12, 18, 48, 0.78)),
        radial-gradient(circle at 18% 18%, rgba(106, 27, 206, 0.15), transparent 32%),
        radial-gradient(circle at 86% 0%, rgba(30, 136, 229, 0.14), transparent 30%);
}

.admin-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    background: rgba(106, 27, 206, 0.09);
    color: var(--brand-indigo);
    font-size: 0.78rem;
    line-height: 1;
}

.admin-header__eyebrow::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--brand-turquoise);
    box-shadow: 0 0 0 0.28rem rgba(0, 185, 173, 0.13);
}

.admin-header__title {
    margin-top: 0.35rem;
    letter-spacing: -0.02em;
}

.admin-section,
.admin-form-card,
.admin-table-card,
.admin-role-card,
.admin-empty-card,
.order-option-card,
.order-items-card,
.order-invoice-card,
.order-customer-card,
.order-measurement-picker {
    border: 1px solid var(--premium-line);
    background:
        linear-gradient(145deg, var(--premium-surface-strong), var(--premium-surface)),
        radial-gradient(circle at 92% 8%, rgba(106, 27, 206, 0.08), transparent 28%);
    box-shadow: var(--premium-shadow-md);
    backdrop-filter: blur(16px);
}

.admin-section,
.admin-form-card,
.admin-table-card,
.admin-role-card,
.admin-empty-card {
    border-radius: var(--premium-radius-lg);
}

.admin-section,
.admin-form-card {
    padding: clamp(1rem, 2vw, 1.7rem);
}

.admin-section:hover,
.admin-form-card:hover,
.admin-table-card:hover,
.order-option-card:hover,
.order-items-card:hover,
.order-invoice-card:hover {
    border-color: var(--premium-line-strong);
    box-shadow: var(--premium-shadow-lg);
}

.admin-section__head {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(92, 104, 180, 0.1);
}

.admin-section__head h2,
.admin-form-card h2,
.order-option-card h5,
.order-items-card h5 {
    font-weight: 900;
    letter-spacing: -0.01em;
}

.admin-section__head p,
.admin-muted {
    line-height: 1.75;
}

.admin-filter-bar {
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-md);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(246, 249, 255, 0.68)),
        radial-gradient(circle at 0% 0%, rgba(0, 185, 173, 0.08), transparent 28%);
    box-shadow: var(--premium-shadow-sm);
}

html[data-theme="dark"] .admin-filter-bar {
    background:
        linear-gradient(135deg, rgba(17, 24, 58, 0.8), rgba(12, 18, 48, 0.7)),
        radial-gradient(circle at 0% 0%, rgba(0, 185, 173, 0.12), transparent 28%);
}

.form-control,
.form-select,
.form-check-input,
textarea.form-control {
    border-color: rgba(92, 104, 180, 0.18);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--app-text);
    transition:
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth),
        background-color var(--transition-smooth),
        transform var(--transition-smooth);
}

.form-control,
.form-select {
    min-height: 2.75rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
textarea.form-control:focus {
    border-color: rgba(30, 136, 229, 0.56);
    box-shadow: var(--premium-focus);
    background-color: #fff;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
    background-color: rgba(11, 17, 38, 0.72);
    border-color: rgba(154, 164, 214, 0.18);
    color: var(--app-text);
}

.form-label {
    color: var(--app-text);
    font-weight: 800;
    font-size: 0.86rem;
}

.btn {
    border-radius: 999px;
    font-weight: 800;
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-smooth),
        background-color var(--transition-smooth),
        color var(--transition-smooth);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-brand {
    border: 0;
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 14px 26px rgba(74, 59, 209, 0.22);
}

.btn-primary:hover,
.btn-brand:hover {
    color: #fff;
    box-shadow: 0 18px 34px rgba(74, 59, 209, 0.3);
}

.btn-outline-primary,
.btn-brand-outline {
    border-color: rgba(106, 27, 206, 0.34);
    color: var(--brand-indigo);
    background: rgba(255, 255, 255, 0.56);
}

.btn-outline-primary:hover,
.btn-brand-outline:hover {
    border-color: transparent;
    background: var(--brand-gradient);
    color: #fff;
}

.btn-outline-secondary,
.btn-soft {
    border-color: rgba(92, 104, 180, 0.22);
    color: #52609a;
    background: rgba(255, 255, 255, 0.64);
}

.btn-outline-secondary:hover,
.btn-soft:hover {
    border-color: rgba(106, 27, 206, 0.26);
    background: rgba(106, 27, 206, 0.08);
    color: var(--brand-indigo);
}

.btn-outline-danger,
.btn-soft-danger {
    border-color: rgba(220, 53, 69, 0.3);
    color: #d63352;
    background: rgba(255, 255, 255, 0.62);
}

.btn-outline-danger:hover,
.btn-soft-danger:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-success,
.btn-soft-success {
    border-color: rgba(0, 185, 173, 0.28);
    background: linear-gradient(135deg, #00b9ad, #1e88e5);
    color: #fff;
    box-shadow: 0 14px 26px rgba(0, 185, 173, 0.2);
}

.btn-sm {
    min-height: 2.1rem;
    padding-inline: 0.85rem;
}

.admin-table-card {
    padding: 0;
}

.admin-table-card .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th,
.admin-table-card table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(92, 104, 180, 0.12);
    background:
        linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(241, 245, 255, 0.96));
    color: #7f8ac4;
    font-size: 0.78rem;
    text-transform: none;
    white-space: nowrap;
}

html[data-theme="dark"] .admin-table thead th,
html[data-theme="dark"] .admin-table-card table thead th {
    background:
        linear-gradient(180deg, rgba(17, 24, 58, 0.98), rgba(12, 18, 48, 0.96));
    color: #aeb8e8;
}

.admin-table tbody tr,
.admin-table-card table tbody tr {
    transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.admin-table tbody tr:hover,
.admin-table-card table tbody tr:hover {
    background: rgba(30, 136, 229, 0.045);
}

.admin-table td,
.admin-table-card table td {
    padding: 1rem;
    vertical-align: middle;
}

.status-pill,
.tag-chip,
.badge {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.status-pill.is-active,
.badge.text-bg-success {
    background: var(--premium-success-soft) !important;
    color: #007970 !important;
    border: 1px solid rgba(0, 185, 173, 0.18);
}

.status-pill.is-muted,
.badge.text-bg-secondary,
.badge.text-bg-light {
    background: rgba(154, 164, 214, 0.14) !important;
    color: #5f6b9d !important;
    border: 1px solid rgba(154, 164, 214, 0.18);
}

.badge.text-bg-danger {
    background: var(--premium-danger-soft) !important;
    color: #d63352 !important;
    border: 1px solid rgba(220, 53, 69, 0.18);
}

.badge.text-bg-warning {
    background: var(--premium-warning-soft) !important;
    color: #9a6100 !important;
    border: 1px solid rgba(255, 184, 77, 0.2);
}

.badge.text-bg-info,
.badge.text-bg-primary {
    background: var(--premium-info-soft) !important;
    color: var(--brand-indigo) !important;
    border: 1px solid rgba(30, 136, 229, 0.18);
}

.admin-actions-menu__panel,
.dropdown-menu {
    border: 1px solid var(--premium-line);
    border-radius: 18px;
    background: var(--premium-surface-strong);
    box-shadow: var(--premium-shadow-md);
    padding: 0.45rem;
}

.dropdown-item,
.admin-actions-menu__panel a,
.admin-actions-menu__panel button {
    border-radius: 12px;
}

.confirm-modal__dialog {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-xl);
    background:
        linear-gradient(145deg, var(--premium-surface-strong), var(--premium-surface)),
        radial-gradient(circle at 90% 0%, rgba(106, 27, 206, 0.1), transparent 30%);
    box-shadow: var(--premium-shadow-lg);
}

.confirm-modal__title {
    font-weight: 900;
}

.admin-empty-card,
td.text-center,
.admin-table-card .text-center.py-4 {
    color: var(--app-text-soft);
}

.admin-empty-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.admin-empty-card::before {
    content: "";
    position: absolute;
    width: 7rem;
    height: 7rem;
    inset-block-start: -2rem;
    inset-inline-end: -2rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 185, 173, 0.14), transparent 68%);
}

.order-design-grid-five {
    align-items: stretch;
}

.order-option-card {
    border-radius: var(--premium-radius-lg);
    min-height: 100%;
}

.order-option-media {
    border-color: rgba(106, 27, 206, 0.22);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 255, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.order-radio-pill {
    border-color: rgba(106, 27, 206, 0.2);
    background: rgba(255, 255, 255, 0.7);
}

.order-radio-pill:has(input:checked) {
    border-color: rgba(106, 27, 206, 0.5);
    background: linear-gradient(135deg, rgba(106, 27, 206, 0.12), rgba(30, 136, 229, 0.1));
    box-shadow: 0 10px 24px rgba(74, 59, 209, 0.12);
}

@media (max-width: 991.98px) {
    .admin-header {
        border-radius: 24px;
    }

    .admin-section__head {
        align-items: stretch;
    }

    .admin-filter-bar {
        grid-template-columns: 1fr !important;
    }

    .admin-filter-bar .btn,
    .admin-filter-bar .form-control,
    .admin-filter-bar .form-select {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .admin-header {
        padding: 0.9rem;
    }

    .admin-header__title {
        font-size: clamp(1.5rem, 8vw, 2.05rem);
    }

    .admin-section,
    .admin-form-card {
        padding: 0.95rem;
        border-radius: 22px;
    }

    .admin-table-card {
        border-radius: 22px;
    }

    .btn {
        min-height: 2.55rem;
    }
}

/* Final premium stability fixes for order details and modal positioning. */
.confirm-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1080 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(0.75rem, 2vw, 1.25rem) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.confirm-modal__dialog {
    margin: auto !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: auto !important;
}

.confirm-modal__dialog--xl {
    width: min(1080px, calc(100vw - 2rem)) !important;
}

.order-measurements-block {
    overflow: hidden !important;
}

.order-measurements-grid {
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
}

.order-measurements-grid > [class*="col-"] {
    min-width: 0;
    padding-inline: 0.5rem;
}

.order-measurements-grid .admin-muted,
.order-measurements-grid strong,
.order-show-design-row,
.order-show-design-row strong,
.order-show-design-row span,
.order-show-card,
.order-show-card * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-show-block {
    max-width: 100%;
}

.order-show-block h5,
.order-show-block .admin-section__head,
.order-show-block .d-flex {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .confirm-modal:not([hidden]) {
        align-items: center !important;
        padding: 0.65rem !important;
    }

    .confirm-modal__dialog,
    .confirm-modal__dialog--xl {
        width: min(100%, calc(100vw - 1.3rem)) !important;
        max-height: calc(100dvh - 1.3rem) !important;
        border-radius: 20px !important;
    }

    .order-measurements-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
}

@media (max-width: 991.98px) {
    .order-show-block {
        padding: 0.9rem 1rem 1rem;
    }

    .order-show-block .admin-table th,
    .order-show-block .admin-table td {
        padding-inline: 0.55rem;
    }

    .order-top-grid {
        grid-template-columns: 1fr;
    }

    .order-design-grid-five {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
    }

    .order-design-grid-five .order-option-card {
        min-width: 0;
    }

    .order-builder-grid {
        grid-template-columns: 1fr;
    }

    .order-radio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-customer-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-invoice-hero {
        grid-template-columns: 1fr;
    }

    .order-invoice-inline-field {
        grid-template-columns: 1fr;
        grid-template-columns: minmax(84px, 0.35fr) minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .order-search-box {
        grid-template-columns: 1fr;
    }

    .order-search-box__icon {
        display: none;
    }

    .order-customer-card {
        grid-template-columns: 1fr;
    }

    .order-option-split {
        grid-template-columns: 1fr;
    }

    .order-option-media {
        width: 100%;
        height: 120px;
    }

    .order-design-grid-five {
        grid-template-columns: 1fr;
    }

    .order-option-card,
    .order-stitching-card,
    .order-items-card,
    .order-invoice-card,
    .order-measurement-picker,
    .order-customer-card {
        padding: 0.85rem;
        border-radius: 16px;
    }

    .order-radio-grid {
        grid-template-columns: 1fr;
    }

    .order-invoice-card--compact .order-invoice-hero {
        gap: 0.6rem;
        padding: 0.65rem;
    }

    .order-invoice-inline-field {
        grid-template-columns: 1fr;
    }

    .order-invoice-hero__meta div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .order-design-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 54dvh;
    }

    .order-design-upload-form .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .order-design-gallery {
        grid-template-columns: 1fr;
    }

    .order-search-box .btn,
    .order-measurement-picker .btn {
        width: 100%;
    }
}

/* Mobile admin hardening: keep every management screen inside the viewport. */
@media (max-width: 767.98px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .dashboard-body {
        padding: 0;
    }

    .admin-shell,
    .admin-shell.is-sidebar-collapsed {
        display: block;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .admin-content,
    .admin-main,
    .admin-section,
    .admin-form-card,
    .admin-table-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-content {
        padding: 0.85rem;
        overflow-x: hidden;
    }

    .admin-main {
        display: block;
    }

    .admin-header {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 0.8rem;
        margin-bottom: 1rem;
    }

    .admin-header > div:first-child {
        min-width: 0;
        grid-column: 1 / -1;
    }

    .admin-header__title {
        font-size: clamp(1.55rem, 8vw, 2rem);
        overflow-wrap: anywhere;
    }

    .admin-header__actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        width: 100%;
    }

    .admin-mobile-menu {
        width: 2.45rem;
        height: 2.45rem;
    }

    .admin-toolbar {
        width: 100%;
        min-width: 0;
        gap: 0.45rem;
        padding: 0.42rem;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: thin;
    }

    .admin-toolbar__btn {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 12px;
        flex: 0 0 auto;
    }

    .admin-toolbar__user {
        max-width: 3rem;
        padding: 0.28rem;
        flex: 0 0 auto;
    }

    .admin-section {
        padding: 1rem;
        overflow: hidden;
    }

    .admin-section__head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        align-items: stretch;
    }

    .admin-section__head > div {
        min-width: 0;
    }

    .admin-section__head h2 {
        font-size: 1.25rem;
    }

    .admin-section__head p {
        margin-bottom: 0;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .admin-section__head > .d-flex,
    .admin-table-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-section__head .btn,
    .admin-section__head a.btn,
    .admin-filter-bar .btn,
    .admin-table-actions .btn {
        width: 100%;
        min-height: 2.65rem;
    }

    .admin-filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        width: 100%;
    }

    .admin-filter-bar .form-control,
    .admin-filter-bar .form-select {
        min-width: 0;
        width: 100%;
    }

    .admin-table-card {
        overflow-x: auto;
        border-radius: 18px;
    }

    .confirm-modal {
        align-items: stretch;
        padding: 0.65rem;
    }

    .confirm-modal__dialog,
    .confirm-modal__dialog--xl {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 1.3rem);
        overflow-y: auto;
        padding: 1rem;
        border-radius: 20px;
    }

    .confirm-modal__close {
        position: sticky;
        top: 0;
        z-index: 2;
        margin-inline-start: auto;
    }
}

@media (max-width: 575.98px) {
    .customers-table {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .customers-table thead {
        display: none;
    }

    .customers-table,
    .customers-table tbody,
    .customers-table tr,
    .customers-table td {
        display: block;
        width: 100%;
    }

    .customers-table tr {
        border: 1px solid rgba(92, 104, 180, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 14px 30px rgba(43, 54, 128, 0.08);
        overflow: hidden;
    }

    .customers-table td {
        display: grid;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: center;
        padding: 0.72rem 0.85rem !important;
        border-bottom: 1px solid rgba(92, 104, 180, 0.09);
        text-align: start !important;
    }

    .customers-table td::before {
        content: attr(data-label);
        color: var(--app-text-soft);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .customers-table td:first-child {
        grid-template-columns: 1fr;
        justify-items: start;
        background: rgba(106, 27, 206, 0.05);
    }

    .customers-table td:first-child::before {
        content: none;
    }

    .customers-table td:last-child {
        border-bottom: 0;
        grid-template-columns: 1fr;
    }

    .customers-table td:last-child::before {
        margin-bottom: 0.2rem;
    }

    .customers-table .admin-row-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        width: 100%;
    }

    .customers-table .admin-row-actions .btn,
    .customers-table .admin-row-actions form,
    .customers-table .admin-row-actions button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .admin-content {
        padding: 0.65rem;
    }

    .admin-section,
    .admin-form-card {
        padding: 0.85rem;
        border-radius: 16px;
    }

    .admin-toolbar__btn {
        width: 2.2rem;
        height: 2.2rem;
    }
}

@media (max-width: 767.98px) {
    .order-top-grid,
    .order-builder-grid,
    .order-design-stack,
    .order-invoice-hero {
        display: grid;
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0;
    }

    .order-search-box,
    .order-customer-card,
    .order-measurement-picker,
    .order-option-card,
    .order-items-card,
    .order-invoice-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .order-search-box {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    .order-search-box .form-control,
    .order-search-box .btn {
        width: 100%;
    }

    .order-customer-card {
        grid-template-columns: 1fr;
    }

    .order-design-grid-five {
        grid-template-columns: 1fr !important;
        overflow: visible;
        gap: 0.85rem;
    }

    .order-design-grid-five .order-option-card {
        min-width: 0;
    }

    .order-option-split {
        grid-template-columns: 86px minmax(0, 1fr);
        align-items: stretch;
    }

    .order-option-media {
        width: 86px;
        min-width: 86px;
        height: 100%;
        min-height: 118px;
    }

    .order-option-fields {
        min-width: 0;
    }

    .order-option-fields .row {
        --bs-gutter-x: 0.55rem;
        --bs-gutter-y: 0.55rem;
    }

    .order-option-fields .form-control,
    .order-option-fields .form-select,
    .order-option-fields textarea {
        min-width: 0;
    }

    .order-items-card {
        overflow: hidden;
    }

    .order-items-card .admin-table-card,
    .order-items-table {
        width: 100%;
    }

    .order-items-table {
        min-width: 640px;
    }

    .order-invoice-inline-field {
        grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
        align-items: center;
    }
}

@media (max-width: 420px) {
    .order-option-split {
        grid-template-columns: 1fr;
    }

    .order-option-media {
        width: 100%;
        min-width: 0;
        height: 132px;
    }

    .order-invoice-inline-field {
        grid-template-columns: 1fr;
    }
}

/* Ultimate overrides: order details width containment + centered measurement modal.
   Kept at file end intentionally so later responsive rules cannot override it. */
.order-measurements-block.admin-table-card {
    overflow: hidden !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.order-measurements-block .order-measurements-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 0.9rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.order-measurements-block .order-measurements-grid > [class*="col-"] {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0.75rem !important;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.64);
}

.order-measurements-block .admin-muted,
.order-measurements-block strong {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.confirm-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(0.75rem, 2vw, 1.25rem) !important;
    overflow: auto !important;
}

.confirm-modal:not([hidden]) .confirm-modal__dialog {
    position: relative !important;
    margin: auto !important;
    width: min(460px, calc(100vw - 2rem)) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: auto !important;
}

.confirm-modal:not([hidden]) .confirm-modal__dialog--xl {
    width: min(1080px, calc(100vw - 2rem)) !important;
}

.confirm-modal:not([hidden]) .confirm-modal__close {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin-inline-start: auto !important;
}

@media (max-width: 767.98px) {
    .order-measurements-block .order-measurements-grid {
        grid-template-columns: 1fr !important;
    }

    .confirm-modal:not([hidden]) {
        align-items: center !important;
        justify-content: center !important;
        padding: 0.65rem !important;
    }

    .confirm-modal:not([hidden]) .confirm-modal__dialog,
    .confirm-modal:not([hidden]) .confirm-modal__dialog--xl {
        width: calc(100vw - 1.3rem) !important;
        max-height: calc(100dvh - 1.3rem) !important;
        border-radius: 20px !important;
    }
}

/* Order show: keep detail sections readable and fully visible. */
.order-show-block.admin-table-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.75rem 0 0 !important;
    border-radius: 24px !important;
}

.order-show-section-block.admin-table-card {
    padding: clamp(1rem, 2vw, 1.45rem) !important;
    overflow: visible !important;
}

.order-show-items-block.admin-table-card {
    padding: clamp(0.9rem, 1.8vw, 1.25rem) !important;
    overflow-x: auto !important;
}

.order-show-items-block .admin-table {
    min-width: 720px;
    border-collapse: separate !important;
    border-spacing: 0 0.55rem !important;
    margin-bottom: 0 !important;
}

.order-show-items-block h5,
.order-show-section-block h5 {
    font-size: 1.08rem !important;
    margin-bottom: 0.75rem !important;
}

.order-show-items-block .admin-table thead th {
    background: linear-gradient(180deg, rgba(246, 248, 255, 0.92), rgba(239, 244, 255, 0.7)) !important;
    border: 0 !important;
    color: var(--text-soft) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    padding: 0.65rem 0.8rem !important;
    white-space: nowrap !important;
}

.order-show-items-block .admin-table tbody tr {
    background: transparent !important;
}

.order-show-items-block .admin-table tbody td {
    background: rgba(255, 255, 255, 0.92) !important;
    border-top: 1px solid rgba(154, 164, 214, 0.13) !important;
    border-bottom: 1px solid rgba(154, 164, 214, 0.13) !important;
    color: #161a3d !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.order-show-items-block .admin-table tbody td:first-child {
    border-inline-start: 1px solid rgba(154, 164, 214, 0.13) !important;
    border-start-start-radius: 16px !important;
    border-end-start-radius: 16px !important;
    color: var(--brand-indigo) !important;
}

.order-show-items-block .admin-table tbody td:last-child {
    border-inline-end: 1px solid rgba(154, 164, 214, 0.13) !important;
    border-start-end-radius: 16px !important;
    border-end-end-radius: 16px !important;
}

.order-show-items-block .admin-table th,
.order-show-items-block .admin-table td {
    padding: 0.72rem 0.8rem !important;
    text-align: center !important;
}

.order-measurements-block.admin-table-card {
    overflow: visible !important;
    overflow-x: visible !important;
}

.order-measurements-block .order-measurements-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.order-measurements-block .order-measurements-grid > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0.62rem 0.7rem !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(243, 247, 255, 0.72)) !important;
}

.order-measurements-block .admin-muted {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
}

.order-measurements-block strong {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
}

.order-show-designs-block .order-show-designs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
    margin: 0 !important;
}

.order-show-designs-block .order-show-design-cell {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

.order-show-designs-block .order-show-card {
    min-height: 100%;
    padding: 0.9rem !important;
}

.order-show-designs-block .order-show-design-list {
    max-height: min(520px, 58vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-inline-end: 0.35rem !important;
    scrollbar-width: thin;
}

.order-show-designs-block .order-show-design-row {
    align-items: center !important;
    padding: 0.42rem 0 !important;
    border-bottom: 1px solid rgba(154, 164, 214, 0.14);
}

.order-show-designs-block .order-show-design-image-row {
    padding: 0.55rem 0 !important;
    border-bottom: 1px solid rgba(154, 164, 214, 0.14);
}

.order-show-designs-block .order-show-design-image-frame {
    max-height: 150px !important;
}

.order-show-designs-block .order-show-design-image-frame img {
    max-height: 140px !important;
    object-fit: contain !important;
}

/* Professional notifications foundation */
.notification-bell {
    position: relative;
    z-index: 5300;
}

.admin-toolbar:has(.notification-bell) {
    overflow: visible;
}

.admin-toolbar__count {
    position: absolute;
    inset-block-start: -0.35rem;
    inset-inline-end: -0.35rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: 0.28rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-turquoise);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0, 185, 173, 0.32);
}

.admin-toolbar__dot {
    opacity: 0;
}

.admin-toolbar__dot.is-active {
    opacity: 1;
}

.notification-dropdown {
    position: absolute;
    inset-block-start: calc(100% + 0.8rem);
    inset-inline-end: 0;
    width: min(390px, calc(100vw - 1.5rem));
    border: 1px solid rgba(154, 164, 214, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96)),
        var(--app-surface);
    box-shadow: 0 30px 70px rgba(43, 54, 128, 0.2);
    z-index: 6500;
    overflow: hidden;
    animation: notificationDrop 180ms ease-out;
}

html[data-theme="dark"] .notification-dropdown {
    background:
        linear-gradient(180deg, rgba(20, 26, 62, 0.98), rgba(14, 19, 48, 0.96)),
        var(--app-surface);
    box-shadow: 0 30px 70px rgba(4, 7, 22, 0.48);
}

.notification-dropdown__head,
.notification-dropdown__foot {
    padding: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(154, 164, 214, 0.12);
}

.notification-dropdown__head strong {
    display: block;
    color: var(--app-surface-strong);
}

.notification-dropdown__head span,
.notification-dropdown__item small,
.notification-dropdown__item p {
    color: var(--app-text-soft);
}

.notification-dropdown__list {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.55rem;
}

.notification-dropdown__item {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: start;
    padding: 0.75rem;
    border-radius: 18px;
    transition: background var(--transition-smooth), transform var(--transition-smooth);
}

.notification-dropdown__item:hover,
.notification-dropdown__item.is-unread {
    background: rgba(106, 27, 206, 0.07);
}

.notification-dropdown__icon,
.notification-card__icon,
.notification-preference-card__head > span {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 27, 206, 0.1);
    color: var(--brand-indigo);
}

.notification-dropdown__item strong {
    display: block;
    color: var(--app-surface-strong);
    font-size: 0.92rem;
    line-height: 1.35;
}

.notification-dropdown__item p {
    margin: 0.15rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.notification-dropdown__read {
    border: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand-gradient);
}

.notification-dropdown__empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    gap: 0.45rem;
    color: var(--app-text-soft);
}

.notification-dropdown__empty i {
    font-size: 1.65rem;
    color: var(--brand-indigo);
}

.notification-dropdown__foot {
    border-top: 1px solid rgba(154, 164, 214, 0.12);
    border-bottom: 0;
}

.notification-dropdown__foot a {
    color: var(--brand-indigo);
    font-weight: 800;
    font-size: 0.88rem;
}

.notification-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.notification-stat-card,
.notification-card,
.notification-preference-card,
.notification-empty {
    border: 1px solid rgba(154, 164, 214, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 255, 0.86)),
        var(--app-surface);
    box-shadow: 0 20px 48px rgba(43, 54, 128, 0.08);
}

.notification-stat-card {
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.notification-stat-card::before {
    content: "";
    position: absolute;
    inset-inline: 1rem;
    inset-block-start: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-gradient);
}

.notification-stat-card span {
    display: block;
    color: var(--app-text-soft);
    margin-bottom: 0.5rem;
}

.notification-stat-card strong {
    color: var(--app-surface-strong);
    font-size: 1.65rem;
}

.notification-stat-card--important::before {
    background: linear-gradient(90deg, #ff5b76, #ff9f43);
}

.notifications-list {
    display: grid;
    gap: 0.85rem;
}

.notification-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
}

.notification-card.is-unread {
    border-color: rgba(106, 27, 206, 0.28);
    background:
        linear-gradient(135deg, rgba(106, 27, 206, 0.08), rgba(30, 136, 229, 0.05)),
        var(--app-surface);
}

.notification-card__meta,
.notification-card__badges,
.notification-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.notification-card__meta {
    color: var(--app-text-soft);
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
}

.notification-card h3 {
    margin: 0;
    color: var(--app-surface-strong);
    font-size: 1rem;
}

.notification-card p {
    margin: 0.35rem 0 0.55rem;
    color: var(--app-text-soft);
    line-height: 1.7;
}

.notification-priority,
.notification-read-state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 900;
}

.notification-priority--low {
    background: rgba(154, 164, 214, 0.18);
    color: #6d76a8;
}

.notification-priority--normal {
    background: rgba(30, 136, 229, 0.12);
    color: var(--brand-blue);
}

.notification-priority--high {
    background: rgba(255, 159, 67, 0.16);
    color: #c66a00;
}

.notification-priority--urgent {
    background: rgba(255, 91, 118, 0.16);
    color: #d92d4b;
}

.notification-read-state {
    background: rgba(0, 185, 173, 0.12);
    color: var(--brand-turquoise);
}

.notification-card__actions {
    justify-content: flex-end;
}

.notification-empty {
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
}

.notification-empty i {
    font-size: 3rem;
    color: var(--brand-indigo);
}

.notification-empty h3 {
    color: var(--app-surface-strong);
    margin: 0;
}

.notification-empty p {
    color: var(--app-text-soft);
    margin: 0;
}

.notification-preferences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
}

.notification-preference-card {
    padding: 1rem;
}

.notification-preference-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.notification-preference-card__head h3 {
    margin: 0;
    color: var(--app-surface-strong);
    font-size: 1rem;
}

.notification-preference-card__head small {
    color: var(--app-text-soft);
}

.notification-preference-card__events {
    display: grid;
    gap: 0.55rem;
}

.notification-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.72);
    color: var(--app-text);
    font-weight: 700;
}

html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .notification-stat-card,
html[data-theme="dark"] .notification-preference-card,
html[data-theme="dark"] .notification-empty {
    background:
        linear-gradient(180deg, rgba(20, 26, 62, 0.94), rgba(14, 19, 48, 0.82)),
        var(--app-surface);
}

html[data-theme="dark"] .notification-preference-row {
    background: rgba(255, 255, 255, 0.05);
}

@keyframes notificationDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 991.98px) {
    .notification-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notification-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .notification-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .admin-toolbar:has(.notification-bell) {
        overflow: visible !important;
    }

    .notification-dropdown {
        inset-inline-end: auto;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 1rem);
    }

    .notification-stats-grid {
        grid-template-columns: 1fr;
    }

    .notification-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .order-show-section-block.admin-table-card {
        padding: 0.85rem !important;
    }

    .order-measurements-block .order-measurements-grid,
    .order-show-designs-block .order-show-designs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Keep header flyouts above page cards. This must stay at the end because
   premium UI passes redefine admin-header/admin-section later in the file. */
.admin-header {
    position: relative !important;
    z-index: 9000 !important;
    overflow: visible !important;
}

.admin-header__actions,
.admin-toolbar,
.notification-bell {
    position: relative !important;
    z-index: 9100 !important;
    overflow: visible !important;
}

.notification-dropdown {
    z-index: 9200 !important;
}

.admin-main,
.admin-section,
.admin-form-card,
.admin-table-card {
    position: relative;
    z-index: 1;
}

.order-pleat-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.order-pleat-option {
    min-width: 0;
    border: 1px solid rgba(106, 27, 206, 0.22);
    border-radius: 14px;
    background: rgba(247, 250, 255, 0.92);
    padding: 0.45rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--app-text);
    font-size: 0.82rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    white-space: normal;
}

/* Global modal stacking guard: modals must always sit above the premium header. */
body.confirm-modal-open .admin-header,
body.confirm-modal-open .admin-header__actions,
body.confirm-modal-open .admin-toolbar,
body.confirm-modal-open .notification-bell,
body.confirm-modal-open .notification-dropdown {
    z-index: 1 !important;
}

.confirm-modal:not([hidden]),
.modal.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;
}

.confirm-modal:not([hidden]) .confirm-modal__backdrop,
.modal-backdrop.show {
    z-index: 12000 !important;
}

.confirm-modal:not([hidden]) .confirm-modal__dialog,
.modal.show .modal-dialog {
    position: relative !important;
    z-index: 12010 !important;
}

/* Final toast stacking override: flash messages must appear above sticky headers. */
.toast-stack {
    position: fixed !important;
    z-index: 13000 !important;
    pointer-events: none;
}

.toast-stack .ui-toast {
    pointer-events: auto;
}

.order-pleat-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.order-pleat-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .order-pleat-option {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 575.98px) {
    .order-pleat-options {
        grid-template-columns: 1fr;
    }
}

.order-show-designs-block .order-show-designs-grid {
    grid-template-columns: 1fr !important;
}

.order-show-designs-block .order-show-card {
    padding: clamp(0.9rem, 1.5vw, 1.2rem) !important;
}

.order-show-design-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(154, 164, 214, 0.16);
}

.order-show-chip,
.order-show-tailoring-pill {
    border-radius: 999px;
    background: rgba(106, 27, 206, 0.1);
    color: var(--brand-indigo);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.38rem 0.72rem;
    white-space: nowrap;
}

.order-show-design-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.order-show-design-part {
    border: 1px solid rgba(154, 164, 214, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 255, 0.72)),
        var(--app-surface);
    padding: 0.75rem;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    min-width: 0;
}

.order-show-design-part__media {
    min-height: 112px;
    border-radius: 18px;
    border: 1px dashed rgba(106, 27, 206, 0.24);
    background: rgba(246, 249, 255, 0.9);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--app-text-soft);
    font-size: 0.78rem;
    text-align: center;
}

.order-show-design-part__media img {
    width: 100%;
    height: 100%;
    max-height: 128px;
    object-fit: contain;
    display: block;
}

.order-show-design-part__body {
    min-width: 0;
}

.order-show-design-part__body h6 {
    color: var(--app-surface-strong);
    font-weight: 900;
    margin-bottom: 0.55rem;
}

.order-show-design-part__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.order-show-design-mini-field {
    border-radius: 14px;
    background: rgba(246, 248, 255, 0.82);
    padding: 0.48rem 0.55rem;
    min-width: 0;
}

.order-show-measurement-pill {
    height: 100%;
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.82);
    border: 1px solid rgba(223, 229, 255, 0.82);
    padding: 0.72rem 0.85rem;
    min-width: 0;
}

.order-show-measurement-pill strong {
    display: block;
    color: var(--app-surface-strong);
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.order-show-measurement-pill--notes strong {
    white-space: pre-line;
}

.order-show-design-mini-field--notes {
    grid-column: 1 / -1;
}

.order-show-design-mini-field--notes strong {
    white-space: pre-line;
}

.order-show-design-mini-field span,
.order-show-design-mini-field strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.order-show-design-mini-field span {
    color: var(--app-text-soft);
    font-size: 0.72rem;
    line-height: 1.25;
}

.order-show-design-mini-field strong {
    color: var(--app-surface-strong);
    font-size: 0.86rem;
    line-height: 1.35;
}

.order-show-tailoring-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.order-show-tailoring-pill span {
    color: var(--app-text-soft);
    font-weight: 700;
}

html[data-theme="dark"] .order-show-design-part {
    background:
        linear-gradient(180deg, rgba(20, 26, 62, 0.94), rgba(14, 19, 48, 0.82)),
        var(--app-surface);
}

html[data-theme="dark"] .order-show-design-part__media,
html[data-theme="dark"] .order-show-design-mini-field {
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 767.98px) {
    .order-show-design-part {
        grid-template-columns: 1fr;
    }

    .order-show-design-part__media {
        min-height: 150px;
    }

    .order-show-design-part__fields {
        grid-template-columns: 1fr;
    }
}

.brand-mark--image {
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, transparent);
}

.brand-mark--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.tenant-brand-footer {
    margin: 18px clamp(14px, 2vw, 28px) 24px;
    padding: 14px 18px;
    border: 1px solid rgba(154, 164, 214, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--text-soft);
    text-align: center;
    box-shadow: 0 16px 45px rgba(74, 59, 209, 0.08);
}

.tenant-branding-file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-blue) 10%, #fff);
    color: var(--brand-indigo);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.tenant-branding-file:hover {
    color: var(--brand-violet);
    background: color-mix(in srgb, var(--brand-violet) 12%, #fff);
}

html[data-theme="dark"] .tenant-brand-footer {
    background: rgba(15, 19, 48, 0.72);
    border-color: rgba(154, 164, 214, 0.18);
}

/* Final modal stacking override. Keep this at the end of the stylesheet. */
body.confirm-modal-open .admin-header,
body.confirm-modal-open .admin-header__actions,
body.confirm-modal-open .admin-toolbar,
body.confirm-modal-open .notification-bell,
body.confirm-modal-open .notification-dropdown {
    z-index: 1 !important;
}

.confirm-modal:not([hidden]),
.modal.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;
}

.confirm-modal:not([hidden]) .confirm-modal__backdrop,
.modal-backdrop.show {
    z-index: 12000 !important;
}

.confirm-modal:not([hidden]) .confirm-modal__dialog,
.modal.show .modal-dialog {
    position: relative !important;
    z-index: 12010 !important;
}
/* Tenant Dashboard Premium Redesign */
.tenant-dashboard-premium {
    display: grid;
    gap: 1.35rem;
}

.tenant-hero-premium,
.tenant-premium-panel,
.tenant-kpi-card {
    border: 1px solid rgba(154, 164, 214, .28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .76)),
        radial-gradient(circle at top left, rgba(106, 27, 206, .12), transparent 34%),
        radial-gradient(circle at bottom right, rgba(0, 185, 173, .10), transparent 28%);
    box-shadow: 0 24px 70px rgba(20, 28, 70, .10);
    backdrop-filter: blur(18px);
}

.tenant-hero-premium {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    border-radius: 2rem;
    padding: clamp(1.25rem, 3vw, 2.15rem);
}

.tenant-hero-premium::before {
    content: "";
    position: absolute;
    inset-inline: 2rem;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-gradient);
}

.tenant-hero-premium__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.tenant-hero-premium__eyebrow {
    display: inline-flex;
    margin-bottom: .7rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    color: var(--brand-violet);
    background: rgba(106, 27, 206, .10);
    font-weight: 800;
    font-size: .82rem;
}

.tenant-hero-premium h2 {
    margin: 0;
    color: var(--brand-navy, #11183d);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -.03em;
}

.tenant-hero-premium p {
    margin: .6rem 0 0;
    max-width: 62ch;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.9;
}

.tenant-hero-premium__chips,
.tenant-hero-premium__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.tenant-hero-premium__chips {
    margin-top: 1rem;
}

.tenant-hero-premium__chips span,
.tenant-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .45rem .8rem;
    color: #263260;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(154, 164, 214, .24);
    box-shadow: 0 10px 26px rgba(30, 136, 229, .08);
    font-size: .84rem;
}

.tenant-hero-premium__actions {
    position: relative;
    z-index: 1;
    align-content: flex-start;
    justify-content: flex-end;
    min-width: min(360px, 100%);
}

.tenant-quick-action,
.tenant-link-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    padding: .7rem 1.05rem;
    text-decoration: none;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tenant-quick-action:hover,
.tenant-link-pill:hover {
    transform: translateY(-2px);
}

.tenant-quick-action--gradient {
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 36px rgba(106, 27, 206, .22);
}

.tenant-quick-action--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-turquoise));
    box-shadow: 0 14px 32px rgba(30, 136, 229, .22);
}

.tenant-quick-action--soft,
.tenant-link-pill {
    color: var(--brand-violet);
    background: rgba(106, 27, 206, .08);
    border: 1px solid rgba(106, 27, 206, .20);
}

.tenant-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.tenant-kpi-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .95rem;
    min-height: 148px;
    border-radius: 1.6rem;
    padding: 1.15rem;
}

.tenant-kpi-card::before {
    content: "";
    position: absolute;
    inset-inline: 1.2rem;
    top: 1rem;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-gradient);
}

.tenant-kpi-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: .8rem;
    border-radius: 1rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 28px rgba(106, 27, 206, .20);
}

.tenant-kpi-card__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tenant-kpi-card p {
    margin: 1.05rem 0 .25rem;
    color: var(--text-soft);
    font-weight: 800;
}

.tenant-kpi-card strong {
    display: block;
    color: var(--brand-navy, #11183d);
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1;
}

.tenant-kpi-card span {
    display: block;
    margin-top: .5rem;
    color: #8f9bd0;
    line-height: 1.65;
    font-size: .9rem;
}

.tenant-kpi-card--turquoise .tenant-kpi-card__icon {
    background: linear-gradient(135deg, var(--brand-turquoise), var(--brand-blue));
}

.tenant-kpi-card--danger .tenant-kpi-card__icon {
    background: linear-gradient(135deg, #ff4b5c, #ff7a59);
}

.tenant-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
    gap: 1rem;
    align-items: start;
}

.tenant-dashboard-main,
.tenant-dashboard-side {
    display: grid;
    gap: 1rem;
}

.tenant-premium-panel {
    overflow: hidden;
    border-radius: 1.65rem;
    padding: clamp(1rem, 2.5vw, 1.35rem);
}

.tenant-premium-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tenant-premium-panel__head h3 {
    margin: 0;
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    font-size: 1.15rem;
}

.tenant-premium-panel__head p {
    margin: .35rem 0 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.tenant-status-grid,
.tenant-limit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .7rem;
}

.tenant-status-chip,
.tenant-limit-grid div,
.tenant-finance-list div,
.tenant-list-row,
.tenant-customer-strip article,
.tenant-alert-row,
.tenant-audit-list div,
.tenant-empty-state {
    border: 1px solid rgba(154, 164, 214, .18);
    background: rgba(255, 255, 255, .68);
    border-radius: 1.1rem;
}

.tenant-status-chip,
.tenant-limit-grid div {
    padding: .8rem;
}

.tenant-status-chip span,
.tenant-limit-grid span,
.tenant-finance-list span,
.tenant-list-row span,
.tenant-customer-strip span,
.tenant-audit-list span {
    display: block;
    color: var(--text-soft);
    font-size: .82rem;
}

.tenant-status-chip strong,
.tenant-limit-grid strong,
.tenant-finance-list strong {
    display: block;
    margin-top: .25rem;
    color: var(--brand-navy, #11183d);
    font-size: 1.35rem;
    font-weight: 900;
}

.tenant-list,
.tenant-finance-list,
.tenant-alert-list,
.tenant-audit-list {
    display: grid;
    gap: .7rem;
}

.tenant-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .85rem;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}

.tenant-list-row:hover {
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, .28);
}

.tenant-list-row strong,
.tenant-customer-strip strong,
.tenant-alert-row strong,
.tenant-audit-list strong {
    color: var(--brand-navy, #11183d);
}

.tenant-customer-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
}

.tenant-customer-strip article,
.tenant-finance-list div,
.tenant-audit-list div {
    padding: .85rem;
}

.tenant-finance-list div,
.tenant-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.tenant-module-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.tenant-module-cloud span {
    border-radius: 999px;
    padding: .45rem .75rem;
    color: var(--brand-indigo);
    background: rgba(106, 27, 206, .09);
    border: 1px solid rgba(106, 27, 206, .14);
    font-weight: 800;
    font-size: .82rem;
}

.tenant-alert-row {
    padding: .85rem;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

a.tenant-alert-row:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(255, 75, 92, .10);
}

.tenant-alert-row small {
    display: block;
    margin-top: .25rem;
    color: #7f89bb;
    line-height: 1.5;
}

.tenant-alert-row--danger {
    background: rgba(255, 75, 92, .08);
    border-color: rgba(255, 75, 92, .20);
}

.tenant-alert-row--warning {
    background: rgba(255, 193, 7, .12);
    border-color: rgba(255, 193, 7, .24);
}

.tenant-empty-state {
    display: grid;
    gap: .25rem;
    min-height: 120px;
    place-items: center;
    padding: 1.1rem;
    text-align: center;
}

.tenant-empty-state--compact {
    min-height: auto;
    place-items: start;
    text-align: start;
}

.tenant-empty-state strong {
    font-weight: 900;
}

.tenant-empty-state span {
    color: var(--text-soft);
}

@media (max-width: 1199.98px) {
    .tenant-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .tenant-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tenant-hero-premium {
        flex-direction: column;
        border-radius: 1.35rem;
    }

    .tenant-hero-premium__actions {
        justify-content: stretch;
        min-width: 0;
    }

    .tenant-quick-action {
        flex: 1 1 100%;
    }

    .tenant-kpi-grid {
        grid-template-columns: 1fr;
    }

    .tenant-premium-panel__head {
        flex-direction: column;
    }
}

/* Tenant customers premium workspace */
.tenant-customers-premium {
    display: grid;
    gap: 1rem;
}

.tenant-customers-hero,
.tenant-customers-filter,
.tenant-table-shell,
.tenant-premium-dialog {
    border: 1px solid rgba(154, 164, 214, .20);
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .10), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(247, 250, 255, .78));
    box-shadow: 0 24px 70px rgba(30, 45, 100, .10);
    backdrop-filter: blur(18px);
}

.tenant-customers-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 1.8rem;
    padding: clamp(1.15rem, 3vw, 1.75rem);
}

.tenant-customers-hero h2 {
    margin: .35rem 0 .25rem;
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    font-size: clamp(1.6rem, 3vw, 1.35rem);
}

.tenant-customers-hero p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.tenant-customers-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: flex-end;
}

.tenant-customers-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .7fr) minmax(150px, .6fr) auto;
    gap: .75rem;
    align-items: center;
    border-radius: 1.35rem;
    padding: .9rem;
}

/* Tenant Settings Premium Center */
.tenant-settings-center {
    display: grid;
    gap: 1rem;
}

.tenant-settings-hero {
    min-height: auto;
}

.tenant-settings-stack {
    display: grid;
    gap: .9rem;
}

.tenant-settings-section {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(154, 164, 214, .24);
    border-radius: 1.55rem;
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .10), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .78));
    box-shadow: 0 22px 62px rgba(30, 45, 100, .10);
    backdrop-filter: blur(18px);
}

.tenant-settings-section[open] {
    border-color: rgba(106, 27, 206, .24);
}

.tenant-settings-section--danger {
    border-color: rgba(255, 75, 92, .24);
    background:
        radial-gradient(circle at top left, rgba(255, 75, 92, .10), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 247, 249, .78));
}

.tenant-settings-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.tenant-settings-summary::-webkit-details-marker {
    display: none;
}

.tenant-settings-summary__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 30px rgba(106, 27, 206, .20);
}

.tenant-settings-summary__body {
    display: grid;
    gap: .25rem;
}

.tenant-settings-summary__body strong {
    color: var(--brand-navy, #11183d);
    font-size: 1.12rem;
    font-weight: 900;
}

.tenant-settings-summary__body small {
    color: var(--text-soft);
    line-height: 1.65;
}

.tenant-settings-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.tenant-settings-summary__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(106, 27, 206, .14);
    border-radius: 999px;
    padding: .35rem .7rem;
    color: var(--brand-indigo);
    background: rgba(106, 27, 206, .08);
    font-weight: 800;
    font-size: .82rem;
}

.tenant-settings-summary__chevron {
    color: var(--brand-indigo);
    transition: transform .18s ease;
}

.tenant-settings-section[open] .tenant-settings-summary__chevron {
    transform: rotate(180deg);
}

.tenant-settings-panel {
    border-top: 1px solid rgba(154, 164, 214, .16);
    padding: clamp(1rem, 2.5vw, 1.35rem);
}

.tenant-settings-panel--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1rem;
    align-items: start;
}

.tenant-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .95rem;
}

.tenant-settings-form-grid__full,
.tenant-settings-form-grid .admin-form-grid__full {
    grid-column: 1 / -1;
}

.tenant-settings-form-grid .form-control,
.tenant-settings-form-grid .form-select,
.tenant-settings-test-form .form-control,
.tenant-settings-test-form .form-select,
.tenant-log-limit-form .form-select {
    min-height: 48px;
    border-color: rgba(154, 164, 214, .34);
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .82);
}

.tenant-settings-form-grid textarea.form-control {
    min-height: 100px;
}

.tenant-settings-form-grid .form-label,
.tenant-settings-test-form .form-label,
.tenant-log-limit-form .form-label {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-settings-toggle {
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid rgba(154, 164, 214, .18);
    border-radius: 1rem;
    padding: .65rem .8rem;
    background: rgba(255, 255, 255, .64);
}

.tenant-upload-field {
    display: grid;
    gap: .45rem;
}

.tenant-upload-field a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    border-radius: 999px;
    padding: .4rem .7rem;
    color: var(--brand-indigo);
    background: rgba(30, 136, 229, .09);
    text-decoration: none;
    font-weight: 800;
    font-size: .82rem;
}

.tenant-brand-preview {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: .7rem;
    border: 1px solid rgba(154, 164, 214, .22);
    border-radius: 1.35rem;
    padding: 1rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--preview-primary) 18%, transparent), transparent 38%),
        rgba(255, 255, 255, .78);
}

.tenant-brand-preview > span {
    color: var(--text-soft);
    font-weight: 800;
}

.tenant-brand-preview > strong {
    color: var(--brand-navy, #11183d);
    font-size: 1.25rem;
    font-weight: 900;
}

.tenant-brand-preview__surface {
    display: grid;
    gap: .75rem;
    border-radius: 1.2rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--preview-primary), var(--preview-accent), var(--preview-secondary));
    color: #fff;
    box-shadow: 0 18px 38px color-mix(in srgb, var(--preview-primary) 28%, transparent);
}

.tenant-brand-preview__surface div {
    width: 46px;
    height: 46px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .28);
}

.tenant-brand-preview__surface p {
    margin: 0;
    line-height: 1.6;
}

.tenant-brand-preview__surface button {
    width: fit-content;
    border: 0;
    border-radius: 999px;
    padding: .6rem 1rem;
    color: var(--preview-primary);
    background: #fff;
    font-weight: 900;
}

.tenant-license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
}

.tenant-license-stat {
    border: 1px solid rgba(154, 164, 214, .18);
    border-radius: 1.1rem;
    padding: .9rem;
    background: rgba(255, 255, 255, .66);
}

.tenant-license-stat span {
    display: block;
    color: var(--text-soft);
    font-weight: 800;
    font-size: .82rem;
}

.tenant-license-stat strong {
    display: block;
    margin-top: .3rem;
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    word-break: break-word;
}

.tenant-secret-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
}

.tenant-notification-layout {
    display: grid;
    gap: 1rem;
}

.tenant-notification-card {
    border: 1px solid rgba(154, 164, 214, .18);
    border-radius: 1.35rem;
    padding: clamp(.95rem, 2vw, 1.15rem);
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .07), transparent 34%),
        rgba(255, 255, 255, .70);
    box-shadow: 0 18px 40px rgba(30, 43, 110, .07);
}

.tenant-notification-card--intro {
    background:
        linear-gradient(135deg, rgba(106, 27, 206, .08), rgba(30, 136, 229, .06)),
        rgba(255, 255, 255, .76);
}

.tenant-notification-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .95rem;
}

.tenant-notification-card__head > div {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.tenant-notification-card__head strong {
    color: var(--brand-navy, #11183d);
    font-weight: 950;
}

.tenant-notification-card__head small {
    color: var(--text-soft);
    font-weight: 800;
    line-height: 1.7;
}

.tenant-notification-card__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 14px 30px rgba(106, 27, 206, .18);
}

.tenant-notification-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.tenant-notification-card__grid--compact {
    align-items: end;
}

.tenant-notification-card__full,
.tenant-template-hint {
    grid-column: 1 / -1;
}

.tenant-notification-card .form-control,
.tenant-notification-card .form-select,
.tenant-notification-test-form .form-control,
.tenant-notification-test-form .form-select {
    min-height: 48px;
    border-color: rgba(154, 164, 214, .34);
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .84);
}

.tenant-notification-card textarea.form-control {
    min-height: 120px;
}

.tenant-notification-card .form-label,
.tenant-notification-test-form .form-label {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-notification-toggle,
.tenant-notification-mini-toggle {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid rgba(106, 27, 206, .16);
    border-radius: 1.1rem;
    padding: .75rem .85rem;
    background: rgba(255, 255, 255, .72);
}

.tenant-notification-toggle input,
.tenant-notification-mini-toggle input {
    accent-color: var(--brand-violet);
}

.tenant-notification-toggle span {
    display: grid;
    gap: .2rem;
}

.tenant-notification-toggle strong,
.tenant-notification-mini-toggle span {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-notification-toggle small {
    color: var(--text-soft);
    font-weight: 800;
    line-height: 1.6;
}

.tenant-notification-mini-toggle {
    margin-inline-start: auto;
    border-radius: 999px;
    padding: .45rem .7rem;
}

.tenant-notification-channel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.tenant-notification-channel[hidden] {
    display: none !important;
}

.tenant-notification-channel.is-active {
    border-color: rgba(106, 27, 206, .28);
    box-shadow: 0 18px 46px rgba(106, 27, 206, .10);
}

.tenant-template-hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px dashed rgba(106, 27, 206, .22);
    border-radius: 1rem;
    padding: .75rem .85rem;
    color: var(--text-soft);
    background: rgba(106, 27, 206, .045);
    font-weight: 800;
}

.tenant-template-hint i {
    color: var(--brand-violet);
}

.tenant-notification-actions {
    display: flex;
    justify-content: flex-end;
}

.tenant-notification-card--test {
    margin-top: 1rem;
    background:
        radial-gradient(circle at bottom right, rgba(0, 185, 173, .10), transparent 36%),
        rgba(255, 255, 255, .72);
}

.tenant-notification-test-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, .45fr) auto;
    gap: .8rem;
    align-items: end;
}

.tenant-botsapp-grid {
    display: grid;
    gap: 1rem;
}

.tenant-botsapp-docs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tenant-botsapp-docs div,
.tenant-botsapp-endpoints code,
.tenant-botsapp-sample {
    border: 1px solid rgba(154, 164, 214, .18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .68);
}

.tenant-botsapp-docs div {
    display: grid;
    gap: .35rem;
    padding: .8rem;
}

.tenant-botsapp-docs span {
    color: var(--text-soft);
    font-size: .78rem;
    font-weight: 900;
}

.tenant-botsapp-docs code,
.tenant-botsapp-endpoints code,
.tenant-code-inline {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    word-break: break-all;
}

.tenant-botsapp-endpoints {
    display: grid;
    gap: .55rem;
}

.tenant-botsapp-endpoints code {
    display: block;
    padding: .7rem .8rem;
}

.tenant-botsapp-sample {
    margin: 0;
    padding: .85rem;
    white-space: pre-wrap;
}

.tenant-settings-test-form,
.tenant-log-limit-form {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: end;
    border: 1px solid rgba(154, 164, 214, .16);
    border-radius: 1.15rem;
    margin-top: 1rem;
    padding: .85rem;
    background: rgba(255, 255, 255, .62);
}

.tenant-settings-test-form > div {
    flex: 1 1 220px;
}

.tenant-log-limit-form {
    justify-content: flex-end;
    margin: 0 0 .85rem;
}

.tenant-log-limit-form .form-select {
    width: 120px;
}

.tenant-settings-table {
    border: 1px solid rgba(154, 164, 214, .16);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .60);
}

.tenant-status-chip--compact {
    display: inline-flex;
    min-height: auto;
    padding: .32rem .65rem;
    font-size: .78rem;
}

.tenant-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: rgba(255, 75, 92, .22);
    background: rgba(255, 75, 92, .05);
}

.tenant-danger-zone strong {
    color: #a3182b;
    font-weight: 900;
}

.tenant-danger-zone p {
    margin: .25rem 0 0;
    color: #9a5460;
    line-height: 1.7;
}

@media (max-width: 991.98px) {
    .tenant-settings-summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .tenant-settings-summary__meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .tenant-settings-panel--split,
    .tenant-settings-form-grid {
        grid-template-columns: 1fr;
    }

    .tenant-notification-card__grid,
    .tenant-notification-test-form,
    .tenant-botsapp-docs {
        grid-template-columns: 1fr;
    }

    .tenant-notification-actions {
        justify-content: stretch;
    }

    .tenant-notification-actions .tenant-quick-action,
    .tenant-notification-test-form .tenant-quick-action {
        width: 100%;
        justify-content: center;
    }

    .tenant-brand-preview {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .tenant-settings-summary {
        padding: .85rem;
        gap: .7rem;
    }

    .tenant-settings-summary__icon {
        width: 42px;
        height: 42px;
    }

    .tenant-danger-zone,
    .tenant-settings-test-form,
    .tenant-log-limit-form {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-notification-card__head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tenant-notification-mini-toggle {
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
    }

    .tenant-log-limit-form .form-select,
    .tenant-danger-zone form,
    .tenant-danger-zone button {
        width: 100%;
    }
}

.tenant-customers-filter .form-control,
.tenant-customers-filter .form-select,
.tenant-customer-form .form-control,
.tenant-customer-form .form-select,
.tenant-customer-form textarea {
    min-height: 46px;
    border-color: rgba(154, 164, 214, .28);
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .74);
    color: var(--brand-navy, #11183d);
}

.tenant-customers-bulkbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    margin-bottom: .85rem;
}

.tenant-table-shell {
    overflow: hidden;
    border-radius: 1.55rem;
}

.tenant-table-shell .admin-table {
    --bs-table-bg: transparent;
}

.tenant-table-shell .admin-table thead th {
    border-bottom: 1px solid rgba(154, 164, 214, .18);
    background: rgba(245, 248, 255, .78);
    color: #8e9bd0;
    font-weight: 900;
}

.tenant-table-shell .admin-table tbody td {
    border-color: rgba(154, 164, 214, .12);
    padding-top: .95rem;
    padding-bottom: .95rem;
}

.tenant-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

.tenant-action-icon {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid rgba(106, 27, 206, .20);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .78);
    color: var(--brand-indigo);
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tenant-action-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tenant-action-icon:hover {
    color: var(--brand-violet);
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, .35);
    box-shadow: 0 14px 26px rgba(106, 27, 206, .12);
}

.tenant-action-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: .35rem .78rem;
    border: 1px solid rgba(106, 27, 206, .20);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .78);
    color: var(--brand-indigo);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.tenant-action-text:hover {
    color: var(--brand-violet);
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, .35);
    box-shadow: 0 14px 26px rgba(106, 27, 206, .12);
}

.tenant-action-text--primary {
    color: #fff;
    border-color: transparent;
    background: var(--brand-gradient);
}

.tenant-action-text--primary:hover {
    color: #fff;
}

.tenant-action-icon--primary {
    color: #fff;
    border-color: transparent;
    background: var(--brand-gradient);
}

.tenant-action-icon--danger {
    color: #ef334e;
    border-color: rgba(239, 51, 78, .20);
}

.tenant-row-actions form {
    display: inline-flex;
}

.tenant-premium-dialog {
    border-radius: 1.75rem;
    padding: clamp(1.1rem, 3vw, 1.65rem);
}

.tenant-modal-head {
    margin-bottom: 1rem;
    padding-inline-end: 2.5rem;
}

.tenant-modal-head > span {
    display: inline-flex;
    border-radius: 999px;
    padding: .3rem .65rem;
    color: var(--brand-indigo);
    background: rgba(106, 27, 206, .09);
    font-weight: 900;
    font-size: .78rem;
}

.tenant-customer-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.tenant-customer-form .form-label {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    margin-bottom: .4rem;
}

.tenant-customer-form .form-label span {
    color: #ef334e;
}

.tenant-field--full,
.tenant-form-actions {
    grid-column: 1 / -1;
}

.tenant-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

@media (max-width: 991.98px) {
    .tenant-customers-filter {
        grid-template-columns: 1fr 1fr;
    }

    .tenant-customers-filter .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .tenant-customers-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-customers-hero__actions .btn,
    .tenant-customers-filter,
    .tenant-customer-form {
        grid-template-columns: 1fr;
    }

    .tenant-customers-hero__actions .btn,
    .tenant-customers-filter .btn {
        width: 100%;
    }

    .tenant-table-shell {
        overflow-x: auto;
    }

    .tenant-row-actions {
        justify-content: flex-start;
    }
}

/* Premium dark mode readability pass */
html[data-theme="dark"] {
    --text-soft: #b9c3f6;
    --app-text: #f3f6ff;
    --app-text-soft: #b9c3f6;
    --shell-nav-text: rgba(236, 240, 255, .86);
    --shell-nav-active-text: #fff;
}

html[data-theme="dark"] .admin-sidebar {
    background:
        radial-gradient(circle at top right, rgba(106, 27, 206, .22), transparent 40%),
        linear-gradient(180deg, rgba(13, 18, 45, .96), rgba(7, 11, 30, .98));
    border-color: rgba(154, 164, 214, .14);
}

html[data-theme="dark"] .admin-brand,
html[data-theme="dark"] .admin-brand strong,
html[data-theme="dark"] .admin-nav__link,
html[data-theme="dark"] .admin-nav__sublink,
html[data-theme="dark"] .admin-nav__label,
html[data-theme="dark"] .admin-nav__icon {
    color: rgba(246, 248, 255, .94);
}

html[data-theme="dark"] .admin-brand small {
    color: rgba(218, 224, 255, .68);
}

html[data-theme="dark"] .admin-nav__link,
html[data-theme="dark"] .admin-nav__sublink {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(154, 164, 214, .08);
}

html[data-theme="dark"] .admin-nav__link:hover,
html[data-theme="dark"] .admin-nav__link.is-active,
html[data-theme="dark"] .admin-nav__sublink:hover,
html[data-theme="dark"] .admin-nav__sublink.is-active {
    color: #fff;
    background: rgba(106, 27, 206, .28);
    border-color: rgba(154, 164, 214, .26);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .admin-sidebar__footer .btn,
html[data-theme="dark"] .admin-sidebar .btn-light,
html[data-theme="dark"] .admin-sidebar .btn-outline-light {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(154, 164, 214, .16);
}

html[data-theme="dark"] .admin-header__eyebrow,
html[data-theme="dark"] .tenant-hero-premium__eyebrow,
html[data-theme="dark"] .tenant-mini-badge,
html[data-theme="dark"] .tenant-settings-summary__meta span {
    color: #dce4ff;
    background: rgba(106, 27, 206, .24);
    border-color: rgba(154, 164, 214, .18);
}

html[data-theme="dark"] .tenant-hero-premium,
html[data-theme="dark"] .tenant-premium-panel,
html[data-theme="dark"] .tenant-kpi-card,
html[data-theme="dark"] .tenant-customers-hero,
html[data-theme="dark"] .tenant-customers-filter,
html[data-theme="dark"] .tenant-table-shell,
html[data-theme="dark"] .tenant-premium-dialog,
html[data-theme="dark"] .tenant-settings-section {
    border-color: rgba(154, 164, 214, .18);
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .18), transparent 34%),
        linear-gradient(145deg, rgba(18, 24, 58, .94), rgba(10, 15, 38, .84));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .tenant-customers-filter,
html[data-theme="dark"] .tenant-settings-panel,
html[data-theme="dark"] .tenant-settings-test-form,
html[data-theme="dark"] .tenant-log-limit-form,
html[data-theme="dark"] .tenant-settings-toggle,
html[data-theme="dark"] .tenant-notification-card,
html[data-theme="dark"] .tenant-notification-toggle,
html[data-theme="dark"] .tenant-notification-mini-toggle,
html[data-theme="dark"] .tenant-license-stat,
html[data-theme="dark"] .tenant-empty-state,
html[data-theme="dark"] .tenant-status-chip,
html[data-theme="dark"] .tenant-list-row,
html[data-theme="dark"] .tenant-finance-list div,
html[data-theme="dark"] .tenant-audit-list div,
html[data-theme="dark"] .tenant-customer-strip article,
html[data-theme="dark"] .tenant-alert-row {
    border-color: rgba(154, 164, 214, .14);
    background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .tenant-hero-premium h2,
html[data-theme="dark"] .tenant-customers-hero h2,
html[data-theme="dark"] .tenant-kpi-card strong,
html[data-theme="dark"] .tenant-premium-panel__head h3,
html[data-theme="dark"] .tenant-settings-summary__body strong,
html[data-theme="dark"] .tenant-notification-card__head strong,
html[data-theme="dark"] .tenant-notification-toggle strong,
html[data-theme="dark"] .tenant-notification-mini-toggle span,
html[data-theme="dark"] .tenant-license-stat strong,
html[data-theme="dark"] .tenant-list-row strong,
html[data-theme="dark"] .tenant-customer-strip strong,
html[data-theme="dark"] .tenant-alert-row strong,
html[data-theme="dark"] .tenant-audit-list strong,
html[data-theme="dark"] .tenant-modal-head h2,
html[data-theme="dark"] .tenant-customer-form .form-label,
html[data-theme="dark"] .tenant-settings-form-grid .form-label,
html[data-theme="dark"] .tenant-settings-test-form .form-label,
html[data-theme="dark"] .tenant-notification-card .form-label,
html[data-theme="dark"] .tenant-notification-test-form .form-label,
html[data-theme="dark"] .tenant-log-limit-form .form-label {
    color: #f5f7ff;
}

html[data-theme="dark"] .tenant-hero-premium p,
html[data-theme="dark"] .tenant-customers-hero p,
html[data-theme="dark"] .tenant-kpi-card p,
html[data-theme="dark"] .tenant-kpi-card span,
html[data-theme="dark"] .tenant-premium-panel__head p,
html[data-theme="dark"] .tenant-settings-summary__body small,
html[data-theme="dark"] .tenant-notification-card__head small,
html[data-theme="dark"] .tenant-notification-toggle small,
html[data-theme="dark"] .tenant-license-stat span,
html[data-theme="dark"] .tenant-list-row span,
html[data-theme="dark"] .tenant-customer-strip span,
html[data-theme="dark"] .tenant-audit-list span,
html[data-theme="dark"] .tenant-empty-state span {
    color: rgba(218, 224, 255, .76);
}

html[data-theme="dark"] .tenant-customers-filter .form-control,
html[data-theme="dark"] .tenant-customers-filter .form-select,
html[data-theme="dark"] .tenant-customer-form .form-control,
html[data-theme="dark"] .tenant-customer-form .form-select,
html[data-theme="dark"] .tenant-customer-form textarea,
html[data-theme="dark"] .tenant-settings-form-grid .form-control,
html[data-theme="dark"] .tenant-settings-form-grid .form-select,
html[data-theme="dark"] .tenant-settings-test-form .form-control,
html[data-theme="dark"] .tenant-settings-test-form .form-select,
html[data-theme="dark"] .tenant-notification-card .form-control,
html[data-theme="dark"] .tenant-notification-card .form-select,
html[data-theme="dark"] .tenant-notification-test-form .form-control,
html[data-theme="dark"] .tenant-notification-test-form .form-select,
html[data-theme="dark"] .tenant-log-limit-form .form-select {
    color: #f4f7ff;
    background-color: rgba(6, 11, 30, .74);
    border-color: rgba(154, 164, 214, .18);
}

html[data-theme="dark"] .tenant-customers-filter .form-control::placeholder,
html[data-theme="dark"] .tenant-customer-form .form-control::placeholder,
html[data-theme="dark"] .tenant-settings-form-grid .form-control::placeholder,
html[data-theme="dark"] .tenant-notification-card .form-control::placeholder {
    color: rgba(218, 224, 255, .48);
}

html[data-theme="dark"] .tenant-template-hint {
    border-color: rgba(154, 164, 214, .18);
    color: rgba(218, 224, 255, .76);
    background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .tenant-botsapp-docs div,
html[data-theme="dark"] .tenant-botsapp-endpoints code,
html[data-theme="dark"] .tenant-botsapp-sample {
    border-color: rgba(154, 164, 214, .14);
    background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .tenant-botsapp-docs code,
html[data-theme="dark"] .tenant-botsapp-endpoints code,
html[data-theme="dark"] .tenant-code-inline {
    color: #f4f7ff;
}

html[data-theme="dark"] .tenant-table-shell .admin-table {
    color: #eef2ff;
}

html[data-theme="dark"] .tenant-table-shell .admin-table thead th,
html[data-theme="dark"] .admin-table thead th,
html[data-theme="dark"] .admin-table-card table thead th {
    color: rgba(224, 230, 255, .88);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(154, 164, 214, .16);
}

html[data-theme="dark"] .tenant-table-shell .admin-table tbody td,
html[data-theme="dark"] .admin-table tbody td {
    color: rgba(244, 247, 255, .90);
    border-color: rgba(154, 164, 214, .10);
}

html[data-theme="dark"] .tenant-table-shell .admin-table a,
html[data-theme="dark"] .admin-table a {
    color: #cfd8ff;
}

html[data-theme="dark"] .tenant-action-icon {
    color: #e6eaff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(154, 164, 214, .18);
}

html[data-theme="dark"] .tenant-action-text {
    color: #e6eaff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(154, 164, 214, .18);
}

html[data-theme="dark"] .tenant-action-icon--primary {
    color: #fff;
    background: var(--brand-gradient);
}

html[data-theme="dark"] .tenant-action-text--primary {
    color: #fff;
    background: var(--brand-gradient);
}

html[data-theme="dark"] .tenant-action-icon--danger {
    color: #ff9ba8;
    border-color: rgba(255, 75, 92, .26);
}

html[data-theme="dark"] .tenant-brand-preview {
    border-color: rgba(154, 164, 214, .18);
    background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .tenant-brand-preview > strong,
html[data-theme="dark"] .tenant-brand-preview > span {
    color: #f5f7ff;
}

html[data-theme="dark"] .tenant-danger-zone {
    background: rgba(255, 75, 92, .09);
}

html[data-theme="dark"] .tenant-danger-zone strong {
    color: #ffb3bd;
}

html[data-theme="dark"] .tenant-danger-zone p {
    color: rgba(255, 209, 216, .78);
}

/* Tenant profile */
.admin-toolbar__user {
    text-decoration: none;
    color: inherit;
}

.admin-toolbar__user:hover {
    color: inherit;
    transform: translateY(-2px);
}

.tenant-profile-premium {
    display: grid;
    gap: 1rem;
}

.tenant-profile-hero {
    align-items: center;
}

.tenant-profile-hero__avatar {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .35rem;
    min-width: min(240px, 100%);
    border: 1px solid rgba(154, 164, 214, .20);
    border-radius: 1.5rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 18px 46px rgba(30, 45, 100, .10);
}

.tenant-profile-hero__avatar span {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 1.35rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 18px 38px rgba(106, 27, 206, .24);
    font-size: 2rem;
    font-weight: 900;
}

.tenant-profile-hero__avatar strong {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-profile-hero__avatar small {
    color: var(--text-soft);
}

.tenant-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
    gap: 1rem;
    align-items: start;
}

.tenant-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.tenant-profile-form--single {
    grid-template-columns: 1fr;
}

.tenant-profile-form__full,
.tenant-profile-actions {
    grid-column: 1 / -1;
}

.tenant-profile-form .form-control {
    min-height: 48px;
    border-color: rgba(154, 164, 214, .28);
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .74);
}

.tenant-profile-form .form-label {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-profile-actions {
    display: flex;
    justify-content: flex-end;
}

.tenant-profile-security {
    position: sticky;
    top: 1rem;
}

html[data-theme="dark"] .tenant-profile-hero__avatar {
    border-color: rgba(154, 164, 214, .16);
    background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .tenant-profile-hero__avatar strong,
html[data-theme="dark"] .tenant-profile-form .form-label {
    color: #f5f7ff;
}

html[data-theme="dark"] .tenant-profile-hero__avatar small {
    color: rgba(218, 224, 255, .72);
}

html[data-theme="dark"] .tenant-profile-form .form-control {
    color: #f4f7ff;
    background-color: rgba(6, 11, 30, .74);
    border-color: rgba(154, 164, 214, .18);
}

@media (max-width: 991.98px) {
    .tenant-profile-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .tenant-profile-grid {
        grid-template-columns: 1fr;
    }

    .tenant-profile-security {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .tenant-profile-form {
        grid-template-columns: 1fr;
    }

    .tenant-profile-actions .tenant-quick-action {
        width: 100%;
    }
}

/* Tenant users premium workspace */
.tenant-users-premium {
    display: grid;
    gap: 1rem;
}

.tenant-users-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.15rem .2rem;
}

.tenant-users-table-head h3 {
    margin: 0;
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    font-size: 1.2rem;
}

.tenant-users-table-head p {
    margin: .25rem 0 0;
    color: var(--text-soft);
}

.tenant-users-table {
    min-width: 820px;
}

.tenant-user-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tenant-user-cell > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 12px 24px rgba(106, 27, 206, .18);
    font-weight: 900;
}

.tenant-user-cell strong,
.tenant-user-cell small {
    display: block;
}

.tenant-user-cell strong {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-user-cell small {
    color: var(--text-soft);
    line-height: 1.55;
}

.tenant-users-branches,
.tenant-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.tenant-users-branches {
    color: var(--brand-indigo);
    font-weight: 800;
}

.tenant-users-branches em,
.tenant-role-chips span {
    border-radius: 999px;
    padding: .34rem .62rem;
    background: rgba(106, 27, 206, .09);
    color: var(--brand-indigo);
    border: 1px solid rgba(106, 27, 206, .12);
    font-style: normal;
    font-weight: 800;
    font-size: .8rem;
}

.tenant-role-chips span.is-muted {
    color: #8f9bd0;
    background: rgba(154, 164, 214, .12);
    border-color: rgba(154, 164, 214, .16);
}

.tenant-user-modal {
    position: relative;
}

.tenant-user-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.tenant-user-form .form-control {
    min-height: 48px;
    border-radius: 1rem;
    border-color: rgba(154, 164, 214, .28);
    background: rgba(255, 255, 255, .78);
}

.tenant-user-form .form-label {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
}

.tenant-user-form .form-label span {
    color: #ef334e;
}

.tenant-choice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .75rem;
}

.tenant-choice-head small {
    display: block;
    color: var(--text-soft);
    line-height: 1.6;
}

.tenant-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
}

.tenant-choice-grid--roles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tenant-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    min-height: 76px;
    border: 1px solid rgba(154, 164, 214, .20);
    border-radius: 1.15rem;
    padding: .8rem .9rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(247, 250, 255, .72));
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tenant-choice-card:hover {
    transform: translateY(-2px);
    border-color: rgba(106, 27, 206, .28);
    box-shadow: 0 14px 28px rgba(106, 27, 206, .10);
}

.tenant-choice-card input {
    position: absolute;
    inset-inline-end: .9rem;
    top: .9rem;
    accent-color: var(--brand-violet);
}

.tenant-choice-card > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: .9rem;
    color: var(--brand-indigo);
    background: rgba(106, 27, 206, .10);
}

.tenant-choice-card strong {
    color: var(--brand-navy, #11183d);
    font-weight: 900;
    padding-inline-end: 1.4rem;
}

.tenant-choice-card em {
    grid-column: 2;
    display: block;
    margin-top: -.35rem;
    color: var(--text-soft);
    font-style: normal;
    font-size: .78rem;
}

.tenant-choice-card:has(input:checked) {
    border-color: rgba(106, 27, 206, .42);
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .14), transparent 36%),
        rgba(255, 255, 255, .92);
}

html[data-theme="dark"] .tenant-users-table-head h3,
html[data-theme="dark"] .tenant-user-cell strong,
html[data-theme="dark"] .tenant-user-form .form-label,
html[data-theme="dark"] .tenant-choice-card strong {
    color: #f5f7ff;
}

html[data-theme="dark"] .tenant-users-table-head p,
html[data-theme="dark"] .tenant-user-cell small,
html[data-theme="dark"] .tenant-choice-head small,
html[data-theme="dark"] .tenant-choice-card em {
    color: rgba(218, 224, 255, .72);
}

html[data-theme="dark"] .tenant-user-form .form-control {
    color: #f4f7ff;
    background-color: rgba(6, 11, 30, .74);
    border-color: rgba(154, 164, 214, .18);
}

html[data-theme="dark"] .tenant-choice-card {
    border-color: rgba(154, 164, 214, .16);
    background:
        linear-gradient(145deg, rgba(18, 24, 58, .86), rgba(10, 15, 38, .76));
}

html[data-theme="dark"] .tenant-choice-card:has(input:checked) {
    border-color: rgba(154, 164, 214, .32);
    background:
        radial-gradient(circle at top left, rgba(106, 27, 206, .24), transparent 36%),
        rgba(18, 24, 58, .92);
}

@media (max-width: 991.98px) {
    .tenant-users-table-head,
    .tenant-choice-head {
        flex-direction: column;
    }

    .auth-card--premium .auth-card__content {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .auth-card--premium .auth-form--premium {
        order: 1;
    }

    .auth-copy {
        order: 2;
        text-align: center;
    }

    .auth-edition-strip {
        justify-content: center;
    }

    .auth-highlights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .auth-page {
        align-items: flex-start;
        padding: 4.5rem 0 1rem;
    }

    .auth-language-switch {
        top: .9rem;
        inset-inline-end: 1rem;
    }

    .auth-card--premium {
        border-radius: 28px;
    }

    .auth-card--premium::before {
        inset: .55rem;
        border-radius: 22px;
    }

    .auth-card--premium .auth-card__content {
        padding: 1rem;
    }

    .auth-highlights {
        grid-template-columns: 1fr;
    }

    .auth-form--premium {
        border-radius: 24px;
    }

    .tenant-user-form {
        grid-template-columns: 1fr;
    }

    .tenant-form-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .tenant-form-actions .btn,
    .tenant-form-actions .tenant-quick-action {
        width: 100%;
    }
}

/* Bootstrap modal stacking fix: keep the dim backdrop behind the dialog. */
body.modal-open .admin-header,
body.modal-open .admin-header__actions,
body.modal-open .admin-toolbar,
body.modal-open .admin-sidebar,
body.modal-open .tenant-sidebar,
body.modal-open .notification-bell,
body.modal-open .notification-dropdown {
    z-index: 1 !important;
}

.modal-backdrop.show {
    z-index: 11990 !important;
}

.modal.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;
    pointer-events: auto !important;
}

.modal.show .modal-dialog {
    position: relative !important;
    z-index: 12020 !important;
    pointer-events: auto !important;
}

.modal.show .modal-content {
    position: relative !important;
    z-index: 12030 !important;
    pointer-events: auto !important;
}

/* Tenant user modal can become tall when validation errors or many roles are visible. */
.modal.show .modal-dialog-scrollable {
    max-height: calc(100dvh - 1.5rem) !important;
    height: auto !important;
    margin-block: .75rem !important;
}

.modal.show .modal-dialog-scrollable .modal-content,
.modal.show .tenant-user-modal {
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.modal.show .tenant-user-modal .confirm-modal__close {
    position: sticky;
    inset-block-start: .75rem;
    z-index: 3;
}

/* Reports module premium cards. */
.reports-center .reports-card,
.reports-workspace .reports-summary-card {
    min-height: 180px;
}

.reports-card h3 {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--brand-navy, #11183d);
    margin: .35rem 0;
}

.reports-card p {
    color: var(--text-soft, #9aa4d6);
    line-height: 1.8;
    margin: 0;
}

.reports-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
}

.reports-summary-card span {
    color: var(--text-soft, #9aa4d6);
    font-weight: 800;
}

.reports-summary-card strong {
    color: var(--brand-navy, #11183d);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 950;
}

.reports-filter-bar {
    align-items: center;
}

.reports-filter-bar .admin-check-card {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(154, 164, 214, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--brand-navy, #11183d);
    font-weight: 800;
}

html[data-theme="dark"] .reports-card h3,
html[data-theme="dark"] .reports-summary-card strong {
    color: #f8fbff;
}