/* PlatinumAuth — Google Material 3 / Cloud Dashboard Style */

html, body {
    margin: 0;
    font-family: 'Outfit', 'Inter', 'Roboto', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }

/* ── Dashboard brand header ──────────────────────────────────────────── */
.rw-brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 8px;
}
.rw-brand-text { flex: 1 1 auto; min-width: 0; }

/* ── Dashboard action tiles (Google Style Surface Cards) ─────────────── */
.w8-tile {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E3E3E3);
    box-shadow: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.w8-tile:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
}

/* ── KPI / summary stat cards ────────────────────────────────────────── */
/* M3 relies on tonal colors rather than harsh borders or gradients */
.w8-stat-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}
.w8-stat-card.warning {
    background-color: var(--mud-palette-warning-lighten) !important;
    border-color: transparent !important;
}
.w8-stat-card.warning .mud-typography {
    color: var(--mud-palette-warning-darken) !important;
}

/* ── Footprint code tag ──────────────────────────────────────────────── */
.pa-footprint {
    background: var(--mud-palette-background-gray, #F0F4F9);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ── Activity card (Google style outlines) ───────────────────────────── */
.rw-activity-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E3E3E3);
    box-shadow: none !important;
    background-color: var(--mud-palette-surface);
}

/* ── Page-level layout helpers ───────────────────────────────────────── */
.w8-page-content {
    padding-top: 16px;
    padding-bottom: 40px;
}

/* ── Nav drawer overrides (Google Pill Shape) ────────────────────────── */
.mud-drawer {
    border-right: none !important;
}
.mud-drawer .mud-nav-link {
    border-radius: 100px; /* MD3 pill shape */
    margin: 4px 12px;
    padding: 10px 16px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mud-drawer .mud-nav-link:hover,
.mud-drawer .mud-nav-link:focus {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.mud-drawer .mud-nav-link.active {
    background-color: var(--mud-palette-primary-lighten) !important;
    color: var(--mud-palette-primary-darken) !important;
}
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary-darken) !important;
}

/* ── Page footer ──────────────────────────────────────────────────────── */
.rw-page-footer {
    padding: 16px;
    border-top: none;
    text-align: center;
}

/* ── MudTable polish ─────────────────────────────────────────────────── */
.mud-table-container {
    border-radius: 0; /* Google tables usually stretch to card bounds */
}
.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-table-root .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Dialog polish ───────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 28px !important; /* MD3 Dialog radius */
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2) !important;
}

/* ── App bar polish ──────────────────────────────────────────────────── */
.mud-appbar {
    border-bottom: none !important;
}

/* ── Clients tree ────────────────────────────────────────────────────── */
.pa-tree { background: transparent !important; }
.pa-client-panel {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: none !important;
    background-color: var(--mud-palette-surface) !important;
}
.pa-site-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background-color: var(--mud-palette-background, transparent) !important;
    box-shadow: none !important;
}
.pa-license {
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding: 12px 0 6px 0;
    margin-top: 8px;
}
.pa-license:first-of-type { border-top: none; }

/* ── Device sub-table inside the tree ────────────────────────────────── */
.pa-dev-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.pa-dev-table th {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}
.pa-dev-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    vertical-align: middle;
}
.pa-dev-table tr:last-child td { border-bottom: none; }

/* ── Status dot ──────────────────────────────────────────────────────── */
.pa-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled, #9aa0a6);
}
.pa-dot.on {
    background: var(--mud-palette-success, #2e7d32);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}
.pa-dot.idle { background: var(--mud-palette-text-disabled, #9aa0a6); }
.pa-dot.off { background: var(--mud-palette-error, #d32f2f); }

/* ── Responsive tweaks ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rw-brand-header { flex-direction: column; align-items: flex-start; }
    .pa-dev-table { font-size: 0.75rem; }
}