@font-face {
    font-family: "ValueMax Arabic";
    src: url("../fonts/DejaVuSans.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "ValueMax Arabic";
    src: url("../fonts/DejaVuSans-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --primary-color: #0B5ED7;
    --primary-hover: #0A58CA;
    --primary-active: #084298;
    --primary-light: #E7F1FF;
    --primary-icon: #0B5ED7;
    --primary-focus-ring: rgba(11, 94, 215, 0.25);
    --button-primary-bg: #0B5ED7;
    --button-primary-hover-bg: #0A58CA;
    --button-primary-active-bg: #084298;
    --button-primary-fg: #FFFFFF;
    --button-focus-ring: rgba(11, 94, 215, 0.32);
    --button-outline-bg: transparent;
    --button-outline-fg: #0B5ED7;
    --button-outline-border: #0B5ED7;
    --button-secondary-bg: #F1F5FB;
    --button-secondary-fg: #10213A;
    --button-secondary-border: #B9C9DD;
    --button-secondary-hover-bg: #E7EFFA;
    --button-secondary-active-bg: #DCE8F7;
    --button-disabled-bg: #D1D5DB;
    --button-disabled-fg: #4B5563;
    --button-disabled-border: #9CA3AF;
    --primary: var(--primary-color);
    --primary-soft: var(--primary-light);
    --primary-border: #b6d4fe;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f1f5fb;
    --surface-hover: #e7effa;
    --border: #d8e2ef;
    --border-strong: #b9c9dd;
    --text: #10213a;
    --text-soft: #405873;
    --muted: #64778e;
    --accent: var(--primary);
    --accent-text: #ffffff;
    --accent-hover: var(--primary-hover);
    --active-icon: var(--primary-icon);
    --active-icon-bg: rgba(11, 94, 215, .12);
    --sidebar-active: var(--primary-soft);
    --danger: #b42318;
    --danger-bg: #fff1f0;
    --danger-border: #f2b8b3;
    --danger-ring: rgba(180, 35, 24, .14);
    --success: #087443;
    --success-bg: #ecf8f2;
    --success-border: #a8ddc4;
    --on-success: #ffffff;
    --warning: #8a6100;
    --warning-bg: #fff8e6;
    --warning-border: #efd48b;
    --on-warning: #2a1d00;
    --info: #155ca8;
    --info-bg: #edf6ff;
    --info-border: #b8d8f5;
    --neutral: #68788c;
    --neutral-bg: #eef2f6;
    --neutral-border: #d4dde7;
    --on-neutral: #ffffff;
    --on-danger: #ffffff;
    --topbar-bg: rgba(247, 250, 254, .90);
    --row-hover: #f3f7fd;
    --focus-border: var(--primary-color);
    --focus-ring: var(--primary-focus-ring);
    --highlight-bg: #e8f1ff;
    --overlay: rgba(8, 24, 48, .48);
    --login-glow: rgba(64, 139, 255, .15);
    --login-shadow: 0 22px 60px rgba(34, 74, 126, .12);
    --shadow: 0 1px 3px rgba(31, 62, 101, .08);
    --shadow-sm: 0 4px 14px rgba(31, 62, 101, .08);
    --shadow-lg: 0 24px 70px rgba(19, 47, 82, .20);
    --radius: 14px;
    --panel: var(--surface);
    --table-head: #eaf1fa;
    --table-header-bg: var(--table-head);
    --app-font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 13px;
    --font-size-help: 11px;
    --font-size-sidebar: 13px;
    --font-size-module-title: 16px;
    --font-size-important: 13px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --sidebar-width: 260px;
    --table-cell-font-size: 12px;
    --table-header-font-size: 12px;
    --table-cell-padding-y: 6px;
    --table-cell-padding-x: 10px;
    --table-row-height: 30px;
    --table-header-row-height: 32px;
}


html[data-theme="dark"] {
    color-scheme: dark;
    --dark-bg-page: #08111F;
    --dark-bg-surface: #101C2E;
    --dark-bg-surface-secondary: #16243A;
    --dark-bg-sidebar: #0B1424;
    --dark-bg-input: #0B1628;
    --dark-table-header: #142238;
    --dark-table-hover: #1D304C;
    --dark-selected-row: rgba(37, 99, 235, 0.18);
    --dark-text-primary: #F8FAFC;
    --dark-text-secondary: #CBD5E1;
    --dark-border-color: #2B3C55;
    --dark-primary: #2563EB;
    --dark-primary-hover: #1D4ED8;
    --dark-primary-active: #1E40AF;
    --dark-icon-color: #60A5FA;
    --dark-focus-ring: rgba(96, 165, 250, 0.30);
    --primary: var(--dark-primary);
    --primary-hover: var(--dark-primary-hover);
    --primary-active: var(--dark-primary-active);
    --primary-soft: var(--dark-selected-row);
    --primary-border: #315f98;
    --primary-icon: var(--dark-icon-color);
    --primary-focus-ring: var(--dark-focus-ring);
    --button-primary-bg: #0B5ED7;
    --button-primary-hover-bg: #0A58CA;
    --button-primary-active-bg: #084298;
    --button-primary-fg: #FFFFFF;
    --button-focus-ring: rgba(96, 165, 250, 0.38);
    --button-outline-bg: transparent;
    --button-outline-fg: #60A5FA;
    --button-outline-border: #60A5FA;
    --button-secondary-bg: #16243A;
    --button-secondary-fg: #F8FAFC;
    --button-secondary-border: #3C506A;
    --button-secondary-hover-bg: #1D304C;
    --button-secondary-active-bg: #243A59;
    --button-disabled-bg: #354A63;
    --button-disabled-fg: #E2E8F0;
    --button-disabled-border: #4A607A;
    --bg: var(--dark-bg-page);
    --surface: var(--dark-bg-surface);
    --surface-soft: var(--dark-bg-surface-secondary);
    --surface-hover: var(--dark-table-hover);
    --border: var(--dark-border-color);
    --border-strong: #3c506a;
    --text: var(--dark-text-primary);
    --text-soft: var(--dark-text-secondary);
    --muted: #899db5;
    --accent: var(--primary);
    --accent-text: #ffffff;
    --accent-hover: var(--primary-hover);
    --active-icon: var(--dark-icon-color);
    --active-icon-bg: var(--dark-selected-row);
    --sidebar-active: var(--dark-selected-row);
    --danger: #ff9b98;
    --danger-bg: #351d29;
    --danger-border: #744051;
    --danger-ring: rgba(255, 125, 121, .20);
    --success: #67dda4;
    --success-bg: #102f2a;
    --success-border: #286148;
    --on-success: #061a12;
    --warning: #f5cf72;
    --warning-bg: #352b16;
    --warning-border: #6f5928;
    --on-warning: #201600;
    --info: #8dc1ff;
    --info-bg: #142d4b;
    --info-border: #315e8e;
    --neutral: #aab9ca;
    --neutral-bg: #1b2b40;
    --neutral-border: #354a63;
    --on-neutral: #07111f;
    --on-danger: #250707;
    --topbar-bg: rgba(8, 17, 31, .94);
    --row-hover: var(--dark-table-hover);
    --focus-border: var(--dark-icon-color);
    --focus-ring: var(--dark-focus-ring);
    --highlight-bg: var(--dark-selected-row);
    --overlay: rgba(1, 7, 16, .72);
    --login-glow: rgba(61, 132, 238, .20);
    --login-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    --shadow: 0 1px 3px rgba(0, 0, 0, .30);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .26);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, .52);
    --panel: var(--surface);
    --table-head: var(--dark-table-header);
    --table-header-bg: var(--table-head);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

::selection {
    background: var(--primary-soft);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--focus-border);
    outline-offset: 2px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--app-font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body {
    background: var(--dark-bg-page);
}

html[data-theme="dark"] {
    scrollbar-color: var(--border-strong) var(--surface-soft);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--dark-text-secondary);
    opacity: .72;
}

html[data-theme="dark"] select option {
    background: var(--dark-bg-input);
    color: var(--text);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: var(--dark-primary);
}

html[data-theme="dark"] input[type="file"] {
    background: var(--dark-bg-input);
    color: var(--dark-text-secondary);
    border-color: var(--dark-border-color);
}

html[data-theme="dark"] input[type="file"]::file-selector-button {
    background: var(--dark-bg-surface-secondary);
    color: var(--dark-icon-color);
    border: 0;
    border-inline-end: 1px solid var(--dark-border-color);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .column-filter-row input,
html[data-theme="dark"] .column-filter-row select {
    background: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-color);
}

.announcement-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: 24px;
    display: grid;
    place-items: center;
    background: var(--overlay);
    backdrop-filter: blur(3px);
}

.announcement-dialog {
    width: min(680px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.announcement-dialog-header,
.announcement-dialog-actions {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-block-end: 1px solid var(--border);
}

.field.is-disabled {
    opacity: .55;
}

.announcement-dialog-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.announcement-dialog-header h2 {
    margin: 0;
    font-size: 18px;
}

.announcement-dialog-icon {
    font-size: 24px;
}

.announcement-dialog-content {
    overflow-y: auto;
    padding: 16px 18px;
    display: grid;
    gap: 12px;
}

.announcement-message {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.announcement-message h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.announcement-message p {
    margin: 0 0 8px;
}

.announcement-message p:last-child {
    margin-bottom: 0;
}

.announcement-dialog-actions {
    justify-content: flex-end;
    border-block-start: 1px solid var(--border);
    border-block-end: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 10px 10px;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    color: var(--text);
    display: flex;
    flex-direction: column;
}

html[data-theme="dark"] .sidebar {
    background: var(--dark-bg-sidebar);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: var(--text);
    text-align: center;
    padding: 4px 6px 5px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}
.brand img {
    width: 140px;
    height: auto;
    max-height: 88px;
    object-fit: contain;
}

.brand span {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.brand small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
}

.sidebar nav {
    display: grid;
    gap: 1px;
    margin-top: 4px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.sidebar nav a {
    color: var(--text-soft);
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font-family);
    font-size: var(--font-size-sidebar);
    font-weight: var(--font-weight-semibold);
    transition: background .15s ease, color .15s ease;
}

.sidebar nav a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.sidebar nav a.active {
    background: var(--sidebar-active);
    color: var(--primary);
    font-weight: 650;
}

.sidebar nav a.active .nav-icon {
    color: var(--active-icon);
    background: var(--active-icon-bg);
    border-radius: 7px;
}

.sidebar nav a:hover .nav-icon {
    color: var(--active-icon);
}

.nav-submenu {
    display: grid;
    gap: 1px;
    margin: 0 8px 2px 0;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--border);
}

.sidebar nav .nav-submenu a {
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 11.5px;
}

.sidebar nav .nav-submenu a.active {
    background: var(--sidebar-active);
}

.sidebar nav .nav-submenu a.compact-link {
    min-height: 20px;
    padding-block: 2px;
}

.nav-icon {
    width: 18px;
    text-align: center;
    color: var(--primary-icon);
    font-size: 15px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.quick-link,
.stat-link {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
}

.quick-link:hover,
.stat-link:hover {
    background: var(--surface-soft);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
}

.language-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface-soft);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.language-switch a {
    text-align: center;
    color: var(--muted);
    padding: 7px;
    border-radius: 8px;
    font-size: 13px;
}

.language-switch a.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    font-weight: 650;
}

.topbar-language-switch {
    grid-template-columns: 1fr;
    min-width: 72px;
}

.topbar-language-switch .language-toggle-link {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    font-weight: 650;
}

main {
    min-width: 0;
}

.topbar {
    height: 52px;
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar > div,
.topbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-main {
    min-width: 0;
    flex-wrap: wrap;
}

.topbar strong {
    font-size: 15px;
    font-weight: 650;
}

.today {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.user-menu {
    color: var(--text-soft);
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.theme-toggle {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    background: var(--surface);
}

.theme-toggle:hover {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.theme-toggle-icon {
    width: 18px;
    text-align: center;
    line-height: 1;
    color: var(--primary-icon);
}

.user-menu form {
    margin: 0;
}

.account-password-link {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    background: var(--surface);
    font-weight: 650;
}

.account-password-link:hover,
.account-password-link:focus-visible {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary-border);
}

.password-change-shell {
    width: min(100%, 980px);
    margin-inline: auto;
}

.password-change-form {
    display: grid;
    gap: 18px;
}

.password-security-note {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--info-border);
    border-radius: 12px;
    color: var(--text-soft);
    background: var(--info-bg);
    line-height: 1.55;
}

.password-security-note strong {
    color: var(--text);
}

.link-button {
    border: 0;
    color: var(--text-soft);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.link-button:hover {
    color: var(--text);
}

.logout-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
}

.logout-icon-button:hover {
    background: var(--surface-soft);
    border-color: var(--border);
}

.logout-icon-button svg {
    width: 19px;
    height: 19px;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.content {
    padding: 14px 18px 32px;
    max-width: none;
    margin: 0 auto;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.page-heading.compact {
    margin-bottom: 24px;
}

.page-heading h1 {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.page-heading p {
    display: none;
}


.page-heading-duplicate-title,
.page-heading.is-title-only-duplicate {
    display: none !important;
}

.page-heading.has-hidden-duplicate-title {
    min-height: 0;
    margin-bottom: 12px;
}

.page-heading.has-hidden-duplicate-title.compact,
.compact-list-heading.has-hidden-duplicate-title {
    margin-bottom: 10px;
}

.page-heading.has-hidden-duplicate-title > .btn,
.page-heading.has-hidden-duplicate-title > .actions {
    margin-inline-start: auto;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.actions form {
    margin: 0;
}

.action-note {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
    min-height: 40px;
}

.btn {
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 9px 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 650;
    background: var(--surface);
    color: var(--text);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--neutral-bg);
    border-color: var(--neutral-border);
    color: var(--neutral);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-text);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
}

.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger-border);
}

.btn-danger:hover {
    background: var(--danger-bg);
}

.btn-block {
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 14px;
    display: grid;
    gap: 4px;
    box-shadow: var(--shadow);
    transition: border-color .15s ease, transform .15s ease;
}

.stat-card:hover {
    border-color: var(--primary-border);
    transform: translateY(-1px);
}

.stat-card.red,
.stat-card.green {
    border-color: var(--border);
}

.stat-card span {
    color: var(--muted);
}

.stat-card small {
    display: none;
}

.stat-card strong {
    font-size: 25px;
    color: var(--text);
    letter-spacing: 0;
}

.document-navigation-actions {
    align-items: center;
    margin-bottom: 12px;
}

.document-report-count {
    min-width: 24px;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12px;
}

.btn-primary .document-report-count {
    background: rgba(255, 255, 255, .16);
    color: var(--accent-text);
}

.panel,
.form-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.form-panel {
    padding: 26px;
    width: 100%;
    max-width: none;
}

.panel-header {
    padding: 17px 19px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.panel-header h2,
.notes h2 {
    font-size: 16px;
    margin: 0;
}

.panel-header p {
    display: none;
}

.dashboard-panel {
    margin-bottom: 18px;
}

.panel-header a {
    color: var(--text-soft);
    font-size: 14px;
}

.panel-header a:hover {
    color: var(--text);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    white-space: nowrap;
}

table form {
    margin: 0;
}

th,
td {
    min-height: var(--table-row-height);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    line-height: 1.35;
    vertical-align: middle;
}

th {
    background: var(--table-header-bg);
    color: var(--text);
    font-size: var(--table-header-font-size);
    font-weight: 650;
    text-align: start;
}

td {
    background: var(--surface);
    color: var(--text);
    font-size: var(--table-cell-font-size);
}

tr > th:last-child,
tr > td:last-child {
    border-inline-end: 0;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover td {
    background: var(--row-hover);
}

tbody tr.selected td,
tbody tr.is-selected td,
tbody tr[aria-selected="true"] td,
tbody tr[data-selected="true"] td {
    background: var(--highlight-bg);
}

.number {
    direction: ltr;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 35px;
}

.metric-bar {
    width: 170px;
    height: 9px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.metric-bar span {
    display: block;
    height: 100%;
    min-width: 6px;
    background: var(--accent);
    border-radius: inherit;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text-soft);
}

.badge.current {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.badge.approved {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.badge.pending {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

.badge.rejected {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.badge.superseded {
    background: var(--surface-soft);
    color: var(--text-soft);
}

.badge.neutral {
    background: var(--neutral-bg);
    color: var(--neutral);
    border-color: var(--neutral-border);
}

.badge.cancelled {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.badge.in_progress {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-border);
}

.badge.completed {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.policy-receipt-action {
    display: inline-flex;
    align-items: center;
}

.policy-receipt-action form {
    margin: 0;
}

.policy-image-cell {
    min-width: 210px;
}

.policy-image-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.policy-image-inline-form input[type="file"] {
    width: 125px;
    max-width: 100%;
    font-size: 11px;
}

.policy-image-clear {
    margin-top: 3px;
    color: var(--danger);
}

.policy-receipt-confirmed > td {
    animation: policy-receipt-confirmed 1.8s ease-out;
}

.policy-receipt-toast {
    position: fixed;
    z-index: 1300;
    inset-inline-start: 22px;
    inset-block-end: 22px;
    max-width: min(420px, calc(100vw - 44px));
    padding: 11px 15px;
    border: 1px solid var(--success-border);
    border-radius: 9px;
    background: var(--success-bg);
    color: var(--success);
    box-shadow: var(--shadow-lg);
    font-weight: var(--font-weight-semibold);
}

.policy-receipt-toast.is-error {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

@keyframes policy-receipt-confirmed {
    0% { background-color: color-mix(in srgb, var(--success) 24%, transparent); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .policy-receipt-confirmed > td {
        animation: none;
    }
}

.messages {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 6px;
    width: 100%;
    margin: 0 0 12px;
    pointer-events: none;
}

.rental-summary-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(155px, 1fr)) minmax(220px, 1.2fr) minmax(155px, .8fr) auto;
    align-items: end;
}

.summary-filter-field {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
}

.summary-customer-select {
    min-height: 42px;
}

.rental-summary-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.rental-summary-stats .stat-card {
    flex: 1 0 125px;
    padding: 10px;
}

.rental-summary-stats .stat-card span {
    font-size: 11px;
}

.alert {
    justify-self: stretch;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
    padding: 9px 10px 9px 12px;
    border-radius: 8px;
    margin: 0;
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
}

.alert-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.alert-success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
    box-shadow: var(--shadow-sm);
}

.alert-error,
.alert-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
    box-shadow: var(--shadow-sm);
}

.alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
    box-shadow: var(--shadow-sm);
}

.alert-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info);
    box-shadow: var(--shadow-sm);
}

.alert-close {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    opacity: .72;
}

.alert-close:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    opacity: 1;
}

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.customer-inline-table .form-control {
    width: 100%;
    min-width: 125px;
    min-height: 32px;
    padding: 5px 7px;
}

.customer-inline-table .customer-credit-input {
    min-width: 78px;
}

.customer-inline-table .inline-checkbox {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.customer-entry-row td {
    background: var(--highlight-bg);
    border-block-end: 2px solid var(--border-strong);
}

.sales-order-filters,
.stacked-filters {
    flex-direction: column;
}

.filter-line {
    display: flex;
    gap: 10px;
    width: 100%;
}

.rental-contract-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    align-items: end;
}

.rental-contract-filters .btn {
    width: 100%;
}

.stacked-filters .filter-line {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    align-items: end;
}

.stacked-filters .filter-line:first-child input[type="search"] {
    grid-column: span 2;
}

.operation-order-filters .filter-line:first-child input[type="search"],
.followup-filters .filter-line:first-child input[type="search"] {
    grid-column: auto;
}

.operation-order-filters .filter-line:first-child {
    grid-template-columns: minmax(300px, 2fr) repeat(3, minmax(145px, 1fr));
}

.operation-order-filters .filter-line:nth-child(2) {
    grid-template-columns: repeat(5, minmax(155px, 1fr)) auto;
}

.followup-filters .filter-line:first-child {
    grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(160px, 1fr));
}

.followup-filters .filter-line:nth-child(2) {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) auto minmax(115px, .5fr);
}

.table-wrap.list-scroll {
    max-height: 64vh;
    overflow: auto;
}

.table-wrap.list-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sales-orders-table {
    min-width: 1480px;
}

.operation-orders-table {
    min-width: 3100px;
}

.documents-table {
    min-width: 3100px;
}

.post-icon-button {
    min-width: 30px;
    padding-inline: 8px;
    color: var(--primary-icon);
    font-size: 14px;
    line-height: 1;
}

.compact-list-heading {
    margin-bottom: 8px;
}

.compact-list-heading h1 {
    font-size: 22px;
}

.compact-list-heading p {
    display: none;
}

.compact-panel {
    padding: 0;
}

.compact-data-table th,
.compact-data-table td {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 11.5px;
}

.compact-data-table th {
    font-size: 11px;
}

.compact-data-table .badge {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 10px;
}

.compact-data-table .actions-cell {
    display: flex;
    gap: 4px;
    align-items: center;
}

.compact-data-table .btn-small {
    min-height: 25px;
    padding: 3px 6px;
    font-size: 11px;
}

.compact-data-table .inline-input {
    min-height: 25px;
    min-width: 68px;
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 11px;
}

.compact-data-table .number-input {
    max-width: 78px;
}

.compact-data-table .date-input {
    min-width: 104px;
}

.compact-data-table .select-input {
    min-width: 106px;
}

.compact-data-table .inline-file-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 210px;
    white-space: nowrap;
}

.compact-data-table .inline-file-status {
    flex: 0 0 auto;
    line-height: 1;
}

.compact-data-table .policy-file-input {
    flex: 0 0 136px;
    min-width: 136px;
    max-width: 136px;
    min-height: 23px;
    padding: 2px 4px;
}

.compact-data-table .inline-checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 92px;
    white-space: nowrap;
}

.column-filter-row th {
    top: 34px;
    background: var(--surface);
    padding: 4px 5px;
    z-index: 3;
}

.table-wrap.list-scroll thead .column-filter-row th {
    top: 34px;
}

.column-filter-row input,
.column-filter-row select {
    width: 100%;
    min-width: 76px;
    min-height: 27px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 5px;
    background: var(--surface);
    color: var(--text);
    font-size: 11px;
}

.column-filter-row input[type="date"] {
    min-width: 116px;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
}

.sortable-header:hover,
.sortable-header.active-sort {
    color: var(--text);
    background: var(--surface-soft);
}

.sort-indicator {
    color: var(--accent);
    font-size: 10px;
}


.table-filter-row-hidden {
    display: none !important;
}

.table-filter-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.table-filter-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-filter-button {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0;
    background: transparent;
    color: var(--primary-icon);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-filter-button::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    clip-path: polygon(10% 16%, 90% 16%, 62% 52%, 62% 86%, 38% 86%, 38% 52%);
}

.table-filter-button:hover,
.table-filter-button[aria-expanded="true"],
.table-filter-button.is-sorted {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary-border);
}

.table-filter-button.is-filtered {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.table-filter-button.is-loading {
    cursor: wait;
    opacity: .65;
}

.table-filter-menu {
    position: fixed;
    z-index: 1000;
    padding: 8px;
    display: grid;
    gap: 7px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.table-filter-menu-item {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    padding: 7px 9px;
    text-align: start;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.table-filter-menu-item:hover {
    background: var(--surface-soft);
}

.table-filter-search,
.table-filter-date {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 7px 9px;
    background: var(--surface);
    color: var(--text);
    outline: none;
}

.table-filter-search:focus,
.table-filter-date:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.table-filter-date-tree {
    max-height: min(330px, calc(100vh - 300px));
    min-height: 100px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    scrollbar-gutter: stable;
}

.table-filter-date-group {
    margin: 2px 0;
    color: var(--text);
}

.table-filter-date-group > summary {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    list-style-position: inside;
}

.table-filter-date-group > summary:hover {
    background: var(--primary-soft);
}

.table-filter-date-month {
    margin-inline-start: 16px;
}

.table-filter-date-day {
    margin-inline-start: 34px;
    font-weight: 400;
}

.table-filter-options {
    max-height: min(300px, calc(100vh - 310px));
    min-height: 90px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    display: grid;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.table-filter-check {
    min-width: 0;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 5px;
    border-radius: 6px;
    color: var(--text-soft);
    font-size: 12px;
    cursor: pointer;
}

.table-filter-check[hidden] {
    display: none !important;
}

.table-filter-check:hover {
    background: var(--surface);
    color: var(--text);
}

.table-filter-check input {
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.table-filter-select-all {
    font-weight: 650;
    color: var(--text);
}

.table-filter-empty {
    padding: 8px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.table-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.compact-data-table .table-filter-header {
    gap: 3px;
}

.compact-data-table .table-filter-button {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border-radius: 5px;
}

.compact-data-table .table-filter-button::before {
    width: 11px;
    height: 11px;
}

.table-column-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 0 0 6px;
    overflow: visible;
}

.table-column-toolbar .btn:not(.btn-primary):not(.btn-danger),
.target-table-export-actions .btn:not(.btn-primary):not(.btn-danger) {
    border-color: var(--primary-border);
    color: var(--primary);
}

.table-column-toolbar .btn:not(.btn-primary):not(.btn-danger):hover,
.target-table-export-actions .btn:not(.btn-primary):not(.btn-danger):hover {
    background: var(--primary-soft);
}

.table-columns-reset {
    white-space: nowrap;
}
.table-column-choose-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.table-column-choose-menu {
    position: static;
    inset: auto;
    z-index: 50;
    width: min(320px, calc(100vw - 70px));
    min-width: 220px;
    max-height: 220px;
    overflow: auto;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.table-column-choose-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 6px;
    white-space: nowrap;
    color: var(--text);
}

.table-column-choose-item:hover {
    background: var(--surface-soft);
}

.table-column-choose-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

.table-column-choose-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.table-column-choose-move {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--primary);
    background: var(--surface);
    cursor: pointer;
}

.table-column-choose-move:hover,
.table-column-choose-move:focus-visible {
    color: var(--button-primary-fg);
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
}

.access-catalog-advanced > summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--text);
}

.access-catalog-advanced-body {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}


.table-filter-options::-webkit-scrollbar {
    width: 12px;
}

.table-filter-options::-webkit-scrollbar-track {
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
}

.table-filter-options::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 3px solid var(--surface);
    border-radius: 999px;
    background: var(--border-strong);
}

.table-filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

.table-column-choose-item input {
    margin: 0;
}

.is-column-customizable {
    position: relative;
}

.table-column-drag-handle {
    width: 18px;
    height: 20px;
    flex: 0 0 18px;
    border: 0;
    border-radius: 5px;
    padding: 0;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-column-drag-handle::before {
    content: "";
    width: 10px;
    height: 14px;
    background: radial-gradient(currentColor 1px, transparent 1.5px);
    background-size: 5px 5px;
}

.table-column-drag-handle:hover,
.table-column-drag-handle:focus-visible {
    background: var(--surface-soft);
    color: var(--text);
    outline: none;
}

.table-column-drag-handle:active,
.is-dragging-column .table-column-drag-handle {
    cursor: grabbing;
}

.table-column-resize-handle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: -3px;
    width: 7px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
}

.table-column-resize-handle::after {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 3px;
    width: 1px;
    background: transparent;
}

.table-column-resize-handle:hover::after,
.is-resizing-column .table-column-resize-handle::after {
    background: var(--active-icon);
}

.table-column-resizing {
    cursor: col-resize;
    user-select: none;
}

.columns-customized th,
.columns-customized td {
    overflow: hidden;
    text-overflow: ellipsis;
}


.table-column-drop-target {
    box-shadow: inset 3px 0 0 var(--active-icon);
}

html[dir="rtl"] .table-column-drop-target {
    box-shadow: inset -3px 0 0 var(--active-icon);
}

.table-column-drop-target.drop-after {
    box-shadow: inset -3px 0 0 var(--active-icon);
}

html[dir="rtl"] .table-column-drop-target.drop-after {
    box-shadow: inset 3px 0 0 var(--active-icon);
}

.bulk-operation-office-fields {
    min-width: 220px;
    display: grid;
    gap: 6px;
}

.bulk-operation-office-field {
    display: grid;
    gap: 3px;
}

.bulk-operation-office-field label {
    color: var(--muted);
    font-size: 11px;
}

.sales-bulk-operation-table {
    min-width: 1120px;
}

.muted-row td {
    color: var(--muted);
    background: var(--surface-soft);
}
.asset-pairs-cell {
    min-width: 180px;
    white-space: normal;
}

.asset-pairs-cell span {
    display: inline-flex;
    margin: 1px 2px;
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-soft);
    font-size: 10px;
}

.asset-pair-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(78px, 1fr));
    gap: 4px;
}

.operation-report-table {
    min-width: 2100px;
}

.gps-followup-table {
    min-width: 3900px;
}

.gps-followup-table th,
.gps-followup-table td {
    min-height: 26px;
    padding: 2px 5px;
    font-size: 10.5px;
    line-height: 1.15;
}

.gps-followup-table th {
    font-size: 10px;
}

.gps-followup-table .inline-input {
    min-height: 24px;
    height: 24px;
    padding: 1px 4px;
    border-radius: 5px;
    font-size: 10px;
}

.gps-followup-table .btn-small {
    min-height: 24px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
}

.gps-followup-table .badge {
    min-height: 17px;
    padding: 1px 5px;
    font-size: 9.5px;
}

.gps-followup-table .action-note {
    margin-top: 1px;
    font-size: 9px;
    line-height: 1.1;
}

.gps-followup-table .wrap-text {
    white-space: normal;
    min-width: 220px;
}

.gps-form-panel,
.gps-audit-panel {
    margin-top: 18px;
}

.bulk-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 10px;
}

.bulk-actions select {
    max-width: 280px;
}

.bulk-actions .trip-standard-import-file {
    width: 240px;
    max-width: 28vw;
}

.inline-action-form {
    display: inline-flex;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.row-actions form {
    display: inline-flex;
    margin: 0;
}

.inline-input {
    width: 100%;
    min-width: 90px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 7px;
    background: var(--surface);
    color: var(--text);
}

.number-input {
    max-width: 110px;
    text-align: end;
}

.date-input {
    min-width: 140px;
}

.select-input {
    min-width: 150px;
}

.btn-small {
    min-height: 32px;
    padding: 5px 9px;
    border-radius: 8px;
    white-space: nowrap;
}

.filters input,
.filters select {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
}

.filters input {
    flex: 1;
    max-width: none;
}

.compact-filters {
    gap: 6px;
    margin-bottom: 8px;
}

.compact-filters .filter-line {
    gap: 6px;
}

.compact-filters input,
.compact-filters select {
    min-height: 32px;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
}

.compact-filters .btn {
    min-height: 32px;
    padding: 6px 10px;
}

.dashboard-filters {
    margin-bottom: 18px;
}

.dashboard-filters .panel-header {
    align-items: flex-start;
}

.dashboard-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px 19px 4px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.filter-field label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 9px 11px;
    outline: none;
}

.filter-field input:focus,
.filter-field select:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.dashboard-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 19px 18px;
    color: var(--muted);
    font-size: 13px;
}

.filters input:focus,
.filters select:focus,
.form-control:focus,
.login-card input:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-section {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.form-section:first-child {
    margin-top: 0;
}

.form-section-title {
    margin: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 750;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.form-grid.form-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid.form-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid.form-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.form-grid-dense {
    gap: 11px 12px;
}

.inline-create-panel {
    margin-bottom: 14px;
    padding: 14px;
}

.inline-create-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.inline-create-heading > div {
    display: grid;
    gap: 3px;
}

.inline-create-heading span {
    color: var(--muted);
    font-size: 12px;
}

.inline-create-form .field {
    min-width: 0;
}

.inline-create-form .field.wide {
    grid-column: span 2;
}

.inline-create-actions {
    margin-top: 12px;
}

.btn.btn-compact {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
}

.cancellation-reason-input {
    display: none !important;
}

.cancellation-bulk-actions {
    align-items: center;
}

.cancellation-reason-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--overlay);
    backdrop-filter: blur(3px);
}

.cancellation-reason-overlay[hidden] {
    display: none;
}

.cancellation-reason-dialog {
    width: min(520px, 100%);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.cancellation-reason-dialog-header,
.cancellation-reason-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
}

.cancellation-reason-dialog-header {
    border-block-end: 1px solid var(--border);
}

.cancellation-reason-dialog-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cancellation-reason-dialog-header h2,
.cancellation-reason-dialog-content p {
    margin: 0;
}

.cancellation-reason-dialog-header h2 {
    font-size: 18px;
}

.cancellation-reason-dialog-icon {
    color: var(--danger);
    font-size: 22px;
}

.cancellation-reason-dialog-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

.cancellation-reason-dialog-content {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.cancellation-reason-dialog-input {
    width: 100%;
    min-height: 130px;
    resize: vertical;
}

.cancellation-reason-dialog-error {
    color: var(--danger);
    font-size: 13px;
}

.cancellation-reason-dialog-actions {
    justify-content: flex-end;
    border-block-start: 1px solid var(--border);
}

body.cancellation-modal-open {
    overflow: hidden;
}

.cancellation-single-form,
.cancellation-review-form {
    display: grid;
    gap: 8px;
    min-width: min(340px, 100%);
}

.cancellation-target-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.cancellation-reason-cell {
    min-width: 220px;
    white-space: pre-wrap;
}

.asset-license-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 12px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.asset-license-panel[hidden] {
    display: none;
}

.asset-license-item {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.asset-license-item span,
.asset-license-item small {
    color: var(--muted);
    font-size: 12px;
}

.asset-license-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
}

.license-status-table td {
    vertical-align: top;
}

.license-status-cell {
    display: grid;
    gap: 5px;
    min-width: 130px;
}

.license-status-cell small,
.muted-text {
    color: var(--muted);
    font-size: 12px;
}

.license-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.license-status-actions a {
    color: var(--accent);
    font-size: 12px;
    font-weight: 650;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field.wide {
    grid-column: 1 / -1;
}

.field.span-2 {
    grid-column: span 2;
}

.field.span-3 {
    grid-column: span 3;
}

.field label {
    font-size: 13px;
    font-weight: 650;
}

.form-control,
.login-card input {
    width: 100%;
    min-height: 39px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 9px 11px;
    background: var(--surface);
    color: var(--text);
    outline: none;
}

textarea.form-control {
    min-height: 78px;
    resize: vertical;
}

.duration-hours-minutes-preview {
    display: block;
    margin-top: 4px;
    color: var(--success, #15803d);
    font-weight: 650;
}

.duration-hours-minutes-preview.invalid {
    color: var(--danger, #b91c1c);
}

.choice-list {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.choice-list li {
    margin: 0;
}

.choice-list label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text);
}

.choice-list input {
    accent-color: var(--accent);
}

.asset-checklist {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 7px 12px;
}

.asset-checklist div {
    min-width: 0;
}

.asset-checklist label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.asset-checklist input {
    flex: 0 0 auto;
    accent-color: var(--accent);
}

input[type="checkbox"].form-control {
    width: 20px;
    min-height: 20px;
}

.form-actions {
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding-top: 19px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.single-page-workspace.form-panel,
.single-page-workspace .form-panel {
    padding: 12px;
}

.sales-order-workspace > .page-heading.compact,
.operation-order-workspace > .page-heading.compact {
    display: none;
}

.single-page-workspace .page-heading.compact {
    margin-bottom: 8px;
}

.single-page-workspace .page-heading h1 {
    font-size: 18px;
    margin-bottom: 0;
}

.single-page-workspace .form-section {
    gap: 4px;
    margin-top: 7px;
}

.single-page-workspace .form-section-title {
    padding-bottom: 2px;
    font-size: 11px;
}

.single-page-workspace .form-grid,
.single-page-workspace .form-grid.form-grid-five,
.single-page-workspace .form-grid.form-grid-four,
.single-page-workspace .form-grid.form-grid-three {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px 8px;
}

.single-page-workspace .field {
    gap: 2px;
}

.single-page-workspace .field label {
    font-size: 11px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.single-page-workspace .form-control {
    min-height: 30px;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 13px;
}

.single-page-workspace textarea.form-control {
    min-height: 34px;
}

.single-page-workspace .form-actions {
    margin-top: 8px;
    padding-top: 8px;
}

.single-page-workspace .choice-list {
    gap: 2px 8px;
    padding-top: 0;
}

.single-page-workspace .choice-list label {
    gap: 4px;
    font-size: 11px;
}

.single-page-workspace input[type="checkbox"].form-control {
    width: 16px;
    min-height: 16px;
}

.single-page-workspace .btn {
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 8px;
}

.operation-order-workspace.single-page-workspace,
.operation-order-workspace .form-panel {
    padding: 8px;
}

.operation-order-workspace .form-section {
    margin-top: 4px;
}

.operation-order-workspace .form-grid,
.operation-order-workspace .form-grid.form-grid-five,
.operation-order-workspace .form-grid.form-grid-four,
.operation-order-workspace .form-grid.form-grid-three {
    gap: 4px 6px;
}

.operation-order-workspace .form-control {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 12px;
}

.operation-order-workspace .field label {
    font-size: 10px;
}

.operation-order-workspace .form-actions {
    margin-top: 6px;
    padding-top: 6px;
}

.sticky-actions {
    position: sticky;
    bottom: -1px;
    z-index: 4;
    background: var(--surface);
    padding-bottom: 2px;
}

.inline-summary {
    margin: 0 0 7px;
}

.inline-summary h2 {
    margin: 0 0 4px;
    color: var(--text-soft);
    font-size: 11px;
}

.single-page-workspace .compact-details {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 7px;
}

.single-page-workspace .compact-details .detail-card,
.followup-workspace .detail-card {
    min-width: 0;
    padding: 6px 7px;
    gap: 2px;
}

.single-page-workspace .compact-details .detail-card span,
.followup-workspace .detail-card span {
    font-size: 10px;
}

.single-page-workspace .compact-details .detail-card strong,
.followup-workspace .detail-card strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.followup-workspace {
    display: flex;
    flex-direction: column;
}

.followup-workspace .page-heading {
    order: 0;
    margin-bottom: 6px;
}

.followup-workspace .alert {
    order: 1;
}

.followup-workspace .gps-form-panel {
    order: 2;
    margin-top: 0;
}

.followup-workspace > .details-grid {
    order: 3;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
    margin: 7px 0 0;
}

.followup-workspace .gps-audit-panel {
    order: 4;
}

.form-error,
.error {
    color: var(--danger);
}

.help-text {
    color: var(--muted);
    font-size: 12px;
}

.help {
    display: none;
}

.form-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 10px;
    padding: 10px 13px;
    margin-bottom: 18px;
}

.form-error ul {
    margin: 0;
    padding-inline-start: 18px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.treasury-movements-heading {
    margin-top: -14px;
    margin-bottom: 8px !important;
}

.treasury-movements-heading h2 {
    margin: 0;
    font-size: 18px;
}

.treasury-screen-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.treasury-screen-toolbar .treasury-movement-toolbar {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    overflow: visible;
    padding: 0;
}

.treasury-screen-toolbar .treasury-movement-toolbar > .filter-field {
    flex: 0 0 150px;
    width: 150px;
}

.treasury-screen-toolbar .treasury-movement-toolbar > .treasury-cashbox-field {
    flex-basis: 180px;
    width: 180px;
}

.treasury-screen-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
}

.treasury-screen-actions .btn {
    white-space: nowrap;
}

.treasury-movement-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px;
    align-items: end;
    margin-bottom: 10px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.treasury-movement-toolbar > .filter-field {
    flex: 1 1 170px;
    max-width: 260px;
}

.treasury-movement-toolbar > .treasury-cashbox-field {
    flex-basis: 190px;
}

.treasury-movement-toolbar input,
.treasury-movement-toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    padding: 7px 9px;
    outline: none;
}

.treasury-movement-toolbar input:focus,
.treasury-movement-toolbar select:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.treasury-filter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    min-height: 38px;
}

.treasury-filter-actions .btn {
    min-height: 38px;
    padding: 7px 9px;
}

.treasury-summary-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 10px;
}

.treasury-summary-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 76px;
    gap: 3px;
    overflow: hidden;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--surface), var(--surface-soft));
    box-shadow: var(--shadow);
}

.treasury-summary-card::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--primary);
    content: "";
}

.treasury-summary-card-debit::before {
    background: var(--danger);
}

.treasury-summary-card-credit::before {
    background: var(--success);
}

.treasury-export-toolbar {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
}

.treasury-export-toolbar label {
    font-size: 0.78rem;
    color: var(--muted-text, #64748b);
}

.treasury-export-toolbar select {
    min-width: 220px;
}

.treasury-export-dialog-icon {
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}

.treasury-export-dialog-content {
    display: grid;
    gap: 14px;
}

.treasury-export-dialog-content fieldset {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.treasury-export-dialog-content legend {
    padding-inline: 5px;
    color: var(--text);
    font-weight: 800;
}

.treasury-export-dialog-content label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
}

.assignment-status-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 0 10px;
}

.print-section-break {
    break-before: page;
    page-break-before: always;
}

.treasury-summary-card-operating::before {
    background: var(--primary);
}

.treasury-summary-card-pending::before {
    background: #d97706;
}

.treasury-summary-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.treasury-summary-icon {
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 16px;
    font-weight: 800;
}

.treasury-summary-card-debit .treasury-summary-icon {
    background: var(--danger-bg);
    color: var(--danger);
}

.treasury-summary-card-credit .treasury-summary-icon {
    background: var(--success-bg);
    color: var(--success);
}

.treasury-summary-card-operating .treasury-summary-icon {
    background: var(--primary-soft);
    color: var(--primary);
}

.treasury-summary-card-pending .treasury-summary-icon {
    background: #fff7ed;
    color: #b45309;
}

.treasury-summary-card strong {
    color: var(--text);
    font-size: clamp(20px, 2vw, 27px);
    font-variant-numeric: tabular-nums;
}

.treasury-summary-card small {
    color: var(--text-soft);
    font-size: 10px;
}

.treasury-bulk-toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.treasury-bulk-toolbar select {
    width: min(320px, 100%);
    min-height: 38px;
}

.treasury-bulk-toolbar .badge {
    align-self: center;
}

.treasury-transactions-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.treasury-cancel-dialog {
    width: min(620px, 100%);
}

.treasury-cancel-impact {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.treasury-cancel-impact ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-inline-start: 20px;
}

.treasury-cancel-impact p,
.treasury-cancel-impact small {
    margin: 0;
}

.treasury-cancel-dialog textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

@media (max-width: 720px) {
    .treasury-summary-cards {
        grid-template-columns: 1fr;
    }

    .treasury-bulk-toolbar select,
    .treasury-bulk-toolbar .btn {
        flex: 1 1 180px;
        width: 100%;
    }

    .treasury-cancel-dialog {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
}

.split-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.contractor-drivers-panel,
.contractor-history-panel {
    margin-top: 10px;
}

.contractor-assets-shortcut {
    margin-top: 10px;
}

.contractor-assets-hint {
    padding: 8px 10px;
    color: var(--text-soft);
    font-size: 12px;
}

.contractor-drivers-panel .panel-header,
.contractor-history-panel .panel-header {
    padding-bottom: 6px;
}

.contractor-drivers-panel th,
.contractor-drivers-panel td,
.contractor-history-panel th,
.contractor-history-panel td {
    padding: 7px 8px;
    font-size: 12px;
}

.detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 12px;
    display: grid;
    gap: 5px;
    box-shadow: var(--shadow);
}

.detail-card span {
    color: var(--muted);
    font-size: 12px;
}

.detail-card strong {
    font-size: 14px;
}

.detail-card.highlight {
    background: var(--highlight-bg);
    color: var(--text);
    border-color: var(--border-strong);
}

.detail-card.highlight span {
    color: var(--muted);
}

.order-status-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 13px;
}

.notes {
    padding: 20px;
}

.notes p {
    margin-bottom: 0;
    color: var(--text-soft);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    color: var(--muted);
}

.pagination a {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 7px 12px;
}

.pagination a:hover {
    background: var(--surface-soft);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 25px;
    background:
        radial-gradient(circle at top, var(--login-glow), transparent 36%),
        var(--bg);
}

.login-card {
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--login-shadow);
}

.login-logo {
    width: 255px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: -8px auto 8px;
}

html[data-theme="dark"] .brand img,
html[data-theme="dark"] .login-logo {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.login-card h1 {
    text-align: center;
    margin: 0;
    color: var(--text);
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold) !important;
}

.login-card .login-trust-heading {
    font-weight: 900 !important;
    -webkit-text-stroke: .25px currentColor;
}

.login-card > p {
    text-align: center;
    color: var(--muted);
    margin-bottom: 26px;
}

.login-card label {
    display: block;
    font-size: 13px;
    font-weight: 650;
    margin: 14px 0 7px;
}

.login-card button {
    margin-top: 22px;
}

.login-languages {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-soft);
}

html[dir="ltr"] .number {
    text-align: right;
}

.statement-table {
    font-size: 12px;
}

.statement-table th,
.statement-table td {
    padding: 9px 10px;
}

.statement-table tfoot th {
    background: var(--highlight-bg);
    color: var(--text);
}

@media (max-width: 980px) {
    :root {
        --sidebar-width: 88px;
    }

    .app-shell {
        grid-template-columns: 88px 1fr;
    }

    .sidebar {
        padding: 14px 10px;
    }

    .brand {
        padding-inline: 0;
    }

    .brand img {
        width: 76px;
        max-height: 58px;
    }

    .brand span,
    .brand small,
    .sidebar nav a:not(.active) span + *,
    .sidebar nav a {
    color: var(--text-soft);
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font-family);
    font-size: var(--font-size-sidebar);
    font-weight: var(--font-weight-semibold);
    transition: background .15s ease, color .15s ease;
}

    .brand span,
    .brand small {
        display: none;
    }

    .sidebar nav a {
    color: var(--text-soft);
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font-family);
    font-size: var(--font-size-sidebar);
    font-weight: var(--font-weight-semibold);
    transition: background .15s ease, color .15s ease;
}

    .nav-icon {
        font-size: 20px;
    }

    .sidebar .language-switch {
        grid-template-columns: 1fr;
    }

    .sidebar .language-switch a {
        font-size: 10px;
    }
}

@media (max-width: 1260px) {
    .form-grid.form-grid-five {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .single-page-workspace .form-grid,
    .single-page-workspace .form-grid.form-grid-five,
    .single-page-workspace .form-grid.form-grid-four,
    .single-page-workspace .form-grid.form-grid-three {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .single-page-workspace .compact-details,
    .followup-workspace > .details-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .operation-order-filters .filter-line:first-child,
    .operation-order-filters .filter-line:nth-child(2),
    .followup-filters .filter-line:first-child,
    .followup-filters .filter-line:nth-child(2) {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    }
}

@media (max-width: 1080px) {
    .form-grid,
    .form-grid.form-grid-five,
    .form-grid.form-grid-four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .single-page-workspace .compact-details,
    .followup-workspace > .details-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .single-page-workspace .form-grid,
    .single-page-workspace .form-grid.form-grid-five,
    .single-page-workspace .form-grid.form-grid-four,
    .single-page-workspace .form-grid.form-grid-three {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .field.span-3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .messages {
        width: 100%;
    }

    .form-grid,
    .form-grid.form-grid-five,
    .form-grid.form-grid-four,
    .form-grid.form-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-page-workspace .compact-details,
    .followup-workspace > .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-page-workspace .form-grid,
    .single-page-workspace .form-grid.form-grid-five,
    .single-page-workspace .form-grid.form-grid-four,
    .single-page-workspace .form-grid.form-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field.span-2,
    .field.span-3 {
        grid-column: 1 / -1;
    }
}

@media print {
    .table-filter-menu,
    .table-filter-empty-row,
    .table-column-toolbar,
    .table-column-drag-handle,
    .table-column-resize-handle {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .sidebar,
    .topbar,
    .no-print,
    .messages,
    .alert {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .content {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .page-heading,
    .details-grid {
        page-break-inside: avoid;
    }

    .panel,
    .detail-card {
        border-color: #d0d0d0;
        box-shadow: none;
    }

    .statement-summary {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }

    .statement-summary .detail-card {
        padding: 8px;
    }

    .statement-table {
        font-size: 7px;
        white-space: normal;
    }

    .statement-table th,
    .statement-table td {
        padding: 4px 3px;
    }

    @page {
        size: A4 landscape;
        margin: 8mm;
    }
}

@media (max-width: 720px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--border);
    }

    .brand {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .brand img {
        width: 100px;
        max-height: 66px;
    }

    .sidebar nav {
        display: flex;
        margin-inline: auto;
    }

    .sidebar nav a {
    color: var(--text-soft);
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font-family);
    font-size: var(--font-size-sidebar);
    font-weight: var(--font-weight-semibold);
    transition: background .15s ease, color .15s ease;
}

    .sidebar-footer {
        margin: 0;
        padding-top: 0;
    }

    .language-switch {
        display: flex;
    }

    .topbar {
        padding: 10px 16px;
        height: auto;
        min-height: 64px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .topbar-main,
    .user-menu,
    .topbar-main {
        width: 100%;
    }

    .user-menu {
        justify-content: flex-start;
    }

    .content {
        padding: 20px 15px 40px;
    }

    .stats-grid,
    .details-grid,
    .split-panels,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid.form-grid-four,
    .form-grid.form-grid-five,
    .form-grid.form-grid-three,
    .single-page-workspace .compact-details,
    .followup-workspace > .details-grid,
    .asset-license-panel {
        grid-template-columns: 1fr;
    }

    .field.wide,
    .field.span-2,
    .field.span-3 {
        grid-column: auto;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .filters {
        flex-wrap: wrap;
    }

    .rental-contract-filters {
        grid-template-columns: 1fr;
    }

    .filter-line {
        display: grid;
        grid-template-columns: 1fr !important;
    }

    .filters input,
    .filters select {
        min-width: 100%;
        max-width: none;
    }

    .dashboard-filter-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Unified table frame and typography overrides */

@media screen {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-family: var(--app-font-family) !important;
        font-size: var(--font-size-base) !important;
        letter-spacing: 0 !important;
    }

    body :where(
        a,
        button,
        input,
        select,
        textarea,
        label,
        span,
        small,
        strong,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        div,
        th,
        td,
        li,
        option,
        .btn,
        .badge,
        .alert,
        .form-control,
        .table-filter-menu,
        .table-filter-menu-item,
        .table-filter-search,
        .table-filter-check,
        .filters input,
        .filters select,
        .panel-header a,
        .pagination,
        .detail-card,
        .stat-card
    ):not(.nav-icon):not(.theme-toggle-icon):not(.table-column-drag-handle):not(.table-column-resize-handle) {
        font-family: var(--app-font-family) !important;
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-regular) !important;
        letter-spacing: 0 !important;
    }

    .topbar strong,
    .page-heading h1,
    .compact-list-heading h1 {
        font-size: var(--font-size-module-title) !important;
        font-weight: var(--font-weight-bold) !important;
        letter-spacing: 0 !important;
    }

    .panel-header h2,
    .notes h2,
    .form-section-title {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-semibold) !important;
        letter-spacing: 0 !important;
    }

    th,
    .table-filter-label {
        font-size: var(--table-header-font-size) !important;
        font-weight: var(--font-weight-bold) !important;
        letter-spacing: 0 !important;
    }

    .sidebar nav a,
    .sidebar nav .nav-submenu a,
    .sidebar nav a.active {
        font-size: var(--font-size-sidebar) !important;
        font-weight: var(--font-weight-semibold) !important;
        letter-spacing: 0 !important;
    }

    th,
    .table-wrap th,
    .compact-data-table th {
        font-weight: var(--font-weight-bold) !important;
    }

    td,
    .table-wrap td,
    .compact-data-table td {
        font-size: var(--table-cell-font-size) !important;
        font-weight: var(--font-weight-regular) !important;
    }

    .nav-icon {
        font-size: 12px !important;
    }

    .theme-toggle-icon,
    .post-icon-button {
        font-size: 12px !important;
    }

    .field label,
    .filter-field label,
    .bulk-operation-office-field label,
    .login-card label,
    .choice-list label,
    .asset-checklist label,
    label {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-semibold) !important;
    }

    .btn,
    .btn-primary,
    .btn-danger,
    .link-button,
    button[type="submit"] {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-semibold) !important;
    }

    .btn-secondary,
    .btn-outline,
    button[type="button"] {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-medium) !important;
    }

    .badge,
    .alert {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-semibold) !important;
    }

    .muted,
    small,
    .helptext,
    .field-help,
    .hint,
    .form-text,
    .errorlist {
        font-size: var(--font-size-help) !important;
        font-weight: var(--font-weight-regular) !important;
        color: var(--muted) !important;
    }

    .number.important,
    .total,
    .totals,
    tfoot td,
    .stat-card strong,
    .dashboard-stat strong,
    .summary-value,
    .metric-value {
        font-size: var(--font-size-important) !important;
        font-weight: var(--font-weight-bold) !important;
    }

    .app-shell,
    main,
    .content,
    .panel,
    .form-panel,
    .dashboard-panel,
    .compact-panel {
        min-width: 0;
        max-width: 100%;
    }

    .content {
        overflow-x: clip;
    }

    .table-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: 96px;
        max-height: min(70vh, calc(100vh - 180px));
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable both-edges;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
    }

    .panel > .table-wrap,
    .compact-panel > .table-wrap,
    .dashboard-panel > .table-wrap {
        border-inline: 0;
        border-block-end: 0;
        border-radius: 0;
    }

    .table-wrap.list-scroll {
        max-height: min(72vh, calc(100vh - 160px));
        overflow: auto;
    }

    .table-wrap table {
        width: 100%;
        min-width: max-content;
        margin: 0;
        white-space: nowrap;
    }

    .table-wrap th,
    .table-wrap td,
    .compact-data-table th,
    .compact-data-table td {
        height: var(--table-row-height);
        min-height: var(--table-row-height);
        padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
        font-size: var(--table-cell-font-size) !important;
        line-height: 1.25;
        vertical-align: middle;
    }

    .table-wrap thead th {
        position: sticky;
        inset-block-start: 0;
        z-index: 8;
        background: var(--table-header-bg);
        box-shadow: inset 0 -1px 0 var(--border);
    }

    .table-wrap thead tr:nth-child(2) th,
    .table-wrap thead .column-filter-row th {
        inset-block-start: var(--table-header-row-height);
        top: var(--table-header-row-height);
        z-index: 9;
        background: var(--surface);
    }

    .column-filter-row input,
    .column-filter-row select,
    .compact-filters input,
    .compact-filters select,
    .compact-data-table .inline-input,
    .compact-data-table .btn-small,
    .compact-data-table .badge,
    .table-filter-search,
    .table-filter-menu-item {
        font-size: var(--font-size-base) !important;
    }

    .compact-data-table .table-filter-button {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .table-column-toolbar {
        position: relative;
        z-index: 3;
        margin-block-end: 4px;
    }

    .table-filter-menu {
        font-size: var(--font-size-base) !important;
    }

    .table-wrap::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    .table-wrap::-webkit-scrollbar-track {
        background: var(--surface-soft);
        border: 1px solid var(--border);
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border: 3px solid var(--surface-soft);
        border-radius: 999px;
    }

    .table-wrap::-webkit-scrollbar-thumb:hover {
        background: var(--muted);
    }

    .table-wrap {
        scrollbar-width: auto;
        scrollbar-color: var(--border-strong) var(--surface-soft);
    }

    html[dir="rtl"] .table-wrap,
    html[dir="rtl"] .table-wrap table {
        direction: rtl;
    }

    html[dir="ltr"] .table-wrap,
    html[dir="ltr"] .table-wrap table {
        direction: ltr;
    }

    .table-wrap.table-geometry-stable {
        min-block-size: var(--table-stable-min-block-size, 96px);
        overflow-anchor: none;
    }

    table.table-geometry-stable th,
    table.table-geometry-stable td {
        min-width: var(--table-stable-column-width, auto);
    }

    table.table-geometry-stable .table-sticky-column {
        position: sticky !important;
        inset-inline-start: var(--table-sticky-offset, 0);
        z-index: 6;
        background: var(--surface);
        background-clip: padding-box;
    }

    table.table-geometry-stable thead .table-sticky-column {
        z-index: 14;
        background: var(--table-header-bg);
    }

    table.table-geometry-stable tbody tr:hover .table-sticky-column {
        background: var(--row-hover);
    }

    table.table-geometry-stable tbody tr:is(.selected, .is-selected, [aria-selected="true"], [data-selected="true"]) .table-sticky-column {
        background: var(--highlight-bg);
    }

    table.table-geometry-stable .table-sticky-column-end {
        box-shadow: -5px 0 8px -8px color-mix(in srgb, var(--text) 55%, transparent);
    }

    html[dir="ltr"] table.table-geometry-stable .table-sticky-column-end {
        box-shadow: 5px 0 8px -8px color-mix(in srgb, var(--text) 55%, transparent);
    }

    .columns-customized th,
    .columns-customized td {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 720px) {
    .table-wrap,
    .table-wrap.list-scroll {
        max-height: min(72vh, calc(100vh - 138px));
    }
}

/* Driver assignment duration thresholds. */
.assignment-duration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 4px 9px;
    border: 1px solid;
    border-radius: 999px;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.assignment-duration-badge.safe {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success-border);
}

.assignment-duration-badge.warning {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.assignment-duration-badge.danger {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.fleet-equipment-filters {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    margin: 0;
}

.fleet-equipment-filters .btn {
    flex: 0 0 auto;
    gap: 8px;
}

.fleet-dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.fleet-dashboard-toolbar > .fleet-driver-assignments-link {
    flex: 0 0 auto;
}

.fleet-equipment-filters .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 999px;
    color: currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-variant-numeric: tabular-nums;
}

.fleet-assignment-dashboard-table {
    min-width: 1560px;
}

.fleet-assignment-dashboard-table th,
.fleet-assignment-dashboard-table td {
    height: 26px !important;
    min-height: 26px !important;
    padding: 3px 6px !important;
    line-height: 1.15 !important;
}

.fleet-assignment-dashboard-table .assignment-duration-badge {
    min-width: 58px;
    padding: 2px 6px;
    line-height: 1.1;
}

.fleet-license-badge {
    display: inline-grid;
    gap: 2px;
    min-width: 108px;
    padding: 5px 8px;
    border: 1px solid;
    border-radius: 8px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.fleet-assignment-dashboard-table .fleet-license-badge {
    gap: 0;
    min-width: 96px;
    padding: 2px 5px;
    line-height: 1.1;
}

.fleet-assignment-dashboard-table .fleet-license-badge small {
    font-size: 9px !important;
    line-height: 1.05;
}

.fleet-license-badge small {
    color: currentColor;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    opacity: .84;
}

.fleet-license-badge.valid {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success-border);
}

.fleet-license-badge.warning {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.fleet-license-badge.danger {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.fleet-license-badge.missing {
    color: var(--muted);
    background: var(--surface-muted);
    border-color: var(--border);
}

@media screen and (max-width: 720px) {
    .fleet-dashboard-toolbar {
        justify-content: flex-start;
    }

    .fleet-dashboard-toolbar .fleet-equipment-filters {
        display: flex;
        width: max-content;
    }

    .fleet-dashboard-toolbar .fleet-equipment-filters .btn {
        width: auto;
        justify-content: center;
    }
}

/*
 * Global button contrast contract.
 *
 * Button variants own their foreground color so general link and icon rules
 * cannot make labels or nested icons disappear against a filled background.
 */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-border: var(--border-strong);
    --btn-hover-bg: var(--surface-hover);
    --btn-hover-fg: var(--text);
    --btn-hover-border: var(--border-strong);
    --btn-active-bg: var(--surface-soft);
    --btn-active-fg: var(--text);
    --btn-active-border: var(--border-strong);
    background: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-fg);
    transition: background-color .15s ease, border-color .15s ease,
        color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-fg);
}

.btn:active,
.btn.active,
.btn[aria-pressed="true"] {
    background: var(--btn-active-bg);
    border-color: var(--btn-active-border);
    color: var(--btn-active-fg);
}

.btn-primary,
.filters button[type="submit"].btn-secondary,
.filter-line button[type="submit"].btn-secondary,
.compact-filters button[type="submit"].btn-secondary,
button.target-show-button,
.bulk-actions button[type="submit"].btn-secondary,
.table-bulk-actions-inline button[type="submit"].btn-secondary {
    --btn-bg: var(--button-primary-bg);
    --btn-fg: var(--button-primary-fg);
    --btn-border: var(--button-primary-bg);
    --btn-hover-bg: var(--button-primary-hover-bg);
    --btn-hover-fg: var(--button-primary-fg);
    --btn-hover-border: var(--button-primary-hover-bg);
    --btn-active-bg: var(--button-primary-active-bg);
    --btn-active-fg: var(--button-primary-fg);
    --btn-active-border: var(--button-primary-active-bg);
    background: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-fg) !important;
    -webkit-text-fill-color: var(--btn-fg);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary[aria-expanded="true"],
.btn-primary[aria-pressed="true"],
.filters button[type="submit"].btn-secondary:hover,
.filters button[type="submit"].btn-secondary:focus,
.filters button[type="submit"].btn-secondary:active,
.filter-line button[type="submit"].btn-secondary:hover,
.filter-line button[type="submit"].btn-secondary:focus,
.filter-line button[type="submit"].btn-secondary:active,
.compact-filters button[type="submit"].btn-secondary:hover,
.compact-filters button[type="submit"].btn-secondary:focus,
.compact-filters button[type="submit"].btn-secondary:active,
button.target-show-button:hover,
button.target-show-button:focus,
button.target-show-button:active,
.bulk-actions button[type="submit"].btn-secondary:hover,
.bulk-actions button[type="submit"].btn-secondary:focus,
.bulk-actions button[type="submit"].btn-secondary:active,
.table-bulk-actions-inline button[type="submit"].btn-secondary:hover,
.table-bulk-actions-inline button[type="submit"].btn-secondary:focus,
.table-bulk-actions-inline button[type="submit"].btn-secondary:active {
    color: var(--button-primary-fg) !important;
    -webkit-text-fill-color: var(--button-primary-fg);
}

.btn-primary[aria-expanded="true"] {
    background: var(--button-primary-active-bg);
    border-color: var(--button-primary-active-bg);
}

.btn-outline {
    --btn-bg: var(--button-outline-bg);
    --btn-fg: var(--button-outline-fg);
    --btn-border: var(--button-outline-border);
    --btn-hover-bg: var(--button-primary-bg);
    --btn-hover-fg: var(--button-primary-fg);
    --btn-hover-border: var(--button-primary-bg);
    --btn-active-bg: var(--button-primary-active-bg);
    --btn-active-fg: var(--button-primary-fg);
    --btn-active-border: var(--button-primary-active-bg);
}

.btn-outline[aria-expanded="true"] {
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
}

.btn-secondary {
    --btn-bg: var(--button-secondary-bg);
    --btn-fg: var(--button-secondary-fg);
    --btn-border: var(--button-secondary-border);
    --btn-hover-bg: var(--button-secondary-hover-bg);
    --btn-hover-fg: var(--button-secondary-fg);
    --btn-hover-border: var(--button-secondary-border);
    --btn-active-bg: var(--button-secondary-active-bg);
    --btn-active-fg: var(--button-secondary-fg);
    --btn-active-border: var(--button-secondary-border);
}

.btn-secondary[aria-expanded="true"] {
    background: var(--button-secondary-active-bg);
    border-color: var(--button-secondary-border);
    color: var(--button-secondary-fg);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: var(--danger);
}

.btn :where(span, i, svg),
.link-button :where(span, i, svg) {
    color: inherit !important;
}

.btn-primary :where(span, i, svg),
.filters button[type="submit"].btn-secondary :where(span, i, svg),
.filter-line button[type="submit"].btn-secondary :where(span, i, svg),
.compact-filters button[type="submit"].btn-secondary :where(span, i, svg),
button.target-show-button :where(span, i, svg),
.bulk-actions button[type="submit"].btn-secondary :where(span, i, svg),
.table-bulk-actions-inline button[type="submit"].btn-secondary :where(span, i, svg) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

.btn svg:not([fill]),
.btn svg[fill="currentColor"],
.link-button svg:not([fill]),
.link-button svg[fill="currentColor"] {
    fill: currentColor;
}

.btn svg [fill="currentColor"],
.link-button svg [fill="currentColor"] {
    fill: currentColor;
}

.btn svg [stroke="currentColor"],
.link-button svg [stroke="currentColor"] {
    stroke: currentColor;
}

.btn:focus-visible,
.link-button:focus-visible {
    outline: 2px solid var(--button-outline-fg);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--button-focus-ring);
}

.btn.is-loading,
.btn[aria-busy="true"] {
    cursor: wait;
    opacity: .88;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"],
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[aria-disabled="true"],
.filters button[type="submit"].btn-secondary:disabled,
.filter-line button[type="submit"].btn-secondary:disabled,
.compact-filters button[type="submit"].btn-secondary:disabled,
button.target-show-button:disabled,
.bulk-actions button[type="submit"].btn-secondary:disabled,
.table-bulk-actions-inline button[type="submit"].btn-secondary:disabled {
    --btn-bg: var(--button-disabled-bg);
    --btn-fg: var(--button-disabled-fg);
    --btn-border: var(--button-disabled-border);
    --btn-hover-bg: var(--button-disabled-bg);
    --btn-hover-fg: var(--button-disabled-fg);
    --btn-hover-border: var(--button-disabled-border);
    --btn-active-bg: var(--button-disabled-bg);
    --btn-active-fg: var(--button-disabled-fg);
    --btn-active-border: var(--button-disabled-border);
    background: var(--button-disabled-bg);
    border-color: var(--button-disabled-border);
    color: var(--button-disabled-fg) !important;
    -webkit-text-fill-color: var(--button-disabled-fg);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    transform: none;
}


.sales-order-lines-wrap {
    max-height: min(46vh, 420px);
}

.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sales-order-lines-table th,
.sales-order-lines-table td {
    min-width: 150px;
}

.sales-order-lines-table th:first-child,
.sales-order-lines-table td:first-child {
    min-width: 48px;
    width: 48px;
    text-align: center;
}

.sales-order-lines-table th:last-child,
.sales-order-lines-table td:last-child {
    min-width: 82px;
    width: 82px;
    text-align: center;
}

.sales-order-lines-table .form-control {
    min-width: 145px;
    width: 100%;
}

.sales-order-lines-table .line-field-error {
    display: block;
    margin-top: 4px;
    white-space: normal;
}

/* Sidebar module typography and logo spacing */
.sidebar,
.sidebar nav,
.sidebar nav a,
.sidebar nav .nav-submenu a {
    font-family: var(--app-font-family) !important;
}

.sidebar nav > a,
.sidebar nav .nav-submenu > a,
.sidebar nav a.active {
    font-family: var(--app-font-family) !important;
    font-size: var(--font-size-sidebar) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.25 !important;
}

.sidebar nav > a .nav-icon,
.sidebar nav .nav-submenu > a .nav-icon {
    font-weight: 400 !important;
}

/* Sidebar pin and collapse */
:root {
    --sidebar-collapsed-width: 42px;
}

html.sidebar-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
}

html.sidebar-collapsed .app-shell {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.app-shell {
    transition: grid-template-columns .18s ease;
}

.sidebar {
    overflow: hidden;
    position: sticky;
    transition: padding .18s ease;
}

.sidebar .brand {
    padding-top: 0;
    padding-bottom: 6px;
}

.sidebar .brand img {
    width: 180px;
    max-height: 112px;
}

.sidebar nav {
    margin-top: 2px;
}

.sidebar-control-group {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-control-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sidebar-control-button:hover {
    background: var(--surface-soft);
    color: var(--text);
    border-color: var(--focus-border);
    transform: translateY(-1px);
}

.sidebar-control-button:focus-visible {
    outline: none;
    border-color: #0b5ed7;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, .2);
}

.sidebar-control-button:active {
    transform: translateY(0) scale(.96);
}

.sidebar-control-button:disabled {
    cursor: wait;
    opacity: .58;
    transform: none;
}

.sidebar-refresh-toggle {
    color: #0b5ed7;
}

.sidebar-refresh-toggle:hover {
    border-color: #0b5ed7;
    background: #e7f1ff;
    color: #0a58ca;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, .12);
}

html[data-theme="dark"] .sidebar-refresh-toggle {
    color: #60a5fa;
}

html[data-theme="dark"] .sidebar-refresh-toggle:hover {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, .14);
    color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16);
}

.sidebar-refresh-icon,
.sidebar-refresh-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.sidebar-refresh-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-refresh-toggle.is-refreshing .sidebar-refresh-icon {
    animation: sidebar-refresh-spin .75s linear infinite;
}

@keyframes sidebar-refresh-spin {
    to { transform: rotate(360deg); }
}

.sidebar-pin-icon {
    width: 17px;
    height: 14px;
    position: relative;
    display: block;
    border: 1.5px solid currentColor;
    border-radius: 4px;
}

.sidebar-pin-icon::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 5px;
    width: 1.5px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}

.sidebar-pin-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 1.5px;
    inset-block-start: 4px;
    inset-inline-end: 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor;
    opacity: .7;
}

html.sidebar-collapsed .sidebar {
    padding: 7px 4px;
    align-items: center;
}

html.sidebar-collapsed .sidebar-control-group {
    position: static;
    margin: 0 auto;
    flex-direction: column;
    gap: 6px;
}

html.sidebar-collapsed .brand,
html.sidebar-collapsed .sidebar nav,
html.sidebar-collapsed .nav-submenu {
    display: none !important;
}

@media (max-width: 980px) {
    .sidebar .brand img {
        width: 124px;
        max-height: 82px;
    }

    html.sidebar-collapsed .app-shell {
        grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .sidebar-control-group,
    html.sidebar-collapsed .sidebar-control-group {
        position: static;
        flex: 0 0 auto;
        flex-direction: row;
        order: -1;
        margin: 0;
    }

    html.sidebar-collapsed .sidebar {
        width: 100%;
        padding: 9px 12px;
        align-items: center;
    }

    html.sidebar-collapsed .sidebar .brand,
    html.sidebar-collapsed .sidebar nav,
    html.sidebar-collapsed .sidebar .nav-submenu,
    html.sidebar-collapsed .sidebar .sidebar-footer {
        display: none !important;
    }
}

/* Global form validation errors */
:where(.field small.error, .field span.error, small.error, span.error, .error, .errorlist, .form-error, .invalid-feedback) {
    color: var(--danger) !important;
    font-size: var(--font-size-help) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.35 !important;
}

.content form small.error,
.content form span.error,
.content form .errorlist,
.content form .invalid-feedback,
.content .form-error {
    display: none !important;
}

.messages .alert-form-error {
    display: flex !important;
}

.form-error,
.errorlist {
    background: var(--danger-bg) !important;
    border: 1px solid var(--danger-border) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
}

.errorlist {
    margin: 4px 0 0 !important;
    padding-inline-start: 18px !important;
}

.field:has(.error) .form-control,
.field:has(.errorlist) .form-control,
.field:has(.invalid-feedback) .form-control,
.field:has(.error) input,
.field:has(.error) select,
.field:has(.error) textarea {
    border-color: var(--danger-border) !important;
}

.field:has(.error) .form-control:focus,
.field:has(.errorlist) .form-control:focus,
.field:has(.invalid-feedback) .form-control:focus,
.field:has(.error) input:focus,
.field:has(.error) select:focus,
.field:has(.error) textarea:focus {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-ring) !important;
}

/* Final global typography override. */
.sidebar nav > a,
.sidebar nav .nav-submenu > a,
.sidebar nav a.active {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: .28px currentColor;
}

th,
.table-wrap th,
.compact-data-table th,
.table-filter-label,
.sortable-header {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: .28px currentColor;
}

.stat-card span {
    color: var(--text-soft) !important;
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: .28px currentColor;
}

.topbar-page-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: min(72vw, 920px);
    white-space: nowrap;
    font-family: Tahoma, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.25;
    -webkit-text-stroke: .3px currentColor;
}

/* Sales and logistics target workflow. */
.target-summary-grid,
.target-calculation-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-block: 12px;
}

.target-calculation-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
}

.summary-card span {
    color: var(--muted);
    font-size: .85rem;
}

.summary-card strong {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.notification-list {
    display: grid;
    gap: 8px;
}

.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.notification-item.unread {
    border-inline-start: 4px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.notification-item p {
    margin: 5px 0;
}

.topbar-notification-center {
    position: relative;
}

.topbar-notification-center > summary {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.topbar-notification-center > summary::-webkit-details-marker {
    display: none;
}

.topbar-notification-center[open] > summary,
.topbar-notification-center > summary:hover {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.topbar-notification-badge {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -8px;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border: 2px solid var(--topbar-bg);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: var(--on-danger);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
}

.topbar-notification-dropdown {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 80;
    width: min(420px, calc(100vw - 28px));
    max-height: min(620px, calc(100vh - 80px));
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.topbar-notification-header,
.topbar-notification-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
}

.topbar-notification-header {
    border-bottom: 1px solid var(--border);
}

.topbar-notification-actions {
    border-top: 1px solid var(--border);
}

.topbar-notification-items {
    max-height: 450px;
    overflow-y: auto;
}

.topbar-notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
}

.topbar-notification-item:last-child {
    border-bottom: 0;
}

.topbar-notification-item strong,
.topbar-notification-item p {
    display: block;
    margin: 3px 0 0;
}

.topbar-notification-item p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.notification-kind {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

@media screen and (max-width: 720px) {
    .topbar-notification-center {
        position: static;
    }

    .topbar-notification-dropdown {
        inset-inline: 14px;
        inset-block-start: 54px;
        width: auto;
        position: fixed;
    }
}

@media screen and (max-width: 900px) {
    .target-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 520px) {
    .target-summary-grid,
    .target-calculation-preview {
        grid-template-columns: 1fr;
    }

    .notification-item {
        align-items: stretch;
        flex-direction: column;
    }
}

.topbar-title-source {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.topbar-title-segment {
    display: inline-block;
    max-width: 290px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-title-separator {
    flex: 0 0 auto;
    margin-inline: 2px;
    color: var(--primary);
    font-size: .8em;
    font-weight: 700;
    -webkit-text-stroke: 0;
}

.topbar-page-title .module-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex: 0 0 20px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1;
    -webkit-text-stroke: 0;
}

.target-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.target-dashboard-heading h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.target-dashboard-heading p {
    margin: 5px 0 0;
    color: var(--muted);
}

.target-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
}

.target-comparison-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.target-comparison-card.achieved {
    border-color: var(--success-border);
}

.target-comparison-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.target-comparison-card h2 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 900;
}

.target-comparison-card header span {
    color: var(--muted);
    font-size: 12px;
}

.target-comparison-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
}

.target-comparison-values > div {
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.target-comparison-values span,
.target-comparison-values strong {
    display: block;
}

.target-comparison-values span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
}

.target-comparison-values strong {
    font-size: 17px;
}

.target-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-soft);
}

.target-metrics-table-wrap {
    margin: 14px 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.target-metrics-table {
    min-width: 520px;
}

.target-metrics-table th,
.target-metrics-table td {
    padding: 8px 10px;
    text-align: center;
}

.target-metrics-table td:first-child,
.target-metrics-table th:first-child {
    text-align: start;
    font-weight: 900;
}

.target-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.target-comparison-card.achieved .target-progress span {
    background: var(--success);
}

.target-notes {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.target-summary-table-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.target-summary-table {
    min-width: 1180px;
}

.target-summary-table th,
.target-summary-table td {
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

.target-summary-table th {
    white-space: nowrap;
}

.target-summary-row.achieved td:first-child {
    border-inline-start: 4px solid var(--success);
}

.target-project-cell {
    min-width: 220px;
    text-align: start !important;
}

.target-project-cell strong,
.target-summary-table td > small {
    display: block;
}

.target-summary-table small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.target-metric-cell {
    min-width: 185px;
    background: var(--surface-soft);
}

.target-metric-cell span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
    font-size: 12px;
}

.target-metric-cell span b {
    color: var(--muted);
}

.target-metric-cell > strong,
.target-overall-cell > strong {
    display: block;
    margin-top: 5px;
    font-size: 16px;
}

.target-overall-cell {
    min-width: 130px;
}

.target-not-applicable {
    color: var(--muted);
    font-weight: 800;
    background: var(--surface-soft);
}

.target-overall-cell .target-progress {
    margin-top: 8px;
}

.empty-target-dashboard {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 34px;
}

@media (max-width: 720px) {
    .target-dashboard-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .target-comparison-grid {
        grid-template-columns: 1fr;
    }

    .target-comparison-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sidebar .nav-icon {
    width: 20px;
    flex: 0 0 20px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
    font-size: 15px !important;
    line-height: 1;
}

.sidebar .nav-icon,
th input,
th select,
th button,
th .table-column-drag-handle,
th .table-column-resize-handle,
th .table-filter-icon {
    -webkit-text-stroke: 0;
}

/* Global compact table headers and unified controls. */
@media screen {
    .table-wrap table {
        width: 100%;
        min-width: max-content;
    }

    .table-wrap thead th,
    .compact-data-table thead th {
        height: 28px;
        min-height: 28px;
        padding: 4px 6px !important;
        line-height: 1.2;
    }

    .table-filter-header,
    .compact-data-table .table-filter-header {
        justify-content: flex-start;
        gap: 2px;
    }

    .table-filter-label {
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
        text-align: start;
        cursor: pointer;
    }

    .table-filter-button,
    .compact-data-table .table-filter-button {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        border-radius: 4px;
    }

    .table-filter-button::before,
    .compact-data-table .table-filter-button::before {
        width: 10px;
        height: 10px;
    }

    .table-column-drag-handle {
        width: 14px;
        height: 18px;
        flex: 0 0 14px;
    }

    .table-column-drag-handle::before {
        width: 8px;
        height: 12px;
        background-size: 4px 4px;
    }
}
/* Target dashboard 2026 */
.target-dashboard-shell,
.target-dashboard-shell table,
.target-detail-wrap table {
    font-family: "Calibri Light", Calibri, Arial, sans-serif;
    font-size: 9pt;
}
.target-dashboard-shell th,
.target-detail-wrap th,
.target-dashboard-shell h1,
.target-detail-wrap h1 {
    font-family: Calibri, Arial, sans-serif;
    font-size: 9pt;
    font-weight: 700;
}
.target-dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.target-dashboard-heading h1 { margin:0 0 3px; }
.target-dashboard-heading p { margin:0; color:var(--muted); }
.target-toolbar { display:flex; align-items:end; gap:6px; margin-bottom:6px; flex-wrap:nowrap; }
.dashboard-section-tabs { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.target-toolbar label { display:grid; gap:3px; flex:0 0 auto; }
.report-period-fields { display:contents; }
.report-period-picker-field { display:grid; gap:3px; flex:0 0 auto; }
.report-period-picker { position:relative; }
.report-period-trigger { width:205px; text-align:start; cursor:pointer; }
.report-period-trigger::after { content:"▾"; float:inline-end; color:var(--muted); }
.report-period-menu { position:fixed; z-index:1000; padding:8px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-lg); }
.report-period-menu [hidden] { display:none !important; }
.report-period-menu-header,.report-period-year-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.report-period-menu-header { min-height:30px; margin-bottom:6px; }
.report-period-menu-header strong { flex:1; text-align:center; font-size:12px; }
.report-period-icon-button,.report-period-year-nav button,.report-period-choice-grid button { border:1px solid var(--border); border-radius:7px; background:var(--surface-soft); color:var(--text); cursor:pointer; }
.report-period-icon-button { width:28px; height:28px; padding:0; font-size:18px; }
.report-period-year-nav { margin-bottom:6px; color:var(--text-soft); font-size:11px; }
.report-period-year-nav button { min-width:30px; min-height:26px; }
.report-period-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.report-period-quarter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.report-period-choice-grid button { min-height:34px; padding:5px 7px; font-size:11px; }
.report-period-choice-grid button:hover,.report-period-choice-grid button.is-selected { border-color:var(--primary); background:var(--sidebar-active); color:var(--primary); font-weight:700; }
.report-period-help { display:block; margin-top:7px; color:var(--text-soft); text-align:center; font-size:10px; }
.target-toolbar input[type="date"] { width:132px; }
.target-metric-field select { width:168px; }
.target-show-button { flex:0 0 auto; }
.report-toolbar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
.target-report-mode-title { flex:1 1 auto; min-width:0; align-self:center; text-align:center; color:var(--text-soft); font-weight:600; }
.report-toolbar .target-report-mode-title { flex-basis:auto; min-width:280px; }
.target-report-mode-title strong { color:var(--text); font-weight:700; }
.target-report-mode-title span { white-space:nowrap; }
.target-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:6px; margin-bottom:6px; overflow-x:auto; }
.target-kpi { min-width:0; min-height:62px; padding:6px 8px; place-items:center; text-align:center; align-content:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.target-kpi.kpi-achieved { background:var(--success-bg); border-color:var(--success-border); }
.target-kpi.kpi-warning { background:var(--warning-bg); border-color:var(--warning-border); }
.target-kpi.kpi-danger { background:var(--danger-bg); border-color:var(--danger-border); }
.target-kpi.kpi-neutral { background:var(--surface); border-color:var(--border); }
.target-kpi.kpi-achieved strong.accent { color:var(--success); }
.target-kpi.kpi-warning strong.accent { color:var(--warning); }
.target-kpi.kpi-danger strong.accent { color:var(--danger); }
.target-kpi.kpi-neutral strong.accent { color:var(--neutral); }
.target-kpi.kpi-achieved .target-progress span { background:var(--success); }
.target-kpi.kpi-warning .target-progress span { background:var(--warning); }
.target-kpi.kpi-danger .target-progress span { background:var(--danger); }
.target-kpi.kpi-neutral .target-progress span { background:var(--neutral); }
.target-kpi span,.target-kpi small { color:var(--muted); font-size:10px; line-height:1.35; }
.target-kpi strong { font-size:16px; font-weight:700; direction:ltr; font-variant-numeric:tabular-nums; }
.target-kpi strong.accent { color:var(--primary); }
.target-kpi small { display:block; }
.target-kpi .target-progress { width:100%; max-width:150px; }
.target-results-panel { overflow:hidden; }
.target-results-panel + .target-results-panel { margin-top:10px; }
.target-results-panel > .panel-header { min-height:32px; padding:6px 10px; }
.target-results-panel > .panel-header > div { display:grid; gap:2px; }
.target-results-panel > .panel-header small { color:var(--muted); font-size:10px; }
.target-results-panel > .table-column-toolbar,
.target-table-export-actions { display:flex; justify-content:flex-start; align-items:flex-start; gap:5px; margin:4px 8px; }
.target-results-panel > .table-column-toolbar { flex-wrap:wrap; margin-block-end:4px; overflow:visible; }
.target-results-panel .table-column-choose-wrap { flex-direction:column; align-items:flex-start; }
.target-results-panel .table-column-choose-menu {
    position:static;
    inset:auto;
    width:min(320px, calc(100vw - 70px));
    min-width:240px;
    max-height:180px;
    margin-top:4px;
}
.target-results-wrap { max-height:430px; overflow:auto; scrollbar-gutter:stable both-edges; }
.target-results-table th {
    text-align:center !important;
}
.target-results-table .table-filter-header { justify-content:center; }
.target-results-table .table-filter-label { flex:1; text-align:center; }
.target-results-table th,
.target-results-table td { height:auto; padding:4px 6px; line-height:1.15; vertical-align:middle; text-align:center !important; }
.target-results-table tbody tr { height:34px; }
.target-results-table thead th,.target-detail-wrap thead th { position:sticky; top:0; z-index:4; background:var(--table-head); white-space:nowrap; }
.target-results-table td small,.target-detail-wrap td small { display:block; color:var(--muted); margin-top:2px; }
.target-project-column,
.target-project-two-lines { width:210px; min-width:210px; max-width:210px; white-space:normal; }
.target-project-two-lines strong,.target-project-two-lines span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.15; white-space:nowrap; }
.target-project-two-lines strong { text-align:center; }
.target-project-two-lines.table-column-wrap strong { white-space:normal; overflow-wrap:anywhere; }
.target-project-two-lines span { margin-top:1px; color:var(--muted); font-size:9px; direction:ltr; text-align:center; }

.target-progress { height:6px; min-width:85px; overflow:hidden; border-radius:20px; background:var(--surface-hover); }
.target-progress span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.target-status-row.warning .target-progress span { background:var(--warning); }
.target-status-row.danger .target-progress span { background:var(--danger); }
.target-status-row.neutral .target-progress span { background:var(--neutral); }
.target-status-badge { display:inline-block; border-radius:5px; padding:3px 7px; white-space:nowrap; }
.target-status-badge.achieved { background:var(--success); color:var(--on-success); }
.target-status-badge.warning { background:var(--warning); color:var(--on-warning); }
.target-status-badge.danger { background:var(--danger); color:var(--on-danger); }
.target-status-badge.neutral { background:var(--neutral); color:var(--on-neutral); }
.target-achievement-cell strong { display:block; margin-bottom:4px; }
.target-rule-summary { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; margin-bottom:8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.target-detail-wrap { max-height:620px; overflow:auto; scrollbar-gutter:stable both-edges; }
.target-detail-wrap table { min-width:1900px; }
.target-source-badge { display:inline-block; border-radius:4px; padding:2px 5px; white-space:nowrap; }
.target-source-badge.auto { background:var(--success-bg); color:var(--success); }
.target-source-badge.manual { background:var(--warning-bg); color:var(--warning); }
.manual-source-row { background:var(--warning-bg); }
.target-adjustment-panel { margin-top:10px; padding:10px; }
@media (max-width:900px) {
    .target-toolbar:not(.report-toolbar) { flex-wrap:wrap; }
    .report-toolbar { flex-wrap:nowrap; }
    .target-toolbar:not(.report-toolbar) .target-report-mode-title { flex-basis:100%; }
}@media (max-width:1100px) {
    .target-kpi-grid { grid-template-columns:repeat(3,1fr); }
}
/* Automatic wrapping for every table column and cell. */
@media screen {
    .table-wrap table {
        white-space: normal;
    }

    .table-wrap th,
    .table-wrap td,
    .compact-data-table th,
    .compact-data-table td {
        height: auto;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .table-wrap .table-filter-label,
    .compact-data-table .table-filter-label {
        white-space: normal !important;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .table-column-toolbar .table-bulk-actions-inline {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        margin-inline-start: auto;
    }

    .table-column-toolbar .table-bulk-actions-inline select {
        width: auto;
        min-width: 180px;
        max-width: 230px;
    }
}

/* Reorganized report centers. */
.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}
.report-hub-card {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
.report-hub-card span { flex: 1; font-weight: 700; }
.cashbox-report-filters { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 6px; }
.cashbox-report-kpis,
.garage-license-kpis { grid-template-columns: repeat(5, minmax(125px, 1fr)); }
.cashbox-report-table { min-width: 1650px; }
.garage-license-report-table { min-width: 1500px; }
.garage-license-dashboard-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
}
.garage-license-dashboard-toolbar > * { flex: 0 0 auto; }
.garage-license-type-filters {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}
.garage-license-type-button {
    --btn-bg: var(--surface);
    --btn-fg: var(--button-outline-fg);
    --btn-border: var(--button-primary-bg);
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--button-primary-bg);
    border-radius: 8px;
    background: var(--surface);
    color: var(--button-primary-bg);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.garage-license-type-button:hover,
.garage-license-type-button:focus-visible,
.garage-license-type-button.active {
    --btn-bg: var(--button-primary-bg);
    --btn-fg: #fff;
    --btn-border: var(--button-primary-bg);
}
@media (max-width: 900px) {
    .cashbox-report-filters { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
/* Unified reports navigation, watermark, and print identity. */
.content { position: relative; isolation: isolate; }
.content::before {
    content: "";
    position: fixed;
    inset: 52px 0 0 var(--sidebar-width);
    background: url("../img/alsamer-hub-logo-transparent.png") center center / min(34vw, 430px) auto no-repeat;
    opacity: .025;
    pointer-events: none;
    z-index: 0;
}
html[data-theme="dark"] .content::before { opacity: .014; }
[dir="rtl"] .content::before { inset: 52px var(--sidebar-width) 0 0; }
.content > * { position: relative; z-index: 1; }
.report-navigation { display: grid; gap: 2px; }
.report-nav-section, .report-nav-subgroup { min-width: 0; }
.report-nav-toggle, .report-nav-subtoggle {
    width: 100%; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; text-align: start; list-style: none;
}
.report-nav-toggle::marker, .report-nav-subtoggle::marker { content: ""; }
.report-nav-toggle::-webkit-details-marker, .report-nav-subtoggle::-webkit-details-marker { display: none !important; }
.sidebar nav .report-nav-toggle {
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    gap: 8px;
    color: var(--text-soft);
    font-family: var(--app-font-family);
    font-size: var(--font-size-sidebar);
    font-weight: var(--font-weight-semibold);
    line-height: 1.45;
    transition: background .15s ease, color .15s ease;
}
.sidebar nav .report-nav-toggle > span:not(.nav-icon) {
    font-family: var(--app-font-family) !important;
    font-size: var(--font-size-sidebar) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    -webkit-text-stroke: .2px currentColor;
}
.sidebar nav .report-nav-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.sidebar nav .report-nav-toggle[aria-expanded="true"] {
    background: var(--sidebar-active);
    color: var(--primary);
    font-weight: 650;
}
.sidebar nav .report-nav-toggle:hover .nav-icon,
.sidebar nav .report-nav-toggle[aria-expanded="true"] .nav-icon {
    color: var(--active-icon);
}
.sidebar nav .report-nav-toggle[aria-expanded="true"] .nav-icon {
    background: var(--active-icon-bg);
    border-radius: 7px;
}
.report-nav-toggle > span:nth-child(2) { flex: 1; }
.report-nav-panel, .report-nav-subpanel { display: none; }
.report-nav-section[open] > .report-nav-panel, .report-nav-subgroup[open] > .report-nav-subpanel { display: grid; }
.report-nav-panel { margin-inline-start: 9px; border-inline-start: 1px solid var(--border); padding-inline-start: 4px; gap: 1px; }
.report-nav-subtoggle { min-height: 25px; padding: 3px 7px; gap: 6px; color: var(--text-soft); font: inherit; font-weight: 700; font-size: 9px; }
.report-nav-subtoggle > span:first-child { transition: transform .18s ease; }
[dir="rtl"] .report-nav-subtoggle > span:first-child { transform: rotate(180deg); }
.report-nav-subgroup[open] > .report-nav-subtoggle > span:first-child { transform: rotate(90deg); }
.report-nav-subpanel { margin-inline-start: 8px; gap: 1px; }
.report-navigation .compact-link { font-size: 9px; line-height: 1.2; min-height: 24px; padding: 3px 6px; }
.report-navigation .compact-link.active { background: var(--sidebar-active); font-weight: 700; color: var(--primary); }
.report-global-filters { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 5px; align-items: end; }
.report-global-filters label { display: grid; gap: 2px; font-size: 9px; font-weight: 700; }
.report-summary-cards { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.sales-report-summary-cards { grid-template-columns: repeat(6, minmax(110px, 1fr)); }
.report-fixed-scroll { max-height: calc(100vh - 320px); overflow: auto !important; scrollbar-gutter: stable both-edges; }
.universal-report-table { min-width: 1450px; }
.universal-report-table thead th { position: sticky; top: 0; z-index: 4; }
.universal-report-table tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--surface-soft); font-weight: 700; }
.print-report-header, .print-page-footer { display: none; }
.phone-number, [data-phone-number], a[href^="tel:"] {
    direction: ltr !important;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
input.phone-field, input[type="tel"], textarea.phone-field {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left !important;
    font-variant-numeric: tabular-nums;
}
.upload-limit-error { max-width: 620px; margin: 28px auto; text-align: center; }
.upload-limit-error ul { direction: ltr; text-align: left; }
@media (max-width: 900px) {
    .report-global-filters { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
    .report-summary-cards { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}
@media print {
    @page { size: auto; margin: 27mm 8mm 15mm; }
    body {
        font-family: "ValueMax Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
    }
    body::before {
        content: ""; position: fixed; inset: 20% 18%;
        background: url("../img/alsamer-hub-logo-transparent.png") center / contain no-repeat;
        opacity: .055; pointer-events: none; z-index: -1;
    }
    .sidebar, .topbar, .no-print, .messages { display: none !important; }
    .app-shell, main, .content { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .content::before { display: none; }
    .content > * { z-index: auto; }
    .print-report-header {
        display: flex !important; position: fixed; top: -23mm; inset-inline: 0; height: 20mm;
        align-items: center; gap: 8mm; border-bottom: .3mm solid #cbd5e1; background: white;
    }
    .print-report-header img { width: 28mm; max-height: 17mm; object-fit: contain; }
    .print-report-header > div { display: grid; flex: 1; text-align: center; font-size: 8pt; line-height: 1.3; }
    .print-report-header strong { font-size: 11pt; }
    .print-page-footer { display: block !important; position: fixed; bottom: -10mm; inset-inline: 0; text-align: center; font-size: 7pt; color: #64748b; }
    .print-page-footer::after { content: "صفحة " counter(page) " من " counter(pages); }
    .panel, .table-wrap, .list-scroll, .report-fixed-scroll { overflow: visible !important; max-height: none !important; box-shadow: none !important; border: 0 !important; }
    table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr, td, th { break-inside: avoid !important; page-break-inside: avoid !important; }
    thead th, tfoot td { position: static !important; }
    .compact-data-table th, .compact-data-table td { font-size: 7pt !important; padding: 2mm 1mm !important; white-space: normal !important; }
    a { color: #000 !important; text-decoration: none !important; }
}
.driver-accounts-table {
    min-width: 2200px;
}

.driver-accounts-table th,
.driver-accounts-table td {
    min-height: 26px;
    padding: 2px 5px;
    font-size: 10.5px;
    line-height: 1.15;
}

.driver-accounts-table th {
    font-size: 10px;
}

.driver-accounts-table .form-control,
.driver-accounts-table input,
.driver-accounts-table select {
    min-height: 24px;
    height: 24px;
    padding: 1px 4px;
    border-radius: 5px;
    font-size: 10px;
}

.driver-accounts-table .btn-small {
    min-height: 24px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
}

.driver-accounts-table .badge {
    min-height: 17px;
    padding: 1px 5px;
    font-size: 9.5px;
}

.driver-accounts-table .driver-account-amount {
    min-width: 88px;
    width: 88px;
}

.driver-accounts-table input[name$="-notes"] {
    min-width: 170px;
}

/* Extra-dense operational tables: keep each record on one short visual row. */
.gps-followup-table tbody tr,
.driver-accounts-table tbody tr {
    height: 22px !important;
}

.gps-followup-table th,
.gps-followup-table td,
.driver-accounts-table th,
.driver-accounts-table td {
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 3px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.gps-followup-table .inline-input,
.gps-followup-table .btn-small,
.driver-accounts-table .form-control,
.driver-accounts-table input,
.driver-accounts-table select,
.driver-accounts-table .btn-small {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 3px !important;
    border-radius: 4px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
}

.gps-followup-table .badge,
.driver-accounts-table .badge {
    min-height: 15px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.gps-followup-table .wrap-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.gps-followup-table .action-note {
    display: inline;
    margin: 0 2px;
    white-space: nowrap;
}

/* Policy review workspace */
.policy-review-icon {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-inline-start: 5px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text);
    text-decoration: none;
    vertical-align: middle;
}

.policy-review-icon:hover {
    border-color: var(--border-strong);
    background: var(--active-icon-bg);
}

.policy-review-workspace {
    min-width: 0;
    height: calc(100dvh - 78px);
    margin: -6px -8px -24px;
    width: calc(100% + 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-heading.policy-review-heading {
    flex: 0 0 auto;
    min-height: 54px;
    margin: 0 0 8px;
    padding: 0 4px;
    gap: 10px;
}

.policy-review-heading h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    font-size: 18px;
}

.policy-review-heading h1 strong {
    direction: ltr;
}

.policy-review-status-line,
.policy-review-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.policy-review-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.policy-review-split {
    direction: ltr;
    display: grid !important;
    grid-template-areas: "preview data";
    grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.policy-preview-panel,
.policy-data-panel {
    direction: rtl;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.policy-preview-panel {
    grid-area: preview;
    display: flex;
    flex-direction: column;
}

.policy-data-panel {
    grid-area: data;
    overflow-y: auto;
    padding: 0 12px 12px;
    scrollbar-gutter: stable;
}

.policy-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.policy-data-panel > .policy-panel-heading {
    margin: 0 -12px 8px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.policy-panel-heading h2 {
    margin: 0 0 2px;
    font-size: 14px;
}

.policy-panel-heading small {
    color: var(--text-soft);
}

.policy-preview-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.policy-preview-stage {
    direction: ltr;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 8px;
    background:
        linear-gradient(45deg, var(--surface-soft) 25%, transparent 25%),
        linear-gradient(-45deg, var(--surface-soft) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--surface-soft) 75%),
        linear-gradient(-45deg, transparent 75%, var(--surface-soft) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.policy-preview-stage:fullscreen {
    background-color: var(--bg);
}

.policy-image-preview {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center;
    transition: transform .16s ease;
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
}

.policy-pdf-preview {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--surface);
}

.policy-preview-empty {
    direction: rtl;
    max-width: 430px;
    padding: 28px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    text-align: center;
}

.policy-preview-empty > span {
    display: block;
    margin-bottom: 8px;
    font-size: 42px;
}

.policy-preview-empty h3,
.policy-preview-empty p {
    margin: 5px 0;
}

.policy-order-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 7px;
}

.policy-order-summary > div {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
}

.policy-order-summary span,
.policy-order-summary strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.policy-order-summary span {
    margin-bottom: 2px;
    color: var(--text-soft);
    font-size: 10px;
}

.policy-order-summary strong {
    font-size: 12px;
}

.policy-data-panel .form-section {
    margin-top: 7px;
}

.policy-data-panel .form-section h3 {
    margin: 0 0 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.policy-data-panel .form-grid.form-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
}

.policy-data-panel .field {
    min-width: 0;
}

.policy-data-panel .form-control {
    min-height: 30px;
    padding-block: 4px;
}

.policy-data-panel textarea.form-control {
    min-height: 48px;
}

.policy-review-actions {
    bottom: -12px;
    margin: 8px -12px -12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

@media (max-width: 1180px) {
    .policy-review-split {
        grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
    }

    .policy-order-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .policy-review-workspace {
        overflow-x: auto;
    }

    .policy-review-split {
        grid-template-columns: minmax(420px, 3fr) minmax(340px, 2fr);
        min-width: 770px;
    }

    .policy-preview-panel {
        min-height: 0;
    }

    .policy-preview-stage {
        min-height: 0;
    }

    .policy-data-panel {
        overflow-y: auto;
    }
}

@media (max-width: 620px) {
    .policy-data-panel .form-grid.form-grid-two,
    .policy-order-summary {
        grid-template-columns: 1fr;
    }

    .policy-preview-tools {
        justify-content: flex-start;
    }
}

/* Compact user-access management screen. */
.user-access-top-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

[dir="rtl"] .user-access-top-actions {
    justify-content: flex-start;
}

.user-access-top-actions .btn {
    min-height: 34px;
    padding: 5px 10px;
    gap: 5px;
}

.user-access-panel .panel-header {
    padding: 8px 10px;
    flex-wrap: wrap;
}

.user-access-panel .panel-header > div:first-child {
    min-width: 180px;
}

.user-access-panel .table-column-toolbar {
    width: auto;
    margin: 0;
    margin-inline-start: auto;
    align-items: center;
}

.user-access-table tbody tr {
    height: 32px;
}

.user-access-table th,
.user-access-table td {
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
    line-height: 1.15 !important;
}

.user-access-table .badge {
    min-height: 18px;
    padding: 1px 5px;
}

.user-access-table td small {
    display: inline;
    margin-inline-start: 4px;
}

/* Approval queues use the same compact, filterable table pattern as the rest of the app. */
@media screen {
    .approval-bulk-toolbar {
        margin: 0;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-soft);
        flex-wrap: wrap;
    }

    .approval-bulk-toolbar select {
        width: min(260px, 100%);
        max-width: 260px;
    }

    .approval-bulk-toolbar .approval-bulk-notes {
        flex: 1 1 280px;
        width: auto;
        min-width: 220px;
        min-height: 40px;
        resize: vertical;
    }

    .approval-bulk-toolbar .approval-bulk-notes[hidden] {
        display: none !important;
    }

    .approval-queue-table[data-approval-bulk-table] th:first-child,
    .approval-queue-table[data-approval-bulk-table] td:first-child {
        width: 38px;
        min-width: 38px;
        text-align: center;
    }

    .approval-queue-table tbody tr {
        height: 34px;
    }

    .approval-queue-table tbody td {
        height: 34px !important;
        min-height: 0 !important;
        padding: 3px 6px !important;
        line-height: 1.15;
        vertical-align: middle;
    }

    .approval-queue-table td > strong,
    .approval-queue-table td > small {
        display: block;
        line-height: 1.15;
    }

    .approval-note-cell {
        min-width: 210px;
        max-width: 320px;
    }

    .approval-note-input.form-control {
        width: 100%;
        min-width: 190px;
        height: 30px;
        min-height: 30px !important;
        padding: 4px 6px;
        line-height: 1.15;
        resize: vertical;
    }

    .approval-note-history {
        margin: 0 0 3px;
        white-space: normal;
    }

    .approval-actions-cell {
        min-width: 132px;
    }

    .approval-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .approval-actions .btn-small {
        min-height: 28px;
        padding: 3px 7px;
        white-space: nowrap;
    }
}

@media screen and (max-width: 720px) {
    .approval-bulk-toolbar select,
    .approval-bulk-toolbar .approval-bulk-notes,
    .approval-bulk-toolbar .btn {
        width: 100%;
        max-width: none;
    }

    .approval-bulk-toolbar .action-note {
        width: 100%;
        min-height: 24px;
    }
}

.user-access-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
}

.user-access-row-actions form {
    margin: 0;
}

.user-access-row-actions .btn-small {
    min-height: 24px !important;
    padding: 2px 7px !important;
    border-radius: 6px;
    font-size: 11px !important;
}

@media (max-width: 720px) {
    .user-access-top-actions,
    [dir="rtl"] .user-access-top-actions {
        justify-content: stretch;
    }

    .user-access-top-actions .btn {
        flex: 1 1 160px;
    }
}

/* Keep all user identity fields visible in one compact desktop row. */
.user-access-form {
    padding: 14px 16px;
}

.user-details-title {
    margin: 0 0 8px;
    font-size: 15px;
}

.user-details-grid {
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 1fr)
        minmax(0, 1.2fr)
        minmax(0, 1.2fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(76px, .55fr);
    gap: 7px;
    align-items: start;
}

.user-details-grid .user-details-field {
    min-width: 0;
    gap: 4px;
}

.user-details-grid .user-details-field > label {
    min-height: 17px;
    font-size: 11px;
    line-height: 1.25;
}

.user-details-grid .form-control,
.user-details-grid input:not([type="checkbox"]),
.user-details-grid select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
}

.user-details-grid .help-text {
    font-size: 10px;
    line-height: 1.2;
}

.user-details-active {
    justify-content: flex-start;
    padding-top: 22px;
}

.user-details-active .inline-checkbox-field {
    display: flex;
    align-items: center;
    min-height: 34px;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    white-space: nowrap;
}

.user-details-grid + h2 {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .user-details-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .user-details-active {
        padding-top: 22px;
    }
}

@media (max-width: 720px) {
    .user-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Keep the authenticated sidebar fixed while the page and sidebar scroll independently. */
@media screen and (min-width: 721px) {
    html[dir="rtl"] body.authenticated-layout {
        direction: ltr;
    }

    body.authenticated-layout .app-shell {
        direction: inherit;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 100vh;
        padding-inline-start: var(--sidebar-width);
        transition: padding-inline-start .18s ease;
    }

    html[dir="rtl"] body.authenticated-layout .app-shell {
        direction: rtl;
    }

    body.authenticated-layout .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--sidebar-width);
        height: 100dvh;
        z-index: 20;
    }

    body.authenticated-layout .sidebar nav {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    body.authenticated-layout main {
        min-width: 0;
        min-height: 100vh;
    }

    html.sidebar-collapsed body.authenticated-layout .app-shell {
        grid-template-columns: minmax(0, 1fr);
        padding-inline-start: var(--sidebar-collapsed-width);
    }
}

@media screen and (min-width: 981px) {
    form[data-fleet-form] .form-grid.form-grid-five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Keep page position and table record totals together in one compact bar. */
.pagination {
    flex-wrap: wrap;
}

.pagination-pages,
.pagination-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination-pages[hidden] {
    display: none !important;
}

.pagination-summary {
    gap: 14px;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--border);
    white-space: nowrap;
}

.pagination-summary strong {
    color: var(--text);
    font-weight: var(--font-weight-bold) !important;
    font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 720px) {
    .pagination-summary {
        width: 100%;
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}