/* ============================================================================
   SriJova CRM SaaS Admin — site overrides on top of the SriJova design-system theme.
   The SriJova theme (loaded via wwwroot/ynex/css/styles.css) is the source of
   truth for colours, typography, layout and the .page/.app-header/.app-sidebar
   shell. This file only contains:
     1. Anonymous shell + login split (used when the user isn't signed in —
        these surfaces sit outside the .page wrapper).
     2. Top-right user identity menu + per-role badges (a thin custom
        component that lives next to the standard profile-dropdown style).
     3. Library-component overrides (the SriJova.Shared.OAuthServerUI <Login />
        card keeps its own dark-navy look — see .srijova-login-split--nucleus).
   Everything else has been deleted: the design-system stylesheet covers it.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   Anonymous shell — NotAuthorized branch of MainLayout renders inside this.
   Login / forgot-password / reset-password pages live here.
   ---------------------------------------------------------------------------- */
.srijova-shell--anonymous {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: #f6f7fb;
}
.srijova-shell--anonymous .srijova-shell__main {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}

.srijova-anonymous-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7fb;
}
.srijova-anonymous-page  { width: 100%; max-width: 480px; padding: 2rem 1rem; }
.srijova-anonymous-card  { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.srijova-anonymous-card__hint    { color: #6c757d; font-size: 0.85rem; }
.srijova-anonymous-card__actions { margin-top: 1rem; display: flex; gap: 0.5rem; }

.srijova-link-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #0d6efd;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}
.srijova-link-button:hover { background: #0b5ed7; }
button.srijova-link-button { border: none; cursor: pointer; font-size: 0.95rem; }


/* ----------------------------------------------------------------------------
   Login page: two-column split (hero panel left, sign-in form right).
   ---------------------------------------------------------------------------- */
.srijova-login-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
.srijova-login-split__brand {
    flex: 0 0 42%;
    background: linear-gradient(135deg, #4c2f9c 0%, #6c5ce7 55%, #8b6df0 100%);
    color: #fff;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.srijova-login-split__brand::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto auto;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.srijova-login-split__brand-mark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}
.srijova-login-split__brand-dots {
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.srijova-login-split__brand-dots::before,
.srijova-login-split__brand-dots::after {
    content: '';
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0.7rem 0 0 #fff;
}
.srijova-login-split__quote                       { margin: 0; position: relative; z-index: 1; max-width: 28rem; }
.srijova-login-split__quote blockquote            { margin: 0 0 1rem 0; font-size: 1.65rem; line-height: 1.35; font-weight: 500; }
.srijova-login-split__quote figcaption            { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; opacity: 0.85; }
.srijova-login-split__quote figcaption strong     { font-size: 1rem; font-weight: 600; }
.srijova-login-split__panel                       { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
.srijova-login-split__panel-inner                 { width: 100%; max-width: 26rem; }
.srijova-login-split__logo {
    display: block;
    margin: 0 auto 1.5rem;
    /* 240px, not 200: the Srijova lockup is ~2.77:1 (vs the ~4.6:1 mark it replaced), so the
       "INNOVATE / BUILD / TRANSFORM" tagline needs the extra width to stay legible. */
    max-width: 240px;
    height: auto;
}
.srijova-login-split__title                       { margin: 0 0 0.5rem 0; font-size: 1.75rem; font-weight: 700; color: #111; text-align: center; }
.srijova-login-split__subtitle                    { margin: 0 0 1.5rem 0; color: #6c757d; font-size: 0.95rem; text-align: center; }

/* Nucleus-light theme override for the embedded library <Login /> card.
   The library's srijova-oauthserver-ui.css ships dark-navy by default; scoping
   the `--srijova-*` reads to this container repaints the card without forking
   the library or fighting selector specificity. */
.srijova-login-split--nucleus {
    --srijova-surface:       #fff;
    --srijova-text:          #1A2B42;
    --srijova-text-muted:    #6c757d;
    --srijova-accent:        #6c5ce7;
    --srijova-accent-hover:  #5a48d6;
    --srijova-error:         #b02a37;
    --srijova-success:       #22C55E;
    --srijova-border-color:  rgba(0, 0, 0, 0.08);
    --srijova-border:        1px solid rgba(0, 0, 0, 0.08);
    --srijova-radius:        12px;
    --srijova-padding:       1.5rem 1.5rem 2rem;
    --srijova-shadow:        0 2px 12px rgba(0, 0, 0, 0.06);
    --srijova-card-margin:   0;
}

@media (max-width: 900px) {
    .srijova-login-split { flex-direction: column; }
    .srijova-login-split__brand { flex: 0 0 auto; padding: 2rem 1.5rem; }
    .srijova-login-split__quote blockquote { font-size: 1.2rem; }
}

/* "Forgot password?" anchor we render ourselves (plain <a href> always works,
   no Blazor circuit dependency). */
.srijova-login-split__forgot {
    text-align: center;
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

/* Dev-only "Skip validation and continue to dashboard" link. Visually muted +
   dashed border so it never gets mistaken for production UI. */
.srijova-login-split__dev-skip {
    text-align: center;
    margin: 1.25rem 0 0;
    padding: 0.5rem;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.8rem;
}
.srijova-login__link--dev { color: #6c757d; font-weight: 500; }

/* Page-level error banner shown above the library's <Login />. Lives in our
   own .srijova-login-split namespace so it never collides with library element
   classes (.srijova-login__error etc., which the library ships in rc.449+). */
.srijova-login-split__error {
    color: #b02a37;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* Auth-page hyperlinks ("Forgot password?", "Back to sign in", dev-skip).
   Pinned blue across every interaction state so they never blend into the
   panel background. !important is needed because Bootstrap loads
   `--bs-link-hover-color` via inline CSS variables which beats plain selectors. */
.srijova-login__link,
.srijova-login__link:link,
.srijova-login__link:visited {
    color: #0d6efd !important;
    text-decoration: none;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease, background-color 0.15s ease, text-decoration-color 0.15s ease;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.5px;
}
.srijova-login__link:hover {
    color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.08) !important;
    text-decoration: underline !important;
    text-decoration-color: #0a58ca !important;
}
.srijova-login__link:focus-visible {
    color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.08) !important;
    outline: 2px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
    text-decoration: underline !important;
}
.srijova-login__link:active {
    color: #084298 !important;
    background-color: rgba(13, 110, 253, 0.16) !important;
}

/* Dev-only "skip validation" link variant. Muted grey by default (looks
   visually secondary), goes blue on hover/focus for discoverability. */
.srijova-login__link--dev,
.srijova-login__link--dev:link,
.srijova-login__link--dev:visited {
    color: #6c757d !important;
}
.srijova-login__link--dev:hover,
.srijova-login__link--dev:focus-visible {
    color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.06) !important;
}
.srijova-login__link--dev:active {
    color: #084298 !important;
}


/* ----------------------------------------------------------------------------
   Top-right user identity menu (used inside the .app-header).
   The design-system theme ships its own profile dropdown style; this is a thin
   replacement that surfaces SriJova platform-role badges + a sign-out link.
   ---------------------------------------------------------------------------- */
.srijova-user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.5rem;
}
.srijova-user-menu__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.srijova-user-menu__name  { font-weight: 600; font-size: 0.875rem; }
.srijova-user-menu__roles { display: flex; gap: 0.25rem; margin-top: 2px; }

.srijova-role-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #6c757d;
}
.srijova-role-badge--superadmin      { background: #6f42c1; }
.srijova-role-badge--techsupport     { background: #0dcaf0; color: #0c1015; }
.srijova-role-badge--marketing       { background: #ffc107; color: #0c1015; }
.srijova-role-badge--securityauditor { background: #d63384; }
.srijova-role-badge--billingops      { background: #198754; }

.srijova-user-menu__signout {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
}
.srijova-user-menu__signout:hover { background: rgba(0, 0, 0, 0.04); }


/* ----------------------------------------------------------------------------
   Small shell tweaks: the Syncfusion app/tenant selectors render inside the
   .app-header; clamp their width so they don't push the right-hand actions
   off the visible area.
   ---------------------------------------------------------------------------- */
.app-header .e-ddl,
.app-header .e-input-group,
.app-header .srijova-app-selector {
    max-width: 200px;
}

/* Active state highlight for the simplified theme picker swatches. */
.srijova-color-swatch.active {
    box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 4px rgb(var(--primary-rgb)) !important;
}
[data-srijova-mode].active { background-color: rgb(var(--primary-rgb)); color: #fff; }

/* Access-denied state on the Dashboard. Centred within the page-content area with a
   capped width so the prose stays readable on wide monitors. !important on the
   wrapper width prevents Syncfusion's SfCard from defeating the constraint. */
.srijova-access-denied {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 4rem;
    padding-inline: 1rem;
}
.srijova-access-denied .srijova-empty-state {
    max-width: 32rem !important;
    width: 100% !important;
}


/* ----------------------------------------------------------------------------
   Sidebar brand. The design-system ships logo-image swaps via .desktop-logo/.desktop-dark
   /etc.; we render a text brand instead, so we force colour per menu style.
   ---------------------------------------------------------------------------- */
.srijova-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}
.srijova-brand__text {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* Default: light menu → dark brand text. */
[data-menu-styles=light] .srijova-brand__text,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-brand__text {
    color: #1A2B42;
}

/* Dark menu → white brand text. */
[data-menu-styles=dark] .srijova-brand__text,
[data-menu-styles=color] .srijova-brand__text,
[data-menu-styles=gradient] .srijova-brand__text,
[data-menu-styles=transparent][data-theme-mode=dark] .srijova-brand__text {
    color: #fff;
}

/* When the sidebar collapses to icon-rail (data-vertical-style=closed +
   data-toggled=close-menu-close), the header area squeezes; shrink the brand
   so it doesn't overflow the 4.5rem icon strip. */
[data-vertical-style=closed][data-toggled=close-menu-close] .srijova-brand__text {
    font-size: 0.85rem;
    transform: scale(0.85);
}

/* ============================================================================
   SfTreeView nav-menu skin
   ----------------------------------------------------------------------------
   The sidebar uses Syncfusion SfTreeView for the menu tree (instead of the
   vendor template's classes that fight Blazor's event handlers). Out of the
   box the tree paints with Syncfusion's neutral palette — dim grey text on
   our dark background. The rules below force the colours to match the rest
   of the .app-sidebar across every data-menu-styles axis (dark / light /
   color / gradient / transparent).
   ============================================================================ */

.srijova-nav-tree__section {
    margin-bottom: 0.5rem;
}

.srijova-nav-tree__section .category-name {
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.08em;
}

/* The TreeView host. Strip the default border + match the sidebar bg. */
.srijova-nav-tree .srijova-nav-tree__view.e-treeview {
    background: transparent;
    border: 0;
}

/* List item rows. */
.srijova-nav-tree .srijova-nav-tree__view .e-list-item {
    background: transparent;
}

/* Text colour follows the menu-style axis. Default (dark menu) = near-white. */
.srijova-nav-tree .srijova-nav-tree__view .e-list-text,
.srijova-nav-tree .srijova-nav-tree__view .e-fullrow,
.srijova-nav-tree .srijova-nav-tree__view .e-icon-collapsible::before,
.srijova-nav-tree .srijova-nav-tree__view .e-icon-expandable::before {
    color: rgba(255, 255, 255, 0.85);
}

/* Item-row leaf links. Syncfusion wraps NavigateUrl in an <a class="e-list-text">.
   Make sure the anchor inherits colour (TreeView's default sets it to grey). */
.srijova-nav-tree .srijova-nav-tree__view .e-list-text a,
.srijova-nav-tree .srijova-nav-tree__view a {
    color: inherit !important;
    text-decoration: none;
}

/* Item icon (left of the label). Pull from the Icon field; keep it bright. */
.srijova-nav-tree .srijova-nav-tree__view .e-list-icon {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    margin-inline-end: 0.5rem;
}

/* Hover state. */
.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover > .e-fullrow,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover > .e-text-content {
    background: rgba(255, 255, 255, 0.08);
}

.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover .e-list-text,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover .e-list-icon,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover .e-icon-collapsible::before,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item:hover .e-icon-expandable::before {
    color: #fff;
}

/* Active node (current route). Use the primary tint. */
.srijova-nav-tree .srijova-nav-tree__view .e-list-item.e-active > .e-fullrow,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item.e-active > .e-text-content {
    background: rgba(var(--primary-rgb), 0.22);
}

.srijova-nav-tree .srijova-nav-tree__view .e-list-item.e-active .e-list-text,
.srijova-nav-tree .srijova-nav-tree__view .e-list-item.e-active .e-list-icon {
    color: #fff;
}

/* Light-menu override — keep colours readable when the operator switches
   data-menu-styles to light or transparent on a light theme. */
[data-menu-styles=light] .srijova-nav-tree .srijova-nav-tree__view .e-list-text,
[data-menu-styles=light] .srijova-nav-tree .srijova-nav-tree__view .e-list-icon,
[data-menu-styles=light] .srijova-nav-tree .srijova-nav-tree__view .e-icon-collapsible::before,
[data-menu-styles=light] .srijova-nav-tree .srijova-nav-tree__view .e-icon-expandable::before,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree .srijova-nav-tree__view .e-list-text,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree .srijova-nav-tree__view .e-list-icon {
    color: var(--default-text-color);
}

[data-menu-styles=light] .srijova-nav-tree__section .category-name,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree__section .category-name {
    color: var(--text-muted);
}

/* ============================================================================
   SfTreeView nav-menu skin — !important pass
   ----------------------------------------------------------------------------
   Syncfusion's theme bundle defines `color` on `.e-treeview .e-list-text` with
   the same selector class chain as ours; whichever file loads last wins by
   source order. In dev the bundled theme can land after our srijova-crm.css, so
   the labels stay dim grey on the dark menu. These rules force the colour
   regardless of load order. Reserved for the .srijova-nav-tree scope so non-menu
   TreeView usages elsewhere keep the default theme colours.
   ============================================================================ */

.srijova-nav-tree .e-treeview .e-list-text,
.srijova-nav-tree .e-treeview .e-list-text a,
.srijova-nav-tree .e-treeview .e-list-text * {
    color: #ffffff !important;
    opacity: 1 !important;
}

.srijova-nav-tree .e-treeview .e-list-icon,
.srijova-nav-tree .e-treeview .e-icon-collapsible,
.srijova-nav-tree .e-treeview .e-icon-expandable {
    color: rgba(255, 255, 255, 0.85) !important;
}

.srijova-nav-tree .e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
.srijova-nav-tree .e-treeview .e-list-item.e-active > .e-text-content .e-list-icon {
    color: #ffffff !important;
}

.srijova-nav-tree .e-treeview .e-list-item:hover > .e-fullrow {
    background: rgba(255, 255, 255, 0.10) !important;
}

.srijova-nav-tree .e-treeview .e-list-item.e-active > .e-fullrow {
    background: rgba(var(--primary-rgb), 0.28) !important;
}

/* Light-menu override stays unchanged for the matching scope. */
[data-menu-styles=light] .srijova-nav-tree .e-treeview .e-list-text,
[data-menu-styles=light] .srijova-nav-tree .e-treeview .e-list-text a,
[data-menu-styles=light] .srijova-nav-tree .e-treeview .e-list-text *,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree .e-treeview .e-list-text,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree .e-treeview .e-list-text * {
    color: var(--default-text-color) !important;
}

[data-menu-styles=light] .srijova-nav-tree .e-treeview .e-list-icon,
[data-menu-styles=transparent][data-theme-mode=light] .srijova-nav-tree .e-treeview .e-list-icon {
    color: var(--text-muted) !important;
}