/* ==========================================================================
   Direct Shop US wholesaler panel theme. Brings the storefront look
   (public/frontend/css/ds-theme.css, account.css) to the Carrot admin
   template without editing style.css. Every rule is scoped to body.ds-panel
   (set in wholesaler/layouts/app and guest_app). Page-specific styles live
   in their own file.
   ========================================================================== */

/* --- Colours (same values as the storefront) --- */
body.ds-panel {
    --ds-ink: #1e1b4b;
    --ds-primary: #3f51b5;
    --ds-primary-hover: #3343a0;
    --ds-tint: #eef0fb;
    --ds-tint-border: #dfe3f6;
    --ds-border: #e7eaf3;
    --ds-bg: #f6f7fb;
    --ds-text: #334155;
    --ds-muted: #64748b;
    --ds-faint: #94a3b8;
    --ds-danger: #e11d48;
    --ds-warning: #b45309;
    --ds-warning-bg: #fef3c7;
    --ds-focus: 0 0 0 4px rgba(63, 81, 181, .12);
    --ds-shadow: 0 18px 40px -26px rgba(30, 27, 75, .35);
}

/* --- Base: font and page background --- */
body.ds-panel { background-color: var(--ds-bg); font-family: "Manrope", sans-serif; letter-spacing: 0; color: var(--ds-text); }
body.ds-panel h1, body.ds-panel h2, body.ds-panel h3,
body.ds-panel h4, body.ds-panel h5, body.ds-panel h6 { font-family: "Manrope", sans-serif; letter-spacing: -.01em; color: var(--ds-ink); }
body.ds-panel input, body.ds-panel select, body.ds-panel textarea,
body.ds-panel button, body.ds-panel .form-control { font-family: "Manrope", sans-serif; }

/* --- Page loader: indigo instead of the template's grey/green --- */
body.ds-panel #cr-overlay .loader { border-left-color: var(--ds-primary); }
body.ds-panel #cr-overlay .loader:after { border-color: rgba(63, 81, 181, .19); }

/* --- SweetAlert2 above modals (was an inline <style> in both layouts) --- */
body.ds-panel .swal2-container { z-index: 2080 !important; }

/* --- Main content: room above the footer --- */
body.ds-panel .cr-main-content { padding-bottom: 24px; }

/* --- Sidebar: white, rounded links, like the storefront account sidebar --- */
body.ds-panel .cr-sidebar { background-color: #fff; border-right: 1px solid var(--ds-border); }
body.ds-panel .cr-sidebar .cr-sb-logo { background-color: #fff; border-bottom: 1px solid var(--ds-border); }
body.ds-panel .cr-sidebar .cr-sb-wrapper { padding: 16px 12px; }
body.ds-panel .cr-sidebar .cr-sb-list li { padding: 2px 0; }
body.ds-panel .cr-sidebar .cr-sb-list .cr-sb-item-separator { margin: 10px 4px; background-color: var(--ds-border); }
body.ds-panel .cr-sidebar .cr-sb-list .cr-sb-title { padding: 6px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ds-faint); }
body.ds-panel .cr-sidebar .cr-sb-list .cr-sb-item a { padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ds-text); }
body.ds-panel .cr-sidebar .cr-sb-list .cr-sb-item a:hover { background-color: var(--ds-bg); color: var(--ds-primary); }
/* The template's active colour is white (meant for its dark sidebar), which disappears on the light one */
body.ds-panel .cr-sidebar .cr-sb-list .cr-sb-item.active > a { background-color: var(--ds-tint); color: var(--ds-primary); }

/* --- Header --- */
body.ds-panel .cr-header { background-color: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--ds-border); }
body.ds-panel .cr-header .cr-header-items .outer-ring { border-color: var(--ds-ink); border-radius: 6px; }
body.ds-panel .cr-header .cr-header-items .outer-ring .inner-ring { background-color: var(--ds-ink); border-radius: 3px; }

/* Search: pill like the storefront search */
body.ds-panel .cr-header .header-search-box input { height: 42px; padding: 0 48px 0 18px; background-color: var(--ds-bg); border: 1.5px solid var(--ds-border); border-radius: 999px; font-size: 14px; color: var(--ds-ink); transition: border-color .2s, box-shadow .2s, background-color .2s; }
body.ds-panel .cr-header .header-search-box input:focus { background-color: #fff; border-color: var(--ds-primary); box-shadow: var(--ds-focus); }
body.ds-panel .cr-header .header-search-box .search-btn { width: 32px; height: 32px; border-radius: 999px; background-color: var(--ds-primary); }
body.ds-panel .cr-header .header-search-box .search-btn:hover { background-color: var(--ds-primary-hover); }
body.ds-panel .cr-header .header-search-box .search-btn i { color: #fff; }
body.ds-panel .cr-header .header-search-box .open-search { color: var(--ds-ink); }

/* Icon buttons (full screen) and the user button */
body.ds-panel .cr-header .cr-header-items .right-header .cr-right-tool > a { border-radius: 12px; }
body.ds-panel .cr-header .cr-header-items .right-header .cr-right-tool > a:hover { background-color: var(--ds-tint); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-right-tool i { color: var(--ds-ink); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-right-tool > a:hover i { color: var(--ds-primary); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop { border-radius: 12px; }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop:hover { background-color: var(--ds-tint); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-tool img.user { border-radius: 12px; object-fit: cover; }
body.ds-panel .cr-header .ds-avatar { width: 35px; height: 35px; border-radius: 12px; background-color: var(--ds-ink); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* User menu */
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel { min-width: 220px; padding: 6px; border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: 0 10px 30px -12px rgba(30, 27, 75, .18); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel .details { padding: 10px 12px 4px; }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel .details h6 { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; color: var(--ds-ink); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel .details p { font-size: 12.5px; line-height: 1.5; color: var(--ds-muted); word-break: break-word; }
/* Bootstrap's .border-top sets its colour with !important */
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel .border-top { margin-top: 8px; padding-top: 6px; border-top-color: var(--ds-border) !important; }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel ul li a { padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ds-text); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel ul li a:hover { background-color: var(--ds-tint); color: var(--ds-primary); }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel ul li a.ds-logout,
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel ul li a.ds-logout i { color: #dc2626; }
body.ds-panel .cr-header .cr-header-items .right-header .cr-hover-drop .cr-hover-drop-panel ul li a.ds-logout:hover { background-color: #fef2f2; }

@media only screen and (max-width: 991px) {
    /* The search becomes a drop-down here; the template leaves its background transparent */
    body.ds-panel .cr-header .header-search-box .cr-search { background-color: #fff; border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: 0 10px 30px -12px rgba(30, 27, 75, .18); }
}
@media only screen and (max-width: 767px) {
    body.ds-panel .cr-header .ds-avatar { width: 30px; height: 30px; font-size: 13px; }
}

/* --- Footer --- */
body.ds-panel footer { background-color: #fff; border-top: 1px solid var(--ds-border); }
body.ds-panel footer .copyright p { font-size: 13px; font-weight: 600; color: var(--ds-faint); }

/* --- Page title and breadcrumb --- */
body.ds-panel .cr-page-title { gap: 12px; }
body.ds-panel .cr-page-title .cr-breadcrumb h5,
body.ds-panel .cr-page-title-2 .cr-breadcrumb h5 { margin-bottom: 4px; font-size: 22px; font-weight: 800; color: var(--ds-ink); }
body.ds-panel .cr-page-title .cr-breadcrumb ul li,
body.ds-panel .cr-page-title-2 .cr-breadcrumb ul li { font-size: 13px; color: var(--ds-faint); }
body.ds-panel .cr-page-title .cr-breadcrumb ul li a,
body.ds-panel .cr-page-title-2 .cr-breadcrumb ul li a { font-weight: 600; color: var(--ds-muted); }
body.ds-panel .cr-page-title .cr-breadcrumb ul li a:hover,
body.ds-panel .cr-page-title-2 .cr-breadcrumb ul li a:hover { color: var(--ds-primary); }
@media only screen and (min-width: 768px) {
    body.ds-panel .cr-page-title { align-items: center; }
}

/* ==========================================================================
   Shared components: cards, buttons, forms, Select2, tables, badges,
   drop-down menus, modals, image upload box, SweetAlert
   ========================================================================== */

/* --- Cards --- */
body.ds-panel .cr-card { background-color: #fff; border: 1.5px solid var(--ds-border); border-radius: 20px; box-shadow: 0 12px 32px -28px rgba(30, 27, 75, .35); }
/* A card inside a card (profile, product forms) doesn't get a second frame */
body.ds-panel .cr-card .cr-card { border: 0; box-shadow: none; }
body.ds-panel .cr-card .cr-card-header { padding: 18px 24px; border-bottom-color: var(--ds-border); }
body.ds-panel .cr-card .cr-card-header .cr-card-title { font-size: 16px; font-weight: 800; color: var(--ds-ink); }
body.ds-panel .cr-card .cr-card-header .header-tools > a { border-color: var(--ds-border); border-radius: 10px; }
body.ds-panel .cr-card .cr-card-header .header-tools > a:hover { background-color: var(--ds-tint); border-color: var(--ds-tint-border); }
body.ds-panel .cr-card .cr-card-header .header-tools > a:hover i { color: var(--ds-primary); }
body.ds-panel .cr-category h3 { font-size: 17px; font-weight: 800; color: var(--ds-ink); }
@media only screen and (max-width: 767px) {
    body.ds-panel .cr-card .cr-card-header { padding: 15px; }
}

/* Dashboard number cards: the icon sits in the card's top-left corner, so it follows the card's rounding */
body.ds-panel .cr-card .label-card .title span.icon { background-color: var(--ds-tint); border-radius: 18px 0 14px 0; }
body.ds-panel .cr-card .label-card .title span.icon i { color: var(--ds-primary); }
body.ds-panel .cr-card .label-card .title h4 { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-faint); }
body.ds-panel .cr-card .label-card .title .growth-numbers h5 { font-size: 24px; font-weight: 800; color: var(--ds-ink); }
body.ds-panel .cr-card .label-card .up { color: #15803d; }
body.ds-panel .cr-card .label-card .down { color: #be123c; }

/* --- Buttons --- */
body.ds-panel .btn { border-radius: 12px; font-weight: 700; }
body.ds-panel .btn-sm { border-radius: 10px; }
body.ds-panel .btn-primary { background-color: var(--ds-primary); border-color: var(--ds-primary); }
body.ds-panel .btn-primary:hover,
body.ds-panel .btn-primary:focus,
body.ds-panel .btn-primary:active { background-color: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
body.ds-panel .cr-btn-primary,
body.ds-panel .cr-primary-btn { height: 40px; padding: 0 18px; gap: 6px; background-color: var(--ds-primary); border: 1px solid var(--ds-primary); border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; }
/* The template turned these white on hover; they now darken like the storefront buttons */
body.ds-panel .cr-btn-primary:hover, body.ds-panel .cr-primary-btn:hover,
body.ds-panel .cr-btn-primary:active, body.ds-panel .cr-primary-btn:active { background-color: var(--ds-primary-hover); border-color: var(--ds-primary-hover); color: #fff; }
body.ds-panel .cr-btn-primary:focus-visible, body.ds-panel .cr-primary-btn:focus-visible { box-shadow: var(--ds-focus); }
body.ds-panel .cr-btn-secondary { height: 40px; padding: 0 18px; background-color: #fff; border: 1.5px solid var(--ds-border); border-radius: 12px; color: var(--ds-ink); font-size: 14px; font-weight: 700; }
body.ds-panel .cr-btn-secondary:hover { background-color: var(--ds-tint); border-color: var(--ds-tint-border); color: var(--ds-primary); }

/* Gear button that opens each table row's menu (was green-grey and square) */
body.ds-panel .btn.btn-outline-success { background-color: #fff; border: 1px solid var(--ds-border); color: var(--ds-muted); }
body.ds-panel .btn.btn-outline-success:hover,
body.ds-panel .btn.btn-outline-success:focus,
body.ds-panel .btn.btn-outline-success.show { background-color: var(--ds-tint); border-color: var(--ds-tint-border); color: var(--ds-primary); box-shadow: none; }
body.ds-panel button.btn.btn-outline-success.dropdown-toggle { width: 34px; height: 34px; margin: 0; padding: 0; justify-content: center; border-radius: 10px; }

/* --- Forms --- */
body.ds-panel label { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ds-text); }
body.ds-panel .form-control,
body.ds-panel .form-select { padding: 10px 14px; background-color: #fff; border: 1.5px solid var(--ds-border); border-radius: 12px; font-size: 14px; line-height: 22px; color: var(--ds-ink); transition: border-color .2s, box-shadow .2s; }
body.ds-panel .form-select { padding-right: 38px; background-position: right 14px center; }
body.ds-panel .form-select[multiple] { padding-right: 14px; }
body.ds-panel .form-control:focus,
body.ds-panel .form-select:focus { border-color: var(--ds-primary); box-shadow: var(--ds-focus); color: var(--ds-ink); }
body.ds-panel .form-control::placeholder { color: var(--ds-faint); }
body.ds-panel .form-control:disabled,
body.ds-panel .form-control[readonly],
body.ds-panel .form-select:disabled { background-color: var(--ds-bg); color: var(--ds-muted); }
body.ds-panel .cr-category .form-group { margin-bottom: 16px; }

/* --- Select2 pickers (state, selling states, delivery options) ---
   The boxes are limited to .cr-main-content: the register page (guest layout) has its own Select2 look in wholesaler-register.css */
body.ds-panel .cr-main-content .select2-container--default .select2-selection--single { height: 46px; background-color: #fff; border: 1.5px solid var(--ds-border); border-radius: 12px; }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--multiple { min-height: 46px; padding: 4px 8px; background-color: #fff; border: 1.5px solid var(--ds-border); border-radius: 12px; }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 14px; padding-right: 36px; line-height: 43px; color: var(--ds-ink); }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ds-faint); }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; right: 10px; }
body.ds-panel .cr-main-content .select2-container--default.select2-container--focus .select2-selection--multiple,
body.ds-panel .cr-main-content .select2-container--default.select2-container--open .select2-selection--single,
body.ds-panel .cr-main-content .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--ds-primary); box-shadow: var(--ds-focus); }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--ds-tint); border-color: var(--ds-tint-border); border-radius: 999px; color: var(--ds-primary); font-size: 13px; font-weight: 700; }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border-right-color: var(--ds-tint-border); color: var(--ds-primary); }
body.ds-panel .cr-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
body.ds-panel .cr-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: transparent; color: var(--ds-danger); }
body.ds-panel .select2-dropdown { border-color: var(--ds-primary); overflow: hidden; box-shadow: 0 10px 30px -12px rgba(30, 27, 75, .18); }
/* The list attaches to the box, so only its far corners are rounded */
body.ds-panel .select2-container--open .select2-dropdown--below { border-radius: 0 0 12px 12px; }
body.ds-panel .select2-container--open .select2-dropdown--above { border-radius: 12px 12px 0 0; }
body.ds-panel .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--ds-primary); color: #fff; }
body.ds-panel .select2-container--default .select2-results__option--selected { background-color: var(--ds-tint); color: var(--ds-primary); }
body.ds-panel .select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--ds-border); border-radius: 10px; }

/* --- Tables (Bootstrap .table, with or without DataTables) --- */
body.ds-panel .table { color: var(--ds-text); }
body.ds-panel .table > thead > tr { background-color: transparent; }
body.ds-panel .table > thead > tr > th { padding: 12px 14px; background-color: var(--ds-bg); border-bottom: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-faint); white-space: nowrap; }
body.ds-panel .table > thead > tr > th:first-child { border-radius: 10px 0 0 10px; }
body.ds-panel .table > thead > tr > th:last-child { border-radius: 0 10px 10px 0; }
body.ds-panel .table > tbody > tr > td { padding: 12px 14px; border-bottom: 1px solid var(--ds-border); font-size: 14px; color: var(--ds-text); vertical-align: middle; }
body.ds-panel .table > tbody > tr:last-child > td { border-bottom: 0; }
body.ds-panel .table > tbody > tr:hover > td { background-color: #fafbff; }
body.ds-panel .product-list tbody tr td img,
body.ds-panel .table-responsive .cat-thumb { border: 1px solid var(--ds-border); border-radius: 10px; object-fit: cover; }

/* Product status in the product list: pills instead of coloured text */
body.ds-panel .product-list tbody tr td .active,
body.ds-panel .product-list tbody tr td .disable,
body.ds-panel .product-list tbody tr td .pending { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
body.ds-panel .product-list tbody tr td .active { background-color: #dcfce7; color: #15803d; }
body.ds-panel .product-list tbody tr td .disable { background-color: #ffe4e6; color: #be123c; }
body.ds-panel .product-list tbody tr td .pending { background-color: var(--ds-warning-bg); color: var(--ds-warning); }

/* DataTables search, page size and info (only on tables that use DataTables) */
body.ds-panel div.dataTables_wrapper div.dataTables_filter input { height: 38px; padding: 0 14px; background-color: var(--ds-bg); border: 1.5px solid var(--ds-border); border-radius: 999px; font-size: 13px; color: var(--ds-ink); }
body.ds-panel div.dataTables_wrapper div.dataTables_filter input:focus { background-color: #fff; border-color: var(--ds-primary); box-shadow: var(--ds-focus); }
body.ds-panel div.dataTables_wrapper div.dataTables_length select { border: 1.5px solid var(--ds-border); border-radius: 10px; color: var(--ds-text); }
body.ds-panel div.dataTables_wrapper div.dataTables_info { font-size: 13px; font-weight: 600; color: var(--ds-faint); }

/* --- Pagination (DataTables and Laravel page links) --- */
body.ds-panel .pagination .page-item .page-link { margin: 0 2px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ds-text); }
body.ds-panel .pagination .page-item .page-link:hover { background-color: var(--ds-tint); color: var(--ds-primary); }
/* style.css sets the border colour with !important */
body.ds-panel .pagination .page-item.active .page-link { background-color: var(--ds-primary); border-color: var(--ds-primary) !important; color: #fff; }
body.ds-panel .pagination .page-item.disabled .page-link { color: var(--ds-faint); }

/* --- Badges and alerts --- */
body.ds-panel .badge { padding: 5px 10px; border-radius: 999px; font-weight: 700; }
body.ds-panel .alert { border-radius: 14px; }

/* --- Drop-down menus (row actions) --- */
body.ds-panel .dropdown-menu { padding: 6px; border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: 0 10px 30px -12px rgba(30, 27, 75, .18); }
body.ds-panel .dropdown-menu .dropdown-item { padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ds-text); }
body.ds-panel .dropdown-menu .dropdown-item:hover,
body.ds-panel .dropdown-menu .dropdown-item:focus,
body.ds-panel .dropdown-menu .dropdown-item:active { background-color: var(--ds-tint); color: var(--ds-primary); }

/* --- Modals --- */
body.ds-panel .modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(15, 14, 40, .45); }
body.ds-panel .modal-header { padding: 18px 24px; border-bottom-color: var(--ds-border); }
body.ds-panel .modal-title { font-size: 18px; font-weight: 800; color: var(--ds-ink); }
body.ds-panel .modal-body { padding: 24px; }
body.ds-panel .modal-footer { padding: 14px 24px; border-top-color: var(--ds-border); }

/* --- Image upload box (profile, product and distributor forms) --- */
body.ds-panel .cr-product-uploads .avatar-upload .avatar-preview { background-color: var(--ds-bg); border: 1.5px dashed var(--ds-tint-border); border-radius: 16px; }
body.ds-panel .cr-product-uploads .avatar-upload .avatar-preview .imagePreview img { border-radius: 12px; }
body.ds-panel .cr-product-uploads .avatar-upload .avatar-edit input + label { border: 1px solid var(--ds-border); border-radius: 12px; color: var(--ds-primary); box-shadow: 0 6px 16px -10px rgba(30, 27, 75, .35); }
body.ds-panel .cr-product-uploads .cr-vendor-main-img .thumb-upload-set .thumb-upload .thumb-preview { border-color: var(--ds-border); border-radius: 10px; }
body.ds-panel .cr-product-uploads .cr-vendor-main-img .thumb-upload-set .thumb-upload .thumb-edit input + label { border-color: var(--ds-border); border-radius: 8px; }

/* --- SweetAlert2 pop-ups and toasts --- */
body.ds-panel .swal2-popup { border-bottom: 0; border-radius: 20px; font-family: "Manrope", sans-serif; }
body.ds-panel .swal2-popup.swal2-toast { border-radius: 14px; }
body.ds-panel .swal2-popup .swal2-title { font-weight: 800; color: var(--ds-ink); }
body.ds-panel .swal2-popup .swal2-styled { border-radius: 12px; font-weight: 700; }

/* ==========================================================================
   Page pass, batch 1 (list pages)
   ========================================================================== */

/* --- Status pills: category, order and dispute lists (.ds-status, plus is-success / is-warning / is-danger) --- */
body.ds-panel .ds-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background-color: var(--ds-tint); font-size: 12px; font-weight: 800; line-height: 1.5; color: var(--ds-primary); }
body.ds-panel .ds-status.is-success { background-color: #dcfce7; color: #15803d; }
body.ds-panel .ds-status.is-warning { background-color: var(--ds-warning-bg); color: var(--ds-warning); }
body.ds-panel .ds-status.is-danger { background-color: #ffe4e6; color: #be123c; }

/* --- Bootstrap's blue replaced with the theme indigo --- */
/* Bootstrap sets .text-primary with !important */
body.ds-panel .text-primary { color: var(--ds-primary) !important; }
body.ds-panel .btn-outline-primary { background-color: #fff; border: 1.5px solid var(--ds-tint-border); color: var(--ds-primary); }
body.ds-panel .btn-outline-primary:hover,
body.ds-panel .btn-outline-primary:focus,
body.ds-panel .btn-outline-primary:active { background-color: var(--ds-tint); border-color: var(--ds-primary); color: var(--ds-primary); }
/* Small table buttons (Bootstrap 5 has no .btn-xs) */
body.ds-panel .btn-xs { padding: 5px 12px; border-radius: 10px; font-size: 13px; }

/* --- Filter select in the page-title bar (orders list; was an inline style) --- */
body.ds-panel .cr-page-title .cr-tools .form-select { min-width: 200px; }

/* ==========================================================================
   Page pass, batch 2a (distributor forms, pricing, profile, billing)
   ========================================================================== */

/* --- Links: theme indigo instead of Bootstrap blue ---
   Bootstrap 5.2+ reads these variables; the second rule covers plain links on older builds */
body.ds-panel { --bs-link-color: #3f51b5; --bs-link-hover-color: #3343a0; --bs-link-color-rgb: 63, 81, 181; --bs-link-hover-color-rgb: 51, 67, 160; }
body.ds-panel a:not([class]) { color: var(--ds-primary); }
body.ds-panel a:not([class]):hover { color: var(--ds-primary-hover); }

/* --- Size variants: the Phase 3 field and table padding would otherwise override Bootstrap's small/large sizes --- */
body.ds-panel .form-control-sm { padding: 6px 10px; border-radius: 10px; font-size: 13px; }
body.ds-panel .form-control-lg { padding: 12px 16px; font-size: 15px; }
body.ds-panel .table-sm > thead > tr > th,
body.ds-panel .table-sm > tbody > tr > td { padding: 8px 12px; }

/* --- Bootstrap info alert and grey outline button in the theme colours --- */
body.ds-panel .alert-info { background-color: var(--ds-tint); border-color: var(--ds-tint-border); color: var(--ds-text); }
body.ds-panel .btn-outline-secondary { background-color: #fff; border: 1.5px solid var(--ds-border); color: var(--ds-ink); }
body.ds-panel .btn-outline-secondary:hover,
body.ds-panel .btn-outline-secondary:focus,
body.ds-panel .btn-outline-secondary:active { background-color: var(--ds-tint); border-color: var(--ds-tint-border); color: var(--ds-primary); }

/* ==========================================================================
   Page pass, batch 2b (product forms)
   ========================================================================== */

/* Small selects in the product variant rows (the Phase 3 .form-select padding would otherwise win) */
body.ds-panel .form-select-sm { padding: 6px 32px 6px 10px; border-radius: 10px; font-size: 13px; background-position: right 10px center; }