/* ==========================================================================
   Thème « Pro » – Allure Broderie (UltimatePOS 7.3)
   Couche visuelle chargée APRÈS toutes les autres feuilles de style.
   Elle ne modifie aucun fichier d'origine : pour revenir à l'ancien rendu,
   il suffit de retirer la ligne theme-pro.css de layouts/partials/css.blade.php.

   Principes (inspirés de Square, Shopify POS, Lightspeed) :
   - une seule police (Inter), une échelle de tailles cohérente ;
   - cibles tactiles d'au moins 44 px en caisse ;
   - prix et totaux en chiffres tabulaires, bien contrastés ;
   - une action principale évidente (Payer) par écran.
   ========================================================================== */

/* ---------- Police Inter (hébergée localement) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons de design ---------- */
:root {
    --pro-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --pro-ink: #0f172a;        /* texte principal */
    --pro-ink-2: #334155;      /* texte secondaire */
    --pro-muted: #64748b;      /* libellés, aides */
    --pro-faint: #94a3b8;
    --pro-line: #e2e8f0;       /* bordures */
    --pro-line-2: #cbd5e1;
    --pro-bg: #f1f5f9;         /* fond d'application */
    --pro-surface: #ffffff;
    --pro-surface-2: #f8fafc;

    --pro-primary: var(--theme-800, #0040C1);
    --pro-primary-hover: var(--theme-700, #004EEB);
    --pro-primary-soft: color-mix(in srgb, var(--pro-primary) 10%, #fff);

    --pro-success: #059669;
    --pro-success-hover: #047857;
    --pro-success-soft: #ecfdf5;
    --pro-danger: #dc2626;
    --pro-danger-soft: #fef2f2;
    --pro-warning: #d97706;
    --pro-warning-soft: #fffbeb;

    --pro-radius-sm: 8px;
    --pro-radius: 12px;
    --pro-radius-lg: 16px;
    --pro-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --pro-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --pro-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, .12), 0 4px 10px -4px rgba(15, 23, 42, .08);
    --pro-ring: 0 0 0 3px color-mix(in srgb, var(--pro-primary) 22%, transparent);

    /* Échelle typographique */
    --pro-fs-xs: 12px;
    --pro-fs-sm: 13px;
    --pro-fs-base: 14px;
    --pro-fs-md: 15px;
    --pro-fs-lg: 17px;
    --pro-fs-xl: 20px;
    --pro-fs-2xl: 24px;
}

/* ==========================================================================
   1. BASE – police, tailles, couleurs
   ========================================================================== */
html, body,
button, input, select, textarea, optgroup,
.tooltip, .popover, .select2-container, .swal-modal, .swal-text, .swal-title,
.main-header, .sidebar-menu, .content-wrapper, .modal, .dropdown-menu {
    font-family: var(--pro-font) !important;
}
body {
    font-size: var(--pro-fs-base);
    line-height: 1.5;
    color: var(--pro-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
}
main, #scrollable-container, .content-wrapper { background: var(--pro-bg) !important; }

/* Chiffres alignés partout où l'on affiche de l'argent */
.display_currency, .number, .input_number, [class*="price"], [class*="total"], [id*="total"],
td.text-right, th.text-right, .pos_totals_value {
    font-variant-numeric: tabular-nums;
}

a { color: var(--pro-primary); }
a:hover, a:focus { color: var(--pro-primary-hover); }

::selection { background: color-mix(in srgb, var(--pro-primary) 20%, transparent); }

/* Barres de défilement fines et discrètes */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   2. EN-TÊTES DE PAGE
   ========================================================================== */
.content-header {
    padding: 20px 24px 8px !important;
}
.content-header > h1,
.content-header h1.tw-text-xl {
    font-size: var(--pro-fs-2xl) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--pro-ink) !important;
    margin: 0 !important;
}
.content-header > h1 > small,
.content-header h1 small {
    display: block;
    margin-top: 4px;
    font-size: var(--pro-fs-base) !important;
    font-weight: 400 !important;
    color: var(--pro-muted) !important;
    letter-spacing: 0;
    padding-left: 0 !important;
}
section.content { padding: 12px 24px 24px !important; }
@media (max-width: 767px) {
    .content-header { padding: 14px 14px 6px !important; }
    section.content { padding: 8px 12px 20px !important; }
}

/* ==========================================================================
   3. CARTES / BOÎTES
   ========================================================================== */
.box, .info-box, .small-box, .tw-ring-gray-200.tw-rounded-xl {
    border-radius: var(--pro-radius) !important;
}
.box {
    border: 1px solid var(--pro-line) !important;
    border-top: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow) !important;
    background: var(--pro-surface);
}
.box-header {
    padding: 14px 18px !important;
}
.box-header .box-title, .box-title {
    font-size: var(--pro-fs-lg) !important;
    font-weight: 650 !important;
    color: var(--pro-ink) !important;
    letter-spacing: -0.01em;
}
.box-body { padding: 16px 18px !important; }
.box-footer { padding: 12px 18px !important; border-top-color: var(--pro-line) !important; background: var(--pro-surface-2); border-radius: 0 0 var(--pro-radius) var(--pro-radius); }

/* ==========================================================================
   4. FORMULAIRES
   ========================================================================== */
label, .control-label {
    font-size: var(--pro-fs-sm) !important;
    font-weight: 600 !important;
    color: var(--pro-ink-2) !important;
    margin-bottom: 6px;
}
.form-group { margin-bottom: 16px; }
.help-block, .form-text { font-size: var(--pro-fs-xs); color: var(--pro-muted); }

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--pro-line-2) !important;
    border-radius: var(--pro-radius-sm) !important;
    background-color: #fff;
    font-size: var(--pro-fs-base) !important;
    color: var(--pro-ink) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.form-control, select.form-control { height: 40px; padding: 8px 12px; }
textarea.form-control { padding: 10px 12px; }
.input-sm.form-control, .form-control.input-sm { height: 34px; min-height: 34px; font-size: var(--pro-fs-sm) !important; }
.form-control::placeholder { color: var(--pro-faint) !important; opacity: 1; }
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pro-primary) !important;
    box-shadow: var(--pro-ring) !important;
    outline: none;
}
.form-control[readonly], .form-control[disabled] { background: var(--pro-surface-2) !important; color: var(--pro-muted) !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    color: var(--pro-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; right: 6px !important; }
.select2-dropdown { border-color: var(--pro-line-2) !important; border-radius: var(--pro-radius-sm) !important; box-shadow: var(--pro-shadow-lg); overflow: hidden; }
.select2-results__option { padding: 8px 12px !important; font-size: var(--pro-fs-base); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pro-primary) !important; }
.select2-search--dropdown .select2-search__field { border-radius: 6px !important; border-color: var(--pro-line-2) !important; padding: 6px 10px !important; }

/* Groupes avec icône */
.input-group .input-group-addon {
    border-color: var(--pro-line-2) !important;
    background: var(--pro-surface-2) !important;
    color: var(--pro-muted);
    min-width: 42px;
}
.input-group .input-group-addon:first-child { border-radius: var(--pro-radius-sm) 0 0 var(--pro-radius-sm) !important; }
.input-group .input-group-addon:last-child { border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0 !important; }
.input-group .form-control:not(:first-child):not(:last-child),
.input-group .input-group-addon:not(:first-child):not(:last-child),
.input-group .input-group-btn:not(:first-child):not(:last-child) > .btn { border-radius: 0 !important; }
.input-group > .form-control:first-child { border-radius: var(--pro-radius-sm) 0 0 var(--pro-radius-sm) !important; }
.input-group > .form-control:last-child { border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0 !important; }
.input-group-btn > .btn { height: 40px; border-color: var(--pro-line-2) !important; }
.input-group-btn:last-child > .btn:last-child { border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0 !important; }
.input-group-btn:first-child > .btn:first-child { border-radius: var(--pro-radius-sm) 0 0 var(--pro-radius-sm) !important; }

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.btn {
    font-weight: 600 !important;
    font-size: var(--pro-fs-base);
    border-radius: var(--pro-radius-sm) !important;
    padding: 8px 14px;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-xs { font-size: var(--pro-fs-xs) !important; padding: 3px 8px !important; border-radius: 6px !important; }
.btn-sm { font-size: var(--pro-fs-sm) !important; padding: 6px 11px !important; }
.btn-lg { font-size: var(--pro-fs-lg) !important; padding: 12px 20px !important; }
.btn-primary { background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--pro-primary-hover) !important; border-color: var(--pro-primary-hover) !important; }
.btn-success { background: var(--pro-success) !important; border-color: var(--pro-success) !important; }
.btn-success:hover, .btn-success:focus { background: var(--pro-success-hover) !important; border-color: var(--pro-success-hover) !important; }
.btn-danger { background: var(--pro-danger) !important; border-color: var(--pro-danger) !important; }
.btn-default { background: #fff !important; border-color: var(--pro-line-2) !important; color: var(--pro-ink-2) !important; }
.btn-default:hover { background: var(--pro-surface-2) !important; border-color: var(--pro-faint) !important; }
.btn:focus-visible, .tw-dw-btn:focus-visible { outline: none !important; box-shadow: var(--pro-ring) !important; }

/* Boutons Tailwind/daisyUI de la 7.x */
.tw-dw-btn {
    font-family: var(--pro-font) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0;
    border-radius: var(--pro-radius-sm);
}
.tw-dw-btn-sm { font-size: var(--pro-fs-sm) !important; min-height: 2.25rem !important; height: 2.25rem; }
.tw-dw-btn-xs { font-size: var(--pro-fs-xs) !important; }

/* ==========================================================================
   6. TABLEAUX (listes ventes, produits, rapports…)
   ========================================================================== */
.table { font-size: var(--pro-fs-base); color: var(--pro-ink); }
.table > thead > tr > th,
table.dataTable thead th {
    font-size: var(--pro-fs-xs) !important;
    font-weight: 650 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pro-muted) !important;
    background: var(--pro-surface-2) !important;
    border-bottom: 1px solid var(--pro-line) !important;
    padding: 11px 12px !important;
    white-space: nowrap;
    vertical-align: middle !important;
}
.table > tbody > tr > td,
table.dataTable tbody td {
    padding: 11px 12px !important;
    border-top: 1px solid var(--pro-line) !important;
    vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbfcfe; }
.table-hover > tbody > tr:hover, table.dataTable tbody tr:hover { background-color: color-mix(in srgb, var(--pro-primary) 4%, #fff) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border-color: var(--pro-line) !important;
}
table.dataTable { border-radius: var(--pro-radius-sm); overflow: hidden; }
.table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: 700; background: var(--pro-surface-2); padding: 11px 12px !important; }

/* Barre d'outils DataTables */
.dataTables_wrapper .dataTables_filter input {
    height: 38px; border-radius: var(--pro-radius-sm) !important; border: 1px solid var(--pro-line-2) !important; padding: 6px 12px !important; min-width: 220px;
}
.dataTables_wrapper .dataTables_length select { height: 36px; border-radius: var(--pro-radius-sm) !important; border-color: var(--pro-line-2) !important; }
.dataTables_wrapper .dataTables_info { color: var(--pro-muted); font-size: var(--pro-fs-sm); padding-top: 14px !important; }
.dataTables_wrapper .dt-buttons .btn, .dataTables_wrapper .dt-button {
    font-size: var(--pro-fs-sm) !important; padding: 6px 12px !important; border-radius: var(--pro-radius-sm) !important;
}
.pagination > li > a, .pagination > li > span {
    border-color: var(--pro-line) !important; color: var(--pro-ink-2) !important; min-width: 36px; text-align: center; font-weight: 600; font-size: var(--pro-fs-sm);
}
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: var(--pro-radius-sm) 0 0 var(--pro-radius-sm) !important; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0 !important; }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover {
    background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; color: #fff !important;
}

/* Étiquettes d'état (payé, dû, etc.) */
.label, .badge {
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    letter-spacing: .01em;
}
.label-success, .bg-green { background-color: #dcfce7 !important; color: #166534 !important; }
.label-danger, .bg-red { background-color: #fee2e2 !important; color: #991b1b !important; }
.label-warning, .bg-yellow { background-color: #fef3c7 !important; color: #92400e !important; }
.label-info, .bg-aqua, .bg-info { background-color: #e0f2fe !important; color: #075985 !important; }
.label-primary, .bg-light-blue { background-color: var(--pro-primary-soft) !important; color: var(--pro-primary) !important; }
.label-default { background-color: #f1f5f9 !important; color: #334155 !important; }
/* … sauf quand bg-* sert de fond plein (petites boîtes du tableau de bord) */
.small-box.bg-green, .small-box.bg-red, .small-box.bg-yellow, .small-box.bg-aqua, .info-box-icon.bg-green, .info-box-icon.bg-red, .info-box-icon.bg-yellow, .info-box-icon.bg-aqua {
    color: #fff !important;
}
.small-box.bg-green, .info-box-icon.bg-green { background-color: #059669 !important; }
.small-box.bg-red, .info-box-icon.bg-red { background-color: #dc2626 !important; }
.small-box.bg-yellow, .info-box-icon.bg-yellow { background-color: #d97706 !important; }
.small-box.bg-aqua, .info-box-icon.bg-aqua { background-color: #0284c7 !important; }

/* ==========================================================================
   7. FENÊTRES (modals) & alertes
   ========================================================================== */
.modal-content {
    border: 0 !important;
    border-radius: var(--pro-radius-lg) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35) !important;
    overflow: hidden;
}
.modal-header {
    padding: 16px 22px !important;
    border-bottom: 1px solid var(--pro-line) !important;
    background: #fff;
}
.modal-title { font-size: var(--pro-fs-xl) !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--pro-ink); }
.modal-header .close { font-size: 26px; opacity: .45; margin-top: -2px; }
.modal-header .close:hover { opacity: .8; }
.modal-body { padding: 20px 22px !important; }
.modal-footer { padding: 14px 22px !important; border-top: 1px solid var(--pro-line) !important; background: var(--pro-surface-2); }
.modal-footer .btn { min-width: 110px; min-height: 42px; }
.modal-backdrop.in { opacity: .45 !important; background: #0f172a; }

.alert { border-radius: var(--pro-radius) !important; border: 1px solid transparent; font-size: var(--pro-fs-base); }

.swal-modal { border-radius: var(--pro-radius-lg) !important; }
.swal-title { font-size: 22px !important; color: var(--pro-ink) !important; font-weight: 700 !important; }
.swal-text { font-size: 15px !important; color: var(--pro-ink-2) !important; text-align: center !important; }
.swal-button { border-radius: var(--pro-radius-sm) !important; font-size: 15px !important; padding: 11px 24px !important; background-color: var(--pro-primary) !important; }
.swal-button--cancel { background-color: #f1f5f9 !important; color: var(--pro-ink-2) !important; }
.swal-button--danger { background-color: var(--pro-danger) !important; }

/* Notifications toastr */
#toast-container > div { border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow-lg) !important; opacity: 1 !important; font-size: var(--pro-fs-base); padding: 14px 16px 14px 50px !important; width: 340px !important; }

/* ==========================================================================
   8. MENU LATÉRAL & EN-TÊTE
   ========================================================================== */
.side-bar { border-right: 1px solid var(--pro-line); }
.side-bar-heading { font-size: var(--pro-fs-lg) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
#side-bar a, .side-bar a {
    font-size: var(--pro-fs-base) !important;
}
#side-bar > a, #side-bar .theme-sidebar-hover {
    min-height: 40px;
    border-radius: var(--pro-radius-sm) !important;
    font-weight: 550;
    color: var(--pro-ink-2);
}
#side-bar .theme-sidebar-active { font-weight: 650 !important; }
#side-bar .chiled a, #side-bar ul a { font-size: var(--pro-fs-sm) !important; }

/* ==========================================================================
   9. CAISSE (POS)
   ========================================================================== */
body.lockscreen { background: var(--pro-bg) !important; }
body.lockscreen main, body.lockscreen #scrollable-container { background: var(--pro-bg) !important; }
body.lockscreen section.content { padding: 8px 10px 0 !important; }

/* --- Barre d'en-tête du POS --- */
.pos-header > div {
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow) !important;
    border: 1px solid var(--pro-line);
    padding: 6px 10px !important;
}
.pos-header button, .pos-header a.tw-rounded-md, .pos-header .tw-rounded-md {
    border-radius: 10px !important;
}
.pos-header .tw-border-2 { border-width: 1px !important; border-color: var(--pro-line) !important; box-shadow: none !important; }
.pos-header .tw-border-2:hover { background: var(--pro-surface-2) !important; border-color: var(--pro-line-2) !important; }
.pos-header .curr_datetime { font-size: var(--pro-fs-sm) !important; font-variant-numeric: tabular-nums; }

/* --- Panneaux gauche (panier) et droit (produits) --- */
#add_pos_sell_form .tw-rounded-2xl,
#edit_pos_sell_form .tw-rounded-2xl,
.pos-sidebar-root {
    border-radius: var(--pro-radius-lg) !important;
    border: 1px solid var(--pro-line);
    box-shadow: var(--pro-shadow) !important;
}

/* Recherche client + produit : grands champs faciles à viser */
#add_pos_sell_form .box-body,
#edit_pos_sell_form .box-body { padding: 12px 12px 0 !important; }
#add_pos_sell_form .form-group,
#edit_pos_sell_form .form-group { margin-bottom: 10px; }
#search_product,
#add_pos_sell_form .form-control,
#edit_pos_sell_form .form-control,
#add_pos_sell_form .select2-container--default .select2-selection--single,
#edit_pos_sell_form .select2-container--default .select2-selection--single {
    height: 46px !important;
    min-height: 46px !important;
    font-size: var(--pro-fs-md) !important;
}
#add_pos_sell_form .select2-container--default .select2-selection--single .select2-selection__rendered,
#edit_pos_sell_form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; }
#add_pos_sell_form .select2-container--default .select2-selection--single .select2-selection__arrow,
#edit_pos_sell_form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
#add_pos_sell_form .input-group-addon,
#edit_pos_sell_form .input-group-addon,
#add_pos_sell_form .input-group-btn > .btn,
#edit_pos_sell_form .input-group-btn > .btn {
    height: 46px !important;
    min-width: 46px;
    font-size: 16px;
}
#search_product {
    font-weight: 500;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M8 8v8M11 8v8M14 8v8M17 8v8'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 40px !important;
}

/* --- Panier (tableau des articles) --- */
#pos_table { font-size: var(--pro-fs-base) !important; }
#pos_table > thead > tr > th {
    font-size: 11.5px !important;
    color: var(--pro-muted) !important;
    padding: 9px 8px !important;
    letter-spacing: .05em !important;
    background: var(--pro-surface-2) !important;
}
#pos_table > tbody > tr > td {
    padding: 10px 8px !important;
    font-size: var(--pro-fs-base) !important;
    color: var(--pro-ink);
    border-top: 1px solid var(--pro-line) !important;
    vertical-align: middle !important;
}
#pos_table > tbody > tr.product_row:hover > td { background: #fbfcfe; }
#pos_table tr.product_row td:first-child { color: var(--pro-faint); font-weight: 600; }
/* Nom du produit dans le panier */
#pos_table .product_row td:nth-child(2) > div:first-child,
#pos_table .product_row .text-link,
#pos_table .product_row td .tw-font-semibold,
#pos_table .product_row td > span:first-child {
    font-size: var(--pro-fs-md) !important;
    font-weight: 600 !important;
    color: var(--pro-ink) !important;
    line-height: 1.35 !important;
}
#pos_table .product_row small, #pos_table .product_row .text-muted { font-size: var(--pro-fs-xs) !important; color: var(--pro-muted) !important; }
/* Quantité : gros boutons − / + */
#pos_table .input-group.input-number { flex-wrap: nowrap; }
#pos_table .input_quantity, #pos_table .pos_quantity {
    height: 40px !important;
    min-height: 40px !important;
    font-size: var(--pro-fs-md) !important;
    font-weight: 700 !important;
    text-align: center;
    border-radius: 0 !important;
}
#pos_table .quantity-down, #pos_table .quantity-up {
    height: 40px !important;
    width: 38px !important;
    min-width: 38px;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--pro-surface-2) !important;
    color: var(--pro-ink-2) !important;
    border-color: var(--pro-line-2) !important;
}
#pos_table .quantity-down { border-radius: var(--pro-radius-sm) 0 0 var(--pro-radius-sm) !important; }
#pos_table .quantity-up { border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0 !important; }
#pos_table .quantity-down:hover, #pos_table .quantity-up:hover { background: var(--pro-primary-soft) !important; color: var(--pro-primary) !important; }
#pos_table .pos_unit_price_inc_tax, #pos_table input.pos_line_total {
    height: 40px !important; font-size: var(--pro-fs-md) !important; font-weight: 600 !important; text-align: right;
}
#pos_table .pos_line_total_text, #pos_table .pos_line_total {
    font-size: var(--pro-fs-md) !important;
    font-weight: 700 !important;
    color: var(--pro-ink) !important;
    font-variant-numeric: tabular-nums;
}
#pos_table .pos_remove_row, #pos_table .fa-times, #pos_table .fa-trash-alt, #pos_table .fa-times-circle {
    font-size: 17px !important;
    color: #ef4444 !important;
    opacity: .8;
    cursor: pointer;
}
#pos_table .pos_remove_row:hover { opacity: 1; }
/* Panier vide */
.pos-empty-state-row .tw-text-\[15px\] { font-size: var(--pro-fs-lg) !important; color: var(--pro-ink-2) !important; }
.pos-empty-state-row .tw-text-\[13px\] { font-size: var(--pro-fs-base) !important; }

/* --- Bloc des totaux --- */
.pos_form_totals { background: #fff !important; border-top: 1px solid var(--pro-line) !important; }
.pos_form_totals .pos_totals_left { background: var(--pro-line) !important; }
.pos_form_totals .pos_totals_cell { background: #fff !important; min-height: 54px !important; padding: 8px 10px !important; gap: 2px; }
.pos_form_totals .pos_totals_label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    color: var(--pro-muted) !important;
}
.pos_form_totals .pos_totals_value {
    font-size: var(--pro-fs-lg) !important;
    font-weight: 700 !important;
    color: var(--pro-ink) !important;
}
.pos_form_totals .pos_totals_value--danger { color: var(--pro-danger) !important; }
.pos_form_totals .pos_totals_edit { font-size: 12px !important; color: var(--pro-primary) !important; padding: 2px 4px !important; }
.pos_form_totals .pos_totals_right {
    background: var(--pro-ink) !important;
    border: 0 !important;
}
.pos_form_totals .pos_totals_right_label {
    color: #cbd5e1 !important;
    font-size: var(--pro-fs-xs) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}
.pos_form_totals .pos_totals_right_value {
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 767px) {
    .pos_form_totals .pos_totals_right_value { font-size: 26px !important; }
    .pos_form_totals .pos_totals_value { font-size: var(--pro-fs-md) !important; }
}

/* --- Filtres catégories / marques / vedettes --- */
.pos-sidebar-root { padding: 10px !important; }
.pos-sidebar-root > .tw-flex:first-child { gap: 8px !important; margin-bottom: 10px !important; padding: 0 !important; }
.pos-sidebar-root .tw-dw-btn.tw-rounded-full {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: var(--pro-fs-base) !important;
    border: 1px solid var(--pro-line-2) !important;
    box-shadow: none !important;
}
.pos-sidebar-root .tw-dw-btn.tw-rounded-full:hover { transform: none !important; background: var(--pro-surface-2) !important; }
.pos-card-name { font-size: var(--pro-fs-md) !important; font-weight: 600 !important; }

/* --- Grille des produits (tuiles) --- */
#product_list_items,
#featured_products_box > .pos-tile-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    padding: 2px 2px 12px;
}
#featured_products_box > .pos-tile-grid { padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px dashed var(--pro-line-2); }
#product_list_items > :not(.pos-tile-col) { grid-column: 1 / -1; }
.pos-tile-col { min-width: 0; }

.pos-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pro-line);
    border-radius: var(--pro-radius);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.pos-tile:hover { border-color: color-mix(in srgb, var(--pro-primary) 45%, #fff); box-shadow: var(--pro-shadow-lg); }
.pos-tile:active { transform: scale(.97); }
.pos-tile--featured { border-color: #fcd34d; }
.pos-tile__img {
    position: relative;
    height: 80px;
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
    border-bottom: 1px solid var(--pro-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pos-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; opacity: 0; transition: opacity .2s ease; }
.pos-tile__img img.is-loaded { opacity: 1; }
.pos-tile__initials { color: #94a3b8; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.pos-tile__body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; flex: 1; }
.pos-tile__name {
    font-size: var(--pro-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--pro-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
    word-break: break-word;
}
.pos-tile__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pos-tile__meta > * { max-width: 100%; }
.pos-tile__sku { font-size: 11.5px; color: var(--pro-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pos-tile__price {
    margin-top: auto;
    font-size: var(--pro-fs-lg);
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--pro-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pos-tile__stock {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pos-tile__stock--low { background: var(--pro-warning-soft); color: #b45309; }
.pos-tile__stock--none { background: #f1f5f9; color: var(--pro-muted); }
.pos-tile__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--pro-shadow-sm);
}
.pos-tile__badge--out { color: #b91c1c; background: #fee2e2; }
.pos-tile__badge--star { color: #b45309; background: #fef3c7; }
.pos-tile.product_out_of_stock { background: #fafafa; }
.pos-tile.product_out_of_stock .pos-tile__img img, .pos-tile.product_out_of_stock .pos-tile__initials { opacity: .45; filter: grayscale(1); }
.pos-tile.product_out_of_stock .pos-tile__name, .pos-tile.product_out_of_stock .pos-tile__price { color: var(--pro-muted); }

@media (min-width: 1600px) {
    #product_list_items, #featured_products_box > .pos-tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 767px) {
    #product_list_items, #featured_products_box > .pos-tile-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
    .pos-tile__name { font-size: 12.5px; }
}

/* --- Barre d'actions du bas --- */
.pos-form-actions {
    background: #fff !important;
    border-top: 1px solid var(--pro-line) !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06) !important;
    border-radius: 0 !important;
}
.pos-form-actions > div { min-height: 68px !important; padding: 10px 16px !important; }
/* Boutons secondaires (Brouillon, Devis, Suspendre, Crédit, Carte) : tuiles icône + libellé */
.pos-form-actions .pos-footer-secondary > button,
.pos-form-actions .pos-footer-secondary > .col-xs-6 {
    min-width: 76px;
    height: 50px;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    font-size: var(--pro-fs-sm) !important;
    font-weight: 600 !important;
    color: var(--pro-ink-2) !important;
    gap: 3px !important;
    transition: background-color .15s ease;
}
.pos-form-actions .pos-footer-secondary > button:hover { background: var(--pro-surface-2) !important; }
.pos-form-actions .pos-footer-secondary > button i { font-size: 17px !important; }
/* Annuler */
.pos-form-actions .js-pos-cancel {
    height: 50px !important;
    font-size: var(--pro-fs-base) !important;
    border-width: 1px !important;
    border-color: #fca5a5 !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.pos-form-actions .js-pos-cancel:hover { background: var(--pro-danger-soft) !important; }
/* Paiement multiple + Espèces : les deux gros boutons d'encaissement */
.pos-form-actions .pos-finalize,
.pos-form-actions .pos-express-finalize[data-pay_method="cash"] {
    height: 52px !important;
    width: auto !important;
    min-width: 150px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: var(--pro-fs-md) !important;
    font-weight: 700 !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .25);
    transition: filter .15s ease, transform .05s ease;
}
.pos-form-actions .pos-finalize { background: var(--pro-ink) !important; }
.pos-form-actions .pos-express-finalize[data-pay_method="cash"] { background: var(--pro-success) !important; min-width: 170px !important; }
.pos-form-actions .pos-finalize:hover,
.pos-form-actions .pos-express-finalize[data-pay_method="cash"]:hover { filter: brightness(1.1); }
.pos-form-actions .pos-finalize i,
.pos-form-actions .pos-express-finalize[data-pay_method="cash"] i { font-size: 18px; }
#recent-transactions {
    height: 44px !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--pro-ink-2) !important;
    border: 1px solid var(--pro-line-2) !important;
    font-size: var(--pro-fs-sm) !important;
}
#recent-transactions:hover { background: var(--pro-surface-2) !important; }
.pos-footer-divider { height: 34px !important; }

/* --- Fenêtre de paiement --- */
#modal_payment .modal-dialog { width: min(1100px, 96vw); }
#modal_payment .modal-body { background: var(--pro-surface-2); }
#modal_payment .box, #modal_payment .box-solid { border-radius: var(--pro-radius) !important; }
#modal_payment .payment_row .form-control,
#modal_payment .payment-amount { height: 46px !important; font-size: var(--pro-fs-lg) !important; }
#modal_payment .payment-amount { font-weight: 700 !important; }
#modal_payment .bg-orange, #modal_payment .bg-navy, #modal_payment .bg-purple, #modal_payment .bg-green, #modal_payment .bg-red {
    border-radius: var(--pro-radius) !important;
}
#modal_payment .modal-footer .btn { min-height: 48px; font-size: var(--pro-fs-md) !important; }
#pos-save { min-width: 180px; }

/* --- Pavé de raccourcis clavier / calculatrice : lisible --- */
.calculator button, #calculator .btn { min-height: 46px; font-size: var(--pro-fs-lg) !important; }

/* ==========================================================================
   10. PAGE DE CONNEXION
   ========================================================================== */
.login-box-body, .login-box, .auth-box { border-radius: var(--pro-radius-lg) !important; }

.pos-tile-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 16px; color: var(--pro-muted); font-size: var(--pro-fs-md); text-align: center;
}
.pos-tile-empty i { font-size: 32px; color: #cbd5e1; }

/* Panier : le nom du produit peut passer sur 2 lignes au lieu d'être coupé */
#pos_table .product_row .text-link {
    white-space: normal !important;
    text-overflow: clip !important;
    color: var(--pro-ink) !important;
}
#pos_table .product_row .text-link:hover { color: var(--pro-primary) !important; }
#pos_table .product_row .text-link .fa-info-circle { color: var(--pro-faint); font-size: 12px; }
#pos_table .product_row td > div[style*="flex"] .tw-truncate:not(.text-link) { font-size: var(--pro-fs-xs) !important; color: var(--pro-muted) !important; margin-top: 2px; }

/* Ligne client / recherche : donner plus de place au nom du client */
@media (min-width: 992px) {
    #add_pos_sell_form .box-body > div.row:first-of-type > .col-md-4,
    #edit_pos_sell_form .box-body > div.row:first-of-type > .col-md-4 { width: 40%; }
    #add_pos_sell_form .box-body > div.row:first-of-type > .col-md-8,
    #edit_pos_sell_form .box-body > div.row:first-of-type > .col-md-8 { width: 60%; }
}

/* Fenêtre de paiement : panneau récapitulatif sobre et lisible */
#modal_payment .box.bg-orange {
    background: var(--pro-ink) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--pro-shadow-lg) !important;
}
#modal_payment .box.bg-orange .box-body { padding: 14px 16px !important; }
#modal_payment .box.bg-orange .col-md-12 { padding: 0 !important; }
#modal_payment .box.bg-orange strong { font-size: var(--pro-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
#modal_payment .box.bg-orange .lead { display: inline-block; margin: 2px 0 0; font-size: 22px !important; font-weight: 750 !important; font-variant-numeric: tabular-nums; color: #fff; }
#modal_payment .box.bg-orange hr { border-color: rgba(255,255,255,.12) !important; margin: 12px 0 !important; }
#modal_payment .box.bg-orange .total_payable_span { font-size: 28px !important; }
#modal_payment .box.bg-orange .change_return_span { color: #6ee7b7; }
#modal_payment .box.bg-orange .balance_due { color: #fca5a5; }
#modal_payment .bg-lightgray, #modal_payment .payment_row.box { background: #fff !important; border: 1px solid var(--pro-line) !important; }
#modal_payment .modal-body { background: var(--pro-surface-2) !important; }
#modal_payment .modal-footer .tw-dw-btn { min-height: 50px; height: 50px; padding: 0 24px; font-size: var(--pro-fs-md) !important; border-radius: 12px; }
#modal_payment #pos-save { background: var(--pro-success) !important; border-color: var(--pro-success) !important; min-width: 220px; font-weight: 700 !important; }
#modal_payment #pos-save:hover { background: var(--pro-success-hover) !important; }
#modal_payment .tw-dw-btn-neutral { background: #fff !important; color: var(--pro-ink-2) !important; border: 1px solid var(--pro-line-2) !important; }
#modal_payment .tw-dw-btn-primary.tw-w-full { background: #fff !important; color: var(--pro-primary) !important; border: 1px dashed color-mix(in srgb, var(--pro-primary) 50%, #fff) !important; min-height: 42px; }
#modal_payment .tw-dw-btn-primary.tw-w-full:hover { background: var(--pro-primary-soft) !important; }
#modal_payment select.form-control { min-width: 0; width: 100%; }

/* Les montants étaient en police « machine à écrire » : on garde Inter, chiffres alignés */
.tw-font-mono {
    font-family: var(--pro-font) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em !important;
}
p.tw-font-mono.tw-text-xl, .tw-font-mono.tw-text-2xl { font-weight: 700 !important; }

/* Boutons d'export des tableaux (CSV, Excel, Imprimer…) */
.dt-buttons { display: inline-flex !important; flex-wrap: wrap; gap: 6px; }
.dt-buttons .tw-dw-btn, .dt-buttons .dt-button {
    height: 34px !important;
    min-height: 34px !important;
    margin: 4px 0 !important;
    padding: 0 12px !important;
    font-size: var(--pro-fs-sm) !important;
    font-weight: 600 !important;
    color: var(--pro-ink-2) !important;
    background: #fff !important;
    border: 1px solid var(--pro-line-2) !important;
    border-radius: var(--pro-radius-sm) !important;
    box-shadow: var(--pro-shadow-sm);
}
.dt-buttons .tw-dw-btn:hover, .dt-buttons .dt-button:hover { background: var(--pro-surface-2) !important; color: var(--pro-ink) !important; border-color: var(--pro-faint) !important; }
.dt-buttons .tw-dw-btn i, .dt-buttons .dt-button i { color: var(--pro-muted); margin-right: 3px; }

/* Onglets */
.nav-tabs-custom { border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important; border: 1px solid var(--pro-line); }
.nav-tabs-custom > .nav-tabs > li > a { font-weight: 600; color: var(--pro-muted); font-size: var(--pro-fs-base); }
.nav-tabs-custom > .nav-tabs > li.active > a { color: var(--pro-ink); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--pro-primary) !important; }

/* Menu « Actions » des lignes */
.dropdown-menu { border-radius: var(--pro-radius-sm) !important; border: 1px solid var(--pro-line) !important; box-shadow: var(--pro-shadow-lg) !important; padding: 6px !important; }
.dropdown-menu > li > a { border-radius: 6px; padding: 8px 12px !important; font-size: var(--pro-fs-base); color: var(--pro-ink-2) !important; }
.dropdown-menu > li > a:hover { background: var(--pro-surface-2) !important; color: var(--pro-ink) !important; }
.dropdown-menu > li > a > i { width: 18px; color: var(--pro-muted); }

/* Images manquantes dans les tableaux : pas d'icône cassée */
table.dataTable td img { border-radius: 6px; max-height: 44px; object-fit: cover; }

/* Barre d'outils des tableaux : « Afficher 25 » | exports | recherche, sans chevauchement */
@media (min-width: 768px) {
    .dataTables_wrapper > .row.margin-bottom-20 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-left: 0;
        margin-right: 0;
    }
    .dataTables_wrapper > .row.margin-bottom-20::before,
    .dataTables_wrapper > .row.margin-bottom-20::after { content: none; display: none; }
    .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"] { float: none; width: auto; padding: 0; }
    .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1 { flex: 0 0 auto; }
    .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 { flex: 1 1 300px; text-align: left; }
    .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 { flex: 0 0 auto; margin-left: auto; }
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; font-weight: 500 !important; color: var(--pro-muted) !important; }

/* En-tête « fantôme » de DataTables (défilement horizontal) : ne pas lui ajouter de hauteur */
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}
.dataTables_scrollFoot > .dataTables_scrollFootInner > table > tfoot > tr > td { white-space: nowrap; }

/* Tablettes et petits écrans d'ordinateur : client et recherche l'un sous l'autre */
@media (min-width: 992px) and (max-width: 1279px) {
    #add_pos_sell_form .box-body > div.row:first-of-type > .col-md-4,
    #edit_pos_sell_form .box-body > div.row:first-of-type > .col-md-4,
    #add_pos_sell_form .box-body > div.row:first-of-type > .col-md-8,
    #edit_pos_sell_form .box-body > div.row:first-of-type > .col-md-8 { width: 100%; }
}
@media (max-width: 1279px) {
    .pos-form-actions > div { padding: 8px 10px !important; gap: 8px !important; }
    .pos-form-actions .pos-footer-secondary { gap: 2px !important; }
    .pos-form-actions .pos-footer-secondary > button { min-width: 62px; padding: 4px 6px !important; font-size: 12.5px !important; }
    .pos-form-actions .pos-finalize,
    .pos-form-actions .pos-express-finalize[data-pay_method="cash"] { min-width: 118px !important; padding: 0 14px !important; }
    .pos-form-actions .js-pos-cancel { width: auto !important; padding: 0 12px !important; }
}

@media (max-width: 767px) {
    .pos-empty-state-row .tw-max-w-sm { max-width: 260px !important; white-space: normal !important; }
    #pos_table:not(.pos-has-rows) { width: 100% !important; }
}

/* Encadré « Produits vedettes » */
#featured_products_box:not(:empty) {
    flex-wrap: wrap !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: var(--pro-radius) !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
}
#featured_products_box:not(:empty)::before {
    content: '★  Produits vedettes' !important;
    font-family: var(--pro-font) !important;
    font-weight: 700 !important;
    font-size: var(--pro-fs-xs) !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #92400e !important;
    flex: 0 0 100% !important;
    width: 100%;
    margin: 0 0 8px !important;
}
#featured_products_box > .pos-tile-grid {
    flex: 1 1 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}