/* ==========================================================================
   ParçaRadar panel design
   Six selectable themes (Components/PanelTheme.cs). The Mud palette carries the
   solid colours; each .pnl-skin-<id> block below adds the gradients, glows and
   table headers that make the theme. Every rule reads the --sk-* variables, so
   a new theme is one more block here plus one entry in PanelTheme.All.
   Never prefix classes with ad-: ad blockers hide them (they blanked the panel once).
   ========================================================================== */

:root {
    --pnl-accent: var(--mud-palette-primary);
    --pnl-mono: 'IBM Plex Mono', Consolas, monospace;
    --pnl-line: var(--mud-palette-divider);
    --pnl-radius: 14px;
    --pnl-radius-sm: 8px;
}

.pnl-dark { color-scheme: dark; --pnl-code-bg: rgba(0, 0, 0, 0.35); }
.pnl-light { color-scheme: light; --pnl-code-bg: #F5F6F8; }

/* ---- Themes --------------------------------------------------------------- */

.pnl-skin-klasik {
    --pnl-accent-ink: #FF5C5C;
    --pnl-accent-soft: rgba(255, 77, 77, 0.15);
    --sk-bg-art: radial-gradient(1200px 500px at 85% -10%, rgba(212, 32, 32, 0.20), transparent 60%);
    --sk-surface: linear-gradient(180deg, #1D0C0C 0%, #160909 100%);
    --sk-drawer: linear-gradient(180deg, #140808, #0F0505);
    --sk-drawer-line: rgba(212, 32, 32, 0.18);
    --sk-nav-text: rgba(255, 255, 255, 0.76);
    --sk-nav-hover: rgba(255, 77, 77, 0.10);
    --sk-nav-active: linear-gradient(135deg, #D42020 0%, #8B0000 100%);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: 0 4px 14px rgba(212, 32, 32, 0.45);
    --sk-btn: linear-gradient(135deg, #D42020 0%, #8B0000 100%);
    --sk-appbar: linear-gradient(90deg, #6E0000 0%, #C0392B 45%, #8B0000 100%);
    --sk-appbar-edge: 0 2px 18px rgba(180, 0, 0, 0.45);
    --sk-appbar-text: #FFFFFF;
    --sk-brand-parca: rgba(255, 220, 220, 0.85);
    --sk-brand-radar: #FFFFFF;
    --sk-chip-bg: rgba(0, 0, 0, 0.28);
    --sk-hero: linear-gradient(135deg, #C0392B 0%, #8B0000 58%, #3D0000 100%);
    --sk-hero-shadow: 0 8px 28px rgba(180, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --sk-hero-ink: #8B0000;
    --sk-laser: linear-gradient(90deg, transparent, #FF6B6B, #FFCC00, #FF4444, transparent);
    --sk-thead: linear-gradient(90deg, #7A0000 0%, #C0392B 30%, #E74C3C 55%, #C0392B 80%, #7A0000 100%);
    --sk-thead-solid: #A52A1F;
    --sk-thead-text: #FFFFFF;
    --sk-zebra: rgba(255, 255, 255, 0.025);
    --sk-card-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    --sk-bar: linear-gradient(90deg, #8B0000, #FF4D4D);
    --sk-bar-track: rgba(255, 255, 255, 0.07);
    --sk-badge: #FFCC00;
    --sk-badge-ink: #3D0000;
}

.pnl-skin-klasik-acik {
    --pnl-accent-ink: #C81E1E;
    --pnl-accent-soft: #FDE2E2;
    --sk-bg-art: radial-gradient(1200px 400px at 85% -10%, rgba(212, 32, 32, 0.08), transparent 60%);
    --sk-surface: #FFFFFF;
    --sk-drawer: #FFFFFF;
    --sk-drawer-line: rgba(0, 0, 0, 0.08);
    --sk-nav-text: rgba(0, 0, 0, 0.72);
    --sk-nav-hover: rgba(212, 32, 32, 0.07);
    --sk-nav-active: linear-gradient(135deg, #D42020 0%, #8B0000 100%);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: 0 4px 12px rgba(212, 32, 32, 0.30);
    --sk-btn: linear-gradient(135deg, #D42020 0%, #8B0000 100%);
    --sk-appbar: linear-gradient(90deg, #6E0000 0%, #C0392B 45%, #8B0000 100%);
    --sk-appbar-edge: 0 2px 14px rgba(180, 0, 0, 0.30);
    --sk-appbar-text: #FFFFFF;
    --sk-brand-parca: rgba(255, 225, 225, 0.9);
    --sk-brand-radar: #FFFFFF;
    --sk-chip-bg: rgba(0, 0, 0, 0.22);
    --sk-hero: linear-gradient(135deg, #C0392B 0%, #8B0000 58%, #3D0000 100%);
    --sk-hero-shadow: 0 8px 24px rgba(180, 0, 0, 0.28);
    --sk-hero-ink: #8B0000;
    --sk-laser: linear-gradient(90deg, transparent, #FF6B6B, #FFCC00, #FF4444, transparent);
    --sk-thead: linear-gradient(90deg, #7A0000 0%, #C0392B 30%, #E74C3C 55%, #C0392B 80%, #7A0000 100%);
    --sk-thead-solid: #A52A1F;
    --sk-thead-text: #FFFFFF;
    --sk-zebra: rgba(0, 0, 0, 0.022);
    --sk-card-shadow: 0 2px 12px rgba(20, 0, 0, 0.07);
    --sk-bar: linear-gradient(90deg, #8B0000, #E02A2A);
    --sk-bar-track: rgba(0, 0, 0, 0.07);
    --sk-badge: #FFCC00;
    --sk-badge-ink: #3D0000;
}

.pnl-skin-karbon {
    --pnl-accent-ink: #FF5252;
    --pnl-accent-soft: rgba(255, 59, 59, 0.14);
    --sk-bg-art: radial-gradient(900px 420px at 90% -5%, rgba(255, 45, 45, 0.11), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 6px);
    --sk-surface: linear-gradient(180deg, #1B1D21 0%, #141619 100%);
    --sk-drawer: linear-gradient(180deg, #131518, #0D0E10);
    --sk-drawer-line: rgba(205, 210, 218, 0.09);
    --sk-nav-text: #B9BEC5;
    --sk-nav-hover: rgba(255, 255, 255, 0.05);
    --sk-nav-active: linear-gradient(90deg, rgba(255, 59, 59, 0.26) 0%, rgba(255, 59, 59, 0.05) 100%);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: inset 3px 0 0 #FF3B3B;
    --sk-btn: linear-gradient(135deg, #FF3B3B 0%, #9B1414 100%);
    --sk-appbar: linear-gradient(180deg, #1F2226 0%, #131518 100%);
    --sk-appbar-edge: 0 1px 0 rgba(255, 59, 59, 0.6), 0 6px 24px rgba(0, 0, 0, 0.6);
    --sk-appbar-text: #E8EAED;
    --sk-brand-parca: #FF3B3B;
    --sk-brand-radar: #E8EAED;
    --sk-chip-bg: rgba(255, 255, 255, 0.06);
    --sk-hero: linear-gradient(135deg, #2A2D33 0%, #191B1F 55%, #101114 100%);
    --sk-hero-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --sk-hero-ink: #16181C;
    --sk-laser: linear-gradient(90deg, transparent, #FF3B3B 30%, #FFB4B4 50%, #FF3B3B 70%, transparent);
    --sk-thead: linear-gradient(180deg, #2B2E34 0%, #1F2226 100%);
    --sk-thead-solid: #25282D;
    --sk-thead-text: #DFE2E6;
    --sk-zebra: rgba(255, 255, 255, 0.018);
    --sk-card-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    --sk-bar: linear-gradient(90deg, #7D1D1D, #FF3B3B);
    --sk-bar-track: rgba(255, 255, 255, 0.06);
    --sk-badge: #FF3B3B;
    --sk-badge-ink: #FFFFFF;
}

.pnl-skin-grafit-acik {
    --pnl-accent-ink: #C81E1E;
    --pnl-accent-soft: #FDE2E2;
    --sk-bg-art: none;
    --sk-surface: #FFFFFF;
    --sk-drawer: #F8F9FA;
    --sk-drawer-line: rgba(15, 20, 30, 0.08);
    --sk-nav-text: #3B4048;
    --sk-nav-hover: rgba(15, 20, 30, 0.05);
    --sk-nav-active: linear-gradient(90deg, #1F2226, #2E3238);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: inset 3px 0 0 #E02A2A, 0 4px 12px rgba(0, 0, 0, 0.18);
    --sk-btn: linear-gradient(135deg, #D42020 0%, #8B0000 100%);
    --sk-appbar: linear-gradient(180deg, #2A2D33, #1A1C20);
    --sk-appbar-edge: 0 2px 0 #D42020;
    --sk-appbar-text: #F1F2F4;
    --sk-brand-parca: #FF5252;
    --sk-brand-radar: #F1F2F4;
    --sk-chip-bg: rgba(255, 255, 255, 0.10);
    --sk-hero: linear-gradient(135deg, #2F3339 0%, #1D2024 60%, #121417 100%);
    --sk-hero-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    --sk-hero-ink: #16181C;
    --sk-laser: linear-gradient(90deg, transparent, #FF3B3B 30%, #FFB4B4 50%, #FF3B3B 70%, transparent);
    --sk-thead: linear-gradient(180deg, #30343A, #23262B);
    --sk-thead-solid: #2A2D33;
    --sk-thead-text: #F1F2F4;
    --sk-zebra: rgba(0, 0, 0, 0.02);
    --sk-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    --sk-bar: linear-gradient(90deg, #2E3238, #D42020);
    --sk-bar-track: rgba(0, 0, 0, 0.07);
    --sk-badge: #D42020;
    --sk-badge-ink: #FFFFFF;
}

.pnl-skin-gece {
    --pnl-accent-ink: #38BDF8;
    --pnl-accent-soft: rgba(56, 189, 248, 0.14);
    --sk-bg-art: radial-gradient(1000px 460px at 85% -10%, rgba(56, 189, 248, 0.15), transparent 60%);
    --sk-surface: linear-gradient(180deg, #101A31, #0C1428);
    --sk-drawer: linear-gradient(180deg, #0B1225, #070C1A);
    --sk-drawer-line: rgba(96, 165, 250, 0.14);
    --sk-nav-text: #B4C2DC;
    --sk-nav-hover: rgba(56, 189, 248, 0.08);
    --sk-nav-active: linear-gradient(135deg, #2563EB, #1E3A8A);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
    --sk-btn: linear-gradient(135deg, #2563EB, #1E3A8A);
    --sk-appbar: linear-gradient(90deg, #0F2A6B 0%, #1D4ED8 50%, #14307A 100%);
    --sk-appbar-edge: 0 2px 18px rgba(29, 78, 216, 0.45);
    --sk-appbar-text: #FFFFFF;
    --sk-brand-parca: rgba(219, 234, 254, 0.85);
    --sk-brand-radar: #FFFFFF;
    --sk-chip-bg: rgba(0, 0, 0, 0.25);
    --sk-hero: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 55%, #0A1740 100%);
    --sk-hero-shadow: 0 8px 28px rgba(29, 78, 216, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --sk-hero-ink: #1E3A8A;
    --sk-laser: linear-gradient(90deg, transparent, #7DD3FC, #E0F2FE, #38BDF8, transparent);
    --sk-thead: linear-gradient(90deg, #1E3A8A, #2563EB 50%, #1E3A8A);
    --sk-thead-solid: #1E40AF;
    --sk-thead-text: #FFFFFF;
    --sk-zebra: rgba(255, 255, 255, 0.02);
    --sk-card-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    --sk-bar: linear-gradient(90deg, #1E3A8A, #38BDF8);
    --sk-bar-track: rgba(255, 255, 255, 0.07);
    --sk-badge: #FBBF24;
    --sk-badge-ink: #1F1600;
}

.pnl-skin-zumrut {
    --pnl-accent-ink: #34D399;
    --pnl-accent-soft: rgba(52, 211, 153, 0.14);
    --sk-bg-art: radial-gradient(1000px 460px at 85% -10%, rgba(16, 185, 129, 0.15), transparent 60%);
    --sk-surface: linear-gradient(180deg, #0D221A, #091A13);
    --sk-drawer: linear-gradient(180deg, #081A12, #04100B);
    --sk-drawer-line: rgba(52, 211, 153, 0.14);
    --sk-nav-text: #B3D4C7;
    --sk-nav-hover: rgba(52, 211, 153, 0.08);
    --sk-nav-active: linear-gradient(135deg, #059669, #065F46);
    --sk-nav-active-text: #FFFFFF;
    --sk-nav-active-shadow: 0 4px 14px rgba(5, 150, 105, 0.45);
    --sk-btn: linear-gradient(135deg, #059669, #065F46);
    --sk-appbar: linear-gradient(90deg, #064E3B 0%, #059669 50%, #065F46 100%);
    --sk-appbar-edge: 0 2px 18px rgba(5, 150, 105, 0.40);
    --sk-appbar-text: #FFFFFF;
    --sk-brand-parca: rgba(209, 250, 229, 0.85);
    --sk-brand-radar: #FFFFFF;
    --sk-chip-bg: rgba(0, 0, 0, 0.25);
    --sk-hero: linear-gradient(135deg, #059669 0%, #065F46 58%, #022C22 100%);
    --sk-hero-shadow: 0 8px 28px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --sk-hero-ink: #065F46;
    --sk-laser: linear-gradient(90deg, transparent, #6EE7B7, #FEF08A, #34D399, transparent);
    --sk-thead: linear-gradient(90deg, #065F46, #10B981 50%, #065F46);
    --sk-thead-solid: #047857;
    --sk-thead-text: #FFFFFF;
    --sk-zebra: rgba(255, 255, 255, 0.02);
    --sk-card-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    --sk-bar: linear-gradient(90deg, #065F46, #34D399);
    --sk-bar-track: rgba(255, 255, 255, 0.07);
    --sk-badge: #FBBF24;
    --sk-badge-ink: #1F1600;
}

.pr-app-root {
    min-height: 100vh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-feature-settings: "tnum" 1;
}

@keyframes pnl-shimmer {
    0% { opacity: .55; transform: scaleX(.5) translateX(-30%); }
    50% { opacity: 1; transform: scaleX(1) translateX(0); }
    100% { opacity: .55; transform: scaleX(.5) translateX(30%); }
}

@keyframes pnl-sweep { to { transform: rotate(360deg); } }

/* ---- Shell ---------------------------------------------------------------- */

.mud-appbar.pnl-topbar {
    background: var(--sk-appbar);
    color: var(--sk-appbar-text);
    box-shadow: var(--sk-appbar-edge);
    border-bottom: 0;
}

.pnl-topbar .mud-toolbar { gap: 10px; }

.pnl-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
    color: inherit;
    text-decoration: none;
}

.pnl-brandmark { display: inline-flex; align-items: center; gap: 12px; }

.pnl-logo {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.pnl-logo img { display: block; width: 100%; height: 100%; }

.pnl-wordmark { display: flex; flex-direction: column; line-height: 1; }
.pnl-wordmark small { font-size: 10.5px; font-weight: 700; letter-spacing: 4.5px; color: var(--pnl-accent-ink); }
.pnl-wordmark b { margin-top: 3px; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--mud-palette-text-primary); }
.pnl-topbar .pnl-wordmark small { color: var(--sk-brand-parca); }
.pnl-topbar .pnl-wordmark b { color: var(--sk-brand-radar); }

.pnl-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 10px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.pnl-crumb-group { opacity: .72; }
.pnl-crumb-sep { opacity: .45; }
.pnl-crumb-page { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.pnl-role,
.pnl-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    background: var(--sk-chip-bg);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pnl-theme-btn { border-radius: 10px; font-weight: 600; cursor: pointer; transition: background-color .15s ease; }
.pnl-theme-btn:hover { background: rgba(255, 255, 255, 0.16); }
.pnl-theme-btn .mud-icon-root { font-size: 18px; }

.pnl-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border: 0;
    border-radius: 99px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.pnl-account:hover { background: rgba(255, 255, 255, 0.10); }

.pnl-avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-weight: 800;
    font-size: 0.8125rem;
}

.mud-drawer.pnl-sidebar {
    background: var(--sk-drawer);
    border-right: 1px solid var(--sk-drawer-line);
    box-shadow: none;
}

.pnl-sidebar .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pnl-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 24px;
    scrollbar-width: thin;
}

.pnl-nav-label {
    padding: 16px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mud-palette-text-secondary);
}

.pnl-nav .mud-nav-link {
    position: relative;
    min-height: 40px;
    margin: 2px 0;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--sk-nav-text);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pnl-nav .mud-nav-link .mud-nav-link-icon,
.pnl-nav .mud-nav-link .mud-icon-root {
    width: 19px;
    height: 19px;
    font-size: 19px;
    color: inherit;
    opacity: .88;
}

.pnl-nav .mud-nav-link .mud-nav-link-text {
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    font-size: inherit;
}

.pnl-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: var(--sk-nav-hover);
    color: var(--mud-palette-text-primary);
}

.pnl-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--sk-nav-active);
    color: var(--sk-nav-active-text) !important;
    box-shadow: var(--sk-nav-active-shadow);
    font-weight: 600;
}

/* Mud paints the active link and its icon in the primary colour; on the theme's gradient that vanishes. */
.pnl-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text,
.pnl-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root { color: var(--sk-nav-active-text) !important; opacity: 1; }

.pnl-nav-count {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--sk-badge);
    color: var(--sk-badge-ink);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

.mud-main-content {
    background: var(--sk-bg-art), var(--mud-palette-background);
    min-height: 100vh;
}

.pnl-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 28px 56px;
}

@media (max-width: 720px) {
    .pnl-content { padding: 16px 14px 40px; }
    .pnl-role, .pnl-account-name, .pnl-crumbs, .pnl-theme-btn-name, .pnl-topbar .pnl-wordmark { display: none; }
}

/* ---- Page header: the theme's hero band ------------------------------------- */

.pnl-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 22px 26px;
    border-radius: 16px;
    background: var(--sk-hero);
    box-shadow: var(--sk-hero-shadow);
    color: #FFFFFF;
}

/* Laser line along the top edge. */
.pnl-page-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--sk-laser);
    animation: pnl-shimmer 4s ease-in-out infinite;
}

/* Radar rings and a slow sweep in the corner, from the logo. */
.pnl-page-header::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -130px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0 44px, rgba(255, 255, 255, 0.11) 44px 45px),
        conic-gradient(from 0deg, rgba(255, 255, 255, 0.10), transparent 22%);
    pointer-events: none;
    animation: pnl-sweep 9s linear infinite;
}

.pnl-page-back { margin-left: -6px; color: #FFFFFF !important; }
.pnl-page-heading { flex: 1 1 280px; min-width: 0; }

.pnl-page-title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.pnl-page-subtitle {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.86);
}

.pnl-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pnl-page-header .mud-typography,
.pnl-page-header .mud-secondary-text { color: rgba(255, 255, 255, 0.88) !important; }

.pnl-page-header .mud-chip.mud-chip {
    background: rgba(0, 0, 0, 0.22) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.pnl-page-header .mud-icon-button { color: #FFFFFF !important; }

.pnl-page-header .mud-button-root.mud-button {
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
}

.pnl-page-header .mud-button-root.mud-button-filled-primary {
    border: 0 !important;
    background: #FFFFFF !important;
    color: var(--sk-hero-ink) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ---- Stat cards ------------------------------------------------------------ */

.pnl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.pnl-stat {
    --stat-tone: var(--mud-palette-primary);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius);
    background: var(--sk-surface);
    box-shadow: var(--sk-card-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.pnl-stat::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--stat-tone), transparent);
}

.pnl-stat:hover { transform: translateY(-3px); }

.pnl-stat-success { --stat-tone: var(--mud-palette-success); }
.pnl-stat-warning { --stat-tone: var(--mud-palette-warning); }
.pnl-stat-error { --stat-tone: var(--mud-palette-error); }
.pnl-stat-info { --stat-tone: var(--mud-palette-info); }

.pnl-stat-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pnl-stat-value {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pnl-stat-success .pnl-stat-value { color: var(--mud-palette-success); }
.pnl-stat-warning .pnl-stat-value { color: var(--mud-palette-warning); }
.pnl-stat-error .pnl-stat-value { color: var(--mud-palette-error); }
.pnl-stat-info .pnl-stat-value { color: var(--mud-palette-info); }

.pnl-stat-hint {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pnl-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}

.pnl-dot-success { background: var(--mud-palette-success); }
.pnl-dot-warning { background: var(--mud-palette-warning); }
.pnl-dot-error { background: var(--mud-palette-error); }
.pnl-dot-info { background: var(--mud-palette-info); }

/* ---- Panels (dashboard and any hand-built section) ------------------------- */

.pnl-panel {
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius);
    background: var(--sk-surface);
    box-shadow: var(--sk-card-shadow);
    overflow: hidden;
}

.pnl-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--pnl-line);
}

.pnl-panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.pnl-panel-link {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.pnl-panel-link:hover { color: var(--pnl-accent-ink); }

.pnl-panel-body { padding: 16px; }

.pnl-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.pnl-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.pnl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pnl-line);
}

.pnl-row:last-child { border-bottom: 0; }

.pnl-row-main { flex: 1; min-width: 0; }

.pnl-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.pnl-row-sub {
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pnl-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    font-family: var(--pnl-mono);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pnl-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pnl-row-meta .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

.pnl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.pnl-empty .mud-icon-root { color: var(--mud-palette-text-disabled); }

.pnl-figure { font-weight: 700; }

.pnl-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pnl-line);
}

.pnl-hero-figure {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.pnl-kv-label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pnl-kv-value {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Horizontal bars: thin, rounded data end, direct labels. */
.pnl-bars { display: grid; gap: 12px; }

.pnl-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    font-size: 0.75rem;
}

.pnl-bar-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pnl-mono); }
.pnl-bar-value { font-family: var(--pnl-mono); color: var(--mud-palette-text-secondary); white-space: nowrap; }

.pnl-bar-track {
    height: 8px;
    border-radius: 99px;
    background: var(--sk-bar-track);
    overflow: hidden;
}

.pnl-bar-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 99px;
    background: var(--mud-palette-text-disabled);
}

.pnl-bar-fill.is-current { background: var(--sk-bar); }

/* ---- Login ---------------------------------------------------------------- */

.pnl-login,
.pr-auth-page {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px 16px;
    overflow: hidden;
    background: var(--sk-bg-art), var(--mud-palette-background);
}

.pnl-login::before,
.pr-auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at center, transparent 0 119px, var(--pnl-line) 119px 120px);
    -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 72%);
    mask-image: radial-gradient(circle at center, #000 25%, transparent 72%);
    pointer-events: none;
}

.pnl-login-card,
.pr-auth-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    padding: 30px 28px 28px;
    border: 1px solid var(--pnl-line);
    border-radius: 16px;
    background: var(--sk-surface);
    box-shadow: var(--sk-card-shadow);
}

.pnl-login-card::before,
.pr-auth-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--sk-laser);
    animation: pnl-shimmer 4s ease-in-out infinite;
}

.pr-auth-card-wide { max-width: 640px; }

.pnl-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.pnl-login-title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.012em; text-align: center; }

.pnl-login-sub,
.pr-auth-subtitle {
    margin: 3px 0 20px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ---- MudBlazor: page surfaces --------------------------------------------- */

.pr-app-root .mud-paper:not(.mud-popover),
.pr-app-root .mud-card {
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius) !important;
    background: var(--sk-surface);
    box-shadow: var(--sk-card-shadow);
}

/* A surface inside a surface is a quiet tile, not another bordered box. */
.pr-app-root .mud-paper:not(.mud-popover) .mud-paper:not(.mud-table),
.pr-app-root .mud-card .mud-paper:not(.mud-table),
.mud-dialog .mud-paper:not(.mud-table):not(.mud-popover) {
    border: 0;
    border-radius: var(--pnl-radius-sm) !important;
    background: var(--mud-palette-background-grey);
    box-shadow: none;
}

.pr-app-root .mud-paper:not(.mud-popover) .mud-card {
    border-radius: var(--pnl-radius-sm) !important;
}

.pr-app-root .mud-paper:not(.mud-popover) .mud-table,
.pr-app-root .mud-card .mud-table,
.pr-app-root .mud-dialog .mud-table {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mud-card-header { padding: 14px 16px 10px; }
.mud-card-content { padding: 14px 16px; }
.mud-card-actions { padding: 8px 16px 14px; }

.mud-card-header .mud-typography-h6 { font-size: 0.875rem; }

/* Titles keep one weight whatever the page's inline style asks for. */
.mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-typography-subtitle1, .mud-typography-subtitle2 {
    font-weight: 600 !important;
    letter-spacing: normal;
}

.mud-typography-h3 { font-weight: 500 !important; margin-top: 4px !important; }

/* Old stat tiles that still use MudCard/MudPaper grids. */
.stat-card .mud-card-content { padding: 14px 16px; }
.stat-card .mud-typography-body2 {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.stat-card .mud-icon-root { display: none; }

/* Color.Secondary on text is used panel-wide as "muted text". */
.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }
.mud-primary-text { color: var(--pnl-accent-ink, var(--mud-palette-primary)) !important; }

a { color: var(--pnl-accent-ink, var(--mud-palette-primary)); }

code, .pr-agent-file-path {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    font-family: var(--pnl-mono);
    font-size: 0.8em;
}

.pnl-code {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius-sm);
    background: var(--pnl-code-bg);
    color: var(--mud-palette-text-primary);
    font-family: var(--pnl-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

.pnl-code-error { border-left: 2px solid var(--mud-palette-error); }
.pnl-code-warning { border-left: 2px solid var(--mud-palette-warning); }
.pnl-code-success { border-left: 2px solid var(--mud-palette-success); }

/* ---- MudBlazor: tables ---------------------------------------------------- */

.mud-table { background: var(--mud-palette-surface); }

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

.mud-table-toolbar {
    height: auto;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--pnl-line);
}

.mud-table-toolbar .mud-typography-h6 { font-size: 0.875rem; }

/* The theme's gradient header band (the old panel's red table heads). */
.mud-table-head { background: var(--sk-thead); }

.mud-table-head .mud-table-cell {
    padding: 11px 16px;
    border-bottom: 0;
    background: transparent;
    color: var(--sk-thead-text) !important; /* Mud's own head rule paints text-primary, dark on light themes */
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.mud-table-head .mud-table-cell * {
    font-size: inherit;
    font-weight: inherit !important;
    letter-spacing: inherit;
    color: inherit;
}

/* A sticky header cell must stay opaque while rows scroll under it. */
.pr-app-root .mud-table-sticky-header .mud-table-head .mud-table-cell { background-color: var(--sk-thead-solid); }

.mud-table-body .mud-table-row:nth-of-type(even) { background-color: var(--sk-zebra); }

.mud-table-head .mud-table-cell .mud-icon-root { display: none; }
.mud-table-head .mud-table-sort-label .mud-icon-root { display: inline-block; font-size: 14px; }

.mud-table-body .mud-table-cell {
    padding: 9px 16px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.mud-table-dense .mud-table-body .mud-table-cell { padding: 6px 16px; }

.mud-table-body .mud-table-cell .mud-typography-body1 { font-size: inherit; }

.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }

.mud-table-pagination { font-size: 0.75rem; border-top: 1px solid var(--pnl-line); }
.mud-table-pagination-toolbar { min-height: 44px; height: auto; }

.pr-wide-table .mud-table-cell { white-space: nowrap; }

.pr-admin-table-shell { background: var(--mud-palette-surface); }

.rm-empty-row td {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent) !important;
    box-shadow: inset 2px 0 0 var(--mud-palette-warning);
}

.deleted-row > .mud-table-cell {
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, transparent) !important;
    opacity: .72;
}

.empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.empty-state-icon {
    margin-bottom: 8px;
    font-size: 40px !important;
    color: var(--mud-palette-text-disabled);
}

/* Firma groups on the subscriptions page. */
.group-header {
    margin-bottom: 4px;
    border-radius: var(--pnl-radius-sm);
    border: 1px solid var(--pnl-line);
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.group-header:hover { background: var(--mud-palette-table-hover); }
.firma-name { font-weight: 600; font-size: 0.875rem; }

/* ---- MudBlazor: buttons --------------------------------------------------- */

.mud-button-root.mud-button {
    min-height: 32px;
    padding: 5px 12px;
    border-radius: var(--pnl-radius-sm);
    box-shadow: none;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
}

.mud-button-root.mud-button.mud-button-size-small { min-height: 26px; padding: 2px 9px; font-size: 0.75rem; }
.mud-button-root.mud-button.mud-button-size-large { min-height: 38px; padding: 8px 16px; font-size: 0.875rem; }

.mud-button-label { text-transform: none !important; }

.mud-button-root.mud-button .mud-button-icon-start { margin-right: 6px; margin-left: -2px; }
.mud-button-root.mud-button .mud-button-icon-size-medium > *:first-child { font-size: 16px; }

/* One solid colour on a page: the primary action, in the theme's gradient. Anything else stays tinted. */
.mud-button-filled.mud-button-filled-primary {
    background: var(--sk-btn);
    color: #FFFFFF;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
}

.mud-button-filled.mud-button-filled-primary:hover { filter: brightness(1.1); }

.mud-button-filled.mud-button-filled-success,
.mud-button-filled.mud-button-filled-info,
.mud-button-filled.mud-button-filled-warning,
.mud-button-filled.mud-button-filled-error,
.mud-button-filled.mud-button-filled-secondary,
.mud-button-filled.mud-button-filled-tertiary,
.mud-button-filled.mud-button-filled-dark,
.mud-button-filled.mud-button-filled-surface,
.mud-button-filled.mud-button-filled-default {
    box-shadow: none;
}

.mud-button-filled-success { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent) !important; color: var(--mud-palette-success) !important; }
.mud-button-filled-info { background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent) !important; color: var(--mud-palette-info) !important; }
.mud-button-filled-warning { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent) !important; color: var(--mud-palette-warning) !important; }
.mud-button-filled-error { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent) !important; color: var(--mud-palette-error) !important; }
.mud-button-filled-secondary,
.mud-button-filled-tertiary,
.mud-button-filled-dark,
.mud-button-filled-surface,
.mud-button-filled-default { background: var(--mud-palette-action-default-hover) !important; color: var(--mud-palette-text-primary) !important; }

.mud-button-filled-success:hover { background: color-mix(in srgb, var(--mud-palette-success) 24%, transparent) !important; }
.mud-button-filled-info:hover { background: color-mix(in srgb, var(--mud-palette-info) 24%, transparent) !important; }
.mud-button-filled-warning:hover { background: color-mix(in srgb, var(--mud-palette-warning) 24%, transparent) !important; }
.mud-button-filled-error:hover { background: var(--mud-palette-error) !important; color: #fff !important; }

.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-secondary,
.mud-button-outlined.mud-button-outlined-info,
.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-surface,
.mud-button-outlined.mud-button-outlined-dark,
.mud-button-outlined.mud-button-outlined-tertiary {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

.mud-button-outlined:hover { background: var(--mud-palette-action-default-hover) !important; }

.mud-button-text-primary { color: var(--pnl-accent-ink, var(--mud-palette-primary)); }
.mud-button-text-secondary { color: var(--mud-palette-text-secondary); }

.mud-button-root:disabled,
.mud-button-root.mud-disabled { opacity: .55; }

.mud-icon-button { padding: 6px; border-radius: var(--pnl-radius-sm); }
.mud-icon-button.mud-icon-button-size-small { padding: 3px; }
.mud-icon-button-color-primary { color: var(--pnl-accent-ink, var(--mud-palette-primary)); }

/* ---- MudBlazor: chips ------------------------------------------------------ */

.mud-chip.mud-chip {
    height: 24px;
    margin: 2px;
    padding: 0 8px;
    border-radius: var(--pnl-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.mud-chip.mud-chip-size-small { height: 20px; padding: 0 7px; font-size: 0.6875rem; }
.mud-chip .mud-chip-icon, .mud-chip .mud-icon-root { width: 13px; height: 13px; font-size: 13px; margin-right: 4px; margin-left: 0; }
.mud-chip .mud-chip-content { color: inherit; }

.mud-chip.mud-chip-filled,
.mud-chip.mud-chip-outlined,
.mud-chip.mud-chip-text {
    border: 0;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.mud-chip.mud-chip-color-primary { background: var(--pnl-accent-soft); color: var(--pnl-accent-ink, var(--mud-palette-primary)); }
.mud-chip.mud-chip-color-success { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: var(--mud-palette-success); }
.mud-chip.mud-chip-color-warning { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); color: var(--mud-palette-warning); }
.mud-chip.mud-chip-color-error { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); color: var(--mud-palette-error); }
.mud-chip.mud-chip-color-info { background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent); color: var(--mud-palette-info); }
.mud-chip.mud-chip-color-secondary,
.mud-chip.mud-chip-color-tertiary,
.mud-chip.mud-chip-color-dark,
.mud-chip.mud-chip-color-surface { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

/* ---- MudBlazor: inputs ----------------------------------------------------- */

.mud-input-control { margin-top: 0; }

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--pnl-radius-sm);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary);
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.mud-input { font-size: 0.8125rem; }
.mud-input-label { font-size: 0.8125rem; }
.mud-input-label.mud-input-label-outlined.mud-input-label-inputcontrol { background: var(--mud-palette-surface); padding: 0 3px; }
.mud-dialog .mud-input-label-outlined { background: var(--mud-palette-surface); }
.mud-input-helper-text { font-size: 0.75rem; }

.mud-input-adornment .mud-icon-root { color: var(--mud-palette-text-disabled); font-size: 17px; }

.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root { font-size: 19px; }

/* ---- MudBlazor: tabs, panels, alerts --------------------------------------- */

.mud-tabs-toolbar,
.mud-tabs-tabbar { background: transparent !important; }

.mud-tabs-toolbar { border-bottom: 1px solid var(--pnl-line); }

.mud-tab {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-transform: none;
}

.mud-tab.mud-tab-active { color: var(--mud-palette-text-primary); }
.mud-tab-slider { background: var(--pnl-accent); }

.mud-expand-panel {
    border-radius: var(--pnl-radius-sm) !important;
    box-shadow: none !important;
    border: 1px solid var(--pnl-line);
    background: var(--mud-palette-surface);
}

.mud-expand-panel-header { min-height: 40px; padding: 8px 14px; font-size: 0.8125rem; }

.mud-alert {
    padding: 8px 14px;
    border-radius: var(--pnl-radius-sm);
    font-size: 0.8125rem;
}

.mud-alert .mud-alert-icon { margin-right: 8px; padding: 2px 0; }
.mud-alert .mud-alert-icon .mud-icon-root { font-size: 17px; }

.mud-alert[class*="mud-alert-text-"],
.mud-alert[class*="mud-alert-outlined-"],
.mud-alert[class*="mud-alert-filled-"] { border: 1px solid transparent; }

.mud-alert-text-success, .mud-alert-outlined-success, .mud-alert-filled-success { background: color-mix(in srgb, var(--mud-palette-success) 11%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent) !important; }
.mud-alert-text-warning, .mud-alert-outlined-warning, .mud-alert-filled-warning { background: color-mix(in srgb, var(--mud-palette-warning) 11%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent) !important; }
.mud-alert-text-error, .mud-alert-outlined-error, .mud-alert-filled-error { background: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); border-color: color-mix(in srgb, var(--mud-palette-error) 28%, transparent) !important; }
.mud-alert-text-info, .mud-alert-outlined-info, .mud-alert-filled-info { background: color-mix(in srgb, var(--mud-palette-info) 11%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); border-color: color-mix(in srgb, var(--mud-palette-info) 28%, transparent) !important; }

.mud-alert-text-success .mud-alert-icon, .mud-alert-outlined-success .mud-alert-icon, .mud-alert-filled-success .mud-alert-icon { color: var(--mud-palette-success); }
.mud-alert-text-warning .mud-alert-icon, .mud-alert-outlined-warning .mud-alert-icon, .mud-alert-filled-warning .mud-alert-icon { color: var(--mud-palette-warning); }
.mud-alert-text-error .mud-alert-icon, .mud-alert-outlined-error .mud-alert-icon, .mud-alert-filled-error .mud-alert-icon { color: var(--mud-palette-error); }
.mud-alert-text-info .mud-alert-icon, .mud-alert-outlined-info .mud-alert-icon, .mud-alert-filled-info .mud-alert-icon { color: var(--mud-palette-info); }

.mud-progress-linear { border-radius: 2px; }
.mud-skeleton { border-radius: var(--pnl-radius-sm); }
.mud-divider { border-color: var(--pnl-line); }
.mud-tooltip { font-size: 0.75rem; border-radius: 4px; }

/* ---- MudBlazor: dialogs ---------------------------------------------------- */

.mud-dialog {
    border: 1px solid var(--pnl-line);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.mud-dialog .mud-dialog-title {
    padding: 14px 20px;
    border-bottom: 1px solid var(--pnl-line);
    font-size: 0.9375rem;
    font-weight: 600;
}

.mud-dialog .mud-dialog-title .mud-typography { font-size: 0.9375rem !important; font-weight: 600 !important; }
.mud-dialog .mud-dialog-content { padding: 16px 20px; }
.mud-dialog .mud-dialog-actions { padding: 10px 20px 14px; gap: 6px; }
.mud-overlay-dark { background-color: rgba(5, 6, 8, .62); }

.pr-settings-meta {
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius-sm) !important;
    background: var(--mud-palette-background-grey) !important;
}

.pr-backup-log-panel { background: var(--pnl-code-bg) !important; }

.pr-backup-log-pre {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-family: var(--pnl-mono);
    font-size: 0.6875rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- Agent panel ------------------------------------------------------------ */

.pr-agent-tabs .mud-tab-active { background: transparent !important; }

.pr-agent-rootcause-cell {
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius-sm);
    background: var(--mud-palette-background-grey);
}

.pr-agent-rootcause-cell:hover { background: var(--mud-palette-table-hover); }

.pr-agent-detail-card {
    border: 1px solid var(--pnl-line) !important;
    border-radius: var(--pnl-radius-sm) !important;
    background: var(--mud-palette-background-grey) !important;
}

.pr-agent-file-item { border-radius: var(--pnl-radius-sm) !important; }
.pr-agent-file-item:hover { background: var(--mud-palette-table-hover) !important; }

/* ---- App frame --------------------------------------------------------------- */

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10001;
    display: none;
    width: 100%;
    padding: 8px 20px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
}

#blazor-error-ui a { color: #fff; text-decoration: underline; }

#blazor-error-ui .dismiss {
    position: absolute;
    top: 7px;
    right: 12px;
    cursor: pointer;
}

* { scrollbar-width: thin; scrollbar-color: var(--mud-palette-lines-inputs) transparent; }

@media (max-width: 768px) {
    .mud-table-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .pnl-content .flex-row { flex-wrap: wrap; }
    .pnl-content .flex-row > .mud-input-control { flex: 1 1 100%; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .mud-appbar, .mud-drawer, .mud-button { display: none !important; }
}

/* ---- Small shared bits --------------------------------------------------------- */

.pnl-modal-head {
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid var(--pnl-line);
}

.pnl-pre {
    margin: 0;
    font-family: var(--pnl-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--mud-palette-text-primary);
}

.pnl-pre-ok { color: var(--mud-palette-success); }
.pnl-pre-bad { color: var(--mud-palette-error); }

/* Inside tables colour is for state only. Links read as ink, row actions stay neutral
   until hovered, and neutral information does not compete with real status. */
.mud-table-body a,
.mud-table-body .mud-link { color: var(--mud-palette-text-primary); font-weight: 500; }
.mud-table-body a:hover,
.mud-table-body .mud-link:hover { color: var(--pnl-accent-ink); }

.mud-table-body .mud-icon-button { color: var(--mud-palette-action-default) !important; }
.mud-table-body .mud-icon-button:hover { color: var(--mud-palette-text-primary) !important; }
.mud-table-body .mud-icon-button-color-error:hover { color: var(--mud-palette-error) !important; }

.mud-table-body .mud-chip.mud-chip-color-info,
.mud-table-body .mud-chip.mud-chip-color-primary {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.mud-table-body .mud-chip .mud-icon-root { display: none; }

/* Section icons are signposts, not decoration: one quiet colour everywhere. */
.mud-card-header .mud-icon-root,
.mud-table-toolbar > .mud-icon-root,
.mud-table-toolbar .mud-stack > .mud-icon-root,
.mud-main-content .mud-typography-h5 > .mud-icon-root,
.mud-main-content .mud-typography-h6 > .mud-icon-root,
.mud-main-content .mud-stack > .mud-icon-root.mud-primary-text {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.mud-tab .mud-icon-root { font-size: 16px; width: 16px; height: 16px; color: inherit; }
.mud-tab .mud-tab-icon-text { margin-right: 6px; }

.mud-badge.mud-badge-default,
.mud-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-family: var(--pnl-mono);
    font-size: 0.625rem;
    line-height: 16px;
}

/* Switches */
.mud-switch { min-height: 32px; }
.mud-switch-label-small, .mud-switch-label { font-size: 0.8125rem; }
.mud-switch .mud-switch-span { width: 34px; height: 18px; padding: 0; margin: 0 8px 0 0; overflow: visible; }
.mud-switch .mud-switch-track { width: 34px; height: 18px; margin: 0; border-radius: 9px; opacity: 1 !important; background: var(--mud-palette-lines-inputs); }
.mud-switch .mud-switch-base { top: 0; left: 0; padding: 2px !important; }
.mud-switch .mud-switch-base:hover { background: transparent !important; }
.mud-switch .mud-switch-thumb-medium, .mud-switch .mud-switch-thumb { width: 14px; height: 14px; box-shadow: none; background: #fff; }
.mud-switch .mud-switch-base.mud-checked { transform: translateX(16px); }
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track { background: var(--mud-palette-primary); }

/* Timeline on the statistics page */
.mud-timeline-item-dot { background: transparent !important; box-shadow: none !important; }
.mud-timeline-item-dot .mud-timeline-item-dot-inner { background: var(--mud-palette-text-disabled) !important; }
.mud-timeline-vertical::before { background: var(--pnl-line) !important; width: 1px !important; }

.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar { background-color: var(--mud-palette-primary); }

.mud-table-body .mud-primary-text { color: var(--mud-palette-text-primary) !important; }
.mud-table-body .mud-primary-text[style*="cursor"]:hover { color: var(--pnl-accent-ink) !important; }

/* ---- Customer portal ----------------------------------------------------------- */

.pnl-sidebar-org {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pnl-line);
    font-size: 0.8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.pnl-sidebar-org small {
    display: block;
    margin-top: 1px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.pnl-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius);
    background: var(--mud-palette-surface);
}

.pnl-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.pnl-quick a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    box-shadow: -1px -1px 0 0 var(--pnl-line);
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease;
}

.pnl-quick a:hover { background: var(--mud-palette-table-hover); }
.pnl-quick .mud-icon-root { font-size: 18px; width: 18px; height: 18px; color: var(--mud-palette-text-secondary); }

.pnl-note {
    padding: 12px 14px;
    border-radius: var(--pnl-radius-sm);
    font-size: 0.8125rem;
    border: 1px solid var(--pnl-line);
}

.pnl-note-error { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent); }
.pnl-note-warning { background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent); }
.pnl-note-info { background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent); }
.pnl-note-success { background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent); }

.pnl-code-figure {
    font-family: var(--pnl-mono);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.2em;
}

/* Keep iyzico's own checkout readable: it brings a light form. */
#iyzico-checkout-form { color-scheme: light; }

.pr-input { width: 100%; }
.pr-animate, .page-content { animation: none; }

.mud-switch { margin-right: 8px; }
.mud-switch .mud-typography { font-size: 0.8125rem; }

/* ---- Theme picker (top bar menu and Ayarlar) ---------------------------------- */

.pnl-theme-popover .mud-list { min-width: 320px; padding: 8px; }

.pnl-theme-head {
    padding: 6px 10px 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pnl-theme-head small {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.pnl-theme-item.mud-list-item {
    margin: 2px 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.pnl-theme-item.is-current {
    background: var(--sk-nav-hover);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

.pnl-theme-option { display: flex; align-items: center; gap: 12px; width: 100%; }
.pnl-theme-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pnl-theme-name { font-size: 0.84rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.pnl-theme-desc { margin-top: 1px; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.pnl-theme-check { color: var(--pnl-accent-ink); }

.pnl-swatch {
    position: relative;
    display: block;
    flex: 0 0 64px;
    width: 64px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 8px;
}

.pnl-swatch-bar { display: block; height: 12px; }

.pnl-swatch-card {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 18px;
    height: 16px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 4px;
}

.pnl-swatch-dot { position: absolute; right: 13px; top: 22px; width: 8px; height: 8px; border-radius: 50%; }

.pnl-swatch.pnl-swatch-lg { flex: none; width: 100%; height: 76px; margin-bottom: 6px; }
.pnl-swatch-lg .pnl-swatch-bar { height: 18px; }
.pnl-swatch-lg .pnl-swatch-card { left: 12px; right: 12px; top: 30px; height: 30px; }
.pnl-swatch-lg .pnl-swatch-dot { right: 22px; top: 41px; width: 10px; height: 10px; }

.pnl-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.pnl-theme-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 8px 10px;
    border: 1px solid var(--pnl-line);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.pnl-theme-tile:hover { background: var(--sk-nav-hover); }
.pnl-theme-tile:disabled { cursor: progress; opacity: .7; }
.pnl-theme-tile.is-current { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); }