:root {
    --clr-primary: var(--dynamic-primary, #3B82F6);
    --secondary-color: var(--dynamic-secondary, #2563EB);
    --sidebar-color: var(--dynamic-sidebar, #201415);
    --clr-secondary: #0071bc;
    --clr-white: #fff;
    --clr-black: #000;
    --clr-dark: #101828;
    --clr-light: #344054;
    --clr-light-sm: #dee2e6;
}

.mybazar-login-section .forget-password input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #d0d5dd !important;
    background: var(--clr-primary) !important;
    margin-right: 5px;
    margin-top: -1px;
}

.text-custom-primary,
.text-custom-primary:hover {
    color: var(--clr-primary);
    font-weight: bold;
}

.mybazar-login-section .forget-password input[type="checkbox"]:checked+.custom-control-label::before {
    color: #ffffff;
}

.mybazar-login-section .forget-password input[type="checkbox"]:checked {
    accent-color: #3291d4 !important;
}

.indicate-text {
    font-size: 12px;
    color: red;
}

.form-control.error {
    border-color: red;
    padding: 0.375rem 0.75rem;
}

.image-wrapper.error {
    border-color: red;
    padding: 0.375rem 0.75rem;
}

.error-alert {
    font-size: 11px;
    color: red;
}

.error {
    color: red !important;
}

.payment-section .form-control[readonly] {
    background-color: #fff !important;
}

.budget-form ::placeholder {
    font-size: 12px;
}

.avatar {
    background: var(--clr-primary);
    border-radius: 50%;
    color: #e3eaef;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    position: relative;
    vertical-align: middle;
    line-height: 1.28;
    height: 45px;
    width: 45px;
}

.avatar.avatar-sm {
    font-size: 12px;
    height: 30px;
    width: 30px;
}

.avatar img {
    border-radius: 50%;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.btn-custom-warning {
    background-color: var(--clr-primary) !important;
    color: #fff;
    border: none !important;
}

.btn-custom-warning:hover {
    color: #fff !important;
}

.custom-warning-color {
    color: var(--clr-primary);
}

.roles-permissions table td {
    color: black;
}

.img-preview {
    margin-top: 4px;
    height: auto;
    width: 100px;
}

.folders-files tr a {
    font-size: 18px !important;
}

.gradient-row {
    background: linear-gradient(270deg, #dbe4df 0%, #65e4a6 50%, #ffffff 100%);
}

.order-form-section label,
.permission label,
.role-input-label label {
    left: 10px;
    white-space: nowrap;
}

.table-form-section .responsive-table {
    min-height: unset !important;
}

.table-title-three h5 {
    font-weight: 600 !important;
}

.loss-profit-custom-color1 {
    background-color: rgba(255, 132, 0, 0.15);
}

.loss-profit-custom-color2 {
    background-color: rgba(255, 181, 101, 1);
    font-weight: bold;
}

.production-wrap {
    padding-right: 60px;
}

.form-control.reset-img {
    display: none;
}

.table-header h3,
.table-header h4 {
    font-weight: 700;
}

.privacy-condition-header h4 {
    font-weight: 700;
}

.erp-new-invice .invice-detaisl {
    padding: 20px 0;
}

.commercial-invoice {
    margin-bottom: 30px;
}

.invoice-payment-details {
    margin-top: 40px;
}

.erp-new-invice {
    min-height: 900px !important;
}

/* dropdown font size reduce */
.form-select {
    font-size: 1rem;
}

.product-img {
    height: 100px;
    width: 250px;
    border-radius: 2%;
    overflow: hidden;
    border: 2px dashed #e4e5e7;
}

.form-control .form-control {
    border: 0 !important;
}

.table-user-icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: var(--clr-gray4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.table-user-icon img {
    height: 25px;
}

.ctg-icon img {
    max-height: 40px;
    width: auto;
    margin: 0 auto;
}

/*delete modal*/
.delete-modal {
    text-align: center;
    margin-bottom: 20px;
}

.delete-modal h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 5px;
}

.delete-modal p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.multiple-button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 24px;
}

.chart-css {
    width: 100% !important;
    max-height: 308px !important;
    min-height: 290px;
}

.rounded-image .table-img {
    width: 40px;
    height: 40px;
}

.width-10 {
    width: 10px;
}

.add-feature-btn {
    min-height: 30px;
    padding: 4px 20px;
    background: var(--clr-primary) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 5px;
}

.remove-list {
    position: relative;
}

.remove-list .remove-one {
    background: transparent !important;
    /* background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-primary) 100%) !important; */
    color: #fff !important;
    height: 50px;
    width: 50px;
    border: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.remove-list .remove-one i {
    color: #ff3030;
}

.feature-add-wrp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.feature-add-wrp .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-container {
    border: 1px solid #ccc;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    display: inline-block;
}

.top-btn-custom {
    text-decoration: none;
    border: none;
}

.top-btn-custom:hover,
.top-btn-custom:active {
    color: #007bff;
    text-decoration: underline;
    border: none;
    text-underline-offset: 18px;
}

.top-btn-custom.active {
    text-decoration: underline;
    color: #007bff;
    font-weight: bold;
    border: none;
    text-underline-offset: 18px;
}

.card {
    border: 0;
    box-shadow: 0px 4px 24px 0px #e4c3c30d;
    border-radius: 12px;
    background-color: #fff !important;
}

.table th {
    border-bottom: 1px solid #d8d8d8 !important;
    background: #f9f8f8;
    border: 0;
    height: 54px;
}

.delete-selected {
    cursor: pointer;
}

.custom-primary {
    color: var(--clr-primary);
}

.table-hidden-checkbox {
    display: none;
}

/* Style the custom checkbox */
.table-custom-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    padding-left: 35px;
    line-height: 24px;
}

/* Create the custom checkmark */
.table-custom-checkmark {
    position: absolute;
    top: -9px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    transition:
        background-color 0.3s,
        border-color 0.3s;
}

/* Style the checkmark when checked */
.table-hidden-checkbox:checked+.table-custom-checkmark {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}

/* Add the tick mark inside the checkbox */
.table-custom-checkbox .custom-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the tick mark when the checkbox is checked */
.table-custom-checkbox .table-hidden-checkbox:checked+.custom-checkmark:after {
    display: block;
}

/* Style the tick mark */
.table-custom-checkbox .custom-checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Customize the label text color and size */
.table-custom-checkbox {
    color: #333;
    font-family: Arial, sans-serif;
}

/* Scoped fix for plans module checkbox alignment */
.enabled-modules-section .table-custom-checkbox {
    display: inline-flex;
    align-items: center;
    padding-left: 30px;
}
.enabled-modules-section .table-custom-checkmark {
    top: 50%;
    transform: translateY(-50%);
}
.enabled-modules-section .table-custom-checkbox .custom-checkmark:after {
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.dropdown-menu-scroll {
    max-height: 400px;
    overflow-y: auto;
    width: 220px;
    overflow-x: hidden !important;
}

.language-li {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.language-check {
    color: #00ae1c;
    font-weight: 400;
    font-size: 16px;
}

.verify-modal-body h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #212121;
}

.verify-modal-body .des,
.verify-modal-body .des span {
    color: #4d4d4d;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.verify-modal-body .des {
    font-weight: 400 !important;
}

.verify-modal-body .des .reset {
    color: var(--clr-primary);
}

.verify-modal-body .code-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.verify-modal-body .code-input input {
    width: 51px;
    height: 58px;
    padding: 14px 15px;
    border-radius: 10px;
    border: 1px solid #d8d8d8;
    box-shadow: none !important;
}

.verify-modal-body .code-input input:focus {
    border: 1px solid var(--clr-primary) !important;
}

.verify-modal-body .code-input input:focus-visible {
    border: 1px solid var(--clr-primary) !important;
}

.verify-modal-body .des span {
    color: #121212;
}

.success-content {
    border-radius: 16px;
}

.success-modal-body h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #121212;
    margin-bottom: 0px;
    padding-top: 8px;
    padding-bottom: 16px;
}

.create-account-body h4 {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    color: #121212;
    margin-bottom: 0px;
}

.success-modal-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #4d4d4d;
    margin-bottom: 24px;
}

.verify-btn {
    background-color: var(--clr-primary);
    color: white;
    width: 100%;
    padding: 10px 0px;
    margin-top: 12px;
}

.verify-btn:hover {
    color: white;
}

/********** Sales page code start **********/
.sales-container {
    background-color: white;
    border-radius: 15px 0 0 15px;
}

.quick-act-header {
    background-color: white;
    padding: 2% 0;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
}

.sales-container .quick-act-title {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.sales-container .save-product-btn {
    background-color: #0ec03b1a;
    color: #4d4d4d;
    padding: 2px 6px;
    border-radius: 4px;
}

.sales-container .bulk-upload-btn {
    background-color: #567df41a;
    color: #4d4d4d;
    padding: 2px 6px;
    border-radius: 4px;
}

.sales-container .sales-btn {
    background-color: #9e0de81a;
    color: #4d4d4d;
    padding: 2px 6px;
    border-radius: 4px;
}

.sales-container .calculator-btn {
    background-color: #007aff1a;
    color: #4d4d4d;
    border: none;
}

.sales-container .dashboard-btn {
    background-color: #ff3b301a;
    color: #4d4d4d;
    padding: 2px 6px;
    border-radius: 4px;
}

.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: gray;
}

.btn-danger {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .btn-danger,
.input-group .btn-outline-secondary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control {
    background-color: #f5f3f34d;
}

/* quick action table */
.icon {
    font-weight: 400;
    font-size: 13px;
}

.incre-decre {
    width: 20px !important;
    height: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d899 !important;
    border-radius: 3px !important;
    background-color: #fff !important;
}

.incre-decre:hover {
    background-color: #fef0f1 !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

.num-input {
    border-radius: 5px;
    background-color: white;
}

.num-input input {
    background-color: white;
    width: 95px;
}

.hr-container {
    margin-top: 50px;
}

.hr-container hr {
    border: 1px solid var(--clr-primary) 4d;
}

.payment-title {
    font-size: 14px;
    display: flex;
    width: fit-content;
    font-weight: 400 !important;
}

.amount-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-right: 12px;
}

.save-amount-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.save-btn {
    background-color: var(--secondary-color);
    color: white;
    width: 100%;
    border: none;
    height: 48px;
    border-radius: 6px;
}

.payment-btn {
    background-color: var(--clr-primary);
    color: white;
    width: 100%;
    border: none;
    height: 48px;
    border-radius: 6px;
}

.form-control-amount {
    background-color: white;
}

.payment-container {
    background-color: #f5f3f380;
    border-radius: 8px;
    padding: 12px 15px 5px 15px;
}

.cancel-sale-btn {
    margin-top: 15px;
}

.table-background {
    background-color: rgba(245, 243, 243, 0.5);
}

.discount-btn {
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    border-radius: 5px;
    background-color: transparent;
}

.main-container {
    background-color: white;
    padding: 0%;
}

.products-header {
    border: none;
    border-radius: 0px 12px 12px 0px !important;
    border-left: 1px solid #d8d8d8;
    padding: 12px;
    overflow: hidden;
    color: white;
}

.main-container .products-container {
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    z-index: 0 !important;
    position: relative;
}

.main-container .products-header .fa-search {
    color: white;
}

.main-container .products-header .category-btn {
    background-color: #ff9500;
    color: white;
    border: none;
    height: 48px;
    border-radius: 6px;
    padding-left: 15px;
    padding-right: 15px;
}

.main-container .products-header .brand-btn {
    background-color: #007aff;
    color: white;
    border: none;
    height: 48px;
    border-radius: 6px;
    padding-left: 15px;
    padding-right: 15px;
}

.search-input {
    border-radius: 0.25rem;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border: 1px solid #ced4da;
    padding: 0.5rem;
    flex-grow: 1;
}

.btn-category {
    background-color: var(--secondary-color);
    color: white;
    padding-top: 9px;
    padding-bottom: 9px;
}

.btn-brand {
    background-color: #1e90ff;
    color: white;
    padding-top: 9px;
    padding-bottom: 9px;
}

.btn-brand:hover {
    background-color: #1b87f2;
    color: white;
    border: 1px solid white;
}

.btn-category:hover {
    background-color: #df8415;
    color: white;
    border: 1px solid white;
}

.btn-search {
    background-color: var(--clr-primary);
    color: white;
    border-radius: 0 0.25rem 0.25rem 0;
    border: 1px solid var(--clr-primary);
    width: 48px;
}

.btn-search:hover {
    border: 1px solid var(--clr-primary);
}

.btn-search svg {
    height: 25px;
    width: 25px;
}

.btn-search:hover,
.btn-search:focus,
.btn-search:active {
    background-color: var(--clr-primary);
    color: white;
    border: 1px solid var(--clr-primary);
}

/* Products section start */
/* .products {
    display: grid;
    grid-template-columns: 3fr !important;
    gap: 10px;

} */

.products .single-product {
    background-color: white;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    width: 100%;
    margin-top: 4px;
    cursor: pointer;
}

.products .single-product:hover {
    border: 1px solid var(--clr-primary);
}

.products .single-product .product-con {
    padding: 12px;
}

.products .single-product .pro-img img {
    border-radius: 6px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    object-fit: cover;
    width: 100%;
    height: 145px;
}

.products .single-product .pro-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
}

.products .single-product .pro-price {
    font-weight: 600;
    font-size: 14px;
}

.products .single-product .pro-category {
    color: #7c7c7c;
    font-size: 14px;
}

.products .single-product .price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.products .single-product .price .old-price {
    font-size: 12px;
    text-decoration: line-through;
    color: gray;
}

.custom-number-input {
    width: 40px;
    padding: 5px;
    border: 1px solid #4a90e2;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    outline: none;
    transition: border-color 0.3s;
}

.custom-number-input:focus {
    border-color: #007bff;
}

.x-btn {
    border: none;
    background-color: white;
    border-radius: 5px;
}

.x-btn:hover {
    background-color: #f5f5f5;
    border-radius: 5px;
}

.product-dropdown {
    border: 1px solid #e4e5e7;
    border-radius: 6px;
    position: relative;
    background-color: #fff;
}

.product-left img {
    height: 44px;
    width: 44px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eaecf0;
}

.product-selected {
    padding: 11px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-selected #arrow svg {
    width: 20px;
    height: 20px;
}

.product-dropdown-options {
    position: absolute;
    top: 90px !important;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    z-index: 3;
    display: none;
}

.product-option-group {
    border-top: 1px solid #eee;
    padding: 8px;
}

/* .product-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
} */

.product-option-item:hover {
    background-color: #f4f4f4;
}

.product-left {
    display: grid;
    gap: 10px;
    grid-template-columns: 2fr 38fr;
}

.multi-items {
    border-bottom: 1px solid #ececec;
    padding: 4px 0;
}

.multi-items:last-child {
    border-bottom: none;
}

.multi-items:hover {
    background-color: #eaeaea;
}

.product-left img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.product-text {
    font-size: 14px;
    position: relative;
}

.product-title {
    font-weight: bold;
    font-size: 15px;
}

.product-in-stock {
    color: #34c759;
    font-weight: 500;
}

.product-price {
    font-weight: bold;
    color: #111;
}

.product-rotate {
    transform: rotate(180deg);
}

/* Products section end */

.padding-status {
    color: #fb8a00;
    border: 1px solid #fb8a00;
    border-radius: 4px;
    background-color: #ff920c1a;
    max-width: 100px;
    padding: 7px;
    text-align: center;
}

.approved-status {
    color: #00a551;
    border: 1px solid #00a551;
    border-radius: 4px;
    background-color: #00a5511a;
    max-width: 100px;
    padding: 7px;
    text-align: center;
}

.rejected-status {
    color: #ff3b30;
    border: 1px solid #ff3b30;
    border-radius: 4px;
    background-color: #ff3b3021;
    max-width: 100px;
    padding: 7px;
    text-align: center;
}

.select-batch {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.select-batch:hover {
    background-color: #c5212712;
}

.gradient-alert {
    background: linear-gradient(270deg, #ff7db8 0%, #ee2a7b 100%);
}

.domain-instructions ol li {
    list-style: decimal;
    padding-left: 3px;
}

#fieldsContainer label {
    top: 0;
}

.choices__list--dropdown {
    z-index: 20 !important;
}

.placeholder-btn {
    cursor: pointer;
}

.serial-remove-btn,
.add-row-icon {
    cursor: pointer;
    color: #c52127;
    font-size: 16px;
}

.kot-picker-btn {
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f8fafc;
    color: #64748b;
    border-left: 1px solid #e5e7eb;
    position: relative;
}

.share-btn {
    background-color: #CB30E0 !important;
}

.share-btn svg {
    height: 20px;
    width: 20px;
}

.share-option svg {
    height: 72px;
    width: 72px;
}

/* Backup Page Styles */
.backup-btn-save {
    background-color: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
}

.backup-btn-generate {
    background-color: #3B82F6;
    color: white;
    border: none;
    border-radius: 6px;
}

.backup-btn-save:hover,
.backup-btn-generate:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.backup-btn-save:hover,
.backup-btn-save:focus,
.backup-btn-save:active,
.backup-btn-save:focus-visible {
    background-color: #b91c1c;
    color: white;
    box-shadow: none;
}

.backup-btn-generate:hover,
.backup-btn-generate:focus,
.backup-btn-generate:active,
.backup-btn-generate:focus-visible {
    background-color: #2563EB;
    color: white;
    box-shadow: none;
}

.backup-btn-save,
.backup-btn-generate {
    transition: all 0.3s ease;
}

.refresh-token-input {
    padding-right: 130px;
}

.btn-generate-token {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #3B82F6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 2;
}

.btn-generate-token:hover {
    background-color: #4f48de;
    color: white;
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.btn-generate-token:focus,
.btn-generate-token:active {
    background-color: #4f48de;
    color: white;
    box-shadow: none;
    transform: translateY(-50%);
}

.backup-form-control {
    width: 80px;
}

.backup-form-select {
    width: 120px;
}

/* POS create/inventory redesign: the payment + totals block moved under the product catalog in
   the right column. Shorten the product grid so the checkout (Payment / Totals / Vente) stays
   reachable beneath it, and give the moved block a little breathing room. */
.pos-catalog-column {
    display: flex;
    flex-direction: column;
}
.pos-catalog-column .scroll-card {
    height: 40vh;
    min-height: 300px;
}
.pos-catalog-column .payment-section {
    margin-top: 0.25rem;
}

/* Row "⋮" action menu (ActionMenu.tsx). Portaled into document.body, so it can't be styled by the
   old `.table-action .dropdown-menu` descendant-selector rule in style.css — it needs its own,
   self-contained styling regardless of where in the DOM it physically mounts. */
.am-trigger {
    font-size: 20px;
    background: none;
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #6b7280;
    transition: background-color .15s ease, color .15s ease;
}
.am-trigger:hover,
.am-trigger:focus-visible,
.dropdown.table-action.show .am-trigger {
    background: #eff6ff;
    color: var(--clr-primary);
}

.am-menu {
    position: fixed;
    display: block;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 190px;
    max-width: 260px;
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    z-index: 1060;
    animation: am-pop .12s ease-out;
}
@keyframes am-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.am-menu li {
    list-style: none;
}
.am-menu li + li {
    margin-top: 1px;
}

/* Every existing row-menu item is an <a> (occasionally a react-router <Link>, same tag) or
   <button> — style both uniformly since pages mix the two. */
.am-menu li > a,
.am-menu li > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: #344054;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.am-menu li > a:hover,
.am-menu li > button:hover {
    background: #f4f7ff;
    color: var(--clr-primary);
}
.am-menu li > a i,
.am-menu li > button i,
.am-menu li > a svg,
.am-menu li > button svg {
    flex-shrink: 0;
    width: 14px;
    color: #98a2b3;
}
.am-menu li > a:hover i,
.am-menu li > button:hover i {
    color: var(--clr-primary);
}

/* Destructive action — opt-in via className="am-danger" on the <li>'s <a>/<button> so "Delete" /
   "Supprimer" stands out from neutral actions. */
.am-menu .am-danger {
    color: #d92d20;
}
.am-menu .am-danger:hover {
    background: #fef3f2;
    color: #d92d20;
}
.am-menu .am-danger i,
.am-menu .am-danger svg {
    color: #d92d20;
}

.am-divider {
    height: 1px;
    margin: 6px 4px;
    background: #f1f2f4;
}

/* Stat-card row (`.loss-profit-container` — Dues/Sales/Profit&Loss/report pages, ~38 screens).
   Base rule in style.css only gives the outer box a white padded card look; it leaves the inner
   `d-flex ... gap-3` group + each `.profit-card`/`.loss-card`/`.sales-card` at their natural
   (shrink-to-content) width, so on a narrower viewport the whole row collapses into a small block
   pinned to the left instead of spanning the same width as the table card below it. Stretch both
   levels to fill the row and give each card equal width, and layer in an icon slot + clearer value
   hierarchy — purely additive (extra classes/markup), so pages that don't opt in are unaffected. */
.loss-profit-container {
    width: 100%;
}
.loss-profit-container > div {
    width: 100%;
    align-items: stretch !important;
}
.loss-profit-container .profit-card,
.loss-profit-container .loss-card,
.loss-profit-container .sales-card {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.loss-profit-container .stat-title {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    opacity: 0.75;
    margin-bottom: 2px;
}
.loss-profit-container .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #101828;
}

/* Optional icon slot: <span className="stat-icon"><i className="fas fa-..."/></span> as the first
   child of a stat card. Cards that don't include one are unaffected (nothing to select). */
.loss-profit-container .stat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
    font-size: 17px;
    color: #101828;
}

@media (max-width: 640px) {
    .loss-profit-container .profit-card,
    .loss-profit-container .loss-card,
    .loss-profit-container .sales-card {
        min-width: 100%;
    }
}

/* POS "Payment" modal (PosCreatePage.tsx) — PaymentSection is normally half of a two-column `.row`
   (beside TotalsSummary, in PosEditPage.tsx); used alone here at `fullWidth`, its label+input rows
   (`.amount-container`) had no explicit column split so they stacked label-above-input, wasting the
   modal's width. Lay each row out as a fixed label column + flexible input column instead. */
.pos-payment-modal-body .amount-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
.pos-payment-modal-body .payment-title {
    flex: 0 0 160px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}
.pos-payment-modal-body .amount-container > .form-control,
.pos-payment-modal-body .amount-container > input {
    flex: 1 1 auto;
}
.pos-payment-modal-body .amount-container > div.p-0 {
    flex: 1 1 auto;
}

@media (max-width: 576px) {
    .pos-payment-modal-body .amount-container {
        flex-wrap: wrap;
    }
    .pos-payment-modal-body .payment-title {
        flex: 1 1 100%;
    }
}

/* POS checkout button row (PosCreatePage.tsx) — Sale / Sale & Print / Sale & Invoice, replacing the
   single "Sale" button. `.payment-btn` already has its own full styling (color, padding, radius)
   from style.css; only the group layout and the two secondary buttons' toned-down fill are new. */
.pos-sale-btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pos-sale-btn-group .payment-btn {
    flex: 1 1 0;
    min-width: 140px;
    white-space: nowrap;
}
.pos-sale-btn-group .pos-sale-btn-secondary {
    background: var(--clr-secondary, #2563EB);
}
.pos-sale-btn-group .pos-sale-btn-secondary:hover {
    filter: brightness(0.92);
}

@media (max-width: 900px) {
    .pos-sale-btn-group {
        flex-direction: column;
    }
    .pos-sale-btn-group .payment-btn {
        width: 100%;
    }
}

/* Dashboard stat-card bottom row (StatCards.tsx: arrow icon + "Ce mois-ci" label + value). A
   legacy rule (style.css `@media (min-width:1200px) { .bus-profit { display:block !important } }`)
   forces this row to display:block on desktop, which silences Bootstrap's `.d-flex`/`gap-1` — the
   icon/label/value end up stacked with no controlled spacing, reading as glued-together text. The
   `.bus-profit-row` class added alongside `.bus-profit` in the JSX re-asserts flex, unconditionally
   (not just under that one media query) so the row lays out consistently at every width. */
.bus-profit-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
}