/* =====================================================================
   Zingpoint v3 theme — "Aurora"
   Deep indigo sidebar with sliding sub-menus, frosted top bar,
   indigo → violet → cyan accents, soft cards. Loaded after Tabler + app.css.
   ===================================================================== */

:root {
    --zp-indigo: #4f46e5;
    --zp-violet: #7c3aed;
    --zp-cyan: #06b6d4;
    --zp-pink: #ec4899;
    --zp-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #06b6d4 100%);
    --zp-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(124, 58, 237, .08) 55%, rgba(6, 182, 212, .10));
    --zp-side-w: 272px;
    --zp-side-mini: 78px;
    --zp-side-bg: linear-gradient(180deg, #0f1035 0%, #1b1660 48%, #2a1470 100%);
    --zp-side-fg: #c7c9f5;
    --zp-radius: 14px;
    --zp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 22px -8px rgba(30, 27, 75, .16);
    --zp-shadow-hover: 0 2px 4px rgba(17, 24, 39, .05), 0 14px 34px -10px rgba(30, 27, 75, .28);
    --zp-ease: cubic-bezier(.22, .9, .32, 1);

    /* Tabler / Bootstrap tokens */
    --tblr-font-sans-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tblr-primary: #4f46e5;
    --tblr-primary-rgb: 79, 70, 229;
    --tblr-primary-fg: #fff;
    --tblr-primary-darken: #4338ca;
    --tblr-primary-lt: #ecebfd;
    --tblr-primary-lt-rgb: 236, 235, 253;
    --tblr-link-color: #4f46e5;
    --tblr-link-color-rgb: 79, 70, 229;
    --tblr-link-hover-color: #4338ca;
    --tblr-border-radius: 10px;
    --tblr-border-radius-lg: 14px;
    --tblr-body-bg: #f3f4fb;
    --tblr-bg-surface-secondary: #f6f7fc;
    --tblr-border-color: #e6e8f2;
    --tblr-border-color-translucent: rgba(30, 27, 75, .08);
    --bn-brand: #4f46e5;
}

/* ------------------------------------------------------------- canvas */
body.zp-app {
    background:
        radial-gradient(900px 420px at 100% -8%, rgba(124, 58, 237, .10), transparent 60%),
        radial-gradient(800px 380px at 20% -12%, rgba(6, 182, 212, .08), transparent 60%),
        #f3f4fb;
    background-attachment: fixed;
    font-feature-settings: "ss01", "cv11";
}
.zp-shell { min-height: 100vh; }
.zp-main { margin-left: var(--zp-side-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .35s var(--zp-ease); }
.zp-main > .page-body { flex: 1; }

/* ------------------------------------------------------------ sidebar */
.zp-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--zp-side-w); z-index: 1040;
    display: flex; flex-direction: column; color: var(--zp-side-fg);
    background: var(--zp-side-bg); box-shadow: 6px 0 30px -12px rgba(15, 16, 53, .55);
    transition: width .35s var(--zp-ease), transform .4s var(--zp-ease);
    overflow: hidden;
}
.zp-sidebar::before { /* soft aurora glow */
    content: ""; position: absolute; inset: auto -40% -30% -40%; height: 60%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(124, 58, 237, .35), transparent), radial-gradient(closest-side at 70% 60%, rgba(6, 182, 212, .18), transparent);
    filter: blur(10px); opacity: .9;
}
.zp-brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1rem .8rem 1.1rem; position: relative; }
.zp-brand-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; min-width: 0; flex: 1; }
.zp-brand-link:hover { text-decoration: none; }
.zp-logo {
    width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--zp-grad); box-shadow: 0 6px 18px -4px rgba(124, 58, 237, .65);
}
.zp-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.zp-brand-text b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-brand-text small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9fa3e8; }
.zp-collapse-btn {
    border: 0; background: rgba(255, 255, 255, .06); color: #c7c9f5; width: 2rem; height: 2rem; border-radius: 9px;
    align-items: center; justify-content: center; font-size: 1.1rem; transition: background .2s, color .2s, transform .35s var(--zp-ease);
}
.zp-collapse-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.zp-search { position: relative; margin: .2rem 1rem .6rem; }
.zp-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #8d91d8; font-size: 1rem; }
.zp-search input {
    width: 100%; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); color: #fff;
    border-radius: 10px; padding: .5rem 3.4rem .5rem 2.2rem; font-size: .84rem; outline: none; transition: border-color .2s, background .2s;
}
.zp-search input::placeholder { color: #8d91d8; }
.zp-search input:focus { border-color: rgba(129, 140, 248, .7); background: rgba(255, 255, 255, .1); }
.zp-search kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .62rem; background: rgba(255, 255, 255, .1); color: #b9bcf3; border: 0; box-shadow: none; padding: .1rem .35rem; }

.zp-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .2rem .7rem 1rem; position: relative; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.zp-nav::-webkit-scrollbar { width: 6px; }
.zp-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 6px; }

.zp-link {
    display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .6rem; margin: 2px 0; border: 0; background: transparent;
    color: var(--zp-side-fg); font-size: .88rem; font-weight: 500; text-align: left; border-radius: 11px; text-decoration: none; position: relative;
    white-space: nowrap; transition: background .2s, color .2s, transform .2s;
}
.zp-link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.zp-link:focus-visible { outline: 2px solid rgba(129, 140, 248, .8); outline-offset: 1px; }
.zp-ico {
    width: 2.05rem; height: 2.05rem; flex: 0 0 2.05rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; background: rgba(255, 255, 255, .05); transition: background .2s, color .2s, box-shadow .2s;
}
.zp-link:hover .zp-ico { background: rgba(255, 255, 255, .1); }
.zp-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }
.zp-link.active { color: #fff; background: linear-gradient(90deg, rgba(99, 102, 241, .35), rgba(124, 58, 237, .18)); }
.zp-link.active .zp-ico { background: var(--zp-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .8); }
.zp-link.active::before { content: ""; position: absolute; left: -.7rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#818cf8, #22d3ee); }

/* groups: the sub-menu slides open / closed */
.zp-caret { font-size: .95rem; opacity: .6; transition: transform .35s var(--zp-ease), opacity .2s; }
.zp-group.is-open > .zp-toggle .zp-caret { transform: rotate(90deg); opacity: 1; }
.zp-group.is-open > .zp-toggle, .zp-group.has-active > .zp-toggle { color: #fff; }
.zp-group.has-active > .zp-toggle .zp-ico { background: rgba(129, 140, 248, .22); color: #fff; }
.zp-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--zp-ease); }
.zp-group.is-open > .zp-sub { grid-template-rows: 1fr; }
.zp-sub-inner { overflow: hidden; min-height: 0; padding-left: 1.15rem; position: relative; }
.zp-sub-inner::before { content: ""; position: absolute; left: 1.6rem; top: .3rem; bottom: .5rem; width: 1px; background: rgba(199, 201, 245, .16); }
.zp-sub .zp-link { font-size: .84rem; padding: .38rem .55rem; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .35s var(--zp-ease), background .2s, color .2s; }
.zp-sub .zp-ico { width: 1.7rem; height: 1.7rem; flex-basis: 1.7rem; font-size: .98rem; background: transparent; }
.zp-group.is-open .zp-sub .zp-link { opacity: 1; transform: none; }
.zp-group.is-open .zp-sub .zp-link:nth-child(2) { transition-delay: .03s; }
.zp-group.is-open .zp-sub .zp-link:nth-child(3) { transition-delay: .06s; }
.zp-group.is-open .zp-sub .zp-link:nth-child(4) { transition-delay: .09s; }
.zp-group.is-open .zp-sub .zp-link:nth-child(5) { transition-delay: .12s; }
.zp-group.is-open .zp-sub .zp-link:nth-child(n+6) { transition-delay: .15s; }
.zp-sub .zp-link.active { background: rgba(129, 140, 248, .2); }
.zp-sub .zp-link.active .zp-ico { background: transparent; box-shadow: none; color: #a5b4fc; }
.zp-sub .zp-link.active::before { left: -.15rem; }
.zp-link.is-soon { opacity: .55; }
.zp-soon { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .1); border-radius: 6px; padding: .1rem .35rem; }
.zp-empty { color: #8d91d8; font-size: .82rem; padding: .8rem .7rem; }
.zp-link.zp-hit .zp-label { color: #fff; }

.zp-side-foot { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem 1rem; font-size: .76rem; color: #9fa3e8; border-top: 1px solid rgba(255, 255, 255, .06); position: relative; white-space: nowrap; }
.zp-side-foot b { color: #fff; }
.zp-pulse { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: zp-pulse 2.2s infinite; }
@keyframes zp-pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* mini (icons only) on desktop; hovering expands it over the page */
@media (min-width: 992px) {
    html.zp-mini .zp-main { margin-left: var(--zp-side-mini); }
    html.zp-mini .zp-sidebar:not(:hover) { width: var(--zp-side-mini); }
    html.zp-mini .zp-sidebar:not(:hover) .zp-label,
    html.zp-mini .zp-sidebar:not(:hover) .zp-caret,
    html.zp-mini .zp-sidebar:not(:hover) .zp-brand-text,
    html.zp-mini .zp-sidebar:not(:hover) .zp-soon,
    html.zp-mini .zp-sidebar:not(:hover) .zp-search,
    html.zp-mini .zp-sidebar:not(:hover) .zp-collapse-btn { opacity: 0; pointer-events: none; }
    html.zp-mini .zp-sidebar:not(:hover) .zp-sub { grid-template-rows: 0fr; }
    html.zp-mini .zp-sidebar:not(:hover) .zp-nav { overflow: hidden; }
    html.zp-mini .zp-sidebar:hover { box-shadow: 18px 0 50px -10px rgba(15, 16, 53, .6); }
    html.zp-mini .zp-collapse-btn i { transform: rotate(180deg); }
}

/* phones / tablets: slide in from the left */
.zp-backdrop { position: fixed; inset: 0; background: rgba(15, 16, 53, .45); backdrop-filter: blur(2px); z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
@media (max-width: 991.98px) {
    .zp-main { margin-left: 0; }
    .zp-sidebar { transform: translateX(-105%); width: min(86vw, var(--zp-side-w)); }
    html.zp-open .zp-sidebar { transform: none; }
    html.zp-open .zp-backdrop { opacity: 1; visibility: visible; }
    html.zp-open { overflow: hidden; }
}

/* ------------------------------------------------------------- top bar */
.zp-topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .6rem; padding: .7rem 1.5rem;
    background: rgba(243, 244, 251, .72); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid rgba(30, 27, 75, .06);
}
.zp-icon-btn {
    border: 1px solid var(--tblr-border-color); background: #fff; width: 2.4rem; height: 2.4rem; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #3730a3; transition: box-shadow .2s, transform .15s;
}
.zp-icon-btn:hover { box-shadow: var(--zp-shadow); transform: translateY(-1px); }
.zp-quick {
    align-items: center; gap: .6rem; border: 1px solid var(--tblr-border-color); background: #fff; color: #8a8fb3; border-radius: 11px;
    padding: .5rem .8rem; min-width: 18rem; font-size: .86rem; transition: box-shadow .2s, border-color .2s;
}
.zp-quick:hover { border-color: #c7c4f7; box-shadow: var(--zp-shadow); }
.zp-quick kbd { margin-left: auto; font-size: .65rem; background: #f1f1fb; color: #6366f1; border: 0; box-shadow: none; }
.zp-top-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.zp-top-right .nav-item { list-style: none; }
.zp-top-right .nb-bell { margin: 0 !important; }
.zp-top-right .nb-bell > .nav-link { width: 2.4rem; height: 2.4rem; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--tblr-border-color); padding: 0 !important; }
.zp-top-right .nb-bell .nb-count { top: -.35rem; right: -.35rem; }
.zp-idle { align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: #059669; background: #ecfdf5; border-radius: 20px; padding: .25rem .6rem; }
.zp-top-right .top-tasks { margin: 0 !important; flex-wrap: nowrap; align-items: center; }
.zp-top-right .top-tasks .badge { padding: .4rem .65rem; border-radius: 20px; font-size: .74rem; white-space: nowrap; }
.zp-top-right .dropdown > .nav-link { background: #fff; border: 1px solid var(--tblr-border-color); border-radius: 12px; padding: .25rem .5rem .25rem .25rem !important; }

/* --------------------------------------------------------- page header */
.zp-main .page-header { margin: 0; padding-top: 1.4rem; padding-bottom: .4rem; }
.page-title { font-weight: 800; letter-spacing: -.02em; font-size: 1.45rem; color: #1e1b4b; }
.page-pretitle { font-weight: 700; letter-spacing: .08em; color: #7c3aed; }
.page-pretitle a { color: inherit; }
.zp-footer { padding: 1.4rem 0 1.6rem; color: #8a8fb3; font-size: .8rem; text-align: center; }
.zp-footer b { background: var(--zp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* -------------------------------------------------------------- cards */
.card { border: 1px solid rgba(30, 27, 75, .06); border-radius: var(--zp-radius); box-shadow: var(--zp-shadow); }
.card-header { border-bottom-color: rgba(30, 27, 75, .06); }
.card-header:first-child { border-radius: var(--zp-radius) var(--zp-radius) 0 0; }
.card-footer { background: #fbfbfe; border-top-color: rgba(30, 27, 75, .06); }
.card-title { font-weight: 700; color: #1e1b4b; }
.card-link { transition: transform .2s var(--zp-ease), box-shadow .2s; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--zp-shadow-hover); }
.card-sm .h1, .card-sm .h2 { font-weight: 800; letter-spacing: -.02em; }
.stat-icon { border-radius: 12px; }
.row-deck .card-sm .stat-icon, .row-cards .card-sm .stat-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.list-group-item-action:hover { background: #f7f7fe; }
.table thead th { background: #fafaff; color: #6b6f99; font-weight: 700; letter-spacing: .04em; }
.nav-tabs .nav-link.active { color: var(--zp-indigo); font-weight: 700; }
.nav-tabs .nav-link.active::after { background: var(--zp-grad) !important; }
.dropdown-menu { border-radius: 12px; border-color: rgba(30, 27, 75, .08); box-shadow: 0 18px 40px -12px rgba(30, 27, 75, .3); }
.modal-content { border-radius: 16px; border: 0; }
.alert { border-radius: 12px; border: 0; box-shadow: var(--zp-shadow); }

/* ------------------------------------------------------------ buttons */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .65); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #4338ca, #6d28d9); border-color: transparent; box-shadow: 0 8px 20px -6px rgba(79, 70, 229, .75); }
.btn:not(.btn-primary):not([class*="btn-ghost"]):not(.btn-link):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) { background: #fff; }
.form-control, .form-select, .ts-wrapper .ts-control { border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18); }
.form-check-input:checked { background-color: var(--zp-indigo); border-color: var(--zp-indigo); }
.progress { border-radius: 20px; background: #ececf8; }
.progress-bar.bg-primary { background: var(--zp-grad) !important; }
.badge { font-weight: 600; border-radius: 7px; }
.avatar { border-radius: 10px; }

/* dashboard shortcut row */
.dash-tabs .btn { border-radius: 30px; }
.dash-tabs .btn-primary { box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .7); }

/* project hero / brand marks used elsewhere */
.brand-mark { background: var(--zp-grad) !important; border-radius: 12px !important; }

/* ------------------------------------------------------------- login */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #f3f4fb; }
.auth-hero {
    position: relative; overflow: hidden; color: #fff; padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(600px 400px at 85% 15%, rgba(6, 182, 212, .45), transparent 60%), radial-gradient(700px 500px at 10% 95%, rgba(236, 72, 153, .35), transparent 60%), linear-gradient(140deg, #1e1b4b 0%, #3730a3 45%, #6d28d9 100%);
}
.auth-hero::after { /* soft grid */
    content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 70%);
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 1rem; }
.auth-hero h1 span { background: linear-gradient(90deg, #a5f3fc, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p { color: #d6d8ff; max-width: 30rem; font-size: 1rem; }
.auth-points { display: grid; gap: .7rem; margin-top: 1.6rem; }
.auth-points div { display: flex; align-items: center; gap: .7rem; color: #e4e5ff; font-weight: 500; }
.auth-points i { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); font-size: 1.1rem; }
.auth-brand-hero { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.2rem; }
.auth-brand-hero .zp-logo { background: rgba(255, 255, 255, .16); box-shadow: none; }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-side .card { border: 0; box-shadow: 0 30px 60px -24px rgba(30, 27, 75, .35); border-radius: 20px; }
.auth-side .container-tight, .auth-side .container-narrow { width: 100%; }
.auth-orbs span { position: absolute; border-radius: 50%; filter: blur(2px); animation: zp-float 9s ease-in-out infinite; }
.auth-orbs span:nth-child(1) { width: 120px; height: 120px; right: 12%; bottom: 22%; background: radial-gradient(circle at 30% 30%, #67e8f9, #4f46e5); opacity: .55; }
.auth-orbs span:nth-child(2) { width: 70px; height: 70px; right: 34%; top: 18%; background: radial-gradient(circle at 30% 30%, #f9a8d4, #7c3aed); opacity: .6; animation-delay: -3s; }
.auth-orbs span:nth-child(3) { width: 40px; height: 40px; left: 18%; top: 42%; background: radial-gradient(circle at 30% 30%, #fde68a, #ec4899); opacity: .55; animation-delay: -6s; }
@keyframes zp-float { 50% { transform: translateY(-18px); } }
@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-hero { padding: 1.6rem 1.4rem; min-height: auto; }
    .auth-hero .auth-points, .auth-hero p, .auth-orbs, .auth-hero-foot { display: none; }
    .auth-hero h1 { font-size: 1.5rem; margin: .8rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .zp-sidebar, .zp-main, .zp-sub, .zp-sub .zp-link, .zp-caret, .card-link, .auth-orbs span, .zp-pulse { transition: none !important; animation: none !important; }
}
@media print {
    .zp-sidebar, .zp-backdrop, .zp-topbar, .zp-footer { display: none !important; }
    .zp-main { margin: 0 !important; }
    body.zp-app { background: #fff; }
}