:root {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    --bg-app: #f3f5f8;
    --bg-surface: #ffffff;
    --bg-subtle: #f7f8fa;
    --bg-hover: #edf2f7;
    --text-primary: #1d2735;
    --text-secondary: #667085;
    --text-muted: #8a94a4;
    --border: #dde2e9;
    --border-strong: #ccd3dd;
    --primary: #1f5ea8;
    --primary-hover: #174d8c;
    --primary-soft: #eaf2fb;
    --sidebar: #172333;
    --sidebar-border: #263548;
    --sidebar-text: #c9d2df;
    --sidebar-muted: #7f8da1;
    --sidebar-active: #26384e;
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-md: 0 8px 24px rgb(16 24 40 / 8%);
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 12px;
    color: var(--text-primary);
    background: var(--bg-app);
}

:root[data-theme="dark"] {
    --bg-app: #111821;
    --bg-surface: #18222e;
    --bg-subtle: #202c39;
    --bg-hover: #273544;
    --text-primary: #e8edf3;
    --text-secondary: #aeb8c6;
    --text-muted: #8491a2;
    --border: #303d4c;
    --border-strong: #3b4a5b;
    --primary: #6aa7e8;
    --primary-hover: #8bbcf0;
    --primary-soft: #203a56;
    --sidebar: #0d141d;
    --sidebar-border: #263240;
    --sidebar-text: #c9d2df;
    --sidebar-muted: #77869a;
    --sidebar-active: #203448;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-md: 0 12px 30px rgb(0 0 0 / 24%);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--text-primary);
    background: var(--bg-app);
    font-size: 14px;
    transition: color .18s ease, background-color .18s ease;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

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

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px 12px 14px;
    overflow-y: auto;
    color: var(--sidebar-text);
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px 14px;
    border-bottom: 1px solid var(--sidebar-border);
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, #2d76c6, #164b86);
    box-shadow: 0 5px 14px rgb(0 0 0 / 20%);
}

.brand-copy strong,
.brand-copy small,
.sidebar-footer strong,
.sidebar-footer small {
    display: block;
}

.brand-copy strong {
    color: #fff;
    font-size: 14px;
    letter-spacing: .01em;
}

.brand-copy small {
    margin-top: 2px;
    color: var(--sidebar-muted);
    font-size: 11px;
}

.nav-menu {
    flex: 1;
    padding-top: 8px;
}

.nav-group + .nav-group {
    margin-top: 7px;
}

.nav-section {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 10px 5px;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nav-section i {
    font-size: 11px;
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 2px 0;
    padding: 8px 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 7px;
    transition: background-color .14s ease, color .14s ease;
}

.nav-menu a i {
    width: 18px;
    flex: 0 0 18px;
    color: #91a2b8;
    font-size: 15px;
    text-align: center;
}

.nav-menu a:hover {
    color: #fff;
    background: rgb(255 255 255 / 5%);
}

.nav-menu a.active {
    color: #fff;
    background: var(--sidebar-active);
    border-color: rgb(255 255 255 / 7%);
    box-shadow: inset 3px 0 #61a4e8;
}

.nav-menu a.active i {
    color: #7db4ec;
}

.menu-load-error {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 2px;
    padding: 10px;
    color: #f0c47d;
    background: rgb(193 122 19 / 10%);
    border: 1px solid rgb(193 122 19 / 24%);
    border-radius: 7px;
    font-size: 11px;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 9px 2px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer strong {
    color: #dbe3ed;
    font-size: 11px;
    font-weight: 600;
}

.sidebar-footer small {
    margin-top: 2px;
    color: var(--sidebar-muted);
    font-size: 10px;
}

.system-status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #35b679;
    box-shadow: 0 0 0 3px rgb(53 182 121 / 14%);
}

.system-status.no-access {
    background: #d85b5b;
    box-shadow: 0 0 0 3px rgb(216 91 91 / 14%);
}

.main-area {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

.workspace-context,
.top-actions,
.user-chip,
.title-row {
    display: flex;
    align-items: center;
}

.workspace-context strong,
.workspace-context span {
    display: block;
}

.workspace-context strong {
    font-size: 13px;
}

.workspace-context span {
    margin-top: 1px;
    color: var(--text-secondary);
    font-size: 11px;
}

.top-actions {
    gap: 6px;
}

.icon-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
}

.icon-button:hover {
    color: var(--primary);
    background: var(--bg-hover);
    border-color: var(--border);
}

.mobile-menu-button {
    display: none;
}

.user-chip {
    gap: 8px;
    height: 40px;
    margin-left: 3px;
    padding: 3px 8px 3px 4px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    cursor: pointer;
}

.user-avatar {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #315f91;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.user-details {
    min-width: 76px;
    text-align: left;
}

.user-details strong,
.user-details small {
    display: block;
}

.user-details strong {
    font-size: 12px;
}

.user-details small {
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 10px;
}

.user-chip > i {
    color: var(--text-muted);
    font-size: 10px;
}

.user-menu {
    position: relative;
}

.development-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 270px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow-lg);
}

.profile-menu-heading {
    padding: 11px 13px 9px;
    border-bottom: 1px solid var(--border);
}

.profile-menu-heading span,
.profile-menu-heading small,
.profile-option strong,
.profile-option small {
    display: block;
}

.profile-menu-heading span {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.profile-menu-heading small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.profile-option {
    width: 100%;
    display: grid;
    grid-template-columns: 29px 1fr 18px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.profile-option:last-child {
    border-bottom: 0;
}

.profile-option:hover {
    background: var(--bg-hover);
}

.profile-option-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 7px;
}

.profile-option strong {
    font-size: 11px;
}

.profile-option small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.profile-selected {
    color: var(--success);
}

.logout-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
}

.logout-form button {
    width: 160px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

.authentication-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgb(48 99 153 / 13%), transparent 35%),
        var(--bg-page);
}

.login-card {
    width: min(100%, 390px);
    padding: 26px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.login-brand strong,
.login-brand small {
    display: block;
}

.login-brand small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.login-heading {
    margin: 22px 0 18px;
}

.login-heading h1 {
    margin: 3px 0 4px;
    font-size: 22px;
}

.login-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-form > label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.login-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input);
}

.login-input i {
    color: var(--text-muted);
}

.login-input input {
    width: 100%;
    min-height: 39px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
}

.login-form .remember-option {
    display: flex;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.login-submit {
    justify-content: center;
    min-height: 40px;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 10px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
    border-radius: 7px;
    font-size: 11px;
}

.content-area {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 22px 24px 32px;
}

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

.title-row {
    flex-wrap: wrap;
    gap: 9px;
}

h1 {
    margin: 3px 0 4px;
    font-size: clamp(21px, 2.2vw, 26px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h2 {
    margin: 3px 0 0;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.page-heading p {
    font-size: 13px;
}

.eyebrow {
    color: var(--primary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.primary-button,
.secondary-button,
.toolbar button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}

.primary-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: 0 3px 8px rgb(31 94 168 / 16%);
}

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

.secondary-button,
.toolbar button {
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
}

.secondary-button:hover,
.toolbar button:hover {
    color: var(--primary);
    background: var(--bg-hover);
    border-color: var(--primary);
}

.read-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.metric-card,
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.metric-card {
    padding: 15px 16px;
}

.metric-card span,
.metric-card small {
    display: block;
    color: var(--text-secondary);
}

.metric-card span {
    font-size: 11px;
    font-weight: 600;
}

.metric-card strong {
    display: block;
    margin: 8px 0 3px;
    font-size: 25px;
    font-weight: 650;
}

.metric-card small {
    font-size: 10px;
}

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

.panel-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.step-list div {
    padding: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.step-list b {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 11px;
}

.step-list span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 7px;
    margin-bottom: 12px;
}

.search-field {
    position: relative;
}

.search-field > i {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.search-field input {
    padding-left: 34px;
}

.toolbar input,
.document-grid input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.toolbar input:focus,
.document-grid input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

input::placeholder {
    color: var(--text-muted);
}

.empty-state,
.access-denied {
    padding: 46px 24px;
    text-align: center;
}

.empty-state p,
.access-denied p {
    max-width: 560px;
    margin: 5px auto 0;
    font-size: 12px;
}

.empty-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto 11px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 10px;
    font-size: 18px;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

fieldset:disabled {
    opacity: .72;
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.document-grid label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
}

.document-grid input {
    display: block;
    margin-top: 5px;
}

.table-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 24px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.simulation-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    color: #8a5b16;
    background: #fff7e7;
    border: 1px solid #ecd6aa;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
}

:root[data-theme="dark"] .simulation-badge {
    color: #e8ba70;
    background: #3b2c17;
    border-color: #614a27;
}

.filter-panel {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 145px 145px 170px auto;
    gap: 9px;
    align-items: end;
}

.filter-grid label,
.form-grid label,
.reference-form label {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.filter-grid input,
.filter-grid select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.reference-form input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.filter-grid input:focus,
.filter-grid select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.reference-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.filter-grid .search-field input {
    padding-left: 34px;
}

.table-panel {
    padding: 0;
    overflow: hidden;
}

.table-panel > .panel-header {
    margin: 0;
    padding: 14px 16px 11px;
}

.panel-meta {
    align-self: center;
    color: var(--text-muted);
    font-size: 10px;
}

.data-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.data-table th {
    padding: 9px 11px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    padding: 10px 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--bg-hover) 65%, transparent);
}

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

.data-table td strong,
.data-table td small {
    display: block;
}

.data-table td small {
    max-width: 250px;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 9px;
}

.data-table.compact th,
.data-table.compact td {
    padding-block: 8px;
}

.numeric {
    text-align: right !important;
    white-space: nowrap;
}

.actions-column {
    width: 112px;
    text-align: right !important;
}

.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.table-action {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
}

.table-action:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.document-link {
    padding: 0;
    color: var(--primary);
    background: transparent;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}

.document-link:hover,
.inline-link:hover,
.document-summary a:hover,
.reference-context a:hover {
    text-decoration: underline;
}

.inline-link,
.document-summary a,
.reference-context a {
    color: var(--primary);
    font-weight: 650;
    text-decoration: none;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.status-success {
    color: #1e7452;
    background: #eaf7f1;
    border-color: #bce1d2;
}

.status-info {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 22%, transparent);
}

:root[data-theme="dark"] .status-success {
    color: #75d0aa;
    background: #17352b;
    border-color: #2c5a49;
}

.text-success {
    color: #20845b !important;
}

.text-muted {
    color: var(--text-muted);
}

.document-form {
    padding: 0;
    overflow: hidden;
}

.document-form > .panel-header {
    margin: 0;
    padding: 14px 16px 11px;
}

.form-actions,
.form-footer {
    display: flex;
    align-items: center;
    gap: 7px;
}

.document-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.document-summary > div {
    min-height: 58px;
    padding: 11px 16px;
    border-right: 1px solid var(--border);
}

.document-summary > div:last-child {
    border-right: 0;
}

.document-summary span,
.document-summary strong,
.document-summary a,
.reference-context span,
.reference-context strong,
.reference-context small {
    display: block;
}

.document-summary span,
.reference-context span {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.document-summary strong,
.document-summary a {
    font-size: 12px;
}

.document-form form {
    padding: 16px;
}

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

.form-grid textarea {
    min-height: 70px;
    resize: vertical;
}

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

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

.span-4 {
    grid-column: 1 / -1;
}

.form-footer {
    justify-content: flex-end;
    margin: 15px -16px -16px;
    padding: 11px 16px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
}

.validation-summary {
    margin: 0 0 12px;
    padding: 9px 12px;
    color: #a63838;
    background: #fff0f0;
    border: 1px solid #ebc2c2;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.validation-summary:empty {
    display: none;
}

:root[data-theme="dark"] .validation-summary {
    color: #f3a3a3;
    background: #3a2020;
    border-color: #6a3333;
}

.subsection-heading {
    padding: 12px 16px 8px;
    border-top: 1px solid var(--border);
}

.utility-layout {
    display: grid;
    grid-template-columns: minmax(310px, .8fr) minmax(420px, 1.2fr);
    gap: 12px;
}

.utility-layout > .panel {
    min-width: 0;
}

.utility-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-bottom: 10px;
}

.utility-search input,
.reference-form input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.utility-search .search-field input {
    padding-left: 34px;
}

.selection-list {
    max-height: 330px;
    display: grid;
    gap: 5px;
    overflow-y: auto;
}

.selection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
}

.selection-item:hover,
.selection-item.active {
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.selection-item strong,
.selection-item small {
    display: block;
}

.selection-item strong {
    font-size: 11px;
}

.selection-item small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

.selection-amount {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.compact-empty {
    min-height: 190px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    color: var(--text-muted);
    text-align: center;
}

.compact-empty > i {
    font-size: 25px;
}

.compact-empty p {
    max-width: 330px;
    font-size: 11px;
}

.reference-context {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.reference-context > div {
    min-height: 65px;
    padding: 11px;
    background: var(--bg-subtle);
}

.reference-context strong,
.reference-context a {
    font-size: 12px;
}

.reference-context small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 9px;
}

.reference-form {
    display: grid;
    gap: 10px;
}

.supported-operation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 10px;
    line-height: 1.45;
}

.supported-operation i {
    color: #20845b;
    font-size: 14px;
}

code {
    color: var(--text-secondary);
    font-size: 9px;
}

.permission-role-filter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.permission-role-filter label {
    min-width: 300px;
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.permission-role-filter select {
    min-height: 36px;
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.permission-help {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 10px;
}

.permission-matrix th:not(:first-child),
.permission-matrix td:not(:first-child) {
    width: 80px;
    text-align: center;
}

.permission-matrix td:first-child {
    min-width: 290px;
}

.permission-matrix input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
}

.permission-matrix input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.permission-section-row {
    background: var(--bg-subtle);
}

.permission-section-row td {
    border-top: 1px solid var(--border-strong);
}

.permission-matrix td:first-child > i {
    margin-right: 7px;
    color: var(--primary);
}

.permission-indent {
    display: inline-block;
    width: 15px;
}

.page-heading button:disabled,
.primary-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.toast-region {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    width: min(370px, calc(100vw - 28px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.app-toast {
    --toast-color: #2f6fad;
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    gap: 9px;
    min-height: 72px;
    padding: 12px 10px 11px 12px;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--toast-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toast-in .2s ease-out;
}

.toast-processing {
    --toast-color: #64748b;
}

.toast-success {
    --toast-color: #20845b;
}

.toast-warning {
    --toast-color: #c17a13;
}

.toast-error {
    --toast-color: #c44444;
}

.toast-symbol {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--toast-color);
    background: color-mix(in srgb, var(--toast-color) 11%, transparent);
    border-radius: 7px;
    font-size: 15px;
}

.toast-copy {
    min-width: 0;
}

.toast-copy strong {
    display: block;
    margin: 1px 0 3px;
    font-size: 12px;
}

.toast-copy p {
    font-size: 11px;
    line-height: 1.4;
}

.toast-close {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.toast-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.toast-timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--toast-color);
    transform-origin: left;
    animation: toast-timer var(--toast-duration) linear forwards;
}

.toast-spin {
    animation: spin 1s linear infinite;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes toast-timer {
    to {
        transform: scaleX(0);
    }
}

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

@media (max-width: 1050px) {
    .app-shell {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .sidebar {
        padding-inline: 9px;
    }

    .brand {
        justify-content: center;
        padding-inline: 0;
    }

    .brand-copy,
    .nav-section,
    .nav-menu a span,
    .sidebar-footer div {
        display: none;
    }

    .nav-menu a {
        justify-content: center;
        padding-inline: 0;
    }

    .nav-menu a i {
        font-size: 17px;
    }

    .sidebar-footer {
        justify-content: center;
    }

    .metric-grid,
    .step-list,
    .document-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-grid {
        grid-template-columns: minmax(220px, 1fr) repeat(3, 135px) auto;
    }

    .utility-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .content-area {
        padding: 18px 14px 26px;
    }

    .topbar {
        padding-inline: 14px;
    }

    .workspace-context span,
    .user-details,
    .user-chip > i {
        display: none;
    }

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

    .page-heading > button {
        align-self: flex-start;
    }

    .metric-grid,
    .step-list,
    .document-grid,
    .toolbar,
    .filter-grid,
    .form-grid,
    .document-summary,
    .reference-context {
        grid-template-columns: 1fr;
    }

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

    .document-summary > div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .document-summary > div:last-child {
        border-bottom: 0;
    }

    .filter-action {
        justify-self: start;
    }

    .panel-meta {
        display: none;
    }

    .permission-role-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .permission-role-filter label {
        min-width: 0;
    }
}

.diapi-log-panel > .panel-header {
    align-items: flex-start;
}

.diapi-log-panel .panel-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.header-actions {
    display: flex;
    gap: 7px;
}

.status-warning {
    color: #8a5b00;
    background: #fff5d8;
    border-color: #ead08a;
}

.status-error {
    color: #a33535;
    background: #fff0f0;
    border-color: #edb9b9;
}

:root[data-theme="dark"] .status-warning {
    color: #f0c76a;
    background: #3b3018;
    border-color: #665127;
}

:root[data-theme="dark"] .status-error {
    color: #ff9c9c;
    background: #3b2020;
    border-color: #6b3333;
}

.diapi-log-message {
    min-width: 280px;
    max-width: 560px;
    white-space: normal;
    line-height: 1.35;
}

.diapi-log-detail-row td {
    padding: 0 !important;
    background: var(--bg-subtle);
}

.diapi-log-detail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
}

.diapi-log-detail div {
    min-width: 0;
}

.diapi-log-detail .span-all {
    grid-column: 1 / -1;
}

.diapi-log-detail dt {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.diapi-log-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.diapi-log-detail pre {
    max-height: 220px;
    margin: 0;
    padding: 10px;
    overflow: auto;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 11px/1.5 Consolas, monospace;
    white-space: pre-wrap;
}

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

.grid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .78rem;
}

.confirmation-panel {
    margin: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning) 7%, var(--bg-surface));
}

.confirmation-panel p {
    display: inline-block;
    margin: 6px 22px 6px 0;
}

.grid-pager label,
.grid-pager-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-pager select {
    width: auto;
    min-width: 64px;
    padding: 6px 28px 6px 9px;
}

.grid-pager-actions > span {
    min-width: 105px;
    text-align: center;
}

@media (max-width: 680px) {
    .grid-pager {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Compact controls shared by the logistics module. */
.logistics-form .check-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}
.logistics-form .check-label input[type="checkbox"],
.logistics-form .data-table input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    min-height: 1rem;
    padding: 0;
    flex: 0 0 1rem;
}
.logistics-form .data-table input[type="number"] {
    min-width: 7rem;
    max-width: 10rem;
}
.logistics-form > fieldset {
    padding: 16px;
}
.logistics-form .logistics-search-action {
    display: flex;
    align-items: flex-end;
}
.logistics-form > .form-grid,
.logistics-form > .data-table-wrap,
.logistics-form > p {
    margin: 16px;
}
.logistics-form > .form-footer {
    margin: 15px 0 0;
}

/* Keep compact field heights even when a neighboring field contains results. */
.form-grid { align-items: start; }
.form-grid label { align-content: start; }
.form-grid .check-label { display:flex; align-items:center; gap:8px; min-height:36px; }
.form-grid .check-label input[type="checkbox"] { width:18px; height:18px; min-height:18px; padding:0; flex:0 0 18px; }
.sap-customer-selector { grid-column:1 / -1; display:grid; grid-template-columns:minmax(200px, 1fr) auto; gap:10px; align-items:end; }
.sap-customer-selector > p { grid-column:1 / -1; margin:0; padding:10px 12px; background:var(--primary-soft); border-radius:6px; }
.customer-results { grid-column:1 / -1; min-width:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.customer-results .data-table-wrap { max-height:320px; overflow:auto; }
.customer-results .panel-header { padding:10px 12px; }
.logistics-steps { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:16px; color:var(--text-secondary); }
.logistics-steps > * + *::before { content:"›"; margin-right:16px; color:var(--text-muted); }
.logistics-steps a, .logistics-form a, .logistics-history a, .table-panel h2 a { color:var(--primary); text-decoration:none; }
.logistics-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:20px; margin:0; }
.logistics-summary .summary-customer { grid-column:span 2; }
.logistics-summary dt { color:var(--text-secondary); font-size:12px; margin-bottom:6px; }
.logistics-summary dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.logistics-summary small { display:block; margin-top:5px; color:var(--text-secondary); font-weight:400; }
.logistics-status { display:inline-block; padding:5px 9px; border-radius:20px; background:var(--primary-soft); color:var(--primary); font-size:12px; white-space:nowrap; }
.logistics-technical { margin:0 20px 16px; padding:12px; background:var(--bg-subtle); border-radius:6px; color:var(--text-secondary); overflow-wrap:anywhere; }
.logistics-technical summary { cursor:pointer; }
.logistics-history { padding:20px; }
.logistics-history ol { padding-left:20px; margin:20px 0 0; }
.logistics-history li { padding:0 0 16px 12px; border-left:2px solid var(--border); color:var(--text-secondary); }
.logistics-history li strong { color:var(--text-primary); }
.logistics-history li p { margin:6px 0 0; }
@media(max-width:760px) { .logistics-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .sap-customer-selector { grid-template-columns:minmax(0,1fr); } }

.transfer-decision { margin:16px; border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-subtle); }
.transfer-decision .panel-header { gap:12px; flex-wrap:wrap; }
.transfer-decision-body { padding:16px; }
.transfer-decision-body > p { margin:0 0 14px; }
.transfer-decision-facts { display:flex; flex-wrap:wrap; gap:16px 32px; margin-bottom:16px; color:var(--text-secondary); }
.transfer-decision-facts strong { display:block; color:var(--text-primary); margin-top:4px; }
.transfer-decision-body > small { display:block; margin-top:8px; color:var(--text-secondary); }
.transfer-decision .form-footer { margin:0; gap:10px; }
.transfer-history .history-date { white-space:nowrap; }
.transfer-history .history-comment { min-width:220px; max-width:480px; white-space:normal; overflow-wrap:anywhere; }
.transfer-history .data-table td { vertical-align:top; }

.transfer-decision .panel-header { padding:14px 16px; align-items:center; }
.transfer-decision textarea { font:inherit; }

.billing-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.billing-metrics .panel { padding:16px; margin:0; }
.billing-metrics strong { display:block; margin-top:8px; font-size:18px; }
.billing-status { display:inline-block; border-radius:14px; padding:5px 8px; white-space:nowrap; font-weight:600; }
.billing-status.vencido, .billing-status.hoy { color:#b42318; background:#fee4e2; }
.billing-status.critico { color:#93370d; background:#ffead5; }
.billing-status.proximo { color:#854a0e; background:#fef0c7; }
.billing-status.en_tiempo { color:#05603a; background:#d1fadf; }

.billing-table .data-table { min-width:1750px; }
.billing-table .data-table td:nth-child(1), .billing-table .data-table td:nth-child(3) { min-width:180px; }
.billing-table a { color:var(--primary); text-decoration:none; }
.billing-table .secondary-button { white-space:nowrap; }

/* Logistics receipts share the portal palette in both themes. */
.receipt-links { min-width: 245px; }
.receipt-links a { display: inline-flex; align-items: center; gap: 5px; margin: 4px 16px 4px 0; color: var(--primary); text-decoration: none; white-space: nowrap; }
.receipt-links a:hover { text-decoration: underline; }
.receipt-controls > p { padding: 0 16px; }
.receipt-controls .panel-header { gap: 12px; flex-wrap: wrap; }
.billing-table .data-table td:nth-child(14) { max-width: 250px; white-space: normal; overflow-wrap: anywhere; }

.inventory-assignment fieldset > .form-grid { padding:0 0 16px; }
.inventory-assignment .data-table td { vertical-align:middle; }
.inventory-assignment .panel-header p { margin:4px 0 0; color:var(--text-muted); }

.inventory-actions { margin:15px 0 0; flex-wrap:wrap; gap:8px; border:1px solid var(--border); border-radius:8px; }
.inventory-assignment .panel-header > button { align-self:flex-start; flex-shrink:0; }

/* General alerts and reports, shared with corporate logistics controls. */
.alert-schedule-form h3 { font-size:14px; margin:20px 0 12px; color:var(--text); }
.alert-weekdays,.alert-time-slots,.alert-attachments { display:flex;flex-wrap:wrap;align-items:end;gap:12px; }
.alert-active { margin-top:20px; }
.alert-template-input { min-height:220px!important; font-family:monospace; }
.alert-preview > p,.alert-preview > .alert-attachments { margin:16px; overflow-wrap:anywhere; }
.alert-preview iframe { width:100%;height:540px;border:0;background:white; }
.alert-confirm { padding:20px;margin-top:16px; }
.alert-confirm h2 { font-size:16px; }
.alert-confirm button { margin-right:8px; }
.card-tabs,.card-review-actions,.card-upload-actions { display:flex;flex-wrap:wrap;gap:var(--space-3,12px);margin:16px 0; }
.card-expense-summary { display:flex;flex-wrap:wrap;gap:16px;padding:18px;margin-bottom:16px; }
.card-observation { padding:14px;border-left:3px solid var(--accent,#4789cc);background:var(--bg-subtle);color:var(--text-primary);border-radius:6px;overflow-wrap:anywhere; }
.card-attachments { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;padding:16px; }
.card-attachments article { display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;overflow-wrap:anywhere; }
.card-upload-actions label { position:relative;cursor:pointer;overflow:hidden; }
.card-upload-actions input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.card-file-preview { display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px; }
.card-file-preview img { max-width:100%;max-height:480px;object-fit:contain; }
.card-upload-progress { width:100%;height:8px; }
.card-hash { font-size:12px;overflow-wrap:anywhere;padding:12px;margin:0; }
@media(max-width:640px){.card-review-actions>*{flex:1 1 45%;}.card-upload-actions>*{flex:1 1 100%;}.card-expense-summary{flex-direction:column;}}


/* Corporate card reconciliation: readable comparison and contained mobile grids. */
.card-cut-page { min-width: 0; max-width: 100%; }
.card-cut-page > .form-footer { margin: 0; flex-wrap: wrap; padding: 12px; }
.card-cut-page .panel-header { flex-wrap: wrap; gap: 8px; }
.card-cut-page .data-table-wrap { max-width: 100%; overflow-x: auto; }
.card-reconciliation-table { min-width: 980px; table-layout: fixed; }
.card-reconciliation-table th:nth-child(1) { width: 23%; }
.card-reconciliation-table th:nth-child(2) { width: 16%; }
.card-reconciliation-table th:nth-child(3) { width: 31%; }
.card-reconciliation-table th:nth-child(4) { width: 30%; }
.card-reconciliation-table td { vertical-align: top; }
.card-reconciliation-table td small { display: block; margin-top: 6px; font-size: .78rem; }
.card-reconciliation-table td > button { margin: 3px 4px 3px 0; }
.card-reconciliation-table select { width: 100%; min-height: 36px; padding: 7px 9px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 5px; }
@media(max-width: 600px) { .card-cut-page .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-cut-page .metric-card { padding: 12px; } .card-cut-page .metric-card strong { font-size: 1.2rem; } }

/* Physical delivery evidence */
.delivery-page { max-width: 1450px; margin: 0 auto; }
.delivery-page fieldset { border:0; margin:0; padding:0; min-width:0; }
.delivery-page .panel { margin-bottom: 16px; }
.delivery-tabs,.delivery-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.delivery-tabs a { padding:10px 14px; border:1px solid var(--border-color, #8593a644); border-radius:8px; text-decoration:none; }
.delivery-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; }
.delivery-card { padding:20px; min-width:0; }
.delivery-card h2 {font-size:1.05rem; margin:12px 0;} .delivery-card h3,.delivery-line h3{font-size:1rem;}
.delivery-card>div:first-child { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.delivery-card p { overflow-wrap:anywhere; }
.delivery-card dl { display:grid;grid-template-columns:1fr 2fr;gap:8px; } .delivery-card dd{margin:0;}
.delivery-title{font-weight:700;font-size:1.05rem;}
.delivery-totals { display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0; }
.delivery-totals strong {display:block;font-size:1.2rem;margin-top:5px;} .delivery-totals span{font-size:.85rem;}
.delivery-inset{padding:16px;} .delivery-line{padding:16px;border:1px solid #8593a644;border-radius:8px;}
.delivery-page label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;}
.delivery-page input:not([type=checkbox]),.delivery-page select,.delivery-page textarea {width:100%;min-width:0;min-height:42px;border:1px solid #8593a677;border-radius:7px;padding:9px 12px;background:transparent;color:inherit;font:inherit;box-sizing:border-box;}
.delivery-page select option{color:#182331;background:#fff;}
.delivery-page .check-label{flex-direction:row;align-items:center;}.delivery-page input[type=checkbox]{width:20px;height:20px;}
.delivery-upload{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0;}.delivery-upload label{flex:1;min-width:220px;}
.delivery-signature{display:block;width:100%;max-width:800px;aspect-ratio:1000/360;background:white;border:2px dashed #71849b;border-radius:10px;touch-action:none;}
.delivery-file{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #8593a644;}.delivery-file span{flex:1;overflow-wrap:anywhere;}
.delivery-main-action{min-height:48px;margin:10px 0;}.delivery-confirm{padding:16px;border:2px solid #639ddd;border-radius:10px;margin-top:16px;}
.delivery-preview{display:block;max-width:100%;max-height:600px;object-fit:contain;}.delivery-hash,.delivery-log{overflow-wrap:anywhere;font-size:.8rem;}.delivery-log{max-width:600px;}
.delivery-empty{padding:30px;text-align:center;}
@media(max-width:700px){.delivery-page .form-grid{grid-template-columns:1fr!important;}.delivery-card{padding:16px;}.delivery-page .page-heading{align-items:flex-start;gap:12px;flex-direction:column;}.delivery-page button,.delivery-page .primary-button,.delivery-page .secondary-button{min-height:44px;}.delivery-page .form-footer{flex-wrap:wrap;gap:10px;}.delivery-tabs{gap:6px;}.delivery-tabs a{flex:1;text-align:center;}.delivery-actions>button{flex:1;}.delivery-page .delivery-main-action{width:100%;}}

.delivery-page .data-table{min-width:720px;} .delivery-log pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:340px;max-height:150px;overflow:auto;font-size:12px;}

/* Compact actions alongside fields; keep footers outside the form grid. */
.logistics-form .logistics-field-action { display:flex; align-items:flex-end; gap:.5rem; }
.logistics-field-action button { min-height:36px; }
.receipt-controls .receipt-help { margin:0; padding:.8rem 1rem; color:var(--text-muted); line-height:1.5; }
.receipt-controls .login-error { margin: .75rem 1rem; }
.delivery-guide { padding:1rem; margin-block:1rem; }
.delivery-guide p { line-height:1.6; overflow-wrap:anywhere; }
.delivery-guide .secondary-button { display:inline-flex; margin:.25rem .5rem .25rem 0; }
@media(max-width:640px) { .logistics-field-action button { width:100%; } .delivery-guide .secondary-button { display:flex; justify-content:center; margin:.5rem 0; } }

.nav-menu .nav-section-toggle { display:flex; align-items:center; gap:.5rem; width:100%; border:0; background:transparent; text-align:left; cursor:pointer; font-family:inherit; }
.nav-section-toggle span { flex:1; }
.nav-section-toggle:hover, .nav-section-toggle:focus-visible { color:var(--text-primary); background:var(--bg-hover); }
.nav-section-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.nav-section-chevron { transition:transform .15s ease; }
.nav-section-toggle[aria-expanded="true"] .nav-section-chevron { transform:rotate(180deg); }
.profile-logout { border-top:1px solid var(--border); margin:0; }
.profile-logout .profile-option { gap:.75rem; }

.delivery-page { min-width:0; width:100%; }
.delivery-page [hidden] { display:none !important; }
.delivery-page .form-grid { padding:1rem; }
.delivery-page .grid-pager label { flex-direction:row; align-items:center; }
.delivery-page .grid-pager select { width:auto; min-width:64px; }
.delivery-wizard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem; }
.delivery-wizard button { white-space:normal; min-height:44px; }
.delivery-wizard .current { outline:2px solid var(--primary); font-weight:700; }
.delivery-step-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem; margin-bottom:1rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; }
.delivery-file { flex-wrap:wrap; overflow-wrap:anywhere; }
.delivery-file span { min-width:0; }
.sidebar-backdrop { display:none; }
@media(max-width:1050px){
.app-shell { grid-template-columns:minmax(0,1fr); }
.app-shell .sidebar { position:fixed; top:0; bottom:0; left:0; width:280px; max-width:85vw; z-index:1100; transform:translateX(-100%); transition:transform .15s ease; padding:16px; }
.mobile-nav-open .sidebar { transform:translateX(0); }
.mobile-nav-open .sidebar-backdrop { display:block; position:fixed; inset:0; border:0; background:#0008; z-index:1090; }
.sidebar .brand-copy,.sidebar .nav-menu a span,.sidebar .sidebar-footer div { display:block; }
.sidebar .nav-section { display:flex; }
.sidebar .nav-menu a { justify-content:flex-start; padding-inline:12px; }
.mobile-menu-button { display:inline-flex !important; }
.main-area { min-width:0; width:100%; }
.delivery-page .delivery-cards { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px){
.delivery-wizard { grid-template-columns:repeat(2,minmax(0,1fr)); }
.delivery-page .form-grid,.delivery-upload { grid-template-columns:minmax(0,1fr); }
.delivery-page .page-heading { flex-wrap:wrap; }
.delivery-card { padding:14px; }
.delivery-page .delivery-actions { flex-wrap:wrap; }
}

.delivery-signature,.delivery-wizard { scroll-margin-top:90px; }

.delivery-card p { margin:.65rem 0; line-height:1.6; }
.delivery-card h2,.delivery-line h3 { margin:0 0 1rem; line-height:1.5; }
.delivery-page .form-footer { padding:16px; gap:12px; flex-wrap:wrap; }
.delivery-page button,.delivery-page a.secondary-button,.delivery-page a.primary-button { vertical-align:middle; margin-block:4px; }
.delivery-page .delivery-line label { margin-top:12px; }
.delivery-history-row { padding:14px 0; border-bottom:1px solid var(--border); line-height:1.8; }
.delivery-product-filter { padding:16px; max-width:480px; }
.delivery-progress { margin:16px 0; }
.delivery-progress>div { display:flex; justify-content:space-between; gap:12px; font-size:.85rem; }
.delivery-progress progress { display:block; width:100%; height:12px; margin-top:8px; accent-color:var(--primary); }
.delivery-camera { padding:12px; border:1px solid var(--border); border-radius:8px; margin:12px 0; }
.delivery-camera video { width:100%; max-height:360px; background:#111; border-radius:8px; }
.delivery-hash { margin:16px 0; }
.delivery-card>.primary-button,.delivery-card>.secondary-button { margin-right:8px; }

/* Payment reference batch dialog */
.bulk-launch { display:flex; justify-content:flex-end; margin:0 0 1rem; }
.bulk-dialog::backdrop {background:rgba(0,0,0,.55);}
.bulk-dialog {padding:0;color:var(--text-primary);margin:auto;}
.bulk-dialog {width:min(1400px,96vw);max-height:92dvh;flex-direction:column;overflow:hidden;box-shadow:0 18px 70px #0007;}
.bulk-content {overflow:auto;padding:1rem;min-height:0;}
.bulk-filters {display:flex;gap:1rem;align-items:end;border:0;padding:0;flex-wrap:wrap;}
.bulk-filters label {display:flex;flex-direction:column;gap:.4rem;}
.bulk-tools {display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:1rem 0;}
.bulk-dialog .panel-header p {margin:.4rem 0 0;}
.bulk-dialog .form-footer {flex-shrink:0;}
.bulk-dialog small {display:block;}
@media(max-width:640px){.bulk-overlay{padding:.4rem;}.bulk-dialog{width:100%;max-height:98dvh;}.bulk-filters label{flex:1;min-width:130px;}.bulk-launch{justify-content:stretch;}.bulk-launch button{width:100%;}}

.bulk-dialog[open]{display:flex;}

.bulk-filters input{padding:.65rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);color:inherit;font:inherit;min-width:0;}
.bulk-dialog{inset:0;}
.bulk-dialog .form-footer { margin:0; padding:14px 16px; flex-wrap:wrap; } .bulk-dialog .panel-header { padding:16px; gap:12px; align-items:flex-start; } .bulk-dialog .panel-header > div { min-width:0; } .bulk-dialog .panel-header > button { flex-shrink:0; } .bulk-dialog .form-footer button { white-space:normal; }
.history-refresh-control { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; } .history-refresh-control small { color:var(--text-muted); font-size:11px; } .history-refresh-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; } .panel-header:has(.history-refresh-control) { gap:12px; flex-wrap:wrap; }

/* Login must shrink with the viewport and remain scrollable above a mobile keyboard. */
.authentication-shell { min-height:100svh; width:100%; grid-template-columns:minmax(0,1fr); padding:clamp(12px,4vw,24px); }
.login-card { min-width:0; max-width:100%; padding:clamp(18px,5vw,26px); }
.login-form, .login-form > label, .login-input { min-width:0; max-width:100%; }
.login-input input { min-width:0; flex:1 1 0; width:0; font-size:16px; min-height:46px; }
.login-submit { min-height:46px; }
.login-form .remember-option input { flex:0 0 auto; width:auto; }
@media(max-height:600px) { .authentication-shell { align-items:start; } }
.document-scan { position:relative; display:grid; place-items:center; width:36px; height:42px; overflow:hidden; }
.document-scan > i { font-size:30px; }
.document-scan > span { position:absolute; left:3px; right:3px; height:3px; background:var(--primary); box-shadow:0 0 8px var(--primary); animation:document-scan 1.8s ease-in-out infinite alternate; }
@keyframes document-scan { from { top:5px; } to { top:35px; } }
.toast-processing .toast-timer { width:35%; animation:processing-sweep 1.8s ease-in-out infinite alternate; }
@keyframes processing-sweep { from { left:0; } to { left:65%; } }
@media(prefers-reduced-motion:reduce) { .document-scan > span,.toast-processing .toast-timer { animation:none; } }
@media(max-width:480px) { .toast-region { left:12px; right:12px; width:auto; max-width:calc(100vw - 24px); } .app-toast { min-width:0; max-width:100%; } }