/* Presentation only: existing navigation, forms and permission rules are retained. */
@media screen {
    :root {
        color-scheme: light;
        --paper: #f5f7f6;
        --ink: #20352d;
        --muted: #64756e;
        --line: #dce5e0;
        --navy: #176044;
        --olive-dark: #103c2f;
        --olive-panel: #143f32;
        --olive-light: #ffffff;
        --olive-accent: #61b58e;
        --olive-hover: #edf5f1;
        --surface-shadow: 0 3px 12px rgb(16 60 47 / 4%);
        color: var(--ink);
        background: var(--paper);
    }
    body { background: var(--paper); color: var(--ink); }
    h1 { color: var(--olive-dark); font-size: 25px; line-height: 1.3; }
    h2 { color: var(--olive-dark); font-size: 17px; }
    h3 { color: var(--olive-dark); }
    a { color: var(--navy); }
    :focus-visible { outline: 3px solid #3e9270; outline-offset: 3px; }
    button, .button, input, select, textarea { border-color: #cbdad2; border-radius: 6px; }
    button, .button { font-weight: 600; }
    button:hover:not(:disabled), .button:hover { background: var(--olive-hover); border-color: #8ab6a1; text-decoration: none; }
    button.primary, .button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
    button.primary:hover, .button.primary:hover { background: var(--olive-dark); border-color: var(--olive-dark); }
    input:not([type=checkbox]):not([type=radio]), select, textarea { background: #fff; color: var(--ink); }
    input:focus, select:focus, textarea:focus { border-color: #3e9270; }
    input[type=checkbox], input[type=radio] { accent-color: var(--navy); }
    input::placeholder, textarea::placeholder { color: #718179; }
    fieldset { border-radius: 7px; }

    /* Compact, inset navigation and dark chrome, using CBMS's existing items. */
    .app-layout { padding-inline-start: 238px; }
    .app-sidebar {
        inset-inline-start: 18px; top: 18px; bottom: 18px; width: 202px;
        padding: 22px 10px 14px !important;
        background: var(--olive-panel); color: #f0f7f3;
        border: 1px solid #2a5645; border-radius: 8px;
        box-shadow: 0 7px 18px rgb(16 60 47 / 11%);
    }
    .app-sidebar .wordmark { color: #ffffff; font-size: 22px; padding-inline: 10px; letter-spacing: -.7px; }
    .app-sidebar .sidebar-brand { display: block; flex-shrink: 0; padding: 0; overflow: hidden; border-radius: 6px; }
    .sidebar-logo { display: block; width: 100%; height: auto; object-fit: contain; margin-block: 0; }
    .app-sidebar nav { gap: 3px; margin-top: 22px !important; margin-bottom: 14px; scrollbar-color: #648e79 transparent; }
    .app-sidebar nav > a, .sidebar-section > summary {
        min-height: 44px; padding: 9px 10px; gap: 9px; border-radius: 5px;
        color: #e2efe8; font-size: 12px; font-weight: 650;
    }
    .app-sidebar nav > a:hover, .sidebar-section > summary:hover,
    .sidebar-section[open] > summary { background: #245843; color: #fff; text-decoration: none; }
    .sidebar-section { border-top: 1px solid #315b49; padding-top: 3px; }
    .sidebar-submenu { border-inline-start-color: #4f7864; margin-inline-start: 18px; padding-inline-start: 6px; }
    .sidebar-submenu a { color: #d6e8de; border-radius: 4px; padding: 8px; font-size: 12px; }
    .sidebar-group > summary { color: #b8d4c5; font-size: 11px; padding-inline: 8px; }
    .sidebar-submenu a:hover, .sidebar-group > summary:hover { background: #245843; color: #fff; text-decoration: none; }
    .app-sidebar nav > a[aria-current], .sidebar-submenu a[aria-current=page] {
        background: var(--olive-light); color: #154d37; border-inline-start: 3px solid var(--olive-accent); font-weight: 700;
    }
    .sidebar-account { border-color: #3c6552; padding: 16px 8px 0; color: #ffffff; }
    .sidebar-account small, .sidebar-signout { color: #c4ddce; }
    .sidebar-signout:hover { color: #fff; background: transparent !important; }
    .app-layout > header.app-topbar {
        position: sticky; top: 18px; z-index: 25; height: auto; min-height: 68px;
        margin: 18px 18px 0 0; margin-inline: 0 18px; padding: 10px 20px;
        background: var(--olive-dark); color: #ffffff; border: 1px solid #295b46;
        border-radius: 8px; box-shadow: 0 5px 18px rgb(16 60 47 / 10%);
    }
    .app-topbar .wordmark { color: #ffffff; }
    .header-logo { display: none; }
    .app-topbar .working-site label { color: #c2dcd0; font-size: 11px; }
    .app-topbar .working-site select { color: #ffffff; background: #1d503c; border: 1px solid #477a61; border-radius: 6px; padding-inline: 10px; }
    .app-topbar select option { background: #fff; color: var(--ink); }
    .app-topbar .header-tools select { background: #f3f7f4; color: #174d37; border-color: #e0e9e3; border-radius: 6px; }
    @media (min-width: 801px) {
        .app-layout .app-topbar #language { background: #1d503c; color: #fff; border: 1px solid #477a61; border-radius: 6px; }
        .app-layout .app-topbar #working-site,
        .app-layout .app-topbar #language { min-height: 34px; height: 34px; padding: 4px 8px; font-size: 12px; line-height: 1.4; }
    }
    .app-topbar .client-preview { color: #f0f7f3; }
    .app-topbar .client-preview[aria-disabled=true], .app-topbar .working-site select:disabled { color: #b9d3c5; }
    .app-topbar #connection-status { color: #d9ece2; }
    .app-topbar .connection:before { background: #83d7af; }
    .app-topbar .connection.offline:before { background: #efbe73; }
    .app-topbar :focus-visible { outline-color: #92ddba; }
    .app-layout > main { max-width: 1440px; padding: 24px 18px 50px 0; padding-inline: 0 18px; min-height: calc(100dvh - 110px); }
    .page-heading { margin-bottom: 18px; }
    .page-heading p { line-height: 1.6; }

    /* Consistent panels for dashboards, registers, reports and settings. */
    main > section, .dashboard-columns > section, .menu-directory > section,
    .project-card, .entry-panel, .material-register {
        background: #fff; border: 1px solid var(--line); border-radius: 8px;
        padding: 18px; box-shadow: var(--surface-shadow);
    }
    main > section, .dashboard-columns > section { margin-bottom: 18px; }
    .dashboard-columns { gap: 18px; }
    .section-heading { min-height: 40px; margin-bottom: 12px; }
    .dashboard-site .site-heading { padding: 0 0 16px; }
    .dashboard-stats { border: 1px solid var(--line); border-radius: 7px; background: #ffffff; padding: 20px 0; }
    .dashboard-stats > div { padding-inline: 18px; }
    .dashboard-stats strong { color: #174f39; font-size: 24px; font-weight: 700; }
    .dashboard-stats > div:nth-child(3) { background: var(--olive-light); }
    .dashboard-stats > div:nth-child(3) strong { color: #174f39; }
    .dashboard-actions { border-radius: 7px; border-color: var(--line); overflow: hidden; }
    .dashboard-actions > a, .dashboard-actions > button { background: #ffffff; color: var(--ink); min-height: 72px; }
    .dashboard-actions > a:hover, .dashboard-actions > button:hover { background: var(--olive-light); }
    .dashboard-actions .ui-icon { color: #267657; }
    .dashboard-empty-line, .empty { background: #f9fbfa; border: 1px dashed #cbded3; border-radius: 6px; }
    .dashboard-empty { padding: 22px; }
    .project-card { padding: 20px; }
    .project-card h2 { font-size: 18px; }
    .card-overline { color: #486e5c; }
    .record { padding: 14px 0; }
    .record strong { font-weight: 600; }
    .activity { padding: 14px 0; }
    .actual-cost-summary { border-color: var(--line); }
    .progress-track { background: #e2ede6; border-radius: 3px; height: 4px; }
    .progress-track > span { background: #368761; }
    .notice { background: var(--olive-hover); color: #275e45; border-inline-start-color: #63a888; border-radius: 4px; }
    .work-note { background: #f5f2e7; border-inline-start-color: #ab955b; color: #756039; border-radius: 4px; }
    .errors { border: 1px solid #ecc5bc; border-radius: 6px; }
    .filter-bar { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; gap: 12px; }
    .page-tabs { background: #fff; padding: 5px 12px; border: 1px solid var(--line); border-radius: 7px; gap: 4px 10px; }
    .page-tabs a { border-radius: 4px 4px 0 0; padding-inline: 10px; }
    .page-tabs a:hover, .page-tabs a[aria-current=page] { background: var(--olive-hover); text-decoration: none; }
    .menu-directory { gap: 18px; }
    .menu-directory-links > a:hover { background: #f0f7f3; text-decoration: none; }
    .menu-directory h3 { color: #4e7160; }
    main > .form-grid, main > .stack { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
    .entry-panel > section { padding: 0; border: 0; box-shadow: none; }
    .entry-dialog, dialog { border-radius: 9px; border-color: #cbded3; box-shadow: 0 20px 60px rgb(16 50 37 / 22%); }
    .entry-dialog::backdrop, dialog::backdrop { background: rgb(10 35 25 / 48%); }
    .dialog-header { background: #f3f8f5; padding: 20px 24px; }
    .dialog-header h2 { color: var(--olive-dark); }
    .dialog-close { border: 0; }
    .choice-button[aria-pressed=true] { background: var(--olive-light); border-color: #368761; box-shadow: inset 0 0 0 1px #368761; }
    .entry-launcher > summary, .account-popover { border-radius: 6px; }
    .account-popover { box-shadow: 0 10px 30px rgb(16 60 47 / 16%); }
    #update-notice {
        display: flex; align-items: center; justify-content: space-between; gap: 18px;
        inset-inline-start: auto; inset-inline-end: 20px; bottom: 20px;
        width: fit-content; max-width: calc(100vw - 40px); padding: 12px 14px 12px 18px;
        background: #fff; color: #20352d; border: 1px solid #d5e3db;
        border-inline-start: 3px solid #267657; border-radius: 12px;
        box-shadow: 0 8px 30px rgb(16 60 47 / 14%); z-index: 40;
    }
    #update-notice > span { font-size: 13px; font-weight: 500; line-height: 1.5; }
    #apply-update {
        flex-shrink: 0; margin: 0; min-height: 42px; padding: 10px 16px;
        background: #103c2f; color: #fff; border: 1px solid #103c2f;
        border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.4;
    }
    #apply-update:hover { background: #1d5942; border-color: #1d5942; }
    #apply-update:focus-visible { outline-color: #3e9270; outline-offset: 3px; }

    /* Guest and offline screens share the palette without changing their controls. */
    .guest-layout > header, body[data-authenticated=offline] > header {
        background: var(--olive-dark); color: #ffffff; border-bottom-color: #295b46;
        min-height: 68px; padding-block: 12px;
    }
    .guest-layout > header .wordmark, body[data-authenticated=offline] > header .wordmark { color: #ffffff; }
    .guest-layout .auth-panel { padding: 32px; border-radius: 9px; border-color: var(--line); box-shadow: 0 10px 35px rgb(16 60 47 / 7%); }

    @media (max-width: 1100px) {
        .app-layout { padding-inline-start: 220px; }
        .app-sidebar { width: 190px; inset-inline-start: 14px; top: 14px; bottom: 14px; }
        .app-layout > header.app-topbar { top: 14px; margin-top: 14px; margin-inline-end: 14px; padding-inline: 16px; }
        .app-layout > main { padding-inline: 0 14px; }
        .app-topbar .working-site { gap: 8px; }
        .app-topbar .working-site select { max-width: 200px !important; }
        .app-layout .header-tools { gap: 10px; }
        .dashboard-stats { padding: 0; }
        .dashboard-stats > div { padding: 18px; }
    }
    @media (max-width: 800px) {
        .app-topbar .header-brand-name { display: none; }
        .app-topbar .header-logo { display: block; width: 112px; height: auto; object-fit: contain; }
        .app-topbar > .wordmark { flex-shrink: 0; }
        #update-notice {
            inset-inline-end: 14px; max-width: calc(100vw - 28px);
            bottom: calc(84px + env(safe-area-inset-bottom)); gap: 12px; padding: 10px 12px;
        }
        .guest-layout #update-notice, [data-authenticated=offline] #update-notice {
            bottom: calc(20px + env(safe-area-inset-bottom));
        }
        .app-layout { padding-inline-start: 0; }
        .app-sidebar { display: none; }
        .app-layout > header.app-topbar { top: 0; margin: 0; padding: 12px 18px; border-radius: 0; border-inline: 0; border-top: 0; }
        .app-layout > main { padding: 22px 18px 100px; }
        .app-topbar .working-site select { max-width: calc(100vw - 145px) !important; }
        .app-layout > .workspace-nav { background: var(--olive-dark); border-top: 1px solid #386a50; box-shadow: 0 -4px 18px rgb(16 60 47 / 9%); }
        .workspace-nav > a { color: #dceee3; }
        .workspace-nav > a[aria-current] { color: #ffffff; background: #286147; border-top-color: #91d5b3; }
        .workspace-nav > a:hover { background: #286147; }
        .mobile-account > summary { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding-inline: 12px; }
    }
    @media (max-width: 580px) {
        h1 { font-size: 23px; }
        .app-layout > header.app-topbar { gap: 8px; padding: 10px 14px; }
        .app-layout .header-tools { gap: 6px; }
        .app-layout > main { padding: 20px 14px calc(100px + env(safe-area-inset-bottom)); }
        main > section, .dashboard-columns > section, .menu-directory > section, .project-card, .entry-panel { padding: 15px; }
        .dashboard-stats > div { padding: 14px 10px; }
        .dashboard-stats strong { font-size: 19px; letter-spacing: -.5px; }
        .dashboard-stats > div:nth-child(3) { border-end-start-radius: 6px; }
        .dashboard-actions > a, .dashboard-actions > button { padding: 12px 10px; }
        .filter-bar { padding: 14px; }
        .page-tabs { padding-inline: 6px; gap: 2px 4px; }
        .page-tabs a { padding-inline: 6px; }
        .guest-layout .auth-panel { padding: 24px 20px; }
        .dialog-header { padding: 18px; }
        .dialog-body { padding: 18px; }
        .entry-panel > section { padding: 0; }
    }

    .brand-tools-row, .site-context-bar { display: contents; }
    .app-layout .brand-tools-row > .wordmark { display: none; }
    .app-layout .site-context-bar .working-site { order: 1; }
    .app-layout .brand-tools-row .header-tools { order: 2; }
    .app-layout .site-context-bar .client-preview { order: 3; }

    /* Mobile branding and site context are separate visual bars. */
    @media (max-width: 800px) {
        .app-layout { --mobile-bar-height: 58px; }
        .app-layout > header.app-topbar { display: contents; }
        .app-layout .app-topbar .brand-tools-row {
            position: sticky; top: 0; z-index: 25;
            height: calc(var(--mobile-bar-height) + env(safe-area-inset-top));
            background: var(--olive-dark); color: #fff;
            display: grid; grid-template-columns: minmax(0, 1fr) auto 96px;
            align-items: center; gap: 2px 8px;
            padding: calc(4px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left));
        }
        .app-layout .brand-tools-row > .wordmark {
            grid-column: 1; grid-row: 1; min-width: 0; min-height: 44px;
            display: flex; align-items: center; margin: 0;
        }
        .app-layout .app-topbar .header-logo { width: 124px; max-width: 100%; max-height: 50px; height: auto; }
        .app-layout .app-topbar .header-tools { display: contents; }
        .app-layout .app-topbar #connection-status {
            grid-column: 2; grid-row: 1; gap: 5px; max-width: 85px;
            color: #bcd6c8; font-size: 10px !important; line-height: 1.4; overflow-wrap: anywhere;
        }
        .app-layout .app-topbar .header-tools > form { grid-column: 3; grid-row: 1; justify-self: end; width: 88px; margin: 0; min-width: 0; }
        .app-layout .app-topbar #language {
            width: 100%; max-width: none; min-height: 36px; height: 36px; padding: 4px;
            background: #1d503c; color: #fff; border: 1px solid #477a61;
            font-size: 14px; font-weight: 400; border-radius: 6px;
        }
        .app-layout .app-topbar .site-context-bar {
            display: flex; align-items: center; gap: 16px;
            padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
            background: #fff; border-bottom: 1px solid var(--line);
        }
        .app-layout .app-topbar .working-site {
            flex: 1; order: 0; width: 100%; min-width: 0;
            display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative;
            margin: 0; padding: 0; background: #f3f7f4; border: 1px solid #e0e9e3; border-radius: 6px;
        }
        .app-layout .app-topbar .working-site label {
            position: absolute; top: 4px; inset-inline-start: 10px;
            font-size: 10px; line-height: 12px; color: var(--muted);
        }
        .app-layout .app-topbar #working-site {
            display: block; width: 100%; max-width: 100% !important; min-height: 44px;
            height: 44px; padding: 14px 10px 0; margin: 0; font-size: 16px; font-weight: 500;
            background: transparent; color: var(--olive-dark); border: 0; border-radius: 4px; text-overflow: ellipsis;
        }
        .app-layout .app-topbar #working-site:disabled {
            background: transparent; color: var(--muted); cursor: default; opacity: 1;
        }
        .app-layout .app-topbar .client-preview {
            flex: 0 0 auto; align-self: center; justify-content: flex-end;
            min-width: 0; min-height: 44px; padding: 6px 0;
            background: transparent; border: 0; border-radius: 4px;
            color: var(--olive-dark); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: end;
            white-space: nowrap; text-decoration: none;
        }
        .app-layout .app-topbar a.client-preview:hover { color: var(--olive-hover); text-decoration: underline; }
        .app-layout .app-topbar .client-preview[aria-disabled=true] { color: var(--muted); cursor: default; }
        .app-topbar a:focus-visible, .app-topbar select:focus-visible { outline: 2px solid #92ddba; outline-offset: 2px; }
    }
    @media (max-height: 500px) and (max-width: 800px) {
        .app-layout .app-topbar .brand-tools-row { position: relative; }
    }
    @media (max-width: 800px) {
        .app-layout > .workspace-nav { padding-inline: 6px; height: calc(var(--mobile-bar-height) + env(safe-area-inset-bottom)); }
        .workspace-nav > a { padding-block: 6px; gap: 3px; }
        .app-layout > .workspace-nav:has(.mobile-account[open]) { z-index: 41; }
        .workspace-nav > .mobile-account {
            display: block; position: relative; flex: 1; min-width: 0; width: auto; margin: 0;
        }
        .workspace-nav > .mobile-account > summary {
            display: flex; flex-direction: column; justify-content: center; gap: 3px;
            height: 100%; min-width: 44px; min-height: 44px; padding: 6px 2px;
            color: #dceee3; background: transparent; border: 0; border-top: 2px solid transparent;
            border-radius: 0; font-size: 11px; font-weight: 400; line-height: normal;
        }
        .workspace-nav > .mobile-account[open] > summary {
            background: #286147; color: #fff; border-top-color: #91d5b3;
        }
        .workspace-nav .mobile-account .account-popover {
            top: auto; bottom: calc(100% + 8px); inset-inline-start: auto; inset-inline-end: 0;
            width: 240px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 100px);
            overflow-y: auto; color: var(--ink); text-align: start;
        }
        .workspace-nav .account-popover a { white-space: normal; border: 0; }
        .workspace-nav .account-popover button:hover { background: var(--olive-hover); }
    }
    @media (max-width: 380px) {
        .workspace-nav > a, .workspace-nav > .mobile-account > summary { font-size: 10px; }
    }
    html.mobile-more-open { overflow: hidden; }
    .mobile-more-drawer {
        position: fixed; inset-block: 0; inset-inline: auto 0; margin: 0;
        width: min(340px, 92vw); max-width: none; height: 100dvh; max-height: 100dvh;
        padding: 0; border: 0; border-inline-start: 1px solid #386a50; border-radius: 0;
        background: var(--olive-dark); color: #f0f7f3;
        box-shadow: -12px 0 40px rgb(0 0 0 / 20%);
    }
    .mobile-more-drawer[open] { display: flex; flex-direction: column; }
    .mobile-more-drawer::backdrop { background: rgb(9 27 21 / 48%); }
    .mobile-more-heading {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
        border-bottom: 1px solid #386a50; flex-shrink: 0;
    }
    .mobile-more-heading h2 { margin: 0; color: #fff; font-size: 18px; }
    .mobile-more-heading .mobile-more-close {
        width: 44px; height: 44px; padding: 0; margin: 0; font-size: 28px; line-height: 1;
        color: #fff; background: transparent; border: 0; border-radius: 6px;
    }
    .mobile-more-drawer > nav { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
    .mobile-more-drawer nav > a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 10px; color: #e2efe8; font-size: 13px; border-radius: 5px; }
    .mobile-more-drawer nav > a:hover, .mobile-more-close:hover { background: #245843; }
    .mobile-more-drawer nav > a[aria-current] { background: #286147; color: #fff; }
    .mobile-more-drawer :focus-visible { outline: 2px solid #92ddba; outline-offset: -2px; }

}

@media screen {
    .notification-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; background: transparent; border: 0; color: #9fc1af; border-radius: 6px; transition: color 140ms ease; }
    .app-topbar button.notification-trigger:hover,
    .app-topbar button.notification-trigger:active { background: transparent; color: #fff; border-color: transparent; box-shadow: none; }
    .notification-trigger .ui-icon { width: 21px; height: 21px; transition: transform 140ms ease; }
    .app-topbar button.notification-trigger:hover .ui-icon { color: #fff; transform: scale(1.08); }
    @media (prefers-reduced-motion: reduce) { .notification-trigger, .notification-trigger .ui-icon { transition: none; } }
    .notification-badge { position: absolute; top: 1px; inset-inline-end: 0; min-width: 16px; padding: 1px 3px; border-radius: 8px; background: #dbefb9; color: #143f32; border: 1px solid #143f32; font-size: 9px; font-weight: 700; line-height: 13px; }
    html.notification-open { overflow: hidden; }
    .notification-drawer { position: fixed; inset: auto; top: var(--notification-top, 60px); left: var(--notification-left, 12px); width: min(360px, calc(100vw - 24px)); max-width: none; height: auto; max-height: min(480px, calc(100dvh - var(--notification-top, 60px) - 16px)); margin: 0; padding: 0; border: 1px solid #dce6df; border-radius: 10px; background: #fff; color: #213e32; box-shadow: 0 12px 36px rgb(9 27 21 / 20%); overflow: hidden; }
    .notification-drawer[open] { display: flex; flex-direction: column; }
    .notification-drawer::backdrop { background: rgb(9 27 21 / 10%); }
    .notification-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px 4px 14px; border-bottom: 1px solid #e0e9e3; }
    .notification-heading h2 { margin: 0; font-size: 15px; }
    .notification-heading .notification-close { width: 44px; height: 44px; padding: 0; margin: 0; font-size: 28px; border: 0; background: transparent; color: #456557; }
    .notification-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 2px 8px; border-bottom: 1px solid #e0e9e3; }
    .notification-toolbar button { margin: 0; padding: 8px; font-size: 12px; border: 0; background: transparent; min-height: 44px; border-radius: 6px; }
    .notification-filters { display: flex; gap: 2px; }
    .notification-filters button[aria-pressed=true] { background: #edf4ef; color: #164b35; font-weight: 650; }
    .notification-toolbar .notification-read-all { color: #27593f; text-align: end; }
    .notification-body { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding-bottom: 0; }
    .notification-feedback { margin: 0; padding: 12px 18px; font-size: 13px; color: #617269; }
    .notification-feedback:empty { display: none; }
    .notification-empty { display: grid; justify-items: center; padding: 64px 24px; text-align: center; color: #698076; }
    .notification-empty .ui-icon { width: 36px; height: 36px; color: #8da999; }
    .notification-empty p { font-size: 14px; }
    .notification-list { padding: 0; margin: 0; list-style: none; }
    .notification-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 12px; border-bottom: 1px solid #e9eeeb; }
    .notification-item.is-unread { background: #f3f8f4; }
    .notification-state-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; color: #7c8c83; background: #eef2ef; }
    .is-unread .notification-state-icon { color: #276044; background: #dfeddf; }
    .notification-content { min-width: 0; flex: 1; overflow-wrap: anywhere; }
    .notification-content strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 500; }
    .is-unread .notification-content strong { font-weight: 700; }
    .notification-content p { margin: 2px 0; font-size: 11px; color: #596e63; }
    .notification-content time { display: block; font-size: 10px; color: #708277; }
    .notification-content a { display: block; min-height: 44px; color: inherit; text-decoration: none; }
    .notification-content a:hover strong { color: #236c48; text-decoration: underline; }
    .notification-item .notification-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; width: 44px; height: 44px; margin: -6px 0 0; padding: 0; background: transparent; border: 0; color: #4f7960; flex-shrink: 0; }
    .notification-toggle .ui-icon, .notification-state-icon .ui-icon { width: 18px; height: 18px; }
    .notification-body > button { display: block; margin: 16px auto; font-size: 13px; }
    .notification-drawer :focus-visible { outline: 2px solid #4c8c67; outline-offset: -2px; }
    @media (max-width: 800px) {
        .app-layout .app-topbar .brand-tools-row {
            grid-template-columns: minmax(0, 1fr) auto 44px 70px; column-gap: 6px;
            box-shadow: inset 0 -1px #2b5544;
        }
        .app-layout .app-topbar #connection-status { color: #c1d3c9; font-size: 10px !important; font-weight: 500; gap: 5px; }
        .app-layout .app-topbar #connection-status:before { width: 5px; height: 5px; }
        .app-layout .app-topbar .notification-trigger { grid-column: 3; grid-row: 1; color: #b9cec2; }
        .app-layout .app-topbar .notification-trigger .ui-icon { width: 19px; height: 19px; }
        .app-layout .app-topbar .notification-badge {
            top: 3px; inset-inline-end: 2px; min-width: 14px; padding: 0 3px;
            background: #e5eee7; font-size: 8px; line-height: 12px;
        }
        .app-layout .app-topbar .header-tools > form { grid-column: 4; width: 70px; padding-block: 7px; }
        .app-layout .app-topbar #language {
            height: 30px; min-height: 30px; padding: 3px 5px; font-size: 12px; font-weight: 500;
            border-color: #3d6955; border-radius: 4px;
        }
    }
}
@media print { .notification-trigger, .notification-drawer { display: none !important; } }