/* Genzbots Dashboard - Custom Overrides */
body {
    font-family: 'Inter', sans-serif;
}

/* Suppress all browser :focus-visible outlines on non-interactive elements.
   Browsers apply a box outline when keyboard navigation lands on a heading.
   This removes it globally for h1/h2/h3 and display-only divs. */
h1:focus, h1:focus-visible,
h2:focus, h2:focus-visible,
h3:focus, h3:focus-visible,
div:focus, div:focus-visible,
p:focus, p:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.kpi-card {
    min-height: 120px;
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.kpi-label {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.activity-timeline .timeline-dot-success {
    background-color: var(--mud-palette-success) !important;
}

.activity-timeline .timeline-dot-error {
    background-color: var(--mud-palette-error) !important;
}

.activity-timeline .timeline-dot-running {
    background-color: var(--mud-palette-info) !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.error-screenshot {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
}

.status-badge-running {
    animation: pulse 1.5s infinite;
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .kpi-value { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, .mud-typography {
    font-family: 'Inter', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════
   TOP APP BAR
   ═══════════════════════════════════════════════════════════════ */

/* ── Page title in top bar ──────────────────────────────── */
.gzb-page-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #0F172A;
    white-space: nowrap;
    margin-left: 4px;
}

/* ── Icon buttons in the top bar ────────────────────────── */
.gzb-topbar-btn {
    color: #64748B !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 2px;
    transition: background .15s, color .15s;
}

.gzb-topbar-btn:hover {
    color: #1E293B !important;
    background: #F1F5F9 !important;
}

/* ── Avatar + name button in top bar ───────────────────── */
.gzb-avatar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    margin-left: 4px;
}

.gzb-avatar-btn:hover {
    background: #F1F5F9;
}

.gzb-user-avatar {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    cursor: pointer;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(37,99,235,.35);
}

.gzb-avatar-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: -0.01em;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gzb-avatar-caret {
    color: #94A3B8 !important;
    font-size: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   USER PROFILE DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

/* MudMenu popover width */
.gzb-user-menu .mud-menu-popover,
.mud-popover-overflow-y-auto {
    min-width: 240px !important;
}

/* ── Profile card at top of dropdown ───────────────────── */
.gzb-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
}

.gzb-menu-avatar {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37,99,235,.3);
}

.gzb-menu-info {
    min-width: 0;
}

.gzb-menu-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0F172A;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.gzb-menu-email {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 1px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.gzb-menu-role-chip {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
}

/* ── Menu items ─────────────────────────────────────────── */
.gzb-menu-icon {
    color: #64748B !important;
    font-size: 1.1rem !important;
}

.gzb-menu-icon-danger {
    color: #EF4444 !important;
}

.gzb-menu-signout {
    color: #EF4444;
    font-weight: 500;
}

/* ── Dark mode row (inline toggle) ─────────────────────── */
.gzb-menu-darkmode {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: #334155;
    cursor: default;
}

.gzb-menu-darkmode-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR / NAV MENU
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar logo area ──────────────────────────────────── */
.gzb-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    min-height: 60px;
    padding: 0 14px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
    overflow: hidden;
}

.gzb-sidebar-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
}

.gzb-logo-wordmark {
    height: 45px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    max-width: 2000px;
}

.gzb-logo-icon {
    height: 36px;
    width: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Nav container ──────────────────────────────────────── */
.gzb-nav {
    padding: 8px 0;
}

/* ── Section labels ─────────────────────────────────────── */
.gzb-nav-section-label {
    padding: 10px 16px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

/* ── Dividers between sections ──────────────────────────── */
.gzb-nav-divider {
    margin: 6px 12px !important;
    border-color: #E2E8F0 !important;
}

/* ── Nav link items ─────────────────────────────────────── */
.mud-nav-link {
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 7px 10px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    transition: background .12s, color .12s !important;
}

.mud-nav-link:hover {
    background: #F1F5F9 !important;
    color: #1E293B !important;
}

.mud-nav-link.active,
.mud-nav-link-active {
    background: #EFF6FF !important;
    color: #2563EB !important;
    font-weight: 600 !important;
}

.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link-active .mud-nav-link-icon {
    color: #2563EB !important;
}

/* ── Sidebar footer — collapse / expand toggle ──────────── */
.gzb-drawer-footer {
    display: flex;
    justify-content: center;
    padding: 8px;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}

/* ── Sidebar footer icon btn ────────────────────────────── */
.gzb-icon-btn {
    color: #64748B !important;
    border-radius: 8px !important;
}

.gzb-icon-btn:hover {
    color: #1E293B !important;
    background: #F1F5F9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.mud-theme-dark .gzb-sidebar-logo        { border-bottom-color: #1E293B; }
.mud-theme-dark .gzb-page-title          { color: #F1F5F9; }
.mud-theme-dark .gzb-topbar-btn          { color: #94A3B8 !important; }
.mud-theme-dark .gzb-topbar-btn:hover    { color: #F1F5F9 !important; background: #1E293B !important; }
.mud-theme-dark .gzb-avatar-btn:hover    { background: #1E293B !important; }
.mud-theme-dark .gzb-avatar-name         { color: #CBD5E1; }
.mud-theme-dark .gzb-menu-name           { color: #F1F5F9; }
.mud-theme-dark .gzb-menu-email          { color: #94A3B8; }
.mud-theme-dark .gzb-menu-role-chip      { background: #1E3A5F; color: #93C5FD; border-color: #1D4ED8; }
.mud-theme-dark .gzb-menu-darkmode       { color: #CBD5E1; }
.mud-theme-dark .gzb-menu-darkmode-label { color: #CBD5E1; }
.mud-theme-dark .gzb-menu-icon           { color: #94A3B8 !important; }
.mud-theme-dark .gzb-nav-section-label   { color: #475569; }
.mud-theme-dark .gzb-nav-divider         { border-color: #1E293B !important; }
.mud-theme-dark .gzb-drawer-footer       { border-top-color: #1E293B; }
.mud-theme-dark .gzb-icon-btn            { color: #94A3B8 !important; }
.mud-theme-dark .gzb-icon-btn:hover      { color: #F1F5F9 !important; background: #0F172A !important; }

.mud-theme-dark .mud-nav-link            { color: #94A3B8 !important; }
.mud-theme-dark .mud-nav-link:hover      { background: #1E293B !important; color: #F1F5F9 !important; }
.mud-theme-dark .mud-nav-link.active,
.mud-theme-dark .mud-nav-link-active     { background: #1E3A5F !important; color: #93C5FD !important; }
.mud-theme-dark .mud-nav-link.active .mud-nav-link-icon,
.mud-theme-dark .mud-nav-link-active .mud-nav-link-icon { color: #93C5FD !important; }