/* Can Indigo brand + PlainAdmin-style light re-skin for the Sneat shell.
   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: #4338ca;
    --bs-primary-rgb: 67, 56, 202;
    --ci-indigo: #4338ca;
    --ci-indigo-dark: #3730a3;
    --ci-sidebar-bg: #1a2142;
    --ci-sidebar-text: #9aa4ca;
    --ci-body-bg: #f1f5f9;
    --ci-heading: #1a2142;
    --ci-card-shadow: 0 5px 20px rgba(16, 24, 64, 0.06);
    --ci-card-radius: 0.625rem;
    --ci-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

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

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

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

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

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

/* ---- Sidebar: dark navy with indigo active item ---- */
.bg-menu-theme {
    background-color: var(--ci-sidebar-bg) !important;
}
.bg-menu-theme .menu-item .menu-link,
.bg-menu-theme .menu-sub > .menu-item > .menu-link {
    color: var(--ci-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(154, 164, 202, 0.65);
}
/* Active leaf — a top-level item (Dashboard) or a submenu item — gets the
   indigo 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(--ci-indigo) !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 (replaces the old inline color:#4338ca). */
.app-brand-text.menu-text { color: #fff !important; }

/* ---- Forms: indigo focus + checked ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--ci-indigo);
    box-shadow: 0 0 0.25rem 0.05rem rgba(67, 56, 202, 0.1);
}
.form-check-input:checked {
    background-color: var(--ci-indigo);
    border-color: var(--ci-indigo);
}

/* ---- 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(--ci-indigo); }

/* ---- 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: deep indigo -> violet with a soft radial glow. */
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16), transparent 46%),
        linear-gradient(135deg, #4338ca 0%, #5b4fe0 48%, #7c3aed 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(--ci-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(--ci-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(--ci-indigo); }
@media (max-width: 991.98px) {
    .auth-brand-panel { display: none; }
    .auth-form-panel { flex-basis: 100%; }
}