/* ============================================================================ port-integration.css — SavTrack redesign / INTEGRATION BRIDGE ---------------------------------------------------------------------------- Restyles THIRD-PARTY library DOM (Bootstrap modals, Choices.js, select2, DataTables chrome, SweetAlert2, FilePond, toastr/notyf) + leftover Bootstrap utility markup so it matches the design system — WITHOUT touching any JS. These libraries render their own DOM at runtime (portals appended to , Bootstrap-driven open/close). We cannot change their markup or JS, so we only restyle the DOM they already produce. SCOPING CONTRACT (load-bearing): * EVERY selector is prefixed `body.ds-reskin `. * ds-reskin lives on (via @section('bodyClass','ds-reskin')). All the above libs append their portals INSIDE , so the prefix still matches. * On un-ported pages (no ds-reskin) NOTHING here applies → Bootstrap/library defaults stay 100% intact. Invisible until opt-in. Tokens come from design-system.css :root (magenta ramp, violet, neutrals, 8px scale, radii, shadows, Space Grotesk + Inter). Those :root vars are global (published by design-system.scoped.css), so we read them freely here. Load order: AFTER design-system.scoped.css, BEFORE port-shell.css. ============================================================================ */ /* ============================================================================ 0. Bootstrap utility remnants (leftover classes inside ported views) Ported blades may still carry raw Bootstrap classes. Map them to the design-system field/input/table look so they inherit the new skin. ========================================================================= */ body.ds-reskin .form-label { display: inline-block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); font-family: var(--font-body); } body.ds-reskin .form-control, body.ds-reskin .form-select { width: 100%; min-height: 40px; padding: 0 var(--space-3); font-family: var(--font-body); font-size: var(--text-base); color: var(--text); background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin textarea.form-control { min-height: 96px; padding: var(--space-3); line-height: var(--leading-normal, 1.5); resize: vertical; } body.ds-reskin .form-control::placeholder { color: var(--text-subtle); } body.ds-reskin .form-control:hover, body.ds-reskin .form-select:hover { border-color: var(--neutral-300); } body.ds-reskin .form-control:focus, body.ds-reskin .form-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background-color: var(--surface); } body.ds-reskin .form-control:disabled, body.ds-reskin .form-select:disabled, body.ds-reskin .form-control[readonly] { background-color: var(--neutral-100); color: var(--text-muted); cursor: not-allowed; } body.ds-reskin .form-control.is-invalid, body.ds-reskin .form-select.is-invalid { border-color: var(--danger-500); } body.ds-reskin .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-50); } body.ds-reskin .form-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; cursor: pointer; } /* Leftover Bootstrap .table (only where NOT the ported .dtable — .dtable owns its own look in design-system.scoped.css; don't fight it). */ body.ds-reskin .table:not(.dtable) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); color: var(--text); } body.ds-reskin .table:not(.dtable) > thead > tr > th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); background: var(--neutral-50); border-bottom: 1px solid var(--border); } body.ds-reskin .table:not(.dtable) > tbody > tr > td { padding: var(--space-4); border-bottom: 1px solid var(--border-faint); vertical-align: middle; } body.ds-reskin .table:not(.dtable) > tbody > tr:hover > td { background: var(--neutral-25); } body.ds-reskin .table-striped:not(.dtable) > tbody > tr:nth-of-type(odd) > td { background: var(--surface-2); } /* ============================================================================ 1. Bootstrap modal (.modal / .modal-dialog / .modal-content / header / title / body / footer / .btn-close / backdrop) Stays a Bootstrap modal — JS-driven open/close untouched. We only reskin. Backdrop appends to , so body.ds-reskin still matches it. ========================================================================= */ body.ds-reskin .modal-backdrop { background-color: var(--overlay); } body.ds-reskin .modal-backdrop.show { opacity: 1; } body.ds-reskin .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; } body.ds-reskin .modal-header { align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border-faint); } body.ds-reskin .modal-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -0.01em; } body.ds-reskin .modal-body { padding: var(--space-5); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); } body.ds-reskin .modal-footer { gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--surface); border-top: 1px solid var(--border-faint); } body.ds-reskin .modal-footer > * { margin: 0; } /* Close button → subtle round hit-target with brand hover */ body.ds-reskin .modal-header .btn-close { width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0; border-radius: var(--radius-md); opacity: 1; background-color: transparent; background-size: 14px 14px; transition: background-color var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .modal-header .btn-close:hover { background-color: var(--neutral-100); } body.ds-reskin .modal-header .btn-close:focus { outline: none; box-shadow: var(--ring); } /* Buttons inside modals — magenta primary CTA, subtle secondary. These reuse the exact button geometry from design-system.scoped.css. */ body.ds-reskin .modal .btn-primary, body.ds-reskin .modal .btn-secondary, body.ds-reskin .modal .btn-danger, body.ds-reskin .modal .btn-success { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .modal .btn-primary { color: var(--text-on-brand); background: linear-gradient(180deg, var(--magenta-500) 0%, var(--magenta-600) 100%); border-color: var(--magenta-600); } body.ds-reskin .modal .btn-primary:hover { background: linear-gradient(180deg, var(--magenta-600) 0%, var(--magenta-700) 100%); box-shadow: var(--shadow-brand); } body.ds-reskin .modal .btn-secondary { color: var(--text); background: var(--surface); border-color: var(--border-strong); } body.ds-reskin .modal .btn-secondary:hover { background: var(--neutral-50); border-color: var(--neutral-300); } body.ds-reskin .modal .btn-danger { color: #fff; background: var(--danger-500); border-color: var(--danger-600); } body.ds-reskin .modal .btn-danger:hover { filter: brightness(0.96); } body.ds-reskin .modal .btn-success { color: #fff; background: var(--success-500); border-color: var(--success-600); } body.ds-reskin .modal .btn-success:hover { filter: brightness(0.96); } /* ============================================================================ 2. Choices.js (.choices / __inner / dropdown / item / multiple / __button) → design-system input + magenta pill look. ========================================================================= */ body.ds-reskin .choices { margin-bottom: 0; font-family: var(--font-body); } body.ds-reskin .choices:focus { outline: none; } body.ds-reskin .choices__inner { min-height: 40px; padding: var(--space-1) var(--space-2); font-size: var(--text-base); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: border-color var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .choices.is-focused .choices__inner, body.ds-reskin .choices.is-open .choices__inner { border-color: var(--primary); box-shadow: var(--ring); } /* keep bottom corners rounded even when open — we render dropdown detached-looking */ body.ds-reskin .choices.is-open .choices__inner { border-radius: var(--radius-md); } body.ds-reskin .choices__list--single { padding: var(--space-1) var(--space-2) var(--space-1) 0; } body.ds-reskin .choices__list--single .choices__item { color: var(--text); } body.ds-reskin .choices__placeholder { color: var(--text-subtle); opacity: 1; } /* Dropdown panel */ body.ds-reskin .choices__list--dropdown, body.ds-reskin .choices__list[aria-expanded] { margin-top: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; } body.ds-reskin .choices__list--dropdown .choices__list { padding: var(--space-1); } body.ds-reskin .choices__list--dropdown .choices__item { padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--text); border-radius: var(--radius-sm); } body.ds-reskin .choices__list--dropdown .choices__item--selectable.is-highlighted, body.ds-reskin .choices__list--dropdown .choices__item--selectable:hover { background: var(--magenta-50); color: var(--magenta-700); } body.ds-reskin .choices__list--dropdown .choices__item[data-value=""] { color: var(--text-subtle); } /* Search field inside dropdown */ body.ds-reskin .choices__input { background: var(--surface); color: var(--text); font-size: var(--text-base); } body.ds-reskin .choices__list--dropdown .choices__input { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-faint); border-radius: 0; } /* Multi-select pills */ body.ds-reskin .choices__list--multiple .choices__item { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-0-5); padding: var(--space-0-5) var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--magenta-700); background: var(--magenta-50); border: 1px solid var(--magenta-200); border-radius: var(--radius-full); } body.ds-reskin .choices__list--multiple .choices__item.is-highlighted { background: var(--magenta-100); border-color: var(--magenta-300); } body.ds-reskin .choices__list--multiple .choices__button { margin: 0 0 0 var(--space-1); padding: 0; width: 14px; height: 14px; border-left: none; opacity: 0.7; filter: none; transition: opacity var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .choices__list--multiple .choices__button:hover { opacity: 1; } body.ds-reskin .choices[data-type*="select-one"] .choices__inner { padding-bottom: var(--space-1); } body.ds-reskin .choices[data-type*="select-one"]::after { border-color: var(--text-muted) transparent transparent; } /* ============================================================================ 3. select2 (.select2-container / -selection / -dropdown / -results__option) CONFIRMED loaded (bundled CSS + $('...').select2() calls). Covers the --default and --bootstrap themes present in the app. ========================================================================= */ body.ds-reskin .select2-container { font-family: var(--font-body); } body.ds-reskin .select2-container--default .select2-selection--single, body.ds-reskin .select2-container--default .select2-selection--multiple, body.ds-reskin .select2-container--bootstrap .select2-selection--single, body.ds-reskin .select2-container--bootstrap .select2-selection--multiple { min-height: 40px; padding: 0 var(--space-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .select2-container--default .select2-selection--single .select2-selection__rendered, body.ds-reskin .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: var(--space-2); color: var(--text); } body.ds-reskin .select2-container--default .select2-selection--single .select2-selection__placeholder, body.ds-reskin .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { color: var(--text-subtle); } body.ds-reskin .select2-container--default .select2-selection--single .select2-selection__arrow, body.ds-reskin .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { height: 38px; right: var(--space-2); } body.ds-reskin .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; } /* focus / open state */ body.ds-reskin .select2-container--default.select2-container--focus .select2-selection--single, body.ds-reskin .select2-container--default.select2-container--focus .select2-selection--multiple, body.ds-reskin .select2-container--default.select2-container--open .select2-selection--single, body.ds-reskin .select2-container--default.select2-container--open .select2-selection--multiple, body.ds-reskin .select2-container--bootstrap.select2-container--focus .select2-selection, body.ds-reskin .select2-container--bootstrap.select2-container--open .select2-selection { border-color: var(--primary); box-shadow: var(--ring); outline: none; } /* Dropdown panel (appended to , still under ds-reskin) */ body.ds-reskin .select2-dropdown { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; } body.ds-reskin .select2-container .select2-search--dropdown .select2-search__field { padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); } body.ds-reskin .select2-container .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } body.ds-reskin .select2-results__option { padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--text); } body.ds-reskin .select2-container--default .select2-results__option--highlighted[aria-selected], body.ds-reskin .select2-container--bootstrap .select2-results__option--highlighted { background: var(--magenta-50); color: var(--magenta-700); } body.ds-reskin .select2-container--default .select2-results__option[aria-selected=true], body.ds-reskin .select2-container--bootstrap .select2-results__option[aria-selected=true] { background: var(--neutral-100); color: var(--text); } /* Multi-select choices → magenta pills */ body.ds-reskin .select2-container--default .select2-selection--multiple .select2-selection__choice, body.ds-reskin .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { margin: var(--space-1) var(--space-1) 0 0; padding: var(--space-0-5) var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--magenta-700); background: var(--magenta-50); border: 1px solid var(--magenta-200); border-radius: var(--radius-full); } body.ds-reskin .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, body.ds-reskin .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { color: var(--magenta-700); margin-right: var(--space-1); } body.ds-reskin .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--magenta-900); } /* ============================================================================ 4. DataTables chrome (wrapper / filter / length / info / paginate) The ported already carries .dtable (owned by design-system.scoped.css); here we ONLY reskin the surrounding chrome → design-system filter-bar + .pagination/.page-item look. We do NOT restyle table rows. Covers DT1 (.dataTables_*) and DT2 (.dt-*) class variants. ========================================================================= */ body.ds-reskin .dataTables_wrapper, body.ds-reskin .dt-container { font-family: var(--font-body); color: var(--text); } /* Length + Filter labels */ body.ds-reskin .dataTables_length label, body.ds-reskin .dataTables_filter label, body.ds-reskin .dt-length label, body.ds-reskin .dt-search label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); } /* Search input */ body.ds-reskin .dataTables_filter input, body.ds-reskin .dt-search input { min-height: 38px; margin-left: var(--space-2); padding: 0 var(--space-3); font-size: var(--text-base); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .dataTables_filter input::placeholder, body.ds-reskin .dt-search input::placeholder { color: var(--text-subtle); } body.ds-reskin .dataTables_filter input:focus, body.ds-reskin .dt-search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } /* Length select */ body.ds-reskin .dataTables_length select, body.ds-reskin .dt-length select { min-height: 38px; padding: 0 var(--space-6) 0 var(--space-3); font-size: var(--text-base); color: var(--text); background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-2) center; cursor: pointer; } body.ds-reskin .dataTables_length select:focus, body.ds-reskin .dt-length select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } /* Info line */ body.ds-reskin .dataTables_info, body.ds-reskin .dt-info { padding-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); } /* Pagination → design-system .pagination/.page-item look. DataTables (bootstrap integration) renders .paginate_button.page-item .page-link; plain DT renders bare .paginate_button . Cover both. */ body.ds-reskin .dataTables_paginate, body.ds-reskin .dt-paging { padding-top: var(--space-3); display: flex; justify-content: flex-end; } body.ds-reskin .dataTables_paginate .pagination, body.ds-reskin .dt-paging .pagination { display: inline-flex; gap: var(--space-1); margin: 0; } body.ds-reskin .dataTables_paginate .paginate_button .page-link, body.ds-reskin .dt-paging .dt-paging-button .page-link, body.ds-reskin .dataTables_paginate a.paginate_button, body.ds-reskin .dt-paging button.dt-paging-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0; transition: background var(--motion-fast, 140ms) var(--ease, ease), color var(--motion-fast, 140ms) var(--ease, ease), border-color var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .dataTables_paginate .paginate_button .page-link:hover, body.ds-reskin .dataTables_paginate a.paginate_button:hover, body.ds-reskin .dt-paging button.dt-paging-button:hover { color: var(--magenta-700); background: var(--magenta-50); border-color: var(--magenta-200); } body.ds-reskin .dataTables_paginate .paginate_button.active .page-link, body.ds-reskin .dataTables_paginate a.paginate_button.current, body.ds-reskin .dt-paging button.dt-paging-button.current { color: var(--text-on-brand); background: var(--magenta-500); border-color: var(--magenta-600); } body.ds-reskin .dataTables_paginate .paginate_button.disabled .page-link, body.ds-reskin .dataTables_paginate a.paginate_button.disabled, body.ds-reskin .dt-paging button.dt-paging-button.disabled { color: var(--text-subtle); background: var(--surface); border-color: var(--border-faint); opacity: 0.6; cursor: not-allowed; } body.ds-reskin .dataTables_paginate .page-item .page-link:focus, body.ds-reskin .dt-paging button.dt-paging-button:focus { outline: none; box-shadow: var(--ring); } /* scrollX clone dedup: DataTables clones thead/tfoot into .dt-scroll-head / .dt-scroll-foot and expects the body table's own copies to collapse; the reskin's th/td padding un-collapsed them → doubled header + doubled Total footer. Force-collapse the body-table copies (DT1 + DT2 wrappers). */ body.ds-reskin .dt-scroll-body > table > thead, body.ds-reskin .dataTables_scrollBody > table > thead, body.ds-reskin .dt-scroll-body > table > tfoot, body.ds-reskin .dataTables_scrollBody > table > tfoot { visibility: collapse; } body.ds-reskin .dt-scroll-body > table > thead th, body.ds-reskin .dt-scroll-body > table > thead td, body.ds-reskin .dataTables_scrollBody > table > thead th, body.ds-reskin .dataTables_scrollBody > table > thead td, body.ds-reskin .dt-scroll-body > table > tfoot th, body.ds-reskin .dt-scroll-body > table > tfoot td, body.ds-reskin .dataTables_scrollBody > table > tfoot th, body.ds-reskin .dataTables_scrollBody > table > tfoot td { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; line-height: 0; } /* Processing overlay */ body.ds-reskin .dataTables_processing, body.ds-reskin .dt-processing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--text-muted); font-size: var(--text-sm); } /* ============================================================================ 5. SweetAlert2 (.swal2-popup / -title / -confirm / -cancel …) Appended to → still under ds-reskin. ========================================================================= */ body.ds-reskin .swal2-container .swal2-backdrop-show, body.ds-reskin .swal2-container.swal2-backdrop-show { background: var(--overlay); } body.ds-reskin .swal2-popup { padding: var(--space-6); font-family: var(--font-body); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); color: var(--text); } body.ds-reskin .swal2-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -0.01em; } body.ds-reskin .swal2-html-container { font-size: var(--text-base); color: var(--text-muted); } body.ds-reskin .swal2-actions { gap: var(--space-2); margin-top: var(--space-5); } body.ds-reskin .swal2-styled { height: 40px; margin: 0; padding: 0 var(--space-5); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); border-radius: var(--radius-md); border: 1px solid transparent; box-shadow: none; transition: background var(--motion-fast, 140ms) var(--ease, ease), box-shadow var(--motion-fast, 140ms) var(--ease, ease); } body.ds-reskin .swal2-styled.swal2-confirm { color: var(--text-on-brand); background: linear-gradient(180deg, var(--magenta-500) 0%, var(--magenta-600) 100%) !important; border-color: var(--magenta-600); } body.ds-reskin .swal2-styled.swal2-confirm:hover { background: linear-gradient(180deg, var(--magenta-600) 0%, var(--magenta-700) 100%) !important; box-shadow: var(--shadow-brand); } body.ds-reskin .swal2-styled.swal2-cancel { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border-strong); } body.ds-reskin .swal2-styled.swal2-cancel:hover { background: var(--neutral-50) !important; border-color: var(--neutral-300); } body.ds-reskin .swal2-styled.swal2-deny { color: #fff !important; background: var(--danger-500) !important; border-color: var(--danger-600); } body.ds-reskin .swal2-styled:focus { outline: none; box-shadow: var(--ring); } body.ds-reskin .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success-100); } body.ds-reskin .swal2-icon.swal2-warning { color: var(--warn-500); border-color: var(--warn-100); } body.ds-reskin .swal2-input, body.ds-reskin .swal2-textarea { font-size: var(--text-base); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none; } body.ds-reskin .swal2-input:focus, body.ds-reskin .swal2-textarea:focus { border-color: var(--primary); box-shadow: var(--ring); } /* ============================================================================ 6. FilePond (.filepond--root / --drop-label / --panel-root …) → design-system dashed dropzone. ========================================================================= */ body.ds-reskin .filepond--root { font-family: var(--font-body); margin-bottom: 0; } body.ds-reskin .filepond--panel-root { background: var(--neutral-25); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); } body.ds-reskin .filepond--root:hover .filepond--panel-root { border-color: var(--magenta-300); background: var(--magenta-50); } body.ds-reskin .filepond--drop-label { color: var(--text-muted); font-size: var(--text-sm); } body.ds-reskin .filepond--label-action { color: var(--magenta-700); text-decoration-color: var(--magenta-300); } body.ds-reskin .filepond--item-panel { background: var(--neutral-700); border-radius: var(--radius-md); } body.ds-reskin .filepond--drip-blob { background: var(--magenta-300); } body.ds-reskin .filepond--file { color: #fff; } /* ============================================================================ 7. toastr / notyf (light touch, brand-aligned) ========================================================================= */ body.ds-reskin #toast-container > div { font-family: var(--font-body); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 1; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-6); } body.ds-reskin #toast-container > .toast-success { background-color: var(--success-600); } body.ds-reskin #toast-container > .toast-error { background-color: var(--danger-600); } body.ds-reskin #toast-container > .toast-warning { background-color: var(--warn-600); } body.ds-reskin #toast-container > .toast-info { background-color: var(--info-600); } body.ds-reskin .toast-title { font-weight: var(--fw-semibold); } body.ds-reskin .notyf__toast { font-family: var(--font-body); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } body.ds-reskin .notyf__toast--success { background: var(--success-600); } body.ds-reskin .notyf__toast--error { background: var(--danger-600); }