@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Titillium+Web:wght@300;400;600;700&display=swap");

:root {
    --zws-pink: #e61983;
    --zws-purple: #97155d;
    --zws-deep: #0f1520;
    --zws-surface: #1b2431;
    --zws-surface-2: #202a38;
    --zws-border: #2f3a4a;
    --zws-text: #f3f6fb;
    --zws-muted: #b4becf;
    --zws-radius: 14px;
    --table-selected-bg: var(--bs-primary);
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Montserrat", "Titillium Web", Calibri, sans-serif;
    color: var(--zws-text);
    background-color: #0c121c;
    background: radial-gradient(circle at 25% 5%, #1d2938 0%, #121925 45%, #0c121c 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.login-optimize-screen {
    font-family: Arial, Helvetica, sans-serif;
    background: #121821;
    color: #e7edf6;
}

.login-optimize-screen .login-optimize-center {
    max-width: 600px;
    margin: 18vh auto;
    text-align: center;
}

.login-optimize-screen .login-optimize-spinner {
    border: 8px solid #2a3647;
    border-top: 8px solid #4ea6ff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: zws-optimize-spin 1s linear infinite;
    margin: 0 auto 16px;
}

.login-optimize-screen .login-optimize-message {
    font-size: 18px;
    margin-top: 8px;
}

.login-optimize-screen .login-optimize-sub {
    color: #9fb0c6;
    font-size: 13px;
    margin-top: 6px;
}

#action_modal .modal-dialog {
    max-width: min(1200px, 96vw);
}

#action_modal .modal-content {
    max-height: 90vh;
    overflow: hidden;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#action_modal .container-fluid {
    max-height: calc(90vh - 3.5rem);
    overflow-y: auto;
    padding: 1rem;
}

#action_modal #form-group fieldset {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}

#action_modal #form-group legend {
    float: none;
    width: auto;
    margin: 0 0 0.75rem;
    padding: 0 0.3rem;
    font-size: 1rem;
}

#action_modal #form-group .form-control,
#action_modal #form-group .form-select {
    background-color: #212529;
    color: #dee2e6;
    border-color: #495057;
}

#action_modal #privTree {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid #3a4558;
    border-radius: 0.65rem;
    background: #1f2633;
}

#action_modal #privTree .list-group-item {
    border: 0;
    border-bottom: 1px solid #3a4558;
    background: transparent;
    color: #dee2e6;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

#action_modal #privTree .list-group-item:last-child {
    border-bottom: 0;
}

#action_modal #privTree .list-group-item:hover {
    background: #2a3342;
}

#action_modal #privTree .state-icon {
    color: var(--bs-secondary-color);
}

#action_modal #privTree .form-check-input {
    margin-top: 0;
}

#action_modal .modal-header,
#action_modal .modal-footer {
    border-color: var(--bs-border-color-translucent);
}

#action_modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

@keyframes zws-optimize-spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

footer > .text-center.p-3 {
    background: linear-gradient(180deg, #121a25 0%, #101723 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #aebad0 !important;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

footer > .text-center.p-3 a,
footer > .text-center.p-3 a.text-dark {
    color: #d9e4f7 !important;
    text-decoration: none;
    font-weight: 600;
}

footer > .text-center.p-3 a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.navbar.bg-dark {
    background: linear-gradient(180deg, #131b27 0%, #111822 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
}

.navbar .navbar-brand .brand-main {
    color: #ffffff;
}

.navbar .navbar-brand .brand-accent {
    color: var(--zws-pink);
}

.navbar .navbar-nav .nav-link {
    color: #b6bfd0;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.55rem;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.dropdown-toggle.show {
    color: #ffffff;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.dropdown-toggle.active,
.navbar .navbar-nav .nav-link.dropdown-toggle.show {
    color: var(--zws-pink);
}

.navbar .navbar-nav .nav-link.active::after,
.navbar .navbar-nav .nav-link.dropdown-toggle.active::after,
.navbar .navbar-nav .nav-link.dropdown-toggle.show::after {
    content: "";
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: -0.38rem;
    height: 2px;
    background: var(--zws-pink);
    border-radius: 999px;
}

@media (max-width: 1699.98px) and (min-width: 992px) {
    .navbar .navbar-nav .nav-link > i,
    .navbar .navbar-nav .nav-link > svg {
        display: none !important;
    }
}

.navbar .dropdown-menu {
    background: #151f2b;
    border: 1px solid #313d4f;
}

.navbar .dropdown-item {
    color: #ccd5e6;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    background: linear-gradient(90deg, rgba(151, 21, 93, 0.35) 0%, rgba(230, 25, 131, 0.2) 100%);
    color: #ffffff;
}

.main .h1 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.45rem;
}

.main hr {
    border-color: rgba(255, 255, 255, 0.08);
}

.main .btn.btn-sm {
    border-radius: 12px;
    font-weight: 700;
    border-width: 1px;
    padding: 0.55rem 1.25rem;
}

.main .btn-primary,
.main .btn-success {
    background: linear-gradient(135deg, var(--zws-pink) 0%, var(--zws-purple) 100%);
    border-color: transparent;
    color: #ffffff;
}

.main .btn-warning {
    background: #ffffff;
    border-color: #ffffff;
    color: #141b26;
}

.main .btn-danger {
    background: transparent;
    border-color: #ff356f;
    color: #ff356f;
}

.form-container,
.form-container-nav,
.zws-tree-panel {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%);
    border: 1px solid var(--zws-border);
    border-radius: var(--zws-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.form-container,
.form-container-nav,
.zws-tree-panel {
    padding: 1rem;
}

.form-container legend,
.zws-tree-title {
    font-family: "Titillium Web", Calibri, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.form-container legend::before,
.zws-tree-title::before {
    content: none;
}

.product-logo-spacer {
    min-height: 1.5rem;
}

#product-logo-column #select-logo-button-container {
    margin-left: 0 !important;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    justify-content: center !important;
}

#product-logo-column #selectLogoBtn {
    width: 100%;
    max-width: 170px;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#product-logo-column #product-logo {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#product-description-column #form-product-description-container {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: var(--zws-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

#product-description-column #form-product-description-container .sticky-actions {
    background: #151e2a !important;
    border-top: 1px solid #364357 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#product-description-column #form-product-description-container .sticky-header th {
    background: #151e2a !important;
}

#product-description-column #form-product-description-container #container_tableTVA,
#product-description-column #form-product-description-container #container_tablePrix {
    border: 1px solid var(--zws-border);
    border-radius: 12px;
    overflow: hidden;
    background: #171f2b;
}

#product-tabs-column #product-tabs-container .form-container {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: var(--zws-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

#product-tabs-column #product-tabs-container .form-container [id^="container_table"] {
    border: 1px solid var(--zws-border);
    border-radius: 12px;
    overflow: hidden;
    background: #171f2b;
}

#product-tabs-column #product-tabs-container .form-container .sticky-actions {
    background: #151e2a !important;
    border-top: 1px solid #364357 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#product-tabs-column #product-tabs-container .form-container .sticky-header th {
    background: #151e2a !important;
}

.main #product-description-column #form-product-description-container,
.main #users-details-column #users-details-container,
.main #tpv-description-column #form-tpv-description-container {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: var(--zws-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

.main #users-details-column #users-details-container .bs5-form > fieldset,
.main #users-details-column #users-details-container > form > fieldset,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset,
.main #tpv-description-column #form-tpv-description-container > form > fieldset {
    border: 1px solid #364357;
    border-radius: 12px;
    padding: 0.9rem 1rem 0.75rem;
    margin: 0 0 1rem 0;
    background: rgba(255, 255, 255, 0.01);
}

.main #users-details-column #users-details-container .bs5-form > fieldset:last-child,
.main #users-details-column #users-details-container > form > fieldset:last-child,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset:last-child,
.main #tpv-description-column #form-tpv-description-container > form > fieldset:last-child {
    margin-bottom: 0;
}

.main #users-details-column #users-details-container .bs5-form > fieldset > legend,
.main #users-details-column #users-details-container > form > fieldset > legend,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset > legend,
.main #tpv-description-column #form-tpv-description-container > form > fieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 0.65rem;
    padding: 0 0.35rem;
}

.main #product-description-column #form-product-description-top .bs5-form > fieldset,
.main #product-description-column #form-product-description-top > form > fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1rem 0;
    background: transparent;
}

.main #product-description-column #form-product-description-top .bs5-form > fieldset > legend,
.main #product-description-column #form-product-description-top > form > fieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 0.65rem;
    padding: 0;
}

.main #tpv-description-column #form-tpv-description-container [id^="container_table"] {
    border: 1px solid var(--zws-border);
    border-radius: 12px;
    overflow: hidden;
    background: #171f2b;
}

.main #tpv-description-column #form-tpv-description-container .sticky-actions {
    background: #151e2a !important;
    border-top: 1px solid #364357 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.main #tpv-description-column #form-tpv-description-container .sticky-header th {
    background: #151e2a !important;
}

.main #TpvTab ~ .tab-content .form-container {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: var(--zws-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

.main #TpvTab ~ .tab-content .form-container [id^="container_table"] {
    border: 1px solid var(--zws-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #171f2b !important;
}

.main #TpvTab ~ .tab-content .form-container .sticky-actions {
    background: #151e2a !important;
    border-top: 1px solid #364357 !important;
}

.main #TpvTab ~ .tab-content .form-container .sticky-header th {
    background: #151e2a !important;
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    #product-logo-column #selectLogoBtn {
        max-width: 150px;
        font-size: 0.88rem;
        padding: 0.42rem 0.55rem;
    }
}

@media (max-width: 1199.98px) {
    #product-logo-column #selectLogoBtn {
        max-width: 220px;
        font-size: 0.95rem;
    }
}

.main label,
.main .form-label {
    color: #d5deed;
    font-weight: 500;
}

.main .form-control,
.main .form-select,
.main input[type="text"],
.main input[type="number"],
.main select,
.zws-tree-panel .form-control,
.zws-tree-panel .form-select,
.zws-tree-panel input[type="text"] {
    background-color: #1a2330;
    color: #ffffff;
    border: 1px solid #354255;
    border-radius: 10px;
}

.main .form-select {
    cursor: pointer;
}

.main .form-control:focus,
.main .form-select:focus,
.zws-tree-panel .form-control:focus,
.zws-tree-panel .form-select:focus {
    border-color: var(--zws-pink);
    box-shadow: 0 0 0 0.2rem rgba(230, 25, 131, 0.2);
}

.main .form-floating > label::after {
    background-color: transparent !important;
}

.main .form-floating > .form-select {
    min-height: 56px;
    padding-right: 2.5rem;
}

.main .form-floating > .form-select ~ label {
    color: #c6d0e1;
}

.main .form-select option,
.main select option,
.zws-tree-panel .form-select option,
.zws-tree-panel select option {
    background-color: #1a2330;
    color: #ffffff;
}

/*#product-logo-container {*/
/*    min-height: 118px;*/
/*    min-width: 118px;*/
/*    border: 1px solid #6f7f95;*/
/*    border-radius: 12px;*/
/*    background: #1b2532;*/
/*    padding: 0.5rem;*/
/*}*/

/*#product-logo {*/
/*    max-height: 100px;*/
/*    max-width: 100px;*/
/*    margin-left: 0 !important;*/
/*}*/

.main .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.35rem;
}

.main .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--zws-muted);
    font-weight: 600;
    padding: 0.75rem 1rem;
    background: transparent;
}

.main .nav-tabs .nav-link.active,
.main .nav-tabs .nav-link:hover {
    color: #ffffff;
    border-bottom-color: var(--zws-pink);
    background: transparent;
}

.main .table {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 0.75rem;
}

.main .table > :not(caption) > * > * {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
}

.main .table tbody td,
.main .table tbody td div,
.main .table tbody tr.selected td,
.main .table tbody tr.table-primary td {
    color: #ffffff !important;
}

.main .table thead th {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 0.82rem;
    color: #ecf2ff;
    border-bottom-width: 1px;
}

.main .table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.01);
}

.main .table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.085);
}

.main .table tbody tr:hover {
    background: rgba(142, 197, 255, 0.10);
}

.main .table-responsive,
.main .dataTables_wrapper .row {
    color: #ffffff;
}

/* Cards - DataTable */
.main #cardsListing_wrapper {
    color: #e8eeff;
}

.main #cardsListing_wrapper .dt-scroll {
    border: 1px solid var(--zws-border);
    border-radius: 12px;
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%);
    overflow: hidden;
}

.main #cardsListing_wrapper .dt-scroll-head,
.main #cardsListing_wrapper .dt-scroll-foot {
    background: #151e2a;
}

.main #cardsListing_wrapper .dt-scroll-head table,
.main #cardsListing_wrapper .dt-scroll-body table {
    margin-bottom: 0 !important;
}

.main #cardsListing_wrapper .dt-scroll-body {
    background: #171f2b;
}

.main #cardsListing_wrapper thead th,
.main #cardsListing_wrapper .table-dark th {
    background: #151e2a !important;
    color: #f4f7ff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    text-transform: uppercase;
    font-size: 0.79rem;
    letter-spacing: 0.01em;
}

.main #cardsListing_wrapper tbody td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle;
    background-color: transparent !important;
}

.main #cardsListing_wrapper #cardsListing.table,
.main #cardsListing_wrapper #cardsListing.table.dataTable {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr > td {
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.01) !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.085) !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr:hover {
    background: rgba(142, 197, 255, 0.10) !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr.selected,
.main #cardsListing_wrapper #cardsListing > tbody > tr.table-primary,
.main #cardsListing_wrapper #cardsListing > tbody > tr.selected.table-primary {
    background: var(--table-selected-bg) !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr.selected > td,
.main #cardsListing_wrapper #cardsListing > tbody > tr.table-primary > td,
.main #cardsListing_wrapper #cardsListing > tbody > tr.selected.table-primary > td {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Ligne sélectionnée générique (tableaux table-sm : TVA, Prix, etc.) */
.table.table-sm tbody tr.selected,
.table.table-sm tbody tr.table-primary {
    background-color: var(--table-selected-bg) !important;
}

.table.table-sm tbody tr.selected > td,
.table.table-sm tbody tr.table-primary > td,
.table.table-sm tbody tr.selected > td div,
.table.table-sm tbody tr.table-primary > td div {
    background-color: transparent !important;
    color: #ffffff !important;
}

.table.table-sm tbody tr.selected:hover,
.table.table-sm tbody tr.table-primary:hover {
    background-color: var(--table-selected-bg) !important;
}

/* Update window styling */
.update-container {
  background: linear-gradient(165deg, var(--zws-surface) 0%, #141823 100%);
  border: 1px solid var(--zws-border);
  color: var(--zws-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
.update-container .text-center h2 {
  margin-bottom: 0.5rem;
  color: var(--zws-text);
  font-weight: 700;
}
.update-container p {
  color: var(--zws-muted);
}

.update-container .wave {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
  height: 32px;
}
.update-container .wave > div {
  width: 8px;
  height: 8px;
  background: rgba(230,25,131,0.95);
  border-radius: 4px;
  opacity: 0.9;
  animation: zws-wave-dark 1s linear infinite;
}
.update-container .wave > div:nth-child(2) { animation-delay: 0.12s; }
.update-container .wave > div:nth-child(3) { animation-delay: 0.24s; }
.update-container .wave > div:nth-child(4) { animation-delay: 0.36s; }

@keyframes zws-wave-dark {
  0%, 40%, 100% { height: 8px; opacity: 0.6; }
  20% { height: 28px; opacity: 1; }
}

.update-container .alert-info {
  background: linear-gradient(90deg, rgba(230,25,131,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(151,21,93,0.18);
  color: var(--zws-text);
}

.update-container .bi {
  color: var(--zws-pink);
}


.main #cardsListing_wrapper td .btn.btn-sm {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main #cardsListing_wrapper td .btn.btn-sm i,
.main #cardsListing_wrapper td .btn.btn-sm svg {
    font-size: 0.85rem;
    width: 0.85rem;
    height: 0.85rem;
}

.main #cardsListing_wrapper .dataTables_length select,
.main #cardsListing_wrapper .dataTables_filter input {
    background: #1a2330;
    color: #ffffff;
    border: 1px solid #354255;
    border-radius: 10px;
}

.main #cardsListing_wrapper .dataTables_info,
.main #cardsListing_wrapper .dataTables_length,
.main #cardsListing_wrapper .dataTables_filter,
.main #cardsListing_wrapper .dataTables_paginate {
    color: #cfd8e8 !important;
}

.main #cardsListing_wrapper .page-link {
    background: #1a2330;
    color: #dfe6f5;
    border-color: #354255;
}

.main #cardsListing_wrapper .page-item.active .page-link {
    background: linear-gradient(135deg, var(--zws-pink) 0%, var(--zws-purple) 100%);
    border-color: transparent;
    color: #ffffff;
}

.main #cardsListing_wrapper .dt-processing.card {
    background: #151e2a;
    color: #ffffff;
    border: 1px solid #364357;
}

.main #cardsListing_wrapper input.form-check-input:checked {
    background-color: var(--zws-pink);
    border-color: var(--zws-pink);
}

.sticky-actions-container {
    margin-top: 0.9rem !important;
}

.sticky-actions {
    background: #151e2a !important;
    border: 1px solid #364357 !important;
    border-radius: 12px;
    border-top: 1px solid #364357 !important;
    padding: 0.35rem 0.45rem !important;
    gap: 0.3rem;
}

.sticky-actions .p-1 {
    padding: 0 !important;
}

.sticky-actions .btn {
    width: 2.25rem;
    height: 2.1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.sticky-actions .btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.sticky-actions .btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    border-color: transparent;
    color: #ffffff;
}

.sticky-actions .btn-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #1a2230;
}

.sticky-actions .btn-danger {
    background: transparent;
    border-color: #ff356f;
    color: #ff356f;
}

.zws-tree-panel .bstreeview {
    background: transparent;
    border: 1px solid var(--zws-border);
    border-radius: 12px;
}

.zws-tree-panel .bstreeview .list-group-item {
    background: transparent;
    color: #dce5f5;
    border-color: rgba(255, 255, 255, 0.06);
    padding: 0.7rem 0.9rem;
}

.zws-tree-panel .bstreeview .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.zws-tree-panel .bstreeview .list-group-item.active {
    background: var(--table-selected-bg) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.main .conf-tree-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.main .conf-tree-card .card-body {
    background: transparent !important;
}

.main .analytique-tree-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.main .analytique-tree-card .card-body {
    background: transparent !important;
}

.main .analytique-content-card {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%);
    border: 1px solid var(--zws-border);
    color: #ffffff;
}

.main #analytiqueTree.bstreeview,
.main #analytiqueTree .bstreeview {
    background: transparent;
    border: 1px solid var(--zws-border);
    border-radius: 12px;
}

.main #analytiqueTree.bstreeview .list-group-item,
.main #analytiqueTree .bstreeview .list-group-item {
    background: transparent;
    color: #dce5f5;
    border-color: rgba(255, 255, 255, 0.06);
}

.main #analytiqueTree.bstreeview .list-group-item:hover,
.main #analytiqueTree .bstreeview .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.main #analytiqueTree.bstreeview .list-group-item.active,
.main #analytiqueTree .bstreeview .list-group-item.active {
background: var(--table-selected-bg) !important;
border-color: transparent !important;
color: #ffffff !important;
}

/* Ensure bstreeview active matches table selected */
.bstreeview .list-group-item.active {
    background: var(--table-selected-bg) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Analytique cards */
.main #analytiqueContent .card {
    background: linear-gradient(165deg, #1b2431 0%, #171f2b 100%);
    border: 1px solid var(--zws-border);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.main #analytiqueContent .card.border-start {
    border-left-width: 4px !important;
}

.main #analytiqueContent .card.border-start.border-danger {
    border-left-color: var(--zws-pink) !important;
}

.main #analytiqueContent .card.border-start.border-warning {
    border-left-color: #f59e0b !important;
}

.main #analytiqueContent .card.border-start.border-success {
    border-left-color: #22c55e !important;
}

.main #analytiqueContent .card.border-start.border-info {
    border-left-color: #38bdf8 !important;
}

.main #analytiqueContent .card .card-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.main #analytiqueContent .card .card-title {
    color: #ffffff;
    font-weight: 700;
}

.main #analytiqueContent .card .card-body {
    color: #ffffff;
}

.main #analytiqueContent .card .card-settings {
    color: #b9c5da !important;
    transition: color .2s ease;
}

.main #analytiqueContent .card .card-settings:hover {
    color: var(--zws-pink) !important;
}

.main #analytiqueContent .card .fs-3,
.main #analytiqueContent .card .fw-bold {
    color: #ffffff !important;
}

.main #analytiqueContent .card .text-danger {
    color: #ff6ea9 !important;
}

.main #analytiqueContent .js-plotly-plot,
.main #analytiqueContent .js-plotly-plot .plot-container,
.main #analytiqueContent .js-plotly-plot .svg-container {
    background: transparent !important;
}

.main #analytiqueContent .js-plotly-plot .main-svg {
    background: transparent !important;
}

.main #analytiqueContent .js-plotly-plot text {
    fill: #d6dfef !important;
}

.main #analytiqueContent .js-plotly-plot .number {
    fill: #ffffff !important;
    font-weight: 700 !important;
}

.main #analytiqueContent .js-plotly-plot .gauge-outline path,
.main #analytiqueContent .js-plotly-plot .xangularaxistick.ticks,
.main #analytiqueContent .js-plotly-plot .bg-arc path {
    stroke: #55627a !important;
}

.main #analytiqueContent .js-plotly-plot .bg-arc path {
    fill: rgba(255, 255, 255, 0.06) !important;
}

.main #analytiqueContent .js-plotly-plot .gridlayer .x .xgrid,
.main #analytiqueContent .js-plotly-plot .minor-gridlayer .x path {
    stroke-width: 0 !important;
    stroke-opacity: 0 !important;
}

.main #analytiqueContent .js-plotly-plot .gridlayer .y .ygrid {
    stroke: rgba(214, 223, 239, 0.18) !important;
}

.main #analytiqueContent .js-plotly-plot .modebar {
    background: rgba(17, 24, 36, 0.75) !important;
    border-radius: 8px;
}

.main #analytiqueContent .js-plotly-plot .modebar-btn path {
    fill: #c9d5e8 !important;
}

.main #analytiqueContent .js-plotly-plot .legend .bg {
    fill: #1a2330 !important;
    fill-opacity: 0.95 !important;
    stroke: #354255 !important;
    stroke-width: 1px !important;
}

.main #analytiqueContent .js-plotly-plot .legend .legendtext {
    fill: #e5ecfb !important;
}

.main .form-check-input:checked,
.main input[type="checkbox"]:checked {
    background-color: var(--zws-pink);
    border-color: var(--zws-pink);
}
.zws-modal {
    background: #1b2431;
    color: #ffffff;
    border: 1px solid #39465a;
}

.zws-modal .modal-header,
.zws-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

#modalAttestation .modal-dialog {
    max-width: min(420px, calc(100vw - 1rem)) !important;
    margin: 0.75rem auto;
}

#modalAttestation .modal-content {
    background: linear-gradient(165deg, #1b2431 0%, #171f2b 100%);
    color: #f3f6fb;
    border: 1px solid #39465a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

#modalAttestation .modal-header {
    background: #141d29 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.85rem 1rem;
}

#modalAttestation .modal-title {
    font-size: 1rem;
    line-height: 1.3;
}

#modalAttestation .modal-body {
    padding: 1rem;
}

#modalAttestation .modal-body .text-muted {
    color: #b8c4d8 !important;
}

#modalAttestation .modal-body .bg-light.border.rounded {
    background: #202b3b !important;
    border-color: #3b495f !important;
}

#modalAttestation .modal-body a.text-primary {
    color: #8ec5ff !important;
}

#modalAttestation .modal-body .btn.btn-link.text-secondary {
    color: #cfd8e8 !important;
}

#modalAttestation .modal-body .p-2.border.rounded.bg-white {
    background: #ffffff !important;
    border-color: #d5deed !important;
}

#modalAttestation .modal-footer {
    background: #141d29 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem 1rem;
    gap: 0.6rem;
}

@media (max-width: 575.98px) {
    #modalAttestation .modal-title {
        font-size: 0.95rem;
    }

    #modalAttestation .modal-footer {
        justify-content: stretch !important;
    }

    #modalAttestation .modal-footer .btn {
        width: 100%;
    }
}

#modalHealth .modal-dialog {
    max-width: min(560px, calc(100vw - 1rem)) !important;
    margin: 0.75rem auto;
}

#modalHealth .modal-content {
    background: linear-gradient(165deg, #1b2431 0%, #171f2b 100%);
    color: #f3f6fb;
    border: 1px solid #39465a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

#modalHealth .modal-header {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.85rem 1rem;
}

#modalHealth .modal-title {
    font-size: 1rem;
    font-weight: 700;
}

#modalHealth .modal-header .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.9;
}

#modalHealth .modal-body {
    padding: 1rem;
}

#modalHealth #healthBody ul {
    margin: 0;
}

#modalHealth #healthBody li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
}

#modalHealth #healthBody strong {
    color: #f6c9cd;
}

#modalHealth #healthBody a {
    color: #8ec5ff !important;
}

#modalHealth #healthBody a:hover {
    color: #b8dcff !important;
}

#modalHealth .modal-footer {
    background: #141d29;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
}

@media (max-width: 575.98px) {
    #modalHealth .modal-footer .btn {
        width: 100%;
    }
}

/* Technicien */
.main .tech-toolbar .group {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: var(--zws-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.main .tech-toolbar .group-title {
    color: #c8d2e4 !important;
    font-weight: 700;
}

.main .tech-toolbar .btn-tile {
    min-width: 120px;
}

.main .tech-toolbar .btn-outline-secondary,
.main .tech-toolbar .btn-outline-secondary:disabled {
    color: #d9e2f2 !important;
    border-color: #435168 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    opacity: 1 !important;
}

.main #deviceTree {
    background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%);
    border: 1px solid var(--zws-border);
    border-radius: var(--zws-radius);
    padding: 0.8rem;
}

.main #deviceTree.bstreeview,
.main #deviceTree .bstreeview {
    background: transparent;
    border: 1px solid var(--zws-border);
    border-radius: 12px;
}

.main #deviceTree.bstreeview .list-group-item,
.main #deviceTree .bstreeview .list-group-item {
    background: transparent;
    color: #dce5f5;
    border-color: rgba(255, 255, 255, 0.06);
}

.main #deviceTree.bstreeview .list-group-item:hover,
.main #deviceTree .bstreeview .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.main #deviceTree.bstreeview .list-group-item.active,
.main #deviceTree .bstreeview .list-group-item.active {
    background: linear-gradient(90deg, var(--zws-purple) 0%, var(--zws-pink) 100%);
    border-color: transparent;
    color: #ffffff;
}

.main #TechnicienTab ~ .tab-content .form-container {
    margin-top: 1rem !important;
}

.main #btnDeleteDevice.btn-outline-danger {
    color: #ff5a86;
    border-color: #ff5a86;
}

.main .col-md-4 > h3 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .form-container,
    .form-container-nav,
    .zws-tree-panel {
        margin-bottom: 1rem;
    }
}
/* Card preview styling (dark theme) */
#zoneApercuCarteImpression {
  background: linear-gradient(165deg, var(--zws-surface) 0%, #171f2b 100%);
  border: 1px solid var(--zws-border);
  padding: 1rem;
  color: #e8eeff;
}
#zoneApercuCarteImpression img#imgApercuCarte {
  max-width: 340px;
  border-radius: .375rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(24,39,75,0.16);
}
#zoneApercuCarteImpression figure { margin: 0; }
#zoneApercuCarteImpression figcaption { color: #aebad0; }
#zoneApercuCarteImpression .btn-outline-secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  color: #e8eeff;
}

/* Font picker modal */
#modalPolice .modal-content {
    background: linear-gradient(165deg, #1b2431 0%, #171f2b 100%);
    color: #f3f6fb;
    border: 1px solid #39465a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

#modalPolice .modal-header {
    background: #141d29;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#modalPolice .modal-title {
    color: #ffffff;
    font-weight: 700;
}

#modalPolice .modal-header .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.9;
}

#modalPolice .modal-footer {
    background: #141d29;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#modalPolice .form-label,
#modalPolice .form-check-label {
    color: #d5deed;
}

#modalPolice .form-control {
    background-color: #1a2330;
    color: #ffffff;
    border: 1px solid #354255;
    border-radius: 10px;
}

#modalPolice .form-control:focus {
    border-color: var(--zws-pink);
    box-shadow: 0 0 0 0.2rem rgba(230, 25, 131, 0.2);
}

#modalPolice .liste-boite {
    border: 1px solid #364357;
    background: #151e2a;
    color: #e6edfa;
    border-radius: 10px;
}

#modalPolice .liste-item {
    color: #dce5f5;
}

#modalPolice .liste-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

#modalPolice .liste-item.selectionne {
    background: var(--table-selected-bg);
    color: #ffffff;
}

#modalPolice .couleur-puce {
    border-color: #5d6b81;
}

#modalPolice #policeApercu {
    border: 1px solid #364357;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.dispenser-list {
    font-family: Arial, sans-serif;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dispenser-item {
    font-size: 12px;
    cursor: pointer;
}

.dispenser-details {
    margin-bottom: 20px;
}

.dispenser-details .form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.dispenser-details .form-select {
    margin-bottom: 10px;
}

.dropzone.dragover {
    border-color: #000;
}

.dd-productid-autosave {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: relative;
    pointer-events: none;
    padding: 0;
    border: 0;
}

.dispenser-users-scroll {
    height: 100px;
    overflow-x: auto;
    overflow-y: auto;
}

.dispenser-users-panel {
    padding: 0.25rem 0.5rem;
}

.dispenser-users-panel .form-check {
    padding-left: 0;
    margin-bottom: 0.15rem;
    flex-wrap: nowrap;
    width: max-content;
}

.dispenser-users-panel .form-check .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    flex: 0 0 auto;
}

.dispenser-users-panel .form-check .form-check-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.dispenser-product-input-row {
    position: relative;
    display: block !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-product-input-row > .form-control.form-control-sm {
    width: 100%;
}

.dispenser-details .dropzone,
.dispenser-details .input-group.input-group-sm.my-3 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-details .dropzone .draggable {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-details .dispenser-product-input-row .icon-container,
.dispenser-details .input-group.input-group-sm.my-3 .icon-container {
    position: absolute;
    left: calc(100% + 0.35rem);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 2;
    white-space: nowrap;
}

.dispenser-details .input-group.input-group-sm.my-3 > .input-group-text {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.dispenser-details .input-group.input-group-sm.my-3 > .form-control.plu-input,
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.volume-input,
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.plu-input:not(:last-child),
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.volume-input:not(:last-child) {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}