/* ============================================================
   Console admin login — Salesforce Lightning Design System palette.
   Same split-screen structure as before (dark brand panel with live
   stats on the left, a focused sign-in card on the right) — this is
   a genuinely distinctive, already-built feature worth keeping, not
   something to strip down to a plain centered box just because real
   Salesforce's own login page is simpler. Recolored throughout to
   the same tokens used everywhere else in this redesign: brand blue
   #0176D3, and Salesforce's own documented dark-navy brand tone
   #032D60 for the left panel instead of a generic dark gray.
   ============================================================ */

:root {
    --cc-brand: #0176D3;
    --cc-brand-dark: #014486;
    --cc-navy: #032D60;
    --cc-navy-deep: #021D3D;
    --cc-success: #2E844A;
    --cc-error: #BA0517;
    --cc-error-bg: #FDF1F0;
    --cc-border: #DDDBDA;
    --cc-text-muted: #706E6B;
}

* { box-sizing: border-box; }

.cc-login-body {
    margin: 0;
    font-family: 'Maven Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: #F3F2F2;
    min-height: 100vh;
}

.cc-split-wrap {
    display: flex;
    min-height: 100vh;
}

/* ---------------- Left panel — brand / live stats ---------------- */
.cc-split-left {
    flex: 1 1 58%;
    background: linear-gradient(160deg, var(--cc-navy) 0%, var(--cc-navy-deep) 100%);
    color: #fff;
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cc-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 2.25rem;
    left: 3.5rem;
    right: 3.5rem;
}
.cc-brand-identity { display: flex; align-items: center; gap: 0.85rem; }
.cc-brand-badge {
    width: 44px; height: 44px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cc-brand-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
}
.cc-brand-name { font-size: 1.05rem; font-weight: 700; }

.cc-clock { text-align: right; font-variant-numeric: tabular-nums; }
#ccClockTime { font-size: 1.1rem; font-weight: 700; color: #fff; }
.cc-clock__date { font-size: 0.75rem; color: rgba(255,255,255,0.55); }

.cc-sys-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    width: fit-content;
    margin-bottom: 1.75rem;
}
.cc-sys-status__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4BC076;
    box-shadow: 0 0 0 3px rgba(75,192,118,0.25);
    display: inline-block;
}

.cc-headline {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.cc-headline .accent { color: #6BB6FF; } /* a lighter tint of the brand blue, for contrast against the dark navy panel */
.cc-headline-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.cc-live-stats { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.5rem; padding: 1.25rem; }
.cc-live-stats__label {
    display: flex; justify-content: space-between;
    font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.9rem;
    text-transform: uppercase;
}
.cc-live-stats__label span:last-child { color: #4BC076; }
.cc-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.cc-live-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.4rem;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}
.cc-live-card .icon {
    width: 34px; height: 34px; border-radius: 0.4rem;
    background: rgba(1, 118, 211, 0.25);
    color: #6BB6FF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cc-live-card .lbl { font-size: 0.68rem; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.cc-live-card .val { font-size: 1.15rem; font-weight: 700; }
.live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4BC076;
    position: absolute; top: 0.6rem; right: 0.6rem;
    box-shadow: 0 0 0 2px rgba(75,192,118,0.3);
}

/* ---------------- Right panel — sign-in card ---------------- */
.cc-split-right {
    flex: 1 1 42%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}
.cc-auth-card { width: 100%; max-width: 400px; }

.cc-auth-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.cc-auth-icon {
    width: 46px; height: 46px; border-radius: 0.5rem;
    background: var(--cc-brand);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    position: relative;
    flex-shrink: 0;
}
.cc-auth-icon .live-dot { top: -2px; right: -2px; box-shadow: 0 0 0 2px #fff; }
.cc-auth-title { font-size: 1.3rem; font-weight: 700; color: #181818; margin: 0; }
.cc-auth-subtitle { font-size: 0.82rem; color: var(--cc-text-muted); }

.cc-auth-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.cc-badge-soft {
    background: #F0F8FF;
    color: var(--cc-brand);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
}

.cc-alert {
    border-radius: 0.4rem;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.cc-alert--error { background: var(--cc-error-bg); color: var(--cc-error); border: 1px solid rgba(186,5,23,0.2); }

.cc-form-group { margin-bottom: 1.1rem; }
.cc-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #181818;
    margin-bottom: 0.35rem;
}
.cc-form-group input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--cc-border);
    border-radius: 0.35rem;
    font-size: 0.92rem;
    font-family: inherit;
    color: #181818;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-form-group input:focus {
    outline: none;
    border-color: var(--cc-brand);
    box-shadow: 0 0 0 3px rgba(1,118,211,0.15);
}

.cc-password-field { position: relative; }
.cc-password-field input { padding-right: 2.6rem; }
.cc-password-toggle {
    position: absolute;
    right: 0.6rem; top: 50%; transform: translateY(-50%);
    background: none; border: none;
    color: var(--cc-text-muted);
    cursor: pointer;
    padding: 0.3rem;
}
.cc-password-toggle:hover { color: var(--cc-brand); }

.cc-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 0.35rem;
    border: none;
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    transition: background-color .15s ease;
}
.cc-btn--primary { background: var(--cc-brand); color: #fff; }
.cc-btn--primary:hover { background: var(--cc-brand-dark); }
.cc-btn--primary:disabled { opacity: 0.7; cursor: not-allowed; }
.cc-btn--block-lg { width: 100%; padding: 0.85rem 1.2rem; margin-top: 0.3rem; }

.cc-restricted-box {
    margin-top: 1.5rem;
    background: #F3F2F2;
    border-radius: 0.4rem;
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
    color: var(--cc-text-muted);
    line-height: 1.5;
}
.cc-restricted-box__title { font-weight: 700; color: #181818; margin-bottom: 0.25rem; }

.fa-spacer-r { margin-right: 0.5rem; }
.fa-spacer-r-sm { margin-right: 0.3rem; }
.fa-spacer-l { margin-left: 0.5rem; }

@media (max-width: 900px) {
    .cc-split-wrap { flex-direction: column; }
    .cc-split-left { flex: none; padding: 6.5rem 1.75rem 2.5rem; }
    .cc-brand-row { left: 1.75rem; right: 1.75rem; top: 1.5rem; }
    .cc-headline { font-size: 1.8rem; }
    .cc-live-grid { grid-template-columns: 1fr; }
    .cc-split-right { padding: 2rem 1.75rem; }
}