/* Agent Dashboard's own visual identity - deliberately distinct from the Web/Admin
   portals' brand-gradient chrome, per the explicit "standalone app, not folded into
   Admin" decision. Leans into a darker "mission control" read (near-black ground, a
   status dot that actually glows) while keeping the same navy/amber brand DNA via the
   shared M3 tokens, rather than inventing an unrelated palette from scratch. */

body {
    background: #0A0E1A;
}

/* ---------- Auth shell (Login page) ---------- */

.dashboard-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.5rem;
}

.dashboard-auth-shell__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    margin-bottom: 2rem;
}

.dashboard-auth-shell__brand img {
    height: 32px;
}

.dashboard-auth-shell__brand span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.dashboard-auth-shell__body {
    width: 100%;
    max-width: 420px;
}

/* ---------- Dashboard page ---------- */

.dashboard-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.agent-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.agent-tile {
    background: #0F1424;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--m3-shape-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agent-tile__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.agent-tile__header--clickable {
    cursor: pointer;
    border-radius: var(--m3-shape-md);
    margin: -0.25rem;
    padding: 0.25rem;
    transition: background-color 120ms ease;
}

.agent-tile__header--clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}

.agent-tile__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

.agent-tile__name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agent-tile__role {
    color: rgba(226, 232, 240, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-tile--ceo {
    background: linear-gradient(135deg, #1E1B4B, #0F1424);
    border-color: rgba(168, 85, 247, 0.35);
}

.agent-tile--product {
    background: linear-gradient(135deg, #1E3A5F, #0F1424);
    border-color: rgba(56, 189, 248, 0.35);
}

.agent-tile__description {
    color: rgba(226, 232, 240, 0.65);
}

.agent-tile__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agent-tile__status-dot--active {
    background: #22C55E;
    box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.6);
}

.agent-tile__status-dot--paused {
    background: #FBBF24;
    box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.5);
}

.agent-tile__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.75);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.5rem;
}

.agent-tile__summary {
    font-style: italic;
    color: rgba(226, 232, 240, 0.55);
}

.agent-tile__actions {
    display: flex;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.activity-table {
    background: #0F1424;
    border-radius: var(--m3-shape-lg);
    overflow: hidden;
}

.activity-table .mud-table-container {
    overflow-x: auto;
}

/* ---------- Agent detail page ---------- */

.agent-detail__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.agent-detail__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.agent-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.agent-kpi-tile {
    background: #0F1424;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--m3-shape-lg);
    padding: 1.25rem;
    text-align: center;
}

.agent-kpi-tile--success h3 { color: #22C55E; }
.agent-kpi-tile--warning h3 { color: #FBBF24; }
.agent-kpi-tile--error h3 { color: #EF4444; }

.agent-kpi-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ---------- CEO chat page ---------- */

.ceo-chat-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ceo-chat-panel {
    display: flex;
    flex-direction: column;
    height: min(65vh, 600px);
    background: #0F1424;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--m3-shape-lg);
    overflow: hidden;
}

.ceo-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ceo-chat-empty {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.6;
    max-width: 360px;
}

.ceo-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: var(--m3-shape-md);
    white-space: pre-wrap;
    word-break: break-word;
}

.ceo-chat-bubble--user {
    align-self: flex-end;
    background: #A855F7;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.ceo-chat-bubble--assistant {
    align-self: flex-start;
    background: #1E2536;
    color: rgba(226, 232, 240, 0.92);
    border-bottom-left-radius: 4px;
}

.ceo-chat-bubble--typing {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.ceo-chat-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.ceo-chat-input {
    flex: 1 1 auto;
}

/* ---------- Security (2FA setup) page ---------- */

.security-qr svg {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    background: #ffffff;
}

.security-key {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #1E2536;
    letter-spacing: 0.08em;
    word-break: break-all;
}

.security-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.security-recovery-codes code {
    padding: 8px 10px;
    border-radius: 6px;
    background: #1E2536;
    letter-spacing: 0.06em;
    text-align: center;
}