/* PlatinumAuth — Platinum Brink Technologies Design System */

html, body {
    margin: 0;
    font-family: Inter, 'Segoe UI', system-ui, 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 ──────────────────────────────────────────── */
.w8-tile {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border-radius: 24px;
}
.w8-tile:hover  { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.w8-tile:active { transform: translateY(0);    box-shadow: 0 4px 12px rgba(0,0,0,.05); }

/* ── KPI / summary stat cards ────────────────────────────────────────── */
.w8-stat-card {
    border-radius: 24px !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);
    /* Long unbroken footprint/key codes must wrap, not overflow a narrow mobile card. */
    overflow-wrap: anywhere;
}

/* ── Activity card ───────────────────────────────────────────────────── */
.rw-activity-card {
    border-radius: 24px !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) !important;
}
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

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

/* ── MudTable polish ─────────────────────────────────────────────────── */
.mud-table-container {
    border-radius: 0;
}
.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;
    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: 24px !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: 16px !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 ────────────────────────────────── */
/* The 7-column device table can't shrink to a phone's width, so it scrolls
   horizontally inside this wrapper instead of forcing the whole page wide. */
.pa-dev-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pa-dev-table {
    width: 100%;
    min-width: 620px;
    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; }
}

/* ── Animated splash screen (canvas particle effect, light + dark modes) ── */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.6s ease;
}
#splash-screen.splash-fade {
    opacity: 0;
    pointer-events: none;
}
/* Canvas fills the entire splash — splash.js sets its background colour. */
#splashCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Overlay: logo + tagline centred on top of the canvas. */
.splash-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
.splash-logo-wrap {
    position: relative;
    margin-bottom: 2rem;
}
/* Ambient glow behind the logo */
.splash-glow {
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: #003366;
    filter: blur(60px);
    opacity: 0.18;
    border-radius: 50%;
}
.splash-logo {
    position: relative;
    z-index: 10;
    width: min(18rem, 72vw);
    height: auto;
    filter: drop-shadow(0 0 24px rgba(0,51,102,0.55));
}
/* Dark-mode tagline: white text */
#splash-screen.splash-dark .splash-tagline {
    color: rgba(255,255,255,0.70);
    text-shadow: 0 0 10px rgba(0,51,102,0.5);
}
/* Light-mode tagline: dark text */
#splash-screen.splash-light .splash-tagline,
#splash-screen:not(.splash-dark) .splash-tagline {
    color: #444746;
    text-shadow: none;
}
.splash-tagline {
    font-family: Inter, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin: 0;
}