/* Cobalt ERP brand + PlainAdmin-style light re-skin for the Sneat shell.
   Modern cobalt palette: primary #2563EB, cyan accent #06B6D4, slate-900
   sidebar #0F172A. No SCSS recompile available — these are layered overrides
   on top of the vendored light Sneat core. Dark-mode overrides live in
   erp-dark.css. */

:root {
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --cb-blue: #2563EB;
    --cb-blue-dark: #1D4ED8;
    --cb-cyan: #06B6D4;
    --cb-sidebar-bg: #0F172A;
    --cb-sidebar-text: #94a3b8;
    --cb-body-bg: #f1f5f9;
    --cb-heading: #0F172A;
    --cb-card-shadow: 0 5px 20px rgba(16, 24, 64, 0.06);
    --cb-card-radius: 0.625rem;
    --cb-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Typography ---- */
body {
    font-family: var(--cb-font);
    background-color: var(--cb-body-bg);
    color: #5d657b;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cb-font);
    color: var(--cb-heading);
    font-weight: 600;
}

/* ---- Links / primary accent ---- */
a { color: var(--cb-blue); }
a:hover { color: var(--cb-blue-dark); }

.btn-primary {
    background-color: var(--cb-blue);
    border-color: var(--cb-blue);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--cb-blue-dark) !important;
    border-color: var(--cb-blue-dark) !important;
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.05rem #fff, 0 0 0.25rem 0.05rem var(--cb-blue);
}
.btn-outline-primary { color: var(--cb-blue); border-color: var(--cb-blue); }
.btn-outline-primary:hover { background-color: var(--cb-blue); border-color: var(--cb-blue); }

.bg-primary { background-color: var(--cb-blue) !important; }
.text-primary { color: var(--cb-blue) !important; }
.page-item.active .page-link {
    background-color: var(--cb-blue);
    border-color: var(--cb-blue);
}

/* ---- Cards (PlainAdmin: white, rounded, soft shadow, hairline border) ---- */
.card {
    border: 1px solid rgba(16, 24, 64, 0.06);
    border-radius: var(--cb-card-radius);
    box-shadow: var(--cb-card-shadow);
}

/* ---- Detached navbar: white, rounded, soft shadow ---- */
.layout-navbar.navbar-detached {
    background-color: #fff;
    border-radius: var(--cb-card-radius);
    box-shadow: var(--cb-card-shadow);
}

/* ---- Sidebar: slate-900 with cobalt active item ---- */
.bg-menu-theme {
    background-color: var(--cb-sidebar-bg) !important;
}
.bg-menu-theme .menu-item .menu-link,
.bg-menu-theme .menu-sub > .menu-item > .menu-link {
    color: var(--cb-sidebar-text);
}
.bg-menu-theme .menu-item .menu-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
}
.bg-menu-theme .menu-header {
    color: rgba(184, 177, 174, 0.55);
}
/* Active leaf — a top-level item (Dashboard) or a submenu item — gets the
   cobalt fill. Group parent toggles (.menu-toggle) are excluded: an expanded
   group highlights its icon/label but is not filled. */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    color: #fff;
    background-color: var(--cb-blue) !important;
}
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
    color: #fff;
}
.bg-menu-theme .menu-item.active > .menu-link.menu-toggle,
.bg-menu-theme .menu-item.active > .menu-link.menu-toggle .menu-icon {
    color: #fff;
}
/* Brand text in the sidebar. */
.app-brand-text.menu-text { color: #fff !important; }

/* ---- Forms: cobalt focus + checked ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--cb-blue);
    box-shadow: 0 0 0.25rem 0.05rem rgba(37, 99, 235, 0.15);
}
.form-check-input:checked {
    background-color: var(--cb-blue);
    border-color: var(--cb-blue);
}

/* ---- Tables (GridView): clean header + comfortable rows ---- */
.table > thead > tr > th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #8a93a8;
    background-color: #f7f8fb;
}
.table > tbody > tr > td { vertical-align: middle; }

/* ---- Tighter vertical menu so all sections fit without scrolling ---- */
.menu-vertical .menu-item .menu-link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.menu-vertical .menu-header {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* ---- Theme toggle button ---- */
#theme-toggle { color: #5d657b; cursor: pointer; }
#theme-toggle:hover { color: var(--cb-blue); }

/* ---- Login (split-screen) ---- */
.auth-split {
    display: flex;
    min-height: 100vh;
}
.auth-brand-panel {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    /* Crisp modern brand gradient: slate -> cobalt -> cyan with a soft radial glow. */
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16), transparent 46%),
        linear-gradient(135deg, #0F172A 0%, #2563EB 55%, #06B6D4 100%);
    color: #fff;
}
.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.auth-brand-panel::before { width: 420px; height: 420px; top: -130px; right: -120px; }
.auth-brand-panel::after { width: 300px; height: 300px; bottom: -110px; left: -90px; background: rgba(255, 255, 255, 0.06); }
.auth-brand-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 420px;
}
.auth-brand-logo {
    display: block;
    height: 220px;
    width: auto;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 12px 32px rgba(16, 24, 64, 0.4));
}
.auth-brand-title {
    color: #fff !important;
    font-family: var(--cb-font);
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.auth-brand-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}
.auth-form-panel {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--cb-body-bg);
}
.auth-form-card {
    width: 100%;
    max-width: 400px;
}
.auth-theme-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    color: #7b8499;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.auth-theme-toggle:hover { color: var(--cb-blue); }
@media (max-width: 991.98px) {
    .auth-brand-panel { display: none; }
    .auth-form-panel { flex-basis: 100%; }
}