/* Basic layout */
body {
    background-color: #0f172a;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-wrapper {
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: #020617;
    color: #e5e7eb;
    padding: 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding-bottom: 0.5rem;
}

.sidebar-logo-circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.sidebar-title {
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
}

.sidebar-menu {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
    flex: 1;
}

.sidebar-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 0.25rem 0.75rem;
}

.sidebar .nav-link {
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
}

.sidebar .nav-link:hover {
    background: rgba(148, 163, 184, 0.15);
    color: #e5e7eb;
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, #2563eb, #22c55e);
    color: #f9fafb;
}

/* Main */
.main {
    background: #020617;
}

/* Topbar */
.topbar {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
}

.page-title {
    color: #e5e7eb;
}

.topbar-search .form-control,
.topbar-search .input-group-text {
    background: #020617;
    border-color: #1f2937;
    color: #e5e7eb;
}

/* Content */
.content {
    background: #020617;
}

/* Stats cards */
.stat-card {
    background: radial-gradient(circle at top left, #1d4ed8, #020617);
    border: none;
    color: #e5e7eb;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5f5;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 600;
}

/* Footer */
.footer {
    background: #020617;
}

/* Login */
.login-card {
    max-width: 380px;
    width: 100%;
    border-radius: 1rem;
}

.logo-circle {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
}

/* Sidebar collapse for mobile */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        z-index: 1040;
    }

    body.sidebar-collapsed .sidebar {
        transform: translateX(0);
    }

    .main {
        width: 100%;
    }
}
.sidebar .nav-link.logout-link { margin-top:1rem; color:#fff; background:#d9364b; font-weight:650; }
.sidebar .nav-link.logout-link:hover { color:#fff; background:#b82338; }

/* Professional Digit Sparx login */
.vault-login-page { min-height:100vh; margin:0; background:#07111f; color:#11213b; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.08fr) minmax(420px,.92fr); }
.login-brand-panel { padding:clamp(2rem,6vw,6rem); color:#fff; display:flex; flex-direction:column; background:radial-gradient(circle at 15% 15%,#2269df 0,#0b2d67 35%,#07111f 78%); }
.brand-link { color:#fff; text-decoration:none; font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:.65rem; }.brand-mark,.vault-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#2671ee,#16b89b); box-shadow:0 8px 24px rgba(23,170,166,.24); }
.brand-link img { display:block; width:205px; max-width:100%; height:auto; }.mobile-brand img { width:150px; height:auto; background:#12243d; border-radius:8px; padding:7px 10px; }
.brand-copy { margin:auto 0; max-width:570px; }.eyebrow { color:#6fe1cd; font-size:.72rem; font-weight:700; letter-spacing:.16em; }.brand-copy h1 { font-size:clamp(2.4rem,5vw,4.7rem); line-height:1.05; margin:1rem 0; font-weight:750; }.brand-copy em { color:#73e1d1; font-style:normal; }.brand-copy p { color:#b9c8df; font-size:1.05rem; max-width:480px; }.brand-points { display:flex; gap:1.6rem; color:#dce8f7; font-size:.9rem; }.brand-points i { color:#73e1d1; margin-right:.35rem; }
.login-form-panel { display:grid; place-items:center; padding:2rem; background:#fff; }.login-card { width:min(100%,410px); }.login-heading { text-align:left; margin-bottom:2rem; }.vault-icon { width:48px;height:48px; font-size:1.25rem; margin-bottom:1.2rem; }.login-heading h2 { font-weight:750; margin:0; color:#13233d; }.login-heading p { margin:.35rem 0 0; color:#75829a; }.login-card .form-label { font-size:.88rem; font-weight:650; color:#40506a; }.login-card .form-control,.login-card .input-group-text { border-color:#dbe3ef; min-height:48px; background:#fff; }.login-card .form-control:focus { border-color:#2671ee; box-shadow:0 0 0 .2rem rgba(38,113,238,.12); }.login-card .btn-primary { min-height:48px; border:0; border-radius:8px; background:#1769e9; font-weight:650; }.login-credit { margin-top:2.6rem; color:#8390a3; font-size:.79rem; text-align:center; }.login-credit a { color:#fff; background:#1769e9; border-radius:4px; padding:.1rem .35rem; text-decoration:none; }.mobile-brand { display:none; }
.renewal-green { border-left:4px solid #20b26b !important; }.renewal-yellow { border-left:4px solid #f2b92b !important; }.renewal-red { border-left:4px solid #ef5263 !important; }.renewal-badge-green { background:#177d4b; }.renewal-badge-yellow { background:#d69d09; color:#1b1604; }.renewal-badge-red { background:#c63246; }
@media (max-width:767.98px) { .login-shell { display:block; }.login-brand-panel { display:none; }.login-form-panel { min-height:100vh; padding:1.5rem; }.mobile-brand { display:flex; align-items:center; gap:.55rem; color:#16335b; font-weight:750; margin-bottom:3.5rem; }.mobile-brand .brand-mark { width:34px;height:34px;border-radius:10px; } }

/* Light internal-app theme */
body { background:#f4f7fb; color:#243447; }
.app-wrapper { background:#f4f7fb; }.main { min-width:0; background:#f4f7fb; }.content { background:#f4f7fb; }
.sidebar { background:#fff; color:#26374b; border-right:1px solid #e4eaf1; box-shadow:2px 0 12px rgba(30,56,82,.04); }.sidebar-header { border-color:#e8edf2; }.sidebar-title { color:#1e3045; }.sidebar-subtitle,.sidebar-section-label { color:#78879a; }.sidebar-logo-circle { background:linear-gradient(135deg,#1ba88d,#62c9b7); }.sidebar .nav-link { color:#55677b; }.sidebar .nav-link:hover { background:#edf7f5; color:#167f70; }.sidebar .nav-link.active { background:#e0f5ef; color:#107d6d; }.sidebar .nav-link.logout-link { background:#fff0f1; color:#ce394c; }.sidebar .nav-link.logout-link:hover { background:#fbdce0; color:#b32438; }
.topbar { position:relative; z-index:1100; min-height:64px; background:#fff; border-color:#e4eaf1; box-shadow:0 2px 8px rgba(30,56,82,.04); }.page-title { color:#243447; }.topbar-search .form-control,.topbar-search .input-group-text { background:#f8fafc; border-color:#dce5ed; color:#526579; }.topbar .dropdown-menu { z-index:1200; min-width:210px; box-shadow:0 12px 30px rgba(31,48,70,.18); border:1px solid #e4eaf1; }
.content .card { border:1px solid #e1e8ef; border-radius:.65rem; box-shadow:0 3px 12px rgba(33,57,82,.045); color:#27394c; }.content .card-header { background:#fff; border-color:#e4eaf1; color:#26384b; }.stat-card { background:linear-gradient(135deg,#fff,#eff8f6); border:1px solid #dcece7 !important; color:#294254; }.stat-icon { background:#dff4ef; color:#168b79; }.stat-label { color:#668094; }.stat-value { color:#203b4e; }
.btn-primary { background:#159b84; border-color:#159b84; }.btn-primary:hover,.btn-primary:focus { background:#107d6b; border-color:#107d6b; }.btn-success { background:#28a987; border-color:#28a987; }.btn-outline-light { color:#587086; border-color:#cdd9e4; }.btn-outline-light:hover { background:#eef5f4; color:#147e6d; border-color:#b9dcd4; }.table-dark,.table-dark>*,.table-dark>*>* { --bs-table-bg:#fff; --bs-table-striped-bg:#f7fafc; --bs-table-color:#304355; --bs-table-striped-color:#304355; --bs-table-border-color:#e4eaf1; color:#304355; }.table-dark thead th { background:#eef4f6 !important; color:#3c5263; }.table-dark a { color:#147e6d; }.footer { background:#fff; color:#7d8c9d !important; border-color:#e4eaf1 !important; }
.renewal-green { border-left-color:#25a56a !important; }.renewal-yellow { border-left-color:#e7ae19 !important; }.renewal-red { border-left-color:#e54e62 !important; }
@media (max-width:991.98px) { .sidebar { box-shadow:4px 0 22px rgba(30,56,82,.16); }.topbar { z-index:1100; }.topbar .dropdown-menu { position:absolute; right:0; left:auto; } }

/* Soft colourful accents for the working area */
body,.app-wrapper,.main,.content { background:linear-gradient(135deg,#eef6ff 0%,#f8f3ff 48%,#eefbf7 100%); }
.sidebar { background:linear-gradient(180deg,#ffffff 0%,#f2fbf9 100%); }.topbar { background:rgba(255,255,255,.92); }
.content .card { background:rgba(255,255,255,.86); backdrop-filter:blur(6px); }.content .card-header { background:linear-gradient(90deg,#fff,#f4fbff); }
.stat-card { overflow:hidden; position:relative; }.stat-card:after { content:''; position:absolute; width:80px; height:80px; border-radius:50%; right:-28px; top:-30px; opacity:.45; }.dashboard-stats .col-6:nth-child(1) .stat-card { background:linear-gradient(135deg,#ecf2ff,#e4f7ff); border-color:#cce1fb !important; }.dashboard-stats .col-6:nth-child(1) .stat-card .stat-icon { background:#d5e6ff; color:#326bc4; }.dashboard-stats .col-6:nth-child(1) .stat-card:after { background:#9ec6ff; }.dashboard-stats .col-6:nth-child(2) .stat-card { background:linear-gradient(135deg,#ebfbf5,#e1f8ef); border-color:#c7eadc !important; }.dashboard-stats .col-6:nth-child(2) .stat-card .stat-icon { background:#ceefe0; color:#188a67; }.dashboard-stats .col-6:nth-child(2) .stat-card:after { background:#9fdfc3; }.dashboard-stats .col-6:nth-child(3) .stat-card { background:linear-gradient(135deg,#f5edff,#eee5ff); border-color:#ded0fa !important; }.dashboard-stats .col-6:nth-child(3) .stat-card .stat-icon { background:#e5d8ff; color:#7550bd; }.dashboard-stats .col-6:nth-child(3) .stat-card:after { background:#cdb6fb; }.dashboard-stats .col-6:nth-child(4) .stat-card { background:linear-gradient(135deg,#fff6e8,#fff0d8); border-color:#f5dfb6 !important; }.dashboard-stats .col-6:nth-child(4) .stat-card .stat-icon { background:#ffe6bd; color:#bd791b; }.dashboard-stats .col-6:nth-child(4) .stat-card:after { background:#ffd18a; }
.settings-hero { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 1.75rem; border-radius:.8rem; color:#fff; background:linear-gradient(120deg,#167f9e,#238f7d 55%,#7061bd); box-shadow:0 12px 26px rgba(38,116,142,.2); }.settings-hero h4 { font-weight:700; }.settings-hero p { color:rgba(255,255,255,.84); }.settings-kicker { font-size:.72rem; font-weight:700; letter-spacing:.12em; color:#c7fff2; }.settings-hero>i { font-size:3rem; color:rgba(255,255,255,.28); }

/* Keep the left navigation stable when wide forms or tables are open. */
.sidebar { flex:0 0 260px; width:260px; min-width:260px; background:linear-gradient(180deg,#ffffff 0%,#f2fbf9 100%); }.sidebar-brand-logo { display:block; width:170px; max-width:100%; height:auto; background:#152b45; border-radius:8px; padding:7px 9px; }
@media (max-width:991.98px) { .sidebar { width:260px; min-width:260px; } }
.data-tools .btn { white-space:nowrap; }.data-tools + .collapse { width:100%; }
@media print { .sidebar,.topbar,.footer,.data-tools,.btn,.collapse,.alert { display:none !important; } .main,.content,body { background:#fff !important; } .content { padding:0 !important; } .card { box-shadow:none !important; border:1px solid #ddd !important; } }