/* =====================================================================
   CobraCore WASM app — navy UI accents  (cobracore-navy.css)
   ---------------------------------------------------------------------
   ADDITIVE, SCOPED layer loaded LAST (after the Telerik swatch + app.css).
   SCOPE (deliberately narrow): only the pre-app screens —
   the login page, and the sign-in / authentication / loading transitions.
   The internal app (top bar, drawer, status bar, grids, content) is
   intentionally left as the original Telerik/white styling.

   To turn this off: remove the <link ... cobracore-navy.css> in
   wwwroot/index.html  (or restore the "- bkup Claude" backups).
   ===================================================================== */

:root {
    --cc-navy:    #0c2340;
    --cc-navy-2:  #14365c;
    --cc-navy-3:  #1c4a7a;
    --cc-blue:    #3a55d9;
    --cc-blue-l:  #6f86ef;
    --cc-on-navy: #dbe6f3;
    --cc-gold:    #f5a623;
}

/* ---------------------------------------------------------------------
   Top menu bar  (.demo-menu-container)
   Intentionally LEFT AS THE ORIGINAL Telerik styling — a navy bar made
   the white menu items' text invisible and the dark icons hard to read.
   (No rules here on purpose.)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Side drawer / navigation   (scoped via .cc-navy-drawer class)
   --------------------------------------------------------------------- */
/*
.cc-navy-drawer.k-drawer,
.cc-navy-drawer .k-drawer-wrapper {
    background: linear-gradient(180deg, var(--cc-navy) 0%, var(--cc-navy-2) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.cc-navy-drawer .k-drawer-items { background: transparent !important; }
.cc-navy-drawer .k-drawer-item { color: var(--cc-on-navy) !important; }
.cc-navy-drawer .k-drawer-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
.cc-navy-drawer .k-drawer-item.k-selected {
    background: rgba(58, 85, 217, 0.28) !important;
    color: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--cc-blue);
}
.cc-navy-drawer .k-drawer-separator {
    background: rgba(255, 255, 255, 0.10) !important;
}
.cc-navy-drawer .k-svg-icon { color: var(--cc-on-navy) !important; }
*/


/* ---------------------------------------------------------------------
   Bottom status bar  (TelerikAppBar  .cobracore-footer)
   --------------------------------------------------------------------- */
/*
.cobracore-footer.k-appbar,
.cobracore-footer {
    background: linear-gradient(90deg, var(--cc-navy) 0%, var(--cc-navy-2) 100%) !important;
    color: var(--cc-on-navy) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.cobracore-footer .k-appbar-section { color: var(--cc-on-navy); }
.cobracore-footer .separator { background: rgba(255, 255, 255, 0.18) !important; }

*/


/* ---------------------------------------------------------------------
   Sign-in / "Signing in..." loading screens  (navy backdrop)
   --------------------------------------------------------------------- */
.cc-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: #0c2340;        /* flat navy — matches the Auth0 page background */
}

/* ---------------------------------------------------------------------
   Authentication transition screens   ("/authentication/{action}")
   Redirecting / Completing sign-in / Signing out / failure states.
   Uses the .cc-loading navy backdrop + a centered glass card.
   --------------------------------------------------------------------- */
/* White card on the navy backdrop — identical to the index.html splash card,
   so every pre-app screen (splash, authorizing, auth states, sign-in) matches. */
.cc-auth-card {
    width: 100%;
    max-width: 400px;           /* matches the Auth0 login card (400 x 540) */
    min-height: 540px;          /* matches the Auth0 login card so states don't jump */
    margin: 0 auto;
    padding: 40px 40px 24px;    /* matches Auth0 card padding (2.85715rem/1.71429rem @ 14px root) */
    background: #ffffff;
    border: 0;                  /* match Auth0 card (no top accent stripe) */
    border-radius: 5px;         /* match Auth0 card */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);  /* match Auth0 card */
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;    /* keep content vertically centered within that height */
}

/* brand (color) logo — same asset & sizing as the index splash */
.cc-auth-logo {
    display: block;
    width: 250px;               /* fixed width so the logo doesn't jump between screens */
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 0.25rem;
}
.cc-auth-card h4 {
    color: #0c2340 !important;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 1.5rem 0 0.4rem;
}
.cc-auth-card.cc-auth-error h4 { color: #c0392b !important; }
.cc-auth-sub {
    color: #6b7a90;
    font-size: 0.95rem;
    margin: 0;
}

/* ring spinner — matches the index.html splash .spinner-border (same colors) */
.cc-spinner {
    width: 96px;
    height: 96px;
    border: .2em solid;
    border-color: #3a55d9 #6f86ef #cbd6ea;
    border-radius: 50%;
    margin-top: 1.75rem;
    animation: cc-spin 0.85s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* "try again" button on failure screens */
.cc-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 8px 22px;
    background: var(--cc-blue);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cc-auth-btn:hover { background: #2f49c0; transform: translateY(-2px); }

.cc-loading-screen-caption {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    color: #0c2340;
}