/* Krewla: navy typography, ocean-blue actions and teal accents. */
:root,
html:root body[class] {
    --krewla-navy: #10315b;
    --krewla-blue: #006bab;
    --krewla-teal: #007e83;
    --krewla-mint: #13cfba;
    --krewla-ink: #173449;
    --krewla-muted: #516d79;
    --krewla-page: #f0f7f7;
    --krewla-surface: #ffffff;
    --krewla-soft: #e7f4f3;
    --krewla-line: #ccdfdf;
    --bs-primary: #006bab;
    --bs-primary-rgb: 0,107,171;
    --bs-link-color: #006bab;
    --sky-system-primary: #006bab !important;
    --sky-system-primary-deep: #10315b !important;
    --sky-system-primary-light: #007e83 !important;
    --sky-blue: #006bab;
    --sky-blue-deep: #10315b;
    --sky-ink: var(--krewla-ink);
    --sky-muted: var(--krewla-muted);
    --sky-page: var(--krewla-page);
    --sky-surface: var(--krewla-surface);
    --sky-surface-soft: var(--krewla-soft);
    --sky-line: var(--krewla-line);
    --sky-nav-blue: #006bab;
    --sky-nav-blue-strong: #007e83;
    --sky-nav-ink: var(--krewla-ink);
    --sky-nav-muted: var(--krewla-muted);
    --sky-nav-line: var(--krewla-line);
    --sky-nav-soft: var(--krewla-soft);
    --sky-nav-surface: var(--krewla-surface);
    --sky-navigation-rail-surface: linear-gradient(180deg,#10315b 0%,#123e59 68%,#07535d 100%);
    --sky-navigation-rail-border: rgba(19,207,186,.28);
}
html:root[data-sky-theme="dark"] body[class] {
    --krewla-ink: #e2f3f5;
    --krewla-muted: #adc8d0;
    --krewla-page: #091d2c;
    --krewla-surface: #112e40;
    --krewla-soft: #193e4e;
    --krewla-line: #315464;
    --krewla-teal: #61dbd2;
    color-scheme: dark;
}
html:root body[class]:is(.sky-light,.sky-dark) {
    background: var(--krewla-page) !important;
    color: var(--krewla-ink) !important;
}
html:root body[class] :is(.dash-content,.dash-container,.dash-footer) { color: var(--krewla-ink); }
html:root body[class] .dash-header {
    background: var(--krewla-surface) !important;
    border-bottom: 1px solid var(--krewla-line) !important;
    box-shadow: 0 5px 24px rgba(16,49,91,.04) !important;
}
html:root body[class] :is(.card,.modal-content,.dropdown-menu,.sky-nav-flyout,.sky-mobile-module-panel) {
    background: var(--krewla-surface) !important;
    color: var(--krewla-ink) !important;
    border-color: var(--krewla-line) !important;
    box-shadow: 0 8px 25px rgba(16,49,91,.055);
}
html:root body[class] :is(.card-header,.modal-header,.table thead th) {
    background: var(--krewla-soft) !important;
    border-color: var(--krewla-line) !important;
    color: var(--krewla-ink) !important;
}
html:root body[class] .dash-content :is(h1,h2,h3,h4,h5,h6,.form-label,label,.card-title) { color: var(--krewla-ink); }
html:root body[class] :is(.text-muted,.form-text,.breadcrumb-item,.dataTables_info) { color: var(--krewla-muted) !important; }
html:root body[class] :is(.text-primary,a.link-primary) { color: var(--krewla-blue) !important; }
html:root[data-sky-theme="dark"] body[class] :is(.text-primary,a.link-primary) { color: #66dfdf !important; }
html:root body[class] :is(.btn-primary,.bg-primary,.badge-primary,.page-item.active .page-link,.nav-pills .nav-link.active) {
    background: var(--krewla-blue) !important;
    border-color: var(--krewla-blue) !important;
    color: #fff !important;
}
html:root body[class] .btn-primary:is(:hover,:focus-visible) { background: #005887 !important; border-color: #005887 !important; }
html:root body[class] .btn-outline-primary { border-color: var(--krewla-blue) !important; color: var(--krewla-blue) !important; background: transparent !important; }
html:root body[class] .btn-outline-primary:is(:hover,:focus-visible) { background: var(--krewla-blue) !important; color: #fff !important; }
html:root body[class] :is(.bg-light-primary,.badge-light-primary) { background: var(--krewla-soft) !important; color: var(--krewla-teal) !important; }
html:root body[class] :is(.nav-tabs .nav-link.active,.nav-link.active) { border-bottom-color: var(--krewla-teal) !important; }
html:root body[class] :is(.form-control,.form-select,.custom-select,.select2-selection,.choices__inner) {
    background-color: var(--krewla-surface) !important;
    border-color: var(--krewla-line) !important;
    color: var(--krewla-ink) !important;
}
html:root body[class] :is(input,textarea)::placeholder { color: var(--krewla-muted) !important; opacity: 1; }
html:root body[class] :is(.form-control,.form-select,.select2-selection):focus {
    border-color: var(--krewla-teal) !important;
    box-shadow: 0 0 0 3px rgba(0,126,131,.16) !important;
}
html:root body[class] :is(.form-check-input:checked,input[type="checkbox"],input[type="radio"]) { accent-color: var(--krewla-teal); }
html:root body[class] .form-check-input:checked { background-color: var(--krewla-teal) !important; border-color: var(--krewla-teal) !important; }
html:root body[class] .table { color: var(--krewla-ink) !important; border-color: var(--krewla-line) !important; }
html:root body[class] .table-hover tbody tr:hover { background: var(--krewla-soft) !important; color: var(--krewla-ink) !important; }
/* Module hero blocks retain their layout while sharing the brand gradient. */
html:root body[class] .dash-content :is([class$="-hero"],[class*="-hero "],.sky-dashboard-hero) {
    background: linear-gradient(115deg,#10315b,#006b94 65%,#007e83) !important;
    border-color: #006b94 !important;
    color: #fff !important;
}
html:root body[class] .dash-content :is([class$="-hero"],[class*="-hero "],.sky-dashboard-hero) :is(h1,h2,h3,h4,p,small,[class$="-subtitle"]) { color: #f1ffff !important; }
html:root body[class] :is(.sky-nav-flyout,.sky-mobile-module-panel) a { color: var(--krewla-ink) !important; }
html:root body[class] :is(.sky-nav-flyout,.sky-mobile-module-panel) a:is(:hover,:focus-visible,.active) { background: var(--krewla-soft) !important; color: var(--krewla-teal) !important; }
/* Navigation: squared navy spine with mint inset selection markers. */
html:root body.sky-icon-navigation .dash-sidebar,
html:root[data-sky-theme] body.sky-icon-navigation .dash-sidebar.light-sidebar {
    border-radius: 14px !important;
    background: var(--sky-navigation-rail-surface) !important;
    border: 1px solid rgba(19,207,186,.28) !important;
    box-shadow: 0 12px 30px rgba(16,49,91,.17) !important;
}
html:root body.sky-icon-navigation .dash-sidebar::before,
html:root body.sky-icon-navigation .dash-sidebar::after { display: none !important; }
html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #d7e9ef !important;
    box-shadow: none !important;
}
html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link :is(.dash-micon,.dash-mtext,i) { color: inherit !important; }
html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link:hover {
    background: rgba(19,207,186,.13) !important;
    color: #fff !important;
}
html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item:is(.active,.dash-trigger,.sky-flyout-open) > .dash-link {
    background: #d3faf1 !important;
    color: #10315b !important;
    box-shadow: inset 3px 0 0 #13cfba !important;
}
html:root body.sky-icon-navigation .dash-sidebar .m-header { border-bottom: 1px solid rgba(19,207,186,.2) !important; }
html:root body.sky-icon-navigation .dash-sidebar .sky-sidebar-brand-logo { width: 100% !important; height: auto !important; }
/* Right side is a separate, lighter utility dock: 64px instead of 90px. */
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail,
html:root body.sky-icon-navigation .sky-action-rail {
    --rail-accent: #007e83;
    --rail-accent-2: #006bab;
    --rail-soft: var(--krewla-soft);
    width: 64px !important;
    padding: 7px 5px !important;
    gap: 5px !important;
    border: 1px solid var(--krewla-line) !important;
    border-top: 4px solid #13cfba !important;
    border-radius: 12px !important;
    background: var(--krewla-surface) !important;
    box-shadow: 0 8px 28px rgba(16,49,91,.1) !important;
}
html:root body.sky-icon-navigation .sky-action-rail::before { display: none; }
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 57px !important;
    padding: 5px 1px !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--krewla-ink) !important;
    box-shadow: none !important;
}
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button > i {
    width: 27px; height: 27px; flex-basis: 27px;
    background: var(--krewla-soft) !important;
    color: var(--krewla-teal) !important;
    border-radius: 7px !important;
}
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button > .sky-rail-button-label {
    color: var(--krewla-ink) !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal;
}
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button:is(:hover,:focus-visible),
html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-item.open .sky-rail-button { background: var(--krewla-soft) !important; transform: none !important; }
html:root body.sky-icon-navigation .sky-action-rail .sky-rail-dock-title { color: var(--krewla-muted) !important; border-color: var(--krewla-line) !important; }
html:root body.sky-icon-navigation .sky-action-rail .sky-rail-total { background: #006bab !important; color: #fff !important; border-color: var(--krewla-surface) !important; }
html:root body.sky-icon-navigation .sky-rail-panel { background: var(--krewla-surface) !important; color: var(--krewla-ink) !important; border: 1px solid var(--krewla-line) !important; border-radius: 14px !important; }
html:root body.sky-icon-navigation .sky-rail-item { --rail-accent: #007e83; --rail-accent-dark: #10315b; --rail-soft: var(--krewla-soft); }
html:root body.sky-icon-navigation .sky-rail-title { background: var(--krewla-soft) !important; color: var(--krewla-ink) !important; }
html:root body.sky-icon-navigation .sky-rail-title > i { background: #007e83 !important; color: #fff !important; }
html:root body.sky-icon-navigation :is(.sky-rail-panel-head,.sky-rail-panel-header) { background: var(--krewla-soft) !important; color: var(--krewla-ink) !important; }
@media(min-width:1025px) {
    html:root body.sky-icon-navigation { --sky-rail-width: 72px; --sky-rail-left: 10px; }
    html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item { width: 100% !important; height: auto !important; }
    html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link {
        display: flex !important; width: 54px !important; height: 44px !important; min-height: 44px !important;
        padding: 8px !important; gap: 0 !important; justify-content: center !important;
    }
    html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link .dash-micon { width: 27px !important; height: 27px !important; flex: 0 0 27px !important; background: transparent !important; }
    html:root body.sky-icon-navigation #sky-main-sidebar .dash-navbar > .dash-item > .dash-link .dash-mtext {
        /* Keep labels available to screen readers and the existing click menu. */
        position: absolute !important; display: block !important; width: 1px !important; height: 1px !important;
        clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important;
        transform: none !important; overflow: hidden !important; white-space: nowrap !important;
        padding: 0 !important; margin: -1px !important; border: 0 !important;
    }
    html:root body.sky-icon-navigation .dash-sidebar img.krewla-brand-logo { display: none !important; }
    html:root body.sky-icon-navigation .dash-sidebar img.krewla-brand-icon { display: block !important; width: 42px !important; height: 42px !important; object-fit: contain; background: transparent; }
    html:root body.sky-icon-navigation .sky-action-rail ~ .dash-container { margin-right: 88px !important; }
    html:root[dir="rtl"] body.sky-icon-navigation .sky-action-rail ~ .dash-container { margin-left: 88px !important; margin-right: calc(var(--sky-rail-left) + var(--sky-rail-width) + 14px) !important; }
}
@media(min-width:768px) {
    html:root body.sky-icon-navigation .sky-rail-panel { right: 88px !important; width: min(390px,calc(100vw - 110px)) !important; }
    html:root[dir="rtl"] body.sky-icon-navigation .sky-rail-panel { right: auto !important; left: 88px !important; }
}
@media(max-width:767px) {
    html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail,
    html:root[dir="rtl"] body.sky-icon-navigation .sky-action-rail {
        top: auto !important; bottom: max(8px,env(safe-area-inset-bottom)) !important;
        left: 10px !important; right: 10px !important; width: calc(100% - 20px) !important;
        height: 68px !important; max-height: none !important; margin: 0 !important;
        flex-direction: row !important; transform: none !important; gap: 4px !important;
    }
    html:root body.sky-icon-navigation .sky-action-rail > .sky-rail-item { flex: 1 1 0; min-width: 0; }
    html:root body.sky-icon-navigation .dash-container { padding-bottom: 94px !important; }
    html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button { min-height: 54px !important; }
    html:root[data-sky-theme] body.sky-icon-navigation .sky-action-rail .sky-rail-button > .sky-rail-button-label { font-size: 10px !important; }
    html:root body.sky-icon-navigation .sky-rail-panel { border-radius: 18px 18px 0 0 !important; }
}
/* A quiet login composition with a white logo tile, readable in either mode. */
html:root body .auth-wrapper.auth-v3 {
    background: radial-gradient(ellipse at 12% 18%,rgba(19,207,186,.18),transparent 42%),linear-gradient(120deg,#10315b 0%,#0e4f69 62%,#007e83 100%) !important;
}
html:root body .auth-workspace-scene::before { opacity: .3; animation: none; }
html:root body .auth-scene-card { border-color: rgba(19,207,186,.25); background: rgba(16,49,91,.45); }
html:root body .auth-form-panel { background: #fff !important; color: #173449 !important; }
html:root body .auth-form-panel :is(h1,h2,label,.auth-field-head) { color: #10315b !important; }
html:root body .auth-form-panel :is(.auth-subtitle,.text-muted) { color: #516d79 !important; }
html:root body .auth-form-panel :is(.form-control,input) { background: #f6fbfb !important; color: #173449 !important; border-color: #ccdfdf !important; }
html:root body .auth-form-panel :is(button[type="submit"],.auth-submit) { background: linear-gradient(100deg,#006bab,#007e83) !important; color: #fff !important; border: 0 !important; }
html:root body .auth-footer { color: #e4f8f5 !important; }
/* Dashboard and custom workspaces use the same accents as Bootstrap pages. */
html:root body[class] :is(.ov-notice-banner,.ov-workforce-focus) { background: linear-gradient(110deg,#10315b,#007e83) !important; color: #fff !important; }
html:root body[class] :is(.ov-notice-banner,.ov-workforce-focus) :is(h3,h4,h5,p,small,strong,span) { color: inherit !important; }
html:root body[class] :is(.ov-card,.ov-notice,.ov-metric,.ov-kpi,.ov-stat,.ov-workforce-metric) { background: var(--krewla-surface) !important; border-color: var(--krewla-line) !important; color: var(--krewla-ink) !important; }
html:root body[class] :is(.ov-notice-icon,.ov-kpi-icon,.ov-stat-icon,.ov-metric-icon,.ov-workforce-icon) { background: var(--krewla-soft) !important; color: var(--krewla-teal) !important; }
html:root body[class] .ana-shell { --ana-blue: #006bab; --ana-cyan: #007e83; --ana-violet: #10315b; --ana-green: #007e83; --ana-ink: var(--krewla-ink); --ana-muted: var(--krewla-muted); --ana-line: var(--krewla-line); }
html:root body[class] .dash-content :is([class$="-btn"],[class$="-button"]):not(.btn-danger):not(.danger):not(.delete):not(.btn-success):not(.success) {
    border-color: var(--krewla-line); color: var(--krewla-ink);
}
html:root body[class] .dash-content :is([class$="-btn"],[class$="-button"]):is(.primary,.blue,.active),
html:root body[class] .dash-content :is(.ana-tab.active,.ov-btn.primary) { background: #006bab !important; color: #fff !important; border-color: #006bab !important; }
html:root body :focus-visible { outline: 2px solid #007e83; outline-offset: 3px; }
@media(prefers-reduced-motion:reduce) {
    html:root body :is(.auth-workspace-scene *,.sky-action-rail,.dash-sidebar) { animation: none !important; transition: none !important; }
}