/* =====================================================================
   nChurch ERP - application stylesheet
   Plain CSS3 layered over Bootstrap 5. No build step, no Node, no Vite:
   this file is served straight from /public so it works on XAMPP, cPanel,
   nginx and Apache exactly as committed.
   ===================================================================== */

:root {
    --nc-primary: #4F46E5;
    --nc-primary-600: #4338CA;
    --nc-primary-100: #E0E7FF;
    --nc-secondary: #0F172A;
    --nc-accent: #F59E0B;

    --nc-bg: #F4F6FB;
    --nc-surface: #FFFFFF;
    --nc-surface-2: #FAFBFE;
    --nc-border: #E5E9F2;
    --nc-text: #0F172A;
    --nc-text-muted: #64748B;

    --nc-sidebar-bg: #0F172A;
    --nc-sidebar-text: #C7D2E4;
    --nc-sidebar-active: rgba(255, 255, 255, .08);
    --nc-sidebar-width: 268px;
    --nc-topbar-height: 64px;

    --nc-radius: 14px;
    --nc-radius-sm: 9px;
    --nc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --nc-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    --nc-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
    --nc-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --nc-bg: #0B1120;
    --nc-surface: #121A2B;
    --nc-surface-2: #172033;
    --nc-border: #233047;
    --nc-text: #E8EDF7;
    --nc-text-muted: #93A1B8;
    --nc-primary-100: #1E2A4A;
    --nc-sidebar-bg: #0A0F1C;
    --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --nc-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    --nc-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

* { scrollbar-width: thin; }

body {
    font-family: var(--nc-font);
    background: var(--nc-bg);
    color: var(--nc-text);
    font-size: .935rem;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------------------------------------------------------- sidebar ---- */
.nc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nc-sidebar-width);
    background: var(--nc-sidebar-bg);
    color: var(--nc-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .22s ease;
}

.nc-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.15rem;
    min-height: var(--nc-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.nc-brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--nc-primary), #7C3AED);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .4);
}

.nc-brand-text { line-height: 1.2; overflow: hidden; }
.nc-brand-name { color: #fff; font-weight: 650; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-brand-sub { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; opacity: .62; }

.nc-nav { flex: 1 1 auto; overflow-y: auto; padding: .85rem .7rem 1.5rem; }

.nc-nav-group {
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .45;
    padding: 1rem .6rem .4rem;
    font-weight: 650;
}

.nc-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: var(--nc-radius-sm);
    color: var(--nc-sidebar-text);
    font-size: .875rem;
    font-weight: 450;
    margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}

.nc-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; opacity: .85; }
.nc-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.nc-nav-link.active {
    background: linear-gradient(90deg, var(--nc-primary), rgba(79, 70, 229, .55));
    color: #fff;
    box-shadow: 0 3px 10px rgba(79, 70, 229, .32);
}
.nc-nav-link.active i { opacity: 1; }

.nc-nav-badge {
    margin-left: auto;
    font-size: .66rem;
    background: rgba(255, 255, 255, .12);
    padding: .12rem .42rem;
    border-radius: 20px;
    font-weight: 600;
}

.nc-nav-link.soon { opacity: .55; cursor: default; }
.nc-nav-link.soon:hover { background: transparent; color: var(--nc-sidebar-text); }

.nc-sidebar-footer {
    padding: .8rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .7rem;
    opacity: .55;
}

/* ----------------------------------------------------------- topbar ---- */
.nc-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--nc-topbar-height);
    background: var(--nc-surface);
    border-bottom: 1px solid var(--nc-border);
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 0 1.25rem;
    box-shadow: var(--nc-shadow-sm);
}

.nc-main {
    margin-left: var(--nc-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nc-content { padding: 1.4rem 1.5rem 3rem; flex: 1 1 auto; }

.nc-page-head { margin-bottom: 1.25rem; }
.nc-page-title { font-size: 1.35rem; font-weight: 680; letter-spacing: -.01em; margin: 0; }
.nc-page-sub { color: var(--nc-text-muted); font-size: .85rem; margin-top: .18rem; }

.nc-icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-text-muted);
    transition: all .15s ease;
}
.nc-icon-btn:hover { color: var(--nc-primary); border-color: var(--nc-primary); background: var(--nc-primary-100); }

.nc-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nc-primary), #7C3AED);
    color: #fff;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 650;
    flex: 0 0 34px;
}

.nc-search { max-width: 340px; }
.nc-search .form-control { border-radius: 10px; background: var(--nc-surface-2); }

/* ------------------------------------------------------------ cards ---- */
.nc-card {
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow-sm);
}

/*
 * .nc-card-header is an alias, not a typo.
 *
 * The class defined here has always been .nc-card-head, but 11 earlier views
 * (30 uses) were written against .nc-card-header, so those headers rendered with
 * no padding and no divider. Aliasing is cheaper and safer than editing 30 call
 * sites, and both spellings now mean the same thing.
 */
.nc-card-head,
.nc-card-header {
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--nc-border);
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.nc-card-title { font-size: .95rem; font-weight: 640; margin: 0; }
.nc-card-sub { font-size: .76rem; color: var(--nc-text-muted); }
.nc-card-body { padding: 1.15rem; }

.nc-stat {
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding: 1.05rem 1.15rem;
    box-shadow: var(--nc-shadow-sm);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.nc-stat::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--nc-stat-color, var(--nc-primary));
}

.nc-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: var(--nc-text-muted);
    font-weight: 620;
}

.nc-stat-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: .2rem; }
.nc-stat-meta { font-size: .76rem; color: var(--nc-text-muted); margin-top: .15rem; }

.nc-stat-icon {
    position: absolute;
    top: .95rem; right: 1rem;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: color-mix(in srgb, var(--nc-stat-color, var(--nc-primary)) 14%, transparent);
    color: var(--nc-stat-color, var(--nc-primary));
}

/* ----------------------------------------------------------- tables ---- */
.nc-table { margin: 0; }
.nc-table > thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--nc-text-muted);
    font-weight: 650;
    border-bottom: 1px solid var(--nc-border);
    padding: .7rem .9rem;
    white-space: nowrap;
    background: var(--nc-surface-2);
}
.nc-table > tbody td { padding: .72rem .9rem; vertical-align: middle; border-color: var(--nc-border); }
.nc-table > tbody tr:hover { background: var(--nc-surface-2); }

.nc-row-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* ------------------------------------------------------------- bits ---- */
.nc-empty { text-align: center; padding: 3rem 1rem; color: var(--nc-text-muted); }
.nc-empty i { font-size: 2.6rem; opacity: .28; display: block; margin-bottom: .7rem; }
.nc-empty-title { font-weight: 620; color: var(--nc-text); margin-bottom: .25rem; }

.nc-badge { font-size: .71rem; font-weight: 600; padding: .25rem .55rem; border-radius: 6px; }

.nc-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 20px;
    font-size: .72rem;
    background: var(--nc-primary-100);
    color: var(--nc-primary-600);
    font-weight: 550;
}

[data-bs-theme="dark"] .nc-chip { color: #C7D2FE; }

.nc-progress-track { height: 6px; border-radius: 20px; background: var(--nc-border); overflow: hidden; }
.nc-progress-bar { height: 100%; border-radius: 20px; background: var(--nc-primary); }

.nc-avatar-lg { width: 62px; height: 62px; border-radius: 16px; font-size: 1.25rem; }
.nc-avatar-sm { width: 30px; height: 30px; font-size: .68rem; flex: 0 0 30px; }

.nc-kv { display: grid; grid-template-columns: 148px 1fr; gap: .5rem .9rem; font-size: .86rem; }
.nc-kv dt { color: var(--nc-text-muted); font-weight: 500; }
.nc-kv dd { margin: 0; font-weight: 500; }

.nc-timeline { list-style: none; padding: 0; margin: 0; }
.nc-timeline li { position: relative; padding: 0 0 1.05rem 1.55rem; border-left: 2px solid var(--nc-border); }
.nc-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.nc-timeline li::before {
    content: ""; position: absolute; left: -6px; top: .3rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--nc-primary);
    box-shadow: 0 0 0 3px var(--nc-surface);
}
.nc-timeline-title { font-weight: 580; font-size: .855rem; }
.nc-timeline-meta { font-size: .74rem; color: var(--nc-text-muted); }

/* ------------------------------------------------------------ forms ---- */
.form-label { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.form-text { font-size: .74rem; }

.form-control, .form-select {
    border-radius: var(--nc-radius-sm);
    border-color: var(--nc-border);
    font-size: .88rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--nc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc-primary) 15%, transparent);
}

.nc-form-section {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 680;
    color: var(--nc-text-muted);
    padding-bottom: .45rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--nc-border);
}

.btn { border-radius: var(--nc-radius-sm); font-size: .86rem; font-weight: 550; }
.btn-primary { background: var(--nc-primary); border-color: var(--nc-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--nc-primary-600); border-color: var(--nc-primary-600); }
.btn-sm { font-size: .79rem; }

/* ----------------------------------------------------------- alerts ---- */
.nc-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080; min-width: 290px; max-width: 380px; }

/* ------------------------------------------------------ auth pages ---- */
.nc-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1000px 500px at 12% -10%, rgba(79, 70, 229, .18), transparent 60%),
        radial-gradient(800px 420px at 100% 100%, rgba(245, 158, 11, .13), transparent 55%),
        var(--nc-bg);
}

.nc-auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: 18px;
    box-shadow: var(--nc-shadow-lg);
    padding: 2rem;
}

.nc-auth-wide { max-width: 760px; }
.nc-auth-title { font-size: 1.35rem; font-weight: 690; letter-spacing: -.015em; }
.nc-auth-sub { color: var(--nc-text-muted); font-size: .87rem; }

.nc-auth-mark {
    width: 52px; height: 52px; border-radius: 15px;
    background: linear-gradient(135deg, var(--nc-primary), #7C3AED);
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 1.1rem;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .35);
}

.nc-verse {
    border-left: 3px solid var(--nc-accent);
    padding-left: .9rem;
    font-style: italic;
    color: var(--nc-text-muted);
    font-size: .84rem;
}

/* --------------------------------------------------------- skeleton ---- */
.nc-skeleton {
    background: linear-gradient(90deg, var(--nc-border) 25%, var(--nc-surface-2) 37%, var(--nc-border) 63%);
    background-size: 400% 100%;
    animation: nc-shimmer 1.3s ease infinite;
    border-radius: 8px;
}
@keyframes nc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------------------------------------------- responsive --- */
.nc-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1035;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.nc-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 991.98px) {
    .nc-sidebar { transform: translateX(-100%); box-shadow: var(--nc-shadow-lg); }
    .nc-sidebar.open { transform: translateX(0); }
    .nc-main { margin-left: 0; }
    .nc-content { padding: 1.1rem 1rem 2.5rem; }
    .nc-kv { grid-template-columns: 1fr; gap: .15rem .5rem; }
    .nc-kv dd { margin-bottom: .6rem; }
}

@media (max-width: 575.98px) {
    .nc-page-title { font-size: 1.15rem; }
    .nc-stat-value { font-size: 1.4rem; }
    .nc-toast-stack { left: 1rem; right: 1rem; max-width: none; }
}

@media print {
    .nc-sidebar, .nc-topbar, .nc-no-print { display: none !important; }
    .nc-main { margin-left: 0; }
    body { background: #fff; }
    .nc-card { box-shadow: none; border-color: #ddd; }
}

/* ---------------------------------------------------------- brand logo --- */
.nc-brand-logo {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09);
}

/* A tenant's own logo on the dark sidebar: white padded chip so dark-on-
   transparent artwork never disappears into the navy. */
.nc-brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    flex: 0 0 auto;
    padding: 3px 5px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09);
}

.nc-brand-logo-chip img {
    max-height: 26px;
    max-width: 52px;
    width: auto;
    display: block;
}

/* The brand mark uses white "nChurch" text + gold "ERP" on transparency and
   was designed for dark surfaces (sidebar). On light surfaces (auth card,
   footer) it must ride on a navy chip, otherwise the white half disappears. */
.nc-auth-logo {
    height: 54px;
    width: auto;
    border-radius: 12px;
    padding: 9px 13px;
    background: linear-gradient(160deg, #0F172A, #1E2B47);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .28);
}

/* The platform mark on the light topbar: white-on-navy chip, same treatment
   as the footer logo so the white half never disappears on light surfaces. */
.nc-topbar-logo {
    height: 28px;
    width: auto;
    flex: 0 0 auto;
    border-radius: 8px;
    padding: 4px 8px;
    background: linear-gradient(160deg, #0F172A, #1E2B47);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
}

/* --------------------------------------------------------------- footer --- */
.nc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding: .6rem 1.25rem;
    border-top: 1px solid var(--nc-border);
    background: var(--nc-surface);
    font-size: .74rem;
    color: var(--nc-text-muted);
}

.nc-footer-brand { display: flex; align-items: center; gap: .55rem; }
.nc-footer-logo  {
    height: 22px; width: auto; border-radius: 6px;
    padding: 3px 6px; background: #0F172A;
}
.nc-footer-ver   { font-weight: 600; letter-spacing: .02em; }
.nc-footer-copy  { text-align: center; }
.nc-footer-phase { opacity: .8; letter-spacing: .04em; }

@media (max-width: 768px) {
    .nc-footer { justify-content: center; text-align: center; }
}

/* ======================================================== sign-in experience ---
   Premium split-screen login: navy brand rail (logo-safe dark surface) on the
   left, elevated sign-in card on the right. Collapses to a compact banner on
   small screens. The .nc-auth-* classes above remain for the 2FA challenge. */
.nc-login {
    display: grid;
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    min-height: 100vh;
}

/* --- brand rail --- */
.nc-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: #E2E8F0;
    background:
        radial-gradient(900px 480px at -10% -12%, rgba(79, 70, 229, .45), transparent 60%),
        radial-gradient(760px 520px at 112% 108%, rgba(245, 158, 11, .22), transparent 55%),
        linear-gradient(158deg, #0B1220 0%, #0F172A 42%, #16213C 100%);
}
.nc-login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .026) 26px 27px);
    pointer-events: none;
}
.nc-login-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    width: 100%;
    max-width: 560px;
    margin: auto 0;
}
.nc-login-brand-top { display: flex; align-items: center; gap: .9rem; }
.nc-login-logo {
    height: 46px; width: auto; border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .4);
}

.nc-login-badge {
    display: inline-flex; align-items: center;
    padding: .4rem .95rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600; letter-spacing: .015em;
    color: #FDE68A;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .06);
}
.nc-login-title {
    color: #FFFFFF;
    font-size: clamp(1.9rem, 2.35vw, 2.45rem);
    font-weight: 750;
    letter-spacing: -.022em;
    line-height: 1.14;
    margin: 0 0 .65rem;
}
.nc-gold {
    background: linear-gradient(92deg, #FCD34D 0%, #F59E0B 55%, #FBBF24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nc-login-sub { color: #B9C4D8; font-size: .95rem; line-height: 1.65; max-width: 46ch; margin: 0; }


.nc-login-facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0 1.6rem;
    justify-content: start;
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding-top: 1.15rem;
}
.nc-login-fact b { display: block; color: #fff; font-size: 1.12rem; font-weight: 730; }
.nc-login-fact span { color: #94A3B8; font-size: .74rem; letter-spacing: .02em; }

.nc-login-verse {
    margin: auto 0 0;
    border-left: 3px solid var(--nc-accent);
    padding-left: .9rem;
    font-style: italic;
    color: #CBD5E1;
    font-size: .85rem;
    line-height: 1.6;
}
.nc-login-verse span { display: block; font-style: normal; font-size: .74rem; color: #94A3B8; margin-top: .2rem; }

/* --- sign-in side --- */
.nc-login-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 2rem;
    background:
        radial-gradient(700px 340px at 108% -8%, rgba(79, 70, 229, .10), transparent 60%),
        radial-gradient(620px 380px at -12% 112%, rgba(245, 158, 11, .09), transparent 58%),
        var(--nc-bg);
}
.nc-login-card {
    width: 100%;
    max-width: 432px;
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
    padding: 2.1rem 2.1rem 1.7rem;
    animation: nc-login-rise .4s cubic-bezier(.2, .7, .3, 1) both;
}
.nc-login-trust {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.15rem;
    color: var(--nc-text-muted);
    font-size: .72rem;
}
.nc-login-trust i { color: var(--nc-primary); margin-right: .2rem; }
.nc-login-foot { margin-top: 1.1rem; color: var(--nc-text-muted); font-size: .76rem; letter-spacing: .01em; }


@keyframes nc-login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nc-login-card { animation: none; }
}

/* --- small screens: brand rail becomes a compact banner --- */
@media (max-width: 991.98px) {
    .nc-login { grid-template-columns: 1fr; }
    .nc-login-brand { padding: 1.3rem 1.25rem 1.45rem; }
    .nc-login-brand-inner { gap: 1rem; max-width: none; margin: 0; }
    .nc-login-title { font-size: 1.34rem; }
    .nc-login-sub, .nc-orbit, .nc-login-facts, .nc-login-verse { display: none; }
    .nc-login-main { justify-content: flex-start; padding-top: 1.75rem; }
    .nc-login-card { max-width: 480px; }
}
@media (max-width: 575.98px) {
    .nc-login-card { padding: 1.6rem 1.25rem 1.35rem; }
    .nc-login-facts { gap: 1.25rem; }
}


/* --------------------------------------- orbiting ministry constellation ---
   Nine ministry chips ride one elliptical path around the core. The inline
   ticker (vanilla JS, resources/views/auth/login.blade.php) advances phases at
   a fixed angular speed over equal arc spacing, so spacing is constant and no
   two chips ever collide; JS also scales/fades each chip with depth and flips
   z-index so chips pass behind the core at the top of the orbit and in front
   at the bottom. CSS keeps the frame: glows, dashed elliptical guides, the
   breathing pulse, the frosted chips and their bob. */
.nc-orbit {
    --orbit: clamp(280px, 34vh, 380px);
    position: relative;
    width: var(--orbit);
    height: var(--orbit);
    margin: .15rem auto;
    flex: 0 0 auto;
}
.nc-orbit-glow {
    position: absolute; inset: 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, rgba(79, 70, 229, .34), transparent 55%),
        radial-gradient(circle at 68% 74%, rgba(245, 158, 11, .18), transparent 50%);
    filter: blur(6px);
}
.nc-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.nc-orbit-ring.o {
    left: 3%; top: 10%;
    width: 94%; height: 80%;
    border: 1px dashed rgba(255, 255, 255, .17);
}
.nc-orbit-ring.i {
    left: 9.5%; top: 18%;
    width: 81%; height: 64%;
    border: 1px dashed rgba(251, 191, 36, .22);
    transform: rotate(-13deg);
}
.nc-orbit-pulse {
    position: absolute; left: 50%; top: 50%;
    width: 27%; aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(251, 191, 36, .55);
    animation: nc-orbit-pulse 3.8s ease-out infinite;
    pointer-events: none;
}
.nc-orbit-pulse.p2 { animation-delay: 1.9s; }
.nc-orbit-core {
    position: absolute; left: 50%; top: 50%;
    width: 27%; aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .045));
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(4px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 18px 40px rgba(0, 0, 0, .35),
        0 0 52px rgba(79, 70, 229, .38);
    z-index: 2;
}
.nc-orbit-core img {
    height: calc(var(--orbit) * .088);
    width: auto;
    border-radius: 6px;
}

.nc-orbit-chip {
    position: absolute; left: 50%; top: 50%;
    translate: -50% -50%;
    display: inline-flex; align-items: center;
    white-space: nowrap;
    padding: .36rem .78rem;
    border-radius: 999px;
    background: rgba(13, 20, 36, .78);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #E4EAF4;
    font-size: .74rem;
    letter-spacing: .01em;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .09);
    will-change: transform;
}
.nc-orbit-chip i { color: #FBBF24; font-size: .8rem; }
.nc-orbit-float {
    display: inline-flex; align-items: center; gap: .4rem;
    animation: nc-orbit-bob var(--bob, 5s) ease-in-out infinite;
}

@keyframes nc-orbit-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4.5px); } }
@keyframes nc-orbit-pulse {
    0%   { opacity: .55; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.5); }
}

/* shorter viewports: shrink the constellation, tighten the rail */
@media (max-height: 860px) and (min-width: 992px) {
    .nc-login-brand-inner { gap: 1rem; }
    .nc-orbit { --orbit: clamp(250px, 30vh, 300px); }
}

@media (prefers-reduced-motion: reduce) {
    .nc-orbit-float, .nc-orbit-pulse { animation: none !important; }
}

/* wide variant of the sign-in card, used by the church registration form */
.nc-login-card-wide { max-width: 540px; }