/* Enviro-Auth — EnviroNexus */

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; }
}

/* ── Splash — same gather as Enviro-Weigh, tagline says Enviro-Auth ── */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    overflow: hidden;
    transition: opacity 0.6s ease;
}
#splash-screen.splash-fade {
    opacity: 0;
    pointer-events: none;
}
#splashCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.splash-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.splash-logo-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 0.75rem;
}
.splash-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(52,130,68,0.18) 0%, rgba(52,130,68,0) 70%);
    z-index: 1;
}
.splash-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
}
.splash-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 4;
    background: #46D66E;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 0 6px 2px rgba(70, 214, 110, 0.95),
        0 0 18px 7px rgba(52, 130, 68, 0.8),
        0 0 36px 14px rgba(52, 130, 68, 0.4);
}
.splash-wordmark {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
}
.splash-wordmark .enviro { color: #2C6B3C; }
.splash-wordmark .nexus { color: #1B2430; }
#splash-screen.splash-dark .splash-wordmark .enviro { color: #7DCEA0; }
#splash-screen.splash-dark .splash-wordmark .nexus { color: #F4F7F5; }
.splash-tagline {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0.65rem 0 0;
}
#splash-screen.splash-dark .splash-tagline { color: rgba(255,255,255,0.72); }
.enx-mark-dark { display: none; }
html.pw-dark .enx-mark-light { display: none; }
html.pw-dark .enx-mark-dark { display: inline; }
#splash-screen.splash-dark .splash-logo.enx-mark-light { display: none; }
#splash-screen.splash-dark .splash-logo.enx-mark-dark { display: block; }
html.splash-on body > :not(#splash-screen) { visibility: hidden; }

/* ── Login — same card as Enviro-Weigh ───────────────────────────────── */
.rw-login-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    --mud-palette-primary: #1A1A18;
    --mud-palette-primary-rgb: 26, 26, 24;
    --mud-palette-text-primary: #1A1A18;
    --mud-palette-text-secondary: #5C5C56;
    --mud-palette-background: #FFFFFF;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-lines-default: #E5E5E0;
    --mud-palette-lines-inputs: #B5B5AE;
    --mud-palette-divider: #E5E5E0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}
html.pw-dark .rw-login-root {
    --mud-palette-primary: #3B82F6;
    --mud-palette-primary-rgb: 59, 130, 246;
    --mud-palette-text-primary: #F8FAFC;
    --mud-palette-text-secondary: #94A3B8;
    --mud-palette-background: #0F172A;
    --mud-palette-surface: #1E293B;
    --mud-palette-lines-default: #334155;
    --mud-palette-lines-inputs: #475569;
    --mud-palette-divider: #334155;
}
.rw-login-card {
    padding: 40px 40px 32px;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    box-shadow: none;
}
.rw-login-logo {
    max-width: 180px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    align-self: center;
    margin-bottom: 4px;
}
.rw-login-footer {
    margin-top: 24px;
    text-align: center;
}
.rw-login-root .mud-button-filled {
    border-radius: 999px;
}
.rw-login-root .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-default);
}
@media (max-width: 480px) {
    .rw-login-card { padding: 28px 20px 24px; }
    .rw-login-logo { max-width: 140px; max-height: 110px; }
}