@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root,
html[data-theme="light"] {
    --aq-bg: #f7f1eb;
    --aq-bg-rgb: 247, 241, 235;
    --aq-surface: #ffffff;
    --aq-surface-rgb: 255, 255, 255;
    --aq-surface-2: #fff8f3;
    --aq-surface-elevated-rgb: 255, 248, 243;
    --aq-surface-soft-rgb: 245, 235, 226;
    --aq-text: #221a15;
    --aq-text-rgb: 34, 26, 21;
    --aq-muted: #7f6e63;
    --aq-muted-rgb: 127, 110, 99;
    --aq-border: rgba(243, 92, 46, 0.16);
    --aq-border-strong: rgba(243, 92, 46, 0.24);
    --aq-orange: #f35c2e;
    --aq-orange-rgb: 243, 92, 46;
    --aq-orange-light: #ff7546;
    --aq-orange-light-rgb: 255, 117, 70;
    --aq-orange-deep: #cf4720;
    --aq-orange-deep-rgb: 207, 71, 32;
    --aq-orange-soft: rgba(243, 92, 46, 0.1);
    --aq-orange-border: var(--aq-border);
    --aq-glow: rgba(var(--aq-orange-rgb), 0.16);
    --aq-heading: "Space Grotesk", "Cairo", "Segoe UI", sans-serif;
    --aq-body: "Manrope", "Cairo", "Segoe UI", sans-serif;
    --aq-shadow: 0 18px 48px rgba(41, 28, 20, 0.1);
    --aq-shadow-hover: 0 24px 60px rgba(41, 28, 20, 0.16);
    --aq-card-shadow: var(--aq-shadow);
    --aq-card-shadow-hover: var(--aq-shadow-hover);
    --aq-border-subtle: rgba(var(--aq-text-rgb), 0.08);
    --aq-panel-bg: linear-gradient(
            180deg,
            rgba(var(--aq-surface-rgb), 0.96),
            rgba(var(--aq-surface-elevated-rgb), 0.98)
        );
    --aq-card-bg: rgba(var(--aq-surface-rgb), 0.94);
    --aq-topbar-bg: rgba(var(--aq-surface-rgb), 0.78);
    --aq-control-bg: rgba(var(--aq-surface-rgb), 0.8);
    --aq-control-bg-hover: rgba(var(--aq-orange-rgb), 0.08);
    --aq-input-bg: rgba(var(--aq-surface-rgb), 0.92);
    --aq-input-bg-focus: rgba(var(--aq-surface-rgb), 1);
    --aq-input-border: rgba(var(--aq-orange-rgb), 0.18);
    --aq-badge-bg: rgba(var(--aq-text-rgb), 0.04);
    --aq-dropdown-bg: rgba(var(--aq-surface-rgb), 0.98);
    --aq-page-shell-top: rgba(var(--aq-text-rgb), 0.03);
    --aq-page-shell-bottom: rgba(var(--aq-text-rgb), 0.015);
    --aq-page-glow-top: rgba(var(--aq-text-rgb), 0.035);
    --aq-page-glow-bottom: rgba(var(--aq-text-rgb), 0.02);
    --aq-on-accent: #17110d;

    --font-family-base: var(--aq-body);
    --font-family-heading: var(--aq-heading);
    --font-family-sans-serif: var(--aq-body);
    --color-primary: var(--aq-orange);
    --color-primary-rgb: var(--aq-orange-rgb);
    --color-primary-strong: var(--aq-orange-light);
    --color-primary-darker: var(--aq-orange-deep);
    --color-secondary: var(--aq-orange-light);
    --color-secondary-rgb: var(--aq-orange-light-rgb);
    --color-secondary-strong: var(--aq-orange);
    --color-background: var(--aq-bg);
    --color-background-rgb: var(--aq-bg-rgb);
    --color-background-alt: var(--aq-surface-2);
    --color-background-alt-rgb: var(--aq-surface-elevated-rgb);
    --color-surface: var(--aq-surface);
    --color-surface-rgb: var(--aq-surface-rgb);
    --color-surface-muted: var(--aq-surface-2);
    --color-surface-muted-rgb: var(--aq-surface-soft-rgb);
    --color-border: var(--aq-border);
    --color-border-rgb: var(--aq-orange-rgb);
    --color-border-strong: var(--aq-border-strong);
    --color-border-strong-rgb: var(--aq-orange-rgb);
    --color-text: var(--aq-text);
    --color-text-rgb: var(--aq-text-rgb);
    --color-text-muted: var(--aq-muted);
    --color-text-muted-rgb: var(--aq-muted-rgb);
    --color-text-muted-soft: rgba(var(--aq-text-rgb), 0.56);
    --color-heading: var(--aq-text);
    --color-heading-rgb: var(--aq-text-rgb);
    --color-link: var(--aq-orange);
    --color-ink: var(--aq-text);
    --color-ink-rgb: var(--aq-text-rgb);
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
    --color-black: #111111;
    --color-black-rgb: 17, 17, 17;
    --color-success: #22c55e;
    --color-success-rgb: 34, 197, 94;
    --color-success-strong: #16a34a;
    --color-success-darker: #166534;
    --color-success-bright: #4ade80;
    --color-success-soft: rgba(var(--color-success-rgb), 0.14);
    --color-success-soft-alt: rgba(var(--color-success-rgb), 0.08);
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-warning-strong: #f97316;
    --color-warning-darker: #9a3412;
    --color-warning-bright: #fbbf24;
    --color-warning-soft: rgba(var(--color-warning-rgb), 0.14);
    --color-warning-soft-alt: rgba(var(--color-warning-rgb), 0.08);
    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;
    --color-danger-strong: #f87171;
    --color-danger-dark: #dc2626;
    --color-danger-darker: #991b1b;
    --color-danger-bright: #fca5a5;
    --color-danger-soft: rgba(var(--color-danger-rgb), 0.14);
    --color-danger-soft-alt: rgba(var(--color-danger-rgb), 0.08);
    --color-info: #38bdf8;
    --color-info-rgb: 56, 189, 248;
    --color-info-strong: #0ea5e9;
    --color-info-dark: #0284c7;
    --color-info-darker: #075985;
    --color-info-bright: #7dd3fc;
    --color-info-soft: rgba(var(--color-info-rgb), 0.14);
    --color-info-soft-alt: rgba(var(--color-info-rgb), 0.08);
    --color-shadow-rgb: 41, 28, 20;
    --shadow-xs: 0 8px 20px rgba(var(--color-shadow-rgb), 0.08);
    --shadow-sm: 0 12px 28px rgba(var(--color-shadow-rgb), 0.12);
    --shadow-md: 0 16px 36px rgba(var(--color-shadow-rgb), 0.16);
    --shadow-lg: 0 24px 50px rgba(var(--color-shadow-rgb), 0.2);
    --shadow-xl: 0 30px 65px rgba(var(--color-shadow-rgb), 0.24);
    --color-shadow: var(--shadow-sm);
    --color-shadow-strong: var(--shadow-lg);
    --sidebar-bg: rgba(var(--aq-surface-rgb), 0.96);
    --sidebar-text: var(--aq-muted);
    --sidebar-hover: rgba(var(--aq-orange-rgb), 0.08);
    --sidebar-active: rgba(var(--aq-orange-rgb), 0.12);
    --topbar-bg: var(--aq-topbar-bg);
    --input-bg: var(--aq-input-bg);
    --input-border: var(--aq-input-border);
    --card-bg: var(--aq-card-bg);
    --badge-bg: var(--aq-badge-bg);
    --badge-text: var(--aq-muted);
    --dropdown-bg: var(--aq-dropdown-bg);
    --modal-bg: var(--aq-dropdown-bg);
    --scrollbar-thumb: rgba(var(--aq-orange-rgb), 0.28);
    --brand-primary: var(--aq-orange);
    --brand-primary-dark: var(--aq-orange-light);
    --brand-primary-soft: var(--aq-orange-soft);
    --brand-primary-soft-strong: rgba(var(--aq-orange-rgb), 0.16);
    --brand-accent: var(--aq-orange-light);
    --brand-accent-dark: var(--aq-orange);
    --brand-accent-soft: rgba(var(--aq-orange-rgb), 0.08);
    --brand-accent-soft-strong: rgba(var(--aq-orange-rgb), 0.16);
    --shell-surface: transparent;
    --shell-surface-elevated: rgba(var(--aq-surface-rgb), 0.94);
    --shell-border: var(--aq-border);
    --shell-border-strong: var(--aq-border-strong);
    --shell-text: var(--aq-text);
    --shell-muted: var(--aq-muted);
    --shell-shadow: var(--aq-card-shadow);
    --shell-shadow-hover: var(--aq-card-shadow-hover);
    --page-gutter-inline: clamp(1rem, 2vw, 1.75rem);
    --page-section-gap: 1.5rem;

    font-family: var(--aq-body);
    line-height: 1.5;
    font-weight: 400;
    color: var(--aq-text);
    background: var(--aq-bg);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"] {
    --aq-bg: #090909;
    --aq-bg-rgb: 9, 9, 9;
    --aq-surface: #111111;
    --aq-surface-rgb: 17, 17, 17;
    --aq-surface-2: #181818;
    --aq-surface-elevated-rgb: 24, 24, 24;
    --aq-surface-soft-rgb: 30, 30, 30;
    --aq-text: #f5eee8;
    --aq-text-rgb: 245, 238, 232;
    --aq-muted: #aba39c;
    --aq-muted-rgb: 171, 163, 156;
    --aq-border: rgba(243, 92, 46, 0.18);
    --aq-border-strong: rgba(243, 92, 46, 0.28);
    --aq-orange-soft: rgba(243, 92, 46, 0.1);
    --aq-glow: rgba(var(--aq-orange-rgb), 0.15);
    --aq-shadow: 0 24px 60px rgba(var(--aq-bg-rgb), 0.35);
    --aq-shadow-hover: 0 28px 64px rgba(var(--aq-bg-rgb), 0.44);
    --aq-card-shadow: var(--aq-shadow);
    --aq-card-shadow-hover: var(--aq-shadow-hover);
    --aq-border-subtle: rgba(var(--aq-text-rgb), 0.06);
    --aq-panel-bg: linear-gradient(
            180deg,
            rgba(var(--aq-surface-rgb), 0.96),
            rgba(var(--aq-surface-elevated-rgb), 0.98)
        );
    --aq-card-bg: rgba(var(--aq-surface-rgb), 0.95);
    --aq-topbar-bg: rgba(var(--aq-bg-rgb), 0.72);
    --aq-control-bg: rgba(var(--aq-surface-elevated-rgb), 0.88);
    --aq-control-bg-hover: rgba(var(--aq-orange-rgb), 0.08);
    --aq-input-bg: rgba(var(--aq-surface-elevated-rgb), 0.92);
    --aq-input-bg-focus: rgba(var(--aq-surface-soft-rgb), 0.96);
    --aq-input-border: rgba(var(--aq-orange-rgb), 0.16);
    --aq-badge-bg: rgba(var(--color-white-rgb), 0.04);
    --aq-dropdown-bg: rgba(var(--aq-surface-rgb), 0.98);
    --aq-page-shell-top: rgba(var(--aq-orange-rgb), 0.2);
    --aq-page-shell-bottom: rgba(var(--aq-orange-rgb), 0.08);
    --aq-page-glow-top: rgba(var(--aq-orange-rgb), 0.18);
    --aq-page-glow-bottom: rgba(var(--aq-orange-rgb), 0.12);
    --aq-on-accent: #111111;
    --color-background-alt: var(--aq-surface-2);
    --color-background-alt-rgb: var(--aq-surface-elevated-rgb);
    --color-surface: var(--aq-surface);
    --color-surface-rgb: var(--aq-surface-rgb);
    --color-surface-muted: var(--aq-surface-2);
    --color-surface-muted-rgb: var(--aq-surface-soft-rgb);
    --color-border: var(--aq-border);
    --color-border-rgb: var(--aq-orange-rgb);
    --color-border-strong: var(--aq-border-strong);
    --color-border-strong-rgb: var(--aq-orange-rgb);
    --color-text: var(--aq-text);
    --color-text-rgb: var(--aq-text-rgb);
    --color-text-muted: var(--aq-muted);
    --color-text-muted-rgb: var(--aq-muted-rgb);
    --color-text-muted-soft: rgba(var(--aq-text-rgb), 0.46);
    --color-heading: var(--aq-text);
    --color-heading-rgb: var(--aq-text-rgb);
    --color-link: var(--aq-orange-light);
    --color-ink: var(--aq-text);
    --color-ink-rgb: var(--aq-text-rgb);
    --color-shadow-rgb: var(--aq-bg-rgb);
    --shadow-xs: 0 10px 24px rgba(var(--color-shadow-rgb), 0.18);
    --shadow-sm: 0 16px 32px rgba(var(--color-shadow-rgb), 0.24);
    --shadow-md: 0 22px 42px rgba(var(--color-shadow-rgb), 0.3);
    --shadow-lg: 0 28px 60px rgba(var(--color-shadow-rgb), 0.38);
    --shadow-xl: 0 34px 72px rgba(var(--color-shadow-rgb), 0.46);
    --color-shadow: var(--shadow-sm);
    --color-shadow-strong: var(--shadow-lg);
    --sidebar-bg: rgba(var(--aq-surface-rgb), 0.96);
    --sidebar-text: var(--aq-muted);
    --sidebar-hover: rgba(var(--aq-orange-rgb), 0.08);
    --sidebar-active: rgba(var(--aq-orange-rgb), 0.12);
    --topbar-bg: var(--aq-topbar-bg);
    --input-bg: var(--aq-input-bg);
    --input-border: var(--aq-input-border);
    --card-bg: var(--aq-card-bg);
    --badge-bg: var(--aq-badge-bg);
    --badge-text: var(--aq-muted);
    --dropdown-bg: var(--aq-dropdown-bg);
    --modal-bg: var(--aq-dropdown-bg);
    --scrollbar-thumb: rgba(var(--aq-orange-rgb), 0.35);
    --brand-accent-dark: var(--aq-orange-light);
    --shell-surface-elevated: rgba(var(--aq-surface-rgb), 0.92);
    --shell-border: var(--aq-border);
    --shell-border-strong: var(--aq-border-strong);
    --shell-text: var(--aq-text);
    --shell-muted: var(--aq-muted);
    --shell-shadow: var(--aq-card-shadow);
    --shell-shadow-hover: var(--aq-card-shadow-hover);
}

html[lang^="ar"],
html[dir="rtl"] {
    --aq-heading: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --aq-body: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

:root,
html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--aq-bg);
    color: var(--aq-text);
    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    font-family: var(--aq-body) !important;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.shell-page-header__title,
.card-title,
.login-panel h1,
.login-box h2,
.sidebar-section-title,
.btn {
    font-family: var(--aq-heading) !important;
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    letter-spacing: 0;
}

.page-shell {
    position: relative;
    min-height: 100dvh;
    overflow: visible;
    background:
        radial-gradient(circle at top right, var(--aq-page-shell-top), transparent 28%),
        radial-gradient(circle at bottom left, var(--aq-page-shell-bottom), transparent 30%),
        var(--aq-bg);
}

.page-pattern {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSI0OSI+PHBhdGggZD0iTTE0IDBsMTQgOC4xdjE2LjJMMTQgMzIuNCAwIDI0LjNWOC4xTDE0IDB6IiBmaWxsPSJub25lIiBzdHJva2U9IiNGMzVDMkUiIHN0cm9rZS1vcGFjaXR5PSIwLjA1Ii8+PC9zdmc+");
    background-size: 50px;
    mask-image: radial-gradient(circle at top right, black, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at top right, black, transparent 72%);
}

html[data-theme="light"] .page-pattern {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSI0OSI+PHBhdGggZD0iTTE0IDBsMTQgOC4xdjE2LjJMMTQgMzIuNCAwIDI0LjNWOC4xTDE0IDB6IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjFhMTUiIHN0cm9rZS1vcGFjaXR5PSIwLjAzIi8+PC9zdmc+");
}

.page-glow {
    position: fixed;
    border-radius: 999px;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}

.page-glow--top {
    top: -15rem;
    right: -10rem;
    width: 36rem;
    height: 36rem;
    background: var(--aq-page-glow-top);
}

.page-glow--bottom {
    bottom: -16rem;
    left: -12rem;
    width: 30rem;
    height: 30rem;
    background: var(--aq-page-glow-bottom);
}

.page-shell__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.page-shell .wrapper,
.page-shell .main-content,
.page-shell .login-shell,
.page-shell footer {
    background: transparent !important;
}

.page-shell .wrapper {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 100dvh;
}

/* Keep dashboard footer pinned on short pages and natural on long pages. */
.dashboard-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.dashboard-layout .page-shell {
    flex: 1 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-layout .page-shell__content {
    flex: 1 0 auto;
    min-height: 100%;
}

.dashboard-layout .wrapper {
    flex: 1 0 auto;
    min-height: 100%;
}

.dashboard-layout .wrapper > .main-content {
    flex: 1 0 auto;
    min-height: 0;
}

.dashboard-layout .wrapper > footer {
    margin-top: auto;
    flex-shrink: 0;
}

.vertical .main-content,
.vertical.hover .main-content,
.narrow.open .main-content,
.sidebar-left,
.login-shell,
.login-panel,
.login-box {
    position: relative;
}

.page-shell .main-content {
    flex: 1 0 auto;
    min-height: auto;
    overflow: visible;
}

.page-shell footer {
    margin-top: auto;
}

.dashboard-card,
.card,
.table-responsive,
.modal-content,
.dropdown-menu,
.list-group-item,
.quick-link-item,
.shell-banner,
.login-box,
.topnav__menu {
    background: var(--aq-panel-bg);
    border-color: var(--aq-orange-border) !important;
    box-shadow: var(--aq-card-shadow);
    backdrop-filter: blur(18px);
}

.card-header,
.card-footer,
.table thead th,
.table td,
.table th,
.dropdown-divider,
hr {
    border-color: var(--aq-border-subtle) !important;
}

.dashboard-card,
.quick-link-item,
.btn,
.topnav__toggle,
.topnav__icon-button,
.topnav__profile-toggle,
.language-switcher,
.shell-banner,
.status-badge,
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.login-panel__logo-card,
.brand-logo-wrap {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.dashboard-card:hover,
.quick-link-item:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--aq-orange-rgb), 0.28) !important;
    box-shadow: var(--aq-card-shadow-hover);
}

/* ── Sales pipeline board – per-opportunity card ──────────────────────────────
   Replaces the hard-coded Bootstrap `bg-white` utility that was causing these
   cards to render with a white background in dark mode.
   Uses --aq-card-bg which resolves to rgba(255,255,255,0.94) in light mode
   (visually identical to bg-white) and rgba(17,17,17,0.95) in dark mode.
   Light-mode appearance is intentionally unchanged.
─────────────────────────────────────────────────────────────────────────────── */
.pipeline-opportunity-card {
    background: var(--aq-card-bg);
    border-color: var(--aq-border) !important;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.pipeline-opportunity-card:hover {
    border-color: rgba(var(--aq-orange-rgb), 0.28) !important;
    box-shadow: var(--aq-card-shadow);
    transform: translateY(-2px);
}


.content-card__description,
.text-muted,
.quick-link-count,
.action-card__description,
.content-card__description,
.empty-state__description,
.login-box > p.text-muted,
.login-panel p,
.login-panel li,
.brand-copy span,
.footer-area,
.footer-area small {
    color: var(--aq-muted) !important;
}

.brand-lockup {
    gap: 0.7rem;
}

.brand-lockup--sm,
.brand-lockup--md {
    gap: 0.45rem;
}

.brand-lockup--with-copy {
    gap: 0.6rem;
}

.brand-logo-wrap,
.sidebar-brand-link .brand-logo-wrap,
.topnav__brand .brand-logo-wrap,
.login-box__brand .brand-logo-wrap,
.login-panel__logo-card .brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 1.35rem;
    border: 1px solid var(--aq-orange-border);
    background:
        linear-gradient(145deg, rgba(var(--aq-orange-rgb), 0.15), rgba(var(--aq-orange-rgb), 0.02)),
        rgba(var(--color-white-rgb), 0.02);
    box-shadow:
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.05),
        0 0 45px rgba(var(--aq-orange-rgb), 0.12);
}

.brand-logo-picture {
    display: inline-flex;
    align-items: center;
    justify-content: inherit;
    max-width: 100%;
}

.brand-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-logo--sm {
    max-width: clamp(8rem, 12vw, 10.75rem);
}

.brand-logo--md {
    max-width: clamp(9.5rem, 16vw, 13rem);
}

.brand-logo--lg {
    max-width: clamp(12rem, 22vw, 18rem);
}

.topnav {
    background: var(--aq-topbar-bg);
    border-bottom: 1px solid var(--aq-orange-border);
    backdrop-filter: blur(20px);
    z-index: 1040;
}

.topnav__lead {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.topnav__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-bottom: 0;
}

.topnav__brand .brand-lockup {
    width: auto;
}

.topnav__toggle,
.topnav__chip,
.topnav__icon-button,
.topnav__profile-toggle,
.language-switcher {
    background: var(--aq-control-bg) !important;
    border-color: var(--aq-orange-border) !important;
    color: var(--aq-muted) !important;
    box-shadow: none;
}

.topnav__chip {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
}

.topnav__toggle:hover,
.topnav__toggle:focus,
.topnav__icon-button:hover,
.topnav__icon-button:focus,
.topnav__profile-toggle:hover,
.topnav__profile-toggle:focus,
.topnav__profile-dropdown.show .topnav__profile-toggle,
.language-switcher__item:hover {
    background: var(--aq-control-bg-hover) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.24) !important;
    color: var(--aq-orange-light) !important;
    box-shadow: 0 12px 24px rgba(var(--aq-bg-rgb), 0.18);
}

.topnav__menu .dropdown-item:hover,
.topnav__menu .dropdown-item:focus {
    background: rgba(var(--aq-orange-rgb), 0.08);
    color: var(--aq-text);
}

.user-avatar,
.language-switcher__item.is-active,
.status-badge--brand,
.btn-primary,
.stat-icon-primary,
.stat-icon-accent {
    color: var(--aq-on-accent) !important;
    background: linear-gradient(135deg, var(--aq-orange-light) 0%, var(--aq-orange) 100%);
}

.language-switcher {
    box-shadow: none;
}

.sidebar-left {
    background: linear-gradient(
            180deg,
            rgba(var(--aq-surface-elevated-rgb), 0.96),
            rgba(var(--aq-surface-rgb), 0.98)
        ) !important;
    border-color: var(--aq-orange-border) !important;
    box-shadow: 0 24px 60px rgba(var(--aq-bg-rgb), 0.35);
}

.sidebar-section-title {
    color: var(--aq-muted);
}

.sidebar-nav__icon {
    color: rgba(var(--aq-text-rgb), 0.42) !important;
}

.sidebar-left .navbar-nav .nav-link {
    background: transparent !important;
    border: 1px solid transparent;
    color: var(--aq-muted) !important;
}

.sidebar-left .navbar-nav .nav-link .item-text {
    color: var(--aq-muted) !important;
}

.sidebar-left .navbar-nav .nav-link.dropdown-toggle::after {
    color: rgba(var(--aq-text-rgb), 0.42);
}

.sidebar-left .navbar-nav .nav-link:hover,
.sidebar-left .navbar-nav .nav-link:focus,
.sidebar-left .navbar-nav .nav-link.active,
.sidebar-left .navbar-nav .nav-item.active > .nav-link {
    background: rgba(var(--aq-orange-rgb), 0.08) !important;
    border-color: var(--aq-orange-border);
    color: var(--aq-orange-light) !important;
    box-shadow: 0 12px 24px rgba(var(--aq-bg-rgb), 0.16);
}

.sidebar-left .navbar-nav .nav-link:hover i,
.sidebar-left .navbar-nav .nav-link:focus i,
.sidebar-left .navbar-nav .nav-link.active i,
.sidebar-left .navbar-nav .nav-item.active > .nav-link i,
.sidebar-left .navbar-nav .nav-link:hover .item-text,
.sidebar-left .navbar-nav .nav-link:focus .item-text,
.sidebar-left .navbar-nav .nav-link.active .item-text,
.sidebar-left .navbar-nav .nav-item.active > .nav-link .item-text,
.sidebar-left .navbar-nav .nav-link:hover.dropdown-toggle::after,
.sidebar-left .navbar-nav .nav-link:focus.dropdown-toggle::after,
.sidebar-left .navbar-nav .nav-link.active.dropdown-toggle::after,
.sidebar-left .navbar-nav .nav-item.active > .nav-link.dropdown-toggle::after {
    color: var(--aq-orange-light) !important;
}

.sidebar-left .navbar-nav > .nav-item.active::after {
    background-color: var(--aq-orange) !important;
    box-shadow: 0 0 18px rgba(var(--aq-orange-rgb), 0.42);
}

.nav-placeholder-tag,
.status-badge--soft,
.login-helper,
.badge-primary {
    background: var(--aq-orange-soft);
    color: var(--aq-orange-light);
    border-color: var(--aq-orange-border);
}

.status-badge--neutral,
.status-badge--muted,
.status-badge--light {
    background: var(--aq-control-bg);
    color: var(--aq-muted);
    border-color: var(--aq-border-subtle);
}

.btn {
    border-radius: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.btn-primary {
    border-color: rgba(var(--aq-orange-rgb), 0.34);
    box-shadow: 0 18px 35px rgba(var(--aq-orange-rgb), 0.18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, var(--aq-orange) 0%, var(--aq-orange-deep) 100%);
    border-color: rgba(var(--aq-orange-rgb), 0.38);
    box-shadow: 0 20px 32px rgba(var(--aq-orange-rgb), 0.22) !important;
}

.btn-outline-primary,
.btn-light,
.btn-outline-light,
.btn-ghost {
    color: var(--aq-text) !important;
    background: var(--aq-control-bg) !important;
    border-color: var(--aq-orange-border) !important;
    box-shadow: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:not(:disabled):not(.disabled):active {
    color: var(--aq-orange-light) !important;
    background: var(--aq-control-bg-hover) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.24) !important;
    box-shadow: 0 14px 28px rgba(var(--aq-bg-rgb), 0.2) !important;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--aq-orange-rgb), 0.18) !important;
}

.page-help {
    position: relative;
    z-index: 2;
}

.page-help__button {
    color: var(--aq-text) !important;
    background: var(--aq-card-bg) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.42) !important;
    box-shadow: 0 12px 26px rgba(var(--aq-bg-rgb), 0.18);
}

.page-help__button:hover,
.page-help__button:focus,
.page-help__button:not(:disabled):not(.disabled):active {
    color: var(--aq-orange-light) !important;
    background: var(--aq-control-bg-hover) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.62) !important;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    background: var(--aq-input-bg) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.16) !important;
    color: var(--aq-text) !important;
    box-shadow: inset 0 1px 0 rgba(var(--aq-text-rgb), 0.03);
}

.form-control::placeholder,
.custom-select::placeholder,
textarea.form-control::placeholder {
    color: rgba(var(--aq-text-rgb), 0.42) !important;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    background: var(--aq-input-bg-focus) !important;
    border-color: rgba(var(--aq-orange-rgb), 0.55) !important;
    color: var(--aq-text) !important;
    box-shadow:
        0 0 0 0.2rem rgba(var(--aq-orange-rgb), 0.16),
        0 0 0 1px rgba(var(--aq-orange-rgb), 0.24) !important;
}

.form-control:disabled,
.custom-select:disabled,
textarea.form-control:disabled,
.form-control[readonly] {
    background: var(--aq-control-bg) !important;
    color: rgba(var(--aq-text-rgb), 0.54) !important;
}

.form-label,
.login-label,
.custom-control-label,
.breadcrumb-item.active,
.table,
.table td,
.table th,
.dropdown-item,
.dropdown-item-text {
    color: var(--aq-text) !important;
}

.table tbody tr:hover,
.dashboard-table tbody tr:hover {
    background: rgba(var(--aq-orange-rgb), 0.05);
}

.shell-banner {
    border-inline-start: 4px solid var(--aq-orange);
    background:
        linear-gradient(180deg, rgba(var(--aq-orange-rgb), 0.06), rgba(var(--aq-orange-rgb), 0.015)),
        rgba(var(--aq-surface-rgb), 0.96);
}

.shell-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(var(--aq-text-rgb), 0.38);
}

.quick-link-item:hover .quick-link-arrow,
.text-primary,
.text-accent {
    color: var(--aq-orange-light) !important;
}

.bg-brand-soft,
.bg-primary-light,
.bg-accent-light,
.bg-accent-soft {
    background: rgba(var(--aq-orange-rgb), 0.1) !important;
}

.login-shell {
    min-height: 100vh;
}

.login-panel {
    background:
        radial-gradient(circle at top right, rgba(var(--aq-orange-rgb), 0.2), transparent 28%),
        radial-gradient(circle at bottom left, rgba(var(--aq-orange-rgb), 0.08), transparent 30%),
        linear-gradient(180deg, rgba(var(--aq-surface-elevated-rgb), 0.98), rgba(var(--aq-bg-rgb), 0.98));
    color: var(--aq-text);
}

.login-panel::before {
    filter: blur(16px) saturate(0.78);
    opacity: 0.16;
}

.login-panel::after {
    background:
        radial-gradient(circle at top left, rgba(var(--aq-orange-rgb), 0.16), transparent 34%),
        linear-gradient(180deg, rgba(var(--aq-orange-rgb), 0.06) 0%, rgba(var(--aq-bg-rgb), 0.14) 100%);
}

.login-panel__logo-card {
    width: min(100%, 25.5rem);
    background:
        linear-gradient(180deg, rgba(var(--color-white-rgb), 0.03), rgba(var(--color-white-rgb), 0.01)),
        rgba(var(--aq-surface-rgb), 0.72);
    border-color: var(--aq-orange-border);
    box-shadow: var(--aq-card-shadow);
}

.login-panel h1,
.login-panel .brand-copy span {
    color: var(--aq-text) !important;
}

.login-box {
    background:
        linear-gradient(180deg, rgba(var(--aq-surface-rgb), 0.96), rgba(var(--aq-bg-rgb), 0.98)),
        rgba(var(--aq-surface-rgb), 0.96);
    border-color: var(--aq-orange-border) !important;
}

.login-box__banner.shell-banner {
    background:
        linear-gradient(180deg, rgba(var(--aq-orange-rgb), 0.04), rgba(var(--aq-orange-rgb), 0.015)),
        rgba(var(--aq-surface-elevated-rgb), 0.92);
}

.empty-state.border.rounded {
    background: rgba(var(--aq-surface-elevated-rgb), 0.82);
    border-color: var(--aq-orange-border) !important;
}

.footer-area {
    padding: 0 0 1.5rem;
}

.footer-area p,
.footer-area small {
    color: var(--aq-muted);
}

.shell-page-header,
.dashboard-card,
.login-box,
.login-panel,
.shell-banner {
    animation: rise-in 700ms ease both;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@media (max-width: 991.98px) {
    .topnav__brand {
        flex: 1 1 auto;
    }

    .topnav__brand .brand-logo--sm {
        max-width: clamp(7rem, 32vw, 9.5rem);
    }

    .login-box,
    .login-panel__logo-card {
        border-radius: 1.5rem;
    }
}

@media (max-width: 640px) {
    .brand-logo-wrap,
    .sidebar-brand-link .brand-logo-wrap,
    .topnav__brand .brand-logo-wrap,
    .login-box__brand .brand-logo-wrap,
    .login-panel__logo-card .brand-logo-wrap {
        padding: 0.7rem 0.85rem;
        border-radius: 1rem;
    }

    .topnav {
        gap: var(--space-sm);
    }
}