/* static/css/styles.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@layer base {
    html {
        font-family: "Inter", sans-serif;
    }
}

/* Form-elementen erven het document-font (Inter) NIET vanzelf — browsers geven
   <input>/<textarea>/<select>/<button> hun eigen default-font. Zonder deze reset
   ogen formuliervelden (o.a. door de hele settings-modal heen, bv. patiëntfacturen
   > afzender) in een ander lettertype dan de omringende UI. */
input, textarea, select, button, optgroup {
    font-family: inherit;
}

/* Shoelace radio-group-label ('Type afzender' in de afzender-instellingen) op
   het UI-formaat (14px) i.p.v. de Shoelace-default 16px, zodat 'ie matcht met de
   overige <label>s in de settings-modal. (De radio-opties zelf krijgen 14px via
   font-size op de group in _sender_domain.html.) */
#sender-tier-group::part(form-control-label) {
    font-size: 0.875rem;
}

input {
    border: 1px solid #857e7e;
    border-radius: 0.1rem;
    padding: 0 0.5rem;
    margin-top: 0.5rem;
    height: 2.2rem;
    font-size: 1rem;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    accent-color: #000000;
}
input[type="checkbox"],
input[type="radio"] {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    accent-color: #000000 !important;
    border-color: #000000 !important;
    cursor: pointer;
}

/* Specifiek voor de container div om alignment te fixen */
.checkbox-container,
.radio-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
} 

input:focus {
    font-size: 1rem;
    border: 2px solid #000000;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: black !important;
    background-color: white !important;
    font-size: 1rem !important;
}

:root {
    --tw-ring-color: #000000 !important;
}

.button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.875rem;
}

.button:hover {
    background-color: #333333;
    color: #ffffff;
}

.big-input {
    margin-top: 0.25rem; /* mt-1 */
    padding: 0.25rem; /* p-1 */
    font-size: 1.125rem; /* text-l */
    display: block; /* block */
    width: 100%; /* w-full */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
    accent-color: #000000;
}

no-hover:hover {
    background-color: #00000000 !important;
}

h2 {
    color: black;
}

h3 {
    color: black;
}

* {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

label {
    font-size: 1rem;
    color: #000000;
    display: block;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    overflow-y: auto;
    margin: 1rem;
}

.modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: black;
}

.modal-body {
    margin-bottom: 1.5rem;
}

.modal-footer {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Enhanced Dialog Header Styles (Shoelace sl-dialog) */
sl-dialog.dialog-enhanced::part(header) {
    display: none;
}
sl-dialog.dialog-enhanced::part(panel) {
    border-radius: 16px;
    /* Clip alles wat buiten de panel-rand zou vallen — voorkomt dat een
       overflowing body de footer visueel naar buiten duwt. Body heeft
       overflow:auto dus die scrollt zelf netjes; we hoeven panel-overflow
       niet meer expliciet zichtbaar te houden. */
    overflow: hidden !important;
}
sl-dialog.dialog-enhanced::part(body) {
    /* Shoelace's panel is flex-column met max-height ≈ viewport. De body
       heeft flex:1 1 auto + overflow:auto maar mist min-height:0 in de
       default-stylesheet. Default flex `min-height: auto` blokkeert
       shrink onder min-content (textarea + chips + helptext), waardoor
       de body uit de panel-grens groeit en de footer (Opslaan/Annuleren)
       buiten het witte vlak rendert op smalle viewports. */
    min-height: 0 !important;
}

/* Footer-rij in de tekst-edit-dialog: alle 4 knoppen op één regel, ook
   bij smalle viewports. Op mobile <640px schalen de sl-buttons naar
   `small` via --button-font-size + minder padding, zodat het geheel
   binnen het ~358px brede panel past zonder wrap. */
.dialog-footer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
@media (max-width: 640px) {
    .dialog-footer-row {
        gap: 0.35rem;
    }
    .dialog-footer-row sl-button::part(base) {
        font-size: 0.875rem;    /* 14px */
        padding-inline: 0.65rem;
        min-height: 2.75rem;    /* 44px — WCAG 2.5.5 touch-target */
    }
}

#mobileValidationDialog::part(panel) {
    padding: 0;
}

#mobileValidationDialog::part(body) {
    padding: 1rem 1.25rem 0.5rem;
}

#mobileValidationDialog::part(footer) {
    padding: 0.5rem 1.25rem 1rem;
}

#mobileValidationDialog .dialog-header {
    margin-bottom: 0;
    margin-left: 0;
    gap: 0.5rem;
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-left: 4px solid #000000;
    padding-left: 1rem;
    margin-left: -0.5rem;
    margin-bottom: 1.25rem;
}

.dialog-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background-color: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.dialog-header-icon svg {
    width: 20px;
    height: 20px;
    color: #000000;
    stroke: #000000;
}

.dialog-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dialog-header-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: #111827;
    line-height: 1.3;
}

.dialog-header-description {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.4;
}

/* Enhanced List Item Styles (for dialogs) */
.list-item-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: white;
    transition: background-color 0.15s ease;
}

.list-item-enhanced:hover {
    background-color: #f9fafb;
}

.list-item-enhanced:last-child {
    margin-bottom: 0;
}

.list-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-item-name {
    font-weight: 500;
    color: #111827;
}

.list-item-count {
    font-size: 0.875rem;
    color: #6b7280;
}

.list-item-actions-enhanced {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.list-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.list-action-btn:hover {
    background-color: #f3f4f6;
}

.list-action-btn svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.list-action-btn:hover svg {
    color: #374151;
}

.list-action-btn.delete:hover {
    background-color: #fee2e2;
}

.list-action-btn.delete svg {
    color: #ef4444;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 1.5rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.action-button {
    background-color: black;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.action-button:hover {
    background-color: #333;
}

.stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.step-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #6b7280;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

.step.active .step-icon,
.step.completed .step-icon {
    background-color: #4b5563;
    color: white;
}

.step-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
}

.step.active .step-name,
.step.completed .step-name {
    color: #4b5563;
}

.step-line {
    flex: 1;
    height: 1px;
    background-color: #e5e7eb;
    margin-top: 1.25rem;
}

.step-line.completed {
    background-color: #4b5563;
}

.step-info {
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 0.5rem;
    text-align: center;
}

.step-info .error {
    color: #ef4444;
    margin-top: 0.25rem;
}

.form-error {
    background-color: #fef2f2;
    border-left: 2px solid #fecaca;
    padding: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc2626;
}

.introjs-tooltip {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 350px;
}

.introjs-button {
    text-shadow: none;
    background-image: none;
    text-align: center;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 0.25rem;
    border: 1px solid #e5e7eb;
    margin-right: 5px;
    color: #4b5563;
}

.introjs-prevbutton {
    margin-right: 5px;
}

.introjs-nextbutton {
    background-color: #000000 !important;
    color: white !important;
    border: none !important;
}

.introjs-nextbutton:hover, 
.introjs-nextbutton:focus {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: none !important;
}

.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Reset and override all IntroJS skip button styling */
.introjs-skipbutton {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    color: #666 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important;
    cursor: pointer !important;
    font-family: sans-serif !important;
}

/* Add extra space in tooltip to accommodate the skip button */
.introjs-tooltip {
    padding-top: 10px !important;
}

/* Ensure buttons have consistent styling */
.introjs-button {
    text-shadow: none !important;
    background-image: none !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 5px 10px !important;
    border-radius: 0.25rem !important;
    border: 1px solid #e5e7eb !important;
    margin-right: 5px !important;
    color: #4b5563 !important;
}

.introjs-prevbutton {
    margin-right: 5px !important;
}

.introjs-nextbutton {
    background-color: #000000 !important;
    color: white !important;
    border: none !important;
}

.introjs-nextbutton:hover, 
.introjs-nextbutton:focus {
    background-color: #333333 !important;
    color: white !important;
    box-shadow: none !important;
}

.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
}

.close-button:hover {
    color: black;
}

.modal-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rating-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.rating-label {
    cursor: pointer;
}
.rating-input {
    position: absolute;
    left: -9999px;
}
.rating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: white;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.2s;
}
.rating-input:checked + .rating-button {
    background-color: #000000;
    color: white;
    border-color: #000000;
}
.rating-button:hover {
    background-color: #f3f4f6;
}
.rating-input:checked + .rating-button:hover {
    background-color: #333333;
}
/* Add style for disabled action buttons */
.action-button:disabled {
    background-color: #d1d5db; /* gray-300 */
    color: #6b7280; /* gray-500 */
    cursor: not-allowed;
    opacity: 0.7;
}
.action-button:disabled:hover {
    background-color: #d1d5db; /* Keep the disabled background color on hover */
}
button.action-button.primary,
a.action-button.primary {
    display: inline-flex;
    align-items: center;
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
}
button.action-button.primary:hover,
a.action-button.primary:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.action-button .spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.action-button.button-success {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
}

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

.introjs-tooltip.introjs-tooltip-wide {
    max-width: 600px !important;
    min-width: 400px !important;
    width: auto !important;
    white-space: normal;
}


@keyframes enter {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes leave {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.animate-enter {
    animation: enter 0.3s ease-out;
}

.animate-leave {
    animation: leave 0.3s ease-in forwards;
}

/* Custom Company Dropdown Styles */
.company-dropdown-container {
    position: relative;
    display: inline-flex !important; /* Use inline-flex instead of inline-block */
    align-items: center !important; /* Center vertically within container */
    flex-shrink: 0 !important; /* Prevent container from affecting header height */
    height: 36px !important; /* Match button height exactly */
    max-height: 36px !important; /* Force maximum height */
    min-height: 36px !important; /* Force minimum height */
    vertical-align: middle !important;
    margin: 0 !important;
}

.company-dropdown-button {
    width: 200px !important; /* Fixed width for consistency */
    text-align: left;
    border: none !important; /* Remove border to match select styling */
    transition: all 0.2s ease;
    height: 36px !important; /* Smaller height to match select exactly */
    max-height: 36px !important; /* Force maximum height */
    min-height: 36px !important; /* Force minimum height */
    line-height: 20px !important; /* Tighter line height */
    box-sizing: border-box !important;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    padding: 8px 12px !important; /* Smaller padding */
    font-size: 14px; /* Match select font size */
    margin: 0 !important; /* Remove any default margins */
    vertical-align: middle !important;
}

.company-dropdown-button:hover {
    background-color: #f9fafb;
}

.company-dropdown-button:focus {
    outline: none;
    background-color: #ffffff;
}

.company-dropdown-button .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow flex child to shrink below content size */
}

.company-dropdown-button svg {
    vertical-align: middle;
}

/* Force header height consistency */
header.h-16 {
    height: 64px !important;
    max-height: 64px !important;
    min-height: 64px !important;
}

header.h-16 > div {
    height: 100% !important;
}

.company-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.5rem;
    width: 16rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.company-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.company-search-input:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.company-list {
    max-height: 16rem;
    overflow-y: auto;
}

.company-item {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.company-item:hover,
.company-item.highlighted {
    background-color: #f3f4f6;
    color: #111827;
}

.company-item:last-child {
    border-bottom: none;
}

/* Scrollbar styling for company list */
.company-list::-webkit-scrollbar {
    width: 4px;
}

.company-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.company-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.company-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.dashboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dashboard-table thead {
    background-color: #f9fafb;
}

.dashboard-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-table tbody tr {
    transition: background-color 0.15s ease;
}

.dashboard-table tbody tr:not(:last-child) {
    border-bottom: 1px solid #9ca3af;
}

.dashboard-table tbody tr:hover {
    background-color: #f9fafb;
}

.dashboard-table tbody tr.changed-row {
    border: 2px solid #60a5fa;
}

.dashboard-table tbody tr.archived-row {
    background-color: #f9fafb;
}

.dashboard-table td {
    padding: 1rem;
    font-size: 0.875rem;
    color: #374151;
    vertical-align: top;
}

.dashboard-table th.text-right,
.dashboard-table td.text-right {
    text-align: right;
}

.flex-row-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.flex-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.flex-row-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
}

.flex-row-end > .dropdown {
    flex-shrink: 0;
}

.flex-row-end > .action-buttons-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 1300px) {
    .flex-row-end > .action-buttons-group {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (max-width: 900px) {
    .dashboard-table td {
        padding: 0.5rem;
    }
    .dashboard-table th {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .dashboard-table td {
        padding: 0.25rem 0.5rem;
    }
    .dashboard-table th {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    .dashboard-table td {
        font-size: 0.75rem;
    }
    .action-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

.relative {
    position: relative;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    white-space: nowrap;
}

.badge-default {
    background-color: #f3f4f6;
    color: #6b7280;
}

.badge-secondary {
    background-color: #f3f4f6;
    color: #6b7280;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-gray {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Hold-state badges:
   - badge-danger = pending (klant moet iets doen, rood/attention)
   - badge-info   = waiting (Reg4U/systeem moet iets doen, sky-blauw/kalm) */
.badge-danger {
    background-color: #fee2e2;   /* tailwind red-100 */
    color: #991b1b;              /* tailwind red-800 */
}

.badge-info {
    background-color: #e0f2fe;   /* tailwind sky-100 */
    color: #075985;              /* tailwind sky-800 */
}

.file-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #6b7280;
}

.file-icon.pending {
    color: #ef4444;
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Waiting = Reg4U werkt aan vervolgactie (kalme info, geen pulse). */
.file-icon.waiting {
    color: #0ea5e9;   /* tailwind sky-500 */
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

sl-tooltip::part(base__arrow) {
    display: none;
}

.tooltip {
    position: absolute;
    z-index: 1000;
    padding: 0.5rem 0.75rem;
    background-color: white;
    color: #1f2937;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    max-width: 20rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip.show {
    opacity: 1;
}

.tooltip-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.tooltip-files {
    max-height: 12rem;
    overflow-y: auto;
}

.tooltip-files::-webkit-scrollbar {
    width: 4px;
}

.tooltip-files::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.tooltip-files::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    position: relative;
    background-color: white;
    border: 1px solid #d1d5db;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.dropdown-trigger:hover {
    background-color: #f9fafb;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    min-width: 12rem;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    display: none;
}

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

.dropdown-menu.dropdown-up {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
}

.dropdown-item svg {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dropdown-item.disabled:hover {
    background-color: transparent;
}

.period-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.last-modified {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.last-modified-time {
    font-size: 0.875rem;
    color: #6b7280;
}

.last-modified-user {
    font-size: 0.75rem;
    color: #9ca3af;
}

footer, [role="contentinfo"] {
    position: relative;
    z-index: 1;
}

.action-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border: 2px solid white;
}

.dropdown-item.important-action::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ef4444;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.lock-icon {
    color: #ef4444;
    cursor: help;
    flex-shrink: 0;
}

/* Dual Range Slider - Period Selector */
.dual-range-container {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 20px 0;
    border: none;
    outline: none;
}

.dual-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
    border: none;
    outline: none;
    box-shadow: none;
}

.dual-range-highlight {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #1f2937;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    transition: left 0.1s ease, width 0.1s ease;
}

.dual-range-input {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    accent-color: transparent;
}

.dual-range-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.dual-range-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.dual-range-input:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.dual-range-input#range-start {
    z-index: 8;
}

.dual-range-input#range-end {
    z-index: 7;
}

.dual-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #1f2937;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: -6px;
    position: relative;
}

.dual-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.5);
}

.dual-range-input::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

.dual-range-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #1f2937;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dual-range-input::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.5);
}

.dual-range-input::-moz-range-thumb:active {
    transform: scale(1.1);
}

.dual-range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: transparent !important;
    border: none;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    color: transparent;
    cursor: pointer;
}

.dual-range-input::-webkit-slider-container {
    background: transparent !important;
    min-block-size: 0;
    overflow: hidden;
}

.dual-range-input::-webkit-progress-value,
.dual-range-input::-webkit-progress-bar {
    display: none !important;
    background: transparent !important;
}

.dual-range-input::-ms-track {
    width: 100%;
    height: 0;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.dual-range-input::-ms-fill-lower,
.dual-range-input::-ms-fill-upper {
    background: transparent;
}

.dual-range-input::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.dual-range-input:focus::-webkit-slider-thumb {
    outline: none;
    box-shadow: none;
}

.dual-range-input:focus::-moz-range-thumb {
    outline: none;
    box-shadow: none;
}

.dual-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #374151;
    margin-top: 8px;
    padding: 0 4px;
}

.period-shortcut-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.period-shortcut-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.period-shortcut-btn.active {
    background: #1f2937;
    color: white;
    border-color: #1f2937;
}

/* Date Input and Shortcut Buttons */
.date-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-input {
    width: 150px;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-shortcut-btn {
    padding: 0.5rem 0.75rem;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.date-shortcut-btn:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.date-shortcut-btn:active {
    background-color: #d1d5db;
}

/* Amount display styles for financial tables */
.amount-declared {
    font-weight: 700;
    color: #111827;
}

.amount-approved {
    font-weight: 500;
    color: #16a34a;
}

.amount-rejected {
    font-weight: 500;
    color: #dc2626;
}

/* Benchmark Comparison Cards */
.benchmark-card {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.benchmark-card-disabled {
    opacity: 0.6;
}

.benchmark-card-title {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.benchmark-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.benchmark-value-positive {
    color: #16a34a;
}

.benchmark-diff {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.benchmark-diff-positive {
    color: #16a34a;
}

.benchmark-diff-negative {
    color: #dc2626;
}

.benchmark-error {
    text-align: center;
    padding: 1rem 0;
    color: #dc2626;
}

.benchmark-reference {
    font-size: 0.625rem;
    color: #9ca3af;
}

/* Button variants */
.button-primary {
    background-color: #3b82f6;
    color: white;
}

.button-primary:hover {
    background-color: #2563eb;
}

.button-dark {
    background-color: #6b7280;
    color: white;
}

.button-dark:hover {
    background-color: #4b5563;
}

.button-secondary {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.button-secondary:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

/* CRM dropdown */
.crm-dropdown {
    position: relative;
    display: inline-block;
}

.crm-dropdown-toggle {
    cursor: pointer;
}

.crm-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 200px;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.crm-dropdown:hover .crm-dropdown-menu,
.crm-dropdown.open .crm-dropdown-menu {
    display: block;
}

.crm-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
}

.crm-dropdown-item:hover {
    background-color: #f3f4f6;
}

.crm-dropdown-item:first-child {
    border-radius: 0.375rem 0.375rem 0 0;
}

.crm-dropdown-item:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Import dropzone */
.import-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
}

.import-dropzone.dragover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.import-dropzone-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: #9ca3af;
}

.import-dropzone-text {
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.import-dropzone-subtext {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.import-dropzone-btn {
    cursor: pointer;
}

.import-dropzone-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 1rem;
}

.import-progress-content {
    text-align: center;
    padding: 2rem;
}

.import-progress-content p {
    margin-top: 1rem;
    color: #374151;
}

.import-result-success {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 0.5rem;
    padding: 1rem;
    color: #065f46;
}

.import-result-success strong {
    display: block;
    margin-bottom: 0.5rem;
}

.import-result-warning {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
}

.import-result-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1rem;
    color: #991b1b;
}

.import-result-error strong {
    display: block;
    margin-bottom: 0.5rem;
}

.import-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #3b82f6;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}

.import-help-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Onboarding dialog styles */
.onboarding-step {
    padding: 0.5rem 0;
}

.onboarding-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.onboarding-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: #1f2937;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 50%;
}

.onboarding-step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.onboarding-step-description {
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.onboarding-image-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.onboarding-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.onboarding-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.onboarding-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.onboarding-dot:hover {
    background: #9ca3af;
}

.onboarding-dot.active {
    background: #3b82f6;
    transform: scale(1.25);
}

/* Portal link status indicators */
.portal-link-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 0.375rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.portal-link-opened {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
}

.portal-link-not-opened {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

/* CRM page layout with sidebar */
.crm-page-layout {
    display: flex !important;
    gap: 1.5rem !important;
}

.crm-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    height: fit-content;
}

.crm-sidebar-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.crm-sidebar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.crm-content {
    flex: 1;
    min-width: 0;
}

/* Filter toggle button - hidden on desktop */
.crm-filter-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    color: #374151;
    cursor: pointer;
    margin-bottom: 1rem;
}

.crm-filter-toggle:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.crm-filter-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Filter close button - hidden on desktop */
.crm-filter-close {
    display: none;
    padding: 0.25rem;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 0.25rem;
}

.crm-filter-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

/* Sidebar header with close button */
.crm-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Filter overlay - hidden by default */
.crm-filter-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

.crm-filter-overlay.active {
    display: block;
}

/* Breadcrumb row with optional toggle button */
.crm-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive sidebar - collapse filter first at larger breakpoint */
@media (max-width: 1500px) {
    .crm-filter-toggle {
        display: flex;
    }

    .crm-filter-close {
        display: block;
    }

    .crm-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        background-color: #f9fafb;
        padding: 1rem;
    }

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

    .crm-page-layout {
        flex-direction: column;
    }

    /* Remove most grey padding when sidebar collapses, keep small margin */
    main:has(.crm-container) {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .crm-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .crm-breadcrumb-row {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .crm-content .bg-white.rounded-lg.shadow {
        border-radius: 0.5rem !important;
    }

    /* Hide Laatste controle first when sidebar collapses */
    .crm-hide-lg {
        display: none !important;
    }
}

/* Responsive table - hide columns on medium screens (after sidebar collapsed) */
@media (max-width: 768px) {
    .crm-hide-md {
        display: none !important;
    }
}

/* Responsive table - hide more columns on small screens */
@media (max-width: 576px) {
    .crm-hide-sm {
        display: none !important;
    }

    .crm-table-container {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .crm-header-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .crm-header-buttons .button {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .crm-header-buttons .button svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .crm-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .crm-page-header h1 {
        font-size: 1.25rem;
    }

    .crm-header-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .crm-header-buttons .button-text {
        display: none;
    }

    .crm-header-buttons .button {
        padding: 0.5rem;
    }

    .crm-header-buttons .button svg {
        margin-right: 0;
    }
}

/* Responsive table - extra small screens */
@media (max-width: 480px) {
    .crm-hide-xs {
        display: none !important;
    }

    /* Remove grey padding around the card on small screens */
    main:has(.crm-container) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .crm-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .crm-breadcrumb-row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .crm-page-layout {
        gap: 0 !important;
    }

    .crm-filter-toggle {
        border-radius: 0 !important;
    }

    .crm-content .bg-white.rounded-lg.shadow {
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 1rem !important;
    }
}

.crm-bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.crm-bulk-action-info {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.crm-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.crm-content .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

.crm-content .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.crm-content .overflow-x-auto::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.crm-content .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.crm-content .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

.crm-filter-section {
    margin-bottom: 1rem;
}

.crm-filter-section:last-child {
    margin-bottom: 0;
}

.crm-filter-header {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0;
    color: #374151;
}

.crm-filter-header-collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    margin-bottom: 0.25rem;
}

.crm-filter-header-collapsible svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.crm-filter-header-collapsible.expanded svg {
    transform: rotate(90deg);
}

.crm-filter-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6366f1;
    margin-left: auto;
}

.crm-filter-settings-btn {
    margin-left: auto;
    padding: 0.125rem;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.crm-filter-settings-btn:hover {
    color: #374151;
    background-color: #f3f4f6;
}

.crm-filter-collapsible {
    margin-top: 0;
}

.crm-filter-collapsible.collapsed {
    display: none;
}

.crm-filter-items {
    max-height: 300px;
    overflow-y: auto;
}

.crm-filter-item {
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.375rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #e5e7eb;
}

.crm-filter-item:last-child {
    margin-bottom: 0;
}

.crm-filter-item:hover {
    background-color: #f9fafb;
}

.crm-filter-item.active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.crm-filter-item-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}

.crm-filter-item.active .crm-filter-item-title {
    color: white;
}

.crm-filter-item-stats {
    font-size: 0.75rem;
    color: #6b7280;
}

.crm-filter-item.active .crm-filter-item-stats {
    color: rgba(255, 255, 255, 0.9);
}

.crm-filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

.crm-filter-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-top: 0;
}

.crm-filter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.crm-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.crm-radio-item:hover {
    background-color: #f3f4f6;
}

.crm-radio-item.active {
    background-color: #3b82f6;
    color: white;
}

.crm-radio-item input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #3b82f6;
}

.crm-radio-item.active input[type="radio"] {
    accent-color: white;
}

.crm-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.crm-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.crm-checkbox-item:hover {
    background-color: #f3f4f6;
}

.crm-checkbox-item input[type="checkbox"] {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}

.crm-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.crm-action-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.crm-action-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Note tooltip in patient list */
.note-tooltip-container {
    position: relative;
    display: inline-block;
}

.note-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    margin-bottom: 0.5rem;
    min-width: 200px;
    max-width: 300px;
    white-space: normal;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.note-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

.note-tooltip-container:hover .note-tooltip {
    opacity: 1;
    visibility: visible;
}

.note-tooltip-item {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.note-tooltip-item:last-child {
    border-bottom: none;
}

.note-tooltip-date {
    color: #9ca3af;
    font-size: 0.625rem;
    display: block;
    margin-bottom: 0.125rem;
}

.note-tooltip-content {
    display: block;
    line-height: 1.3;
}

/* ============================================
   Patient Portal Styles
   ============================================ */

.portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.portal-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.portal-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.portal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.portal-unread-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #ef4444;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
}

.portal-inbox-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.portal-inbox-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #6b7280;
}

.portal-new-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    background-color: #ef4444;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.portal-logout-link {
    color: #6b7280;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}

.portal-logout-link:hover {
    color: #ef4444;
}

.portal-messages-section,
.portal-oproepen-section,
.portal-gegevens-section {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.portal-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1rem 0;
}

.portal-section-title-warning {
    color: #d97706;
}

.portal-section-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.portal-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.portal-section-header-row .portal-section-title {
    margin: 0;
}

.portal-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.portal-filter-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

.portal-message-read {
    display: none;
}

.portal-messages-list.show-all .portal-message-read {
    display: block;
}

.portal-messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-message-card {
    position: relative;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.15s;
}

.portal-message-card:hover {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.portal-message-unread {
    background: white;
    border-color: #3b82f6;
    border-left-width: 3px;
}

.portal-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.portal-message-type {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.portal-message-type-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.portal-message-type-oproep {
    background-color: #fef3c7;
    color: #92400e;
}

.portal-message-type-herinnering {
    background-color: #dbeafe;
    color: #1e40af;
}

.portal-message-type-info {
    background-color: #e5e7eb;
    color: #374151;
}

.portal-message-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.portal-message-subject {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.portal-message-content {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
}

.portal-message-content p {
    margin: 0 0 0.5rem 0;
}

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

.portal-message-unread-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #3b82f6;
    border-radius: 50%;
}

.portal-message-unread-hint {
    font-size: 0.75rem;
    color: #3b82f6;
    margin-top: 0.75rem;
    font-style: italic;
}

.portal-message-reply-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.portal-reply-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.portal-reply-toggle-btn:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.portal-reply-icon {
    width: 1rem;
    height: 1rem;
}

.portal-reply-form {
    margin-top: 0.75rem;
}

.portal-reply-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 100px;
}

.portal-reply-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.portal-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.portal-reply-cancel-btn {
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.portal-reply-cancel-btn:hover {
    background-color: #f3f4f6;
}

.portal-reply-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #3b82f6;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.portal-reply-send-btn:hover {
    background-color: #2563eb;
}

.portal-reply-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.portal-reply-send-icon {
    width: 1rem;
    height: 1rem;
}

.portal-reply-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #d1fae5;
    border-radius: 0.375rem;
    color: #065f46;
    font-size: 0.875rem;
}

.portal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #6b7280;
}

.portal-empty-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: #9ca3af;
}

.portal-empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

.portal-oproepen-intro {
    font-size: 0.875rem;
    color: #92400e;
    margin: 0 0 1rem 0;
}

.portal-oproepen-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.portal-oproep-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.375rem;
}

.portal-oproep-type {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
}

.portal-oproep-type-DM { background: #dbeafe; color: #1e40af; }
.portal-oproep-type-COPD { background: #ede9fe; color: #5b21b6; }
.portal-oproep-type-Astma { background: #fef3c7; color: #92400e; }
.portal-oproep-type-OZ { background: #d1fae5; color: #065f46; }
.portal-oproep-type-HVZ { background: #fee2e2; color: #991b1b; }
.portal-oproep-type-VVR { background: #fce7f3; color: #9d174d; }

.portal-oproep-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.portal-oproep-naam {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

.portal-oproep-info {
    font-size: 0.75rem;
    color: #6b7280;
}

.portal-gegevens-list {
    display: grid;
    gap: 0.75rem;
}

.portal-gegevens-item {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .portal-gegevens-item {
        flex-direction: row;
        align-items: center;
    }
}

.portal-gegevens-item dt {
    color: #6b7280;
    font-size: 0.875rem;
    min-width: 10rem;
}

.portal-gegevens-item dd {
    color: #111827;
    font-weight: 500;
    margin: 0;
}

.portal-gegevens-note {
    margin: 1rem 0 0 0;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #1e40af;
}

.portal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.portal-section-header .portal-section-title {
    margin-bottom: 0;
}

.portal-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.portal-settings-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

.portal-settings-icon {
    width: 1rem;
    height: 1rem;
}

.portal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #6b7280;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}

.portal-back-link:hover {
    color: #111827;
}

.portal-back-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.portal-settings-section {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.portal-settings-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.portal-settings-intro {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
}

.portal-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.portal-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.portal-form-input {
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.portal-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.portal-form-error {
    font-size: 0.75rem;
    color: #dc2626;
}

.portal-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.portal-btn-primary {
    background: #3b82f6;
    color: white;
}

.portal-btn-primary:hover {
    background: #2563eb;
}

.portal-btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.portal-btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.portal-messages-flash {
    margin-bottom: 1rem;
}

.portal-flash {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.portal-flash-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.portal-flash-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.portal-flash-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Portal Dialog */
.portal-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.portal-dialog {
    background: white;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.portal-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.portal-dialog-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.portal-dialog-close {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

.portal-dialog-close:hover {
    color: #111827;
    background: #f3f4f6;
}

.portal-dialog-body {
    padding: 1.25rem;
}

.portal-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.portal-form-group {
    margin-bottom: 1rem;
}

.portal-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.portal-form-group .portal-form-input {
    width: 100%;
    box-sizing: border-box;
}

/* CRM Notifications */
.crm-notifications-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.crm-notifications-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.crm-notifications-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #d97706;
}

.crm-notifications-title {
    font-weight: 600;
    color: #92400e;
    font-size: 0.875rem;
}

.crm-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 0.375rem;
    border: 1px solid #fcd34d;
}

.crm-notification-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.crm-notification-link {
    color: #111827;
    text-decoration: none;
    font-size: 0.875rem;
}

.crm-notification-link:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.crm-notification-time {
    font-size: 0.75rem;
    color: #6b7280;
}

.crm-notification-dismiss {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 0.25rem;
    transition: all 0.15s;
}

.crm-notification-dismiss:hover {
    background: #fef3c7;
    color: #92400e;
}

.crm-notification-dismiss svg {
    width: 1rem;
    height: 1rem;
}

/* Patient Replies Card */
.crm-replies-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.crm-replies-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.crm-replies-header:hover {
    background: #f9fafb;
}

.crm-replies-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #f3f4f6;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.crm-replies-icon {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
}

.crm-replies-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0 0.25rem;
}

.crm-replies-title {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crm-replies-title-text {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.crm-replies-subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
}

.crm-replies-list {
    border-top: 1px solid #e5e7eb;
    background: white;
}

.crm-reply-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.15s;
}

.crm-reply-item:last-child {
    border-bottom: none;
}

.crm-reply-item:hover {
    background: #f9fafb;
}

.crm-reply-content {
    flex: 1;
    min-width: 0;
}

.crm-reply-patient {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.crm-reply-patient strong {
    color: #111827;
    font-size: 0.875rem;
}

.crm-reply-time {
    font-size: 0.75rem;
    color: #6b7280;
}

.crm-reply-preview {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-reply-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.crm-reply-view-btn,
.crm-reply-dismiss-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s;
}

.crm-reply-view-btn {
    color: #3b82f6;
}

.crm-reply-view-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.crm-reply-dismiss-btn {
    color: #10b981;
}

.crm-reply-dismiss-btn:hover {
    background: #d1fae5;
    color: #059669;
}

.crm-reply-view-btn svg,
.crm-reply-dismiss-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Settings Toggle Row - for email preference toggles */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
}

.settings-toggle-info {
    display: flex;
    flex-direction: column;
}

.settings-toggle-title {
    font-weight: 500;
    color: #111827;
}

.settings-toggle-description {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Revenue per year widget */
@media (max-width: 1024px) {
    .revenue-triggers { display: none; }
}

.revenue-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s;
    background: none;
    border: none;
    color: #1a1d2b;
    white-space: nowrap;
}

.revenue-trigger:hover {
    background: #f3f4f6;
}

.revenue-trigger-chevron {
    width: 12px;
    height: 12px;
    color: #7c8194;
    transition: transform 0.2s ease;
}

.revenue-trigger.open .revenue-trigger-chevron {
    transform: rotate(180deg);
}

.revenue-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e4e6ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 16px;
    width: 280px;
    z-index: 50;
}

.revenue-popover.hidden {
    display: none;
}

.revenue-popover-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.revenue-popover-title {
    font-size: 12px;
    color: #7c8194;
    font-weight: 500;
}

.revenue-popover-amount {
    font-size: 20px;
    font-weight: 700;
    color: #1a1d2b;
}

.revenue-details-content {
    display: flex;
    align-items: baseline;
    margin-top: auto;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed #e4e6ed;
}

.revenue-details-label {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7c8194;
}

.revenue-details-amount {
    font-size: 13px;
    font-weight: 600;
    color: #2a9d6e;
}

.revenue-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed #e4e6ed;
    height: 72px;
}

.revenue-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.revenue-bar-track {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: flex-end;
}

.revenue-bar-fill {
    width: 100%;
    background: #c5cee0;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.revenue-bar-fill.estimated {
    background: #edeff4;
}

.revenue-bar-label {
    font-size: 7px;
    color: #7c8194;
    line-height: 1;
}

/* ==========================================================================
   Mobile responsive utilities
   Breakpoints: 768px (tablet), 576px (mobile), 480px (small mobile)
   Minimum target: 375px
   ========================================================================== */

/* Touch target - minimum 44x44px per Apple HIG / WCAG 2.5.5 */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile drawer menu (sl-drawer) */
/* Strakkere header/body-spacing: de Shoelace-default (--sl-spacing-large = 1.5rem)
   gaf te veel witruimte boven én onder de account-header-regel. */
.mobile-drawer-menu {
    --header-spacing: 0.75rem;
    --body-spacing: 0.5rem;
}

.mobile-drawer-menu .menu-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    color: #374151;
    text-decoration: none;
    gap: 0.75rem;
}

.mobile-drawer-menu .menu-item:hover,
.mobile-drawer-menu .menu-item:active {
    background-color: #f9fafb;
}

.mobile-drawer-menu .menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.mobile-drawer-menu .border-t {
    margin: 0.25rem 0;
}

/* Drawer: extra top padding for mobile browser chrome */
@media (max-width: 576px) {
    .mobile-drawer-menu::part(panel) {
        padding-top: max(env(safe-area-inset-top, 0px), 2rem);
    }
}

/* Drawer: flatten Team beheer submenu — show items inline instead of fly-out */
.mobile-drawer-menu .submenu-team-beheer {
    list-style: none;
}

.mobile-drawer-menu .submenu-team-beheer .submenu-arrow {
    display: none;
}

.mobile-drawer-menu .submenu-team-beheer .submenu-items {
    position: static !important;
    display: block !important;
    width: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.mobile-drawer-menu .submenu-team-beheer .submenu-items li {
    list-style: none;
}

.mobile-drawer-menu .submenu-team-beheer .submenu-items .menu-item {
    padding-left: 2.5rem;
}

/* Sticky bottom bar for mobile navigation */
.sticky-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: white;
    border-top: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hide on desktop, show on mobile */
@media (min-width: 577px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Responsive visibility - tablet breakpoint */
@media (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Base layout responsive - mobile */
@media (max-width: 576px) {
    /* Hide desktop dropdown on mobile — use sl-drawer instead */
    #dropdown {
        display: none !important;
    }

    /* Header: reduce padding, remove margin */
    header.flex {
        margin-bottom: 0.5rem;
        height: auto;
        min-height: 48px;
    }

    header .bg-white.p-4 {
        padding: 0.5rem 0.75rem;
    }

    /* Logo: smaller on mobile */
    header img.mx-auto {
        height: 1.75rem;
    }

    /* Hamburger menu button: larger touch target */
    header .relative.inline-block button {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dropdown menu items: larger touch targets */
    header #dropdown a,
    header #dropdown button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Toast container: above sticky nav on mobile */
    #toast-container {
        bottom: 4.5rem !important;
        right: 1rem !important;
        left: 1rem !important;
    }

    /* Dashboard: reduce container padding */
    main.container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Dashboard toolbar: wrap filters */
    main.container .flex.items-center.space-x-4 select {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Dashboard table: tighter padding on mobile */
    .dashboard-table th,
    .dashboard-table td {
        padding: 0.25rem 0.25rem;
        font-size: 0.6875rem;
    }

    .dashboard-table {
        table-layout: fixed;
        width: 100%;
    }

    /* Kolom breedtes */
    .dashboard-table th:first-child,
    .dashboard-table td:first-child {
        width: 35%;
        word-break: break-word;
    }

    .dashboard-table th:nth-child(2),
    .dashboard-table td:nth-child(2) {
        width: 30%;
    }

    .dashboard-table th:last-child,
    .dashboard-table td:last-child {
        width: 35%;
        text-align: right;
    }

    /* Dashboard: aanlevering kolom compacter */
    .dashboard-table .flex-row-wrap {
        gap: 0.125rem;
    }

    .dashboard-table .badge {
        font-size: 0.5rem;
        padding: 0 0.1875rem;
    }

    /* Status kolom: verberg subtekst op mobiel */
    .dashboard-table td:nth-child(2) .text-xs {
        display: none;
    }

    /* ...maar NIET de blokkade-regels. Die regel hierboven is bedoeld voor
       SUBTEKST; de blokkade zette er twee dingen in dezelfde cel bij die geen
       subtekst zijn:

       1. Een CONTROL — de deblokkeer-knop. Die werd op telefoons volledig
          onbereikbaar (display:none, 0x0). Blokkeren kan op mobiel wél (die
          knop hangt in het acties-dropdown, een andere cel), dus zonder deze
          uitzondering kun je een periode op je telefoon wel dichtzetten maar
          nooit meer openzetten — en zit de klant vast tot iemand blocked_at in
          de admin leegmaakt.
       2. De UITLEG aan de klant. Op telefoon was de badge het enige signaal;
          de klant zag z'n Valideer-knop dichtgaan zonder ergens te lezen
          waarom of dat 'ie niets hoeft te doen. Dat is precies de vraag waar
          'ie mee blijft zitten, dus die regels horen juist op de kleinste
          schermen zichtbaar te zijn.

       De reden-regel (intern, "Reden: … — wie — wanneer") krijgt deze klasse
       bewust NIET: dat is wél subtekst, alleen voor Reg4U, en lang genoeg om
       een telefoonrij te laten ontploffen. */
    .dashboard-table td:nth-child(2) .delivery-block-info {
        display: flex;
    }

    .dashboard-table td:nth-child(2) button.delivery-block-info {
        display: inline-block;
    }

    /* Mee-schalen met de rest van de kolom. Tailwind's `.text-xs` is 0.75rem —
       op desktop KLEINER dan de omringende tekst, dus daar leest 'ie als
       subtekst. Op mobiel krimpt alles eromheen (`td` naar 0.6875rem, de badge
       naar 0.5625rem) maar `.text-xs` niet, waardoor precies dezelfde klasse de
       GROOTSTE tekst van de rij werd — groter nog dan de periodenaam. Gemeten
       op 390px: 12px blokkade-regel vs. 11px celtekst vs. 9px badge.

       Gelijktrekken met de celtekst (0.6875rem) i.p.v. verder verkleinen: dit
       is de enige uitleg die de klant krijgt, dus 'ie mag niet wegvallen — 'ie
       moet alleen niet schreeuwen. De `<strong>` op de eerste regel geeft nog
       genoeg nadruk zonder de type-schaal van de kolom te breken. */
    .dashboard-table td:nth-child(2) .delivery-block-info {
        font-size: 0.6875rem;
    }

    /* Status badge compacter */
    .dashboard-table td:nth-child(2) .badge {
        font-size: 0.5625rem;
        white-space: nowrap;
    }

    /* Dashboard: verberg primaire actieknoppen op mobiel, alles via drie-puntjes */
    .action-buttons-group {
        display: none !important;
    }

    /* Acties kolom: minder ruimte */
    .flex-row-end {
        gap: 0.125rem;
    }

    /* Dashboard modals: full-width, centered op mobiel */
    #confirmValidateModal,
    #confirmFinalModal {
        z-index: 50;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem;
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    #confirmValidateModal.hidden,
    #confirmFinalModal.hidden {
        display: none !important;
    }

    #confirmValidateModal > div,
    #confirmFinalModal > div,
    #editAmountOnlyModal > div {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        top: auto !important;
    }

    #editAmountOnlyModal {
        z-index: 50;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem;
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    #editAmountOnlyModal.hidden {
        display: none !important;
    }

    /* Settings modal: full-screen on mobile, extra top padding for browser chrome */
    #settingsModal {
        align-items: flex-start !important;
    }

    #settingsModal > div {
        max-width: 100% !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        padding-top: max(env(safe-area-inset-top, 0px) + 1rem, 3.5rem) !important;
    }

    /* Settings modal: hide desktop tabs, show mobile dropdown */
    #settingsModal .settings-tabs-desktop {
        display: none !important;
    }

    #settingsModal .settings-tabs-mobile {
        display: block !important;
    }

    /* Settings modal: reduce spacing */
    #settingsModal h2 {
        margin-bottom: 0.75rem;
        font-size: 1.125rem;
    }

    /* Settings modal: tab content needs no right padding on mobile */
    #settingsModal .tab-content {
        padding-right: 0 !important;
    }
}

/* 2FA digit inputs - responsive */
.twofa-digit {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 576px) {
    .twofa-digit {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
    }
}

/* Responsive visibility and layout - mobile breakpoint */
@media (max-width: 576px) {
    .mobile-hidden {
        display: none !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .hide-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile medical record template
   ========================================================================== */

.mobile-record-page {
    padding-bottom: 8rem; /* space for sticky swipe card + nav bar */
}

/* Compact header */
.mobile-record-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 30;
}

.mobile-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}

.mobile-record-chips {
    display: flex;
    gap: 0.375rem;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
}

.mobile-chip {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #f3f4f6;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

/* Validated banner */
.mobile-validated-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #166534;
    cursor: pointer;
}

/* Evaluation rating buttons */
.mobile-rating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #374151;
    background: white;
    cursor: pointer;
}

input[type="radio"]:checked + .mobile-rating-btn {
    background: #111827;
    color: white;
    border-color: #111827;
}

/* Reden block (static, subtle) */
.mobile-reason-block {
    padding: 0.375rem 0.75rem;
    margin: 0.25rem 0.75rem;
    background: #f9fafb;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
}

.mobile-reason-block .font-semibold {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #9ca3af;
    font-weight: 500;
}

/* Swipe container (for step 2 options) */
.mobile-swipe-container {
    padding: 0.75rem;
}

.mobile-swipe-step {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Sticky swipe area above nav bar */
.mobile-sticky-swipe {
    position: fixed;
    bottom: 3.5rem; /* above the nav bar */
    left: 0;
    right: 0;
    z-index: 39;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
}

.mobile-swipe-card-sticky {
    position: relative;
    background: #f9fafb;
    border: 2px solid #d1d5db;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    touch-action: pan-y;
    user-select: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-swipe-card-label {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    z-index: 1;
}

.mobile-swipe-feedback {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 2;
}

.mobile-swipe-feedback.left {
    left: 0.75rem;
    color: #ef4444;
}

.mobile-swipe-feedback.right {
    right: 0.75rem;
    color: #22c55e;
}

.mobile-later-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 0.25rem;
}

/* Step 2 back button */
.mobile-step2-back {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #6b7280;
    font-size: 0.875rem;
    padding: 0.5rem 0;
    background: none;
    border: none;
    min-height: 44px;
}

/* Option buttons (step 2) */
.mobile-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mobile-option-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border: 2px solid transparent;
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
}

.mobile-option-btn.green {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.mobile-option-btn.green:active {
    background: #dcfce7;
}

.mobile-option-btn.red {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.mobile-option-btn.red:active {
    background: #fee2e2;
}

.mobile-option-btn.selected {
    border-color: #facc15 !important;
    border-width: 3px;
    box-shadow: 0 0 0 1px #facc15;
}

.mobile-option-btn:disabled {
    opacity: 0.5;
}

/* Reason input group */
.mobile-reason-input-group {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fafafa;
}

.mobile-reason-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Compact notes table */
.mobile-notes-section {
    padding: 0 0.75rem;
    margin-top: 0.5rem;
}

.mobile-notes-list {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mobile-notes-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.mobile-notes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mobile-notes-table thead th {
    text-align: left;
    padding: 0.25rem 0.125rem;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.6875rem;
}

.mobile-notes-table tbody td {
    padding: 0.25rem 0.125rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.mobile-note-row {
    cursor: pointer;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 0.125rem;
    font-size: 0.75rem;
}

.mobile-note-row.current {
    background-color: #ede9fe;
}

.mobile-note-meta {
    flex-shrink: 0;
    width: 4.5rem;
}

.mobile-meta-date {
    color: #6b7280;
    font-size: 0.6875rem;
    font-weight: 600;
}

.mobile-meta-detail {
    color: #6b7280;
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-note-text {
    flex: 1;
    min-width: 0;
}

.mobile-decla-badge {
    display: inline-block;
    padding: 0 0.25rem;
    background: #e0e7ff;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    color: #3730a3;
    margin-right: 0.125rem;
    margin-bottom: 0.125rem;
}

.mobile-decla-badge.human {
    background: #fef3c7;
    color: #92400e;
}

.mobile-note-text {
    color: #374151;
    line-height: 1.3;
}

.mobile-note-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Notitie-cel in de medical-record view (desktop + hospital).
   De clamp hoort op deze wrapper-div en NOOIT op de <td> zelf: `display:-webkit-box`
   op een table-cell haalt 'm uit het table-cell-model, waardoor de browser een
   anonieme cel moet inschuiven en de kolombreedte-berekening niet meer klopt. In
   engines die de legacy -webkit-box nog echt als legacy-box uitvoeren wrapt de tekst
   dan niet en knipt `overflow:hidden` de rechterkant onherstelbaar weg (#2144). */
.note-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Ingeklapt collapsen we de harde enters: anders vult een lege regel tussen twee
       alinea's een van de drie zichtbare regels en belandt het afkap-teken (…) op een
       eigen regel. Uitgeklapt komen de alinea's terug via .is-expanded. */
    white-space: normal;
    /* `anywhere` i.p.v. `break-word`: beide breken een te lang woord tijdens het
       regel-opmaken, maar alléén `anywhere` verlaagt óók de min-content-breedte van de
       cel. Met `break-word` duwt één lange URL of labcode in een notitie de hele tabel
       breder dan z'n kaart (gemeten: 1220px in een container van 1198px), waarna de
       gebruiker horizontaal moet scrollen om het eind van de regel te lezen. */
    overflow-wrap: anywhere;
}

.note-clamp.is-expanded {
    display: block;
    overflow: visible;
    white-space: pre-line;
}

.note-toggle {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #4338ca;
    cursor: pointer;
}

.note-toggle:hover {
    text-decoration: underline;
}

/* Progress info */
.mobile-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.5rem;
}

.mobile-earnings {
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #bbf7d0;
}

.mobile-filter-warning {
    padding: 0.5rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    margin: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: #92400e;
}

/* Sticky bottom nav */
.mobile-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
}

.mobile-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
}

.mobile-nav-btn.finish {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
}

.mobile-nav-btn.disabled {
    visibility: hidden;
}

.mobile-nav-center {
    flex: 1;
    text-align: center;
}

.mobile-nav-progress {
    font-size: 0.6875rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* Modal buttons for mobile */
.mobile-modal-btn {
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.mobile-modal-btn.primary {
    background: #111827;
    color: white;
    border: none;
}

.mobile-modal-btn.secondary {
    background: white;
    color: #374151;
    border: 2px solid #d1d5db;
}

/* Onboarding overlay */
.mobile-onboarding-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.mobile-onboarding-content {
    text-align: center;
    color: white;
    padding: 1.5rem;
}

.mobile-onboarding-gesture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.mobile-onboarding-arrow {
    font-size: 2rem;
    font-weight: bold;
    animation: swipeArrowPulse 1.5s ease-in-out infinite;
}

.mobile-onboarding-arrow.left {
    color: #fca5a5;
}

.mobile-onboarding-arrow.right {
    color: #86efac;
}

@keyframes swipeArrowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; }
}

@keyframes swipeArrowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.mobile-onboarding-hand {
    font-size: 2rem;
    animation: swipeHandMove 2s ease-in-out infinite;
}

@keyframes swipeHandMove {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(20px); }
    75% { transform: translateX(-20px); }
}

.mobile-onboarding-text {
    font-size: 0.9375rem;
    margin: 0.25rem 0;
    color: #e5e7eb;
}

.mobile-onboarding-dismiss {
    margin-top: 1rem;
    padding: 0.625rem 1.5rem;
    background: white;
    color: #111827;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Mobile modals: full-width on small screens */
@media (max-width: 576px) {
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 1rem auto !important;
    }

    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer button {
        width: 100%;
        min-height: 44px;
    }

    /* Filters dialog full-screen on mobile */
    sl-dialog#filtersDialog::part(panel) {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    sl-dialog#filtersDialog::part(body) {
        padding: 1rem;
    }
}

/* Mobile-only: hidden by default, shown on mobile */
.mobile-only,
.mobile-only-block,
.mobile-only-inline {
    display: none !important;
}

@media (max-width: 576px) {
    .mobile-only {
        display: flex !important;
    }

    .mobile-only-block {
        display: block !important;
    }

    .mobile-only-inline {
        display: inline !important;
    }
}

/* Klikbare patientnaam in declaratiemanager open items — kopieert BSN naar klembord */
.patient-naam-link {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.patient-naam-link:hover {
    border-bottom-color: #9ca3af;
}
.patient-naam-copied-icon {
    display: inline-block;
    margin-left: 0.35rem;
    vertical-align: -2px;
    color: #16a34a;
    animation: patient-copy-fade 1.4s ease-in-out forwards;
}
@keyframes patient-copy-fade {
    0%   { opacity: 0; transform: translateY(2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-2px); }
}

/* Prikloket patiënten-overzicht: hover-popover op naam-cel met email,
   mobiel en geboortedatum (via Shoelace <sl-tooltip hoist>, dus rendert op
   body-level — escapes overflow-x-auto van de table-wrapper en voorkomt
   layout-shift bij hover), plus copy-knop voor het patiëntnummer. */
.recipient-hover-tooltip {
    /* Lichtere achtergrond + meer padding dan de Shoelace-default zodat de
       multi-row content (icon + tekst) leesbaar is. */
    --sl-tooltip-background-color: #ffffff;
    --sl-tooltip-color: #1f2937;
    --sl-tooltip-border-radius: 0.5rem;
    --sl-tooltip-padding: 0.75rem 0.875rem;
    --sl-tooltip-font-size: 0.8125rem;
    --sl-tooltip-line-height: 1.45;
    --sl-tooltip-arrow-size: 6px;
}
.recipient-hover-trigger {
    cursor: help;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.recipient-hover-trigger:hover,
.recipient-hover-trigger:focus-visible {
    border-bottom-color: #9ca3af;
    outline: none;
}
.recipient-hover-detail {
    min-width: 14rem;
    max-width: 22rem;
}
.recipient-hover-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
    text-align: left;
}
.recipient-hover-detail-row + .recipient-hover-detail-row {
    border-top: 1px solid #f3f4f6;
    padding-top: 0.375rem;
    margin-top: 0.25rem;
}
.recipient-hover-detail-icon {
    flex: 0 0 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}
.recipient-hover-detail-empty {
    color: #9ca3af;
    font-style: italic;
}

.copy-patientnr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background-color: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.copy-patientnr-btn:hover,
.copy-patientnr-btn:focus-visible {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
    outline: none;
}
.copy-patientnr-btn[data-copied="1"] {
    color: #047857;
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}
.copy-patientnr-btn sl-icon {
    font-size: 1rem;
}

/* ===== Mobile-unavailable overlay =====================================
 * Voor non-Declaratiescan producten: op mobile (max-width 576px) verbergen we
 * de eigenlijke pagina-content en tonen een placeholder die uitlegt dat het
 * product nog geen mobiele view heeft.
 */
.mobile-unavailable-overlay {
    display: none;
}

@media (max-width: 576px) {
    body.mobile-unavailable-product main { display: none !important; }
    body.mobile-unavailable-product .mobile-unavailable-overlay {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 1rem;
    }
    .mobile-unavailable-card {
        max-width: 22rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }
    .mobile-unavailable-icon {
        width: 3rem;
        height: 3rem;
        margin: 0 auto 0.75rem;
        color: #14b8a6;
    }
    .mobile-unavailable-title {
        font-size: 1.05rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.5rem;
    }
    .mobile-unavailable-text {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 1rem;
        line-height: 1.4;
    }
    .mobile-unavailable-button {
        display: inline-block;
        background: #111827;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
    }
    .mobile-unavailable-button:hover { background: #374151; }
}

/* Hamburger menu — admin/superuser tools onderscheidend in paars zodat je
 * direct ziet welke items intern/admin-only zijn. */
.menu-item--admin {
    color: #7c3aed !important;
}
.menu-item--admin svg {
    color: #a78bfa !important;
}
.menu-item--admin:hover {
    background: #faf5ff !important;
}

/* Admin-tools paars: maak ook werkend binnen sl-drawer (hogere specificiteit) */
.mobile-drawer-menu .menu-item--admin,
.menu-item--admin {
    color: #7c3aed !important;
}
.mobile-drawer-menu .menu-item--admin svg,
.menu-item--admin svg {
    color: #a78bfa !important;
}

/* Sales-tools blauw — aparte categorie naast admin-tools (paars) */
.mobile-drawer-menu .menu-item--sales,
.menu-item--sales {
    color: #2563eb !important;
}
.mobile-drawer-menu .menu-item--sales svg,
.menu-item--sales svg {
    color: #60a5fa !important;
}
.mobile-drawer-menu .menu-item--sales:hover,
.menu-item--sales:hover {
    background: #eff6ff !important;
}

/* Mid-kwartaal-instromers detail-pagina: filter-chips + paginering */
/* Mid-kwartaal-instromers detail-pagina: filter-chips + paginering */
.instromers-filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.instromers-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #374151;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s;
}
.instromers-filter-chip:hover { background-color: #f3f4f6; }
.instromers-filter-chip.active { background-color: #3b82f6; color: white; border-color: #3b82f6; }
.instromers-filter-chip.active .instromers-chip-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}
.instromers-chip-count {
    background-color: #e5e7eb;
    color: #4b5563;
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}
.instromers-filter-chip.chip-match.active { background-color: #059669; border-color: #059669; }
.instromers-filter-chip.chip-not-found.active { background-color: #d97706; border-color: #d97706; }
.instromers-filter-chip.chip-aandacht.active { background-color: #dc2626; border-color: #dc2626; }
.instromers-filter-chip.chip-pending.active { background-color: #4b5563; border-color: #4b5563; }

.instromers-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.875rem;
}
.instromers-pagination-summary { color: #6b7280; }
.instromers-pagination-controls { display: flex; gap: 0.5rem; align-items: center; }
.instromers-page-link {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.8125rem;
}
.instromers-page-link:hover { background-color: #f3f4f6; }
.instromers-page-link.disabled {
    color: #9ca3af;
    pointer-events: none;
    background-color: #f9fafb;
}
.instromers-page-current {
    color: #374151;
    font-weight: 600;
}

/* ===========================================================================
 * Brand-color: cyan (Ketenzorgmanager — matched ketenzorgmanager.nl)
 * Tailwind v2.2 CDN bevat geen cyan-palette; deze classes vullen de gaps
 * voor de shades die templates gebruiken via {{ brand_color }}-XX:
 *   bg-, text-, from-, to-, border-, hover:bg-, hover:text-
 * Hex codes uit Tailwind v3 cyan-palette voor consistency met andere
 * Tailwind-projecten.
 * =========================================================================== */
.bg-cyan-50  { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-cyan-700 { background-color: #0e7490; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-700 { color: #0e7490; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-cyan-300 { border-color: #67e8f9; }
.from-cyan-50 { --tw-gradient-from: #ecfeff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,254,255,0)); }
.to-cyan-100 { --tw-gradient-to: #cffafe; }
.hover\:bg-cyan-700:hover { background-color: #0e7490; }
.hover\:text-cyan-700:hover { color: #0e7490; }

/* Prikloket — samenwerking koppelen */
.prikloket-collaboration-page {
    display: flex;
    max-width: 48rem;
    flex-direction: column;
    gap: 1.5rem;
}

.prikloket-collaboration-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background-color: #ffffff;
}

.prikloket-collaboration-card--confirm {
    max-width: 42rem;
}

.prikloket-collaboration-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem 1rem 1rem;
}

.prikloket-collaboration-page-title,
.prikloket-collaboration-confirm-title,
.prikloket-collaboration-title {
    margin: 0;
    color: #111827;
    font-weight: 600;
}

.prikloket-collaboration-page-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.prikloket-collaboration-confirm-title {
    margin-top: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.prikloket-collaboration-title {
    font-size: 1rem;
    line-height: 1.5rem;
}

.prikloket-collaboration-subtitle,
.prikloket-collaboration-help-text,
.prikloket-collaboration-list-meta,
.prikloket-collaboration-empty,
.prikloket-collaboration-cancel-link,
.prikloket-collaboration-owner-status,
.prikloket-collaboration-label,
.prikloket-collaboration-step {
    font-size: 1rem;
    line-height: 1.5rem;
}

.prikloket-collaboration-subtitle {
    margin: 0.25rem 0 0;
    color: #4b5563;
}

.prikloket-collaboration-section {
    padding: 1.25rem 1rem;
}

.prikloket-collaboration-section--bordered {
    border-bottom: 1px solid #e5e7eb;
}

.prikloket-collaboration-section--muted {
    background-color: #f9fafb;
}

.prikloket-collaboration-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prikloket-collaboration-step {
    margin: 0;
    color: #15803d;
    font-weight: 500;
}

.prikloket-collaboration-title-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.prikloket-collaboration-info-trigger {
    display: inline-flex;
    color: #9ca3af;
    cursor: help;
}

.prikloket-collaboration-info-trigger:hover {
    color: #4b5563;
}

.prikloket-collaboration-info-trigger:focus {
    border-radius: 0.125rem;
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6, 0 0 0 3px #ffffff;
}

.prikloket-collaboration-info-trigger sl-icon {
    width: 1rem;
    height: 1rem;
}

.prikloket-collaboration-join-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.prikloket-collaboration-code-field {
    min-width: 0;
}

.prikloket-collaboration-label {
    display: flex;
    color: #374151;
    font-weight: 500;
}

.prikloket-collaboration-code-input {
    width: 100%;
    height: 2.75rem;
    margin-top: 0.25rem;
    padding: 0 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.prikloket-collaboration-code-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 1px #3b82f6;
}

.prikloket-collaboration-primary-button,
.prikloket-collaboration-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
}

.prikloket-collaboration-primary-button {
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid #059669;
    background-color: #059669;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
}

.prikloket-collaboration-primary-button:hover {
    border-color: #047857;
    background-color: #047857;
}

.prikloket-collaboration-primary-button:focus,
.prikloket-collaboration-secondary-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #10b981;
}

.prikloket-collaboration-owner-status {
    margin: 1rem 0 0;
    color: #374151;
    font-weight: 500;
}

.prikloket-collaboration-help-text {
    margin: 0.25rem 0 0;
    color: #4b5563;
}

.prikloket-collaboration-code-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.prikloket-collaboration-code {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    background-color: #f0fdf4;
    color: #166534;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    user-select: all;
}

.prikloket-collaboration-secondary-button {
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.prikloket-collaboration-secondary-button:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
}

.prikloket-collaboration-text-button,
.prikloket-collaboration-leave-button {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
}

.prikloket-collaboration-text-button {
    color: #6b7280;
    text-decoration: underline;
}

.prikloket-collaboration-text-button:hover {
    color: #1f2937;
}

.prikloket-collaboration-start-form {
    margin-top: 1rem;
}

.prikloket-collaboration-list-header {
    padding: 1.25rem 1rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.prikloket-collaboration-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prikloket-collaboration-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.prikloket-collaboration-list-item + .prikloket-collaboration-list-item {
    border-top: 1px solid #f3f4f6;
}

.prikloket-collaboration-list-content {
    min-width: 0;
}

.prikloket-collaboration-list-name {
    color: #111827;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.prikloket-collaboration-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

.prikloket-collaboration-list-meta {
    margin-top: 0.125rem;
    color: #6b7280;
}

.prikloket-collaboration-leave-form {
    flex-shrink: 0;
}

.prikloket-collaboration-leave-button {
    color: #9ca3af;
    transition: color 0.15s ease;
}

.prikloket-collaboration-leave-button:hover {
    color: #dc2626;
}

.prikloket-collaboration-empty {
    padding: 2rem 1rem;
    color: #6b7280;
    text-align: center;
}

.prikloket-collaboration-confirm-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
}

.prikloket-collaboration-summary {
    overflow: hidden;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #f9fafb;
}

.prikloket-collaboration-summary-row {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
}

.prikloket-collaboration-summary-row--bordered {
    border-bottom: 1px solid #e5e7eb;
}

.prikloket-collaboration-summary-row dt,
.prikloket-collaboration-summary-row dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.prikloket-collaboration-summary-row dt {
    color: #6b7280;
}

.prikloket-collaboration-summary-row dd {
    color: #111827;
    font-weight: 500;
}

.prikloket-collaboration-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prikloket-collaboration-confirm-actions form,
.prikloket-collaboration-confirm-actions .prikloket-collaboration-primary-button {
    width: 100%;
}

.prikloket-collaboration-cancel-link {
    display: inline-flex;
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
}

.prikloket-collaboration-cancel-link:hover {
    color: #1f2937;
}

@media (min-width: 640px) {
    .prikloket-collaboration-header,
    .prikloket-collaboration-section,
    .prikloket-collaboration-confirm-body {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .prikloket-collaboration-page-title {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .prikloket-collaboration-subtitle,
    .prikloket-collaboration-help-text,
    .prikloket-collaboration-list-meta,
    .prikloket-collaboration-empty,
    .prikloket-collaboration-cancel-link,
    .prikloket-collaboration-owner-status,
    .prikloket-collaboration-label,
    .prikloket-collaboration-step,
    .prikloket-collaboration-code-input,
    .prikloket-collaboration-primary-button,
    .prikloket-collaboration-summary-row dt,
    .prikloket-collaboration-summary-row dd {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .prikloket-collaboration-join-form {
        flex-direction: row;
        align-items: flex-end;
    }

    .prikloket-collaboration-code-field {
        width: 13rem;
    }

    .prikloket-collaboration-code-input,
    .prikloket-collaboration-primary-button {
        height: 2.5rem;
    }

    .prikloket-collaboration-list-header {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .prikloket-collaboration-list-item {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .prikloket-collaboration-empty {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .prikloket-collaboration-summary-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .prikloket-collaboration-summary-row dd {
        grid-column: span 2 / span 2;
    }

    .prikloket-collaboration-confirm-actions {
        flex-direction: row;
        align-items: center;
    }

    .prikloket-collaboration-confirm-actions form,
    .prikloket-collaboration-confirm-actions .prikloket-collaboration-primary-button {
        width: auto;
    }
}