:root {
    --bs-primary: #415ED1;
    --bs-primary-rgb: 65, 94, 209;
    --bs-link-color: #415ED1;
    --bs-link-hover-color: #2c449e;
    --app-ink: #172033;
    --app-muted: #697386;
    --app-surface: #ffffff;
    --app-canvas: #f5f7fb;
    --app-border: #e6eaf0;
    --app-primary: #415ED1;
    --app-primary-dark: #34499f;
    --app-primary-darker: #283a7f;
    --app-primary-tint: #e7ebfa;
    --app-accent: #D0E5DA;
    --app-accent-dark: #9fc6ae;
    --app-accent-ink: #1f6b4a;
    --app-accent-tint: #eaf4ef;
}

body { color: var(--app-ink); background: var(--app-canvas); font-family: Figtree, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 6% -8%, rgba(65, 94, 209, .12) 0, transparent 32rem), radial-gradient(circle at 100% 0%, rgba(208, 229, 218, .6) 0, transparent 30rem), var(--app-canvas); }
.app-navbar { min-height: 72px; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--app-border); backdrop-filter: blur(16px); position: relative; z-index: 10000 !important; overflow: visible !important; }
.app-brand-mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: linear-gradient(135deg, #415ED1, #283a7f); color: #fff; box-shadow: 0 .5rem 1.2rem rgba(65, 94, 209, .3); }
.app-brand-name { color: var(--app-ink); letter-spacing: -.02em; }
.nav-pills .nav-link { color: #5c6679; font-weight: 600; border-radius: .65rem; padding: .55rem .8rem; display: inline-flex; align-items: center; gap: .45rem; }
.nav-pills .nav-link:hover { color: var(--app-primary-darker); background: var(--app-primary-tint); }
.nav-pills .nav-link.active { color: #fff; background: var(--app-primary); }
.page-header { padding: 2.25rem 0 1.25rem; }
.page-header > .container { display: flex; align-items: center; }
.page-header h1, .page-header h2, .page-header .h4 { color: var(--app-ink); font-weight: 700; letter-spacing: -.035em; }
main > .container { padding-bottom: 2.5rem; }
.card { border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: 0 .45rem 1.5rem rgba(23, 32, 51, .045); overflow: hidden; }
.card-body { padding: 1.5rem; }
.card-footer { background: #fbfcfe; border-top-color: var(--app-border); padding: 1rem 1.5rem; }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: #f8faff; margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--app-border); padding: 1rem; vertical-align: middle; }
.table thead th { color: var(--app-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.btn { border-radius: .65rem; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-primary { --bs-btn-bg: #415ED1; --bs-btn-border-color: #415ED1; --bs-btn-hover-bg: #34499f; --bs-btn-hover-border-color: #34499f; --bs-btn-active-bg: #283a7f; --bs-btn-active-border-color: #283a7f; }
.btn-outline-primary { --bs-btn-color: #415ED1; --bs-btn-border-color: #c3cdf3; --bs-btn-hover-bg: #415ED1; --bs-btn-hover-border-color: #415ED1; }
.btn-outline-secondary { --bs-btn-color: #516075; --bs-btn-border-color: #d9e0ea; --bs-btn-hover-bg: #516075; --bs-btn-hover-border-color: #516075; }
.btn-accent { --bs-btn-color: #1f6b4a; --bs-btn-bg: #D0E5DA; --bs-btn-border-color: #D0E5DA; --bs-btn-hover-color: #1f6b4a; --bs-btn-hover-bg: #b9dbc7; --bs-btn-hover-border-color: #b9dbc7; }
.form-control, .form-select { border-color: #d9e0ea; border-radius: .65rem; padding: .65rem .8rem; }
.form-control:focus, .form-select:focus { border-color: #a9b7ea; box-shadow: 0 0 0 .25rem rgba(65, 94, 209, .14); }
.form-label { color: #344054; font-size: .875rem; font-weight: 650; margin-bottom: .45rem; }
.widget-builder-offcanvas .widget-type-card,
.widget-builder-offcanvas .connector-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .8rem .95rem;
    border: 1px solid #d9e0ea;
    border-radius: .8rem;
    background: #fff;
    color: var(--app-ink);
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.widget-builder-offcanvas .widget-type-card:hover,
.widget-builder-offcanvas .connector-card:hover {
    transform: translateY(-1px);
    border-color: #a9b7ea;
    box-shadow: 0 .65rem 1.4rem rgba(23, 32, 51, .08);
}
.widget-builder-offcanvas .widget-type-card.is-active,
.widget-builder-offcanvas .connector-card.is-active,
.widget-builder-offcanvas .widget-type-card[aria-pressed="true"],
.widget-builder-offcanvas .connector-card[aria-pressed="true"] {
    border-color: #415ED1;
    background: var(--app-primary-tint);
    box-shadow: 0 .75rem 1.6rem rgba(65, 94, 209, .16);
}
.widget-builder-offcanvas .widget-step {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--app-muted);
}
.widget-builder-offcanvas .widget-step span {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--app-muted);
    font-size: .8rem;
    font-weight: 700;
}
.widget-builder-offcanvas .widget-step.is-active {
    color: var(--app-primary-darker);
    font-weight: 700;
}
.widget-builder-offcanvas .widget-step.is-active span {
    background: var(--app-primary);
    color: #fff;
}
.widget-preview-surface {
    min-height: 15rem;
    border: 1px dashed #d9e0ea;
    border-radius: .9rem;
    background: linear-gradient(180deg, #fff, #fafcff);
    padding: 1rem;
}
.widget-builder-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.widget-builder-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.widget-builder-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.widget-builder-offcanvas .offcanvas-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -0.35rem 1.1rem rgba(23, 32, 51, .06);
}
.dashboard-overview .card-body {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}
.dashboard-toolbar .js-dashboard-action-form {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    padding: .35rem .45rem;
}
.dashboard-inline-edit-form {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    padding: .6rem;
}
.dashboard-inline-edit-form .form-control {
    background: #fbfcff;
}
.dashboard-grid {
    min-height: 0;
}
.dashboard-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.dashboard-grid .grid-stack-item-content {
    height: 100%;
}
.dashboard-grid .grid-stack-item-content > .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.dashboard-grid .grid-stack-item-content > .card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
}
.widget-card {
    position: relative;
}
.widget-meta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45rem;
    flex-shrink: 0;
}
.widget-action-menu .btn {
    padding: .32rem .44rem;
    line-height: 1;
}
.widget-action-menu .dropdown-menu {
    border-radius: .65rem;
    border-color: #d9e0ea;
    box-shadow: 0 .8rem 1.6rem rgba(23, 32, 51, .14);
}
.kpi-widget-content {
    min-height: 100%;
}
.kpi-widget-value {
    letter-spacing: -.02em;
}
.kpi-widget-trend {
    min-width: 9rem;
}
.widget-chart-surface {
    height: 100%;
    min-height: 15.5rem;
}
.dashboard-hidden-widgets summary {
    list-style: none;
    cursor: pointer;
}
.dashboard-hidden-widgets summary::-webkit-details-marker {
    display: none;
}
.dashboard-hidden-widgets summary::after {
    content: '\25BE';
    color: var(--app-muted);
    font-size: .75rem;
    margin-left: .5rem;
}
.dashboard-hidden-widgets:not([open]) summary::after {
    content: '\25B8';
}
.widget-shell-placeholder {
    min-height: 12rem;
}
.input-group-text { background: #f8faff; border-color: #d9e0ea; color: var(--app-muted); }
.badge { border-radius: 999px; font-weight: 650; padding: .45em .72em; }
.text-bg-indigo { background-color: #4f46e5 !important; color: #fff !important; }
.text-bg-orange { background-color: #ea580c !important; color: #fff !important; }
.text-bg-accent { background-color: var(--app-accent) !important; color: var(--app-accent-ink) !important; }
.alert { border: 0; border-radius: .8rem; box-shadow: 0 .3rem 1rem rgba(23, 32, 51, .05); }
.alert-success { background: var(--app-accent-tint); color: var(--app-accent-ink); }
.app-user-menu { display: inline-block; position: relative; z-index: 10010 !important; }
.app-user-menu > summary { list-style: none; cursor: pointer; }
.app-user-menu > summary::-webkit-details-marker { display: none; }
.app-user-menu[open] > .dropdown-menu { display: block; }
.app-user-menu[open] { z-index: 10020 !important; }
.app-user-menu-content { right: 0; left: auto; z-index: 10030 !important; position: absolute; }
.app-navbar .container,
.app-navbar .navbar-collapse,
.app-navbar .dropdown,
.app-navbar .dropdown-menu {
    overflow: visible !important;
}
.page-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; font-size: 1.05rem; flex: none; }
.page-icon-primary, .icon-chip-primary { background: var(--app-primary-tint); color: var(--app-primary); }
.page-icon-accent, .icon-chip-accent { background: var(--app-accent); color: var(--app-accent-ink); }
.icon-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; flex: none; }
.icon-chip-lg { width: 3rem; height: 3rem; font-size: 1.35rem; }
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--app-muted); }
.empty-state .page-icon, .empty-state .icon-chip { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; margin: 0 auto 1rem; }
.auth-page { min-height: 100vh; background: radial-gradient(circle at 12% 15%, rgba(65, 94, 209, .55) 0, transparent 40%), radial-gradient(circle at 88% 85%, rgba(208, 229, 218, .35) 0, transparent 45%), #121733; }
.auth-panel { width: min(100%, 30rem); border: 1px solid rgba(255,255,255,.7); border-radius: 1.25rem; box-shadow: 0 1.5rem 4rem rgba(6, 10, 30, .28); }
.auth-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--app-primary-tint); color: var(--app-primary); font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.auth-brand { color: #fff; text-decoration: none; }
.auth-brand:hover { color: #fff; }
.auth-brand .app-brand-mark { width: 2.65rem; height: 2.65rem; }
.auth-copy { color: #667085; font-size: .9rem; }
.auth-form > div { margin-bottom: 1rem; }
.auth-panel form > div + div { margin-top: 1rem; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.auth-link { color: #415ED1; font-size: .875rem; font-weight: 600; text-decoration: none; }
.auth-link:hover { color: #2c449e; text-decoration: underline; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid rgba(65, 94, 209, .45);
    outline-offset: 2px;
}
.shadow-sm, .shadow { box-shadow: 0 .45rem 1.5rem rgba(23, 32, 51, .045) !important; }
.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
@media (max-width: 767.98px) { .page-header { padding-top: 1.5rem; } .card-body { padding: 1rem; } .table-responsive { margin: 0 -1rem; } .row.g-5 { --bs-gutter-x: 1.5rem; } }
