/* ============================================================================
   CephOps design system — implements docs/DESIGN.md on top of MudBlazor.
   Visual direction: modern minimalist SaaS (Linear / Vercel feel). Gray base,
   flat surfaces layered by tone (no gradients, no drop shadows), purple accent.
   ============================================================================ */

:root {
    /* Backgrounds */
    --ceph-bg: #e2e2e7;
    --ceph-sidebar: #d8d8de;
    --ceph-panel: #ebebf0;
    --ceph-table-head: #e4e4ea;
    --ceph-input-bg: #ffffff;

    /* Borders */
    --ceph-border: #d4d4dc;
    --ceph-border-sidebar: #ccccd4;
    --ceph-divider: #e0e0e8;

    /* Text */
    --ceph-text: #0f0f12;
    --ceph-text-body: #1a1a22;
    --ceph-text-secondary: #787888;
    --ceph-text-muted: #a8a8b8;
    --ceph-text-vmuted: #b0b0c0;
    --ceph-placeholder: #c4c4d0;

    /* Brand */
    --ceph-purple: #6d28d9;
    --ceph-purple-light: #a78bfa;
    --ceph-purple-tint: #ede9fe;
    --ceph-purple-border: #ddd6fe;
    --ceph-black: #0f0f12;

    /* Status */
    --ceph-green: #22c55e;
    --ceph-green-tint: #f0fdf6;
    --ceph-amber: #f59e0b;
    --ceph-amber-tint: #fffbeb;
    --ceph-red: #ef4444;
    --ceph-red-tint: #fef2f2;

    /* Shape */
    --ceph-radius-card: 10px;
    --ceph-radius-control: 8px;
    --ceph-radius-nav: 7px;

    /* Native, characterful-but-fast system stack (per DESIGN.md) */
    --ceph-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mud-typography-default-family: var(--ceph-font);
}

/* ---- Base canvas & typography ------------------------------------------- */
html, body {
    background-color: var(--ceph-bg);
    font-family: var(--ceph-font);
    color: var(--ceph-text-body);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

.mud-typography,
.mud-input,
.mud-button-root {
    font-family: var(--ceph-font);
}

/* Page / section titles */
h1, .mud-typography-h4 { font-size: 17px; font-weight: 500; color: var(--ceph-text); }
.mud-typography-h5, .mud-typography-h6 { font-weight: 500; color: var(--ceph-text); }
.mud-typography-subtitle1 { font-size: 13px; color: var(--ceph-text-secondary); }
.mud-typography-body2 { font-size: 13px; color: var(--ceph-text-body); }
.mud-typography-caption { color: var(--ceph-text-secondary); }

/* ---- Topbar (MudAppBar) ------------------------------------------------- */
.mud-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--ceph-border);
    background-color: var(--ceph-bg);
}
.mud-appbar .mud-toolbar { min-height: 50px; height: 50px; }

/* ---- Sidebar (MudDrawer) ------------------------------------------------ */
.mud-drawer {
    box-shadow: none !important;
    border-right: 1px solid var(--ceph-border-sidebar);
    background-color: var(--ceph-sidebar);
}

/* ---- Brand block (top of sidebar) --------------------------------------- */
.ceph-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px 11px;
}
.ceph-brand img { height: 26px; width: 26px; }
.ceph-brand .ceph-wordmark { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ceph-brand .ceph-wordmark .ops { color: var(--ceph-text-secondary); }

/* Make the drawer a flex column so the AI block can pin to the bottom */
.mud-drawer .mud-drawer-content { display: flex; flex-direction: column; }
.ceph-nav { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ceph-nav-top { flex: 1 1 auto; overflow-y: auto; }

/* ---- Navigation --------------------------------------------------------- */
.mud-nav-group .mud-nav-link,
.mud-nav-link {
    border-radius: var(--ceph-radius-nav);
    margin: 1px 8px;
    padding: 7px 8px;
    min-height: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ceph-text-secondary);
}
.mud-nav-link:hover { background-color: rgba(15, 15, 18, 0.04); }
.mud-nav-link .mud-nav-link-icon { color: var(--ceph-text-secondary); min-width: 30px; }

/* Active nav item: near-black pill, purple icon */
.mud-nav-link.active,
.mud-nav-link.mud-nav-link-active {
    background-color: var(--ceph-black) !important;
    color: #ffffff !important;
}
.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--ceph-purple-light) !important; }

/* Section headers in the nav */
.ceph-nav-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ceph-text-vmuted);
    font-weight: 600;
    padding: 12px 16px 4px;
}

/* AI "Ask anything" pinned block */
.ceph-ai-block {
    margin: 8px 12px 12px;
    padding: 11px 12px;
    border-radius: 9px;
    background-color: var(--ceph-purple-tint);
    border: 1px solid var(--ceph-purple-border);
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.ceph-ai-block .ceph-ai-title { color: var(--ceph-purple); font-weight: 600; font-size: 13px; }
.ceph-ai-block .ceph-ai-sub { color: var(--ceph-purple-light); font-size: 11px; }

/* ---- Surfaces: flat, bordered (no shadows) ------------------------------ */
.mud-paper:not(.mud-popover):not(.mud-menu-popover),
.mud-card {
    box-shadow: none !important;
    background-color: var(--ceph-panel);
    border: 1px solid var(--ceph-border);
    border-radius: var(--ceph-radius-card);
}

/* ---- Stat cards --------------------------------------------------------- */
.ceph-stat {
    background-color: var(--ceph-panel);
    border: 1px solid var(--ceph-border);
    border-radius: var(--ceph-radius-card);
    padding: 13px 14px;
}
.ceph-stat .ceph-stat-label {
    font-size: 11px; font-weight: 500; color: var(--ceph-text-secondary);
    text-transform: none; letter-spacing: 0;
}
.ceph-stat .ceph-stat-value { font-size: 22px; font-weight: 500; color: var(--ceph-text); line-height: 1.3; }
.ceph-stat .ceph-stat-delta { font-size: 11px; }

.ceph-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.ceph-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* "Needs attention" emphasis card: near-black with purple value */
.ceph-stat--attention { background-color: var(--ceph-black); border-color: var(--ceph-black); }
.ceph-stat--attention .ceph-stat-label { color: rgba(255,255,255,0.6); }
.ceph-stat--attention .ceph-stat-value { color: var(--ceph-purple-light); }

/* ---- Buttons ------------------------------------------------------------ */
.mud-button-root { border-radius: var(--ceph-radius-control); text-transform: none; font-weight: 500; }
.mud-button-filled.mud-button-filled-primary { background-color: var(--ceph-purple); }

/* ---- Inputs ------------------------------------------------------------- */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--ceph-border); }
.mud-input-control input::placeholder { color: var(--ceph-placeholder); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--ceph-purple) !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1);
}

/* ---- Status dot --------------------------------------------------------- */
.ceph-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ceph-dot--green { background-color: var(--ceph-green); }
.ceph-dot--amber { background-color: var(--ceph-amber); }
.ceph-dot--red { background-color: var(--ceph-red); }

/* ---- Content area padding ---------------------------------------------- */
.ceph-content { padding: 22px; }

/* ---- Auth / sign-in pages ---------------------------------------------- */
.ceph-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ceph-bg);
    padding: 24px;
}
.ceph-auth-card {
    background-color: var(--ceph-panel);
    border: 1px solid var(--ceph-border);
    border-radius: 14px;
    max-width: 400px;
    width: 100%;
    padding: 40px 36px;
}
.ceph-auth-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.ceph-auth-logo img { height: 40px; }
.ceph-auth-title { font-size: 17px; font-weight: 500; color: var(--ceph-text); text-align: center; margin: 0; }
.ceph-auth-sub { font-size: 13px; color: var(--ceph-text-secondary); text-align: center; margin: 4px 0 22px; }

.ceph-field { margin-bottom: 14px; }
.ceph-label { display: block; font-size: 12px; font-weight: 500; color: #555568; margin-bottom: 6px; }
.ceph-input {
    width: 100%;
    background-color: var(--ceph-input-bg);
    border: 1px solid var(--ceph-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ceph-text);
    font-family: var(--ceph-font);
    box-sizing: border-box;
}
.ceph-input::placeholder { color: var(--ceph-placeholder); }
.ceph-input:focus {
    outline: none;
    border-color: var(--ceph-purple);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1);
}

.ceph-forgot-row { display: flex; justify-content: flex-end; margin: -4px 0 14px; }
.ceph-link { color: var(--ceph-purple); font-size: 12px; text-decoration: none; }
.ceph-link:hover { text-decoration: underline; }

.ceph-btn-primary {
    width: 100%;
    background-color: var(--ceph-purple);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.ceph-btn-primary:hover { background-color: #5b21b6; }
.ceph-btn-ghost {
    width: 100%;
    background-color: #ffffff;
    color: #555568;
    border: 1px solid var(--ceph-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ceph-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }

.ceph-auth-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0; color: var(--ceph-text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.ceph-auth-divider::before, .ceph-auth-divider::after {
    content: ""; flex: 1; height: 1px; background-color: var(--ceph-divider);
}
.ceph-auth-footer { text-align: center; font-size: 11px; color: var(--ceph-text-muted); margin-top: 20px; }
.ceph-auth-error { color: var(--ceph-red); font-size: 12px; margin-bottom: 12px; text-align: center; }