@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Fast responses — aligned with new_design/mailing.html */
.dh-fr-page {
    --fr-blue: var(--in-primary, #2563eb);
    --fr-blue-hover: var(--in-primary-h, #1d4ed8);
    --fr-blue-active: #1e40af;
    --fr-blue-light: var(--in-primary-soft, #dbeafe);
    --fr-blue-mid: color-mix(in srgb, var(--fr-blue) 30%, white);
    --fr-bg: #f4f5f7;
    --fr-surface: #ffffff;
    --fr-surface-2: #f9f9fb;
    --fr-border: #e3e5e9;
    --fr-border-soft: #eceef1;
    --fr-text: #1a1c20;
    --fr-text-muted: #6b7280;
    --fr-text-faint: #adb5bd;
    --fr-success: #22c55e;
    --fr-success-bg: #dcfce7;
    --fr-warning: #f59e0b;
    --fr-warning-bg: #fef3c7;
    --fr-danger: #ef4444;
    --fr-danger-bg: #fee2e2;
    --fr-radius: 8px;
    --fr-radius-lg: 12px;
    --fr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    --fr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --fr-trans: 150ms ease;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fr-text);
    background: var(--fr-bg);
    margin: -1rem -0.75rem 0;
    min-height: calc(100vh - 4rem);
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] .dh-fr-page {
    --fr-blue: var(--in-primary, #3b82f6);
    --fr-blue-hover: var(--in-primary-h, #60a5fa);
    --fr-blue-active: #93c5fd;
    --fr-blue-light: var(--in-primary-soft, #1e3a5f);
    --fr-blue-mid: color-mix(in srgb, var(--fr-blue) 35%, #0f1117);
    --fr-bg: #0f1117;
    --fr-surface: #1a1d27;
    --fr-surface-2: #232637;
    --fr-border: rgba(255, 255, 255, 0.08);
    --fr-border-soft: rgba(255, 255, 255, 0.05);
    --fr-text: #e8eaf0;
    --fr-text-muted: #9299ad;
    --fr-text-faint: #5c647a;
    --fr-success-bg: #14432a;
    --fr-warning-bg: #44300a;
    --fr-danger-bg: #4b1a1a;
    --fr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --fr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.dh-fr-page .dh-fr-page-body {
    padding: 0 0 80px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

/* Section card */
.dh-fr-page .dh-fr-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius-lg);
    box-shadow: var(--fr-shadow-sm);
    overflow: visible;
}

.dh-fr-page .dh-fr-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--fr-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dh-fr-page .dh-fr-card-head-text h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--fr-text);
}

.dh-fr-page .dh-fr-card-head-sub {
    font-size: 12px;
    color: var(--fr-text-muted);
    margin-top: 2px;
}

.dh-fr-page .dh-fr-card-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dh-fr-page .dh-fr-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dh-fr-page .dh-fr-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dh-fr-page .dh-fr-inner-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius-lg);
    box-shadow: var(--fr-shadow-sm);
    overflow: visible;
}

.dh-fr-page .dh-fr-inner-card .dh-fr-inner-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--fr-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dh-fr-page .dh-fr-inner-card .dh-fr-inner-card-head h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.dh-fr-page .dh-fr-inner-card .dh-fr-inner-card-sub {
    font-size: 12px;
    color: var(--fr-text-muted);
    margin-top: 2px;
}

.dh-fr-page .dh-fr-inner-card .dh-fr-inner-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
}

/* Header card (expand / info) */
.dh-fr-page .header-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.dh-fr-page .header-card-title-section {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.dh-fr-page .header-card-title-wrap h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--fr-text);
}

.dh-fr-page .header-card-title-wrap .dh-fr-card-head-sub {
    margin-top: 2px;
}

.dh-fr-page .dh-fr-header-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fr-text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.dh-fr-page .dh-fr-header-link-btn:hover {
    color: var(--fr-blue-active);
    background: var(--fr-blue-light);
}

.dh-fr-page .dh-fr-header-toggle-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    background: var(--fr-surface-2);
    color: var(--fr-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.dh-fr-page .dh-fr-header-toggle-btn:hover {
    border-color: var(--fr-blue);
    color: var(--fr-blue-active);
}

/* Buttons */
.dh-fr-page .dh-fr-btn,
.dh-fr-page .btn.btn-primary.dh-fr-compat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--fr-radius);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--fr-trans), border-color var(--fr-trans), box-shadow var(--fr-trans);
    white-space: nowrap;
}

.dh-fr-page .dh-fr-btn--block {
    width: 100%;
}

.dh-fr-page .dh-fr-btn--primary,
.dh-fr-page .btn.btn-primary.dh-fr-compat {
    background: var(--fr-blue);
    color: #fff;
    border-color: var(--fr-blue);
}

.dh-fr-page .dh-fr-btn--primary:hover:not(:disabled),
.dh-fr-page .btn.btn-primary.dh-fr-compat:hover:not(:disabled) {
    background: var(--fr-blue-hover);
}

.dh-fr-page .dh-fr-btn--outline {
    background: var(--fr-surface);
    color: var(--fr-text);
    border-color: var(--fr-border);
}

.dh-fr-page .dh-fr-btn--outline:hover:not(:disabled) {
    background: var(--fr-bg);
}

.dh-fr-page .dh-fr-btn--secondary {
    background: var(--fr-surface-2);
    color: var(--fr-text-muted);
    border-color: var(--fr-border);
}

.dh-fr-page .dh-fr-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

.dh-fr-page .dh-fr-btn--danger-outline {
    background: transparent;
    color: var(--fr-danger);
    border-color: var(--fr-danger);
}

.dh-fr-page .dh-fr-btn--danger-outline:hover:not(:disabled) {
    background: var(--fr-danger-bg);
}

.dh-fr-page .dh-fr-btn:disabled,
.dh-fr-page .dh-fr-btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dh-fr-page .dh-fr-btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.88;
}

.dh-fr-page .dh-fr-btn.is-loading .dh-fr-btn-text {
    opacity: 0;
}

.dh-fr-page .dh-fr-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dh-fr-spin 0.65s linear infinite;
}

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

/* Form fields */
.dh-fr-page .field,
.dh-fr-page .mb-3:has(.form-label) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dh-fr-page .form-label,
.dh-fr-page .field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fr-text);
    margin-bottom: 0;
}

.dh-fr-page .form-control,
.dh-fr-page .form-select,
.dh-fr-page .inp {
    width: 100%;
    background: var(--fr-surface-2);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    padding: 8px 11px;
    font-size: 13px;
    color: var(--fr-text);
    outline: none;
    transition: border-color var(--fr-trans), box-shadow var(--fr-trans);
}

.dh-fr-page .form-control:focus,
.dh-fr-page .form-select:focus {
    border-color: var(--fr-blue);
    box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.15);
    background: var(--fr-surface);
}

html[data-theme="dark"] .dh-fr-page .form-control:focus,
html[data-theme="dark"] .dh-fr-page .form-select:focus {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.dh-fr-page textarea.form-control,
.dh-fr-page .ta {
    min-height: 90px;
    resize: vertical;
    line-height: 1.6;
}

.dh-fr-page .filter-row,
.dh-fr-page .dh-fr-dates-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.dh-fr-page .filter-row .field,
.dh-fr-page .dh-fr-dates-row > div {
    flex: 1;
    min-width: 160px;
}

.dh-fr-page .dh-fr-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dh-fr-page .dh-fr-banner {
    border-radius: var(--fr-radius);
    padding: 10px 12px;
    font-size: 13px;
}

.dh-fr-page .dh-fr-banner--info {
    background: var(--fr-blue-light);
    border: 1px solid var(--fr-blue-mid);
    color: var(--fr-blue-active);
}

html[data-theme="dark"] .dh-fr-page .dh-fr-banner--info {
    color: var(--fr-blue);
}

/* Toggle rows (mailing conditions) */
.dh-fr-page .dh-fr-conditions-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--fr-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.dh-fr-page .dh-fr-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.dh-fr-page .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid var(--fr-border-soft);
    gap: 12px;
}

.dh-fr-page .dh-fr-toggle-grid .toggle-row:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--fr-border-soft);
    padding-right: 0;
}

.dh-fr-page .dh-fr-toggle-grid .toggle-row:nth-last-child(2) {
    border-bottom: none;
    padding-bottom: 0;
}

.dh-fr-page .toggle-label {
    font-size: 13px;
    color: var(--fr-text);
    font-weight: 500;
}

.dh-fr-page .toggle-desc {
    font-size: 11px;
    color: var(--fr-text-muted);
    margin-top: 2px;
}

.dh-fr-page .toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.dh-fr-page .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dh-fr-page .toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: var(--fr-border);
    cursor: pointer;
    transition: background var(--fr-trans);
}

.dh-fr-page .toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--fr-trans);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dh-fr-page .toggle input:checked + .toggle-track {
    background: var(--fr-blue);
}

.dh-fr-page .toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
}

.dh-fr-page .toggle input:disabled + .toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.dh-fr-page .dh-fr-toggle-full,
.dh-fr-page .dh-fr-toggle-skip {
    grid-column: 1 / -1;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    overflow: visible;
}

.dh-fr-page .dh-fr-toggle-skip {
    align-items: flex-start;
    padding-bottom: 12px !important;
    border-bottom: none !important;
}

.dh-fr-page .dh-fr-toggle-skip .custom-multiselect {
    overflow: visible;
    z-index: 5;
}

.dh-fr-page .dh-fr-toggle-skip .search-input-container {
    position: relative;
    z-index: 6;
}

.dh-fr-page .dh-fr-toggle-skip .dropdown-menu.show {
    z-index: 1070;
}

.dh-fr-page .dh-fr-toggle-skip .search-input {
    min-height: 38px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

.dh-fr-page .switch-chips .form-check-input:checked {
    background-color: var(--fr-blue);
    border-color: var(--fr-blue);
}

.dh-fr-page .switch-chips .chip:hover {
    border-color: var(--fr-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-blue) 12%, transparent);
}

/* Lang tabs */
.dh-fr-page .lang-tabs {
    display: flex;
    border-radius: var(--fr-radius);
    overflow: hidden;
    border: 1px solid var(--fr-border);
    width: auto;
}

.dh-fr-page .lang-tab {
    flex: 1;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fr-text-muted);
    text-align: center;
    cursor: pointer;
    background: var(--fr-surface-2);
    border: none;
    border-right: 1px solid var(--fr-border);
    transition: background var(--fr-trans), color var(--fr-trans);
}

.dh-fr-page .lang-tab:last-child {
    border-right: none;
}

.dh-fr-page .lang-tab.active {
    background: var(--fr-blue-light);
    color: var(--fr-blue-active);
}

html[data-theme="dark"] .dh-fr-page .lang-tab.active {
    color: var(--fr-blue);
}

.dh-fr-page .lang-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dh-fr-page .message-hint {
    font-size: 11px;
    color: var(--fr-text-muted);
    line-height: 1.5;
}

.dh-fr-page .message-textarea {
    min-height: 120px;
    background: var(--fr-surface-2);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    color: var(--fr-text);
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    width: 100%;
}

.dh-fr-page .message-textarea:focus {
    border-color: var(--fr-blue);
    box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.15);
    outline: none;
}

.dh-fr-page .message-footer {
    font-size: 11px;
    color: var(--fr-text-muted);
}

.dh-fr-page .dh-fr-inner-card-footer {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--fr-border-soft);
    background: var(--fr-surface);
    border-radius: 0 0 var(--fr-radius-lg) var(--fr-radius-lg);
}

.dh-fr-page .dh-fr-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 0;
    flex-wrap: wrap;
}

.dh-fr-page .dh-fr-inner-card-body .dh-fr-form-actions {
    padding-top: 8px;
    margin-top: 4px;
}

/* Templates */
.dh-fr-page .dh-fr-template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dh-fr-page .tmpl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dh-fr-page .tmpl-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--fr-radius);
    border: 1px solid var(--fr-border-soft);
    background: var(--fr-surface-2);
    transition: border-color var(--fr-trans), box-shadow var(--fr-trans);
}

.dh-fr-page .tmpl-item:hover {
    border-color: var(--fr-blue-mid);
    box-shadow: var(--fr-shadow-sm);
}

.dh-fr-page .tmpl-item-body {
    flex: 1;
    min-width: 0;
}

.dh-fr-page .tmpl-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--fr-text);
}

.dh-fr-page .tmpl-preview {
    font-size: 12px;
    color: var(--fr-text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--fr-radius);
    border: 1px solid var(--fr-border-soft);
    background: var(--fr-bg);
}

.dh-fr-page .tmpl-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.dh-fr-page .icon-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--fr-radius);
    display: grid;
    place-items: center;
    color: var(--fr-text-faint);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--fr-trans), color var(--fr-trans);
}

.dh-fr-page .icon-btn:hover {
    background: var(--fr-bg);
    color: var(--fr-text);
}

.dh-fr-page .icon-btn.danger:hover {
    background: var(--fr-danger-bg);
    color: var(--fr-danger);
}

/* Send history / mailing status */
.dh-fr-page .send-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dh-fr-page .send-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--fr-radius);
    border: 1px solid var(--fr-border-soft);
    background: var(--fr-surface-2);
    font-size: 12px;
}

.dh-fr-page .send-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dh-fr-page .send-row-icon.ok {
    background: var(--fr-success-bg);
    color: #15803d;
}

html[data-theme="dark"] .dh-fr-page .send-row-icon.ok {
    color: #86efac;
}

.dh-fr-page .send-row-icon.pending {
    background: var(--fr-warning-bg);
    color: #b45309;
}

.dh-fr-page .send-row-icon.failed {
    background: var(--fr-danger-bg);
    color: var(--fr-danger);
}

.dh-fr-page .send-row-body {
    flex: 1;
    min-width: 0;
}

.dh-fr-page .send-row-title {
    font-weight: 600;
    color: var(--fr-text);
}

.dh-fr-page .send-row-meta {
    color: var(--fr-text-muted);
    font-size: 11px;
}

.dh-fr-page .send-row-count {
    font-weight: 600;
    color: var(--fr-text-muted);
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
}

.dh-fr-page .send-row-progress {
    font-size: 11px;
    color: var(--fr-text-faint);
    margin-top: 2px;
}

.dh-fr-page .mailing-status-wrapper {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.dh-fr-page .mailing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.dh-fr-page .mailing-header .form-label {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.dh-fr-page .mailing-header:hover {
    background: transparent;
}

.dh-fr-page .icon-refresh-btn-global {
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--fr-radius);
    opacity: 0.75;
}

.dh-fr-page .icon-refresh-btn-global:hover {
    opacity: 1;
    background: var(--fr-surface-2);
}

.dh-fr-page .mailing-content.collapsed {
    display: none;
}

.dh-fr-page .mailing-empty-state {
    text-align: center;
    padding: 24px 16px;
    color: var(--fr-text-muted);
}

.dh-fr-page .mailing-empty-text {
    font-weight: 600;
    color: var(--fr-text);
    margin-top: 8px;
}

.dh-fr-page .mailing-empty-subtext {
    font-size: 12px;
    margin-top: 4px;
}

/* Hide legacy table when send-history rows used */
.dh-fr-page .mailing-table.dh-fr-legacy-hidden {
    display: none;
}

/* Renewal list */
.dh-fr-page .dh-fr-renewal-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--fr-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 4px 0 10px;
}

.dh-fr-page .dh-fr-renewal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dh-fr-page .dh-fr-renewal-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--fr-surface-2);
    border: 1px solid var(--fr-border-soft);
    border-radius: var(--fr-radius);
}

.dh-fr-page .dh-fr-renewal-meta {
    font-size: 13px;
    color: var(--fr-text-muted);
    line-height: 1.5;
}

.dh-fr-page .dh-fr-renewal-meta strong {
    color: var(--fr-text);
    font-weight: 600;
}

.dh-fr-page .dh-fr-divider {
    border: 0;
    height: 1px;
    background: var(--fr-border-soft);
    margin: 4px 0;
}

/* Modal */
.dh-fr-page .dh-fr-modal-backdrop,
.dh-fr-modal-backdrop.dh-fr-page-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dh-fr-page .dh-fr-modal-dialog,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-dialog {
    width: 100%;
    max-width: 480px;
}

.dh-fr-page .dh-fr-modal-content,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-content {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius-lg);
    box-shadow: var(--fr-shadow-md);
    overflow: hidden;
}

.dh-fr-page .dh-fr-modal-header,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fr-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dh-fr-page .dh-fr-modal-title,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.dh-fr-page .dh-fr-modal-body,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dh-fr-page .dh-fr-modal-footer,
.dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--fr-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--fr-surface-2);
}

.dh-fr-page .dh-fr-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fr-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.dh-fr-page .dh-fr-modal-close:hover {
    background: var(--fr-border-soft);
    color: var(--fr-text);
}

html[data-theme="dark"] .dh-fr-modal-backdrop.dh-fr-page-modal .dh-fr-modal-content {
    background: var(--fr-surface);
    color: var(--fr-text);
}

html[data-theme="dark"] .dh-fr-modal-backdrop.dh-fr-page-modal .alert-danger {
    background: var(--fr-danger-bg);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

/* Multiselect / product search (scoped) */
.dh-fr-page .custom-multiselect .search-input,
.dh-fr-page .search-input {
    background: var(--fr-surface-2) !important;
    border: 1px solid var(--fr-border) !important;
    border-radius: var(--fr-radius) !important;
    color: var(--fr-text) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

.dh-fr-page .dropdown-menu.show {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-radius);
    box-shadow: var(--fr-shadow-md);
}

.dh-fr-page .dropdown-item {
    color: var(--fr-text);
}

.dh-fr-page .dropdown-item.selected {
    background: var(--fr-blue-light);
}

.dh-fr-page .dropdown-footer {
    border-color: var(--fr-border-soft);
    color: var(--fr-text-muted);
    font-size: 12px;
}

.dh-fr-page .selected-chips .chip,
.dh-fr-page .excluded-order-chip {
    background: var(--fr-surface-2);
    border: 1px solid var(--fr-border-soft);
    border-radius: var(--fr-radius);
    color: var(--fr-text);
    font-size: 12px;
}

.dh-fr-page .excluded-orders-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Blazored typeahead */
.dh-fr-page .blazored-typeahead__controls input {
    background: var(--fr-surface-2) !important;
    border-color: var(--fr-border) !important;
    color: var(--fr-text) !important;
}

@media (max-width: 991px) {
    .dh-fr-page .dh-fr-toggle-grid {
        grid-template-columns: 1fr;
    }

    .dh-fr-page .dh-fr-toggle-grid .toggle-row:nth-child(even) {
        padding-left: 0;
        border-left: none;
    }

    .dh-fr-page .dh-fr-template-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .dh-fr-page .dh-fr-page-body {
        padding-bottom: 80px;
    }

    .dh-fr-page .dh-fr-dates-row {
        grid-template-columns: 1fr;
    }

    .dh-fr-page .filter-row .field {
        min-width: 100%;
    }
}