/* ═══════════════════════════════════════════════════════════════
   nPlaner – Dark Navy Modern Theme v3
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Background palette */
    --dn-bg:           #f3f5fb;
    --dn-bg-card:      #ffffff;
    --dn-bg-surface:   #f8f9fd;
    --dn-bg-elevated:  #eaedfa;

    /* Primary navy accent */
    --dn-primary:        #344069;
    --dn-primary-dark:   #1e2a4a;
    --dn-primary-mid:    #3d5080;
    --dn-accent:         #344069;
    --dn-accent-bright:  #4a62a8;
    --dn-accent-light:   #5a6ea8;
    --dn-accent-glow:    rgba(52,64,105,0.16);
    --dn-accent2:        #3d5080;

    --dn-gradient:      linear-gradient(135deg, #1e2a4a 0%, #344069 50%, #3d5080 100%);
    --dn-gradient-text: linear-gradient(135deg, #344069, #3d5080, #5a6ea8);
    --dn-gradient-soft: linear-gradient(135deg, rgba(52,64,105,0.07) 0%, rgba(61,80,128,0.04) 100%);

    /* Text */
    --dn-text:           #1a2240;
    --dn-text-secondary: #344069;
    --dn-text-muted:     #7889b0;

    /* Borders */
    --dn-border:        rgba(52,64,105,0.11);
    --dn-border-accent: rgba(52,64,105,0.26);

    /* Shadows */
    --dn-shadow-sm:  0 1px 3px rgba(52,64,105,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --dn-shadow-md:  0 4px 20px rgba(52,64,105,0.10), 0 2px 8px rgba(0,0,0,0.05);
    --dn-shadow-lg:  0 8px 40px rgba(52,64,105,0.14), 0 4px 16px rgba(0,0,0,0.06);

    /* Radzen token overrides */
    --rz-primary:              #344069 !important;
    --rz-primary-lighter:      #eaedfa !important;
    --rz-primary-light:        #5a6ea8 !important;
    --rz-primary-dark:         #1e2a4a !important;
    --rz-primary-darker:       #152038 !important;
    --rz-secondary:            #3d5080 !important;
    --rz-secondary-lighter:    #eaedfa !important;
    --rz-secondary-light:      #7889b0 !important;
    --rz-secondary-dark:       #2a3d66 !important;
    --rz-secondary-darker:     #1e2a4a !important;
    --rz-base-background-color:  var(--dn-bg)      !important;
    --rz-body-background-color:  var(--dn-bg)      !important;
    --rz-text-color:             var(--dn-text)    !important;
    --rz-text-secondary-color:   var(--dn-text-secondary) !important;
    --rz-panel-background-color: var(--dn-bg-card) !important;
    --rz-panel-border:           1px solid var(--dn-border) !important;
    --rz-panel-shadow:           var(--dn-shadow-md) !important;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--dn-bg);
    color: var(--dn-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Ambient gradient blobs */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 15% -5%, rgba(52,64,105,0.07), transparent),
        radial-gradient(ellipse 60% 45% at 88% 105%, rgba(61,80,128,0.06), transparent);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.rz-header {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border-bottom: 1px solid var(--dn-border) !important;
    box-shadow: 0 1px 0 rgba(52,64,105,0.08), 0 4px 24px rgba(52,64,105,0.04) !important;
    z-index: 1000 !important; height: 60px !important; padding: 0 1.25rem !important;
}

.rz-header .rz-sidebar-toggle {
    color: var(--dn-text-muted) !important; transition: all 0.2s ease; border-radius: 10px;
}
.rz-header .rz-sidebar-toggle:hover {
    color: var(--dn-accent) !important; background: var(--dn-bg-elevated) !important;
}

/* Logo */
.nplaner-logo {
    display: flex; align-items: center; gap: 0.65rem;
    text-decoration: none; padding: 0.2rem 0;
}
.nplaner-logo-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--dn-gradient);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 14px rgba(52,64,105,0.38);
}
.nplaner-logo-icon .material-symbols-outlined {
    font-size: 20px !important; color: white !important;
}
.nplaner-logo-text {
    font-size: 1.2rem; font-weight: 800; letter-spacing: -0.5px;
    background: var(--dn-gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* User trigger pill */
.nplaner-user-trigger {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.8rem 0.3rem 0.4rem; border-radius: 30px;
    background: var(--dn-bg-surface); border: 1px solid var(--dn-border);
    cursor: pointer; transition: all 0.22s ease; color: var(--dn-text);
}
.nplaner-user-trigger:hover {
    background: var(--dn-bg-elevated); border-color: var(--dn-border-accent);
    box-shadow: var(--dn-shadow-sm);
}
.nplaner-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--dn-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: white;
    text-transform: uppercase; flex-shrink: 0;
}
.nplaner-user-name {
    font-size: 0.83rem; font-weight: 600; color: var(--dn-text);
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.rz-sidebar {
    background: #1e2a4a !important;
    backdrop-filter: blur(16px) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.18) !important;
    padding-top: 0.5rem;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    margin: 2px 10px !important; border-radius: 12px !important;
    padding: 0.58rem 0.9rem !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    color: rgba(255,255,255,0.55) !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.88) !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #ffffff !important;
    font-weight: 600 !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    font-size: 1.2rem !important; opacity: 0.7;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    opacity: 1; color: #ffffff !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-text {
    font-size: 0.88rem !important; font-weight: 500; letter-spacing: 0.01em;
}

/* ── BODY / CONTENT ─────────────────────────────────────────── */
.rz-body { background: var(--dn-bg) !important; position: relative; }

.container {
    box-sizing: border-box; width: 100%; max-width: 1400px;
    margin: 0 auto; padding: 1.75rem 2rem;
    display: flex; flex: 1; flex-direction: column;
    position: relative; z-index: 1;
}
.container:has(.nplaner-home)   { max-width: 100%; padding: 0; }
.container:has(.planning-page)  { max-width: 100%; padding: 0; }
.container:has(.ss-page)        { max-width: 100%; padding: 0; }
@media (max-width: 768px) { .container { padding: 1rem; } }

/* ── Dropdown z-index fix ───────────────────────────────────────── */
.rz-dropdown-popup { z-index: 9999 !important; }
.rz-popup          { z-index: 9999 !important; }
.rz-overlay-panel  { z-index: 9999 !important; }

/* ── Filterable dropdown: inner filter input must blend into the
   outer dropdown shell — otherwise the generic input styling paints
   it as its own boxed control, looking like "a dropdown inside a
   dropdown" (AllowFiltering="true" RadzenDropDown instances). ── */
.rz-dropdown .rz-inputtext {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-dropdown .rz-dropdown-trigger {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.rz-footer {
    background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--dn-border) !important;
    color: var(--dn-text-muted) !important; font-size: 0.75rem;
    padding: 0.65rem 1.5rem !important;
    display: flex; align-items: center; justify-content: center;
}
.nplaner-footer-content { display: flex; align-items: center; gap: 0.5rem; opacity: 0.65; }
.nplaner-footer-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--dn-gradient); animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.4); }
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.rz-button {
    border-radius: 10px !important; font-weight: 600 !important;
    font-size: 0.84rem !important; letter-spacing: 0.01em;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}
.rz-button.rz-variant-filled.rz-primary {
    background: var(--dn-gradient) !important; border: none !important; color: white !important;
    box-shadow: 0 2px 12px rgba(52,64,105,0.28) !important;
}
.rz-button.rz-variant-filled.rz-primary:hover {
    box-shadow: 0 4px 24px rgba(52,64,105,0.45) !important; transform: translateY(-1px);
}
.rz-button.rz-variant-filled.rz-primary:active { transform: translateY(0); }
.rz-button.rz-variant-flat { border-radius: 10px !important; border: 1px solid transparent !important; }
.rz-button.rz-variant-flat.rz-info {
    color: var(--dn-accent) !important; background: rgba(52,64,105,0.07) !important; border-color: rgba(52,64,105,0.18) !important;
}
.rz-button.rz-variant-flat.rz-info:hover { background: rgba(52,64,105,0.14) !important; border-color: rgba(52,64,105,0.3) !important; }
.rz-button.rz-variant-flat.rz-danger {
    color: #dc2626 !important; background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.15) !important;
}
.rz-button.rz-variant-flat.rz-danger:hover { background: rgba(220,38,38,0.12) !important; border-color: rgba(220,38,38,0.3) !important; }
.rz-button.rz-variant-flat.rz-success {
    color: #059669 !important; background: rgba(5,150,105,0.07) !important; border-color: rgba(5,150,105,0.18) !important;
}
.rz-button.rz-variant-flat.rz-success:hover { background: rgba(5,150,105,0.14) !important; border-color: rgba(5,150,105,0.3) !important; }
.rz-button.rz-variant-flat.rz-light {
    color: var(--dn-text-muted) !important; background: var(--dn-bg-surface) !important; border-color: var(--dn-border) !important;
}
.rz-button.rz-variant-flat.rz-light:hover { background: var(--dn-bg-elevated) !important; color: var(--dn-text) !important; }

/* ── DATA GRID ──────────────────────────────────────────────── */
.rz-datatable {
    background: var(--dn-bg-card) !important; border: 1px solid var(--dn-border) !important;
    border-radius: 16px !important; overflow: hidden; box-shadow: var(--dn-shadow-md) !important;
}
.rz-datatable .rz-datatable-thead > tr > th {
    background: var(--dn-bg-surface) !important; border-bottom: 1px solid var(--dn-border) !important;
    color: var(--dn-text-muted) !important; font-weight: 700 !important;
    font-size: 0.74rem !important; text-transform: uppercase; letter-spacing: 0.07em;
    padding: 0.9rem 1rem !important;
}
.rz-datatable .rz-datatable-tbody > tr > td {
    border-bottom: 1px solid var(--dn-border) !important; color: var(--dn-text) !important;
    padding: 0.78rem 1rem !important; font-size: 0.875rem;
}
.rz-datatable .rz-datatable-tbody > tr:hover > td { background: rgba(52,64,105,0.025) !important; }
.rz-datatable .rz-datatable-tbody > tr:last-child > td { border-bottom: none !important; }
.rz-pager {
    background: var(--dn-bg-surface) !important; border-top: 1px solid var(--dn-border) !important;
    color: var(--dn-text) !important;
}
.rz-pager .rz-pager-page { border-radius: 8px !important; color: var(--dn-text) !important; }

/* ── CARDS ──────────────────────────────────────────────────── */
.rz-card {
    background: var(--dn-bg-card) !important; border: 1px solid var(--dn-border) !important;
    border-radius: 16px !important; box-shadow: var(--dn-shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.rz-card:hover {
    border-color: var(--dn-border-accent) !important; box-shadow: var(--dn-shadow-md) !important;
    transform: translateY(-2px);
}

/* Folder cards */
.nplaner-folder-card {
    background: var(--dn-bg-card); border: 1px solid var(--dn-border); border-radius: 16px;
    padding: 1.25rem; cursor: pointer; transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.nplaner-folder-card::before {
    content: ''; position: absolute; inset: 0;
    background: var(--dn-gradient-soft); opacity: 0; transition: opacity 0.28s ease;
}
.nplaner-folder-card:hover {
    border-color: var(--dn-border-accent);
    box-shadow: var(--dn-shadow-md), 0 0 0 3px rgba(52,64,105,0.05);
    transform: translateY(-3px);
}
.nplaner-folder-card:hover::before { opacity: 1; }
.nplaner-folder-card-content { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1; }
.nplaner-folder-icon-wrapper {
    width: 48px; height: 48px; border-radius: 14px;
    background: rgba(52,64,105,0.09); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.28s ease;
}
.nplaner-folder-card:hover .nplaner-folder-icon-wrapper {
    background: rgba(52,64,105,0.16); box-shadow: 0 0 18px rgba(52,64,105,0.1);
}
.nplaner-folder-icon-wrapper i { font-size: 1.5rem !important; color: var(--dn-accent) !important; }
.nplaner-folder-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.nplaner-folder-name { font-size: 0.95rem; font-weight: 600; color: var(--dn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nplaner-folder-count { font-size: 0.78rem; color: var(--dn-text-muted); display: flex; align-items: center; gap: 0.3rem; }

/* ── ALERTS ─────────────────────────────────────────────────── */
.rz-alert { border-radius: 14px !important; border: 1px solid var(--dn-border) !important; background: var(--dn-bg-card) !important; }
.rz-alert.rz-info    { border-color: rgba(52,64,105,0.2) !important; background: rgba(52,64,105,0.05) !important; }
.rz-alert.rz-warning { border-color: rgba(234,179,8,0.25) !important; background: rgba(255,251,235,0.9) !important; }

/* ── DIALOGS ────────────────────────────────────────────────── */
.rz-dialog {
    background: var(--dn-bg-card) !important; border: 1px solid var(--dn-border) !important;
    border-radius: 20px !important; box-shadow: var(--dn-shadow-lg) !important; overflow: hidden;
}
.rz-dialog-titlebar {
    background: var(--dn-bg-surface) !important; border-bottom: 1px solid var(--dn-border) !important; padding: 1rem 1.25rem !important;
}
.rz-dialog-title { font-weight: 700 !important; font-size: 1rem !important; color: var(--dn-text) !important; }
.rz-dialog-content { padding: 1.25rem !important; color: var(--dn-text) !important; }
.rz-dialog-wrapper .rz-dialog-overlay {
    background: rgba(26,34,64,0.22) !important; backdrop-filter: blur(6px) !important;
}

/* ── FORM FIELDS ────────────────────────────────────────────── */
.rz-form-field { border-radius: 12px !important; }
.rz-form-field .rz-textbox, .rz-form-field .rz-textarea {
    background: var(--dn-bg-surface) !important; color: var(--dn-text) !important;
    border-color: var(--dn-border) !important; border-radius: 12px !important; transition: all 0.2s ease !important;
}
.rz-form-field .rz-textbox:focus, .rz-form-field .rz-textarea:focus {
    border-color: var(--dn-accent) !important;
    box-shadow: 0 0 0 3px var(--dn-accent-glow) !important; background: white !important;
}
.rz-form-field label, .rz-form-field .rz-form-field-label {
    color: var(--dn-text-secondary) !important; font-weight: 600 !important; font-size: 0.83rem !important;
}

/* ── PROGRESS ───────────────────────────────────────────────── */
.rz-progressbar .rz-progressbar-value { background: var(--dn-gradient) !important; border-radius: 999px; }

/* ── NOTIFICATIONS ──────────────────────────────────────────── */
.rz-notification {
    border-radius: 14px !important; border: 1px solid var(--dn-border) !important;
    background: var(--dn-bg-card) !important; box-shadow: var(--dn-shadow-lg) !important;
    color: var(--dn-text) !important;
}

/* ── POPUP (user menu) ──────────────────────────────────────── */
.my-popup {
    display: none; position: absolute; overflow: hidden; height: auto; min-width: 180px;
    margin-top: 8px; border: 1px solid var(--dn-border);
    background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
    box-shadow: var(--dn-shadow-lg); border-radius: 14px; padding: 0.5rem;
}
.my-popup .rz-button { justify-content: flex-start !important; border-radius: 10px !important; width: 100%; color: var(--dn-text) !important; }

/* ── HOME PAGE ──────────────────────────────────────────────── */
.nplaner-home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.nplaner-home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--dn-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,249,253,0.88)),
        repeating-linear-gradient(90deg, rgba(52,64,105,0.05) 0 1px, transparent 1px 32px);
    box-shadow: var(--dn-shadow-sm);
}

.nplaner-home-kicker {
    margin-bottom: 0.55rem;
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nplaner-home-hero h1 {
    margin: 0;
    color: var(--dn-text);
    font-size: 2.5rem;
    font-weight: 850;
    line-height: 1;
}

.nplaner-home-hero p {
    max-width: 620px;
    margin: 0.75rem 0 0;
    color: var(--dn-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.nplaner-home-user {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--dn-border);
    border-radius: 8px;
    background: white;
    color: var(--dn-text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.nplaner-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.nplaner-action-card {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.25rem;
    border: 1px solid var(--dn-border);
    border-radius: 8px;
    background: white;
    color: var(--dn-text);
    text-decoration: none;
    box-shadow: var(--dn-shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nplaner-action-card:hover {
    border-color: rgba(15,118,110,0.32);
    box-shadow: var(--dn-shadow-md);
    transform: translateY(-2px);
}

.nplaner-action-card .material-symbols-outlined {
    color: #0f766e;
    font-size: 2rem;
}

.nplaner-action-card strong {
    display: block;
    color: var(--dn-text);
    font-size: 1rem;
    line-height: 1.25;
}

.nplaner-action-card small {
    color: var(--dn-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.nplaner-action-card--admin {
    background: linear-gradient(135deg, #0f766e, #344069);
    color: white;
}

.nplaner-action-card--admin .material-symbols-outlined,
.nplaner-action-card--admin strong,
.nplaner-action-card--admin small {
    color: white;
}

@media (max-width: 1100px) {
    .nplaner-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nplaner-home-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.25rem;
    }

    .nplaner-home-hero h1 {
        font-size: 2rem;
    }

    .nplaner-action-grid {
        grid-template-columns: 1fr;
    }
}

/* ── LOADING ─────────────────────────────────────────────────── */
.nplaner-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3rem; }
.nplaner-loading-dots { display: flex; gap: 0.5rem; }
.nplaner-loading-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--dn-accent); animation: loading-bounce 1.4s ease-in-out infinite; }
.nplaner-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.nplaner-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading-bounce { 0%,80%,100% { transform: scale(0.6); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }
.nplaner-loading-text { font-size: 0.82rem; color: var(--dn-text-muted); }

/* ── OCR PAGE ────────────────────────────────────────────────── */
.ocr-page { max-width: 1000px; margin: 0 auto; padding: 0 0 3rem; }

.ocr-upload-panel {
    border: 2px dashed var(--dn-border-accent); border-radius: 20px;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3.5rem 2rem; gap: 0.85rem; transition: all 0.3s ease;
    box-shadow: var(--dn-shadow-sm);
}
.ocr-upload-panel:hover, .ocr-drop-active {
    border-color: var(--dn-accent); background: rgba(255,255,255,0.92);
    box-shadow: var(--dn-shadow-md), 0 0 0 5px var(--dn-accent-glow);
}
.ocr-upload-icon { font-size: 3.5rem; color: var(--dn-accent); }
.ocr-upload-text { font-size: 1.15rem; font-weight: 700; color: var(--dn-text); }
.ocr-upload-subtext { font-size: 0.85rem; color: var(--dn-text-muted); }
.ocr-btn-select {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.5rem; border-radius: 12px; background: var(--dn-gradient);
    color: white; font-weight: 700; font-size: 0.9rem; cursor: pointer; border: none;
    box-shadow: 0 2px 14px rgba(52,64,105,0.3); transition: all 0.22s ease;
}
.ocr-btn-select:hover { box-shadow: 0 4px 22px rgba(52,64,105,0.44); transform: translateY(-1px); }
.ocr-selected-info {
    font-size: 0.83rem; color: var(--dn-accent); font-weight: 600;
    background: rgba(52,64,105,0.08); padding: 0.35rem 0.9rem;
    border-radius: 20px; border: 1px solid rgba(52,64,105,0.2);
}
.ocr-action-bar { display: flex; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.ocr-upload-progress {
    display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem;
    padding: 1rem 1.5rem; background: var(--dn-bg-card); border-radius: 14px;
    border: 1px solid var(--dn-border-accent); color: var(--dn-text-secondary);
    font-size: 0.9rem; box-shadow: var(--dn-shadow-sm);
}
.ocr-error-banner {
    display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem;
    padding: 0.75rem 1.25rem; background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.2); border-radius: 12px; color: #dc2626; font-size: 0.875rem;
}
.ocr-jobs-header { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; margin-bottom: 1rem; }
.ocr-section-title { font-size: 1.1rem; font-weight: 800; color: var(--dn-text); margin: 0; letter-spacing: -0.3px; }
.ocr-jobs-table { background: var(--dn-bg-card); border-radius: 16px; border: 1px solid var(--dn-border); overflow: hidden; box-shadow: var(--dn-shadow-md); }
.ocr-jobs-table-header {
    display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
    padding: 0.75rem 1.25rem; background: var(--dn-bg-surface);
    font-size: 0.72rem; font-weight: 700; color: var(--dn-text-muted);
    text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--dn-border);
}
.ocr-jobs-row {
    display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
    padding: 0.88rem 1.25rem; border-bottom: 1px solid var(--dn-border);
    align-items: center; font-size: 0.875rem; transition: background 0.15s;
}
.ocr-jobs-row:last-child { border-bottom: none; }
.ocr-jobs-row:hover { background: rgba(52,64,105,0.02); }
.ocr-job-filename { display: flex; align-items: center; gap: 0.5rem; color: var(--dn-text); font-weight: 600; overflow: hidden; }
.ocr-job-filename span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocr-file-icon { color: var(--dn-accent); font-size: 1.1rem !important; }
.ocr-job-size  { color: var(--dn-text-muted); font-size: 0.8rem; }
.ocr-job-time  { color: var(--dn-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ocr-job-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ocr-download-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ocr-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.65rem; border-radius: 20px; font-size: 0.73rem; font-weight: 700; }
.ocr-status-pending    { background: rgba(234,179,8,0.1);  color: #92400e; border: 1px solid rgba(234,179,8,0.22); }
.ocr-status-processing { background: rgba(52,64,105,0.1);  color: var(--dn-accent); border: 1px solid rgba(52,64,105,0.22); }
.ocr-status-completed  { background: rgba(5,150,105,0.09); color: #065f46; border: 1px solid rgba(5,150,105,0.22); }
.ocr-status-failed     { background: rgba(220,38,38,0.08); color: #991b1b; border: 1px solid rgba(220,38,38,0.18); }
.ocr-spinner { width: 12px; height: 12px; border: 2px solid rgba(52,64,105,0.2); border-top-color: var(--dn-accent); border-radius: 50%; animation: ocr-spin 0.8s linear infinite; display: inline-block; }
@keyframes ocr-spin { to { transform: rotate(360deg); } }
.ocr-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 2rem; color: var(--dn-text-muted); font-size: 0.95rem; }

/* ── DOCUMENT PREVIEW ────────────────────────────────────────── */
.nplaner-docx-preview {
    padding: 2rem 2.5rem; font-family: 'Inter', sans-serif;
    font-size: 0.92rem; line-height: 1.75; color: var(--dn-text);
    background: white; border-radius: 8px; overflow: auto; max-height: 100%;
}
.nplaner-docx-preview h1,.nplaner-docx-preview h2,
.nplaner-docx-preview h3,.nplaner-docx-preview h4 { color: var(--dn-text); margin: 1.5em 0 0.5em; font-weight: 800; }
.nplaner-docx-preview h1 { font-size:1.6rem; border-bottom:2px solid var(--dn-border); padding-bottom:0.4em; }
.nplaner-docx-preview h2 { font-size:1.3rem; }
.nplaner-docx-preview h3 { font-size:1.1rem; }
.nplaner-docx-preview p  { margin:0.6em 0; }
.nplaner-docx-preview table { border-collapse:collapse; width:100%; margin:1em 0; }
.nplaner-docx-preview table td,.nplaner-docx-preview table th { border:1px solid var(--dn-border); padding:0.5rem 0.75rem; color:var(--dn-text); }
.nplaner-docx-preview table th { background:var(--dn-bg-surface); font-weight:700; }
.nplaner-docx-preview table tr:hover td { background:rgba(52,64,105,0.025); }
.nplaner-docx-preview ul,.nplaner-docx-preview ol { margin:0.5em 0; padding-left:1.5em; }
.nplaner-docx-preview li { margin:0.25em 0; }
.nplaner-docx-preview img { max-width:100%; height:auto; border-radius:6px; }
.nplaner-docx-preview a { color:var(--dn-accent); text-decoration:underline; }
.nplaner-docx-preview blockquote { border-left:3px solid var(--dn-accent); margin:1em 0; padding:0.5em 1em; background:rgba(52,64,105,0.04); color:var(--dn-text-muted); }

/* ── MISC ────────────────────────────────────────────────────── */
.blazor-error-boundary { background:linear-gradient(135deg,#fef2f2,#fee2e2); padding:1rem 1.5rem; color:#991b1b; border-radius:12px; margin:1rem; border:1px solid rgba(220,38,38,0.2); }
.blazor-error-boundary::after { content:"Wystąpił nieoczekiwany błąd."; }

.flex-1 { flex:1; min-height:0; min-width:0; }
.flex   { display:flex; flex-direction:column; }
.rz-tabview { flex:1; }
.rz-tabview-panel { padding-left:0 !important; padding-right:0 !important; padding-bottom:0 !important; display:flex; flex-direction:column; height:100%; }

.rz-datatable .rz-cell-filter .rz-textbox { background:var(--dn-bg-surface) !important; border-color:var(--dn-border) !important; color:var(--dn-text) !important; border-radius:8px !important; font-size:0.82rem !important; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(52,64,105,0.18); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(52,64,105,0.3); }

input[type="file"]::file-selector-button {
    background:var(--dn-gradient); color:white; border:none;
    padding:0.5rem 1rem; border-radius:10px; font-weight:600; font-size:0.83rem;
    cursor:pointer; margin-right:0.75rem; transition:all 0.2s ease;
    box-shadow:0 2px 10px rgba(52,64,105,0.22);
}
input[type="file"]::file-selector-button:hover { filter:brightness(1.08); box-shadow:0 4px 18px rgba(52,64,105,0.38); }

*:focus-visible { outline:2px solid var(--dn-accent); outline-offset:2px; }
.rz-confirm-dialog .rz-dialog-content { color:var(--dn-text-muted) !important; font-size:0.9rem; }
#blazor-error-ui { background:linear-gradient(135deg,#fef2f2,#fee2e2); color:#991b1b; padding:0.5rem 1rem; font-size:0.875rem; }

.rz-tabview-nav { border-bottom:2px solid var(--dn-border) !important; }
.rz-tabview-nav .rz-tabview-selected > a { color:var(--dn-accent) !important; border-bottom:2px solid var(--dn-accent) !important; font-weight:700 !important; }

/* ── OCR TABS ────────────────────────────────────────────────── */
.ocr-tabs {
    display: flex; gap: 0.35rem;
    background: var(--dn-bg-surface);
    border: 1px solid var(--dn-border);
    border-radius: 14px;
    padding: 0.35rem;
    margin-bottom: 1.5rem;
    width: fit-content;
}

.ocr-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1.1rem; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    font-size: 0.88rem; font-weight: 600;
    color: var(--dn-text-muted);
    transition: all 0.2s ease;
    font-family: inherit;
    position: relative;
}
.ocr-tab .material-symbols-outlined { font-size: 1.1rem; }
.ocr-tab:hover { color: var(--dn-accent); background: rgba(52,64,105,0.06); }
.ocr-tab-active {
    background: white !important; color: var(--dn-accent) !important;
    box-shadow: 0 1px 6px rgba(52,64,105,0.14), 0 0 0 1px rgba(52,64,105,0.1);
}
.ocr-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; font-size: 0.7rem; font-weight: 700;
    background: var(--dn-gradient); color: white;
    margin-left: 0.1rem;
}

/* ── HISTORY TOOLBAR ─────────────────────────────────────────── */
.ocr-history-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.ocr-history-stats { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ocr-history-actions { display: flex; align-items: center; gap: 0.5rem; }

.ocr-hist-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.28rem 0.75rem; border-radius: 20px;
    font-size: 0.78rem; font-weight: 700;
}
.ocr-hist-chip .material-symbols-outlined { font-size: 0.95rem; }
.ocr-hist-all    { background: rgba(52,64,105,0.08);  color: var(--dn-accent);    border: 1px solid rgba(52,64,105,0.18); }
.ocr-hist-done   { background: rgba(5,150,105,0.08);  color: #059669;             border: 1px solid rgba(5,150,105,0.2); }
.ocr-hist-pending{ background: rgba(234,179,8,0.09);  color: #92400e;             border: 1px solid rgba(234,179,8,0.2); }
.ocr-hist-fail   { background: rgba(220,38,38,0.08);  color: #991b1b;             border: 1px solid rgba(220,38,38,0.18); }

/* ── HISTORY TABLE ENHANCEMENTS ─────────────────────────────── */
.ocr-jobs-row.ocr-row-done {
    background: rgba(5,150,105,0.015);
}
.ocr-jobs-row.ocr-row-done:hover { background: rgba(5,150,105,0.04) !important; }

.ocr-job-filename-inner {
    display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow: hidden;
}
.ocr-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ocr-job-result-ready {
    font-size: 0.68rem; font-weight: 700; color: #059669;
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── SUCCESS LINK BUTTON ─────────────────────────────────────── */
.ocr-success-link {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--dn-accent); font-weight: 700; font-size: inherit;
    cursor: pointer; text-decoration: underline; font-family: inherit;
    margin-left: 0.5rem;
}
.ocr-success-link:hover { color: var(--dn-accent2); }

/* ── FOLDER OCR PANEL ────────────────────────────────────────── */
.ocr-or-divider {
    display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0;
}
.ocr-or-line {
    flex: 1; height: 1px; background: var(--dn-border);
}
.ocr-or-text {
    font-size: 0.8rem; font-weight: 600; color: var(--dn-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}

.ocr-folder-panel {
    background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
    border: 1px solid var(--dn-border); border-radius: 20px;
    padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1rem;
    box-shadow: var(--dn-shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ocr-folder-panel:hover {
    border-color: var(--dn-border-accent); box-shadow: var(--dn-shadow-md);
}

.ocr-folder-panel-header {
    display: flex; align-items: center; gap: 0.85rem;
}
.ocr-folder-panel-title {
    font-size: 1rem; font-weight: 700; color: var(--dn-text);
}
.ocr-folder-panel-subtitle {
    font-size: 0.82rem; color: var(--dn-text-muted); margin-top: 0.1rem;
}

.ocr-folder-select-row {
    display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}

.ocr-folder-info-badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.9rem; border-radius: 20px;
    background: rgba(52,64,105,0.07); border: 1px solid rgba(52,64,105,0.18);
    font-size: 0.82rem; color: var(--dn-accent); font-weight: 500;
}
.ocr-folder-info-badge strong { font-weight: 700; }

.ocr-folder-empty {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--dn-text-muted); font-size: 0.88rem; padding: 0.5rem 0;
}
.ocr-folder-empty .material-symbols-outlined { font-size: 1.2rem; opacity: 0.6; }

.ocr-success-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.22);
    border-radius: 12px; color: #065f46; font-size: 0.875rem; font-weight: 600;
}
.ocr-success-banner .material-symbols-outlined { color: #059669; }

/* Utility chips */
.nplaner-chip {
    display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.7rem;
    border-radius:20px; font-size:0.75rem; font-weight:700;
    background:rgba(52,64,105,0.08); color:var(--dn-accent); border:1px solid rgba(52,64,105,0.18);
}
.nplaner-glass {
    background:rgba(255,255,255,0.75); backdrop-filter:blur(12px);
    border:1px solid rgba(52,64,105,0.1); border-radius:16px; box-shadow:var(--dn-shadow-sm);
}

/* ══ OCR Pagination ════════════════════════════════════════════ */
.ocr-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.ocr-pagination-bottom {
    margin-top: 1.5rem;
    justify-content: center;
}
.ocr-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--rz-border-disabled-color, #e5e7eb);
    border-radius: 6px;
    background: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color, #374151);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ocr-page-btn:hover {
    background: rgba(52,64,105,0.08);
    border-color: var(--dn-accent, #344069);
    color: var(--dn-accent, #344069);
}
.ocr-page-btn-active {
    background: var(--dn-accent, #344069) !important;
    border-color: var(--dn-accent, #344069) !important;
    color: #fff !important;
    cursor: default;
}
.ocr-page-info {
    font-size: 0.8rem;
    color: var(--dn-text-muted, #6b7280);
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* ── Panel Administratora — modale ─────────────────────────────────────── */
.npa-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.npa-dialog {
    background: var(--rz-panel-background-color, #fff);
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 360px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.npa-dialog h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.npa-dialog--wide { max-width: 640px; }

/* ═══════════════════════════════════════════════════════════════
   nPlaner – Admin redesign
   ═══════════════════════════════════════════════════════════════ */

:root {
    --np-bg: #f3f6fb;
    --np-surface: #ffffff;
    --np-surface-soft: #f8fafc;
    --np-ink: #111827;
    --np-muted: #667085;
    --np-line: rgba(17,24,39,0.10);
    --np-navy: #17213a;
    --np-navy-2: #223154;
    --np-teal: #0f766e;
    --np-teal-2: #14b8a6;
    --np-blue: #2563eb;
    --np-amber: #d97706;
    --np-red: #dc2626;
    --np-shadow: 0 12px 34px rgba(15,23,42,0.09);
    --np-shadow-soft: 0 3px 14px rgba(15,23,42,0.07);

    --rz-primary: var(--np-teal) !important;
    --rz-primary-light: #2dd4bf !important;
    --rz-primary-dark: #0f5f59 !important;
    --rz-secondary: var(--np-navy-2) !important;
    --rz-border-radius: 8px !important;
    --rz-text-color: var(--np-ink) !important;
    --rz-text-secondary-color: var(--np-muted) !important;
    --rz-base-background-color: var(--np-bg) !important;
    --rz-body-background-color: var(--np-bg) !important;
}

html,
body {
    background:
        linear-gradient(135deg, rgba(15,118,110,0.05), transparent 34%),
        linear-gradient(215deg, rgba(37,99,235,0.04), transparent 32%),
        var(--np-bg);
    color: var(--np-ink);
    font-family: 'Manrope', 'Aptos', 'Segoe UI', sans-serif;
}

body::before {
    background:
        linear-gradient(90deg, rgba(17,24,39,0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(17,24,39,0.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 72%);
}

.rz-header {
    height: 68px !important;
    background: rgba(255,255,255,0.88) !important;
    border-bottom: 1px solid rgba(17,24,39,0.08) !important;
    box-shadow: 0 4px 22px rgba(15,23,42,0.06) !important;
}

.nplaner-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--np-teal), var(--np-navy-2));
    box-shadow: 0 12px 24px rgba(15,118,110,0.24);
}

.nplaner-logo-text {
    color: var(--np-navy);
    background: none;
    -webkit-text-fill-color: currentColor;
    letter-spacing: 0;
}

.nplaner-user-trigger {
    border-radius: 999px;
    border-color: rgba(17,24,39,0.10);
    background: rgba(255,255,255,0.78);
    box-shadow: var(--np-shadow-soft);
}

.nplaner-user-avatar {
    background: linear-gradient(135deg, var(--np-navy), var(--np-teal));
}

.rz-sidebar {
    width: 272px !important;
    background:
        linear-gradient(180deg, rgba(20,184,166,0.14), transparent 28%),
        linear-gradient(180deg, var(--np-navy), #111827) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 12px 0 40px rgba(15,23,42,0.18) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 44px;
    margin: 4px 12px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.72) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    background: linear-gradient(135deg, rgba(20,184,166,0.25), rgba(37,99,235,0.16)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--np-teal-2), 0 8px 18px rgba(0,0,0,0.14) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    color: currentColor !important;
    opacity: 0.95;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-text {
    font-size: 0.92rem !important;
    font-weight: 700;
    letter-spacing: 0;
}

.sidebar-version {
    color: rgba(255,255,255,0.42);
    border-top-color: rgba(255,255,255,0.08);
}

.rz-body {
    background: transparent !important;
}

.container {
    max-width: 1540px;
    padding: 1.5rem 1.75rem 2rem;
}

.container:has(.nplaner-home) {
    max-width: 1540px;
    padding: 1.5rem 1.75rem 2rem;
}

.rz-footer {
    background: rgba(255,255,255,0.78) !important;
    border-top: 1px solid rgba(17,24,39,0.08) !important;
}

.rz-button {
    border-radius: 8px !important;
    letter-spacing: 0;
}

.rz-button.rz-variant-filled.rz-primary {
    background: linear-gradient(135deg, var(--np-teal), #0b5f74) !important;
    box-shadow: 0 10px 22px rgba(15,118,110,0.22) !important;
}

.rz-datatable {
    border-radius: 8px !important;
    border: 1px solid var(--np-line) !important;
    box-shadow: none !important;
}

.rz-datatable .rz-datatable-thead > tr > th {
    background: #f8fafc !important;
    color: #475467 !important;
    letter-spacing: 0.04em;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    color: var(--np-ink) !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: rgba(15,118,110,0.035) !important;
}

.rz-form-field .rz-textbox,
.rz-form-field .rz-textarea,
.rz-dropdown,
.rz-listbox,
.rz-textbox {
    border-radius: 8px !important;
}

.nplaner-home {
    gap: 1.25rem;
}

.nplaner-home-hero {
    align-items: center;
    min-height: 210px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)),
        linear-gradient(120deg, rgba(15,118,110,0.10), transparent 42%),
        linear-gradient(270deg, rgba(37,99,235,0.07), transparent 45%);
    box-shadow: var(--np-shadow);
}

.nplaner-home-kicker {
    color: var(--np-teal);
}

.nplaner-home-hero h1 {
    color: var(--np-navy);
    font-size: 2.35rem;
    letter-spacing: 0;
}

.nplaner-action-grid {
    grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.nplaner-action-card {
    min-height: 138px;
    border-radius: 8px;
    border-color: var(--np-line);
    box-shadow: var(--np-shadow-soft);
}

.nplaner-action-card--admin {
    background:
        linear-gradient(135deg, rgba(15,118,110,0.96), rgba(34,49,84,0.98)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 18px);
}

.admin-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 152px;
    padding: 1.35rem;
    border: 1px solid var(--np-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94)),
        linear-gradient(110deg, rgba(15,118,110,0.09), transparent 48%),
        linear-gradient(280deg, rgba(217,119,6,0.08), transparent 35%);
    box-shadow: var(--np-shadow);
}

.admin-hero-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    color: white;
    background: linear-gradient(135deg, var(--np-teal), var(--np-navy-2));
    box-shadow: 0 14px 28px rgba(15,118,110,0.20);
}

.admin-hero-icon .material-symbols-outlined {
    font-size: 2rem;
}

.admin-eyebrow {
    margin-bottom: 0.25rem;
    color: var(--np-teal);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-hero h1 {
    margin: 0;
    color: var(--np-navy);
    font-size: 2rem;
    font-weight: 850;
    line-height: 1.1;
}

.admin-hero p {
    margin: 0.45rem 0 0;
    color: var(--np-muted);
    font-size: 0.95rem;
}

.admin-primary-action {
    align-self: center;
    white-space: nowrap;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.admin-metric {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.75rem;
    align-items: center;
    min-height: 88px;
    padding: 1rem;
    border: 1px solid var(--np-line);
    border-radius: 8px;
    background: rgba(255,255,255,0.88);
    box-shadow: var(--np-shadow-soft);
}

.admin-metric .material-symbols-outlined {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(15,118,110,0.10);
    color: var(--np-teal);
}

.admin-metric strong {
    color: var(--np-navy);
    font-size: 1.45rem;
    line-height: 1;
}

.admin-metric small {
    color: var(--np-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-table-card {
    padding: 1rem;
    border: 1px solid var(--np-line);
    border-radius: 8px;
    background: rgba(255,255,255,0.92);
    box-shadow: var(--np-shadow);
}

.admin-table-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-role-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    color: var(--np-blue);
}

.admin-table-title > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(37,99,235,0.09);
    color: var(--np-blue);
}

.admin-table-title h2 {
    margin: 0;
    color: var(--np-navy);
    font-size: 1.05rem;
}

.admin-table-title p {
    margin: 0.2rem 0 0;
    color: var(--np-muted);
    font-size: 0.82rem;
}

.admin-grid {
    overflow: hidden;
}

.admin-grid--compact .rz-datatable-tbody > tr > td,
.admin-grid--compact .rz-datatable-thead > tr > th {
    padding: 0.55rem 0.7rem !important;
}

.admin-badge-row,
.admin-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-muted {
    color: var(--np-muted);
    font-size: 0.82rem;
}

.admin-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-status .material-symbols-outlined {
    font-size: 1rem;
}

.admin-status--success {
    color: #047857;
    background: rgba(5,150,105,0.10);
}

.admin-status--danger {
    color: var(--np-red);
    background: rgba(220,38,38,0.09);
}

.admin-status--info {
    color: var(--np-blue);
    background: rgba(37,99,235,0.09);
}

.npa-overlay {
    background: rgba(15,23,42,0.52);
    backdrop-filter: blur(10px);
}

.npa-dialog {
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 26px 80px rgba(15,23,42,0.28);
}

.npa-dialog--wide {
    max-width: 820px;
}

.npa-dialog--permissions {
    max-width: 1040px;
}

.npa-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.npa-dialog-header > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--np-teal), var(--np-navy-2));
    color: white;
}

.npa-dialog-header h3 {
    margin: 0;
}

.npa-dialog-header p {
    margin: 0.15rem 0 0;
    color: var(--np-muted);
}

.npa-section-label {
    margin: 0 0 0.5rem;
    color: var(--np-navy);
    font-size: 0.82rem;
    font-weight: 850;
}

.npa-permission-picker {
    margin: 1rem 0;
    padding: 0.85rem;
    border: 1px solid var(--np-line);
    border-radius: 8px;
    background: var(--np-surface-soft);
}

.npa-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.npa-filter-input {
    width: min(100%, 360px);
}

.npa-picker-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .admin-metrics,
    .nplaner-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-hero {
        grid-template-columns: auto 1fr;
    }

    .admin-primary-action {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .container,
    .container:has(.nplaner-home) {
        padding: 1rem;
    }

    .admin-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .admin-metrics,
    .nplaner-action-grid {
        grid-template-columns: 1fr;
    }

    .npa-dialog {
        min-width: 0;
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }

    .npa-picker-header,
    .npa-picker-body {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   nPlaner – final light clarity theme
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ui-bg: #f6f8fb;
    --ui-panel: #ffffff;
    --ui-panel-2: #f9fbfd;
    --ui-text: #152033;
    --ui-soft: #667085;
    --ui-border: #dce4ee;
    --ui-border-2: #edf1f6;
    --ui-primary: #0ea5a4;
    --ui-primary-dark: #087d7d;
    --ui-primary-soft: #e6f8f7;
    --ui-blue: #3b82f6;
    --ui-indigo: #4f46e5;
    --ui-green: #16a34a;
    --ui-red: #ef4444;
    --ui-amber: #f59e0b;
    --ui-shadow: 0 16px 38px rgba(21,32,51,0.08);
    --ui-shadow-sm: 0 4px 14px rgba(21,32,51,0.06);

    --rz-primary: var(--ui-primary) !important;
    --rz-primary-dark: var(--ui-primary-dark) !important;
    --rz-primary-light: #5eead4 !important;
    --rz-secondary: var(--ui-blue) !important;
    --rz-base-background-color: var(--ui-bg) !important;
    --rz-body-background-color: var(--ui-bg) !important;
    --rz-text-color: var(--ui-text) !important;
    --rz-text-secondary-color: var(--ui-soft) !important;
}

html,
body {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font-family: 'Aptos', 'Segoe UI', sans-serif !important;
}

body::before {
    display: none !important;
}

.rz-header {
    height: 64px !important;
    background: rgba(255,255,255,0.96) !important;
    border-bottom: 1px solid var(--ui-border-2) !important;
    box-shadow: 0 4px 18px rgba(21,32,51,0.05) !important;
}

.rz-header .rz-sidebar-toggle {
    color: #53627a !important;
    border-radius: 8px !important;
}

.rz-header .rz-sidebar-toggle:hover {
    color: var(--ui-primary-dark) !important;
    background: var(--ui-primary-soft) !important;
}

.nplaner-logo-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-blue)) !important;
    box-shadow: 0 10px 22px rgba(14,165,164,0.24) !important;
}

.nplaner-logo-text {
    color: var(--ui-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 1.08rem !important;
    letter-spacing: 0 !important;
}

.nplaner-user-trigger {
    min-height: 42px !important;
    border: 1px solid var(--ui-border) !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.nplaner-user-avatar {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-blue)) !important;
}

.nplaner-user-name {
    color: var(--ui-text) !important;
}

.rz-sidebar {
    width: 260px !important;
    background: #ffffff !important;
    border-right: 1px solid var(--ui-border-2) !important;
    box-shadow: 8px 0 28px rgba(21,32,51,0.06) !important;
    padding: 0.85rem 0.7rem !important;
}

.rz-sidebar .rz-panel-menu {
    background: transparent !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 42px !important;
    margin: 0.18rem 0 !important;
    padding: 0.48rem 0.72rem !important;
    border-radius: 8px !important;
    color: #556277 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: var(--ui-primary-dark) !important;
    background: var(--ui-primary-soft) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: var(--ui-primary-dark) !important;
    background: linear-gradient(135deg, #e6f8f7, #eef6ff) !important;
    box-shadow: inset 3px 0 0 var(--ui-primary), 0 5px 12px rgba(14,165,164,0.08) !important;
    font-weight: 800 !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    color: currentColor !important;
    opacity: 1 !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-text {
    color: currentColor !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
}

.sidebar-version {
    color: #98a2b3 !important;
    border-top: 1px solid var(--ui-border-2) !important;
    margin-top: 0.7rem !important;
}

.rz-body {
    background: var(--ui-bg) !important;
}

.container,
.container:has(.nplaner-home) {
    max-width: 1460px !important;
    padding: 1.2rem 1.35rem 1.6rem !important;
}

.rz-footer {
    background: #fff !important;
    border-top: 1px solid var(--ui-border-2) !important;
    box-shadow: none !important;
}

.nplaner-footer-dot {
    background: var(--ui-primary) !important;
}

.rz-button {
    min-height: 34px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
}

.rz-button.rz-variant-filled.rz-primary {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(14,165,164,0.20) !important;
}

.rz-button.rz-variant-flat.rz-light {
    background: #f4f7fb !important;
    border-color: var(--ui-border) !important;
    color: #334155 !important;
}

.rz-button.rz-danger {
    background-color: var(--ui-red) !important;
}

.rz-datatable {
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: #fff !important;
}

.rz-datatable .rz-datatable-thead > tr > th {
    background: #f7f9fc !important;
    color: #344054 !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.68rem 0.75rem !important;
    text-transform: none !important;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    padding: 0.7rem 0.75rem !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border-2) !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: #fbfefd !important;
}

.rz-pager {
    background: #fff !important;
    color: var(--ui-soft) !important;
}

.rz-cell-filter .rz-textbox,
.rz-datatable .rz-cell-filter .rz-textbox,
.rz-textbox,
.rz-dropdown,
.rz-listbox {
    min-height: 34px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

.rz-cell-filter .rz-textbox:focus,
.rz-textbox:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(14,165,164,0.12) !important;
}

.nplaner-home-hero,
.admin-hero {
    min-height: 118px !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.nplaner-home-hero h1,
.admin-hero h1 {
    color: var(--ui-text) !important;
    font-size: 1.65rem !important;
    letter-spacing: 0 !important;
}

.nplaner-home-hero p,
.admin-hero p {
    color: var(--ui-soft) !important;
    font-size: 0.9rem !important;
}

.admin-eyebrow,
.nplaner-home-kicker {
    color: var(--ui-primary-dark) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
}

.admin-hero-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-blue)) !important;
    box-shadow: none !important;
}

.admin-hero-icon .material-symbols-outlined {
    font-size: 1.65rem !important;
}

.admin-metrics {
    gap: 0.75rem !important;
}

.admin-metric {
    min-height: 72px !important;
    padding: 0.85rem !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.admin-metric .material-symbols-outlined {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-dark) !important;
}

.admin-metric strong {
    color: var(--ui-text) !important;
    font-size: 1.25rem !important;
}

.admin-metric small {
    color: var(--ui-soft) !important;
}

.admin-table-card {
    padding: 0.95rem !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.admin-table-title {
    margin-bottom: 0.8rem !important;
}

.admin-table-title > .material-symbols-outlined {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #eef6ff !important;
    color: var(--ui-blue) !important;
}

.admin-table-title h2 {
    color: var(--ui-text) !important;
    font-size: 1rem !important;
}

.admin-table-title p {
    color: var(--ui-soft) !important;
    font-size: 0.8rem !important;
}

.admin-status {
    min-height: 26px !important;
    border-radius: 999px !important;
}

.admin-status--success {
    color: #15803d !important;
    background: #ecfdf3 !important;
}

.admin-status--danger {
    color: #b42318 !important;
    background: #fef3f2 !important;
}

.admin-status--info {
    color: #175cd3 !important;
    background: #eff6ff !important;
}

.rz-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.npa-overlay {
    background: rgba(15,23,42,0.32) !important;
    backdrop-filter: blur(8px) !important;
}

.npa-dialog {
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(21,32,51,0.22) !important;
}

.npa-permission-picker {
    background: #f8fafc !important;
    border-color: var(--ui-border) !important;
}

.npa-permission-summary {
    color: var(--ui-muted);
    font-size: 0.85rem;
}

.npa-details-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: #fff;
}

.npa-details-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.npa-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.8rem;
}

.npa-picker-body {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
}

.npa-permissions-grid .rz-cell:first-child,
.npa-permissions-grid .rz-column-title:first-child {
    text-align: center;
}

.npa-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--ui-primary);
    cursor: pointer;
}

.npa-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 768px) {
    .rz-sidebar {
        width: 248px !important;
    }

    .container,
    .container:has(.nplaner-home) {
        padding: 0.9rem !important;
    }

    .npa-details-card {
        grid-template-columns: 1fr;
    }

    .npa-details-actions {
        justify-content: flex-start;
    }
}

/* Brand color override: neutral business blue, no green accent */
:root {
    --ui-primary: #2563eb;
    --ui-primary-dark: #1d4ed8;
    --ui-primary-soft: #eff6ff;
    --ui-blue: #2563eb;
    --ui-indigo: #4338ca;
    --np-teal: #2563eb;
    --np-teal-2: #60a5fa;
    --rz-primary: #2563eb !important;
    --rz-primary-dark: #1d4ed8 !important;
    --rz-primary-light: #60a5fa !important;
}

.nplaner-logo-icon,
.nplaner-user-avatar,
.admin-hero-icon,
.npa-dialog-header > .material-symbols-outlined {
    background: linear-gradient(135deg, #2563eb, #4338ca) !important;
}

.rz-button.rz-variant-filled.rz-primary,
.admin-primary-action.rz-button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 10px 22px rgba(37,99,235,0.18) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: #1d4ed8 !important;
    background: linear-gradient(135deg, #eff6ff, #f5f7ff) !important;
    box-shadow: inset 3px 0 0 #2563eb, 0 5px 12px rgba(37,99,235,0.08) !important;
}

.admin-eyebrow,
.nplaner-home-kicker,
.admin-metric .material-symbols-outlined,
.nplaner-footer-dot {
    color: #1d4ed8 !important;
}

.admin-metric .material-symbols-outlined {
    background: #eff6ff !important;
}

.nplaner-action-card--admin {
    background: linear-gradient(135deg, #2563eb, #4338ca) !important;
}

.rz-cell-filter .rz-textbox:focus,
.rz-textbox:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: #f8fbff !important;
}

.admin-status--success {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

/* Visual polish: clear, modern, light administration UI */
:root {
    --ui-font: 'Manrope', 'Segoe UI', sans-serif;
    --ui-display: 'Sora', 'Manrope', sans-serif;
    --ui-bg: #f6f8fc;
    --ui-bg-strong: #eef3fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-text: #111827;
    --ui-muted: #667085;
    --ui-soft: #98a2b3;
    --ui-border: #dbe4f0;
    --ui-border-strong: #cbd5e1;
    --ui-primary: #3157d5;
    --ui-primary-dark: #2444ad;
    --ui-primary-soft: #eef3ff;
    --ui-accent: #0ea5e9;
    --ui-warning: #b54708;
    --ui-danger: #b42318;
    --ui-success: #067647;
    --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ui-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.07);
    --ui-shadow-md: 0 18px 50px rgba(16, 24, 40, 0.12);
    --ui-radius: 16px;
    --rz-font-family: var(--ui-font) !important;
    --rz-primary: var(--ui-primary) !important;
    --rz-primary-dark: var(--ui-primary-dark) !important;
    --rz-primary-light: #6d8df2 !important;
    --rz-text-color: var(--ui-text) !important;
    --rz-text-secondary-color: var(--ui-muted) !important;
}

html,
body,
.rz-layout,
.rz-component,
.rz-button,
.rz-inputtext,
.rz-dropdown,
.rz-dialog,
.rz-notification {
    font-family: var(--ui-font) !important;
}

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(49, 87, 213, 0.09), transparent 28rem),
        radial-gradient(circle at 100% 8%, rgba(15, 118, 110, 0.07), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, var(--ui-bg) 45%, #f7f8fb 100%) !important;
    color: var(--ui-text) !important;
}

body::before {
    background-image:
        linear-gradient(rgba(49, 87, 213, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 87, 213, 0.045) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 65%) !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.rz-header {
    height: 64px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid rgba(219, 228, 240, 0.9) !important;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06) !important;
}

.rz-sidebar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 10px 0 35px rgba(16, 24, 40, 0.06) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 42px !important;
    margin: 4px 12px !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 13px !important;
    color: var(--ui-muted) !important;
    font-weight: 700 !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: var(--ui-primary-dark) !important;
    background: var(--ui-primary-soft) !important;
    transform: translateX(2px);
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: var(--ui-primary-dark) !important;
    background: linear-gradient(135deg, #eef3ff, #f8fbff) !important;
    box-shadow: inset 3px 0 0 var(--ui-primary), 0 10px 22px rgba(49, 87, 213, 0.10) !important;
}

.rz-sidebar .rz-navigation-item-icon {
    color: currentColor !important;
    opacity: 0.9 !important;
}

.nplaner-logo-icon,
.nplaner-user-avatar,
.admin-hero-icon,
.npa-dialog-header > .material-symbols-outlined {
    background: linear-gradient(135deg, var(--ui-primary), #1d4ed8) !important;
    box-shadow: 0 12px 28px rgba(49, 87, 213, 0.22) !important;
}

.nplaner-logo-text,
.admin-hero h1,
.nplaner-home-hero h1,
.login-hero-title,
.login-form-title,
.admin-table-title h2,
.npa-dialog h3 {
    font-family: var(--ui-display) !important;
    letter-spacing: -0.035em !important;
}

.nplaner-logo-text {
    color: var(--ui-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.nplaner-user-trigger {
    background: #fff !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.nplaner-user-trigger:hover {
    border-color: #b8c7e6 !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.container {
    max-width: 1480px !important;
    padding: 1.4rem 1.6rem !important;
}

.admin-page,
.nplaner-home {
    animation: ui-rise 0.32s ease-out both;
}

@keyframes ui-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-hero,
.nplaner-home-hero {
    border: 1px solid rgba(219, 228, 240, 0.95) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,251,255,0.92)),
        radial-gradient(circle at 100% 0%, rgba(49, 87, 213, 0.12), transparent 22rem) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.admin-hero h1,
.nplaner-home-hero h1 {
    color: var(--ui-text) !important;
    font-weight: 800 !important;
}

.admin-hero p,
.nplaner-home-hero p,
.admin-table-title p {
    color: var(--ui-muted) !important;
    line-height: 1.55 !important;
}

.admin-eyebrow,
.nplaner-home-kicker {
    color: var(--ui-primary-dark) !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
}

.admin-metrics {
    gap: 1rem !important;
}

.admin-metric {
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: var(--ui-shadow-xs) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-metric:hover {
    transform: translateY(-2px);
    border-color: #c5d2ef !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.admin-metric .material-symbols-outlined,
.admin-table-title > .material-symbols-outlined,
.nplaner-action-card .material-symbols-outlined {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-dark) !important;
}

.admin-metric strong {
    font-family: var(--ui-display) !important;
    font-size: 1.35rem !important;
}

.admin-table-card,
.npa-dialog,
.npa-details-card,
.npa-permission-picker {
    border: 1px solid var(--ui-border) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.admin-table-title {
    padding-bottom: 0.9rem !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.admin-grid .rz-datatable,
.admin-grid .rz-grid-table,
.rz-data-grid,
.rz-datatable {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #edf1f7 !important;
}

.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid-table thead th {
    background: #f8fafc !important;
    color: #475467 !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e4e9f2 !important;
}

.rz-datatable .rz-datatable-tbody > tr > td,
.rz-grid-table tbody td {
    color: var(--ui-text) !important;
    border-bottom: 1px solid #edf1f7 !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td,
.rz-grid-table tbody tr:hover td {
    background: #f7fbff !important;
}

.rz-paginator {
    background: #fff !important;
    border-top: 1px solid #edf1f7 !important;
}

.rz-button {
    min-height: 36px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
}

.rz-button.rz-variant-filled.rz-primary,
.admin-primary-action.rz-button,
.lf-submit {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 26px rgba(49, 87, 213, 0.22) !important;
}

.rz-button.rz-variant-filled.rz-primary:hover,
.admin-primary-action.rz-button:hover,
.lf-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(49, 87, 213, 0.28) !important;
}

.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-secondary {
    background: #fff !important;
    color: #344054 !important;
    border: 1px solid var(--ui-border) !important;
}

.rz-button.rz-danger {
    border: 0 !important;
    background: #fff1f3 !important;
    color: var(--ui-danger) !important;
}

.rz-button.rz-warning {
    background: #fff7ed !important;
    color: var(--ui-warning) !important;
}

.rz-button.rz-success {
    background: #ecfdf3 !important;
    color: var(--ui-success) !important;
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-inputtext,
.lf-input {
    border-radius: 13px !important;
    border-color: var(--ui-border) !important;
    background: #fff !important;
    color: var(--ui-text) !important;
}

.rz-textbox:focus,
.rz-password:focus,
.rz-inputtext:focus,
.lf-input:focus,
.rz-dropdown:focus-within {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.12) !important;
}

.rz-form-field-label,
.lf-label {
    color: #475467 !important;
    font-weight: 800 !important;
}

.rz-badge {
    padding: 0.28rem 0.58rem !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

.admin-status {
    gap: 0.35rem !important;
    padding: 0.32rem 0.62rem !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.admin-status--success {
    color: var(--ui-success) !important;
    background: #ecfdf3 !important;
}

.admin-status--danger {
    color: var(--ui-danger) !important;
    background: #fff1f3 !important;
}

.admin-status--info {
    color: var(--ui-primary-dark) !important;
    background: var(--ui-primary-soft) !important;
}

.npa-overlay {
    background: rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
}

.npa-dialog {
    padding: 1.2rem !important;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.24) !important;
}

.npa-dialog-header {
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.npa-dialog-header p,
.npa-section-label,
.npa-permission-summary {
    color: var(--ui-muted) !important;
}

.npa-details-card,
.npa-permission-picker {
    background: #fbfcff !important;
    box-shadow: none !important;
}

.npa-bulk-actions .rz-button {
    min-height: 32px !important;
    border-radius: 999px !important;
}

.npa-checkbox {
    width: 19px !important;
    height: 19px !important;
    accent-color: var(--ui-primary) !important;
}

.rz-notification,
.rz-notification-item,
.rz-growl,
.rz-growl-item,
.rz-toast,
.rz-toast-message {
    border-radius: 16px !important;
    font-family: var(--ui-font) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.rz-notification-message,
.rz-growl-message,
.rz-toast-detail {
    color: var(--ui-muted) !important;
    font-weight: 600 !important;
}

.rz-notification-title,
.rz-growl-title,
.rz-toast-summary {
    color: var(--ui-text) !important;
    font-family: var(--ui-display) !important;
    font-weight: 800 !important;
}

.nplaner-action-card {
    border-radius: 20px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.nplaner-action-card:hover {
    transform: translateY(-3px) !important;
    border-color: #c5d2ef !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.nplaner-action-card--admin {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    border: 0 !important;
}

.nplaner-action-card--admin .material-symbols-outlined {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}

.login-page {
    font-family: var(--ui-font) !important;
    background: var(--ui-bg) !important;
}

.login-left {
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 20rem),
        linear-gradient(135deg, #17306f 0%, var(--ui-primary) 54%, #0ea5e9 140%) !important;
}

.login-brand-icon,
.login-feature .material-symbols-outlined {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}

.login-form-wrap {
    border: 1px solid var(--ui-border) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: var(--ui-shadow-md) !important;
    padding: 2rem !important;
}

.login-error-box {
    border: 1px solid #fecdd3 !important;
    border-radius: 16px !important;
    background: #fff1f3 !important;
    color: var(--ui-danger) !important;
}

#blazor-error-ui {
    font-family: var(--ui-font) !important;
    background: #fff1f3 !important;
    color: var(--ui-danger) !important;
    border-top: 1px solid #fecdd3 !important;
    box-shadow: 0 -14px 38px rgba(180, 35, 24, 0.12) !important;
}

@media (max-width: 768px) {
    .rz-header {
        height: 58px !important;
    }

    .container,
    .container:has(.nplaner-home) {
        padding: 0.9rem !important;
    }

    .admin-hero,
    .nplaner-home-hero {
        border-radius: 18px !important;
    }

    .admin-metrics,
    .nplaner-action-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Visual refinement v2: lighter weights, stronger readability, cleaner modern UI */
:root {
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f9fbfd;
    --ui-text: #0f172a;
    --ui-muted: #475569;
    --ui-soft: #64748b;
    --ui-border: #cfd8e6;
    --ui-border-strong: #b8c4d6;
    --ui-primary: #2454c6;
    --ui-primary-dark: #183f9c;
    --ui-primary-soft: #edf4ff;
    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --ui-shadow-md: 0 18px 46px rgba(15, 23, 42, 0.14);
}

html,
body {
    font-size: 15px !important;
    font-weight: 500 !important;
    text-rendering: geometricPrecision;
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(36, 84, 198, 0.08), transparent 26rem),
        linear-gradient(180deg, #f8fbff 0%, #f4f7fb 42%, #f6f8fb 100%) !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 430, 'GRAD' 0, 'opsz' 24 !important;
}

.rz-header {
    height: 60px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}

.rz-sidebar {
    background: #ffffff !important;
    box-shadow: 4px 0 22px rgba(15, 23, 42, 0.045) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 38px !important;
    margin: 3px 10px !important;
    border-radius: 10px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: var(--ui-primary-dark) !important;
    background: #f3f7ff !important;
    transform: none !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: var(--ui-primary-dark) !important;
    background: #edf4ff !important;
    box-shadow: inset 3px 0 0 var(--ui-primary) !important;
    font-weight: 700 !important;
}

.nplaner-logo-icon,
.nplaner-user-avatar,
.admin-hero-icon,
.npa-dialog-header > .material-symbols-outlined {
    background: #2454c6 !important;
    box-shadow: 0 8px 18px rgba(36, 84, 198, 0.18) !important;
}

.nplaner-logo-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
}

.nplaner-logo-text {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.nplaner-user-trigger {
    min-height: 38px !important;
    border-color: #d5deeb !important;
    box-shadow: none !important;
}

.nplaner-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-weight: 700 !important;
}

.nplaner-user-name {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.container {
    padding: 1.25rem 1.45rem !important;
}

.admin-page {
    gap: 1rem !important;
}

.admin-hero,
.nplaner-home-hero {
    border-color: #d6deea !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.96)),
        linear-gradient(90deg, rgba(36,84,198,0.09), transparent 55%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.admin-hero {
    padding: 1.15rem 1.2rem !important;
    gap: 0.9rem !important;
}

.admin-hero-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
}

.admin-hero-icon .material-symbols-outlined {
    font-size: 1.45rem !important;
}

.admin-hero h1,
.nplaner-home-hero h1 {
    color: #0f172a !important;
    font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
}

.admin-hero p,
.nplaner-home-hero p,
.admin-table-title p,
.npa-dialog-header p {
    color: #475569 !important;
    font-weight: 500 !important;
}

.admin-eyebrow,
.nplaner-home-kicker {
    color: #2454c6 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.admin-metrics {
    gap: 0.75rem !important;
}

.admin-metric {
    min-height: 70px !important;
    padding: 0.8rem 0.85rem !important;
    border-radius: 13px !important;
    border-color: #d8e1ee !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.admin-metric:hover {
    transform: none !important;
    border-color: #b9c8dc !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055) !important;
}

.admin-metric .material-symbols-outlined {
    width: 31px !important;
    height: 31px !important;
    border-radius: 9px !important;
    background: #edf4ff !important;
    color: #2454c6 !important;
    font-size: 1.15rem !important;
}

.admin-metric strong {
    color: #0f172a !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
}

.admin-metric small {
    color: #64748b !important;
    font-weight: 600 !important;
}

.admin-table-card,
.npa-dialog,
.npa-details-card,
.npa-permission-picker,
.login-form-wrap,
.nplaner-action-card {
    border-color: #d8e1ee !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.admin-table-card {
    padding: 0.85rem !important;
}

.admin-table-title {
    margin-bottom: 0.65rem !important;
    padding-bottom: 0.7rem !important;
    border-bottom-color: #e5eaf2 !important;
}

.admin-table-title > .material-symbols-outlined {
    width: 33px !important;
    height: 33px !important;
    border-radius: 9px !important;
    background: #edf4ff !important;
    color: #2454c6 !important;
}

.admin-table-title h2,
.npa-dialog h3,
.login-form-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.admin-table-title h2 {
    font-size: 0.98rem !important;
}

.admin-grid .rz-datatable,
.admin-grid .rz-grid-table,
.rz-data-grid,
.rz-datatable {
    border-radius: 12px !important;
    border-color: #dfe6f0 !important;
}

.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid-table thead th {
    background: #f3f6fa !important;
    color: #334155 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    border-bottom-color: #d9e2ee !important;
}

.rz-datatable .rz-datatable-tbody > tr > td,
.rz-grid-table tbody td {
    color: #1e293b !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-bottom-color: #edf1f6 !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td,
.rz-grid-table tbody tr:hover td {
    background: #f5f8fc !important;
}

.rz-cell-filter .rz-textbox,
.rz-filter-cell .rz-textbox {
    min-height: 32px !important;
    font-size: 0.82rem !important;
}

.rz-paginator {
    min-height: 42px !important;
    color: #475569 !important;
}

.rz-button {
    min-height: 33px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.rz-button .rz-button-icon-left,
.rz-button .rz-button-icon-right,
.rz-button .rz-button-icon {
    font-size: 1.05rem !important;
}

.rz-button.rz-variant-filled.rz-primary,
.admin-primary-action.rz-button,
.lf-submit {
    background: #2454c6 !important;
    box-shadow: 0 7px 16px rgba(36, 84, 198, 0.18) !important;
}

.rz-button.rz-variant-filled.rz-primary:hover,
.admin-primary-action.rz-button:hover,
.lf-submit:hover {
    transform: none !important;
    background: #1f49ad !important;
    box-shadow: 0 9px 20px rgba(36, 84, 198, 0.22) !important;
}

.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-secondary {
    color: #1e293b !important;
    border-color: #cfd8e6 !important;
    background: #ffffff !important;
}

.rz-button.rz-danger {
    color: #b42318 !important;
    background: #fff5f6 !important;
    border: 1px solid #fecdd3 !important;
}

.rz-button.rz-warning {
    color: #9a4a00 !important;
    background: #fff8ed !important;
    border: 1px solid #fed7aa !important;
}

.rz-button.rz-success {
    color: #067647 !important;
    background: #effdf5 !important;
    border: 1px solid #bbf7d0 !important;
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-inputtext,
.lf-input {
    min-height: 38px !important;
    border-radius: 10px !important;
    border-color: #cfd8e6 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
}

.rz-form-field-label,
.lf-label {
    color: #334155 !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

.rz-badge {
    padding: 0.23rem 0.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
}

.admin-status {
    min-height: 24px !important;
    padding: 0.26rem 0.54rem !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
}

.admin-status .material-symbols-outlined {
    font-size: 0.95rem !important;
}

.npa-dialog {
    padding: 1rem !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18) !important;
}

.npa-dialog-header > .material-symbols-outlined {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

.npa-section-label,
.npa-permission-summary {
    color: #475569 !important;
    font-weight: 650 !important;
}

.npa-details-card,
.npa-permission-picker {
    background: #f9fbfd !important;
    box-shadow: none !important;
}

.npa-bulk-actions .rz-button {
    min-height: 30px !important;
    border-radius: 9px !important;
}

.rz-notification,
.rz-notification-item,
.rz-growl,
.rz-growl-item,
.rz-toast,
.rz-toast-message {
    border-radius: 13px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
}

.rz-notification-title,
.rz-growl-title,
.rz-toast-summary {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.rz-notification-message,
.rz-growl-message,
.rz-toast-detail {
    color: #475569 !important;
    font-weight: 500 !important;
}

.nplaner-action-card {
    border-radius: 15px !important;
    padding: 1rem !important;
}

.nplaner-action-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

.nplaner-action-card strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.nplaner-action-card small {
    color: #475569 !important;
    font-weight: 500 !important;
}

.nplaner-action-card--admin {
    background: #2454c6 !important;
}

.nplaner-action-card--admin strong,
.nplaner-action-card--admin small {
    color: #ffffff !important;
}

.login-left {
    background:
        radial-gradient(circle at 14% 8%, rgba(255,255,255,0.20), transparent 18rem),
        radial-gradient(circle at 95% 88%, rgba(14,165,233,0.24), transparent 18rem),
        linear-gradient(135deg, #142d68 0%, #2454c6 66%, #0e7490 145%) !important;
}

.login-form-wrap {
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10) !important;
}

.login-hero-title,
.login-form-title {
    font-weight: 700 !important;
}

.login-hero-sub,
.login-form-sub {
    color: #475569 !important;
    font-weight: 500 !important;
}

.login-left .login-hero-sub,
.login-left .login-feature,
.login-left-footer {
    color: rgba(255,255,255,0.78) !important;
}

.lf-submit {
    min-height: 42px !important;
    border-radius: 11px !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    html,
    body {
        font-size: 14px !important;
    }

    .admin-hero {
        padding: 1rem !important;
    }

    .admin-table-card {
        padding: 0.7rem !important;
    }
}

/* Premium cockpit redesign v3: modern, refined, high-contrast, pleasant */
:root {
    --ui-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --ui-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    --ui-ink: #0b1220;
    --ui-ink-2: #172033;
    --ui-muted: #526174;
    --ui-soft: #7b8798;
    --ui-line: #d6deea;
    --ui-line-2: #e7edf5;
    --ui-panel: rgba(255, 255, 255, 0.88);
    --ui-panel-solid: #ffffff;
    --ui-page: #f3f6fb;
    --ui-blue: #2563eb;
    --ui-blue-2: #0ea5e9;
    --ui-navy: #0f172a;
    --ui-navy-2: #111c34;
    --ui-lilac: #eef2ff;
    --ui-cyan: #e8f7ff;
    --ui-ring: rgba(37, 99, 235, 0.16);
    --ui-glow: 0 22px 60px rgba(15, 23, 42, 0.10);
    --ui-hover: 0 18px 42px rgba(15, 23, 42, 0.10);
    --rz-font-family: var(--ui-font) !important;
    --rz-primary: var(--ui-blue) !important;
    --rz-primary-dark: #1d4ed8 !important;
    --rz-text-color: var(--ui-ink) !important;
    --rz-text-secondary-color: var(--ui-muted) !important;
}

html,
body,
.rz-component,
.rz-button,
.rz-inputtext,
.rz-dropdown,
.rz-dialog,
.rz-notification {
    font-family: var(--ui-font) !important;
}

html,
body {
    font-size: 15px !important;
    color: var(--ui-ink) !important;
    background: var(--ui-page) !important;
}

body {
    background:
        radial-gradient(circle at 6% 4%, rgba(37, 99, 235, 0.14), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.12), transparent 26rem),
        radial-gradient(circle at 60% 105%, rgba(99, 102, 241, 0.10), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #f3f6fb 42%, #eef3f9 100%) !important;
}

body::before {
    opacity: 0.75 !important;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    mask-image: radial-gradient(circle at 45% 0%, rgba(0,0,0,0.62), transparent 72%) !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 460, 'GRAD' -10, 'opsz' 24 !important;
}

.rz-layout {
    background: transparent !important;
}

.rz-header {
    height: 64px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    border-bottom: 1px solid rgba(214, 222, 234, 0.86) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 30px rgba(15, 23, 42, 0.055) !important;
}

.rz-header .rz-sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: #516074 !important;
}

.rz-header .rz-sidebar-toggle:hover {
    color: var(--ui-blue) !important;
    background: #eef4ff !important;
}

.rz-sidebar {
    width: 274px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.30), transparent 13rem),
        radial-gradient(circle at 90% 18%, rgba(14, 165, 233, 0.18), transparent 12rem),
        linear-gradient(180deg, #0a1020 0%, #111827 55%, #0b1220 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 18px 0 45px rgba(15, 23, 42, 0.18) !important;
    padding-top: 0.85rem !important;
}

.sidebar-workspace {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    margin: 0.35rem 0.85rem 0.9rem;
    padding: 0.82rem;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.sidebar-workspace-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.sidebar-workspace strong {
    display: block;
    color: #fff;
    font-family: var(--ui-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.sidebar-workspace span:not(.material-symbols-outlined) {
    display: block;
    margin-top: 0.1rem;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.72rem;
    font-weight: 500;
}

.rz-sidebar .rz-panel-menu {
    background: transparent !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 42px !important;
    margin: 4px 0.85rem !important;
    padding: 0.68rem 0.82rem !important;
    border-radius: 14px !important;
    color: rgba(226, 232, 240, 0.72) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.09) !important;
    transform: translateX(2px) !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(37,99,235,0.92), rgba(14,165,233,0.78)) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255,255,255,0.16) !important;
    font-weight: 700 !important;
}

.rz-sidebar .rz-navigation-item-icon {
    color: currentColor !important;
    opacity: 0.92 !important;
}

.sidebar-version {
    margin: 1rem 1rem 0;
    padding: 0.9rem 0.2rem 0;
    color: rgba(226, 232, 240, 0.42) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.nplaner-logo {
    gap: 0.72rem !important;
}

.nplaner-logo-icon,
.nplaner-user-avatar,
.admin-hero-icon,
.npa-dialog-header > .material-symbols-outlined {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24) !important;
}

.nplaner-logo-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
}

.nplaner-logo-text {
    color: #0b1220 !important;
    font-family: var(--ui-display) !important;
    font-size: 1.16rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

.nplaner-user-trigger {
    min-height: 42px !important;
    padding: 0.28rem 0.76rem 0.28rem 0.34rem !important;
    border: 1px solid rgba(214, 222, 234, 0.95) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.82) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055) !important;
}

.nplaner-user-trigger:hover {
    border-color: #b7c7df !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

.container {
    max-width: 1520px !important;
    padding: 1.35rem 1.55rem !important;
}

.admin-page {
    gap: 1.08rem !important;
}

.admin-hero,
.nplaner-home-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214, 222, 234, 0.92) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(37, 99, 235, 0.16), transparent 17rem),
        radial-gradient(circle at 60% 120%, rgba(14, 165, 233, 0.12), transparent 17rem),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(249,251,255,0.89)) !important;
    box-shadow: var(--ui-glow) !important;
}

.admin-hero::after,
.nplaner-home-hero::after {
    content: '';
    position: absolute;
    inset: auto -12% -58% 44%;
    height: 170px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.13), transparent 62%);
}

.admin-hero {
    padding: 1.32rem 1.45rem !important;
    gap: 1rem !important;
}

.admin-hero-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
}

.admin-hero h1,
.nplaner-home-hero h1 {
    color: var(--ui-ink) !important;
    font-family: var(--ui-display) !important;
    font-size: clamp(1.65rem, 2.2vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
}

.admin-hero p,
.nplaner-home-hero p,
.admin-table-title p,
.npa-dialog-header p {
    color: #526174 !important;
    font-size: 0.91rem !important;
    line-height: 1.55 !important;
}

.admin-eyebrow,
.nplaner-home-kicker {
    color: #1d4ed8 !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

.admin-metrics {
    gap: 0.95rem !important;
}

.admin-metric {
    position: relative;
    overflow: hidden;
    min-height: 82px !important;
    padding: 0.95rem !important;
    border: 1px solid rgba(214, 222, 234, 0.92) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.90) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.admin-metric::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #2563eb, #0ea5e9);
    opacity: 0.78;
}

.admin-metric:hover {
    transform: translateY(-2px) !important;
    border-color: #b9c8dd !important;
    box-shadow: var(--ui-hover) !important;
}

.admin-metric .material-symbols-outlined {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #edf4ff, #e8f7ff) !important;
    color: #1d4ed8 !important;
}

.admin-metric strong {
    color: #0b1220 !important;
    font-family: var(--ui-display) !important;
    font-size: 1.32rem !important;
    font-weight: 700 !important;
}

.admin-metric small {
    color: #526174 !important;
    font-size: 0.77rem !important;
    font-weight: 600 !important;
}

.admin-table-card,
.npa-dialog,
.login-form-wrap,
.nplaner-action-card {
    border: 1px solid rgba(214, 222, 234, 0.94) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.90) !important;
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.075) !important;
}

.admin-table-card {
    padding: 1.02rem !important;
}

.admin-table-title {
    padding-bottom: 0.95rem !important;
    margin-bottom: 0.85rem !important;
    border-bottom: 1px solid #e6edf6 !important;
}

.admin-table-title > .material-symbols-outlined {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #edf4ff, #e8f7ff) !important;
    color: #1d4ed8 !important;
}

.admin-table-title h2,
.npa-dialog h3,
.login-form-title {
    color: var(--ui-ink) !important;
    font-family: var(--ui-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

.admin-table-title h2 {
    font-size: 1.05rem !important;
}

.admin-grid .rz-datatable,
.admin-grid .rz-grid-table,
.rz-data-grid,
.rz-datatable {
    border: 1px solid #dfe7f1 !important;
    border-radius: 17px !important;
    background: #fff !important;
}

.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid-table thead th {
    background: linear-gradient(180deg, #f7faff, #f1f5fb) !important;
    color: #334155 !important;
    font-size: 0.71rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #dbe5f0 !important;
}

.rz-datatable .rz-datatable-tbody > tr > td,
.rz-grid-table tbody td {
    color: #172033 !important;
    font-size: 0.88rem !important;
    font-weight: 520 !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td,
.rz-grid-table tbody tr:hover td {
    background: #f6faff !important;
}

.rz-paginator {
    background: #ffffff !important;
    color: #526174 !important;
}

.rz-button {
    min-height: 36px !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

.rz-button.rz-variant-filled.rz-primary,
.admin-primary-action.rz-button,
.lf-submit {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22) !important;
}

.rz-button.rz-variant-filled.rz-primary:hover,
.admin-primary-action.rz-button:hover,
.lf-submit:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28) !important;
}

.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-secondary {
    color: #172033 !important;
    border: 1px solid #d6deea !important;
    background: rgba(255,255,255,0.92) !important;
}

.rz-button.rz-light:hover,
.rz-button.rz-base:hover,
.rz-button.rz-secondary:hover {
    border-color: #bac7d9 !important;
    background: #f8fbff !important;
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-inputtext,
.lf-input {
    min-height: 40px !important;
    border-radius: 13px !important;
    border: 1px solid #cfd8e6 !important;
    background: #ffffff !important;
    color: #0b1220 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

.rz-textbox:focus,
.rz-password:focus,
.rz-inputtext:focus,
.lf-input:focus,
.rz-dropdown:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px var(--ui-ring) !important;
}

.rz-form-field-label,
.lf-label {
    color: #334155 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.rz-badge,
.admin-status {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.admin-status--success {
    color: #047857 !important;
    background: #ecfdf5 !important;
}

.admin-status--danger {
    color: #be123c !important;
    background: #fff1f2 !important;
}

.admin-status--info {
    color: #1d4ed8 !important;
    background: #edf4ff !important;
}

.npa-dialog {
    padding: 1.18rem !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

.npa-overlay {
    background: rgba(11, 18, 32, 0.42) !important;
    backdrop-filter: blur(15px) saturate(130%) !important;
}

.npa-dialog-header {
    border-bottom-color: #e6edf6 !important;
}

.npa-details-card,
.npa-permission-picker {
    border: 1px solid #dfe7f1 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fbfdff, #f7faff) !important;
    box-shadow: none !important;
}

.npa-bulk-actions .rz-button {
    border-radius: 999px !important;
}

.rz-notification,
.rz-notification-item,
.rz-growl,
.rz-growl-item,
.rz-toast,
.rz-toast-message {
    border: 1px solid rgba(214, 222, 234, 0.95) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16) !important;
}

.nplaner-home-hero {
    min-height: 220px !important;
    padding: 2.2rem !important;
}

.nplaner-action-grid {
    gap: 1rem !important;
}

.nplaner-action-card {
    min-height: 150px !important;
    padding: 1.2rem !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.nplaner-action-card:hover {
    transform: translateY(-4px) !important;
    border-color: #b8c8dc !important;
    box-shadow: var(--ui-hover) !important;
}

.nplaner-action-card .material-symbols-outlined {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #edf4ff, #e8f7ff) !important;
    color: #1d4ed8 !important;
}

.nplaner-action-card strong {
    font-family: var(--ui-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}

.nplaner-action-card--admin {
    background:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,0.22), transparent 12rem),
        linear-gradient(135deg, #2563eb, #1e40af) !important;
}

.login-left {
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,0.24), transparent 17rem),
        radial-gradient(circle at 92% 86%, rgba(14,165,233,0.28), transparent 20rem),
        linear-gradient(135deg, #071123 0%, #173b8f 58%, #075985 145%) !important;
}

.login-form-wrap {
    border-radius: 26px !important;
    background: rgba(255,255,255,0.94) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14) !important;
}

.login-hero-title,
.login-form-title {
    font-family: var(--ui-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.06em !important;
}

.login-feature {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0.48rem 0.68rem;
    width: fit-content;
}

.lf-submit {
    min-height: 46px !important;
    border-radius: 15px !important;
}

@media (max-width: 768px) {
    .rz-sidebar {
        width: 258px !important;
    }

    .sidebar-workspace {
        margin: 0.25rem 0.7rem 0.75rem;
    }

    .container,
    .container:has(.nplaner-home) {
        padding: 0.85rem !important;
    }

    .admin-hero,
    .nplaner-home-hero,
    .admin-table-card,
    .npa-dialog,
    .nplaner-action-card {
        border-radius: 18px !important;
    }
}

/* Coherent redesign v4: one visual language, no mixed themes */
:root {
    --ui-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --ui-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    --ui-bg: #f5f7fb;
    --ui-shell: #ffffff;
    --ui-card: #ffffff;
    --ui-card-soft: #f8fafc;
    --ui-text: #111827;
    --ui-text-2: #243044;
    --ui-muted: #5f6f85;
    --ui-subtle: #8a98ad;
    --ui-border: #d8e0eb;
    --ui-border-soft: #e8edf5;
    --ui-primary: #1f5eff;
    --ui-primary-2: #0ea5e9;
    --ui-primary-dark: #1745bd;
    --ui-primary-soft: #eef5ff;
    --ui-danger: #d92d20;
    --ui-success: #079455;
    --ui-warning: #b54708;
    --ui-shadow-card: 0 10px 28px rgba(17, 24, 39, 0.06);
    --ui-shadow-pop: 0 24px 70px rgba(17, 24, 39, 0.16);
    --rz-font-family: var(--ui-font) !important;
    --rz-primary: var(--ui-primary) !important;
    --rz-primary-dark: var(--ui-primary-dark) !important;
    --rz-text-color: var(--ui-text) !important;
    --rz-text-secondary-color: var(--ui-muted) !important;
}

html,
body,
.rz-component,
.rz-button,
.rz-inputtext,
.rz-dropdown,
.rz-dialog,
.rz-notification {
    font-family: var(--ui-font) !important;
}

html,
body {
    font-size: 15px !important;
    color: var(--ui-text) !important;
    background: var(--ui-bg) !important;
}

body {
    background:
        radial-gradient(circle at 18% -12%, rgba(31, 94, 255, 0.10), transparent 28rem),
        radial-gradient(circle at 92% 2%, rgba(14, 165, 233, 0.09), transparent 26rem),
        linear-gradient(180deg, #f9fbff 0%, #f5f7fb 38%, #f3f6fa 100%) !important;
}

body::before {
    display: none !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 430, 'GRAD' 0, 'opsz' 24 !important;
}

.rz-layout {
    background: transparent !important;
}

.rz-header {
    height: 62px !important;
    padding: 0 1.3rem !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 2px 14px rgba(17, 24, 39, 0.04) !important;
}

.rz-header .rz-sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: #526174 !important;
}

.rz-header .rz-sidebar-toggle:hover {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

.rz-sidebar {
    width: 248px !important;
    padding-top: 0.9rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 8px 0 28px rgba(17, 24, 39, 0.045) !important;
}

.rz-sidebar .rz-panel-menu {
    background: transparent !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper {
    min-height: 40px !important;
    margin: 3px 0.8rem !important;
    padding: 0.62rem 0.78rem !important;
    border-radius: 12px !important;
    color: #526174 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.88rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper:hover {
    color: var(--ui-primary-dark) !important;
    background: #f1f6ff !important;
    transform: none !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item > .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper {
    color: var(--ui-primary-dark) !important;
    background: linear-gradient(135deg, #edf5ff, #f7fbff) !important;
    box-shadow: inset 3px 0 0 var(--ui-primary), 0 8px 18px rgba(31, 94, 255, 0.08) !important;
    font-weight: 750 !important;
}

.rz-sidebar .rz-navigation-item-icon {
    color: currentColor !important;
    opacity: 0.95 !important;
}

.sidebar-version {
    margin: 1rem 1rem 0 !important;
    padding: 0.9rem 0.15rem 0 !important;
    border-top: 1px solid var(--ui-border-soft) !important;
    color: var(--ui-subtle) !important;
}

.nplaner-logo-icon,
.nplaner-user-avatar,
.admin-hero-icon,
.npa-dialog-header > .material-symbols-outlined {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
    box-shadow: 0 10px 22px rgba(31, 94, 255, 0.20) !important;
}

.nplaner-logo-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
}

.nplaner-logo-text {
    color: var(--ui-text) !important;
    font-family: var(--ui-display) !important;
    font-size: 1.13rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.nplaner-user-trigger {
    min-height: 40px !important;
    padding: 0.28rem 0.75rem 0.28rem 0.35rem !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.045) !important;
}

.nplaner-user-name {
    color: var(--ui-text-2) !important;
    font-weight: 650 !important;
}

.rz-body {
    background: transparent !important;
}

.container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 1.35rem 1.4rem 2rem !important;
}

.container:has(.nplaner-home) {
    max-width: 1240px !important;
    padding: 1.35rem 1.4rem 2rem !important;
}

.admin-page,
.nplaner-home {
    gap: 1rem !important;
}

.admin-hero,
.nplaner-home-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: unset !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 94, 255, 0.10), transparent 18rem),
        linear-gradient(135deg, #ffffff 0%, #fbfdff 100%) !important;
    box-shadow: var(--ui-shadow-card) !important;
}

.admin-hero::after,
.nplaner-home-hero::after {
    display: none !important;
}

.admin-hero {
    padding: 1.15rem 1.25rem !important;
    gap: 0.9rem !important;
}

.nplaner-home-hero {
    padding: 1.7rem 1.8rem !important;
}

.admin-hero-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
}

.admin-hero h1,
.nplaner-home-hero h1 {
    color: var(--ui-text) !important;
    font-family: var(--ui-display) !important;
    font-size: clamp(1.55rem, 2vw, 2rem) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
}

.admin-hero p,
.nplaner-home-hero p,
.admin-table-title p,
.npa-dialog-header p {
    color: var(--ui-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.admin-eyebrow,
.nplaner-home-kicker {
    color: var(--ui-primary-dark) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
}

.admin-metrics,
.nplaner-action-grid {
    gap: 0.9rem !important;
}

.admin-metric,
.admin-table-card,
.npa-dialog,
.npa-details-card,
.npa-permission-picker,
.login-form-wrap,
.nplaner-action-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    background: var(--ui-card) !important;
    backdrop-filter: none !important;
    box-shadow: var(--ui-shadow-card) !important;
}

.admin-metric {
    min-height: 78px !important;
    padding: 0.9rem !important;
    overflow: hidden !important;
}

.admin-metric::before {
    display: none !important;
}

.admin-metric:hover,
.nplaner-action-card:hover {
    transform: translateY(-2px) !important;
    border-color: #b9c8db !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08) !important;
}

.admin-metric .material-symbols-outlined,
.admin-table-title > .material-symbols-outlined,
.nplaner-action-card .material-symbols-outlined {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

.admin-metric strong {
    color: var(--ui-text) !important;
    font-family: var(--ui-display) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.admin-metric small {
    color: var(--ui-muted) !important;
    font-weight: 600 !important;
}

.admin-table-card {
    padding: 0.95rem !important;
}

.admin-table-title {
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid var(--ui-border-soft) !important;
}

.admin-table-title h2,
.npa-dialog h3,
.login-form-title,
.nplaner-action-card strong {
    color: var(--ui-text) !important;
    font-family: var(--ui-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}

.admin-table-title h2 {
    font-size: 1.02rem !important;
}

.admin-grid .rz-datatable,
.admin-grid .rz-grid-table,
.rz-data-grid,
.rz-datatable {
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid-table thead th {
    background: #f7f9fc !important;
    color: #344054 !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--ui-border-soft) !important;
}

.rz-datatable .rz-datatable-tbody > tr > td,
.rz-grid-table tbody td {
    color: var(--ui-text-2) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td,
.rz-grid-table tbody tr:hover td {
    background: #f7fbff !important;
}

.rz-button {
    min-height: 35px !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.rz-button.rz-variant-filled.rz-primary,
.admin-primary-action.rz-button,
.lf-submit {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(31, 94, 255, 0.22) !important;
}

.rz-button.rz-variant-filled.rz-primary:hover,
.admin-primary-action.rz-button:hover,
.lf-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(31, 94, 255, 0.28) !important;
}

.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-secondary {
    color: var(--ui-text-2) !important;
    border: 1px solid var(--ui-border) !important;
    background: #fff !important;
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-inputtext,
.lf-input {
    min-height: 39px !important;
    border-radius: 11px !important;
    border: 1px solid var(--ui-border) !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

.rz-textbox:focus,
.rz-password:focus,
.rz-inputtext:focus,
.lf-input:focus,
.rz-dropdown:focus-within {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.12) !important;
}

.rz-form-field-label,
.lf-label {
    color: #344054 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.rz-badge,
.admin-status {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.admin-status--success {
    color: var(--ui-success) !important;
    background: #ecfdf3 !important;
}

.admin-status--danger {
    color: var(--ui-danger) !important;
    background: #fff1f3 !important;
}

.admin-status--info {
    color: var(--ui-primary-dark) !important;
    background: var(--ui-primary-soft) !important;
}

.npa-overlay {
    background: rgba(17, 24, 39, 0.34) !important;
    backdrop-filter: blur(10px) !important;
}

.npa-dialog {
    padding: 1.1rem !important;
    box-shadow: var(--ui-shadow-pop) !important;
}

.npa-details-card,
.npa-permission-picker {
    background: #f9fbfd !important;
    box-shadow: none !important;
}

.nplaner-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.nplaner-action-card {
    min-height: 138px !important;
    padding: 1rem !important;
}

.nplaner-action-card--admin {
    background:
        radial-gradient(circle at 92% 10%, rgba(255,255,255,0.20), transparent 10rem),
        linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    border-color: transparent !important;
}

.nplaner-action-card--admin .material-symbols-outlined {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

.nplaner-action-card--admin strong,
.nplaner-action-card--admin small {
    color: #fff !important;
}

.login-left {
    background:
        radial-gradient(circle at 20% 5%, rgba(255,255,255,0.20), transparent 18rem),
        linear-gradient(135deg, #0f172a 0%, #1f5eff 70%, #0ea5e9 140%) !important;
}

.login-form-wrap {
    border-radius: 22px !important;
    box-shadow: 0 24px 68px rgba(17, 24, 39, 0.12) !important;
}

.login-feature {
    width: fit-content !important;
    padding: 0.46rem 0.65rem !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.lf-submit {
    min-height: 44px !important;
    border-radius: 13px !important;
}

.rz-footer {
    background: rgba(255,255,255,0.76) !important;
    border-top: 1px solid var(--ui-border-soft) !important;
}

@media (max-width: 1200px) {
    .nplaner-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .rz-sidebar {
        width: 238px !important;
    }

    .container,
    .container:has(.nplaner-home) {
        max-width: 100% !important;
        padding: 0.85rem !important;
    }

    .nplaner-action-grid,
    .admin-metrics {
        grid-template-columns: 1fr !important;
    }

    .admin-hero,
    .nplaner-home-hero,
    .admin-table-card,
    .npa-dialog,
    .nplaner-action-card {
        border-radius: 16px !important;
    }
}

/* Wide layout: szerszy kontener dla komfortowego wyświetlania list */
.container,
.container:has(.nplaner-home),
.container:has(.admin-page) {
    max-width: 1600px !important;
}

/* Icon alignment fix */
.nplaner-action-card {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.nplaner-action-card .material-symbols-outlined,
.admin-metric .material-symbols-outlined,
.admin-table-title > .material-symbols-outlined,
.admin-hero-icon,
.nplaner-logo-icon,
.nplaner-user-avatar,
.npa-dialog-header > .material-symbols-outlined,
.admin-status .material-symbols-outlined,
.login-brand-icon,
.login-feature .material-symbols-outlined {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

.nplaner-action-card .material-symbols-outlined {
    margin-left: auto !important;
    margin-right: auto !important;
}

.admin-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.audit-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.audit-row .material-symbols-outlined {
    font-size: 20px;
    color: var(--rz-secondary-500, #6c757d);
    margin-top: 2px;
    flex-shrink: 0;
}
.audit-row div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.audit-row small {
    font-size: 0.75rem;
    color: var(--rz-secondary-500, #6c757d);
}
.audit-row strong {
    font-size: 0.875rem;
    word-break: break-all;
}

/* — Szczegóły użytkownika — */
.admin-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .admin-details-grid { grid-template-columns: 1fr; }
}

.admin-form-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--np-line, #e5e7eb);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb);
}
.admin-section-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--rz-primary, #3b82f6);
}
.admin-section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .admin-form-grid { grid-template-columns: 1fr; }
}

.admin-divider {
    border: none;
    border-top: 1px solid var(--rz-border-color, #e5e7eb);
    margin: 0;
}

.admin-hero-status {
    align-self: center;
}

.admin-hero-status .admin-status {
    min-height: 44px !important;
    padding: 0.55rem 0.9rem !important;
    gap: 0.5rem !important;
    font-size: 0.9rem !important;
}

.admin-hero-status .admin-status .material-symbols-outlined {
    font-size: 1.25rem !important;
}

.admin-user-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

@media (max-width: 700px) {
    .admin-user-detail-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.admin-breadcrumb {
    color: var(--rz-primary, #3b82f6);
    text-decoration: none;
    font-size: inherit;
}
.admin-breadcrumb:hover { text-decoration: underline; }

.admin-breadcrumbs {
    margin-bottom: 0.5rem;
}
.admin-breadcrumbs .rz-breadcrumb-item:last-child .rz-breadcrumb-item-link {
    color: var(--rz-text-color, #374151);
    font-weight: 500;
    pointer-events: none;
}

/* Balanced list columns */
.admin-grid .rz-grid-table,
.admin-grid table {
    width: 100% !important;
    table-layout: fixed !important;
}

.admin-grid .rz-datatable-data td,
.admin-grid .rz-grid-table tbody td {
    overflow-wrap: anywhere;
    word-break: normal;
}

.admin-grid .rz-cell-filter,
.admin-grid .rz-cell-filter .rz-textbox,
.admin-grid .rz-filter-cell,
.admin-grid .rz-filter-cell .rz-textbox {
    width: 100% !important;
    min-width: 0 !important;
}

.admin-grid .admin-actions {
    justify-content: center !important;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .admin-grid .rz-data-grid-data,
    .admin-grid .rz-datatable-scrollable-view {
        overflow-x: auto !important;
    }

    .admin-grid .rz-grid-table,
    .admin-grid table {
        min-width: 980px !important;
    }
}

/* Role picker: remove nested dropdown borders */
.admin-role-picker {
    width: 100%;
    flex-wrap: wrap !important;
}

.admin-role-dropdown {
    width: 220px !important;
    min-height: 42px !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.admin-role-dropdown:focus-within,
.admin-role-dropdown.rz-state-focused {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.12) !important;
}

.admin-role-dropdown .rz-dropdown-label,
.admin-role-dropdown .rz-inputtext {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 40px !important;
    text-align: center !important;
}

.admin-role-dropdown .rz-dropdown-trigger {
    width: 2.5rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
}

.admin-role-dropdown .rz-dropdown-trigger-icon {
    margin: 0 !important;
}

@media (max-width: 600px) {
    .admin-role-picker {
        align-items: stretch !important;
    }

    .admin-role-dropdown,
    .admin-role-picker .rz-button {
        width: 100% !important;
    }
}

/* Notifications: one clean surface without a nested card effect */
.rz-notification {
    inset-block-start: 1.25rem !important;
    inset-inline-end: 1.25rem !important;
    width: min(380px, calc(100vw - 2rem)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-notification-item-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 0.75rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-notification-item {
    min-height: 76px !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--ui-text, #111827) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}

.rz-notification-message-wrapper {
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.rz-notification-icon {
    margin-top: 0.1rem !important;
    font-size: 1.35rem !important;
}

.rz-notification-title {
    color: var(--ui-text, #111827) !important;
    font-family: var(--ui-font, sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.rz-notification-message {
    gap: 0.2rem !important;
    color: var(--ui-muted, #5f6f85) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.rz-notification-close {
    margin-top: 0.05rem !important;
    color: #64748b !important;
    font-size: 1.2rem !important;
    opacity: 0.7 !important;
}

.rz-notification-close:hover {
    opacity: 1 !important;
}

.rz-notification-success .rz-notification-icon { color: #079455 !important; }
.rz-notification-warn .rz-notification-icon { color: #d97706 !important; }
.rz-notification-error .rz-notification-icon { color: #d92d20 !important; }
.rz-notification-info .rz-notification-icon { color: #2563eb !important; }

@media (max-width: 600px) {
    .rz-notification {
        inset-block-start: 0.75rem !important;
        inset-inline: 0.75rem !important;
        width: auto !important;
    }
}

/* User menu popup: match width to trigger */
.nplaner-user-trigger {
    anchor-name: --nplaner-user-trigger !important;
}

.my-popup {
    min-width: 200px !important; /* fallback for browsers without anchor-size() */
    min-width: anchor-size(--nplaner-user-trigger width) !important;
}

/* Data grid pager */
.rz-pager {
    min-height: 56px !important;
    padding: 0.625rem 0.875rem !important;
    gap: 0.375rem !important;
    align-items: center !important;
    background: #fff !important;
    border-top: 1px solid #e7edf5 !important;
}

.rz-pager .rz-pager-element {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 9px !important;
}

.rz-pager .rz-dropdown {
    width: 76px !important;
    min-width: 76px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin-inline-start: 0.375rem !important;
    overflow: hidden !important;
    border: 1px solid #d7e0eb !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.rz-pager .rz-dropdown-label,
.rz-pager .rz-dropdown .rz-inputtext {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 1.75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    line-height: 34px !important;
    text-align: center !important;
}

.rz-pager .rz-dropdown-trigger {
    width: 2rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
}

.rz-pager .rz-dropdown-trigger-icon {
    margin: 0 !important;
}

.rz-pager .rz-pagesize-text {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    margin-inline-start: 0.25rem !important;
    color: #526174 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .rz-pager {
        justify-content: center !important;
        padding: 0.75rem !important;
    }

    .rz-pager .rz-pagesize-text {
        white-space: normal;
    }
}

/* Consistent text links */
a:not(.nplaner-logo):not(.nplaner-action-card),
a:not(.nplaner-logo):not(.nplaner-action-card):visited {
    color: #2563eb;
}

a:not(.nplaner-logo):not(.nplaner-action-card):hover {
    color: #1d4ed8;
}