/* Shared workspace language, based on the Customer directory and detail screens.
   Scoped to application layouts so exported documents keep their own styling. */
:root {
    --workspace-ink: #263750;
    --workspace-muted: #66758b;
    --workspace-line: #e3e8ef;
    --workspace-surface: #f7f9fc;
    --workspace-accent: #be1830;
    --workspace-radius: 14px;
    --workspace-focus: 0 0 0 3px #7d9bc333;
}

body.bg-gray-200 { background-color: var(--workspace-surface) !important; }
.customer-workspace {
    --customer-ink: var(--workspace-ink);
    --customer-muted: var(--workspace-muted);
    --customer-line: var(--workspace-line);
    --customer-surface: var(--workspace-surface);
    --customer-accent: var(--workspace-accent);
}
.ux-app-main { color: var(--workspace-ink); }
.ux-app-main > .container-fluid, .ux-app-main > [wire\:id] > .container-fluid { padding-inline: 1.5rem; }
.ux-app-main .ux-page-header { margin-bottom: 1.25rem; }
.ux-app-main .ux-page-header h1 { color: var(--workspace-ink); font-size: 1.2rem; line-height: 1.45; letter-spacing: -.015em; }
.ux-app-main .ux-page-header .text-muted { color: var(--workspace-muted) !important; font-size: .8rem !important; line-height: 1.65; }
.ux-app-main .ux-page-header-icon { background: #fcecf0; color: var(--workspace-accent); border-radius: 11px; }
.ux-app-main .ux-page-eyebrow { color: var(--workspace-muted); font-size: .67rem; font-weight: 500; letter-spacing: .035em; }
.ux-app-main .ux-context-strip { gap: .75rem; border: 0; background: transparent; overflow: visible; }
.ux-app-main .ux-context-strip > .ux-context-item { background: #fff; border: 1px solid var(--workspace-line); border-radius: 10px; box-shadow: none; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-item-header { align-items: flex-start; gap: .65rem; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-heading { display: grid; gap: .2rem; flex: 1; min-width: 0; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-kicker { display: block; color: var(--workspace-muted); font-size: var(--ui-font-label); font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-title { display: block; margin: 0; color: var(--workspace-ink); font-size: .875rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
:is(.ux-app-main, .ux-workspace-modal) a.ux-context-title:hover { color: var(--workspace-accent); text-decoration: underline; text-underline-offset: .18em; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-meta { margin-top: .75rem; gap: .4rem; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-meta-row { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); gap: .65rem; font-size: var(--ui-font-table); line-height: 1.5; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-meta-row dt { color: var(--workspace-muted); font-size: var(--ui-font-label); font-weight: 500; line-height: 1.625; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
:is(.ux-app-main, .ux-workspace-modal) .ux-context-meta-row dd { color: var(--workspace-ink); font-size: var(--ui-font-table); line-height: 1.5; }
:is(.ux-app-main, .ux-workspace-modal) .ux-summary-label { font-size: var(--ui-font-label); font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; }

.ux-app-main .card, .ux-auth-main .card {
    border: 1px solid var(--workspace-line);
    border-radius: var(--workspace-radius);
    box-shadow: 0 2px 5px rgba(38, 55, 80, .035);
    min-width: 0;
}
.ux-app-main .card.shadow-sm { box-shadow: 0 2px 5px rgba(38, 55, 80, .035) !important; }
.ux-app-main .card > .card-header { background: #fff; border-radius: var(--workspace-radius) var(--workspace-radius) 0 0; }
.ux-app-main .card-header :is(h2, h3, h4, h5, h6) { color: var(--workspace-ink); font-size: var(--ui-font-section); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ux-app-main .card-header .text-end h4 { font-size: 1.65rem; line-height: 1.3; }
.ux-app-main .card-header > p { color: var(--workspace-muted); font-size: .76rem !important; line-height: 1.65; margin: .35rem 0 .85rem; }
.ux-app-main .card-footer { border-color: var(--workspace-line); }

/* Legacy page wrappers use the same separate heading and content panels. */
.ux-app-main .card.ux-page-shell { background: transparent; border: 0; box-shadow: none; margin-top: 0 !important; }
.ux-app-main .ux-page-shell > .px-4.pt-4 { padding: 0 !important; }
.ux-app-main .ux-page-shell > .card-body { border: 1px solid var(--workspace-line); background: #fff; border-radius: var(--workspace-radius); min-width: 0; }
.ux-app-main .ux-page-shell:has(> .card-body > form[data-ux-form]) > .card-body {
    padding: 0 !important; border: 0; background: transparent;
}
.ux-app-main .ux-form-content > .card:not(:has(> .card-header)):has(> .card-body > form[data-ux-form]) { border: 0; background: transparent; box-shadow: none; }
.ux-app-main .ux-form-content > .card:not(:has(> .card-header)) > .card-body:has(> form[data-ux-form]) { padding: 0 !important; }

/* Comfortable fields and persistent labels, shared by every form and filter. */
:is(.ux-app-main, .ux-auth-main) .form-label { color: #53647c; font-size: .75rem; font-weight: 500; margin-bottom: .4rem; }
:is(.ux-app-main, .ux-auth-main) :is(.form-control, .form-select) {
    color: var(--workspace-ink); font-size: .8rem; line-height: 1.5;
    min-height: 42px; border: 1px solid #d8e0e9 !important; border-radius: 8px;
    background-color: #fff; padding: .6rem .75rem !important; box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.ux-app-main, .ux-auth-main) .form-select { padding-right: 2rem !important; }
:is(.ux-app-main, .ux-auth-main) select.form-control {
    appearance: auto; padding-right: .5rem !important;
}
:is(.ux-app-main, .ux-auth-main) :is(.form-control, .form-select):focus {
    border-color: #8c9eb7 !important; box-shadow: var(--workspace-focus); outline: none;
}
:is(.ux-app-main, .ux-auth-main) .form-control::placeholder { color: #7c899a; opacity: 1; }
:is(.ux-app-main, .ux-auth-main) textarea.form-control { min-height: 104px; resize: vertical; }
:is(.ux-app-main, .ux-auth-main) select[multiple] { min-height: 112px; }
:is(.ux-app-main, .ux-auth-main) :is(.form-control, .form-select):disabled,
:is(.ux-app-main, .ux-auth-main) .form-control[readonly] { color: #66758b; background-color: #f4f6f9; }
:is(.ux-app-main, .ux-auth-main) .form-control[type="file"] { font-size: .75rem; padding: .45rem .6rem !important; }
:is(.ux-app-main, .ux-auth-main) .form-control[type="file"]::file-selector-button {
    background: #edf1f6; color: #425875; border: 0; border-radius: 5px; padding: .35rem .65rem; margin: 0 .65rem 0 0; cursor: pointer;
}
.ux-app-main .form-check-label { font-size: .78rem; color: var(--workspace-ink); line-height: 1.6; }
.ux-app-main .form-check-input { flex-shrink: 0; }
.ux-app-main .ql-toolbar.ql-snow { border-color: #d8e0e9; border-radius: 8px 8px 0 0; background: #f9fbfd; }
.ux-app-main .ql-container.ql-snow { border-color: #d8e0e9; border-radius: 0 0 8px 8px; font-size: .85rem; }
/* Notes use one readable surface and type scale in forms and read-only views. */
.ux-app-main .ql-toolbar.ql-snow { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; padding: .6rem !important; border: 1px solid var(--workspace-line) !important; border-radius: 10px 10px 0 0 !important; background: #f7f9fc !important; }
.ux-app-main .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; gap: .15rem; margin: 0 !important; padding: 0; }
.ux-app-main .ql-toolbar.ql-snow button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; padding: .35rem !important; border: 0 !important; border-radius: 6px; background: transparent; }
.ux-app-main .ql-toolbar.ql-snow :is(button, .ql-picker-label) svg { width: 18px; height: 18px; flex-shrink: 0; }
.ux-app-main .ql-toolbar.ql-snow button .fa { font-size: 16px; line-height: 1; }
.ux-app-main .ql-toolbar.ql-snow button:hover, .ux-app-main .ql-toolbar.ql-snow button.ql-active { background: #e7edf5 !important; }
.ux-app-main .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--workspace-accent); }
.ux-app-main .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--workspace-accent); }
.ux-app-main .ql-toolbar.ql-snow button:focus-visible { outline: 2px solid #637e9f; outline-offset: 1px; }
.ux-app-main .quill-editor.ql-container.ql-snow { min-height: 0 !important; padding: 0 !important; border: 1px solid var(--workspace-line) !important; border-top: 0 !important; border-radius: 0 0 10px 10px !important; box-shadow: none !important; }
.ux-app-main .quill-editor:focus-within { border-color: #8c9eb7 !important; box-shadow: var(--workspace-focus) !important; }
.ux-app-main .quill-editor > .ql-editor { min-height: 152px; padding: .85rem 1rem; color: var(--workspace-ink); font-family: var(--ui-font-family); font-size: var(--ui-font-table); line-height: 1.6; overflow-wrap: anywhere; }
.ux-app-main .quill-editor > .ql-editor.ql-blank::before { color: #7c899a; font-style: normal; }
.ux-notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.ux-note-panel { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; }
.ux-notes-grid > .ux-note-panel:only-child { grid-column: 1 / -1; }
.ux-app-main .ux-note-title { margin-bottom: .65rem; }
.ux-app-main .ux-note-content.ql-editor { height: auto; min-height: 0; padding: 0; overflow: visible; font-family: var(--ui-font-family); font-size: var(--ui-font-table); line-height: 1.6; color: var(--workspace-ink); white-space: normal; overflow-wrap: anywhere; }
.ux-app-main :is(.ux-note-content, .quill-editor > .ql-editor) :where(p, div, span, font, li, a, strong, b, em, i, u, td, th, blockquote) { font-family: inherit !important; font-size: inherit !important; line-height: inherit; }
.ux-app-main :is(.ux-note-content, .quill-editor > .ql-editor) h1 { font-size: 15px !important; line-height: 1.5; margin: .65rem 0 .4rem !important; }
.ux-app-main :is(.ux-note-content, .quill-editor > .ql-editor) h2 { font-size: 14px !important; line-height: 1.5; margin: .6rem 0 .4rem !important; }
.ux-app-main :is(.ux-note-content, .quill-editor > .ql-editor) h3 { font-size: 13px !important; line-height: 1.5; margin: .6rem 0 .4rem !important; }
.ux-app-main .ux-note-content :is(p, ul, ol, blockquote, pre) { margin: 0 0 .45rem; }
.ux-note-content > :first-child { margin-top: 0 !important; }
.ux-note-content > :last-child { margin-bottom: 0 !important; }
.ux-note-content a { color: #345d91; text-decoration: underline; text-underline-offset: 2px; }
.ux-note-content :is(img, video, iframe, svg) { max-width: 100%; }
.ux-note-content img { height: auto; }
.ux-note-content :is(pre, code) { white-space: pre-wrap; overflow-wrap: anywhere; }
.ux-note-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ux-note-content :is(td, th) { border: 1px solid var(--workspace-line); padding: .4rem .6rem; }
@media (max-width: 767.98px) {
    .ux-notes-grid { grid-template-columns: minmax(0, 1fr); }
    .ux-note-panel { padding: .85rem; }
    .ux-app-main .ql-toolbar.ql-snow button, .ux-app-main .ql-toolbar.ql-snow .ql-picker { min-width: 44px; min-height: 44px; }
}
.ux-app-main .select2-container--default .select2-selection { min-height: 42px; border-color: #d8e0e9; border-radius: 8px; }
.ux-app-main .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; font-size: .8rem; }
.ux-app-main .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.ux-app-main .select2-container--focus .select2-selection { border-color: #8c9eb7; box-shadow: var(--workspace-focus); }

.ux-app-main [data-ux-form] > .row { --bs-gutter-x: 1.25rem; }
.ux-app-main .ux-form-section > .card-header { position: relative; padding: 1.1rem 3.25rem .75rem 1.25rem !important; }
.ux-app-main .ux-form-section > .card-body { padding: .5rem 1.25rem 1.1rem !important; }
.ux-app-main .ux-form-section > .card-body[hidden] { display: none !important; }
.ux-app-main .ux-form-section { scroll-margin-top: var(--ux-form-nav-offset, 1rem); }
.ux-app-main .ux-form-section.ux-section-collapsed > .card-header { border-radius: var(--workspace-radius); padding-bottom: 1rem !important; }
.ux-app-main .ux-form-section.ux-section-collapsed > .card-header > p { margin-bottom: 0; }
.ux-section-toggle { position: absolute; top: .8rem; right: .85rem; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--workspace-line); border-radius: 8px; background: #fff; color: #71829b; }
.ux-section-toggle:hover { color: var(--workspace-accent); background: #fafbfd; }
.ux-section-toggle .material-icons { font-size: 1.2rem; transition: transform .18s ease; }
.ux-section-toggle[aria-expanded="false"] .material-icons { transform: rotate(-90deg); }
.ux-app-main .ux-form-nav { display: block; position: sticky; top: .75rem; z-index: 90; min-width: 0; padding: .7rem .75rem .55rem; margin-bottom: 1.25rem; border: 1px solid #dce4ef; border-radius: 12px; background: #f3f6fb; box-shadow: 0 3px 10px #26375008; }
.ux-form-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 .3rem .45rem; }
.ux-form-nav-title { color: #536780; font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ux-form-nav-count { color: #66758b; font-size: .64rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ux-form-nav-main { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.ux-form-nav-track { display: flex; align-items: stretch; flex: 1; gap: .3rem; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: .2rem; padding: .2rem; }
.ux-form-nav-track::-webkit-scrollbar { display: none; }
.ux-app-main .ux-form-nav a { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; position: relative; min-height: 44px; margin: 0; padding: .55rem .7rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #536780; font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.ux-app-main .ux-form-nav a:hover { color: var(--workspace-ink); background: #e8eef6; border-color: transparent; }
.ux-app-main .ux-form-nav a[aria-current="location"] { color: #aa1730; background: #fff; border-color: #e5c2ca; box-shadow: 0 1px 3px #26375008; }
.ux-app-main .ux-form-nav a[aria-current="location"]::after { content: ''; position: absolute; inset: auto .7rem 0; height: 2px; border-radius: 2px; background: var(--workspace-accent); }
.ux-form-nav-number { display: inline-grid; place-items: center; min-width: 23px; height: 23px; border-radius: 6px; background: #e5ebf3; color: #536780; font-size: .62rem; font-weight: 600; font-variant-numeric: tabular-nums; }
[aria-current="location"] > .ux-form-nav-number { background: #fbecef; color: #aa1730; }
.ux-form-nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: .2rem; border-radius: 50%; color: #fff; background: #b62640; font-size: .62rem; font-weight: 600; }
.ux-form-nav-badge[hidden] { display: none; }
.ux-app-main .ux-form-nav a.ux-form-nav-error:not([aria-current]) { color: #a7243c; }
.ux-app-main .ux-form-nav-scroll { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 44px; padding: 0; border: 1px solid #d5dfeb; border-radius: 8px; background: #fff; color: #435c7b; }
.ux-app-main .ux-form-nav-scroll[hidden] { display: none; }
.ux-app-main .ux-form-nav-scroll:hover:not(:disabled) { border-color: #aabbd0; background: #e9eff7; }
.ux-app-main .ux-form-nav-scroll:disabled { color: #99a8bb; background: #f3f6fb; border-color: #e3e9f1; cursor: default; }
.ux-form-nav-scroll .material-icons { font-size: 20px; }
.ux-app-main .ux-form-nav a:focus-visible { outline: 2px solid #637e9f; outline-offset: -2px; }
.ux-app-main .ux-form-actions { border-color: var(--workspace-line); border-radius: 10px; padding: .8rem 1rem; box-shadow: 0 -3px 12px rgba(38, 55, 80, .04); }
.ux-app-main .ux-form-actions .btn { min-height: 40px; font-size: .75rem; }

.ux-form-feedback { padding: 1rem 1.1rem; margin-bottom: 1rem; border: 1px solid #ecc5cd; border-radius: 10px; background: #fff6f7; color: #9b243a; font-size: .78rem; line-height: 1.65; }
[data-ux-feedback]:not(:has(.ux-form-feedback)) { display: none; }
.ux-feedback-heading { display: flex; align-items: center; gap: .5rem; }
.ux-feedback-heading .material-icons { font-size: 1.1rem; }
.ux-form-feedback ul { padding-left: 1.5rem; margin: .5rem 0 0; }
.ux-form-feedback button { border: 0; background: transparent; padding: .15rem 0; text-align: left; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ux-form-feedback button:disabled { text-decoration: none; opacity: 1; cursor: default; }
:is(.ux-app-main, .ux-auth-main) [aria-invalid="true"] { border-color: #bf465c !important; }
:is(.ux-app-main, .ux-auth-main) .inputerror { font-size: .73rem; line-height: 1.6; margin: .35rem 0 0; }

/* Same compact toolbar, controls, and actions in every module. */
.ux-app-main .ux-table-toolbar { padding: 1rem 1.25rem; gap: 1rem; border-color: var(--workspace-line); background: #fff; }
.ux-app-main .ux-table-toolbar :is(label, span.text-secondary) { font-size: .73rem !important; color: var(--workspace-muted) !important; }
.ux-app-main .ux-table-toolbar .ux-toolbar-select { min-height: 38px; padding: .4rem .65rem !important; }
.ux-app-main .ux-search-control { width: min(100%, 320px); min-width: min(100%, 260px); }
.ux-app-main .ux-search-control .form-control { padding-right: 2.5rem !important; }
.ux-app-main .form-control.ps-5 { padding-left: 2.5rem !important; }
.ux-app-main .ux-filter-strip { gap: .65rem; padding: 1rem 1.25rem .75rem; }
.ux-app-main .ux-chip { background: #f2f5f9; border-color: var(--workspace-line); color: #536780; font-size: .7rem; border-radius: 6px; }
.ux-app-main .table > tbody > tr > td { border-color: #edf0f5; }
.ux-app-main .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #fafbfd; }
.ux-app-main table :is(.form-control, .form-select) { min-height: 34px; font-size: .75rem; padding: .4rem .5rem !important; }
.ux-app-main .action-btns-wrapper :is(.btn-action-inline, .btn-action-toggle) { width: 34px; height: 34px; border-radius: 7px; }
.ux-app-main .action-btns-wrapper .btn-action-inline:hover { background-color: #f1f4f9; }
.ux-app-main .dropdown-menu { border: 1px solid var(--workspace-line); border-radius: 10px; box-shadow: 0 8px 26px #26375014; }
.ux-app-main .dropdown-item { font-size: .78rem; border-radius: 6px; }
.ux-app-main .modal-content { border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); box-shadow: 0 16px 60px #26375026; }
.ux-app-main .modal-header, .ux-app-main .modal-footer { border-color: var(--workspace-line); padding: 1rem 1.25rem; }
.ux-app-main .modal-title, .ux-app-main .modal-header .modal-title, .ux-workspace-modal .modal-title {
    font-family: var(--ui-font-family); font-size: var(--ui-font-section); font-weight: 600;
    line-height: 1.5; color: var(--workspace-ink); overflow-wrap: anywhere;
}
.ux-app-main .modal-body { padding: 1.25rem; }
.ux-app-main .nav-pills { background: #edf1f6; border-radius: 10px; padding: .3rem; }
.ux-app-main .nav-pills .nav-link { font-size: .78rem; font-weight: 500; border-radius: 7px; }
.ux-app-main .nav-pills .nav-link.active { color: var(--workspace-accent); background: #fff; box-shadow: 0 1px 4px #2637500d; }
.ux-app-main .nav-tabs { border-color: var(--workspace-line); }
.ux-app-main .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--workspace-muted); font-size: .78rem; font-weight: 500; padding: .85rem .5rem; background: transparent; }
.ux-app-main .nav-tabs .nav-link.active { color: var(--workspace-accent); border-bottom-color: var(--workspace-accent); }
.ux-app-main .calculation-builder .nav-tabs { display: flex; flex-wrap: nowrap; gap: .25rem; padding: .35rem !important; border: 0; border-bottom: 1px solid var(--workspace-line); background: #f3f6fb; border-radius: 12px 12px 0 0; overflow-x: auto; overscroll-behavior-x: contain; }
.ux-app-main .calculation-builder .nav-tabs > .nav-item { flex: 1 0 auto !important; }
.ux-app-main .calculation-builder .nav-tabs .nav-link { min-height: 44px; padding: .65rem .8rem !important; border-radius: 7px !important; color: #536780; font-size: .75rem; font-weight: 500 !important; white-space: nowrap; }
.ux-app-main .calculation-builder .nav-tabs .nav-link.active { color: #aa1730; background: #fff; box-shadow: inset 0 -2px var(--workspace-accent), 0 1px 3px #2637500a; }
.ux-app-main .calculation-builder .nav-tabs .nav-link:hover:not(.active) { color: var(--workspace-ink); background: #e8eef6; }
.ux-app-main .calculation-builder .tab-pane:focus-visible { outline-offset: -3px; }

:is(.ux-app-main, .ux-auth-main) .btn { border-radius: 8px; letter-spacing: 0; text-transform: none; box-shadow: none; }
:is(.ux-app-main, .ux-auth-main) .btn.bg-gradient-primary { background: var(--workspace-accent) !important; color: #fff; }
:is(.ux-app-main, .ux-auth-main) .btn.bg-gradient-primary:hover { background: #a31329 !important; box-shadow: 0 2px 5px #be183026; }
.ux-app-main .btn.bg-gradient-secondary { background: #edf1f6 !important; color: #425875; border: 1px solid #dce3ed; }
.ux-app-main .btn.bg-gradient-secondary:hover { background: #e3e9f1 !important; }
:is(.ux-app-main, .ux-auth-main) :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #7d9bc366; outline-offset: 2px; }
:is(.ux-app-main, .ux-auth-main) button:disabled { cursor: not-allowed; }

/* Authentication uses the same brand, calm surfaces, and always-visible labels. */
.ux-auth-main { background: var(--workspace-surface); color: var(--workspace-ink); }
.ux-auth-main .page-header { background-color: var(--workspace-surface); flex-direction: column; overflow: visible !important; padding-top: 7rem; }
.ux-auth-main .page-header > .container { margin-top: auto !important; padding-block: 2rem; position: relative; z-index: 1; }
.ux-auth-main .signin-margin { margin-block: 0 !important; }
.ux-auth-main .page-header > .footer { position: relative !important; bottom: auto !important; margin-top: auto; }
.ux-auth-main .card { border-top: 3px solid var(--workspace-accent); animation: none; opacity: 1; transform: none; }
.ux-auth-main .card-header { padding: 1.5rem 1.5rem .5rem !important; margin: 0 !important; background: #fff; border-radius: 12px 12px 0 0; }
.ux-auth-main .card-header h1 { font-size: 1.35rem; color: var(--workspace-ink); margin: .5rem 0; }
.ux-auth-main .card-header p { color: var(--workspace-muted); font-size: .8rem; line-height: 1.65; margin: 0; }
.ux-auth-main .card-body { padding: .75rem 1.5rem 1.5rem; }
.ux-auth-main .input-group.input-group-outline { display: flex; flex-direction: column; align-items: stretch; }
.ux-auth-main .input-group.input-group-outline .form-label { position: static; margin: 0 0 .4rem; height: auto; line-height: 1.5 !important; transform: none; pointer-events: auto; }
.ux-auth-main .input-group.input-group-outline .form-label::before,
.ux-auth-main .input-group.input-group-outline .form-label::after { display: none; }
.ux-auth-main .input-group > .form-control { width: 100%; border-radius: 8px !important; margin-left: 0 !important; }
.ux-auth-main .btn[type="submit"] { min-height: 44px; }
.ux-auth-main .text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--workspace-accent) !important; }
.ux-auth-main .footer .text-white { color: var(--workspace-muted) !important; }

@media (max-width: 991.98px) {
    .ux-app-main .action-btns-wrapper :is(.btn-action-inline, .btn-action-toggle) { width: 40px; height: 40px; }
}
@media (max-width: 767.98px) {
    .ux-app-main > .container-fluid, .ux-app-main > [wire\:id] > .container-fluid { padding-inline: 1rem; }
    .ux-app-main .ux-page-header h1 { font-size: 1.1rem; }
    .ux-app-main .ux-page-header .text-muted { font-size: .76rem !important; }
    .ux-app-main .ux-form-section > .card-header { padding: 1rem 3.5rem .65rem 1rem !important; }
    .ux-app-main .ux-form-section > .card-body { padding: .5rem 1rem 1rem !important; }
    .ux-app-main .ux-form-actions { position: static; padding: .75rem; backdrop-filter: none; }
    .ux-app-main .ux-form-actions .btn { min-height: 44px; }
    .ux-app-main .ux-form-nav a { min-height: 44px; }
    .ux-app-main .ux-form-nav-scroll { width: 40px; }
    .ux-app-main .ux-form-nav a { max-width: 100%; padding-inline: .6rem; }
    .ux-form-nav-number { display: none; }
    .ux-form-nav-label { white-space: normal; text-align: left; }
    .ux-section-toggle { width: 40px; height: 40px; top: .65rem; right: .65rem; }
    .ux-app-main .action-btns-wrapper :is(.btn-action-inline, .btn-action-toggle) { width: 44px; height: 44px; }
    .ux-app-main .ux-table-toolbar { padding: 1rem; }
    .ux-app-main .ux-filter-strip { padding: 1rem; }
    .ux-app-main .ux-table-toolbar .ux-entries-control select { min-height: 44px; }
    .ux-app-main .modal-body { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ux-section-toggle .material-icons, :is(.ux-app-main, .ux-auth-main) :is(.form-control, .form-select) { transition: none; }
}

/* Notyf follows the same surfaces and control scale on application and sign-in screens. */
.notyf.ux-notifications { z-index: 12000; height: 100dvh; box-sizing: border-box; gap: .65rem; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); font-family: var(--ui-font-family); overflow-y: auto; scrollbar-width: thin; }
body:has(.ux-navbar) .notyf.ux-notifications { padding-top: 6.5rem; }
body .notyf.ux-notifications[data-overlay="true"] { padding-top: max(1rem, env(safe-area-inset-top)); }
.ux-notifications .notyf__toast { --toast-background: #244a70; --toast-border: #456c95; --toast-accent: #b5d8ff; --toast-tint: #365f88; width: min(380px, 100%); max-width: 100%; margin: 0; padding: .75rem; border: 1px solid var(--toast-border); border-inline-start: 3px solid var(--toast-accent); border-radius: 10px; background: var(--toast-background); color: #f4f7fb; box-shadow: 0 6px 22px #1724393d; animation: ux-toast-in .18s ease-out both; }
.ux-notifications .ux-toast--success { --toast-background: #1f5a43; --toast-border: #36785b; --toast-accent: #9de8bd; --toast-tint: #2e7155; }
.ux-notifications .ux-toast--error { --toast-background: #652438; --toast-border: #8f4154; --toast-accent: #ffb7c7; --toast-tint: #80384d; }
.ux-notifications .ux-toast--warning { --toast-background: #7c3434; --toast-border: #a45656; --toast-accent: #ffd1cb; --toast-tint: #994b4b; }
.ux-notifications .notyf__toast .notyf__wrapper { display: grid; grid-template-columns: 32px minmax(0, 1fr) 36px; align-items: center; gap: .65rem; padding: 0; border-radius: 0; }
.ux-notifications .notyf__toast .notyf__icon { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 8px; background: var(--toast-tint); color: var(--toast-accent); opacity: 1; transform: none; animation: none; }
.ux-notifications .notyf__icon .material-icons { font-size: 20px; line-height: 1; }
.ux-notifications .notyf__toast .notyf__message { min-width: 0; max-height: min(40dvh, 18rem); margin: 0; color: inherit; font: 400 13px/1.5 var(--ui-font-family); white-space: pre-line; overflow-wrap: anywhere; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; opacity: 1; transform: none; animation: none; }
.ux-notifications .notyf__message :is(p, ul, ol) { margin-block: .25rem; }
.ux-notifications .notyf__message a { color: #d4e8ff; text-decoration: underline; text-underline-offset: .15em; }
.ux-notifications .notyf__toast .notyf__dismiss { position: static; width: 36px; height: 36px; margin: 0; opacity: 1; transform: none; animation: none; }
.ux-notifications .notyf__dismiss-btn { display: block; position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #e2eaf4; opacity: 1; }
.ux-notifications .notyf__dismiss-btn::before, .ux-notifications .notyf__dismiss-btn::after { background: currentColor; }
.ux-notifications .notyf__dismiss-btn:hover { background: #ffffff1a; color: #fff; opacity: 1; }
.ux-notifications :is(.notyf__dismiss-btn, .notyf__message[tabindex]):focus-visible { outline: 2px solid #d4e4f8; outline-offset: 2px; }
.ux-notifications .notyf__ripple { display: none; }
.ux-notifications .notyf__toast.notyf__toast--disappear { animation: ux-toast-out .15s ease-in forwards; animation-delay: 0s; }
@keyframes ux-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ux-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 767.98px) {
    body:has(.ux-navbar) .notyf.ux-notifications { padding-top: 6rem; }
    body .notyf.ux-notifications[data-overlay="true"] { padding-top: max(1rem, env(safe-area-inset-top)); }
    .ux-notifications .notyf__toast .notyf__wrapper { grid-template-columns: 32px minmax(0, 1fr) 44px; }
    .ux-notifications .notyf__toast .notyf__dismiss, .ux-notifications .notyf__dismiss-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ux-notifications .notyf__toast, .ux-notifications .notyf__toast.notyf__toast--disappear { animation-duration: 1ms; animation-delay: 0s; }
    .ux-notifications .notyf__dismiss-btn { transition: none; }
}

/* One typography and control scale across every application page. */
:root {
    --ui-font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-font-body: .875rem;
    --ui-font-table: .8125rem;
    --ui-font-label: .75rem;
    --ui-font-button: .75rem;
    --ui-font-caption: .75rem;
    --ui-font-heading: 1.25rem;
    --ui-font-section: .9375rem;
    --ui-font-subsection: .8125rem;
    --ux-compact-btn-font-size: var(--ui-font-button);
}
:is(.ux-app-main, .ux-auth-main) { font-family: var(--ui-font-family); font-size: var(--ui-font-body); line-height: 1.6; }
:is(.ux-app-main, .ux-auth-main) button { font-family: var(--ui-font-family); }
.ux-app-main .ux-page-header h1 { font-family: var(--ui-font-family); font-size: var(--ui-font-heading); font-weight: 700; line-height: 1.4; }
/* Explicit application headings keep rich-text notes and document editors independent. */
.ux-app-main :is(.ux-section-title, .ux-subsection-title) {
    display: flex; align-items: center; gap: .5rem; min-width: 0;
    margin: 0; color: var(--workspace-ink); font-family: var(--ui-font-family);
    font-size: var(--ui-font-section); font-weight: 600; line-height: 1.5;
    letter-spacing: 0; text-transform: none; overflow-wrap: anywhere;
}
.ux-app-main .ux-subsection-title,
.ux-app-main .card-header .ux-subsection-title { font-size: var(--ui-font-subsection); }
.ux-app-main :is(.ux-section-title, .ux-subsection-title) > :is(.material-icons, .material-icons-round, .fas, .far) {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px;
    width: 18px; font-size: 18px; line-height: 1.5; margin: 0;
    color: var(--workspace-muted);
}
.ux-app-main .ux-title-divider { padding-bottom: .65rem; margin-bottom: 1rem; border-bottom: 1px solid var(--workspace-line); }
.ux-app-main .ux-title-with-actions { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ux-title-with-actions > :first-child { min-width: 0; flex: 1 1 220px; }
.ux-title-with-actions > :last-child { min-width: 0; max-width: 100%; }
.ux-app-main :is(.text-sm, .text-xs, small) { font-size: var(--ui-font-caption) !important; line-height: 1.6; }
:is(.ux-app-main, .ux-workspace-modal) :is(.form-label, .form-check-label, label) { font-size: var(--ui-font-label); letter-spacing: 0; text-transform: none; }
:is(.ux-app-main, .ux-auth-main) .btn,
.ux-app-main :is(.ux-action-cluster .btn, .ux-form-actions .btn, .btn.btn-sm) {
    font-family: var(--ui-font-family); font-size: var(--ui-font-button) !important; font-weight: 600;
    line-height: 1.4; min-height: 40px; padding: .55rem .85rem; letter-spacing: 0; text-transform: none;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: normal;
}
:is(.ux-app-main, .ux-auth-main) .btn-primary { background: var(--workspace-accent); border-color: var(--workspace-accent); color: #fff; }
.ux-app-main .ux-action-cluster .btn:not(.bg-gradient-primary):not(.btn-primary):not(.btn-danger):not(.bg-gradient-danger) {
    background: #fff !important; border: 1px solid #dce3ed; color: #425875;
}
.ux-app-main .ux-action-cluster .btn:not(.bg-gradient-primary):not(.btn-primary):hover { background: #f1f4f9 !important; }
.ux-app-main .btn .material-icons { font-size: 1rem; line-height: 1; }
.ux-app-main .btn.btn-link { text-decoration: none; }
.ux-app-main .table { font-size: var(--ui-font-table); line-height: 1.45; }
.ux-app-main .table td { font-size: var(--ui-font-table); }
.ux-app-main .table th { font-size: .6875rem; font-weight: 600; letter-spacing: .025em; text-transform: none; }
.ux-app-main .ux-sort-button { font-family: var(--ui-font-family); font-size: inherit; font-weight: 600; }
.ux-app-main .ux-page-header .ux-action-cluster { gap: .6rem; }
.ux-app-main .ux-page-header-context { margin-top: .25rem; }
.ux-workspace { color: var(--workspace-ink); }
.ux-directory-page { min-width: 0; }
.ux-directory-panel { border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); background: #fff; box-shadow: 0 2px 5px #26375009; min-width: 0; }
.ux-directory-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .85rem; padding: 1.25rem; border-bottom: 1px solid var(--workspace-line); }
.ux-directory-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.ux-directory-search > .material-icons { position: absolute; top: 50%; left: .75rem; transform: translateY(-50%); color: #8190a4; font-size: 1.15rem; pointer-events: none; }
.ux-directory-search input, .ux-directory-filter select, .ux-directory-page-size select {
    width: 100%; min-height: 42px; border: 1px solid #d8e0e9; border-radius: 8px; background: #fff; color: var(--workspace-ink);
    font: inherit; font-size: .8125rem; line-height: 1.5; padding: .5rem .65rem; outline: none;
}
.ux-directory-search input { padding-left: 2.35rem; padding-right: 2.5rem; }
.ux-directory-search input::placeholder { color: var(--workspace-muted); opacity: 1; }
.ux-directory-search input:focus, .ux-directory-filter select:focus, .ux-directory-page-size select:focus { border-color: #8c9eb7; box-shadow: var(--workspace-focus); }
.ux-directory-search-loading { position: absolute; right: .75rem; top: .65rem; color: var(--workspace-accent); }
.ux-directory-filter { display: grid; flex: 0 1 180px; gap: .35rem; min-width: 130px; margin: 0 !important; }
.ux-directory-filter > label { margin: 0; font-size: var(--ui-font-label); color: var(--workspace-muted); font-weight: 500; }
.ux-directory-reset { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 42px; padding: .4rem .25rem; border: 0; background: transparent; color: #536780; font-size: var(--ui-font-button); font-weight: 500; }
.ux-directory-reset .material-icons { font-size: 1rem; }
.ux-directory-reset:disabled { color: #98a2b0; cursor: default; }
.ux-directory-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--workspace-line); }
.ux-directory-results { font-size: var(--ui-font-caption); color: var(--workspace-muted); margin: 0; }
.ux-directory-page-size { display: inline-flex; align-items: center; gap: .5rem; }
.ux-directory-page-size label { margin: 0; font-size: var(--ui-font-label); color: var(--workspace-muted); }
.ux-directory-page-size select { min-height: 36px; width: 70px; padding: .35rem .5rem; }
.ux-directory-panel > .ux-pagination { margin: 0; padding: 0 1.25rem 1rem; }
.ux-app-main .table-responsive > .table.ux-directory-table { margin-top: 0 !important; }
.ux-directory-table > tbody > tr > td { padding: .6rem .75rem; vertical-align: middle; }
.ux-directory-table .ux-cell-identity { font-weight: 600; color: var(--workspace-ink); }
.ux-directory-table td .text-muted, .ux-directory-table td .text-xs { font-weight: 400; }
/* Listings use row numbers when a visible saved Order column is absent. */
:is(.ux-app-main, .ux-workspace-modal) .table :is(th.ux-serial-column, td.ux-serial-cell) {
    width: 4.25rem; min-width: 4.25rem; text-align: center; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
:is(.ux-app-main, .ux-workspace-modal) .table td.ux-serial-cell { color: var(--workspace-muted); font-weight: 500; }
.ux-list-number { display: inline-flex; align-items: baseline; gap: .3rem; font-size: var(--ui-font-caption); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-list-number > span { color: var(--workspace-muted); font-weight: 400; }
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Preserve the material identity as the pinned column after inserting Sl No. */
    .table-responsive .table.table-sticky-first.ux-numbered-table :is(th, td):first-child { position: static; box-shadow: none; }
    .table-responsive .table.table-sticky-first.ux-numbered-table :is(th, td):nth-child(2) { position: sticky; left: 0; z-index: 2; box-shadow: 2px 0 4px #0000000d; }
    .table-responsive .table.table-sticky-first.ux-numbered-table thead th:nth-child(2) { z-index: 3; }
    .table-responsive .table.table-sticky-first.ux-numbered-table tbody td:nth-child(2) { background-color: #fff; }
}
@media (max-width: 767.98px) {
    .ux-app-main :is(.ux-directory-table, .customer-directory-table) > tbody > tr > .ux-serial-cell {
        display: flex; align-items: baseline; gap: .35rem; grid-column: 1 / -1;
        width: auto; min-width: 0; text-align: left; font-size: var(--ui-font-caption);
    }
    .ux-app-main :is(.ux-directory-table, .customer-directory-table) > tbody > tr > .ux-serial-cell::before { content: attr(data-label); display: inline; margin: 0; color: var(--workspace-muted); font-weight: 400; }
}
.ux-directory-table .ux-cell-actions { text-align: right; }
.ux-directory-table .ux-cell-actions .ux-row-actions { justify-content: flex-end; }
.ux-directory-table .ux-cell-actions .action-btns-wrapper { justify-content: flex-end; }
.ux-empty { display: grid; justify-items: center; gap: .6rem; padding: 3rem 1.25rem; text-align: center; }
.ux-empty > .material-icons { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #f1f4f9; color: #91a0b5; font-size: 26px; }
.ux-empty h2 { margin: 0; font-size: var(--ui-font-section); font-weight: 600; }
.ux-empty p { margin: 0; font-size: .8125rem; color: var(--workspace-muted); }
.ux-record-list { padding: 1.25rem; display: grid; gap: .75rem; min-width: 0; }
.ux-record { border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; min-width: 0; }
.ux-record.is-expanded { border-color: #c7d2e1; box-shadow: 0 0 0 1px #e8edf4; }
.ux-record-heading { display: flex; align-items: center; gap: .75rem; padding-right: .85rem; }
.ux-record-heading > h2 { flex: 1; min-width: 0; margin: 0; font-size: inherit; }
.ux-project-year-picker .clone-picker-trigger > span { min-width: 0; overflow-wrap: anywhere; }
.ux-project-year-picker .clone-picker-trigger > .material-icons { flex-shrink: 0; font-size: 20px; color: var(--workspace-muted); }
:is(.ux-app-main, .ux-workspace-modal) .clone-picker-trigger { min-height: 42px; font-size: 13px; }
:is(.ux-app-main, .ux-workspace-modal) .clone-picker-trigger[aria-expanded="true"] { border-color: #8c9eb7 !important; box-shadow: var(--workspace-focus); }
.ux-year-count { margin-left: auto; color: var(--workspace-muted); font-size: var(--ui-font-caption); font-variant-numeric: tabular-nums; }
/* One search field for directories, dropdowns, forms, and editor inspectors. */
.ux-search-field { position: relative; display: grid; min-width: 0; width: 100%; --ux-search-end-space: 2rem; }
.ux-search-field > .ux-search-icon { position: absolute; z-index: 1; top: 21px; left: .8rem; transform: translateY(-50%); font-size: 18px; line-height: 1; color: var(--workspace-muted); pointer-events: none; }
:is(.ux-app-main, .ux-workspace-modal, .ux-select-popup) .ux-search-field > .ux-search-input {
    width: 100%; min-width: 0; height: 42px; min-height: 42px; margin: 0;
    padding: .55rem var(--ux-search-end-space) .55rem 2.15rem !important;
    border: 1px solid #d8e0e9 !important; border-radius: 8px; background: #fff; color: var(--workspace-ink);
    font: 400 13px/1.5 var(--ui-font-family); box-shadow: none;
}
:is(.ux-app-main, .ux-workspace-modal, .ux-select-popup) .ux-search-field > .ux-search-input:focus { outline: none; border-color: #8c9eb7 !important; box-shadow: var(--workspace-focus); }
.ux-search-field > .ux-search-input::placeholder { color: #7c899a; opacity: 1; }
:is(.ux-directory-search, .search-wrapper, .role-permission-search) .ux-search-field { --ux-search-end-space: 3.5rem; }
.ux-select-popup, :is(.ux-app-main, .ux-workspace-modal) .clone-picker-dropdown { border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; color: var(--workspace-ink); box-shadow: 0 8px 26px #26375024; font-family: var(--ui-font-family); overflow: hidden; }
.ux-select-popup { position: fixed; display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 16px); }
:is(.ux-app-main, .ux-workspace-modal) .clone-picker-dropdown { min-width: min(248px, calc(100vw - 2rem)); }
.ux-select-search-row { position: relative; flex-shrink: 0; padding: .6rem; border-bottom: 1px solid var(--workspace-line); }
.ux-option-menu-search { position: sticky; top: -.95rem; z-index: 1; margin: -.35rem -.35rem .65rem; background: #fff; }
.ux-select-options, .clone-picker-options { min-height: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ux-select-option, :is(.ux-app-main, .ux-workspace-modal) .clone-picker-option { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 40px; margin: 0; padding: .55rem .75rem; border: 0; border-radius: 0; background: #fff; color: var(--workspace-ink); font: 400 13px/1.5 var(--ui-font-family); text-align: left; white-space: normal; }
.ux-select-option:hover:not(:disabled), .ux-select-option:focus-visible, :is(.ux-app-main, .ux-workspace-modal) .clone-picker-option:is(:hover, :focus-visible, :focus-within) { outline: 2px solid #637e9f; outline-offset: -2px; background: #f0f4f9; }
.ux-select-option[aria-selected="true"], :is(.ux-app-main, .ux-workspace-modal) .clone-picker-option:is([aria-selected="true"], :has(input:checked)) { background: #fff2f5; color: #a71932; font-weight: 500; }
.ux-select-option:disabled, :is(.ux-app-main, .ux-workspace-modal) .clone-picker-option:disabled { color: #8c98aa; cursor: not-allowed; background: #fafbfd; }
.ux-select-option > .material-icons, .clone-picker-option > .material-icons { flex: 0 0 18px; width: 18px; font-size: 18px; }
.ux-select-option-label { min-width: 0; overflow-wrap: anywhere; }
.ux-select-group { padding: .45rem .75rem; background: #f5f7fa; color: var(--workspace-muted); font-size: 12px; font-weight: 600; }
.ux-select-empty { margin: 0; padding: .9rem; font-size: 13px; color: var(--workspace-muted); }
.ux-select-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .65rem; border-top: 1px solid var(--workspace-line); font-size: 12px; color: var(--workspace-muted); }
.ux-select-done { min-height: 36px; padding: .4rem .8rem; border: 1px solid var(--workspace-line); border-radius: 7px; background: #fff; color: var(--workspace-ink); font: 600 12px/1.4 var(--ui-font-family); }
.ux-select-done:focus-visible { outline: 2px solid #637e9f; outline-offset: 1px; }
:is(.ux-app-main, .ux-workspace-modal) select.ux-select-open { border-color: #8c9eb7 !important; box-shadow: var(--workspace-focus); }
@media (max-width: 767.98px) {
    :is(.ux-app-main, .ux-workspace-modal, .ux-select-popup) .ux-search-field > .ux-search-input { height: 44px; min-height: 44px; }
    .ux-search-field > .ux-search-icon { top: 22px; }
    .ux-select-option, .ux-select-done, :is(.ux-app-main, .ux-workspace-modal) :is(.clone-picker-option, .clone-picker-trigger) { min-height: 44px; }
}
.ux-record-toggle { display: flex; align-items: center; gap: .85rem; width: 100%; min-width: 0; padding: 1rem; text-align: left; color: var(--workspace-ink); border: 0; border-radius: 10px; background: transparent; }
.ux-record-toggle:hover { background: #fafbfd; }
.ux-record-symbol { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: #eef3f9; color: #57708f; }
.ux-record-symbol .material-icons { font-size: 1.2rem; }
.ux-record-identity { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.ux-record-name { font-size: .875rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ux-record-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--workspace-muted); font-size: var(--ui-font-caption); font-weight: 400; line-height: 1.6; }
.ux-record-chevron { color: #75859a; font-size: 1.25rem; transition: transform .18s ease; }
.ux-record.is-expanded .ux-record-chevron { transform: rotate(180deg); }
.ux-status-pill { display: inline-flex; max-width: 100%; border-radius: 6px; padding: .25rem .5rem; background: #eef3f9; color: #536780; font-size: .6875rem; font-weight: 500; line-height: 1.5; }
.ux-record-body { padding: 1rem; border-top: 1px solid var(--workspace-line); border-radius: 0 0 9px 9px; background: var(--workspace-surface); }
.ux-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1rem; }
.ux-details-grid dt { font-size: var(--ui-font-caption); font-weight: 500; color: var(--workspace-muted); margin-bottom: .25rem; }
.ux-details-grid dd { font-size: .8125rem; color: var(--workspace-ink); margin: 0; overflow-wrap: anywhere; }
.ux-record-description { color: var(--workspace-muted); font-size: .8125rem; line-height: 1.7; margin: .5rem 0; white-space: pre-line; overflow-wrap: anywhere; }
.ux-record-links, .ux-linked-record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.ux-text-action { display: inline-flex; align-items: center; justify-content: flex-start; gap: .35rem; min-height: 36px; padding: .15rem 0; border: 0; background: transparent; color: #3d5d83; font-size: var(--ui-font-button); font-weight: 500; text-decoration: none; }
.ux-text-action .material-icons { font-size: 1rem; }
.ux-text-action:hover { color: var(--workspace-accent); text-decoration: underline; }
.ux-linked-records { display: grid; gap: .65rem; margin-top: .75rem; }
.ux-linked-record { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--workspace-line); border-radius: 8px; min-width: 0; }
.ux-linked-record strong { font-size: .8125rem; font-weight: 600; }
.ux-inline-empty { font-size: .8125rem; color: var(--workspace-muted); margin: .5rem 0; }
.ux-app-main .action-btns-wrapper .ux-danger-action { color: #a45561; }
.ux-app-main .action-btns-wrapper .ux-danger-action:hover { color: #b3132d; background: #fcecf0; }
@media (max-width: 991.98px) {
    .ux-directory-toolbar .ux-directory-search { flex-basis: 100%; }
    .ux-directory-filter { flex: 1 1 150px; }
}
@media (max-width: 767.98px) {
    :is(.ux-app-main, .ux-auth-main) .btn, .ux-app-main :is(.ux-action-cluster .btn, .ux-form-actions .btn, .btn.btn-sm) { min-height: 44px; }
    .ux-directory-toolbar, .ux-record-list { padding: 1rem; gap: .75rem; }
    .ux-directory-search { min-width: 0; }
    .ux-directory-filter { flex-basis: calc(50% - .75rem); min-width: 110px; }
    .ux-directory-search input, .ux-directory-filter select, .ux-directory-reset, .ux-directory-page-size select { min-height: 44px; }
    .ux-directory-panel > .table-responsive:has(> [data-ux-directory-table]) { overflow: visible; }
    .ux-app-main .table-responsive > .table.ux-directory-table { display: block; min-width: 0; width: 100%; }
    .ux-directory-table > thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
    .ux-directory-table > tbody { display: block; }
    .ux-directory-table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .85rem; padding: .85rem; border-bottom: 1px solid var(--workspace-line); }
    .ux-directory-table > tbody > tr > td { display: block; padding: 0; border: 0; min-width: 0; width: auto; max-width: none; white-space: normal !important; overflow-wrap: anywhere; background: transparent; }
    .ux-directory-table > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: var(--ui-font-caption); font-weight: 400; color: var(--workspace-muted); white-space: normal; }
    .ux-directory-table > tbody > tr > .ux-cell-identity { grid-column: 1 / -1; font-size: .875rem; }
    .ux-directory-table > tbody > tr > .ux-cell-actions { grid-column: 1 / -1; text-align: left; border-top: 1px solid #edf0f5; padding-top: .65rem; }
    .ux-directory-table > tbody > tr > .ux-cell-actions::before, .ux-directory-table .ux-cell-identity::before { display: none; }
    .ux-directory-table .ux-cell-actions .ux-row-actions, .ux-directory-table .ux-cell-actions .action-btns-wrapper { justify-content: flex-start; }
    .ux-directory-table > tbody > .ux-directory-empty-row { display: block; }
    .ux-directory-empty-row > td::before { display: none; }
    .ux-directory-table.table-sticky-first :is(th, td):first-child { position: static !important; box-shadow: none; }
    .ux-directory-footer { padding: 1rem; }
    .ux-record-heading { flex-wrap: wrap; padding: 0; gap: 0; }
    .ux-record-heading > h2 { flex-basis: 100%; }
    .ux-record-heading > .action-btns-wrapper { width: 100%; border-top: 1px solid #edf0f5; justify-content: flex-start; padding: .35rem .7rem; }
    .ux-record-toggle { gap: .65rem; padding: .9rem; flex-wrap: wrap; }
    .ux-record-symbol { flex-basis: 30px; width: 30px; height: 30px; border-radius: 7px; }
    .ux-record-toggle > .ux-status-pill { order: 4; margin-left: 2.5rem; }
    .ux-record-body { padding: .85rem; }
    .ux-linked-record { align-items: flex-start; padding: .85rem; }
    .ux-linked-record-actions { width: 100%; gap: .25rem .8rem; }
    .ux-text-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ux-record-chevron { transition: none; } }
.ux-overview-panel { padding: 1.25rem 1.5rem; margin-bottom: 1rem; border: 1px solid var(--workspace-line); border-radius: 14px; background: #fff; }
.ux-project-overview p { font-size: var(--ui-font-table); line-height: 1.6; }
.ux-project-overview .ux-summary-value { font-size: .875rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ux-disclosure { min-width: 0; background: #fff; border: 1px solid var(--workspace-line); border-radius: 10px; }
.ux-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; list-style: none; cursor: pointer; color: var(--workspace-ink); font-size: var(--ui-font-section); }
.ux-disclosure > summary::-webkit-details-marker { display: none; }
.ux-disclosure > summary > .material-icons { flex-shrink: 0; color: #75859a; font-size: 1.25rem; transition: transform .18s ease; }
.ux-disclosure[open] > summary > .material-icons { transform: rotate(180deg); }
.ux-disclosure > summary :is(h2, h3) { margin: 0; }
.ux-disclosure-body { border-top: 1px solid var(--workspace-line); padding: 1.25rem; min-width: 0; }
.ux-participant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ux-participant-card { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: 1rem; border: 1px solid var(--workspace-line); border-radius: 8px; }
.ux-participant-card h3 { font-size: .875rem; margin: .15rem 0 .25rem; font-weight: 600; }
.ux-participant-card > a, .ux-participant-card > p { font-size: .8125rem; color: #536780; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .ux-overview-panel, .ux-disclosure-body { padding: 1rem; } .ux-disclosure > summary { padding: 1rem; } .ux-participant-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ux-disclosure > summary > .material-icons { transition: none; } }
.ux-cell-caption { display: block; color: var(--workspace-muted); font-size: var(--ui-font-caption); font-weight: 400; line-height: 1.6; margin-top: .2rem; }
.ux-cell-record { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.ux-cell-record > div { min-width: 0; }
.ux-directory-table th > .ux-sort-button { display: flex; margin: .15rem 0; line-height: 1.4; }
.ux-directory-table th > .ux-sort-button + .ux-sort-button { font-size: .625rem; }
:is(.customer-tab, .customer-text-action, .customer-reset, .ux-text-action, .ux-directory-reset) { font-size: var(--ui-font-button); font-family: var(--ui-font-family); }
:is(.ux-app-main, .ux-auth-main) :is(.form-control, .form-select, .ux-directory-filter select, .ux-directory-search input, .customer-search input, .customer-filter select, .customer-page-size select, .ux-directory-page-size select) { font-size: .8125rem !important; font-family: var(--ui-font-family); }
.ux-auth-main .card-header h1 { font-size: var(--ui-font-heading); }
.ux-app-main :is(.customer-section-heading h2, .customer-content-toolbar h2, .customer-empty h2, .customer-empty h3) { font-size: var(--ui-font-section); }
:is(.ux-app-main, .ux-auth-main) .btn { font-weight: 600 !important; }
.ux-app-main .action-btns-wrapper .btn-action-inline { color: #536b8c; }
.ux-app-main .action-btns-wrapper :is(.text-info, .text-success, .text-warning) { color: inherit !important; }
.ux-app-main .action-btns-wrapper .text-danger { color: #a45561 !important; }
.ux-app-main .action-btns-wrapper .btn-action-inline:has(.text-danger):hover { background: #fcecf0; }
.ux-directory-table th > .ux-sort-button + .ux-sort-button { font-size: inherit; }
.ux-directory-sort:not(.is-always-visible), .ux-customer-mobile-sort { display: none; }
@media (max-width: 767.98px) {
    .ux-directory-filter.ux-directory-sort, .customer-filter.ux-customer-mobile-sort { display: grid; }
    button.ux-directory-sort, button.ux-customer-mobile-sort { display: inline-flex; }
}
@media (max-width: 767.98px) { .ux-directory-toolbar button.ux-directory-sort { display: inline-flex; } }
.ux-auth-main .form-control.otp-code-input { font-size: 1.25rem !important; letter-spacing: .15em; }
.ux-disclosure > summary > div { min-width: 0; }
.ux-disclosure > summary :is(h2, h3, small), .ux-participant-card h3 { overflow-wrap: anywhere; }
.ux-app-main .dropdown-item { font-family: var(--ui-font-family); font-size: var(--ui-font-button); line-height: 1.5; }
.ux-log-page { min-width: 0; }
.ux-log-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; color: var(--workspace-muted); font-size: var(--ui-font-caption); }
.ux-log-summary > span { display: inline-flex; align-items: center; gap: .4rem; }
.ux-log-panel { border: 1px solid var(--workspace-line); border-radius: 14px; background: #fff; padding: 1rem; min-width: 0; }
.ux-log-panel .log-container { overflow-x: auto; overflow-wrap: anywhere; }
.ux-log-summary .badge.bg-gradient-info { background: #eef3f9 !important; color: #425875; }
.ux-log-summary .badge.bg-gradient-warning { background: #fff4cf !important; color: #795a12; }
.ux-log-summary .badge.bg-gradient-danger { background: #fcecf0 !important; color: #9b243a; }

/* Workspace navigation uses the same surfaces, typography, and red accent as the directories. */
#sidenav-main.ux-sidebar {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 0;
    height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    background: linear-gradient(165deg, #304963 0%, #22384f 55%, #1c3047 100%); border: 1px solid #314a64; border-radius: var(--workspace-radius);
    box-shadow: 0 4px 14px #1c30471a; overflow: hidden !important;
    color: #e1eaf5; font-family: var(--ui-font-family); font-size: var(--ui-font-table);
}
.ux-sidebar-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 84px; padding: 1rem; border-bottom: 1px solid var(--workspace-line); gap: .25rem; }
.ux-sidebar-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--workspace-ink); text-decoration: none; }
.ux-sidebar-brand:hover { color: var(--workspace-accent); }
.ux-sidebar-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #f0e2e5; border-radius: 10px; background: #fff7f8; }
.ux-sidebar-brand-mark img { width: 25px; height: 28px; object-fit: contain; }
.ux-sidebar-brand-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ux-sidebar-brand-copy strong { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.ux-sidebar-brand-copy > span { color: var(--workspace-muted); font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
.ux-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1rem .65rem; scrollbar-width: thin; scrollbar-color: #d5deea transparent; overscroll-behavior: contain; }
.ux-sidebar-caption { display: block; padding: 0 .75rem .6rem; color: var(--workspace-muted); font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
#sidenav-main .ux-sidebar-list { display: flex; flex-direction: column; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.ux-sidebar-link {
    display: flex; align-items: center; gap: .65rem; width: 100%; min-width: 0; min-height: 44px;
    padding: .65rem .75rem; margin: 0; border: 0; border-radius: 8px; background: transparent;
    color: #53647c; font-family: var(--ui-font-family); font-size: var(--ui-font-table); font-weight: 500;
    line-height: 1.45; text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ux-sidebar-link > span { min-width: 0; }
.ux-sidebar-link > .material-icons { flex: 0 0 20px; width: 20px; font-size: 20px; line-height: 1; color: #7a8aa0; }
.ux-sidebar-link:hover { background: #f4f6fa; color: var(--workspace-ink); }
.ux-sidebar-link.is-current-group { color: var(--workspace-ink); font-weight: 600; }
.ux-sidebar-link.is-active { background: #fcecf0; color: var(--workspace-accent); font-weight: 600; box-shadow: inset 3px 0 var(--workspace-accent); }
.ux-sidebar-link.is-active > .material-icons { color: var(--workspace-accent); }
.ux-sidebar-link:focus-visible, .ux-sidebar-brand:focus-visible, .ux-sidebar .ux-icon-button:focus-visible { outline: 3px solid #7d9bc366; outline-offset: -2px; }
.ux-sidebar-group-toggle { gap: .55rem; font-size: var(--ui-font-label); }
.ux-sidebar-link > .ux-sidebar-chevron { flex: 0 0 16px; width: 16px; margin-left: auto; font-size: 18px; transition: transform .18s ease; }
.ux-sidebar-group-toggle[aria-expanded="true"] .ux-sidebar-chevron { transform: rotate(180deg); }
.ux-sidebar-subnav { list-style: none; margin: .15rem 0 .25rem 1.3rem; padding: .1rem 0 .1rem .65rem; border-left: 1px solid var(--workspace-line); }
.ux-sidebar-subnav li + li { margin-top: .15rem; }
.ux-sidebar-subnav .ux-sidebar-link { padding-left: .65rem; gap: .55rem; font-size: var(--ui-font-label); }
.ux-sidebar-subnav .ux-sidebar-link > .material-icons { font-size: 18px; }
.ux-sidebar-footer { flex: 0 0 auto; padding: .65rem; border-top: 1px solid var(--workspace-line); }
.ux-sidebar-footer .ux-sidebar-link { min-height: 56px; }
.ux-sidebar-footer small { display: block; margin-top: .1rem; color: var(--workspace-muted); font-size: .6875rem; font-weight: 400; }
.ux-sidebar-footer .ux-sidebar-footer-arrow { margin-left: auto; font-size: 17px; }
.ux-sidebar .ux-icon-button { color: var(--workspace-muted); }
.ux-sidebar .ux-icon-button:hover { background: #f1f4f9; color: var(--workspace-ink); }

.ux-workspace-topbar { padding-block: 0; background: linear-gradient(110deg, #eaf0f8, #f8fafd 65%, #edf3fa); border: 1px solid #d6e0ee; border-radius: var(--workspace-radius); box-shadow: 0 3px 10px #26375009; }
.ux-workspace-topbar > .ux-navbar-content { gap: .85rem; min-height: 74px; padding: .55rem .85rem; }
.ux-workspace-topbar .ux-navigation-toggle { border: 1px solid var(--workspace-line); border-radius: 9px; color: #53647c; }
.ux-workspace-topbar .ux-icon-button:hover { background: #f1f4f9; color: var(--workspace-ink); }
.ux-workspace-topbar .ux-navbar-title { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; line-height: 1.4; }
.ux-navbar-section { color: var(--workspace-muted); font-size: .6875rem; font-weight: 400; }
.ux-navbar-page { color: var(--workspace-ink); font-size: var(--ui-font-section); font-weight: 600; }
.ux-navbar-account-area { display: flex; align-items: center; gap: .85rem; margin-left: auto; flex-shrink: 0; }
.ux-environment-badge { align-items: center; padding: .3rem .5rem; border: 1px solid #eadfbc; border-radius: 6px; background: #fff8e5; color: #7f6325; font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; }
.ux-workspace-topbar .ux-account-toggle { gap: .6rem; padding: .3rem .5rem; border-radius: 9px; color: var(--workspace-ink); }
.ux-workspace-topbar .ux-account-toggle:hover, .ux-workspace-topbar .ux-account-toggle[aria-expanded="true"] { background: #f3f6fa; }
.ux-account-avatar { width: 34px; height: 34px; flex: 0 0 34px; object-fit: cover; padding: 3px; border: 1px solid var(--workspace-line); border-radius: 10px; background: #f4f6fa; }
.ux-account-copy { flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; text-align: left; }
.ux-workspace-topbar .ux-account-name { max-width: 160px; color: var(--workspace-ink); font-size: var(--ui-font-label); font-weight: 600; line-height: 1.45; }
.ux-account-hint { color: var(--workspace-muted); font-size: .625rem; line-height: 1.45; }
.ux-account-chevron { color: var(--workspace-muted); font-size: 18px; }
.ux-workspace-topbar .ux-account-menu .ux-account-dropdown { min-width: 250px; margin-top: .6rem; padding: .4rem; background: #fff; border: 1px solid var(--workspace-line); border-radius: 11px; box-shadow: 0 8px 25px #26375014; }
.ux-account-summary { display: flex; flex-direction: column; gap: .25rem; padding: .65rem .65rem .9rem; margin-bottom: .35rem; border-bottom: 1px solid var(--workspace-line); white-space: normal; overflow-wrap: anywhere; }
.ux-account-summary span { color: var(--workspace-muted); font-size: .6875rem; line-height: 1.5; }
.ux-account-summary strong { color: var(--workspace-ink); font-size: var(--ui-font-table); font-weight: 600; }
.ux-workspace-topbar .ux-account-dropdown .dropdown-item { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .6rem .65rem; border: 0; border-radius: 7px; background: transparent; color: #53647c; font-family: var(--ui-font-family); font-size: var(--ui-font-button); font-weight: 500; line-height: 1.5; }
.ux-workspace-topbar .ux-account-dropdown .dropdown-item:hover, .ux-workspace-topbar .ux-account-dropdown .dropdown-item:focus { color: var(--workspace-ink); background: #f1f4f9; }
.ux-account-dropdown .dropdown-item > .material-icons { font-size: 19px; }
.ux-workspace-topbar .ux-account-dropdown .ux-sign-out { color: #aa243b; }
.ux-workspace-topbar .ux-account-dropdown .ux-sign-out:hover { color: #9b1a30; background: #fff2f4; }
.ux-sign-out:disabled { opacity: .65; cursor: wait; }

@media (max-width: 575.98px) {
    .ux-workspace-topbar > .ux-navbar-content { min-height: 66px; gap: .6rem; padding-block: .5rem; }
    .ux-workspace-topbar .ux-navbar-section { display: none; }
    .ux-workspace-topbar .ux-navbar-page { font-size: .8125rem; }
    .ux-workspace-topbar .ux-account-toggle { padding-inline: .25rem; gap: .25rem; }
    .ux-workspace-topbar .ux-account-chevron { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ux-sidebar-link, .ux-sidebar-link > .ux-sidebar-chevron { transition: none; }
}

/* Slate navigation separates the workspace chrome from white content panels. */
.ux-sidebar .ux-sidebar-header, .ux-sidebar .ux-sidebar-footer { border-color: #ffffff1f; }
.ux-sidebar .ux-sidebar-header { background: #ffffff04; }
.ux-sidebar .ux-sidebar-brand, .ux-sidebar .ux-sidebar-brand:hover { color: #fff; }
.ux-sidebar .ux-sidebar-brand-mark { background: #fff; border-color: #ffffff80; }
.ux-sidebar .ux-sidebar-brand-copy > span, .ux-sidebar .ux-sidebar-footer small { color: #b3c3d7; }
.ux-sidebar .ux-sidebar-caption { color: #afc1d8; }
.ux-sidebar .ux-sidebar-link { color: #d6e1ee; }
.ux-sidebar .ux-sidebar-link > .material-icons { color: #aebfd5; }
.ux-sidebar .ux-sidebar-link:hover { color: #fff; background: #ffffff0d; }
.ux-sidebar .ux-sidebar-link.is-current-group { color: #fff; }
.ux-sidebar .ux-sidebar-link.is-active { color: #a9152b; background: #fff0f3; box-shadow: inset 3px 0 #d22e48; }
.ux-sidebar .ux-sidebar-link.is-active > .material-icons { color: #b71932; }
.ux-sidebar .ux-sidebar-link.is-active small { color: #835b65; }
.ux-sidebar .ux-sidebar-subnav { border-left-color: #ffffff26; }
.ux-sidebar .ux-sidebar-scroll { scrollbar-color: #617b98 transparent; }
.ux-sidebar .ux-icon-button { color: #c1d0e1; }
.ux-sidebar .ux-icon-button:hover { background: #ffffff12; color: #fff; }

/* Technical grids and nested summaries share the directory's spacing and surfaces. */
.ux-data-scroll { position: relative; border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; scrollbar-width: thin; scrollbar-color: #b8c8dc #f1f5fa; }
.ux-data-scroll:focus-visible { outline: 3px solid #7d9bc366; outline-offset: 2px; }
.ux-app-main .table.ux-data-table { width: 100%; min-width: var(--data-table-min-width, 480px); margin: 0 !important; border-color: #e7edf4; font-variant-numeric: tabular-nums; }
.ux-app-main .ux-data-table > :not(caption) > * > * { padding: .45rem .65rem; border-right: 0; border-left: 0; vertical-align: middle; }
.ux-app-main .ux-data-table > thead > tr > th { font-size: .6875rem; font-weight: 600; letter-spacing: .025em; line-height: 1.55; }
.ux-app-main .ux-data-table > tbody > tr > :is(td, th) { color: var(--workspace-ink); font-size: .8125rem; font-weight: 400; border-bottom: 1px solid #e7edf4; background: #fff; box-shadow: none; }
.ux-app-main .ux-data-table > tbody > tr:hover > :is(td, th) { background: #f7fafd; }
.ux-app-main .ux-data-table > tbody > tr > th[scope="row"] { font-weight: 500; }
.ux-app-main .ux-data-table > tfoot > tr > :is(td, th) { background: #edf3fa; color: #344d6b; border-top: 1px solid #d8e3ef; font-size: .8125rem; font-weight: 600; }
.ux-app-main .ux-data-table :is(td.text-end, .ux-cell-code) { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; }
.ux-app-main .ux-data-table .ux-cell-description { min-width: 220px; max-width: 360px; white-space: normal !important; }
.ux-app-main .ux-data-table .ux-cell-remarks { min-width: 140px; max-width: 280px; white-space: normal !important; }
/* Read-only quantities need less space than the editable grids' field widths. */
.ux-app-main .table.ux-commercial-materials { min-width: 1040px; }
.ux-app-main .ux-commercial-materials > :not(caption) > * > * { padding-inline: .5rem; }
.ux-app-main .ux-commercial-materials .ux-cell-remarks { min-width: 7rem; }
.ux-data-table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-width: 110px; }
.ux-data-table :is(select, textarea) { min-width: 150px; }
.ux-data-table .btn:not(.btn-action-inline) { margin-bottom: 0; }
.ux-table-scroll-hint { position: sticky; left: 0; width: 100%; padding: .5rem .8rem; background: #edf3fa; color: #5b728f; border-bottom: 1px solid #dce6f1; font-size: .6875rem; line-height: 1.5; }
.ux-table-scroll-hint[hidden] { display: none; }
.ux-directory-table > tbody > tr > td { border-bottom-color: #e7edf4; }
.ux-directory-table > tbody > tr:hover > td { --bs-table-accent-bg: #f7fafd; }
.ux-app-main .table.ux-parameter-table { min-width: 0; }
.ux-app-main .ux-parameter-table th[scope="row"] { width: 55%; white-space: normal; overflow-wrap: anywhere; }

/* Dashboard: shared directory surfaces with a quieter overview and expandable work list. */
.ux-dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; margin-bottom: 1.25rem; border: 1px solid #dce5ef; border-radius: var(--workspace-radius); background: linear-gradient(115deg, #eaf0f8, #f5f7fb 80%); }
.ux-dashboard-eyebrow { display: block; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: #536a87; margin-bottom: .45rem; }
.ux-dashboard-welcome h2 { color: var(--workspace-ink); font-size: 1.1rem; line-height: 1.5; margin: 0 0 .35rem; overflow-wrap: anywhere; }
.ux-dashboard-welcome p, .ux-dashboard-section-heading p { color: var(--workspace-muted); font-size: .76rem; line-height: 1.65; margin: 0; }
.ux-dashboard-date { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; color: #536a87; font-size: .73rem; }
.ux-dashboard-date .material-icons { font-size: 17px; }
.ux-dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.ux-dashboard-stat { display: flex; flex-direction: column; gap: .65rem; border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); padding: 1.15rem; background: #fff; color: var(--workspace-ink); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.ux-dashboard-stat:hover, .ux-dashboard-action:hover { border-color: #abbdd2; box-shadow: 0 3px 12px #2637500b; color: var(--workspace-ink); }
.ux-dashboard-stat-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; }
.ux-dashboard-stat-top .material-icons { color: #69809e; font-size: 20px; }
.ux-dashboard-stat > strong { font-size: 1.9rem; font-weight: 650; line-height: 1.25; letter-spacing: -.04em; }
.ux-dashboard-stat-detail { color: var(--workspace-muted); font-size: .68rem; line-height: 1.7; }
.ux-dashboard-stat-detail b { color: #3b5371; font-weight: 600; }
.ux-dashboard-stat-detail > span { display: block; }
.ux-dashboard-stat-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .7rem; margin-top: auto; border-top: 1px solid #edf0f5; color: #536a87; font-size: .69rem; }
.ux-dashboard-stat-link .material-icons { font-size: 16px; }
.ux-dashboard-section { margin-block: 1.75rem; }
.ux-dashboard-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ux-dashboard-section-heading :is(h2,h3) { font-size: var(--ui-font-section); color: var(--workspace-ink); line-height: 1.5; margin: 0 0 .25rem; font-weight: 600; overflow-wrap: anywhere; }
.ux-dashboard-section-heading .ux-text-action { display: inline-flex; align-items: center; flex-shrink: 0; gap: .3rem; font-size: .73rem; padding: .2rem 0; }
.ux-dashboard-section-heading .ux-text-action .material-icons { font-size: 17px; }
.ux-dashboard-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.ux-dashboard-action { display: flex; align-items: center; gap: .8rem; padding: 1rem; min-width: 0; color: var(--workspace-ink); background: #fff; border: 1px solid var(--workspace-line); border-radius: 11px; }
.ux-dashboard-action-icon, .ux-dashboard-project-icon, .ux-dashboard-activity-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; color: #536a87; background: #edf2f8; }
.ux-dashboard-action-icon { color: var(--workspace-accent); background: #fceef1; }
.ux-dashboard-action-icon .material-icons, .ux-dashboard-project-icon .material-icons { font-size: 20px; }
.ux-dashboard-action > span:nth-child(2) { min-width: 0; }
.ux-dashboard-action strong { display: block; font-size: .78rem; font-weight: 600; line-height: 1.5; }
.ux-dashboard-action small { display: block; color: var(--workspace-muted); font-size: .68rem; line-height: 1.6; margin-top: .2rem; }
.ux-dashboard-action-arrow { font-size: 16px; color: #8192a8; margin-left: auto; flex-shrink: 0; }
.ux-dashboard-work-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 1.25rem; align-items: start; }
.ux-dashboard-work-grid-single { grid-template-columns: minmax(0,1fr); }
.ux-dashboard-panel { background: #fff; border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); padding: 1.25rem; min-width: 0; }
.ux-dashboard-project { border-top: 1px solid var(--workspace-line); }
.ux-dashboard-project > summary { display: flex; align-items: center; gap: .8rem; list-style: none; cursor: pointer; padding: 1rem 0; min-width: 0; }
.ux-dashboard-project > summary::-webkit-details-marker { display: none; }
.ux-dashboard-project-name { flex: 1; min-width: 0; }
.ux-dashboard-project-name strong { display: block; font-size: .79rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.ux-dashboard-project-name small { display: block; font-size: .68rem; color: var(--workspace-muted); line-height: 1.6; overflow-wrap: anywhere; }
.ux-dashboard-chevron { font-size: 21px; color: #7b8ba2; transition: transform .15s; }
.ux-dashboard-project[open] .ux-dashboard-chevron { transform: rotate(180deg); }
.ux-dashboard-project-body { padding: .25rem 0 1rem 2.9rem; }
.ux-dashboard-project-body .ux-details-grid { margin-bottom: 1rem; }
.ux-dashboard-project-body .ux-details-grid > div { padding: .25rem 0; }
.ux-dashboard-project-body .ux-action-cluster { justify-content: flex-start; }
.ux-dashboard-activity { padding: 0; margin: 0; list-style: none; }
.ux-dashboard-activity > li { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--workspace-line); }
.ux-dashboard-activity-icon { width: 30px; height: 30px; border-radius: 50%; }
.ux-dashboard-activity-icon .material-icons { font-size: 17px; }
.ux-dashboard-activity > li > div { min-width: 0; }
.ux-dashboard-activity :is(li > div > span,time) { display: block; color: var(--workspace-muted); font-size: .65rem; line-height: 1.7; }
.ux-dashboard-activity a { display: block; color: var(--workspace-ink); font-size: .76rem; font-weight: 500; line-height: 1.65; margin: .15rem 0; overflow-wrap: anywhere; }
.ux-dashboard-activity a:hover { color: var(--workspace-accent); text-decoration: underline; }
.ux-dashboard-trends { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 1.25rem; }
.ux-dashboard-trend-total { text-align: right; color: var(--workspace-ink); font-size: 1.5rem; line-height: 1.3; font-weight: 600; flex-shrink: 0; }
.ux-dashboard-trend-total small { display: block; font-weight: 400; font-size: .64rem; color: var(--workspace-muted); margin-top: .3rem; }
.ux-dashboard-bars { padding: 0; margin: 1.5rem 0 .25rem; list-style: none; }
.ux-dashboard-bars li { display: grid; grid-template-columns: 30px minmax(0,1fr) 45px; gap: .75rem; align-items: center; margin: .9rem 0; }
.ux-dashboard-bar-label { font-size: .7rem; color: var(--workspace-muted); }
.ux-dashboard-bar-track { background: #f0f3f8; height: 10px; border-radius: 4px; overflow: hidden; }
.ux-dashboard-bar-track > span { display: block; height: 100%; background: #6b829f; border-radius: inherit; }
.ux-dashboard-bars li:last-child .ux-dashboard-bar-track > span { background: var(--workspace-accent); }
.ux-dashboard-bars strong { font-weight: 600; text-align: right; font-size: .72rem; }
.ux-dashboard-trend-note { color: var(--workspace-muted); font-size: .72rem; margin: 1rem 0 0; }
.ux-dashboard-empty { text-align: center; padding: 2rem 1rem; color: var(--workspace-muted); }
.ux-dashboard-empty > .material-icons { display: block; color: #8c9db3; font-size: 28px; margin-bottom: .75rem; }
.ux-dashboard-empty h3 { font-size: .85rem; color: var(--workspace-ink); margin: 0 0 .5rem; }
.ux-dashboard-empty p { font-size: .75rem; line-height: 1.7; margin-bottom: 1rem; }
.ux-dashboard-activity > .ux-dashboard-empty { display: block; }
.ux-dashboard :is(a,summary):focus-visible { outline: 2px solid #637e9f; outline-offset: 4px; border-radius: 6px; }
@media(max-width:1199.98px) { .ux-dashboard-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .ux-dashboard-work-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:767.98px) { .ux-dashboard-welcome { align-items: flex-start; flex-direction: column; gap: .8rem; padding: 1.15rem; } .ux-dashboard-date { font-size: .68rem; } .ux-dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; } .ux-dashboard-stat { padding: .9rem; } .ux-dashboard-stat-top { align-items: flex-start; font-size: .7rem; } .ux-dashboard-stat-top .material-icons { font-size: 17px; } .ux-dashboard-stat > strong { font-size: 1.65rem; } .ux-dashboard-section-heading { gap: .7rem; } .ux-dashboard-panel { padding: 1rem; } .ux-dashboard-project > summary { flex-wrap: wrap; gap: .6rem; } .ux-dashboard-project-name { flex-basis: calc(100% - 80px); } .ux-dashboard-project > summary > .ux-status-pill { margin-left: 2.85rem; } .ux-dashboard-chevron { margin-left: auto; } .ux-dashboard-project-body { padding-left: 0; } .ux-dashboard-project-name small > span { display: block; } }
@media(max-width:479.98px) { .ux-dashboard-actions { grid-template-columns: minmax(0,1fr); } .ux-dashboard-stat-link { font-size: .65rem; } .ux-dashboard-section-heading .ux-text-action { font-size: .68rem; } }
@media(prefers-reduced-motion:reduce) { .ux-dashboard * { transition: none !important; } }

/* Role permissions keep capability descriptions beside the controls they explain. */
.role-permission-overview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1rem; border: 1px solid var(--workspace-line); border-radius: 10px; background: #f5f8fc; }
.role-permission-total { font-size: .75rem; color: var(--workspace-muted); }
.role-permission-total strong { color: var(--workspace-ink); font-weight: 600; }
.role-permission-help { color: var(--workspace-muted); font-size: .72rem; line-height: 1.65; margin: .65rem 0 1rem; }
.role-permission-search { margin: 1.25rem 0; }
.ux-app-main .role-permission-search .ux-search-control { width: min(100%, 480px); min-width: 0; }
.role-permission-search-clear { position: absolute; top: 3px; right: 3px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: #fff; color: #66758b; }
.role-permission-search-clear:hover { color: var(--workspace-accent); background: #fceef1; }
.role-permission-search-clear .material-icons { font-size: 18px; }
.role-permission-search input::-webkit-search-cancel-button { display: none; }
.role-permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.role-permission-group { min-width: 0; border: 1px solid var(--workspace-line); border-radius: 10px; overflow: hidden; background: #fff; }
.role-permission-group-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .65rem; padding: .9rem 1rem; background: #f5f8fc; }
.role-permission-group-header h3 { margin: 0 0 .25rem; color: var(--workspace-ink); font-size: .82rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.role-permission-group-header p { margin: 0; color: var(--workspace-muted); font-size: .68rem; line-height: 1.5; }
.role-permission-group-actions { display: flex; gap: .35rem; }
.ux-app-main .role-permission-group-actions .btn { min-height: 32px; padding: .3rem .5rem; }
.role-permission-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .65rem; margin: 0; padding: .9rem 1rem; border-top: 1px solid #edf0f5; border-left: 2px solid transparent; cursor: pointer; }
.role-permission-choice:hover { background: #f8fafd; }
.role-permission-choice:has(input:checked) { background: #fff8fa; border-left-color: var(--workspace-accent); }
.role-permission-choice:has(input:focus-visible) { box-shadow: inset 0 0 0 2px #7d9bc366; }
.role-permission-choice .form-check-input { float: none; margin: .15rem 0 0; width: 18px; height: 18px; }
.role-permission-label { display: block; color: var(--workspace-ink); font-size: .77rem; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.role-permission-description { display: block; margin-top: .3rem; color: var(--workspace-muted); font-size: .7rem; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
.role-permission-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; border: 1px dashed #d8e1ec; border-radius: 10px; }
.role-permission-empty > .material-icons { color: #7d8da4; font-size: 28px; margin-bottom: .6rem; }
.role-permission-empty h3 { color: var(--workspace-ink); font-size: .9rem; margin: 0 0 .5rem; }
.role-permission-empty p { color: var(--workspace-muted); font-size: .75rem; line-height: 1.65; }
@media(max-width:1199.98px) { .role-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:767.98px) { .role-permission-grid { grid-template-columns: minmax(0, 1fr); } .role-permission-overview { padding: .85rem; } .role-permission-group-header { padding: .85rem; } .role-permission-choice { padding: .85rem; } .ux-app-main .role-permission-group-actions .btn { min-height: 40px; min-width: 40px; } }