/* The application's design layer, loaded after the customer's stylesheets.

   The customer CSS (wwwroot/customer/, generated) supplies the portal's structure and is kept: the
   views still use its element and class names. This file fills the gaps that export leaves (no icon
   webfonts, no Angular components) and gives the shell and the shared components one consistent,
   modern look: one set of tokens, one radius and shadow scale, one type scale.

   Many customer rules are written as ".layout-wrapper .x" or with repeated classes, so the overrides
   below are prefixed with the custom element "common-app-component" (one type selector more) rather
   than using !important. The one exception is the keyboard focus ring, which must always win. */

/* ---------------------------------------------------------------- Tokens */

:root {
    --app-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --app-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    --app-primary-50: #eef4ff;
    --app-primary-100: #dbe6fe;
    --app-primary-200: #bfd3fe;
    --app-primary-500: #3b6ff5;
    --app-primary-600: #1e4fd8;
    --app-primary-700: #1a3fb0;

    --app-bg: #f5f7fa;
    --app-surface: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-surface-hover: #f1f5f9;
    --app-border: #e2e8f0;
    --app-border-strong: #cbd5e1;

    --app-text: #0f172a;
    --app-text-body: #334155;
    --app-text-secondary: #475569;
    --app-text-muted: #64748b;
    --app-icon-muted: #94a3b8;

    --app-success-bg: #ecfdf5;
    --app-success-text: #047857;
    --app-warning-bg: #fffbeb;
    --app-warning-border: #fde68a;
    --app-warning-text: #92400e;
    --app-warning-icon: #d97706;
    --app-danger-bg: #fef2f2;
    --app-danger-border: #fecaca;
    --app-danger-text: #b91c1c;

    --app-radius-sm: 6px;
    --app-radius-md: 8px;
    --app-radius-lg: 12px;

    --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --app-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.05);
    --app-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.28);

    --app-topbar-h: 60px;
    --app-sidebar-w: 272px;
    --app-gutter: 28px;
    --app-control-h: 36px;

    --app-ease: cubic-bezier(0.2, 0, 0, 1);
    --app-duration: 160ms;

    --app-z-sidebar: 900;
    --app-z-mask: 950;
    --app-z-topbar: 1000;
}

/* ---------------------------------------------------------------- Base */

/* The shell reuses the reference pages' custom element names so their scoped CSS still matches.
   Unknown elements are inline by default, so the ones that wrap layout blocks are made blocks. */
common-app-component,
app-topbar,
app-root-menu,
app-menu,
p-table,
crud-list,
app-ban-lam-viec {
    display: block;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text-body);
    font-family: var(--app-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-scroll-locked {
    overflow: hidden;
}

/* The customer stylesheets name Nunito, which they never load. One family everywhere. */
common-app-component .p-component,
common-app-component input,
common-app-component button,
common-app-component select,
common-app-component textarea,
.reference-dialog .p-component {
    font-family: var(--app-font);
}

common-app-component a {
    color: var(--app-primary-600);
}

common-app-component a:hover {
    color: var(--app-primary-700);
}

code {
    font-family: var(--app-font-mono);
    font-size: 0.85em;
    padding: 0.1em 0.4em;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-hover);
    color: var(--app-text);
}

/* Several customer rules remove the outline on focus. Keyboard users always get a ring. */
:focus-visible {
    outline: 2px solid var(--app-primary-500) !important;
    outline-offset: 2px !important;
}

.layout-main:focus,
.layout-main:focus-visible {
    outline: none !important;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 14px;
    border-radius: var(--app-radius-md);
    background: var(--app-primary-600);
    color: #fff;
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--app-duration) var(--app-ease);
}

.skip-link:focus {
    transform: none;
    color: #fff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Icons are inline SVG (see Views/Shared/_Icon.cshtml), sized to match the icon fonts they stand in for. */
.app-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    font-style: normal;
}

.app-icon svg {
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- Topbar */

common-app-component .layout-wrapper .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--app-z-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    height: var(--app-topbar-h);
    padding: 0 16px 0 12px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    box-shadow: none;
}

/* The topbar keeps the portal's clearfix class, whose ::after would be a third flex item here. */
common-app-component .layout-wrapper .topbar::after {
    display: none;
}

common-app-component .layout-wrapper .topbar .topbar-left,
common-app-component .layout-wrapper .topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

common-app-component .tn-l-left-menu-toggle-block {
    box-shadow: none;
}

common-app-component .tn-l-left-menu-toggle,
common-app-component .layout-menu-static-inactive app-topbar .tn-l-left-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-text-secondary);
    cursor: pointer;
    transform: none;
    transition: background-color var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}

common-app-component .tn-l-left-menu-toggle:hover {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .topbar .topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 8px 4px 4px;
    border-radius: var(--app-radius-md);
    color: inherit;
    text-decoration: none;
}

.topbar-brand-mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--app-primary-500), var(--app-primary-700));
    color: #fff;
    box-shadow: var(--app-shadow-xs);
}

.topbar-brand-mark .app-icon {
    width: 20px;
    height: 20px;
}

/* The customer repeats these class names up to five times to win; one more here. */
common-app-component .layout-wrapper .topbar .topbar-left .topbar-title.topbar-title.topbar-title.topbar-title.topbar-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: var(--app-text);
    text-transform: none;
    text-align: left;
    line-height: 1.25;
}

common-app-component .topbar-brand .topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--app-text);
}

common-app-component .topbar-brand .topbar-description.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description {
    margin-top: 1px;
    font-size: 12px;
    color: var(--app-text-muted);
}

common-app-component .topbar-right .topbar-modules-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--app-control-h);
    padding: 0 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--app-text-body);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease);
}

common-app-component .topbar-right .topbar-modules-link:hover {
    background: var(--app-surface-hover);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

common-app-component .topbar-right .topbar-modules-link .app-icon {
    width: 18px;
    height: 18px;
    color: var(--app-text-muted);
}

/* ---------------------------------------------------------------- Sidebar */

common-app-component .layout-wrapper .layout-menu-container,
common-app-component .layout-wrapper.menu-layout-static .layout-menu-container {
    position: fixed;
    top: var(--app-topbar-h);
    bottom: 0;
    left: 0;
    z-index: var(--app-z-sidebar);
    display: flex;
    flex-direction: column;
    width: var(--app-sidebar-w);
    height: auto;
    margin-left: 0;
    padding: 0;
    overflow: hidden;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    transition: transform 220ms var(--app-ease);
}

common-app-component .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu-container {
    margin-left: 0;
    transform: translateX(-100%);
}

/* The heading above the menu: the module name, or the application's short name. */
common-app-component .layout-menu-container app-root-menu,
common-app-component .layout-menu-container .rootMenu {
    box-shadow: none;
}

common-app-component .layout-menu-container .rootMenu {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 18px 16px 10px;
}

common-app-component .layout-menu-container .rootMenu > .icon {
    position: static;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-primary-50);
    color: var(--app-primary-600);
}

common-app-component .layout-menu-container .rootMenu > .icon .app-icon {
    width: 18px;
    height: 18px;
}

common-app-component .layout-menu-container .rootMenu > label {
    position: static;
    display: block;
    min-width: 0;
    padding: 0;
    color: var(--app-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

common-app-component .layout-menu-container .menu-back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 6px;
    padding: 6px 8px;
    border-radius: var(--app-radius-md);
    color: var(--app-text-muted);
    font-size: 13px;
    text-decoration: none;
}

common-app-component .layout-menu-container .menu-back-link:hover {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .layout-menu-container .menu-back-link .app-icon {
    width: 16px;
    height: 16px;
}

common-app-component .layout-menu-container .layout-menu-block {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 24px;
    border-top: 1px solid var(--app-border);
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
}

common-app-component .layout-menu-container .layout-menu {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

common-app-component .layout-menu-container .layout-menu li {
    margin: 1px 0;
}

/* Angular animates submenus open; here an open group is simply shown. */
.layout-menu li > ul {
    display: none;
}

.layout-menu li.active-menuitem > ul {
    display: block;
}

common-app-component .layout-menu-container .layout-menu li a,
common-app-component .layout-menu-container .layout-menu li .menu-unavailable {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-text-body);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.35;
    text-decoration: none;
    overflow: visible;
    transition: background-color var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}

common-app-component .layout-menu-container .layout-menu li a:hover {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .layout-menu-container .layout-menu li a i,
common-app-component .layout-menu-container .layout-menu li a i:first-child,
common-app-component .layout-menu-container .layout-menu li .menu-unavailable i {
    display: inline-flex;
    flex: none;
    margin: 0;
    color: var(--app-icon-muted);
    font-size: inherit;
}

common-app-component .layout-menu-container .layout-menu li a .app-icon {
    width: 18px;
    height: 18px;
    margin: 0;
}

common-app-component .layout-menu-container .layout-menu .menu-label {
    display: block;
    flex: 1;
    min-width: 0;
}

common-app-component .layout-menu-container .layout-menu li a i.menuitem-toggle-icon {
    float: none;
    margin: 0 0 0 auto;
    transition: transform var(--app-duration) var(--app-ease);
}

common-app-component .layout-menu-container .layout-menu li a i.menuitem-toggle-icon .app-icon {
    width: 16px;
    height: 16px;
}

/* An open group: stronger label, chevron turned. Not highlighted: only the current page is. */
common-app-component .layout-menu-container .layout-menu li.active-menuitem > a,
common-app-component .layout-menu-container .layout-menu li a.active-menuitem-routerlink {
    background: transparent;
    color: var(--app-text);
    font-weight: 600;
    border-left: 0;
}

common-app-component .layout-menu-container .layout-menu li.active-menuitem > a:hover {
    background: var(--app-surface-hover);
}

common-app-component .layout-menu-container .layout-menu li.active-menuitem > a i.menuitem-toggle-icon {
    transform: rotate(-180deg);
}

/* The current page. */
common-app-component .layout-menu-container .layout-menu li > a[aria-current="page"],
common-app-component .layout-menu-container .layout-menu li.active-menuitem > a[aria-current="page"] {
    background: var(--app-primary-50);
    color: var(--app-primary-700);
    font-weight: 600;
}

common-app-component .layout-menu-container .layout-menu li > a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--app-primary-600);
}

common-app-component .layout-menu-container .layout-menu li > a[aria-current="page"] i:first-child {
    color: var(--app-primary-600);
}

/* Nested levels: indented, smaller icons. The selectors are as deep as the customer's, plus one. */
common-app-component .layout-menu-container .layout-menu > li > ul > li > a,
common-app-component .layout-menu-container .layout-menu > li > ul > li > .menu-unavailable {
    padding-left: 36px;
    font-size: 13.5px;
}

common-app-component .layout-menu-container .layout-menu > li > ul > li > ul > li > a,
common-app-component .layout-menu-container .layout-menu > li > ul > li > ul > li > .menu-unavailable {
    padding-left: 54px;
    font-size: 13.5px;
}

common-app-component .layout-menu-container .layout-menu > li > ul > li > ul > li > ul > li > a,
common-app-component .layout-menu-container .layout-menu > li > ul > li > ul > li > ul > li > .menu-unavailable {
    padding-left: 70px;
    font-size: 13.5px;
}

/* Same depth as the customer's ".layout-wrapper .layout-menu li ul li a i:first-child" margin and
   size, plus one, so a linked sub-item lines up with an unlinked one. */
common-app-component .layout-menu-container .layout-menu li ul li a i:first-child,
common-app-component .layout-menu-container .layout-menu li ul li ul li a i:first-child {
    width: 18px;
    margin: 0;
    padding: 0;
    font-size: inherit;
}

common-app-component .layout-menu-container .layout-menu li ul li a .app-icon {
    width: 16px;
    height: 16px;
}

common-app-component .layout-menu-container .layout-menu li ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A menu entry the customer's export has no snapshot of. */
common-app-component .layout-menu-container .layout-menu .menu-unavailable {
    color: var(--app-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- Main area */

common-app-component .layout-wrapper .layout-main,
common-app-component .layout-wrapper.menu-layout-static .layout-main {
    display: block;
    min-height: 100vh;
    margin-left: var(--app-sidebar-w);
    padding: calc(var(--app-topbar-h) + 24px) var(--app-gutter) 40px;
    transition: margin-left 220ms var(--app-ease);
}

common-app-component .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-main {
    margin-left: 0;
}

common-app-component .layout-wrapper .layout-mask {
    display: none;
}

/* Below 1025px the sidebar is an off-canvas drawer opened from the topbar (site.js). */
@media (max-width: 1024px) {
    :root {
        --app-gutter: 16px;
    }

    common-app-component .layout-wrapper .layout-menu-container,
    common-app-component .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu-container {
        width: min(86vw, var(--app-sidebar-w));
        transform: translateX(-100%);
        box-shadow: none;
    }

    common-app-component .layout-wrapper.app-nav-open .layout-menu-container,
    common-app-component .layout-wrapper.menu-layout-static.layout-menu-static-inactive.app-nav-open .layout-menu-container {
        transform: none;
        box-shadow: var(--app-shadow-lg);
    }

    common-app-component .layout-wrapper .layout-main,
    common-app-component .layout-wrapper.menu-layout-static .layout-main {
        margin-left: 0;
        padding-top: calc(var(--app-topbar-h) + 16px);
    }

    common-app-component .layout-wrapper.app-nav-open .layout-mask {
        display: block;
        position: fixed;
        inset: var(--app-topbar-h) 0 0 0;
        z-index: var(--app-z-mask);
        background: rgba(15, 23, 42, 0.45);
        animation: app-fade-in 180ms var(--app-ease);
    }

    common-app-component .layout-wrapper.app-nav-open .layout-menu-container {
        z-index: calc(var(--app-z-mask) + 1);
    }
}

@media (max-width: 640px) {
    common-app-component .layout-wrapper .topbar {
        padding: 0 10px 0 6px;
        gap: 8px;
    }

    common-app-component .topbar-brand .topbar-description.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description {
        display: none;
    }

    common-app-component .topbar-brand .topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    common-app-component .topbar-right .topbar-modules-link {
        width: var(--app-control-h);
        padding: 0;
        justify-content: center;
    }

    common-app-component .topbar-right .topbar-modules-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@keyframes app-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Page surfaces and headings */

common-app-component .layout-main .custom-card.card {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 20px 24px 24px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

/* The portal sizes a list to the viewport and positions its body absolutely, so the table scrolls
   inside a fixed box. Here the page grows with its content instead, and only wide tables scroll. */
common-app-component .layout-main .fit-content,
common-app-component .layout-main .crud-list-body-area,
common-app-component .layout-main .flex-container-fit-child > .fit-content > div,
common-app-component .layout-main .flex-container-fit-child {
    position: static;
    display: block;
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
}

@media (max-width: 640px) {
    common-app-component .layout-main .custom-card.card {
        padding: 16px;
    }
}

common-app-component .layout-main h1,
common-app-component .layout-main h2 {
    color: var(--app-text);
    letter-spacing: -0.015em;
}

common-app-component .layout-main .crud-list-header-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

common-app-component .layout-main .page-title-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
}

common-app-component .layout-main .page-title-area .main-title {
    flex: 1 1 320px;
    min-width: 0;
    padding: 0;
}

common-app-component .layout-main .page-title-area .main-title > h1,
common-app-component .layout-main crud-list .main-title > h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.3;
}

common-app-component .layout-main .sub-title {
    margin: 4px 0 0;
    color: var(--app-text-muted);
    font-size: 14px;
}

.sub-title-meta {
    white-space: nowrap;
}

/* App pages (landing, errors) that are not portal reconstructions. */
.app-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1440px;
}

.app-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

common-app-component .layout-main .app-page-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.app-page-lead {
    margin: 6px 0 0;
    color: var(--app-text-muted);
    font-size: 15px;
}

.app-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;
}

common-app-component .layout-main .app-section-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
}

.app-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------------- Callouts and notices */

.app-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--app-primary-100);
    border-radius: var(--app-radius-lg);
    background: var(--app-primary-50);
}

.app-callout-icon {
    display: inline-flex;
    flex: none;
    color: var(--app-primary-600);
}

common-app-component .layout-main .app-callout-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 650;
}

.app-callout p {
    margin: 0;
    max-width: 90ch;
    color: var(--app-text-body);
    line-height: 1.6;
}

.reference-preview-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-md);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 13px;
    line-height: 1.5;
}

.reference-preview-icon {
    display: inline-flex;
    flex: none;
    color: var(--app-warning-icon);
}

.reference-preview-icon .app-icon {
    width: 18px;
    height: 18px;
}

.reference-preview-note {
    display: block;
    margin-top: 2px;
}

/* ---------------------------------------------------------------- Status badges */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge-success {
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.status-badge-danger {
    background: var(--app-danger-bg);
    color: var(--app-danger-text);
}

.status-badge-neutral {
    background: var(--app-surface-hover);
    color: var(--app-text-secondary);
}

/* ---------------------------------------------------------------- Buttons */

common-app-component .p-button,
.reference-dialog .p-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--app-control-h);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--app-primary-600);
    border-radius: var(--app-radius-md);
    background: var(--app-primary-600);
    background-image: none;
    color: #fff;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--app-shadow-xs);
    cursor: pointer;
    transition: background-color var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease),
        color var(--app-duration) var(--app-ease), box-shadow var(--app-duration) var(--app-ease);
}

common-app-component .p-button:hover,
.reference-dialog .p-button:hover {
    border-color: var(--app-primary-700);
    background: var(--app-primary-700);
    color: #fff;
}

common-app-component .p-button:active {
    box-shadow: none;
}

common-app-component .p-button .p-button-label {
    font-weight: inherit;
    flex: none;
}

common-app-component .p-button .p-button-icon,
common-app-component .p-button .p-button-icon-left {
    display: inline-flex;
    margin: 0;
}

common-app-component .p-button .app-icon {
    width: 16px;
    height: 16px;
}

/* Reference screens: every button keeps its customer colour classes (p-button-success, bg-tg,
   button-blv...), which give the portal a different colour per button. Here the colour follows the
   button's role instead: one primary action, neutral secondaries, a red destructive action. */
common-app-component .layout-main .p-button[data-action-category],
common-app-component .layout-main .p-button.p-button-text,
.reference-dialog .p-button.p-button-text {
    border-color: var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-text-body);
}

common-app-component .layout-main .p-button[data-action-category]:hover:not(:disabled),
common-app-component .layout-main .p-button.p-button-text:hover:not(:disabled),
.reference-dialog .p-button.p-button-text:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .layout-main .p-button[data-action-category] .app-icon {
    color: var(--app-text-muted);
}

common-app-component .layout-main .p-button[data-action-category="create"] {
    border-color: var(--app-primary-600);
    background: var(--app-primary-600);
    color: #fff;
}

common-app-component .layout-main .p-button[data-action-category="create"] .app-icon {
    color: currentColor;
}

common-app-component .layout-main .p-button[data-action-category="delete"] {
    border-color: var(--app-danger-border);
    background: var(--app-surface);
    color: var(--app-danger-text);
}

common-app-component .layout-main .p-button[data-action-category="delete"] .app-icon {
    color: currentColor;
}

/* A text button that navigates back. */
common-app-component .layout-main .p-button.app-back-link {
    padding: 0 10px 0 6px;
    border-color: transparent;
    background: transparent;
    color: var(--app-text-secondary);
    box-shadow: none;
}

common-app-component .layout-main .p-button.app-back-link:hover {
    border-color: transparent;
    background: var(--app-surface-hover);
    color: var(--app-text);
}

/* Icon-only buttons (table refresh, column settings, a title action without a label). */
common-app-component .layout-main .p-button.p-button-icon-only {
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--app-text-muted);
    box-shadow: none;
}

common-app-component .layout-main .p-button.p-button-icon-only:hover:not(:disabled) {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

/* Disabled controls keep their role colour, faded, with a cursor that says they do nothing. */
common-app-component .p-button:disabled,
common-app-component .p-button[disabled],
common-app-component .layout-main .p-button[data-action-category]:disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

button[disabled],
[aria-disabled="true"] {
    cursor: not-allowed;
}

.reference-disabled {
    opacity: 0.6;
}

/* ---------------------------------------------------------------- Form controls */

common-app-component .layout-main .p-inputtext,
.reference-dialog .p-inputtext {
    height: var(--app-control-h);
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 14px;
    box-shadow: none;
    transition: border-color var(--app-duration) var(--app-ease), box-shadow var(--app-duration) var(--app-ease);
}

common-app-component .layout-main .p-inputtext::placeholder {
    color: var(--app-icon-muted);
}

common-app-component .layout-main .p-inputtext:enabled:hover:not([readonly]) {
    border-color: var(--app-text-muted);
}

common-app-component .layout-main .p-inputtext:enabled:focus:not([readonly]) {
    border-color: var(--app-primary-500);
    box-shadow: 0 0 0 3px var(--app-primary-100);
    outline: none;
}

/* The reference screens' controls are inert shells: shown as read-only fields. The disabled
   selector is as long as the customer's ".p-component:disabled:not(...):not(...):not(...)", plus one. */
common-app-component .layout-main .p-inputtext[readonly],
common-app-component .layout-main .p-inputtext.p-component:disabled:not(.p-multiselect-filter):not(.p-checkbox-label):not(.p-button) {
    background: var(--app-surface-muted);
    border-color: var(--app-border);
    cursor: not-allowed;
    opacity: 1;
}

common-app-component .layout-main .p-dropdown,
common-app-component .layout-main .p-multiselect {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: var(--app-control-h);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
    box-shadow: none;
    overflow: hidden;
}

common-app-component .layout-main .p-dropdown .p-dropdown-label,
common-app-component .layout-main .p-multiselect .p-multiselect-label-container,
common-app-component .layout-main .p-multiselect .p-multiselect-label {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--app-icon-muted);
    font-size: 13px;
    line-height: var(--app-control-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

common-app-component .layout-main .p-dropdown-trigger,
common-app-component .layout-main .p-multiselect-trigger {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    background: transparent;
    color: var(--app-icon-muted);
}

.p-dropdown-trigger .app-icon,
.p-multiselect-trigger .app-icon {
    width: 14px;
    height: 14px;
}

common-app-component .layout-main .tn-dropdown {
    width: 100%;
    min-width: 0;
}

common-app-component .layout-main .p-checkbox .p-checkbox-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--app-border-strong);
    border-radius: 5px;
    background: var(--app-surface);
}

/* A date field with its calendar button joined to it. */
common-app-component .layout-main .container-control .input-base + .button-base {
    flex: none;
}

/* The search area above a list title: one labelled control per field, wrapping as space allows. */
common-app-component .layout-main .custom-search-area {
    height: auto;
    margin: 0;
    padding: 0;
}

common-app-component .layout-main .main-container-search {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
}

common-app-component .layout-main .main-container-search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    height: auto;
    margin: 0;
}

common-app-component .layout-main .main-container-search-inner > .container-control,
common-app-component .layout-main .dashboard .header > .container-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex: 1 1 200px;
    width: auto;
    max-width: 340px;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
}

common-app-component .layout-main .container-control > .label {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--app-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The portal overlays a control on its label's row; here the label sits above the control. */
common-app-component .layout-main .container-control > .label + * > div {
    position: relative;
    top: auto;
}

/* A date control: the field and its calendar button joined into one control. */
common-app-component .layout-main .container-control:has(> .button-base) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0;
}

common-app-component .layout-main .container-control:has(> .button-base) > .label {
    grid-column: 1 / -1;
}

/* The search box of the catalog screens. */
.app-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    width: 100%;
}

.app-search-field {
    position: relative;
    display: flex;
    flex: 1 1 240px;
    min-width: 0;
}

.app-search-field > .app-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 16px;
    height: 16px;
    color: var(--app-icon-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

common-app-component .layout-main .app-search .app-search-field .p-inputtext {
    padding-left: 34px;
}

common-app-component .layout-main .include-deleted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--app-text-secondary);
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
}

common-app-component .layout-main .include-deleted input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--app-primary-600);
}

/* ---------------------------------------------------------------- Toolbar */

common-app-component .layout-main .crudListToolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
}

common-app-component .layout-main .crudListToolbar > [class*="p-col"] {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

common-app-component .layout-main .crudListToolbar > .button-group.function-topbar {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: auto;
    overflow: visible;
    white-space: normal;
}

common-app-component .layout-main .crudListToolbar > .advance-search-container {
    display: flex;
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-left: auto;
}

/* The catalog screens' search form takes the room it needs. */
common-app-component .layout-main .crudListToolbar > .advance-search-container:has(.app-search) {
    flex: 1 1 480px;
}

common-app-component .layout-main .crudListToolbar .note,
common-app-component .layout-main .toolbar-note {
    margin: 0;
    padding: 0;
    color: var(--app-text-muted);
    font-size: 13.5px;
    white-space: normal;
}

/* The "advanced search" opener of a list screen: a neutral, disabled button. */
common-app-component .layout-main .box-advance-search-inline .container-search-dialog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--app-control-h);
    padding: 0 14px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--app-text-body);
    font-size: 14px;
    opacity: 0.55;
}

common-app-component .layout-main .box-advance-search-inline .container-search-dialog .app-icon {
    width: 16px;
    height: 16px;
    color: var(--app-text-muted);
}

/* ---------------------------------------------------------------- Tables */

/* The reference list screens scroll the table inside a scrollbar component; a plain overflow does
   the same job here, and without it .container-table's overflow:hidden would clip wide tables. */
common-app-component .layout-main .container-table {
    display: block;
    flex: none;
    height: auto;
    max-width: 100%;
    margin: 0;
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
    container-type: inline-size;
}

common-app-component .layout-main .container-table + .container-table {
    margin-top: 16px;
}

.container-table-inner {
    width: 100%;
}

common-app-component .layout-main .container-table p-table,
common-app-component .layout-main .container-table .p-datatable,
common-app-component .layout-main .container-table .p-datatable-wrapper {
    height: auto;
    border: 0;
    overflow: visible;
}

common-app-component .layout-main .container-table table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

common-app-component .layout-main .container-table .p-datatable-thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    min-width: 6.5rem;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text-secondary);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
    white-space: normal;
}

common-app-component .layout-main .container-table .p-datatable-thead > tr > th:last-child {
    border-right: 0;
}

/* Grouped headers (a colspan over sub-columns) are centred over their columns. */
common-app-component .layout-main .container-table .p-datatable-thead > tr > th[colspan] {
    text-align: center;
}

/* Narrow utility columns: order, selection, functions, settings. */
common-app-component .layout-main .container-table .p-datatable-thead > tr > th.stt,
common-app-component .layout-main .container-table .p-datatable-thead > tr > th.chkbox,
common-app-component .layout-main .container-table .p-datatable-thead > tr > th.column-function,
common-app-component .layout-main .container-table .p-datatable-thead > tr > th.setting-cell {
    width: 1%;
    min-width: 3.25rem;
    text-align: center;
    white-space: nowrap;
}

common-app-component .layout-main .container-table .p-datatable-thead > tr > th.column-function {
    min-width: 6rem;
}

common-app-component .layout-main .container-table .p-datatable-thead > tr.filter-row > th {
    top: auto;
    position: static;
    padding: 6px 8px;
    background: var(--app-surface);
    font-weight: 400;
}

/* The portal's filter widget wraps each input in a bordered box with its right border removed (for
   a clear button this app does not render) and, on focus, pops the box out of its cell as a 250px
   overlay. Here the input itself carries the border and stays in its cell. */
common-app-component .layout-main crud-list .cell-header-filter .filter-box,
common-app-component .layout-main crud-list .cell-header-filter:focus-within .short-filter-box,
common-app-component .layout-main crud-list .cell-header-filter.focus-within .short-filter-box {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    min-width: 0;
    transform: none;
    z-index: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

common-app-component .layout-main crud-list .cell-header-filter .filter-box > div,
common-app-component .layout-main crud-list .cell-header-filter:focus-within .filter-box > div,
common-app-component .layout-main crud-list .cell-header-filter:focus-within .short-filter-box > div {
    flex: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

common-app-component .layout-main crud-list .cell-header-filter .filter-box .p-inputtext {
    padding: 0 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
}

common-app-component .layout-main .container-table .filter-row .p-inputtext,
common-app-component .layout-main .container-table .filter-row .p-dropdown,
common-app-component .layout-main .container-table .filter-row .p-multiselect {
    height: 32px;
    min-width: 0;
    font-size: 13px;
}

common-app-component .layout-main .container-table .filter-row .p-multiselect .p-multiselect-label {
    line-height: 30px;
}

common-app-component .layout-main .container-table .tn-datetime-picker-range,
common-app-component .layout-main .container-table .tn-number-picker-range {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 13rem;
    color: var(--app-icon-muted);
}

common-app-component .layout-main .container-table .tn-datetime-picker-range .p-calendar {
    flex: 1;
    min-width: 0;
}

common-app-component .layout-main .container-table .p-datatable-tbody > tr > td,
common-app-component .layout-main .container-table table td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text-body);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

common-app-component .layout-main .container-table .p-datatable-tbody > tr:last-child > td {
    border-bottom: 0;
}

common-app-component .layout-main .container-table .p-datatable-tbody > tr:not(.empty-state-row):hover > td {
    background: var(--app-surface-muted);
}

common-app-component .layout-main .container-table td.cell-order {
    color: var(--app-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

common-app-component .layout-main .container-table .cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

common-app-component .layout-main .container-table td.cell-code {
    font-family: var(--app-font-mono);
    font-size: 13px;
}

common-app-component .layout-main .container-table td a {
    font-weight: 600;
    text-decoration: none;
}

common-app-component .layout-main .container-table td a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.template-group-row td {
    font-weight: 600;
}

common-app-component .layout-main .container-table .template-group-row > td {
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.star-required {
    color: var(--app-danger-text);
}

/* The row a table shows when it holds no data. */
common-app-component .layout-main .p-datatable .p-datatable-tbody > tr > td.empty-row,
.empty-row {
    max-width: 0; /* its message must not widen the columns it spans */
    padding: 40px 0;
    text-align: left;
    color: var(--app-text-muted);
}

/* A wide table scrolls sideways; the message stays centred in the visible part of it. */
.empty-state {
    position: sticky;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc(100cqi - 32px);
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--app-surface-hover);
    color: var(--app-icon-muted);
}

.empty-state-icon .app-icon {
    width: 22px;
    height: 22px;
}

.empty-state-title {
    color: var(--app-text-secondary);
    font-size: 14px;
    font-weight: 550;
}

/* ---------------------------------------------------------------- Pagination */

common-app-component .layout-main .page-title-area .paginator-table {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

common-app-component .layout-main .paging-container,
common-app-component .layout-main .paging-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

common-app-component .layout-main .paging-info-detail {
    margin-right: 6px;
    color: var(--app-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

common-app-component .layout-main .paging-item.text {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

common-app-component .layout-main .paging-item.text > a,
common-app-component .layout-main .paging-item.text > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--app-text-body);
    transition: background-color var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease);
}

common-app-component .layout-main .paging-item.text > a:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .layout-main .paging-item.text .app-icon {
    width: 16px;
    height: 16px;
}

common-app-component .layout-main .paging-item.text > .paging-disabled {
    color: var(--app-icon-muted);
    opacity: 0.6;
}

common-app-component .layout-main .block-page-size {
    margin: 0;
    padding: 0;
}

common-app-component .layout-main .block-page-size .page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Tabs */

common-app-component .layout-main .p-tabview,
common-app-component .layout-main .tn-tabview-beauty {
    background: transparent;
}

common-app-component .layout-main .p-tabview .p-tabview-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
    list-style: none;
}

common-app-component .layout-main .p-tabview .p-tabview-nav li {
    margin: 0 0 -1px;
}

common-app-component .layout-main .p-tabview .p-tabview-nav li .p-tabview-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease), background-color var(--app-duration) var(--app-ease);
}

common-app-component .layout-main .p-tabview .p-tabview-nav li .p-tabview-nav-link:hover {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

common-app-component .layout-main .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    border-bottom-color: var(--app-primary-600);
    background: transparent;
    color: var(--app-primary-700);
    font-weight: 650;
}

common-app-component .layout-main .p-tabview .p-tabview-left-icon {
    display: inline-flex;
    margin: 0;
}

common-app-component .layout-main .p-tabview .p-tabview-nav-link .app-icon {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------- Landing page */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.module-grid > li {
    display: flex;
    min-width: 0;
}

common-app-component .layout-main a.module-tile {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: var(--app-text);
    text-decoration: none;
    box-shadow: var(--app-shadow-xs);
    transition: border-color var(--app-duration) var(--app-ease), box-shadow var(--app-duration) var(--app-ease);
}

common-app-component .layout-main a.module-tile:hover {
    border-color: var(--app-primary-200);
    color: var(--app-text);
    box-shadow: var(--app-shadow-md);
}

.module-tile-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--app-primary-50);
    color: var(--app-primary-600);
}

.module-tile-reference .module-tile-icon {
    background: var(--app-surface-hover);
    color: var(--app-text-secondary);
}

.module-tile-icon .app-icon {
    width: 22px;
    height: 22px;
}

.module-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.module-tile-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.module-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.module-tile-count {
    color: var(--app-text-muted);
    font-size: 12.5px;
}

.module-tile-arrow {
    display: inline-flex;
    flex: none;
    color: var(--app-icon-muted);
    transition: transform var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}

.module-tile-arrow .app-icon {
    width: 18px;
    height: 18px;
}

a.module-tile:hover .module-tile-arrow {
    color: var(--app-primary-600);
    transform: translateX(3px);
}

/* ---------------------------------------------------------------- Module workbench */

common-app-component .layout-main app-ban-lam-viec .dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
}

common-app-component .layout-main app-ban-lam-viec .clear {
    display: none;
}

/* The workbench's filter bar. */
common-app-component .layout-main app-ban-lam-viec .dashboard .header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    height: auto;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

common-app-component .layout-main app-ban-lam-viec .dashboard .header > .container-control:not(.dropdown) {
    flex: 0 0 auto;
    margin-left: auto;
}

common-app-component .layout-main app-ban-lam-viec [class*="p-md-"],
common-app-component .layout-main app-ban-lam-viec .pd20,
common-app-component .layout-main app-ban-lam-viec .pdltk {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}

/* Counters. */
common-app-component .layout-main app-ban-lam-viec .counter-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    padding: 0;
    background: transparent;
}

common-app-component .layout-main app-ban-lam-viec .counter-box > *,
common-app-component .layout-main app-ban-lam-viec .counter-box > * > * {
    height: 100%;
}

common-app-component .layout-main app-ban-lam-viec .info-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

/* The portal gives every counter its own saturated colour; here they share one tinted palette. */
common-app-component .layout-main app-ban-lam-viec .info-box .info-box-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 10px;
    background: var(--app-primary-50);
    color: var(--app-primary-600);
    float: none;
    line-height: 1;
}

common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+2) .info-box-icon { background: #ecfeff; color: #0e7490; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+3) .info-box-icon { background: #f0fdf4; color: #15803d; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+4) .info-box-icon { background: #fffbeb; color: #b45309; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+5) .info-box-icon { background: #f5f3ff; color: #6d28d9; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+6) .info-box-icon { background: #fff1f2; color: #be123c; }

common-app-component .layout-main app-ban-lam-viec .info-box .info-box-icon .app-icon {
    width: 22px;
    height: 22px;
    color: currentColor;
}

common-app-component .layout-main app-ban-lam-viec .info-box-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

common-app-component .layout-main app-ban-lam-viec .info-box-text {
    display: block;
    color: var(--app-text-secondary);
    font-size: 13px;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
}

common-app-component .layout-main app-ban-lam-viec .info-box-number {
    display: block;
    color: var(--app-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* Charts, panels and summary tables on a 12-column grid. */
common-app-component .layout-main app-ban-lam-viec .bgdashboard:not(.counter-box) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    background: transparent;
}

common-app-component .layout-main app-ban-lam-viec .bgdashboard .box-chart {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

@media (min-width: 1100px) {
    common-app-component .layout-main app-ban-lam-viec .bgdashboard .box-chart.p-md-6 { grid-column: span 6; }
    common-app-component .layout-main app-ban-lam-viec .bgdashboard .box-chart.p-md-4 { grid-column: span 4; }
    common-app-component .layout-main app-ban-lam-viec .bgdashboard .box-chart.p-md-8 { grid-column: span 8; }
}

common-app-component .layout-main app-ban-lam-viec .chart-header,
common-app-component .layout-main app-ban-lam-viec .pn-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    background-image: none;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

common-app-component .layout-main app-ban-lam-viec .chart-header::before,
common-app-component .layout-main app-ban-lam-viec .pn-head::before {
    content: "";
    flex: none;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--app-primary-500);
}

common-app-component .layout-main app-ban-lam-viec .chart-header.bg-red::before {
    background: #f97316;
}

common-app-component .layout-main app-ban-lam-viec .pn-parent {
    margin: 0;
    border: 0;
    background: transparent;
}

.reference-chart-placeholder,
.reference-pivot-placeholder {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 16px;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 13.5px;
}

.reference-pivot-placeholder {
    margin-top: 12px;
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
}

/* A workbench summary table. */
common-app-component .layout-main app-ban-lam-viec .table-db {
    width: 100%;
    border-collapse: collapse;
}

common-app-component .layout-main app-ban-lam-viec .table-db th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text-secondary);
    font-size: 12.5px;
    font-weight: 650;
    text-align: left;
}

common-app-component .layout-main app-ban-lam-viec .table-db td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
}

/* The workbench's refresh/download strip. */
common-app-component .layout-main app-ban-lam-viec .btn-epdashboard {
    margin: 0;
    padding: 0;
}

common-app-component .layout-main app-ban-lam-viec .r-btepdashboard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    background-image: none;
    box-shadow: var(--app-shadow-xs);
}

common-app-component .layout-main app-ban-lam-viec .r-btepdashboard > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--app-text-secondary);
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.4;
}

.r-btepdashboard .app-icon {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------- Dialogs */

.reference-dialog {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.reference-dialog[open] {
    animation: app-pop-in 200ms var(--app-ease);
}

.reference-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

.reference-dialog .p-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
}

.reference-dialog .p-dialog .p-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

.reference-dialog .p-dialog .p-dialog-title {
    font-size: 16px;
    font-weight: 650;
}

.reference-dialog .p-dialog .p-dialog-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
}

.reference-dialog .p-dialog .p-dialog-header-icon:hover {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

.reference-dialog .p-dialog .p-dialog-header-icon .app-icon {
    width: 18px;
    height: 18px;
}

.reference-dialog .p-dialog .p-dialog-content {
    flex: 1;
    overflow: auto;
    padding: 16px 20px;
    background: var(--app-surface);
    color: var(--app-text-body);
}

.reference-dialog-caption {
    margin: 0 0 12px;
    color: var(--app-text-secondary);
}

.reference-dialog-fields {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 24px;
}

.reference-dialog-fields li {
    padding: 5px 0;
    break-inside: avoid;
}

.reference-dialog-fields label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--app-text-muted);
}

@media (max-width: 520px) {
    .reference-dialog-fields {
        columns: 1;
    }
}

.reference-dialog .p-dialog .p-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-muted);
}

/* ---------------------------------------------------------------- Error page */

.app-error {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

common-app-component .layout-main .app-error-card.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 36px 32px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    text-align: center;
}

.app-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--app-danger-bg);
    color: var(--app-danger-text);
}

.app-error-icon .app-icon {
    width: 28px;
    height: 28px;
}

.app-error-code {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

common-app-component .layout-main .app-error-title {
    margin: 0 0 6px;
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.35;
}

.error-correlation {
    margin: 0 0 12px;
    color: var(--app-text-muted);
    font-size: 13px;
}

.error-correlation code {
    user-select: all;
}

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 640px) {
    common-app-component .layout-main .p-inputtext {
        font-size: 16px; /* no zoom-on-focus on iOS */
    }

    common-app-component .layout-main .page-title-area .main-title > h1 {
        font-size: 1.2rem;
    }

    common-app-component .layout-main .app-page-title {
        font-size: 1.4rem;
    }

    common-app-component .layout-main .main-container-search-inner > .container-control,
    common-app-component .layout-main .dashboard .header > .container-control {
        max-width: none;
        flex-basis: 100%;
    }

    common-app-component .layout-main .crudListToolbar > .advance-search-container {
        flex-basis: 100%;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- Customer !important rules

   The customer stylesheets mark these declarations !important, so they can only be answered the
   same way. Each block names the customer rule it answers; nothing else here uses !important. */

/* ".function-topbar button", ".function-topbar button.p-button-*", ".p-tonghop", ".button-blv",
   ".bg-tg": a different saturated colour per toolbar button. */
common-app-component .layout-main .p-button[data-action-category] {
    background: var(--app-surface) !important;
    color: var(--app-text-body) !important;
    border-color: var(--app-border-strong) !important;
}

common-app-component .layout-main .p-button[data-action-category="create"] {
    background: var(--app-primary-600) !important;
    color: #fff !important;
    border-color: var(--app-primary-600) !important;
}

common-app-component .layout-main .p-button[data-action-category="delete"] {
    color: var(--app-danger-text) !important;
    border-color: var(--app-danger-border) !important;
}

common-app-component .layout-main .p-button.p-button-icon-only[data-action-category] {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--app-text-muted) !important;
}

/* ".p-dialog .p-dialog-footer button". */
.reference-dialog .p-dialog .p-dialog-footer .p-button {
    background: var(--app-surface) !important;
    color: var(--app-text-body) !important;
    border-color: var(--app-border-strong) !important;
}

/* ".title-row th", ".p-datatable .p-datatable-thead > tr > th": a tinted header background. */
common-app-component .layout-main .container-table .p-datatable-thead > tr > th {
    background: var(--app-surface-muted) !important;
}

common-app-component .layout-main .container-table .p-datatable-thead > tr.filter-row > th {
    background: var(--app-surface) !important;
    padding: 6px 8px !important;
}

/* "th.stt, th.chkbox { padding: 0 }". */
common-app-component .layout-main .container-table th.stt,
common-app-component .layout-main .container-table th.chkbox {
    padding: 8px !important;
}

/* ".p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link": a filled tab background. */
common-app-component .layout-main .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: transparent !important;
}

/* ".custom-card { padding }". */
common-app-component .layout-main .custom-card.card {
    padding: 20px 24px 24px !important;
}

/* ".dashboard .bgdashboard", ".dashboard .header": the workbench's lilac and white bands. */
common-app-component .layout-main app-ban-lam-viec .dashboard .bgdashboard {
    background: transparent !important;
}

/* ".bg-*" counter and chart-header colours, and ".dashboard .info-box .info-box-icon { color }". */
common-app-component .layout-main app-ban-lam-viec .info-box .info-box-icon {
    background: var(--app-primary-50) !important;
    color: var(--app-primary-600) !important;
}

common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+2) .info-box-icon { background: #ecfeff !important; color: #0e7490 !important; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+3) .info-box-icon { background: #f0fdf4 !important; color: #15803d !important; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+4) .info-box-icon { background: #fffbeb !important; color: #b45309 !important; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+5) .info-box-icon { background: #f5f3ff !important; color: #6d28d9 !important; }
common-app-component .layout-main app-ban-lam-viec .counter-box > :nth-child(6n+6) .info-box-icon { background: #fff1f2 !important; color: #be123c !important; }

common-app-component .layout-main app-ban-lam-viec .chart-header,
common-app-component .layout-main app-ban-lam-viec .table-db th {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

common-app-component .layout-main app-ban-lam-viec .table-db th {
    background: var(--app-surface-muted) !important;
    color: var(--app-text-secondary) !important;
}

/* ".r-btepdashboard { color: #fff }" on what is now a white strip. */
common-app-component .layout-main app-ban-lam-viec .r-btepdashboard,
common-app-component .layout-main app-ban-lam-viec .r-btepdashboard i {
    color: var(--app-text-secondary) !important;
}

/* ".pd20", ".pdl18", ".pdt0": spacing utilities the grid layout above replaces. */
common-app-component .layout-main app-ban-lam-viec .pd20,
common-app-component .layout-main app-ban-lam-viec .pdl18 {
    padding: 0 !important;
}

/* ".input-base { border-right: 0 }" and ".button-base { background; border }": the date field and
   its calendar button, joined. */
common-app-component .layout-main .container-control .input-base {
    border-right: 0 !important;
    border-radius: var(--app-radius-md) 0 0 var(--app-radius-md) !important;
}

common-app-component .layout-main .container-control > .p-button.button-base {
    width: 38px;
    height: var(--app-control-h);
    min-height: var(--app-control-h);
    border: 1px solid var(--app-border) !important;
    border-radius: 0 var(--app-radius-md) var(--app-radius-md) 0;
    background: var(--app-surface-muted) !important;
    color: var(--app-text-muted);
    opacity: 1;
}

/* "a.ripplelink i.level2/3 { margin-left }": nesting is shown by the link's padding instead. */
common-app-component .layout-menu-container a.ripplelink i.level2,
common-app-component .layout-menu-container a.ripplelink i.level3 {
    margin-left: 0 !important;
}

/* At 640px and below the customer CSS hides every table header and the search box, and stacks
   table cells; the tables here keep their headers and scroll sideways instead. */
@media (max-width: 640px) {
    common-app-component .layout-main .p-datatable.p-datatable-responsive .p-datatable-thead {
        display: table-header-group !important;
    }

    common-app-component .layout-main .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th {
        display: table-cell !important;
    }

    common-app-component .layout-main .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
        width: auto !important;
    }

    common-app-component .layout-main .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td.cell-order {
        text-align: center !important;
    }

    common-app-component .layout-main .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td.cell-number {
        text-align: right !important;
    }

    common-app-component .layout-main .crudListToolbar > .advance-search-container {
        display: flex !important;
    }

    common-app-component .layout-main .main-container-search-inner > .container-control,
    common-app-component .layout-main .dashboard .header > .container-control {
        width: auto !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    common-app-component .layout-main app-ban-lam-viec [class*="p-md-"] {
        width: auto !important;
        padding: 0 !important;
    }

    common-app-component .layout-main .container-control.dropdown > span.label {
        height: auto;
        font-size: 12.5px;
    }

    common-app-component .layout-main .main-container-search-inner > .container-control,
    common-app-component .layout-main .dashboard .header > .container-control {
        width: auto !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   Business screens (F10 "Cơ sở đào tạo & Quản trị")

   The reference screens are reconstructed from the customer's export and use
   its own classes. These are the few extra rules the business screens need:
   the form grid, the validation messages, the workbench counters and the row
   action. Nothing here restyles the customer's layout.
   --------------------------------------------------------------------------- */

.business-form .container-control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
}

.business-form .container-control > .label,
.scope-form > .label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #495057;
}

.business-form textarea.p-inputtext {
    resize: vertical;
    font-family: inherit;
}

.business-form input[readonly] {
    background: #f1f3f5;
    color: #6c757d;
}

.field-error:not(:empty) {
    font-size: 0.75rem;
    color: #b02a37;
}

.field-note {
    font-size: 0.75rem;
    color: #6c757d;
}

.form-error-summary {
    margin: 0.5rem 0.5rem 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid #f1aeb5;
    border-left-width: 4px;
    border-radius: 3px;
    background: #fdf2f3;
    color: #842029;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.form-actions {
    margin-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
}

.form-actions .button-group {
    display: flex;
    gap: 0.5rem;
}

.scope-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
}

.workbench-counter {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.workbench-counter:hover {
    border-color: #ced4da;
    background: #f8f9fa;
}

.workbench-counter-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}

.workbench-counter-label {
    font-size: 0.8rem;
    color: #6c757d;
}

.summary-table {
    margin-bottom: 0.75rem;
}

.action-link {
    display: inline-flex;
    color: #495057;
}

.action-link:hover {
    color: #0d6efd;
}