/* ===========================
   HIVE Insurance Claims App
   Global Styles
   =========================== */

:root {
    --accent-orange: #E8780A;
    --accent-orange-line: #E07E10;
    --accent-orange-muted: #5A2B0D;
    --accent-orange-deep: #D06C08;
    --accent-brown-button: #fff;
    --accent-orange-text: #B45309;

    --sidebar-bg: #000000;
    --sidebar-hover: #1a1a1a;
    --sidebar-active: var(--accent-orange-muted);
    --sidebar-text: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-width: 280px;
    --sidebar-rail-width: 64px;

    --primary: var(--accent-orange);
    --primary-hover: var(--accent-orange-deep);
    --primary-text: var(--accent-orange-text);
    --primary-light: rgba(230, 124, 47, 0.12);

    --bg: #f5f5f5;
    --surface: #ffffff;
    --border: #e5e5e5;
    --text: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #717171;

    --danger: #C53030;
    --success: #38a169;
    --warning: #d69e2e;
    --info: #3182ce;

    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

    --font-nav: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-support: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font: var(--font-ui);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: var(--font-support);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

.sidebar {
    font-family: var(--font-nav);
}

.top-header .header-actions,
.top-header .header-actions a,
.top-header .header-actions button,
.top-header .header-user {
    font-family: var(--font-nav);
}

.tabs,
.tab-item,
.logo-text,
.btn-create-claim {
    font-family: var(--font-nav);
}

.page-header h1,
.delete-modal-title,
.status-modal-title,
.clients-wizard-header h1,
.clients-empty-state h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

[class^="btn-"],
[class*=" btn-"],
.data-table,
.pagination,
.pagination-info,
.pagination-info select,
.context-menu,
.context-menu a,
.context-menu button,
.form-group label,
.form-row label,
.wizard-inline-check,
.toolbar {
    font-family: var(--font-ui);
}

.data-table,
.pagination,
.pagination-info,
.header-icon-btn .badge,
.user-app-version,
.user-build-date {
    font-variant-numeric: tabular-nums lining-nums;
}

.wizard-helper-text,
.clients-empty-state,
.relation-search-empty,
.assign-selected-empty,
.business-info-empty-copy,
.business-info-empty-state {
    font-family: var(--font-support);
}

/* ===========================
   App Container
   =========================== */
.app-container {
    display: flex;
    height: 100vh;
}

/* ===========================
   Sidebar
   =========================== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 20px 16px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.brand-separator {
    width: 2px;
    height: 36px;
    background: #ffd074;
    border: none;
}

.bee-logo-icon {
    height: 45px;
    width: auto;
    object-fit: contain;
}

.sidebar-logo {
    display: flex;
    align-items: center;
}

.logo-text {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-transform: uppercase;
}

.sidebar-create {
    padding: 10px 20px 16px;
}

.btn-create-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: rgba(236, 123, 41, 0.18);
    color: var(--accent-orange-line);
    border: 1px solid var(--accent-orange-line);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.15s;
}

.btn-create-claim:hover {
    background: rgba(236, 123, 41, 0.24);
    color: var(--accent-orange-line);
}

.menu-icon {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.create-icon {
    width: 18px;
    height: 18px;
}

.create-icon path {
    fill: var(--accent-orange-line);
}

/* Sidebar Nav */
.sidebar-nav {
    flex: 1;
    padding: 6px 16px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

.nav-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    stroke: var(--accent-orange-line);
    stroke-width: 1.75;
}

.nav-icon path {
    vector-effect: non-scaling-stroke;
}

.nav-icon .nav-icon-fill {
    fill: var(--accent-orange-line);
    stroke: none;
}

.nav-item.active .nav-icon {
    stroke: #ffffff;
}

.nav-item.active .nav-icon .nav-icon-fill {
    fill: #ffffff;
}

/* Roles nav icon specific styling - FontAwesome icons */
.nav-item .fa-user-shield {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-user-shield {
    color: #ffffff;
}

.nav-item .fa-gears,
.nav-item .fa-gear {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-gears,
.nav-item.active .fa-gear {
    color: #ffffff !important;
}

.nav-item .fa-inbox {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-inbox {
    color: #ffffff !important;
}

.nav-arrow {
    margin-left: auto;
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 1.75;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-arrow-toggle {
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
}

.nav-arrow-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

a.nav-group-toggle {
    text-decoration: none;
    display: flex;
    width: 100%;
}

.nav-group.open .nav-arrow {
    transform: rotate(180deg);
}

.nav-group-items {
    display: none;
    padding-left: 50px;
}

.nav-group.open .nav-group-items {
    display: block;
}

.nav-item.sub-item {
    font-size: 13px;
    padding: 7px 12px 7px 0;
    color: rgba(255, 255, 255, 0.6);
    gap: 8px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.nav-item.sub-item:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.nav-item.sub-item.active {
    background: transparent;
    color: #F5C253;
}

.sub-icon {
    width: 14px;
    font-size: 12px;
    color: var(--accent-orange-line);
    text-align: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}

.nav-item.sub-item:hover .sub-icon {
    opacity: 0.75;
}

.nav-item.sub-item.active .sub-icon {
    color: #F5C253;
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 8px 12px 12px;
    border-top: none;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0a898;
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-build-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px 0;
}

.user-app-version,
.user-build-date {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    line-height: 1.2;
}

.user-app-version {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-build-date {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.user-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.user-email {
    color: #b0a898;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-logout {
    background: none;
    border: none;
    color: #b0a898;
    cursor: pointer;
    padding: 6px;
    font-size: 14px;
    transition: color 0.15s;
}

.btn-logout:hover {
    color: #fff;
}

/* ===========================
   Top Header
   =========================== */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-height: 56px;
}

.lang-menu button:hover {
    background: var(--bg) !important;
}

.header-spacer {
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-btn {
    position: relative;
    background: none;
    border: none;
    color: #101828;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-icon-btn:hover {
    color: var(--text);
}

.header-icon-svg {
    display: block;
    width: 24px;
    height: 24px;
}

.header-icon-btn .badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.header-user:hover {
    background: var(--bg);
}

.header-user i {
    font-size: 11px;
    color: var(--text-secondary);
}

.dashboard-view-button {
    border: 0;
    background: transparent;
}

.dashboard-view-button > .fa-table-columns {
    font-size: 14px;
    color: var(--primary);
}

.dashboard-view-menu a.active {
    background: var(--bg);
    font-weight: 600;
}

.dashboard-placeholder {
    max-width: 960px;
    margin: 0 auto;
}

.dashboard-placeholder-card {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 28px;
}

.dashboard-placeholder-card h1 {
    margin: 4px 0 8px;
    font-size: 28px;
}

.dashboard-placeholder-card p {
    margin: 0;
    color: var(--text-secondary);
}

.dashboard-placeholder-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: rgba(240, 138, 51, 0.12);
    font-size: 24px;
    flex: 0 0 auto;
}

.dashboard-placeholder-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===========================
   Main Content
   =========================== */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
    overflow-y: auto;
}

/* Sticky table layout: pages with data tables */
.main-content:has(> .data-table-wrapper),
.main-content:has(> .stats-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content:has(> .data-table-wrapper) > *:not(.data-table-wrapper) {
    flex-shrink: 0;
}

.main-content > .data-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.main-content > .stats-page {
    flex: 1;
    min-height: 0;
}

/* ===========================
   Page Header
   =========================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #EC7B29;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #D96E1F;
    color: #fff;
}

.btn-primary-outline {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    color: #EC7B29;
    border: 1.5px solid #EC7B29;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-primary-outline:hover {
    background: #EC7B29;
    color: #fff;
}

/* ===========================
   Tabs
   =========================== */
.tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.tab-item {
    padding: 8px 4px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-item:hover {
    color: var(--text);
}

.tab-item.active {
    color: var(--primary-text);
    border-bottom-color: var(--primary-text);
}

.tab-count {
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.tab-item:not(.active) .tab-count {
    background: var(--bg);
    color: var(--text-secondary);
}

/* ===========================
   Toolbar (search + filters)
   =========================== */
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.search-box {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 9px 52px 9px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--surface);
    transition: border-color 0.15s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-box .fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.search-submit {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: none;
}

.search-submit:hover {
    color: var(--primary-text);
}

.search-box.has-value .search-submit {
    display: block;
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: none;
}

.search-clear:hover {
    color: var(--text);
}

.search-box.has-value .search-clear {
    display: block;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.filter-btn i {
    font-size: 12px;
}

/* ===========================
   Data Table
   =========================== */
.data-table-wrapper {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: inset 0 -1px 0 var(--border);
}

.data-table thead th.sortable-th {
    cursor: pointer;
    user-select: none;
}

.data-table thead th.sortable-th a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table thead th.sortable-th a:hover {
    color: var(--text-primary);
}

.sort-icon-neutral {
    opacity: 0.3;
    font-size: 10px;
}

.sort-icon-active {
    opacity: 1;
    color: var(--primary-text);
    font-size: 10px;
}

.data-table thead th.sortable-th:hover .sort-icon-neutral {
    opacity: 0.6;
}

/* ===========================
   Column Resize Handles
   =========================== */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 6px;
    cursor: col-resize;
    z-index: 11;
    border-left: 1px solid var(--border);
    border-right: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.col-resize-handle:hover {
    border-left-color: var(--primary-text);
    border-right-color: var(--primary-text);
    background: rgba(59, 130, 246, 0.08);
}

.col-resize-handle.active {
    border-left-color: var(--primary-text);
    border-right-color: var(--primary-text);
    background: rgba(59, 130, 246, 0.15);
    top: 0;
    bottom: 0;
}

/* ===========================
   Column Move Buttons
   =========================== */
.col-move-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 7px;
    cursor: pointer;
    z-index: 12;
    opacity: 0.7;
    transition: all 0.15s;
}

.col-move-btn:hover {
    opacity: 1;
    color: var(--primary-text);
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.col-move-left { left: 2px; }
.col-move-right { right: 8px; }

.data-table thead th:hover .col-move-btn {
    display: flex;
}

.data-table tbody tr {
    transition: background 0.1s;
}

.data-table tbody td {
    border-bottom: 1px solid var(--border);
}

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

.data-table tbody tr:hover {
    background: #fafafa;
}

/* Group header rows in clients table */
.group-header-row {
    cursor: pointer;
}

.group-header-row td {
    background: var(--surface);
    padding: 10px 16px !important;
}

.group-header-row:hover td {
    background: var(--surface);
}

.group-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    padding: 0;
    width: 100%;
}

.group-toggle-btn:hover {
    color: var(--primary-text);
}

.group-toggle-icon {
    transition: transform 0.2s;
    font-size: 11px;
    width: 14px;
    text-align: center;
}

.group-header-row.expanded .group-toggle-icon {
    transform: rotate(90deg);
}

.group-member-count {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: normal;
}

.group-member-row.collapsed {
    display: none;
}

.data-table tr.group-member-row {
    background: #f8f9fb;
    border-left: 3px solid var(--primary);
}

.data-table tr.group-member-row:hover {
    background: #f0f2f6;
}

.data-table tr.group-member-row td:first-child {
    padding-left: 28px;
}

.data-table td {
    padding: 14px 16px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.data-table td:has(.context-menu-wrapper) {
    overflow: visible;
}

.data-table .row-checkbox {
    width: 40px;
}

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

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

.status-badge::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-open {
    background-color: #e0e7ff;
    color: #344054;
}

.status-open::before {
    background-color: #344054;
}

.status-inprogress {
    background-color: #fef0c7;
    color: #9A3C06;
}

.status-inprogress::before {
    background-color: #f79009;
}

.status-underreview {
    background-color: #fce7f6;
    color: #A3115F;
}

.status-underreview::before {
    background-color: #dd2590;
}

.status-approved {
    background-color: #d1fadf;
    color: #065F46;
}

.status-approved::before {
    background-color: #12b76a;
}

.status-denied {
    background-color: #fee4e2;
    color: #b42318;
}

.status-denied::before {
    background-color: #f04438;
}

.status-done {
    background-color: #eaecf0;
    color: #344054;
}

.status-done::before {
    background-color: #667085;
}

/* User page specific badges */
.status-active {
    background-color: #f8fafc;
    border: 1px solid #d0d5dd;
    color: #344054;
}

.status-active::before {
    background-color: #12b76a;
}

.status-inactive {
    background-color: #f8fafc;
    border: 1px solid #d0d5dd;
    color: #344054;
}

.status-inactive::before {
    background-color: #f04438;
}

.unassigned-label {
    color: #667085;
    font-style: italic;
}

/* Page Header Additional Buttons */
.page-header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff;
    color: #344054;
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-export:hover {
    background-color: #f9fafb;
    border-color: #d0d5dd;
    color: #344054;
}

.btn-export[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-export.is-loading {
    opacity: 0.8;
    cursor: wait;
}

.assets-import-modal-content {
    max-height: calc(100vh - 32px);
}

.assets-import-modal-content .modal-body {
    overflow-y: auto;
}

.assets-import-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.assets-import-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.assets-import-actions {
    margin-bottom: 12px;
}

.btn-template-download {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
}

.btn-template-download:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #166534;
}

.btn-template-download.is-disabled {
    pointer-events: none;
    opacity: 0.7;
}

.assets-import-file-input {
    min-width: 260px;
    max-width: 420px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #ffffff;
    color: #344054;
    padding: 6px;
    font-size: 0.875rem;
    line-height: 1.2;
}

.assets-import-file-input::file-selector-button {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 10px;
    cursor: pointer;
}

.assets-import-file-input::file-selector-button:hover {
    background: #ffedd5;
    border-color: #fdba74;
}

.assets-import-issues-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

#btnConfirmAssetsImport.assets-import-confirm-ok {
    background: #15803d;
    border-color: #15803d;
}

#btnConfirmAssetsImport.assets-import-confirm-ok:hover {
    background: #166534;
    border-color: #166534;
}

#btnConfirmAssetsImport.assets-import-confirm-warn {
    background: #d97706;
    border-color: #d97706;
}

#btnConfirmAssetsImport.assets-import-confirm-warn:hover {
    background: #b45309;
    border-color: #b45309;
}

#btnConfirmAssetsImport:disabled,
#btnConfirmAssetsImport.assets-import-confirm-disabled {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

#assetsImportProgressBar {
    transition: width 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.processes-error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    background: #fef2f2;
    font-size: 13px;
}


.process-mode-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.process-mode-auto {
    background: #e8f8ee;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.process-mode-manual {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.process-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.process-status-success {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.process-status-failed {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.process-status-warning {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fdba74;
}

.process-status-running {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.process-status-idle {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.process-modal-content {
    max-width: 860px;
    max-height: calc(100vh - 24px);
}

.process-modal-content .modal-body {
    overflow-y: auto;
}

.process-history-modal-content {
    max-width: 1220px;
    max-height: calc(100vh - 24px);
}

.process-history-modal-content .modal-body {
    overflow-y: auto;
}

.process-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.process-inline-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.process-schedule-row.is-disabled {
    opacity: 0.58;
}

/* Severity Badges */
.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

.severity-badge::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.severity-info {
    background-color: #dbeafe;
    color: #1e40af;
}
.severity-info::before {
    background-color: #3b82f6;
}

.severity-warning {
    background-color: #fef0c7;
    color: #9A3C06;
}
.severity-warning::before {
    background-color: #f79009;
}

.severity-error {
    background-color: #fee4e2;
    color: #b42318;
}
.severity-error::before {
    background-color: #f04438;
}

/* View detail button */
.btn-view-detail {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-view-detail:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

/* Detail modal field grid */
.detail-field-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
}
.detail-field-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}
.detail-field-value {
    font-size: 13px;
    word-break: break-word;
}

/* Activity History landing cards */
.activity-landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.activity-landing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.activity-landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #F8A900;
}

.activity-landing-card:hover {
    border-color: #F8A900;
    box-shadow: 0 6px 20px rgba(248, 169, 0, 0.15);
}

.activity-landing-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #201B16;
    color: #F8A900;
    font-size: 22px;
    margin-bottom: 16px;
}

.activity-landing-card h2 {
    font-size: 17px;
    font-weight: 600;
    color: #201B16;
    margin: 0 0 8px 0;
}

.activity-landing-card p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Landing page hero banner */
.landing-hero {
    position: relative;
    background: url('/images/landing-hero.jpg') center / cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    padding: 52px 36px;
}

.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(32, 27, 22, 0.72);
}

.landing-hero h1,
.landing-hero p {
    position: relative;
    z-index: 1;
}

.landing-hero h1 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.landing-hero p {
    font-size: 15px;
    color: #EAE7D8;
    margin: 0;
}

@media (max-width: 768px) {
    .assets-import-modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px);
    }

    .assets-import-toolbar > * {
        width: 100%;
    }

    .assets-import-file-input {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .assets-import-actions .btn-primary {
        width: 100%;
    }

    .process-modal-content,
    .process-history-modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px);
    }

}

/* Filters */
.filter-btn-outline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-left: auto;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 0.5rem;
    color: #475467;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.filter-btn-outline:hover {
    border-color: #98A2B3;
    color: #344054;
}

.filter-btn-outline i {
    color: #475467;
}

.filter-btn-outline.filter-active {
    background: #fff;
    color: #EC7B29;
    border-color: #EC7B29;
}

.filter-btn-outline.filter-active i {
    color: #EC7B29;
}

.context-menu a.active {
    font-weight: 600;
    color: var(--primary-text);
}

/* Base table adjustments for Users */
.data-table th,
.data-table td {
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.data-table .row-action-icon {
    color: #6B7280;
    cursor: pointer;
    padding: 0.25rem;
}

.data-table .row-action-icon:hover {
    color: #344054;
}

.data-table tbody tr.is-new-user {
    background-color: #f5fbf7;
    box-shadow: inset 3px 0 0 #12b76a;
    animation: new-user-pulse 750ms ease-out 1;
}

.data-table tbody tr.is-new-user:hover {
    background-color: #eef9f2;
}

.new-user-cell {
    position: relative;
    display: inline-block;
}

.new-record-badge {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #abefc6;
    background: #ecfdf3;
    color: #065F46;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.new-record-badge i {
    font-size: 0.625rem;
}

@keyframes new-user-pulse {
    0% {
        background-color: #ecfdf3;
    }

    45% {
        background-color: #dcfae6;
    }

    100% {
        background-color: #f5fbf7;
    }
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--surface);
    font-size: 13px;
}

/* Impersonation Banner */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 32px;
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 13px;
    font-weight: 500;
}

.impersonation-banner strong {
    font-weight: 700;
}

.impersonation-cancel-btn {
    padding: 3px 14px;
    border: 1.5px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}

.impersonation-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Context Menu */
.context-menu-wrapper {
    position: relative;
}

.context-menu-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.context-menu-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.context-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    padding: 6px 0;
}

.context-menu.show {
    display: block;
}

.context-menu a,
.context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}

.context-menu a:hover,
.context-menu button:hover {
    background: var(--bg);
}

.context-menu a.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.context-menu .danger {
    color: var(--danger);
}

.context-menu i {
    width: 16px;
    text-align: center;
    font-size: 13px;
}

/* ===========================
   Pagination
   =========================== */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}

.pagination a:hover {
    background: var(--bg);
    color: var(--text);
}

.pagination a.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.pagination .active {
    background: var(--primary);
    color: var(--accent-brown-button);
}

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

.pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-info .total-records {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.pagination-info .total-records i {
    font-size: 11px;
    color: var(--primary-text);
}

.pagination-info .total-records strong {
    color: var(--text);
    font-weight: 600;
}

.pagination-info-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
}

.pagination-info select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
}

/* ===========================
   Forms
   =========================== */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 680px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

select.form-control {
    cursor: pointer;
}

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

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

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

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #c53030;
    color: #fff;
}

.btn-bulk-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0e7490;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-bulk-group:hover {
    background: #0c5e75;
    color: #fff;
}

/* ===========================
   Delete Confirmation Modal
   =========================== */
.delete-modal {
    max-width: 440px;
    position: relative;
    padding: 24px;
}

.delete-modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.delete-modal-close:hover {
    color: var(--text-secondary);
}

.delete-modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.delete-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE4E2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.delete-modal-icon i {
    font-size: 20px;
    color: #D92D20;
}

.delete-modal-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.delete-modal-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.delete-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.delete-modal-footer .btn-cancel,
.delete-modal-footer .btn-danger {
    flex: 1;
    border-radius: 16px;
    justify-content: center;
}

/* Activate/Deactivate user modal */
.status-user-modal {
    width: min(420px, calc(100vw - 24px));
    border-radius: 12px;
    position: relative;
    padding: 24px 22px 20px;
}

.status-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: none;
    background: transparent;
    color: #2f3640;
    font-size: 21px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}

.status-modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.status-modal-icon-wrap {
    margin-bottom: 18px;
}

.status-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #1f2937;
    background: #f2dfd2;
}

.status-modal-icon.activate-mode {
    background: #f0dfd1;
}

.status-modal-icon.deactivate-mode {
    background: #f0dfd1;
}

.status-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #1f2937;
}

.status-modal-subtitle {
    margin: 0;
    color: #5f6b7b;
    font-size: 14px;
    line-height: 1.45;
    max-width: 372px;
}

.status-modal-footer {
    margin-top: 30px;
    display: flex;
    width: 100%;
    gap: 12px;
}

.status-modal-footer .status-modal-cancel,
.status-modal-footer .status-modal-confirm {
    flex: 1;
    height: 50px;
    border-radius: 16px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.status-modal-footer .status-modal-cancel {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #c6ccd6;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.status-modal-footer .status-modal-confirm {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--accent-brown-button);
}

.status-modal-footer .status-modal-confirm:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.data-table tr {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.data-table tr.row-deleting {
    opacity: 0;
    transform: translateX(-20px);
}

.data-table tr.row-pending-delete {
    opacity: 0.4;
    background: rgba(239, 68, 68, 0.06);
    pointer-events: none;
}

/* ===========================
   Detail Card
   =========================== */
.detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 680px;
}

.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    width: 180px;
    min-width: 180px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}

.detail-value {
    flex: 1;
    font-size: 14px;
}

/* ===========================
   Stub Page
   =========================== */
.stub-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.stub-page i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.stub-page h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.stub-page p {
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================
   Validation
   =========================== */
.field-validation-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.input-validation-error {
    border-color: var(--danger) !important;
}

/* ===========================
   Hamburger & Backdrop (hidden by default)
   =========================== */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

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

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

/* ===========================
   Sidebar Collapse Toggle
   =========================== */
.sidebar-collapse-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    font-size: 16px;
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}

.sidebar-collapse-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* ===========================
   Desktop Rail Mode
   =========================== */
@media (min-width: 769px) {
    .sidebar {
        transition: width 0.2s ease, min-width 0.2s ease;
    }

    [data-sidebar-mode="rail"] .sidebar {
        width: var(--sidebar-rail-width);
        min-width: var(--sidebar-rail-width);
        overflow: visible;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item span,
    [data-sidebar-mode="rail"] .sidebar-create .btn-create-claim span,
    [data-sidebar-mode="rail"] .sidebar-footer .user-info,
    [data-sidebar-mode="rail"] .sidebar-footer .user-build-meta,
    [data-sidebar-mode="rail"] .sidebar .logo-text,
    [data-sidebar-mode="rail"] .sidebar .brand-separator,
    [data-sidebar-mode="rail"] .nav-arrow,
    [data-sidebar-mode="rail"] .nav-group-items {
        display: none;
    }

    [data-sidebar-mode="rail"] .nav-group.open .nav-group-items {
        display: none;
    }

    /* Flyout submenu on hover in rail mode */
    [data-sidebar-mode="rail"] .nav-group {
        position: relative;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items {
        display: block;
        position: absolute;
        left: 100%;
        top: auto;
        bottom: 0;
        min-width: 200px;
        max-height: 50vh;
        overflow-y: auto;
        padding: 6px 0;
        padding-left: 0;
        background: var(--sidebar-bg, #1a1a1a);
        border-radius: 0 8px 8px 0;
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items .nav-item {
        padding: 8px 16px;
        justify-content: flex-start;
        gap: 10px;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items .nav-item span {
        display: inline;
    }

    [data-sidebar-mode="rail"] .sidebar-header {
        padding: 16px 8px 8px;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
    }

    [data-sidebar-mode="rail"] .sidebar .brand-logo-lockup {
        justify-content: center;
        gap: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-create {
        padding: 4px 8px 8px;
    }

    [data-sidebar-mode="rail"] .btn-create-claim {
        justify-content: center;
        padding: 10px;
    }

    [data-sidebar-mode="rail"] .sidebar-nav {
        padding: 6px 8px;
        overflow: visible;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item {
        justify-content: center;
        padding: 10px;
        gap: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .nav-icon,
    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .fas,
    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .fa-solid {
        margin: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-footer {
        padding: 8px;
    }

    [data-sidebar-mode="rail"] .user-profile {
        justify-content: center;
    }

    [data-sidebar-mode="rail"] .user-profile a {
        justify-content: center;
    }

    [data-sidebar-mode="rail"] .btn-logout {
        display: none;
    }

    /* Collapse button icon rotation */
    [data-sidebar-mode="rail"] .sidebar-collapse-btn {
        transform: rotate(180deg);
    }
}

/* ===========================
   Rail Flyout Menus
   =========================== */
.nav-group-flyout {
    display: none;
    position: fixed;
    left: var(--sidebar-rail-width);
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 220px;
    max-width: 280px;
    z-index: 1100;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
}

.nav-group-flyout.open {
    display: block;
}

.nav-group-flyout-title {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.nav-group-flyout a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.nav-group-flyout a:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-group-flyout a.active {
    color: #F5C253;
}

.nav-group-flyout a i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

.nav-group-flyout a.active i {
    color: #F5C253;
    opacity: 1;
}

/* ===========================
   Desktop Hidden Mode
   =========================== */
[data-sidebar-mode="hidden"] .sidebar {
    display: none;
}

[data-sidebar-mode="hidden"] .sidebar-backdrop {
    display: none;
}

/* Header trigger chip — only visible in hidden mode */
.hidden-nav-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.hidden-nav-trigger:hover {
    background: var(--bg);
    border-color: var(--primary);
}

.hidden-nav-trigger.active {
    background: var(--bg);
    border-color: var(--primary);
}

.hidden-nav-trigger-icon {
    height: 20px;
    width: auto;
}

.hidden-nav-trigger-chevron {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.hidden-nav-trigger.active .hidden-nav-trigger-chevron {
    transform: rotate(180deg);
}

[data-sidebar-mode="hidden"] .hidden-nav-trigger {
    display: flex;
}

/* Hidden-mode chip menu (Figma-style) */
.chip-menu {
    display: none;
    position: fixed;
    top: 48px;
    left: 12px;
    min-width: 240px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.chip-menu.open {
    display: block;
}

.chip-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
    white-space: nowrap;
}

.chip-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.chip-menu-item.active {
    color: #F5C253;
}

.chip-menu-item i:first-child {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

.chip-menu-item.active i:first-child {
    opacity: 1;
    color: #F5C253;
}

.chip-menu-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.4;
}

.chip-menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.chip-menu-action i:first-child {
    opacity: 0.5;
}

/* Submenu */
.chip-menu-has-sub {
    position: relative;
}

.chip-menu-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: -6px;
    min-width: 220px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1210;
}

.chip-menu-has-sub:hover > .chip-menu-sub,
.chip-menu-sub:hover {
    display: block;
}

.chip-menu-sub-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/* Clamp submenu to viewport */
.chip-menu-sub.flip-up {
    top: auto;
    bottom: -6px;
}


/* ===========================
   Responsive: Tablet (≤1024px)
   — no longer auto-collapses; user controls via toggle
   =========================== */
@media (max-width: 1024px) {
    .main-content {
        padding: 24px;
    }

    .header-user span {
        display: none;
    }
}

/* ===========================
   Responsive: Small Tablet (≤768px)
   =========================== */
@media (max-width: 768px) {

    /* Off-canvas sidebar */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        transform: translateX(-100%);
        z-index: 999;
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Restore sidebar text when open */
    .sidebar.open .sidebar-nav .nav-item span,
    .sidebar.open .sidebar-create,
    .sidebar.open .sidebar-footer .user-info,
    .sidebar.open .sidebar-footer .user-build-meta,
    .sidebar.open .logo-text,
    .sidebar.open .nav-arrow {
        display: initial;
    }

    .sidebar.open .btn-logout {
        display: block;
    }

    .sidebar.open .nav-group.open .nav-group-items {
        display: block;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    /* Show hamburger, hide collapse */
    .hamburger-btn {
        display: block;
    }

    .sidebar-collapse-btn,
    .hidden-nav-trigger {
        display: none !important;
    }

    .main-content {
        padding: 20px;
    }

    /* Table horizontal scroll */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 800px;
    }

    /* Tabs scroll horizontally */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .tab-item {
        white-space: nowrap;
        font-size: 13px;
    }

    /* Toolbar wrapping */
    .toolbar {
        flex-wrap: wrap;
    }

    .search-box {
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* Pagination stacking */
    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Detail rows */
    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: 100%;
        min-width: 0;
    }

    /* Form adjustments */
    .form-card,
    .detail-card {
        padding: 20px;
        max-width: 100%;
    }
}

/* ===========================
   Responsive: Smartphone (≤576px)
   =========================== */
@media (max-width: 576px) {
    .main-content {
        padding: 16px;
    }

    /* Page header stacking */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header h1 {
        font-size: 20px;
    }

    /* Compact top header */
    .top-header {
        padding: 10px 16px;
    }

    .header-user {
        padding: 4px 8px;
    }

    /* Form adjustments */
    .form-card,
    .detail-card {
        padding: 16px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary,
    .form-actions .btn-danger {
        width: 100%;
        justify-content: center;
    }

    /* Toolbar compact */
    .filter-btn {
        flex: 1;
        justify-content: center;
    }

    /* Smaller tab counts */
    .tab-count {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Stub pages */
    .stub-page {
        min-height: 250px;
    }

    .stub-page i {
        font-size: 36px;
    }

    .clients-wizard-steps {
        flex-direction: column;
        gap: 6px;
    }

    .clients-wizard-step {
        width: 100%;
        text-align: left;
    }

    #createClientModal .modal-content,
    #assignGroupModal .modal-content,
    #activateClientModal .modal-content,
    #deactivateClientModal .modal-content,
    #deleteClientModal .modal-content {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    #createClientModal .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #createClientModal .footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #createClientModal .footer-actions .btn-primary,
    #createClientModal .footer-actions .btn-cancel,
    #createClientModal .btn-clear {
        width: 100%;
    }

    #createClientModal .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-inline-fields {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   Login Page
   =========================== */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    /* Above everything */
    background-color: #000000;
}

.login-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 60px;
    background-color: #000000;
    position: relative;
}

.login-image-side {
    flex: 1;
    background-image: url('/images/foto.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-image-side::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/foto2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: login-blink 30s infinite;
}

@keyframes login-blink {
    0%, 85% { opacity: 0; }
    90% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}

.login-logo {
    display: flex;
    align-items: center;
    margin-bottom: 120px;
}

.login-logo .logo-text {
    font-size: 42px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 3px;
}
.login-logo .bee-logo-icon {
    height: 65px;
}
.login-logo .brand-separator {
    height: 50px;
}
.login-logo .logo-text sup {
    font-size: 24px !important;
}

.login-form-wrapper {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.login-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.form-group-login {
    margin-bottom: 24px;
}

.login-validation-alert.validation-summary-valid {
    display: none;
}

.login-validation-alert.validation-summary-errors {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #5a2b2b;
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: #2a1a1a;
    color: #ffd6d6;
    font-size: 13px;
}

.login-validation-alert.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.login-validation-alert.validation-summary-errors li {
    margin: 0;
}

.login-label {
    display: block;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.login-input {
    width: 100%;
    background-color: #242424;
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    color: #FFFFFF;
    font-size: 15px;
}

.login-input:focus {
    outline: 2px solid var(--accent);
    background-color: #2a2a2a;
}

.login-password-field {
    position: relative;
}

.login-password-input {
    padding-right: 56px;
}

.login-password-input::-ms-reveal,
.login-password-input::-ms-clear {
    display: none;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #C6CCD4;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.login-password-field:focus-within .password-toggle-btn,
.password-toggle-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn.is-visible,
.password-toggle-btn.is-visible:hover,
.password-toggle-btn.is-visible:focus-visible {
    color: var(--primary);
    background: rgba(236, 123, 41, 0.16);
}

.password-toggle-icon {
    width: 20px;
    height: 20px;
}

.password-toggle-icon-visible {
    display: none;
}

.password-toggle-btn.is-visible .password-toggle-icon-hidden {
    display: none;
}

.password-toggle-btn.is-visible .password-toggle-icon-visible {
    display: block;
}

.login-field-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.btn-login {
    width: 100%;
    background-color: var(--primary);
    color: var(--accent-brown-button);
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.btn-login:hover {
    opacity: 0.9;
}

.login-link {
    color: #B0B0B0;
    font-size: 14px;
    text-decoration: none;
}

.login-link.small {
    font-size: 12px;
}

.login-link:hover {
    text-decoration: underline;
}

.forgot-success-card {
    margin: 8px 0 10px;
    text-align: center;
}

.forgot-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-success-icon {
    color: #b0b0b0;
}

.forgot-success-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.forgot-success-text {
    margin: 0 0 10px;
    color: #b0b0b0;
    font-size: 15px;
    line-height: 1.6;
}

.forgot-success-sentto {
    margin: 0 0 26px;
    color: #8f9aa8;
    font-size: 15px;
    line-height: 1.6;
}

.forgot-success-sentto strong {
    color: #ffffff;
    font-weight: 600;
    margin-left: 4px;
}

.forgot-resend-form {
    margin: 0;
    color: #98a2b3;
    font-size: 15px;
}

.forgot-resend-btn {
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.forgot-resend-btn:hover {
    text-decoration: underline;
}

.forgot-success-back {
    text-align: center;
    margin-top: 12px;
}

.forgot-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mfa-header-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfa-header-icon {
    color: #b0b0b0;
}

.mfa-title {
    margin-bottom: 8px;
    text-align: center;
}

.mfa-subtitle {
    margin: 0 0 22px;
    color: #98a2b3;
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
}

.mfa-subtitle strong {
    color: #ffffff;
    font-weight: 600;
    margin-left: 4px;
}

.mfa-code-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.mfa-code-input {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: 1px solid var(--primary);
    background: #242424;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    padding: 0;
}

.mfa-code-input:focus {
    outline: 2px solid #f4a261;
    border-color: #f4a261;
    background: #2a2a2a;
}

.mfa-expiry-text {
    margin: 0 0 18px;
    text-align: center;
    color: #98a2b3;
    font-size: 13px;
}

.mfa-submit-btn {
    margin-top: 0;
    margin-bottom: 20px;
}

.mfa-resend-form {
    margin: 0;
    color: #98a2b3;
    text-align: center;
    font-size: 15px;
}

.mfa-resend-btn {
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mfa-resend-btn:hover {
    text-decoration: underline;
}

.mfa-back-wrap {
    margin-top: 16px;
    text-align: center;
}

.mfa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.set-password-success-card {
    text-align: center;
    margin-top: 10px;
}

.set-password-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
}

.set-password-success-title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
}

.set-password-success-text {
    margin: 0 0 28px;
    color: #98a2b3;
    font-size: 16px;
    line-height: 1.4;
}

.set-password-login-btn {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    margin-top: 0;
}

@media (max-width: 992px) {
    .login-image-side {
        display: none;
    }

    .login-form-side {
        padding: 40px;
    }
}

/* Helper classes */
.main-wrapper.full-width {
    margin-left: 0;
    width: 100%;
}

.main-content.no-padding {
    padding: 0 !important;
}

/* ===========================
   Modals
   =========================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 16px;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
}

.btn-close-modal:hover {
    color: var(--text);
}

.modal-body {
    padding: 16px 32px;
}

/* Radio Toggle for User Type */
.user-type-toggle {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.radio-label input[type="radio"] {
    display: none;
}

.custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    /* Slightly rounded square according to design */
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

.radio-label input[type="radio"]:checked+.custom-radio {
    background-color: var(--primary);
    border-color: var(--primary);
}

.radio-label input[type="radio"]:checked+.custom-radio::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Form Grid in Modal */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(320px, 2.1fr);
    align-items: center;
    gap: 16px;
}

.form-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="time"],
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    border-color: var(--primary);
}

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

.form-row textarea {
    resize: vertical;
    min-height: 72px;
}

.field-required-marker {
    color: #ff3b30;
    font-weight: 700;
}

.wizard-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wizard-inline-fields-2 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.wizard-helper-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 420px;
}

.phone-composite-row {
    grid-template-columns: 108px 1fr;
}

.broker-row {
    grid-template-columns: 1fr auto;
}

.btn-link-inline {
    text-decoration: none;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-link-inline:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Phone input group */
.phone-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.country-code-select {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    flex: 0 0 108px;
    background-color: #ffffff;
}

.phone-input-group input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Select wrapper for custom arrow */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.toolbar .select-wrapper select {
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--surface);
    min-width: 180px;
    cursor: pointer;
}

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

.select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
    z-index: 0;
}

/* Readonly input styling */
.readonly-input {
    background-color: #f9fafb !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 32px;
}

.btn-clear {
    background: none;
    border: none;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.btn-clear:hover {
    color: var(--text-secondary);
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cancel:hover {
    background: #f9fafb;
}

.permissions-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

.permissions-summary-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.permissions-summary-actions {
    display: flex;
    align-items: center;
}

.permissions-config-btn {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.permissions-picker-overlay {
    z-index: 1100;
}

.permissions-picker-modal {
    max-width: 760px;
    width: min(760px, 92vw);
    max-height: 86vh;
    border-radius: 14px;
}

.permissions-picker-header {
    padding-bottom: 12px;
}

.permissions-picker-toolbar {
    padding: 0 32px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.permissions-search-box {
    position: relative;
    flex: 1 1 auto;
}

.permissions-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 13px;
}

.permissions-search-box input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px 9px 34px;
    font-size: 14px;
}

.permissions-picker-selected {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.permissions-picker-body {
    padding: 14px 32px;
    overflow-y: auto;
    max-height: calc(86vh - 210px);
}

.permission-group-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
}

.permission-group-toggle {
    border: 0;
    background: #f8fafc;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    cursor: pointer;
}

.permission-group-toggle i {
    transition: transform 0.18s ease;
    color: var(--text-secondary);
}

.permission-group-toggle.is-open i {
    transform: rotate(180deg);
}

.permission-group-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-group-title {
    font-size: 14px;
    font-weight: 600;
}

.permission-group-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.permission-group-panel {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border);
}

.permission-group-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.group-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.permission-group-clear {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.permission-items-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.35;
}

.permission-item input[type="checkbox"] {
    margin: 0;
}

.permissions-picker-footer {
    border-top: 1px solid var(--border);
    padding: 14px 32px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.clients-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.clients-empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
    color: #6B7280;
}

.clients-empty-state h3 {
    margin-bottom: 6px;
    font-size: 18px;
    color: var(--text);
}

/* Page-based wizard should use full content width, not modal width. */
.clients-wizard-page-shell {
    width: 100%;
}

.clients-wizard-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.clients-wizard-header-card .page-header {
    margin-bottom: 0;
}

.clients-wizard-header {
    min-height: 52px;
}

.clients-wizard-header h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.clients-wizard-header .page-header-actions {
    gap: 10px;
}

.clients-wizard-header .btn-cancel,
.clients-wizard-header .btn-primary {
    min-height: 40px;
    padding: 8px 20px;
    border-radius: 12px;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page {
    width: 100%;
    max-width: none;
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: 12px;
    overflow: visible;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page .modal-body {
    padding: 22px 24px;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page .modal-footer {
    padding: 18px 24px 22px;
    border-top: 1px solid var(--border);
}

.clients-wizard-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 26px;
    padding: 4px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f9fafb;
}

.clients-wizard-step {
    border: 1px solid transparent;
    background: transparent;
    color: #667085;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.clients-wizard-step::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d5dd;
    flex: 0 0 auto;
}

.clients-wizard-step.active {
    border-color: transparent;
    color: #ec7b29;
    background: rgba(251, 229, 212, 0.5);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

.clients-wizard-step.active::after {
    background: #d0d5dd;
}

.clients-wizard-step:hover:not(.active) {
    background: #ffffff;
    border-color: #eaecf0;
    color: #344054;
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.clients-wizard-step.has-errors::after {
    background: #ef4444;
}

.clients-wizard-pane {
    display: none;
}

.clients-wizard-pane.active {
    display: block;
}

/* Keep steps full-width, but center form fields in a narrower middle area (Figma-like). */
.clients-wizard-page .clients-wizard-pane .form-grid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.clients-wizard-page .clients-wizard-pane>.btn-secondary {
    display: inline-flex;
    margin-top: 6px;
    margin-left: calc((100% - min(760px, 100%)) / 2);
}

.clients-wizard-page .clients-wizard-pane .form-row {
    grid-template-columns: minmax(170px, 0.85fr) minmax(340px, 2.15fr);
}

.clients-wizard-pane[data-step="3"] .form-grid {
    max-width: 700px;
}

.clients-wizard-pane[data-step="3"] .form-row {
    grid-template-columns: minmax(140px, 0.8fr) minmax(360px, 2.2fr);
    gap: 14px;
}

.clients-wizard-pane[data-step="3"] textarea {
    min-height: 96px;
}

/* Contract fees tab should occupy a wider middle area (roughly 3 middle columns in Figma). */
.clients-wizard-pane[data-step="4"] .form-grid {
    max-width: 980px;
}

.clients-wizard-pane[data-step="4"] .form-row {
    grid-template-columns: minmax(150px, 0.75fr) minmax(620px, 2.45fr);
    gap: 16px;
}

.clients-wizard-pane[data-step="4"] .contract-fees-row>label:empty {
    display: block;
    visibility: hidden;
}

.clients-wizard-pane[data-step="4"] .contract-fees-title {
    grid-column: 1 / -1;
}

/* Accordion in Figma spans the full middle content block, not only right field column. */
.clients-wizard-pane[data-step="4"] .contract-fees-row {
    grid-template-columns: 1fr;
}

.clients-wizard-pane[data-step="4"] .contract-fees-row>label {
    display: none;
}

.clients-wizard-pane[data-step="4"] .contract-fees-accordion {
    width: 100%;
    max-width: none;
}

@media (max-width: 980px) {
    .clients-wizard-page .clients-wizard-pane .form-grid {
        max-width: 100%;
    }

    .clients-wizard-pane[data-step="4"] .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-wizard-page .clients-wizard-pane>.btn-secondary {
        margin-left: 0;
    }
}

@media (max-width: 1100px) {
    .clients-wizard-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .clients-wizard-header h1 {
        font-size: 24px;
    }

    .clients-wizard-page-shell .modal-content.clients-wizard-page .modal-body,
    .clients-wizard-page-shell .modal-content.clients-wizard-page .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .clients-wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clients-wizard-page .clients-wizard-pane .form-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }

    .clients-wizard-page .clients-wizard-pane .form-row label:empty {
        display: none;
    }

    .wizard-inline-fields-2,
    .phone-composite-row {
        grid-template-columns: 1fr;
    }
}

.clients-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    width: 100%;
}

/* ── Tab 5: Company relations ── */
.company-relations-wrapper {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.relation-choice-row {
    display: block;
}

.relation-profile-option {
    display: grid;
    gap: 6px;
}

.relation-profile-option .wizard-inline-check {
    gap: 10px;
}

.relation-profile-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
}

.relation-profile-option .wizard-helper-text {
    margin-left: 30px;
}

.relation-group-search-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 16px;
}

.relation-group-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd6df;
    border-radius: 9px;
    background: #f9fbfd;
    color: #475467;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    padding: 10px 12px;
}

.relation-group-notice i {
    color: #475467;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-relation-search-clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    z-index: 4;
    line-height: 1;
}

.btn-relation-search-clear:hover {
    color: #d92d20;
}

/* Search section */
.relation-search-section {
    display: grid;
    gap: 8px;
}

.relation-search-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.relation-search-wrapper {
    position: relative;
}

.relation-search-wrapper input {
    width: 100%;
    padding-left: 36px;
    padding-right: 38px;
    min-height: 42px;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}

.relation-search-wrapper::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 3;
}

.relation-search-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 12px;
    pointer-events: none;
    z-index: 3;
}

.relation-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
    max-height: 300px;
    overflow-y: auto;
    z-index: 25;
}

.company-name-search-wrapper {
    position: relative;
    width: 100%;
}

.relation-search-option {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.relation-search-option:hover {
    background: #f8fafc;
}

.relation-search-option .search-profile-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.relation-search-option .search-profile-badge.badge-parent {
    background: #ffe8d5;
    color: #ad4f00;
}

.relation-search-option .search-profile-badge.badge-child {
    background: #e7ecf3;
    color: #344054;
}

.relation-search-more {
    padding: 8px 12px;
    font-size: 12px;
    color: #667085;
    border-top: 1px solid #e4e7ec;
    text-align: center;
}

.relation-search-option-create {
    color: var(--primary-text);
    font-weight: 500;
    justify-content: flex-start;
}

.relation-search-option-create i {
    color: var(--primary-text);
    font-size: 13px;
}

.relation-search-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #667085;
}

/* Group members display */
.group-members-container {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e6e8eb;
}

.group-members-container .relation-search-label {
    margin-bottom: 8px;
    color: #344054;
    font-weight: 500;
}

.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-members-list .group-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
}

.group-member-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-member-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.group-member-badge.parent {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFE0B2;
}

.group-member-badge.child {
    background: #f0f4f8;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.group-member-actions {
    display: flex;
    gap: 6px;
}

.group-member-self {
    background: #f5f6f8;
    border-color: #d8dde5;
}

.group-member-self .group-member-name {
    font-weight: 600;
}

.group-member-badge-self {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: #f0f0f0;
    color: #667085;
    border: 1px solid #d0d5dd;
    margin-left: 4px;
}

.group-member-btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #d0d5dd;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.group-member-btn:hover {
    background: #f8fafc;
}

.group-member-btn.make-parent {
    color: #065F46;
    border-color: #b7ebcf;
    background: #ecfdf3;
}

.group-member-btn.make-parent:hover {
    background: #d1fae5;
}

.group-member-btn.make-child {
    color: #1565C0;
    border-color: #BBDEFB;
    background: #E3F2FD;
}

.group-member-btn.make-child:hover {
    background: #BBDEFB;
}

.group-member-btn.remove {
    color: #d92d20;
    border-color: #fecaca;
    background: #fef2f2;
}

.group-member-btn.remove:hover {
    background: #fee2e2;
}

/* Company relation rows */
.company-relations-list {
    display: grid;
    gap: 10px;
}

.company-relation-row {
    border: 1px solid #e6dfd4;
    border-radius: 12px;
    background: #fcfaf8;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(200px, 2fr) auto auto;
    gap: 12px;
    align-items: center;
}

.company-relation-name-cell input {
    width: 100%;
    min-height: 40px;
}

.company-relation-row[data-is-self="true"] .company-relation-name-cell input {
    background: #f5f6f8;
    border-color: #d8dde5;
    font-weight: 600;
}

.company-relation-badges {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 30px;
}

.company-relation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #e7ecf3;
    color: #0f172a;
    white-space: nowrap;
}

.company-relation-badge.parent-badge {
    background: #ffe8d5;
    color: #ad4f00;
}

.company-relation-badge.parent-badge i {
    color: var(--primary-text);
    font-size: 11px;
}

.company-relation-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.company-relation-actions .btn-clear {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.company-relation-actions .btn-clear i {
    color: #6B7280;
}

.btn-relation-remove {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #667085;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.btn-relation-remove:hover {
    background: #fef3f2;
    border-color: #fda29b;
    color: #d92d20;
}

/* Group name box */
.relation-group-name-box {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 16px;
    display: grid;
    gap: 8px;
}

.relation-group-name-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.relation-group-name-box input {
    min-height: 42px;
}

.relation-group-name-box .wizard-helper-text {
    margin-top: 2px;
}

@media (max-width: 760px) {
    .company-relations-wrapper {
        max-width: 100%;
    }

    .company-relation-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 12px;
    }

    .company-relation-actions {
        justify-content: flex-start;
    }
}

#relationActionModal .delete-modal {
    max-width: 520px;
    padding: 24px 24px 20px;
}

#relationActionModal .delete-modal-subtitle {
    line-height: 1.45;
    max-width: 430px;
}

#relationActionModal .delete-modal-footer {
    margin-top: 24px;
}

.clients-contacts-stack {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.client-contact-card {
    border: 1px solid #e8ddcf;
    background: #f8f4ef;
    border-radius: 12px;
    padding: 16px 16px 18px;
    margin-bottom: 16px;
}

.client-contact-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid #d8dfe9;
}

.client-contact-card-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
}

.client-contact-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.client-contact-remove-action {
    color: #f04438;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 2px 0;
}

.client-contact-remove-action:hover {
    color: #d92d20;
}

.client-contact-toggle-action {
    color: #344054;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.client-contact-card-body {
    padding-top: 14px;
}

.client-contact-card-body .client-contact-row {
    margin-bottom: 10px;
}

.client-contact-card-body .client-contact-row:last-child {
    margin-bottom: 0;
}

.client-contact-card .form-row {
    grid-template-columns: minmax(210px, 0.95fr) minmax(360px, 2.05fr);
    gap: 14px;
}

.client-contact-card .select-wrapper select {
    background-color: #ffffff;
}

.client-contact-row-checkbox {
    margin-top: -2px;
    margin-bottom: 12px;
}

.client-contact-row-claim-emails {
    margin-bottom: 14px;
}

.client-contact-row-comment textarea {
    min-height: 104px;
}

.clients-inline-fields-claim-info {
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.clients-inline-fields-claim-info .btn-primary {
    min-height: 42px;
    padding: 8px 18px;
    border-radius: 16px;
}

.client-claim-email-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
}

.client-claim-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 12px;
}

.client-claim-email-remove {
    border: none;
    background: transparent;
    color: #475467;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.client-contact-pipeline-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
}

.client-contact-pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 12px;
}

.client-contact-pipeline-remove {
    border: none;
    background: transparent;
    color: #475467;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.clients-add-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(780px, 100%);
    border: 1px solid #f08a33;
    border-radius: 14px;
    color: #f08a33;
    font-weight: 600;
    margin: 4px auto 0;
    padding: 11px 16px;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.clients-add-contact-btn:hover:not(:disabled) {
    background: #fff3e8;
    color: #db6f1c;
    border-color: #db6f1c;
}

.clients-add-contact-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 760px) {

    .client-contact-card {
        padding: 12px;
    }

    .client-contact-card-title {
        font-size: 26px;
    }

    .client-contact-card .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-inline-fields-claim-info {
        grid-template-columns: 1fr;
    }

    .client-contact-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-contact-card-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.btn-remove-row {
    padding: 10px 12px;
    white-space: nowrap;
}

.clients-inline-toggle {
    display: flex;
    gap: 18px;
    align-items: center;
}

.contract-fees-row {
    align-items: flex-start;
}

.contract-fees-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.contract-fees-row>label:empty {
    visibility: hidden;
}

.contract-fees-accordion {
    width: 100%;
    border: 1px solid #d7dce4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.contract-fees-section+.contract-fees-section {
    border-top: 1px solid #e4e7ec;
}

.contract-fees-section-header {
    width: 100%;
    border: 0;
    background: #f7f8fb;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: #667085;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.contract-fees-section-header:hover {
    background: #f2f4f7;
}

.contract-fees-section-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.contract-fees-section-body {
    padding: 10px 12px 12px;
}

.contract-fees-subtitle {
    margin-bottom: 7px;
    color: #475467;
    font-weight: 600;
    font-size: 14px;
}

.contract-fees-radio-group,
.contract-fees-radio-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.contract-fees-radio-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.contract-fees-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contract-fees-inline-input {
    width: 68px;
    min-width: 68px;
    height: 34px;
    padding: 6px 8px;
}

.contract-fees-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contract-fees-col-field label {
    display: block;
    margin-bottom: 4px;
    color: #475467;
    font-size: 14px;
}

@media (max-width: 980px) {
    .contract-fees-two-col {
        grid-template-columns: 1fr;
    }

    .contract-fees-inline-row {
        width: 100%;
    }

    .contract-fees-inline-input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .contract-fees-title {
        font-size: 28px;
    }

    .contract-fees-radio-group {
        gap: 8px;
    }
}

.field-error {
    border-color: #f04438 !important;
    background: #fff5f5;
}

.field-error-text {
    color: #b42318;
    font-size: 12px;
    margin-top: 4px;
}

.user-company-multiselect {
    position: relative;
}

.user-company-control {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 34px 0 12px;
    cursor: text;
}

.user-company-control input,
.form-row .user-company-control input[type="text"] {
    border: none;
    outline: none;
    width: 100%;
    padding: 0;
    font-size: 14px;
    color: var(--text);
    background: transparent;
}

.user-company-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
    display: none;
}

.user-company-dropdown.is-open {
    display: block;
}

.user-company-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text);
}

.user-company-option:hover {
    background: #f8fafc;
}

.user-company-option input {
    width: 16px;
    height: 16px;
}

.user-company-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.user-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 13px;
}

.user-company-chip-overflow {
    background: #f2f4f7;
    color: #475467;
}

.user-company-chip-remove {
    border: none;
    background: #6b7280;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.assign-selected-list-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.assign-selected-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.assign-selected-empty {
    font-size: 13px;
    color: var(--text-secondary);
}

.assign-selected-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assign-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

.assign-selected-name {
    font-size: 13px;
    color: var(--text);
}

.assign-selected-remove {
    padding: 4px 8px;
    font-size: 12px;
}

.clients-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 12px;
}

.clients-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.clients-draft-pill {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #fff7ed;
    border: 1px solid #fcd9bd;
    color: #9a4a12;
}

.assign-group-picker {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
}

/* Roles page */
.roles-list {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
}

.role-card-header:hover {
    background: #fafafa;
}

.role-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-card-chevron {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
}

.role-card.expanded .role-card-chevron {
    transform: rotate(90deg);
}

.role-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.role-card-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.role-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.role-type-internal {
    background: #e0f2fe;
    color: #0369a1;
}

.role-type-external {
    background: #fef3c7;
    color: #92400e;
}

.role-card-panel {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border);
}

.role-card-actions {
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-save-status {
    font-size: 13px;
}

.permissions-summary-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-permissions-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

/* Business info */
.business-info-list {
    gap: 14px;
}

.business-info-card {
    box-shadow: var(--shadow);
}

.business-info-card-header {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    gap: 16px;
}

.business-info-card-header-left {
    min-width: 0;
    flex: 1;
}

.business-info-card-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.business-info-card-name {
    font-size: 16px;
}

.business-info-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-info-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.business-info-badge-muted {
    background: #f8fafc;
    border-color: #d0d5dd;
    color: #475467;
}

.business-info-badge-accent {
    background: #ecfdf3;
    border-color: #b7ebcf;
    color: #065F46;
}

.business-info-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.business-info-status-active {
    background: #ecfdf3;
    border-color: #b7ebcf;
    color: #065F46;
}

.business-info-status-inactive {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
}

.business-info-status-draft {
    background: #fffaeb;
    border-color: #fedf89;
    color: #9A3C06;
}

.business-info-status-neutral {
    background: #f8fafc;
    color: #344054;
}

.business-info-card-panel {
    padding-top: 18px;
}

.business-info-card-panel.is-hidden {
    display: none;
}

.business-info-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.business-info-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafafa;
    padding: 16px;
}

.business-info-section-full {
    grid-column: 1 / -1;
}

.business-info-section h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}

.business-info-kv-list {
    display: grid;
    gap: 12px;
}

.business-info-kv-list-compact {
    gap: 10px;
}

.business-info-kv-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.5fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e8eb;
}

.business-info-kv-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.business-info-kv-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.business-info-kv-value {
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
}

.business-info-kv-value-prewrap {
    white-space: pre-line;
}

.business-info-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.business-info-contact-card {
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 16px;
}

.business-info-contact-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.business-info-empty-copy {
    font-size: 13px;
    color: var(--text-muted);
}

.business-info-empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

@media (max-width: 1024px) {
    .business-info-sections {
        grid-template-columns: 1fr;
    }

    .business-info-section-full {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .business-info-card-header {
        align-items: flex-start;
    }

    .business-info-status {
        margin-left: auto;
    }

    .business-info-kv-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .business-info-contact-list {
        grid-template-columns: 1fr;
    }
}

.custom-permissions-indicator i {
    color: var(--warning);
    font-size: 11px;
}

.pipelines-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

.pipelines-summary-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.pipelines-summary-actions {
    display: flex;
    align-items: center;
}

.custom-permissions-indicator span {
    color: var(--text-secondary);
}

#btnResetToRoleDefaults {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    font-size: 11px;
    color: var(--primary-text);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

#btnResetToRoleDefaults:hover {
    color: var(--primary-hover);
}

#btnResetToRoleDefaults:hover {
    background: #fde68a;
}

/* ═══════════════════════════════════════════════
   CLAIMS MODULE
   ═══════════════════════════════════════════════ */

/* Color dot in claims table */
.claims-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Filter badge on Filters button */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Claims compact header — matches MTPL stats-header */
.claims-header {
    --gold: #ffd074;
    --gold-dark: #d4a843;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.claims-header-tabs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.claims-tab {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.claims-tab:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}
.claims-tab.active {
    background: var(--gold);
    color: #000;
    border-color: transparent;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #ef4444;
}
.claims-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0,0,0,0.1);
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}
.claims-tab.active .claims-tab-count {
    background: rgba(0,0,0,0.15);
}
.claims-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.claims-header-btn {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.claims-header-btn:hover {
    background: var(--gold);
}
.claims-create-btn {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
    font-weight: 600;
}
.claims-create-btn:hover {
    opacity: 0.9;
}
.claims-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold);
    color: #000;
    font-size: 10px;
    font-weight: 700;
}
.claims-filters.claims-filters-hidden {
    display: none;
}

/* Filter chips row */
/* Stale claim duration (>30 days open) */
.claim-duration-stale {
    color: #ef4444;
    font-weight: 600;
}

.claims-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 12px;
}

.claims-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.claims-filter-chip:hover {
    background: #fee4e2;
    border-color: #f04438;
    color: #f04438;
}

.claims-filter-chip i {
    font-size: 10px;
}

/* Filter Sidebar */
.claims-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.claims-filter-sidebar {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100vh;
    background: #fff;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.25s ease;
}

.claims-filter-sidebar.open {
    right: 0;
}

.claims-filter-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.claims-filter-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.claims-filter-sidebar-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
    padding: 4px;
}

.claims-filter-sidebar-close:hover {
    color: var(--text);
}

.claims-filter-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.claims-filter-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.claims-filter-field input[type="text"],
.claims-filter-field input[type="date"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
}

.claims-filter-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-filter-multiselect {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    font-size: 14px;
}

.claims-filter-multiselect option {
    padding: 6px 8px;
}

.claims-filter-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Toggle switch */
.claims-filter-toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.claims-filter-toggle-field > label:first-child {
    margin-bottom: 0;
}

.claims-filter-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.claims-filter-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.claims-filter-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.2s;
}

.claims-filter-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.claims-filter-toggle input:checked + .claims-filter-toggle-slider {
    background: var(--primary);
}

.claims-filter-toggle input:checked + .claims-filter-toggle-slider::before {
    transform: translateX(18px);
}

.claims-filter-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.claims-filter-clear {
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.claims-filter-clear:hover {
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   GLOBAL ALERT / CONFIRM MODAL
   ═══════════════════════════════════════════════ */

.hive-alert-modal { max-width: 480px; border-radius: 16px; }
.hive-alert-modal .modal-header { padding: 20px 24px 8px; border-bottom: 0; }
.hive-alert-modal .modal-header h2 { font-size: 18px; font-weight: 700; color: #202635; }
.hive-alert-modal .modal-body { padding: 8px 24px 16px; min-height: auto; }
.hive-alert-modal .modal-body p { font-size: 15px; line-height: 1.5; color: #3b4252; }
.hive-alert-modal .modal-footer { padding: 12px 24px 20px; border-top: 0; }
.hive-alert-modal .btn-cancel { min-width: 80px; min-height: 40px; border-radius: 12px; }
.hive-alert-modal #hiveAlertOk { min-width: 80px; min-height: 40px; border-radius: 12px; }

/* ═══════════════════════════════════════════════
   PIPELINE SELECTION MODAL
   ═══════════════════════════════════════════════ */

.pipeline-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* jQuery fadeIn sets display:block — override to flex for centering */
.pipeline-modal-overlay[style*="block"] {
    display: flex !important;
}

.pipeline-modal {
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 32px;
    max-width: 640px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.pipeline-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.pipeline-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0;
    font-family: var(--font-heading);
}

.pipeline-modal-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #667085);
    margin: 4px 0 0;
}

.pipeline-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #667085);
    padding: 0 0 0 16px;
    line-height: 1;
}

.pipeline-modal-close:hover {
    color: var(--text-primary, #1a1a1a);
}

.pipeline-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pipeline-card-grid .pipeline-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary, #1a1a1a);
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.pipeline-card-grid .pipeline-card:hover {
    border-color: var(--accent-orange-line, #F97316);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

.pipeline-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.pipeline-card-name {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 480px) {
    .pipeline-card-grid {
        grid-template-columns: 1fr;
    }
    .pipeline-modal {
        padding: 20px;
    }
}

/* ═══════════════════════════════════════════════
   CLAIMS WIZARD
   ═══════════════════════════════════════════════ */

.claims-wizard-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    min-height: calc(100vh - 180px);
}

.claims-wizard-main {
    display: flex;
    flex-direction: column;
}

.claims-wizard-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.claims-wizard-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}

.claims-wizard-header-top h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.claims-wizard-header-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-meta-link {
    color: inherit;
    text-decoration: underline;
    transition: color 0.15s;
}

.header-meta-link:hover {
    color: var(--primary);
}

.claims-wizard-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.claims-wizard-header-actions > .btn-primary,
.claims-wizard-header-actions > .btn-secondary {
    flex: 0 0 auto;
    white-space: nowrap;
}

.claims-wizard-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.claims-wizard-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #EB7B28;
}

.claims-wizard-section-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.claims-wizard-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#cmrTransportInfo,
#insurerRegistrationFields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.claims-wizard-form-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start;
    gap: 12px;
}

.claims-wizard-form-row > label {
    padding-top: 9px;
}

.claims-wizard-form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.claims-wizard-form-row input,
.claims-wizard-form-row select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

.claims-wizard-form-row input:focus,
.claims-wizard-form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-wizard-form-row .auto-filled {
    background: #eff6ff;
    border-color: #93c5fd;
    color: var(--text-secondary);
}

/* Client autocomplete (claim creation) */
.client-autocomplete {
    position: relative;
    width: 100%;
}

.client-autocomplete-input {
    width: 100%;
    padding-right: 38px !important;
}

.client-autocomplete-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-autocomplete-clear:hover {
    color: #344054;
}

.client-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    display: none;
}

.client-autocomplete-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-autocomplete-item:hover,
.client-autocomplete-item.highlighted {
    background: var(--bg);
}

.client-autocomplete-item-name {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.client-autocomplete-item-code {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 8px;
    flex-shrink: 0;
}

.client-autocomplete-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.claims-wizard-form-row-inline {
    display: flex;
    gap: 8px;
}

.claims-wizard-form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.claims-wizard-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-inline-action {
    align-self: flex-start;
}

.claims-wizard-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.claims-wizard-form-label-row label {
    margin: 0;
}

.claims-wizard-contract-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #16a34a;
    padding: 6px 12px;
    background: #f0fdf4;
    border-radius: var(--radius-sm);
    border: 1px solid #bbf7d0;
}

.claims-wizard-contract-indicator i {
    color: #16a34a;
}

.claims-wizard-form-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    grid-column: 2;
}

/* Wizard right sidebar */
.claims-wizard-sidebar {
    position: sticky;
    top: -25px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh + 25px);
}

.claims-wizard-sidebar-scroll {
    --claims-wizard-sidebar-scrollbar-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(39, 48, 65, 0.22) transparent;
    width: calc(100% + var(--claims-wizard-sidebar-scrollbar-width));
    margin-right: calc(-1 * var(--claims-wizard-sidebar-scrollbar-width));
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(39, 48, 65, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.claims-wizard-sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(39, 48, 65, 0.28);
    background-clip: content-box;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sidebar sticky action bar */
.claims-wizard-sidebar-actions-card {
    background: var(--surface);
    border: 1px solid #e8edf3;
    border-radius: 18px;
    padding: 16px 20px;
}

.claims-wizard-sidebar-actions-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.claims-wizard-sidebar-actions-top:has(.claims-wizard-sidebar-claim-number:not(:empty)) {
    margin-bottom: 12px;
}

.claims-wizard-sidebar-actions-top:not(:has(.claims-wizard-sidebar-claim-number:not(:empty))) {
    display: none;
}

.claims-wizard-sidebar-claim-number {
    font-size: 16px;
    font-weight: 700;
    color: #273041;
}

.claims-wizard-sidebar-actions-buttons {
    display: flex;
    gap: 8px;
}

.claims-wizard-sidebar-actions-buttons .btn-secondary,
.claims-wizard-sidebar-actions-buttons .btn-primary {
    flex: 1;
    justify-content: center;
}

.claims-wizard-sidebar-card {
    background: var(--surface);
    border: 1px solid #e8edf3;
    border-radius: 18px;
    padding: 18px 20px;
}

.claims-wizard-sidebar-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
    color: #273041;
    text-transform: none;
    letter-spacing: 0;
}

.claims-wizard-sidebar-subsection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.claims-wizard-sidebar-subsection h5 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #273041;
}

.claims-wizard-sidebar-static-field {
    background: #f8fafc;
    border: 2px solid #D0D5DD;
    color: #344054;
    cursor: default;
    padding-right: 18px !important;
}

.claims-wizard-sidebar-static-field:disabled {
    opacity: 1;
    -webkit-text-fill-color: #344054;
}

/* Vertical step indicators */
.claims-wizard-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-steps::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 27px;
    width: 2px;
    background: #cfd4dc;
}

.claims-wizard-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #0f1728;
    border: 1.5px solid #cfd4dc;
    border-radius: 18px;
    background: #f8f9fb;
    cursor: default;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    z-index: 1;
}

.claims-wizard-step.active {
    color: #ec7b29;
    border-color: #ec7b29;
    background: #fff8ee;
    box-shadow: 0 2px 6px rgba(236, 123, 41, 0.15);
}

.claims-wizard-step.completed {
    color: #16a34a;
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.claims-wizard-step-label {
    flex: 1 1 auto;
    min-width: 0;
}

.claims-wizard-step.active .claims-wizard-step-alert {
    color: #ff0000;
}

.claims-wizard-steps .claims-wizard-step-alert {
    flex: 0 0 auto;
    font-size: 13px;
    color: #ff0000;
    display: none;
}

.claims-wizard-steps .claims-wizard-step.has-errors .claims-wizard-step-alert {
    display: inline;
}

.claims-wizard-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cfd4dc;
    color: #0f1728;
    flex-shrink: 0;
}

.claims-wizard-step.active .claims-wizard-step-number {
    background: #ec7b29;
    border-color: #ec7b29;
    color: #fff;
}

.claims-wizard-step.completed .claims-wizard-step-number {
    background: #16a34a;
    color: #fff;
}

/* Quick actions placeholder */
.claims-wizard-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-quick-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Status & Priority in sidebar */
.claims-wizard-status-row {
    display: block;
    padding: 0;
}

.claims-wizard-status-row + .claims-wizard-status-row {
    margin-top: 18px;
}

.claims-wizard-status-row label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #273041;
}

/* Sections spacing */
.claims-wizard-section {
    margin-bottom: 16px;
}

.claims-wizard-section:last-child {
    margin-bottom: 0;
}

/* Section header with collapse toggle */
.claims-wizard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin: -24px -24px 16px -24px;
    padding: 16px 24px;
    background: #FFF8ED;
    border-bottom: 2px solid #EB7B28;
    border-radius: var(--radius) var(--radius) 0 0;
}

.claims-wizard-section-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claims-wizard-section-chevron {
    color: #EB7B28;
    font-size: 14px;
    transition: transform 0.2s;
}

.claims-wizard-required-note {
    font-size: 12px;
    color: #475466;
    font-weight: 500;
}

/* ===========================
   Fork-claim modal (Snieguolė #20)
   =========================== */
/* Fork-claim modal (plan #20) — overrides the narrower .bulk-action-panel
   width because the two-column carry/drop layout + tables need more room.
   Also re-asserts viewport-level positioning and sits above the claim-chat
   drawer (z-index 1050) so the modal doesn't get clipped on the right when
   the drawer is open (Snieguolė #25B v1.3 regression). */
#forkClaimModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1100 !important;
}

#forkClaimModal .modal-content.bulk-action-panel {
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.fork-modal-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.fork-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 20px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.fork-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fork-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fork-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.fork-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Stacked vertical carry/drop sections (revised 2026-04-18 — was side-by-side).
   Top section shows actual source-claim field values that carry to the fork;
   bottom section shows what stays on the original only. Rows are key/value
   pairs on a two-column <dl>. */
.fork-carry-drop {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.fork-carry-section,
.fork-drop-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.fork-carry-section h4,
.fork-drop-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fork-carry-section h4 i { color: var(--success); }
.fork-drop-section h4 i { color: var(--warning); }

.fork-field-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 4px;
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.fork-field-list dt {
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}
.fork-field-list dd {
    margin: 0;
    word-break: break-word;
}
.fork-field-list-empty {
    font-style: italic;
    color: var(--text-secondary, #9ca3af);
}

/* Legacy bullet-list classes kept for any other carry/drop consumers. */
.fork-carry-column,
.fork-drop-column {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.fork-carry-column h4,
.fork-drop-column h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fork-carry-column h4 i { color: var(--success); }
.fork-drop-column h4 i { color: var(--warning); }

.fork-carry-column ul,
.fork-drop-column ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text);
}

.fork-carry-column li,
.fork-drop-column li {
    margin-bottom: 4px;
}

.fork-subsection {
    margin-top: 16px;
}

.fork-subsection h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text);
}

.fork-back-link-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    color: #1e40af;
    font-size: 13px;
    margin: 16px 0 12px;
}

.fork-back-link-note i {
    font-size: 16px;
    flex-shrink: 0;
}

.fork-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--primary-light);
    border: 1px solid var(--accent-orange);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.fork-auto-invoice-row {
    color: var(--text-secondary);
    font-style: italic;
}

/* ===========================
   Duplicate-check banner (VIN + plate — Snieguolė #7 / #21)
   =========================== */
.claim-duplicate-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(214, 158, 46, 0.12);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    color: #8a6500;
    font-size: 12px;
}

.claim-duplicate-banner i {
    color: var(--warning);
    flex-shrink: 0;
}

.claim-duplicate-banner a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Section number badge (orange circle) */
.claims-wizard-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: #EB7B28;
    color: #fff;
    flex-shrink: 0;
}

/* Multiclaim copy-field chips */
.mc-copy-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    opacity: 0.5;
    text-decoration: line-through;
}

.mc-copy-chip.mc-copy-chip--active {
    opacity: 1;
    text-decoration: none;
    background: rgba(236, 123, 41, 0.15);
    border-color: #EB7B28;
    color: var(--text);
}

.mc-copy-chip:hover {
    border-color: #EB7B28;
}

/* Copy-to-clipboard icon button (used next to claim number in form header) */
.claim-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary, #6b6b6b);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.claim-copy-btn:hover {
    background: rgba(232, 120, 10, 0.08);
    color: var(--primary, #E8780A);
    border-color: rgba(232, 120, 10, 0.25);
}

.claim-copy-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(232, 120, 10, 0.25);
}

.claim-copy-btn .copy-icon-rest,
.claim-copy-btn .copy-icon-done {
    font-size: 13px;
    line-height: 1;
}

.claim-copy-btn .copy-icon-done {
    color: #16a34a;
}

/* Pipeline badge in header */
.claims-wizard-pipeline-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-brown-button);
    vertical-align: middle;
    margin-left: 8px;
}

.claim-email-tracking-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
    text-decoration: none;
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
}

.claim-email-tracking-badge:hover {
    text-decoration: none;
    color: #101828;
    border-color: #98a2b3;
}

.claim-email-tracking-badge.is-active {
    color: #854a0e;
    background: #fff7ed;
    border-color: #fed7aa;
}

.claim-email-tracking-badge.is-overdue {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.claim-email-tracking-badge.is-replied {
    color: #065f46;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

/* Claim email compose modal */
.claim-email-modal .form-group {
    margin-bottom: 18px;
}

.claim-email-modal .form-group[hidden] { display: none; }
.claim-email-modal .claim-email-to-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.claim-email-modal .claim-email-to-row > input { flex: 1; min-width: 0; }
.claim-email-modal .claim-email-cc-toggle {
    background: var(--bg);
    border: 1px solid #dedede;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 12px;
    white-space: nowrap;
}
.claim-email-modal .claim-email-cc-toggle:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary-text);
}
.claim-email-modal .claim-email-cc-toggle[hidden] { display: none; }

.claim-email-modal .form-group > label:not(.email-modal-check),
.claim-email-modal .email-modal-timer-label {
    font-size: 12px;
    font-weight: 700;
    color: #2f2f2f;
}

.claim-email-modal .form-control,
.claim-email-modal .email-modal-rich-text {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.claim-email-modal .form-control {
    min-height: 40px;
    padding: 9px 13px;
}

.claim-email-modal .form-control:hover,
.claim-email-modal .email-modal-rich-text:hover {
    border-color: #d1d1d1;
}

.claim-email-modal .form-control:focus,
.claim-email-modal .email-modal-rich-text:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claim-email-modal .select-wrapper .form-control {
    padding-right: 42px;
}

.claim-email-modal .select-icon {
    color: #7a7a7a;
}

.claim-email-modal .email-modal-rich-text {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    line-height: 1.6;
}

.claim-email-modal .email-modal-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    user-select: none;
}

.claim-email-modal .email-modal-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.claim-email-modal .email-modal-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid #d8d8d8;
    background: #fff;
    color: transparent;
    font-size: 10px;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.claim-email-modal .email-modal-check input:checked + .email-modal-checkmark {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.claim-email-modal .email-modal-check input:focus-visible + .email-modal-checkmark {
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claim-email-modal .email-modal-track-options {
    margin-top: 10px;
}

.claim-email-modal .email-modal-track-options.is-hidden {
    display: none !important;
}

.claim-email-modal .email-modal-timer-block {
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.claim-email-modal .email-modal-timer-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.claim-email-modal .email-modal-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #f3d3b5;
    border-radius: 999px;
    background: #fff;
}

.claim-email-modal .email-modal-mode-btn,
.claim-email-modal .email-modal-preset {
    border: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.claim-email-modal .email-modal-mode-btn {
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: transparent;
    color: #7c4a1c;
}

.claim-email-modal .email-modal-mode-btn.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(232, 120, 10, 0.2);
}

.claim-email-modal .email-modal-mode-btn:disabled,
.claim-email-modal .email-modal-preset:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.claim-email-modal .email-modal-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.claim-email-modal .email-modal-number {
    flex: 0 0 86px;
}

.claim-email-modal .email-modal-select {
    flex: 1;
}

.claim-email-modal .email-modal-timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.claim-email-modal .email-modal-preset {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #f5c894;
    border-radius: 999px;
    background: #fff;
    color: #8a4b12;
}

.claim-email-modal .email-modal-preset:hover,
.claim-email-modal .email-modal-mode-btn:not(.is-active):hover {
    background: #fff3e6;
    color: #6f3807;
}

.claim-email-modal .email-modal-help {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

.claim-email-modal .email-modal-timer-preview {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #8a4b12;
}

.claim-email-modal .btn-cancel,
.claim-email-modal .btn-secondary,
.claim-email-modal .btn-primary {
    min-height: 40px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 14px;
}

.claim-email-modal .btn-secondary,
.claim-email-modal .btn-cancel {
    border: 1px solid #dedede;
    background: #fff;
    color: var(--text);
}

.claim-email-modal .btn-secondary:hover,
.claim-email-modal .btn-cancel:hover {
    border-color: #cfcfcf;
    background: #fafafa;
}

.claim-email-modal .btn-primary {
    border: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    box-shadow: 0 8px 18px rgba(232, 120, 10, 0.24);
}

.claim-email-modal .btn-primary:hover {
    background: linear-gradient(135deg, #f08416 0%, var(--primary-hover) 100%);
}

.claim-email-modal .btn-primary:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

@media (max-width: 640px) {
    .claim-email-modal .email-modal-timer-mode-row,
    .claim-email-modal .email-modal-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .claim-email-modal .email-modal-number,
    .claim-email-modal .email-modal-select {
        flex: 1 1 auto;
    }
}

/* Auto-filled badge */
.auto-filled-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #93c5fd;
    background: #eff6ff;
    font-size: 13px;
    color: #2563eb;
    white-space: nowrap;
    flex-shrink: 0;
}

.item-total-display {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Subsection title */
.claims-wizard-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    margin: 4px -24px 0;
    background: #fffcf8;
}

/* Radio groups */
.claims-wizard-radio-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-radio-group {
    display: flex;
    gap: 16px;
}

.claims-wizard-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}

.claims-wizard-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin: 0;
}

.claims-wizard-radio input[type="radio"]:disabled {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px 6px;
    opacity: 0.78;
}

.claims-wizard-radio input[type="radio"]:disabled:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: radial-gradient(circle, #000 0 45%, transparent 50%);
}

.claims-wizard-radio input[type="radio"]:disabled:not(:checked) {
    background-color: var(--bg);
    border-color: var(--border);
}

/* Checkbox */
.claims-wizard-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}

.claims-wizard-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.claims-wizard-checkbox input[type="checkbox"]:disabled {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 9px;
    opacity: 0.78;
}

.claims-wizard-checkbox input[type="checkbox"]:disabled:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 5.5'/%3E%3C/svg%3E");
}

.claims-wizard-checkbox input[type="checkbox"]:disabled:not(:checked) {
    background-color: var(--bg);
    border-color: var(--border);
}

/* Currency input */
.claims-wizard-currency-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.claims-wizard-currency-symbol {
    padding: 8px 10px;
    background: #f9fafb;
    border-right: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.claims-wizard-currency-input input {
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
}

.claims-wizard-currency-input input:focus {
    outline: none;
    box-shadow: none !important;
}

.claims-wizard-currency-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Date/time input wrappers — same pattern as currency */
.claims-wizard-date-input,
.claims-wizard-time-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.claims-wizard-date-icon,
.claims-wizard-time-icon {
    padding: 8px 10px;
    background: #f9fafb;
    border-right: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.claims-wizard-date-input input,
.claims-wizard-time-input input {
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
}

.claims-wizard-date-input input:focus,
.claims-wizard-time-input input:focus {
    outline: none;
    box-shadow: none !important;
}

.claims-wizard-date-input:focus-within,
.claims-wizard-time-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.time-of-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    background: rgba(232, 120, 10, 0.08);
    border: 1px solid rgba(232, 120, 10, 0.25);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    min-height: 36px;
    flex: 0 0 200px;
    text-align: center;
}

.time-of-day-badge:empty {
    display: none;
}

/* Multi-select dropdown (damaged property types) */
.multiselect-wrapper {
    position: relative;
    width: 100%;
}

.multiselect-trigger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    padding: 4px 32px 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    position: relative;
}

.multiselect-trigger .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
    font-size: 12px;
}

.multiselect-placeholder {
    color: var(--text-secondary);
    font-size: 14px;
}

.multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.multiselect-chip-remove {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.multiselect-chip-remove:hover {
    color: var(--danger);
}

.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

.multiselect-option:hover {
    background: #f3f4f6;
}

.multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Unit label (kg, etc.) */
.claims-wizard-unit-label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Field info text */
.claims-wizard-field-info {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}

/* "Not visible for client" label */
.claims-wizard-not-visible {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #dc2626;
    font-style: italic;
    margin-top: 2px;
}

.claims-wizard-form-row:has(.location-field) > label,
.claims-wizard-form-row:has(.location-map) > label {
    align-self: flex-start;
    padding-top: 10px;
}

/* Coordinates display */
.claims-wizard-coords {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-get-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-get-location:hover {
    background: var(--primary);
    color: #fff;
}

.btn-get-location:disabled {
    opacity: 0.6;
    cursor: wait;
}

.location-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.location-input-wrapper .location-input {
    flex: 1;
    padding-right: 140px;
}

.location-clear-btn {
    position: absolute;
    right: 112px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 14px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
    line-height: 1;
}

.location-clear-btn:hover {
    color: var(--danger, #dc3545);
}

.location-plain-text-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 10px;
    font-size: 12px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}

.location-plain-text-btn:hover {
    background: var(--primary);
    color: #fff;
}

.location-map {
    margin-top: 10px;
    height: 300px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.btn-toggle-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--primary);
    background: none;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-toggle-map:hover {
    background: var(--primary);
    color: #fff;
}

.coord-recognized-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
}

.coord-recognized-badge i {
    font-size: 11px;
}

/* Character counter */
.claims-wizard-char-counter {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Textareas */
.claims-wizard-form-row textarea {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Pill tabs (Outcome section) */
.claims-wizard-pill-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.claims-wizard-pill-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.claims-wizard-pill-tab:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

.claims-wizard-pill-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--accent-brown-button);
}

/* Action input row (Outcome) */
.claims-wizard-action-input {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.claims-wizard-action-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.claims-wizard-action-input input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Upload grid */
.claims-wizard-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
    align-items: start;
}

.claims-wizard-upload-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.claims-wizard-upload-box:hover {
    border-color: #d4d0ca;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.claims-wizard-upload-box i {
    font-size: 24px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.claims-wizard-upload-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-text);
    margin-bottom: 4px;
}

.claims-wizard-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Missing docs / info sections */
.claims-wizard-missing-docs,
.claims-wizard-missing-info {
    margin-top: 20px;
}

.claims-wizard-missing-docs h4,
.claims-wizard-missing-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.claims-wizard-missing-info-textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-missing-info-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-wizard-missing-info-textarea:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

.claims-wizard-info-bar {
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* Pill tags (Missing Information) */
.claims-wizard-pill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.claims-wizard-pill-toggle {
    display: inline-flex;
}

.claims-wizard-pill-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.claims-wizard-pill-tag {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.claims-wizard-pill-tag:hover,
.claims-wizard-pill-tag.active {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-toggle .claims-wizard-pill-tag {
    cursor: pointer;
}

.claims-wizard-pill-input:checked + .claims-wizard-pill-tag {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-tag:disabled {
    cursor: default;
    opacity: 0.7;
}

.claims-wizard-pill-tag:disabled:hover {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-secondary);
}

.claims-wizard-pill-tag:disabled.active,
.claims-wizard-pill-tag:disabled.active:hover {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-tag-readonly {
    cursor: default;
    user-select: none;
}

/* Missing document pill on attachment cards.
   When NOT marked: outline "Mark as missing" button, revealed only on card
   hover so the header stays clean.
   When marked:     solid orange "Missing" pill, always visible so operators
   immediately see which types are flagged.
   The underlying input[type=checkbox] stays in the DOM (hidden) so the
   existing click handler + state.missingDocIds flow continues to work
   unchanged. */
.missing-doc-pill {
    position: static;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid rgba(128, 138, 156, 0.5);
    background: rgba(255, 255, 255, 0.94);
    color: rgba(107, 114, 128, 0.95);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.missing-doc-pill input {
    display: none;
}

.missing-doc-pill-icon {
    font-size: 10px;
    color: inherit;
}

.missing-doc-pill-label[data-missing-doc-label-on] { display: none; }
.missing-doc-pill-label[data-missing-doc-label-off] { display: inline; }

.missing-doc-pill.is-missing,
.missing-doc-pill.is-readonly {
    opacity: 1;
    border-color: #f58220;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #c2410c;
    box-shadow: 0 1px 2px rgba(242, 106, 27, 0.1);
}

.missing-doc-pill.is-missing .missing-doc-pill-label[data-missing-doc-label-off],
.missing-doc-pill.is-readonly .missing-doc-pill-label[data-missing-doc-label-off] { display: none; }
.missing-doc-pill.is-missing .missing-doc-pill-label[data-missing-doc-label-on],
.missing-doc-pill.is-readonly .missing-doc-pill-label[data-missing-doc-label-on] { display: inline; }

.missing-doc-pill.is-readonly { cursor: default; }

/* Reveal the "Mark as missing" state on card hover only — keeps the header
   uncluttered when nothing is flagged. */
.attachment-type-card:hover .missing-doc-pill {
    opacity: 1;
}
.missing-doc-pill:hover:not(.is-missing):not(.is-readonly) {
    border-color: rgba(245, 130, 32, 0.7);
    color: #c2410c;
    background: rgba(255, 241, 232, 0.92);
}

/* Per-card "select all" checkbox. Only shown on cards that actually have
   files, and reused by both list and thumbnail views. Tri-state handling:
   the input's `indeterminate` property is toggled via JS; the indicator's
   ::after pseudo draws either a checkmark or a dash depending on which
   state is active. */
.attachment-card-select-all {
    position: static;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-left: 6px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.attachment-type-card.has-files .attachment-card-select-all {
    display: inline-flex;
}

.attachment-card-select-all input { display: none; }

.attachment-card-select-all-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(128, 138, 156, 0.55);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.attachment-card-select-all:hover .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
}

/* Checked state: solid primary background + white checkmark. */
.attachment-card-select-all input:checked + .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
    background: var(--primary, #f97316);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}
.attachment-card-select-all input:checked + .attachment-card-select-all-indicator::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Indeterminate state: solid primary background + dash. */
.attachment-card-select-all input:indeterminate + .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
    background: var(--primary, #f97316);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}
.attachment-card-select-all input:indeterminate + .attachment-card-select-all-indicator::after {
    content: "";
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* Missing document badge chips */
.missing-docs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.missing-doc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

/* Cargo block */
.cargo-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-cargo-block {
    background: #fffbf6;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 16px;
}

.claims-wizard-cargo-block .claims-wizard-subsection-title {
    margin: 16px -16px 12px;
    padding: 8px 16px 10px;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.claims-wizard-cargo-block .cargo-payment-details {
    border-top: none;
}

.claims-wizard-cargo-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
}

.claims-wizard-cargo-block-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-remove-cargo-block {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-cargo-block:hover {
    color: #b02a37;
}

.btn-collapse-cargo-block {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #EB7B28;
    font-size: 12px;
    transition: transform 0.2s;
}

.btn-collapse-cargo-block:hover {
    color: #d46a1a;
}

.claims-wizard-cargo-block .claims-wizard-form-row {
    grid-template-columns: 144px 1fr;
    margin-bottom: 12px;
}

.claims-wizard-cargo-block .claims-wizard-payout-row .claims-wizard-form-row-inline,
.claims-wizard-cargo-block .payout-input-row .claims-wizard-form-row-inline,
.claims-wizard-cargo-block .dp-payout-input-row .claims-wizard-form-row-inline {
    grid-template-columns: 144px minmax(0, 1fr);
}

/* Cost table */
.claims-wizard-cost-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.claims-wizard-cost-table-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: #f9fafb;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.claims-wizard-cost-table-header span {
    padding: 8px 10px;
    border-right: 1px solid var(--border);
}

.claims-wizard-cost-table-header span:last-child {
    border-right: none;
}

.claims-wizard-cost-table-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.claims-wizard-cost-table-row input {
    padding: 8px 10px;
    border: none;
    border-right: 1px solid var(--border);
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.claims-wizard-cost-table-row input:last-child {
    border-right: none;
}

.claims-wizard-cost-table-row input:focus {
    outline: none;
    background: rgba(240, 138, 51, 0.05);
}

.claims-wizard-cost-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: #f9fafb;
    font-size: 13px;
    font-weight: 500;
}

.claims-wizard-cost-table-footer .claims-wizard-currency-input {
    width: 160px;
}

/* Total row */
.claims-wizard-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0;
}

/* Message input */
.claims-wizard-message-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-message-input textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-message-input textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Disabled inputs (view mode) */
.claims-wizard-form-row input:disabled,
.claims-wizard-form-row select:disabled,
.claims-wizard-form-row textarea:disabled,
.claims-wizard-currency-input input:disabled,
.claims-wizard-payout-fields > input:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

.claims-wizard-radio input:disabled,
.claims-wizard-checkbox input:disabled {
    cursor: default;
    opacity: 1;
    accent-color: var(--primary);
}

.claims-wizard-color-dot:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Messages list (view page) */
.claims-wizard-messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-message-item {
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.claims-wizard-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.claims-wizard-message-time {
    color: var(--text-secondary);
    font-size: 12px;
}

.claims-wizard-message-body {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Sidebar quick action buttons */
.claims-wizard-quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 18px;
    border: 2px solid #A16207;
    border-radius: 999px;
    background: transparent;
    color: #A16207;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.claims-wizard-quick-action-btn:hover {
    background: #E8780A;
    color: #fff;
    border-color: #E8780A;
    box-shadow: 0 2px 8px rgba(232, 120, 10, 0.4);
}

.claims-wizard-quick-action-btn:hover i {
    color: #fff;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-dark {
    border-color: #201B16;
    color: #201B16;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-dark:hover {
    background: #201B16;
    color: #fff;
    border-color: #201B16;
    box-shadow: 0 2px 8px rgba(32, 27, 22, 0.35);
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger {
    border-color: #9A3412;
    color: #9A3412;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger:hover {
    background: #C53030;
    color: #fff;
    border-color: #C53030;
    box-shadow: 0 2px 8px rgba(197, 48, 48, 0.4);
}

/* Violet variant for admin-level actions (Žalos administravimas).
   Outline-default → filled-on-hover, matching -dark and -danger. Distinct
   hue from the orange base signals "admin lane" without introducing a
   filled resting state that fights the other sidebar buttons. */
.claims-wizard-quick-action-btn.claims-wizard-quick-action-admin {
    border-color: #6D28D9;
    color: #6D28D9;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-admin i {
    color: #6D28D9;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-admin:hover {
    background: #6D28D9;
    border-color: #6D28D9;
    color: #fff;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.4);
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-admin:hover i {
    color: #fff;
}

/* Emerald variant for content-creation actions (Sukurti dokumentą).
   Outline-default with the usual orange palette — only the hover flips
   to emerald. Green semantics = "positive action, results in something
   being created", and differentiates from the orange of Sukurti priminimą
   which is a more passive scheduling action. */
.claims-wizard-quick-action-btn.claims-wizard-quick-action-create {
    border-color: #059669;
    color: #059669;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-create i {
    color: #059669;
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-create:hover {
    background: #059669;
    border-color: #059669;
    color: #fff;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}

.claims-wizard-quick-action-btn.claims-wizard-quick-action-create:hover i {
    color: #fff;
}

/* Color dots */
.claims-wizard-color-dots {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.claims-wizard-color-dot {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    appearance: none;
    background: var(--claim-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.claims-wizard-color-dot:hover {
    transform: scale(1.25);
}

.claims-wizard-color-dot.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--claim-color);
    transform: scale(1.25);
    pointer-events: none;
}

.claims-wizard-color-dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f2994a;
}

/* Status/Priority select small */
.select-wrapper-sm {
    width: 100%;
    min-width: 0;
}

.select-sm {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 48px 10px 18px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 500;
    background-image: none !important;
}

.select-wrapper-sm .select-icon {
    right: 18px;
    z-index: 2;
}

.claims-wizard-status-select {
    background: #fff;
    border: 2px solid #D0D5DD;
    color: #344054;
}

.select-sm.claims-wizard-status-select:hover,
.select-sm.claims-wizard-priority-select:hover {
    border-color: #EC7B29;
}

.select-sm.claims-wizard-status-select:focus,
.select-sm.claims-wizard-priority-select:focus {
    border-color: #EC7B29;
    box-shadow: 0 0 0 3px rgba(236, 123, 41, 0.35);
    outline: none;
}

.claims-wizard-priority-select {
    background: #fff;
    border: 2px solid #D0D5DD;
    color: #344054;
}

/* btn-link / btn-outline-primary utilities */
.btn-link {
    background: none;
    border: none;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-danger-link {
    color: #dc2626;
}

.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-outline-primary:hover {
    background: rgba(240, 138, 51, 0.08);
}

/* Sidebar step links */
.claims-wizard-step[href] {
    text-decoration: none;
    cursor: pointer;
}

.claims-wizard-step[href]:hover:not(.active) {
    color: #eb7b28;
    border-color: #eb7b28;
    background: #fff8ed;
}

@media (max-width: 1024px) {
    .claims-wizard-layout {
        grid-template-columns: 1fr;
    }

    .claims-wizard-sidebar {
        order: -1;
        position: static;
    }

    .claims-wizard-sidebar-scroll {
        max-height: none;
        overflow: visible;
        width: auto;
        margin-right: 0;
        scrollbar-gutter: auto;
    }

    .claims-wizard-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pipeline Admin ── */
.pipeline-color-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pipeline-prefix-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    background: #f0f0f0;
    color: var(--text-secondary);
    font-family: monospace;
}

.pipeline-sequence-info {
    font-family: monospace;
}

.pipeline-form {
    padding-top: 16px;
}

.pipeline-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 20px;
}

.pipeline-form-grid .form-group {
    margin-bottom: 16px;
}

.pipeline-sequence-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-sequence-row .form-control {
    flex: 1;
}

.pipeline-sequence-row .btn-icon {
    padding: 8px 10px;
    flex-shrink: 0;
}

.pipeline-form-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.pipeline-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.pipeline-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-color-input {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
    cursor: pointer;
    background: none;
}

.pipeline-form-preview {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
}

.pipeline-preview-label {
    color: var(--text-secondary);
    margin-right: 6px;
}

.pipeline-preview-value {
    font-weight: 600;
    font-family: monospace;
    font-size: 15px;
    color: var(--text);
}

.pipeline-form-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-translation-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 16px;
    gap: 12px;
}

.pipeline-notice-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1e40af;
    flex-wrap: wrap;
}

.pipeline-notice-content i {
    font-size: 16px;
    flex-shrink: 0;
}

.translation-notice-link {
    font-weight: 600;
    color: #1e40af;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pipeline-form-grid {
        grid-template-columns: 1fr;
    }
}

/* jQuery Timepicker theme */
.ui-timepicker-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    font-family: var(--font-ui);
    z-index: 10052;
}

.ui-timepicker-list li {
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: var(--primary);
    color: #fff;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: var(--surface);
    color: var(--text);
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: var(--text-muted);
    background: var(--bg);
}

/* Asset autocomplete (vehicle/driver in claims wizard) */
.asset-autocomplete {
    position: relative;
    width: 100%;
}

.asset-autocomplete .ac-input {
    width: 100%;
    padding-right: 38px !important;
}

.asset-autocomplete .ac-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-autocomplete .ac-clear:hover {
    color: #344054;
}

.asset-autocomplete .ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
}

.asset-autocomplete .ac-dropdown-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.asset-autocomplete .ac-dropdown-item:hover,
.asset-autocomplete .ac-dropdown-item.highlighted {
    background: var(--bg);
}

.asset-autocomplete .ac-dropdown-item-primary {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.asset-autocomplete .ac-dropdown-item-secondary {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 6px;
}

.asset-autocomplete .ac-dropdown-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Quick-create modal for vehicle/driver */
.quick-create-modal .modal-body {
    padding: 20px 24px;
}

.quick-create-modal .qc-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.quick-create-modal .qc-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.quick-create-modal .qc-row input,
.quick-create-modal .qc-row select {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
}

.quick-create-modal .qc-row-inline {
    display: flex;
    gap: 12px;
}

.quick-create-modal .qc-row-inline > div {
    flex: 1;
}

.quick-create-modal .qc-error {
    color: #ef4444;
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}

/* Additional cost rows + add button */
.btn-add-cost-link {
    background: none;
    border: none;
    color: #e67e22;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 0;
}

.btn-add-cost-link:hover {
    color: #d35400;
    text-decoration: underline;
}

/* Additional cost rows */
.additional-costs-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.additional-costs-container .btn-add-additional-cost {
    font-size: 13px;
    padding: 5px 12px;
}

.btn-remove-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-remove-cost:hover {
    color: #ef4444;
}

.btn-remove-cargo-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-remove-cargo-cost:hover {
    color: #ef4444;
}

.btn-cancel-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-cancel-cost:hover {
    color: #dc3545;
}

.claims-wizard-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.claims-wizard-badge-list .cargo-cost-type-badge {
    width: auto;
}

.cargo-cost-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    min-width: 160px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: rgba(234, 88, 12, 0.08);
    border: 1px solid var(--primary);
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.btn-cost-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn-cost-type-chip:hover {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-cost-type-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.cargo-cost-row + .cargo-cost-row {
    margin-top: 10px;
}

.cost-input-row {
    margin-top: 10px;
}

/* Payout rows (multi-payout per cargo item) */
.claims-wizard-payout-container { margin-top: 8px; }
.claims-wizard-payout-row {
    margin-bottom: 8px;
}
.claims-wizard-payout-row .claims-wizard-form-row-inline,
.payout-input-row .claims-wizard-form-row-inline,
.dp-payout-input-row .claims-wizard-form-row-inline,
.entrusted-payout-input-row .claims-wizard-form-row-inline,
.warehouse-payout-input-row .claims-wizard-form-row-inline,
.mtl-payout-input-row .claims-wizard-form-row-inline {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.claims-wizard-payout-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.claims-wizard-payout-fields > input[type="text"],
.claims-wizard-payout-fields > input[type="number"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
    min-width: 0;
}

.claims-wizard-payout-label {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.35;
}

.claims-wizard-payout-spacer {
    display: block;
    min-height: 1px;
}

@media (max-width: 900px) {
    .claims-wizard-payout-row .claims-wizard-form-row-inline,
    .payout-input-row .claims-wizard-form-row-inline,
    .dp-payout-input-row .claims-wizard-form-row-inline,
    .entrusted-payout-input-row .claims-wizard-form-row-inline,
    .warehouse-payout-input-row .claims-wizard-form-row-inline,
    .mtl-payout-input-row .claims-wizard-form-row-inline {
        grid-template-columns: 1fr;
    }

    .claims-wizard-payout-spacer {
        display: none;
    }
}
.btn-remove-payout,
.btn-remove-dp-payout,
.warehouse-payment-details,
.entrusted-payment-details,
.mtl-payment-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-remove-warehouse-payout,
.btn-remove-mtl-payout {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}
.btn-remove-payout:hover,
.btn-remove-dp-payout:hover,
.btn-remove-warehouse-payout:hover,
.btn-remove-mtl-payout:hover { color: #dc3545; }
.claims-wizard-payout-date-wrap {
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
}

.claims-wizard-payout-date,
.payout-input-date {
    font-family: var(--font-ui);
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
}

.claims-wizard-payout-date:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

/* Payout input row (commit pattern) */
.payout-input-row,
.dp-payout-input-row,
.entrusted-payout-input-row,
.warehouse-payout-input-row,
.mtl-payout-input-row {
    margin-bottom: 8px;
}
.payout-input-row select,
.dp-payout-input-row select,
.entrusted-payout-input-row select,
.warehouse-payout-input-row select,
.mtl-payout-input-row select {
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: #fff;
    color: var(--text);
    min-width: 180px;
    flex: 1;
}
.payout-input-row select:focus,
.dp-payout-input-row select:focus,
.entrusted-payout-input-row select:focus,
.warehouse-payout-input-row select:focus,
.mtl-payout-input-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}
.payout-input-row input[type="text"],
.dp-payout-input-row input[type="text"],
.entrusted-payout-input-row input[type="text"],
.warehouse-payout-input-row input[type="text"],
.mtl-payout-input-row input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.btn-save-payout,
.btn-save-dp-payout,
.btn-save-entrusted-payout,
.btn-save-warehouse-payout,
.btn-save-mtl-payout {
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-cancel-payout,
.btn-cancel-dp-payout,
.btn-cancel-entrusted-payout,
.btn-cancel-warehouse-payout,
.btn-cancel-mtl-payout {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}
.btn-cancel-payout:hover,
.btn-cancel-dp-payout:hover,
.btn-cancel-entrusted-payout:hover,
.btn-cancel-warehouse-payout:hover,
.btn-cancel-mtl-payout:hover {
    color: #dc3545;
}

/* Cargo payment details block */
.cargo-payment-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.cargo-cost-row input[type="text"],
#crgCostInputRow input[type="text"],
#additionalCostInputRow input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
}

.cargo-cost-row input[type="text"]:focus,
#crgCostInputRow input[type="text"]:focus,
#additionalCostInputRow input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Multi-select dropdown */
.multiselect-wrapper { position: relative; min-width: 0; }
.multiselect-display {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    min-height: 38px;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.multiselect-display:focus { border-color: var(--primary); outline: none; }
.multiselect-placeholder { color: var(--text-secondary); font-size: 14px; }
.multiselect-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.multiselect-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.multiselect-badges:empty { display: none; }
.multiselect-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
}
.multiselect-badge-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.multiselect-badge-remove:hover { color: #ef4444; }
.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 4px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.multiselect-search-wrapper { padding: 8px; border-bottom: 1px solid var(--border); }
.multiselect-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.multiselect-search:focus { outline: none; border-color: var(--primary); }
.multiselect-options { overflow-y: auto; max-height: 250px; }
.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    white-space: nowrap;
}
.multiselect-option:last-child { border-bottom: none; }
.multiselect-option:hover { background: rgba(0,0,0,0.03); }
.multiselect-option.selected {
    background: #fff;
    color: var(--primary);
}
.multiselect-option input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; width: 16px; height: 16px; }
.multiselect-option span { overflow: hidden; text-overflow: ellipsis; }

/* Flatpickr theme */
.flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: inherit;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.flatpickr-day.inRange { background: rgba(var(--primary-rgb, 59,130,246), 0.12); border-color: transparent; }
.flatpickr-day:hover { background: var(--bg); }

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--surface);
    color: var(--text);
}

.flatpickr-day { color: var(--text); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--text-secondary); }

/* Session management */
.session-current {
    background: var(--bg-hover);
}

/* Scroll FABs */
.scroll-fab {
    position: fixed;
    right: 24px;
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease, background 0.15s ease;
    opacity: 0.7;
}
.scroll-fab:hover {
    opacity: 1;
    background: var(--bg-hover);
}
.scroll-fab-down {
    bottom: 24px;
}
.scroll-fab-up {
    bottom: 144px;
}

/* Vehicle Registration Field */
.vehicle-reg-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vehicle-registration-flag {
    flex: 0 0 28px;
    text-align: center;
    line-height: 1;
}
.vehicle-registration-structured {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.vehicle-registration-free {
    flex: 1 1 auto;
    min-width: 0;
}
.vehicle-registration-slot-input {
    width: 28px !important;
    min-width: 28px;
    height: 32px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    padding: 0 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex: 0 0 28px;
}
.vehicle-registration-slot-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
    background: #fff;
}
.vehicle-registration-slot-separator {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0;
    min-width: 6px;
    text-align: center;
    user-select: none;
}
.vehicle-registration-free-input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 160px;
    flex: 1;
    text-transform: uppercase;
}
.vehicle-registration-free-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.vehicle-registration-mode-toggle {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
}
.vehicle-registration-mode-toggle.is-freetext {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
}

/* ===========================
   Toast Notifications (global)
   =========================== */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-left: 4px solid var(--success, #22c55e);
    font-size: 13px;
    color: var(--text);
    pointer-events: all;
    animation: toastSlideIn 0.3s ease;
    max-width: 360px;
}
.toast-icon { color: var(--success, #22c55e); font-size: 16px; flex-shrink: 0; }
.toast-message { flex: 1; }
.toast-message strong { display: block; margin-bottom: 2px; }
.toast-message small { color: var(--text-secondary); }
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 2px; }
.toast-close:hover { color: var(--text); }
.toast-undo { background: none; border: none; color: var(--primary-text, #E8780A); font-weight: 600; cursor: pointer; font-size: 13px; white-space: nowrap; }
.toast-undo:hover { text-decoration: underline; }
.toast-fade-out { animation: toastFadeOut 0.3s ease forwards; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastFadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* Bulk Action Bar */
.claims-bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid var(--danger, #ef4444);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
}
.claims-bulk-bar.active { display: flex; }

/* ===========================
   Claim Transfer Modal
   =========================== */
.transfer-reminders-banner {
    background: #FFF7ED;
    border: 1px solid #F5D0A9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.transfer-reminders-banner strong {
    color: var(--text);
}
.transfer-claim-card {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.transfer-claim-number {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.transfer-claim-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.transfer-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    user-select: none;
}
.transfer-accordion-header i {
    margin-right: 6px;
    transition: transform 0.2s;
}
.transfer-accordion-body {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
}
.transfer-reminder-pill {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.transfer-claim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.transfer-claim-row:last-child { border-bottom: none; }
.transfer-claim-row strong { font-weight: 600; }
.transfer-claim-row-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.transfer-reminder-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.transfer-field-row {
    margin-top: 16px;
}
.transfer-field-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.transfer-field-row select,
.transfer-field-row textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-ui);
    background: var(--surface);
    color: var(--text);
}
.transfer-field-row textarea {
    resize: vertical;
    min-height: 72px;
}
.transfer-selected-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: auto;
}
.modal-footer-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ===========================
   Agreement Edit Modal
   =========================== */
.agr-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.agr-section-title:first-child { margin-top: 0; }
.agr-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.agr-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.agr-field input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-ui);
    background: var(--surface);
    box-sizing: border-box;
}
.agr-field input:focus {
    border-color: var(--primary);
    outline: none;
}
.agr-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.agr-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.agr-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Agreement accordion cards (Client fees tab) */
.agr-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.agr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}
.agr-card-header:hover { background: #fafafa; }
.agr-card-header i.fa-caret-right,
.agr-card-header i.fa-caret-down { margin-right: 8px; color: var(--text-secondary); }
.agr-card-header .agr-card-actions { display: flex; gap: 8px; align-items: center; }
.agr-card-body {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}
.agr-card-body .agr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 16px;
}
.agr-card-body .agr-detail-item {
    display: flex;
    justify-content: space-between;
}
.agr-card-body .agr-detail-item span:first-child { color: var(--text-secondary); }
.agr-card-body .agr-detail-item span:last-child { font-weight: 600; color: var(--text); }
.agr-card.inactive .agr-card-header { color: var(--text-muted); }

/* ── Fee profile sections inside agreement cards ── */
.agr-fee-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.agr-fee-section:last-child { border-bottom: none; margin-bottom: 0; }
.agr-fee-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.agr-fee-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin: 8px 0 4px;
}
.agr-fee-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.agr-fee-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.agr-fee-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.agr-fee-field label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.agr-fee-field input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-field input:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-field input:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-field input:disabled {
    background: var(--surface);
    color: var(--text-muted);
    cursor: not-allowed;
}
.agr-fee-radio-group,
.agr-fee-radio-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    margin-bottom: 4px;
}
.agr-fee-stages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 4px 12px;
    font-size: 12px;
    margin-bottom: 4px;
}
.agr-fee-stage-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.agr-fee-stages-loading {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 11px;
}
.agr-fee-radio-stack {
    flex-direction: column;
    gap: 4px;
}
.agr-fee-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agr-fee-inline-input {
    width: 70px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-inline-input:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-inline-input:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-inline-input:disabled {
    background: var(--surface);
    color: var(--text-muted);
}
.agr-fee-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0;
}
.agr-fee-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
}
.agr-fee-checkbox input[type="checkbox"] { margin: 0; }
.agr-fee-notes-row {
    margin-top: 6px;
}
.agr-fee-notes-row label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}
.agr-fee-notes-row textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    resize: vertical;
    min-height: 36px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-notes-row textarea:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-notes-row textarea:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-notes-row textarea:disabled {
    background: var(--surface);
    color: var(--text-muted);
}
.btn-success-flash {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    transition: background 0.3s ease;
}
@media (max-width: 768px) {
    .agr-fee-grid-3 { grid-template-columns: 1fr; }
    .agr-fee-grid-2 { grid-template-columns: 1fr; }
}

/* ── Agreement search autocomplete dropdown ── */
.agr-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.agr-search-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
.agr-search-option:hover {
    background: var(--bg);
}
.agr-search-option span {
    font-weight: 500;
    color: var(--text);
}
.agr-search-option small {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Pending transfer label (Claims list + MTPL Statistics) */
.transfer-pending-label {
    font-size: 11px;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}