.dataTables_filter {
    display: flex !important;
    margin: 10px 0 10px auto !important;
}

.dataTables_paginate {
    margin-left: auto !important;
    margin: 10px 0 10px auto !important;
}

.dataTables_info {
    align-self: center !important;
}

thead {
    background-color: #f9f9f9;
    font-weight: bolder;
    color: #030749;
}

.dashboard-separator {
    padding: 0 !important;
    height: 75px !important;
    margin: auto 0 !important;
    border: 1px solid #e2e8f0 !important;
}

.line-separator {
    padding: 0 1rem !important;
    border-color: #f1f5f9 !important;
}

.auth-screen {
    overflow-y: auto;
    box-sizing: content-box;
    object-fit: cover;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.auth-screen::-webkit-scrollbar {
    width: 0;
    display: none;
}

.auth-container {
    height: 100dvh;
    box-sizing: border-box;
    object-fit: cover;
}

.auth-img {
    background-size: cover;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: grayscale(50%);
}

.search-results {
    min-width: 300px;
    max-width: 350px;
    height: 100dvh;
    position: absolute;
    top: 0px;
    right: 200px;
    overflow: hidden;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background: #ffffff;
}

.result_div {
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-scrollbar-width: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    padding: 20px;
}

.result_div::-webkit-scrollbar {
    display: none;
    width: 0;
}

.not_found {
    background-image: url(../media/not_found.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.payment-overview-page {
    --payment-bg: #f6f6f6;
    --payment-text: #111827;
    --payment-muted: #8b929e;
    --payment-line: #edf0f3;
    --payment-blue: #365cff;
    --payment-sky: #4bc6f3;
    --payment-green: #12bd72;
    --payment-red: #ff4b35;
    --payment-yellow: #ffb91d;
    --payment-orange: #ff7a2f;
    --payment-purple: #d63ee8;
    background: var(--payment-bg);
    color: var(--payment-text);
    font-family: Inter, Poppins, Helvetica, sans-serif;
    min-height: calc(100vh - 75px);
    padding: 28px;
}

.payment-overview-page * {
    letter-spacing: 0;
}

.payment-card {
    background: #fff;
    border: 1px solid rgba(232, 235, 240, .9);
    border-radius: 8px;
}

.payment-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 24px 0;
}

.metric-cell {
    border-right: 1px dashed #cfd5dd;
    min-height: 82px;
    padding: 6px 28px;
}

.metric-cell:nth-child(4n) {
    border-right: 0;
}

.metric-cell:nth-child(n + 5) {
    border-top: 1px dashed #e1e5ea;
    padding-top: 28px;
}

.metric-label {
    color: var(--payment-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.metric-change {
    color: var(--payment-green, #12bd72);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.metric-change.down {
    color: var(--payment-red, #ff4b35);
}
.mini-bars {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(14, 1fr);
    height: 22px;
    max-width: 170px;
    width: 100%;
}

.mini-bars span {
    background: #eceff2;
    border-radius: 2px;
}

.mini-bars .blue {
    background: var(--payment-blue);
}

.mini-bars .green {
    background: var(--payment-green);
}

.mini-bars .sky {
    background: var(--payment-sky);
}

.mini-bars .red {
    background: var(--payment-red);
}
@media (max-width: 767.98px) {
    .payment-overview-page {
        padding: 14px;
    }

    .payment-card.p-4 {
        padding: 16px !important;
    }

    .payment-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 4px 0;
    }

    .metric-cell {
        padding: 14px 12px;
        min-height: 86px;
        border-bottom: 1px dashed #e1e5ea;
    }

    .metric-label {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .metric-value {
        font-size: 17px;
        margin-bottom: 4px;
    }

    .metric-change {
        font-size: 10px;
    }

    .metric-cell:nth-child(4n) {
        border-right: 1px dashed #cfd5dd;
    }

    .metric-cell:nth-child(3n) {
        border-right: 0;
    }

    .metric-cell:nth-child(8) {
        border-right: 0;
    }

    .metric-cell:nth-child(n + 5) {
        border-top: none;
        padding-top: 14px;
    }

    .metric-cell:nth-child(n + 7) {
        border-bottom: 0;
    }

    .wallet-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 18px;
    }

    .wallet-item {
        padding: 16px 14px;
        border-bottom: 1px dashed #e1e5ea;
    }

    .wallet-item:nth-child(even) {
        border-right: 0;
    }

    .wallet-item:nth-child(n + 3) {
        border-bottom: 0;
    }

    .wallet-item p {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .wallet-item strong {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .mini-bars {
        max-width: 120px;
        height: 18px;
        gap: 3px;
    }

    .donut-wrap canvas {
        max-height: 150px;
        max-width: 150px;
    }

    .donut-center-label strong {
        font-size: 18px;
    }

    .summary-stat strong {
        font-size: 17px;
    }

    .performance-table {
        overflow-x: auto;
    }

    .performance-row {
        min-width: 620px;
    }

    .patient-row {
        grid-template-columns: 1.2fr .6fr .6fr .7fr;
        min-width: 520px;
    }

    .patient-table {
        overflow-x: auto;
    }

    .weekly-chart {
        gap: 8px;
        height: 170px;
        padding-top: 20px;
    }

    .week-bar {
        width: 30px;
    }

    .week-col {
        gap: 6px;
    }
}

@media (max-width: 575.98px) {
    .payment-card.p-4 {
        padding: 14px !important;
    }

    .payment-metrics {
        padding: 10px 0;
    }

    .metric-cell {
        padding: 3px 10px;
        min-height: 48px;
    }

    .metric-value {
        font-size: 15px;
    }

    .metric-change {
        font-size: 9px;
    }

    .wallet-item {
        padding: 14px 10px;
    }

    .wallet-item strong {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .mini-bars {
        max-width: 105px;
        height: 16px;
        gap: 2px;
    }

    .donut-wrap canvas {
        max-height: 130px;
        max-width: 130px;
    }

    .donut-center-label strong {
        font-size: 16px;
    }

    .summary-stats {
        gap: 10px;
    }

    .summary-stat strong {
        font-size: 15px;
    }

    .weekly-chart {
        gap: 6px;
        height: 150px;
        padding-top: 16px;
    }

    .week-bar {
        width: 24px;
    }

    .week-col {
        gap: 4px;
    }
}

@media (max-width: 380px) {
    .payment-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-cell:nth-child(3n) {
        border-right: 1px dashed #cfd5dd;
    }

    .metric-cell:nth-child(2n) {
        border-right: 0;
    }

    .metric-cell {
        padding: 12px 10px;
        min-height: 72px;
    }

    .metric-value {
        font-size: 14px;
    }

    .wallet-item {
        padding: 12px 10px;
    }

    .wallet-item strong {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .mini-bars {
        max-width: 105px;
        height: 16px;
    }
}
.stat-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.stat-card:hover::before {
    left: 100%;
}

.counter {
    animation: countUp 2s ease-out;
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}



.company-card{
    position:relative;
    border:none;
    border-radius:8px;
    overflow:hidden;
    transition:.25s ease;
    background:#fff;
}

.company-card:hover{
    transform:translateY(-3px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important;
}

/* STATUS */
.company-status{
    position:absolute;
    top:12px;
    right:0;
    padding:4px 12px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    text-transform:lowercase;
    border-radius:3px 0 0 3px;
    letter-spacing:.3px;
    z-index:2;
}

.company-status.active{
    background: var(--kt-primary);
}

.company-status.inactive{
    background:var(--kt-secondary);
}

/* Mobile application experience
   Keep editable controls at 16px to prevent iOS from zooming the page on focus. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button,
a,
input,
textarea,
select,
.btn,
.ts-control,
.ts-dropdown .option {
    touch-action: manipulation;
}

body {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
    html,
    body {
        overscroll-behavior-y: none;
    }

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    .form-control,
    .ts-control,
    .ts-control input,
    .ts-dropdown .option,
    .ts-dropdown .create,
    .ts-dropdown .no-results {
        font-size: 16px !important;
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    .form-control:not(textarea),
    .ts-control {
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 104px;
        line-height: 1.45;
    }

    .form-control,
    .ts-control {
        border-radius: 12px;
    }

    .form-control:focus,
    .ts-wrapper.focus .ts-control {
        box-shadow: 0 0 0 3px rgba(var(--kt-primary-rgb, 0, 158, 247), .13) !important;
    }

    .ts-dropdown {
        max-width: calc(100vw - 24px);
        border: 0;
        border-radius: 12px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, .18);
        overflow: hidden;
    }

    .ts-dropdown-content {
        max-height: min(42vh, 320px);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .ts-dropdown .option,
    .ts-dropdown .create,
    .ts-dropdown .no-results {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
    }

    .btn:not(.btn-icon) {
        min-height: 44px;
    }

    .btn-icon,
    button.btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .modal {
        padding: 0 !important;
    }

    .modal-dialog,
    .modal-dialog-centered {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        max-width: none;
        margin: 0;
    }

    .modal.fade .modal-dialog {
        transform: translateY(28px);
    }

    .modal.show .modal-dialog {
        transform: none;
    }

    .modal-content {
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, .16);
        overflow: hidden;
    }

    .modal-header {
        position: relative;
        flex: 0 0 auto;
        padding-top: 22px;
    }

    .modal-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: #d8dce5;
        transform: translateX(-50%);
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal-footer {
        flex: 0 0 auto;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        background: var(--bs-modal-bg, #fff);
    }

    .table-responsive,
    [class*="table-responsive"] {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .card {
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .form-control,
    .ts-control {
        transition: none !important;
    }
}

/* Sales barcode scanner */
.sale-scanner {
    overflow: hidden;
    border: 1px solid #cfeff4;
    border-radius: 18px;
    background: linear-gradient(145deg, #f3fcfe 0%, #f8f7ff 100%);
}
.sale-scanner__header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
}
.sale-scanner__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #10c8e3;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(16, 200, 227, .22);
}
.sale-scanner__header h3 { margin: 0 0 2px; font-size: 15px; }
.sale-scanner__header p { margin: 0; color: #7b8190; font-size: 11px; }
.sale-scanner__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    color: #56606d;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sale-scanner__live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, .13);
    animation: scanner-live 1.35s ease-out infinite;
}
.sale-scanner__viewport {
    position: relative;
    min-height: 270px;
    margin: 0 18px;
    overflow: hidden;
    border-radius: 15px;
    background: #171827;
}
.sale-scanner__reader { width: 100%; min-height: 270px; }
.sale-scanner__reader video { width: 100% !important; min-height: 270px; object-fit: cover; }
.sale-scanner__reader img { object-fit: contain; }
.sale-scanner__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
}
.sale-scanner__target {
    position: absolute;
    z-index: 4;
    inset: 50% auto auto 50%;
    width: min(68%, 240px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.sale-scanner__corner {
    position: absolute;
    width: 29px;
    height: 29px;
    border-color: rgba(255,255,255,.95);
    border-style: solid;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.35));
    transition: border-color .2s, transform .2s;
}
.sale-scanner__corner--tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 8px 0 0; }
.sale-scanner__corner--tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 8px 0 0; }
.sale-scanner__corner--bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 8px; }
.sale-scanner__corner--br { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-radius: 0 0 8px; }
.sale-scanner__beam {
    position: absolute;
    top: 8px;
    right: 4px;
    left: 4px;
    height: 2px;
    border-radius: 999px;
    background: #2ee6ff;
    box-shadow: 0 0 8px #10c8e3, 0 0 22px rgba(16,200,227,.85);
    opacity: 0;
}
.sale-scanner__viewport.is-starting .sale-scanner__corner { animation: scanner-corner-pulse 1s ease-in-out infinite; }
.sale-scanner__viewport.is-scanning .sale-scanner__beam,
.sale-scanner__viewport.is-invalid .sale-scanner__beam { opacity: 1; animation: scanner-beam 1.8s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.sale-scanner__viewport.is-scanning .sale-scanner__corner { border-color: #5cecff; animation: scanner-corner-pulse 1.5s ease-in-out infinite; }
.sale-scanner__viewport.is-invalid .sale-scanner__corner { border-color: #ff5f6d; transform: scale(1.08); }
.sale-scanner__viewport.is-invalid .sale-scanner__beam { background: #ff5f6d; box-shadow: 0 0 8px #ff5f6d, 0 0 22px rgba(255,95,109,.8); }
.sale-scanner__feedback {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(15,17,31,.86);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    backdrop-filter: blur(7px);
    transform: translate(-50%, 12px);
    transition: opacity .2s, transform .2s;
}
.sale-scanner__feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.is-invalid .sale-scanner__feedback { border-color: rgba(255,95,109,.5); background: rgba(114,20,34,.9); }
@keyframes scanner-beam {
    from { top: 8px; }
    to { top: calc(100% - 10px); }
}
@keyframes scanner-corner-pulse {
    0%,100% { opacity: .72; }
    50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(46,230,255,.8)); }
}
@keyframes scanner-live {
    0% { box-shadow: 0 0 0 0 rgba(46,204,113,.48); }
    75%,100% { box-shadow: 0 0 0 8px rgba(46,204,113,0); }
}
.sale-scanner__footer {
    min-height: 54px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 10px;
}
.sale-scanner__footer > span { display: inline-flex; align-items: center; gap: 7px; }
.sale-selected-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #c9eee2;
    border-radius: 16px;
    background: linear-gradient(135deg, #f2fcf8, #f7fdff);
    box-shadow: 0 10px 30px rgba(24, 130, 98, .07);
}
.sale-selected-item__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e0f8ef;
    color: #159c70;
    font-size: 22px;
}
.sale-selected-item__details span { color: #159c70; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.sale-selected-item__details h3 { margin: 2px 0; font-size: 16px; }
.sale-selected-item__details p { margin: 0; color: #7d8790; font-size: 10px; }
.sale-selected-item__price { color: #24263a; font-size: 19px; font-weight: 800; }

@media (max-width: 575.98px) {
    .sale-scanner__header { grid-template-columns: 42px minmax(0,1fr); padding: 13px; }
    .sale-scanner__live { display: none; }
    .sale-scanner__viewport { min-height: 235px; margin: 0 12px; }
    .sale-scanner__reader,.sale-scanner__reader video { min-height: 235px; }
    .sale-scanner__target { width: min(72%, 220px); }
    .sale-scanner__footer { align-items: flex-start; flex-direction: column; padding: 12px; }
    .sale-selected-item { grid-template-columns: 44px minmax(0,1fr) 36px; gap: 10px; }
    .sale-selected-item__icon { width: 44px; height: 44px; }
    .sale-selected-item__price { grid-column: 2; font-size: 16px; }
    .sale-selected-item > button { grid-column: 3; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .sale-scanner__viewport .sale-scanner__beam,
    .sale-scanner__viewport .sale-scanner__corner,
    .sale-scanner__live i { animation: none !important; }
    .sale-scanner__viewport .sale-scanner__beam { top: 50%; }
}

/* Barcode generator */
.barcode-page__header {
    position: relative;
    min-height: 170px;
    margin-bottom: 24px;
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(130deg, #201847 0%, #5738c7 65%, #10c8e3 145%);
    color: #fff;
}
.barcode-page__header::after {
    content: "";
    position: absolute;
    right: 10%;
    top: -75px;
    width: 230px;
    height: 230px;
    border: 45px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.barcode-page__header > div:first-child { position: relative; z-index: 1; }
.barcode-page__header h2 { margin: 5px 0; color: #fff; font-size: 30px; }
.barcode-page__header p { margin: 0; color: rgba(255,255,255,.7); }
.barcode-page__eyebrow { color: #75edff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.barcode-page__mark { position: relative; z-index: 1; width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; background: rgba(255,255,255,.1); font-size: 38px; backdrop-filter: blur(8px); }
.barcode-config,.barcode-preview { border: 1px solid #ebe8f6; border-radius: 20px; box-shadow: 0 13px 35px rgba(45,34,91,.06); }
.barcode-scope { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.barcode-scope label { cursor: pointer; }
.barcode-scope input { position: absolute; opacity: 0; pointer-events: none; }
.barcode-scope label > span { min-height: 84px; padding: 15px; display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 11px; border: 1px solid #e2dfed; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.barcode-scope label > span > i { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #f0edff; color: #5b35d5; font-size: 17px; }
.barcode-scope b { font-size: 12px; }.barcode-scope small { color: #8a8e9c; font-size: 9px; }
.barcode-scope input:checked + span { border-color: #7358df; box-shadow: 0 0 0 3px rgba(91,53,213,.1); transform: translateY(-2px); }
.barcode-preview__empty { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8b8e9c; text-align: center; }
.barcode-preview__empty > span { width: 72px; height: 72px; margin-bottom: 15px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg,#ede8ff,#e7fafd); color: #5b35d5; font-size: 34px; }
.barcode-preview__empty h3 { margin: 0 0 5px; color: #333548; font-size: 16px; }.barcode-preview__empty p { margin: 0; font-size: 11px; }
.barcode-print-sheet { display: grid; grid-template-columns: repeat(10,minmax(96px,1fr)); gap: 7px; padding: 10px; overflow-x: auto; border-radius: 14px; background: #f5f6f8; }
.barcode-label { min-width: 0; min-height: 170px; padding: 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #bcc2cb; border-radius: 8px; background: #fff; text-align: center; }
.barcode-label__brand { color: #8b9099; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.barcode-label h4 { width: 100%; margin: 5px 0 3px; overflow: hidden; color: #252738; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.barcode-label__qr { display: block; width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; }
.barcode-label__code { margin-top: 2px; color: #697180; font: 700 8px/1.2 monospace; letter-spacing: .02em; }
.barcode-label strong { margin-top: 2px; font-size: 9px; }

/* Appointment settings */
.appointment-settings-page { --appointment-cyan:#10c8e3; --appointment-purple:#6847d9; --appointment-ink:#292b45; --appointment-muted:#777b91; padding-bottom: 24px; }
.appointment-settings-hero { position:relative; min-height:220px; margin-bottom:24px; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; border:1px solid #e6e8f4; border-radius:24px; background:linear-gradient(120deg,#f8fbff 0%,#f5f1ff 58%,#edfbfd 100%); box-shadow:0 16px 38px rgba(49,52,91,.07); }
.appointment-settings-hero::before { content:""; position:absolute; width:240px; height:240px; left:44%; bottom:-190px; border:42px solid rgba(104,71,217,.07); border-radius:50%; }
.appointment-settings-hero__content { position:relative; z-index:2; max-width:690px; }
.appointment-settings-hero__eyebrow { width:max-content; margin-bottom:13px; padding:7px 12px; display:flex; align-items:center; gap:7px; border:1px solid rgba(104,71,217,.13); border-radius:99px; background:#fff; color:var(--appointment-purple); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 7px 20px rgba(74,58,139,.07); }
.appointment-settings-hero h2 { margin:0 0 8px; color:var(--appointment-ink); font-size:30px; font-weight:800; letter-spacing:-.035em; }
.appointment-settings-hero p { max-width:610px; margin:0; color:var(--appointment-muted); font-size:14px; line-height:1.7; }
.appointment-settings-hero__features { margin-top:21px; display:flex; flex-wrap:wrap; gap:9px; }
.appointment-settings-hero__features span { padding:8px 11px; display:flex; align-items:center; gap:7px; border:1px solid #e4e5f1; border-radius:10px; background:rgba(255,255,255,.78); color:#595d74; font-size:11px; font-weight:700; }
.appointment-settings-hero__features i { color:var(--appointment-cyan); font-size:14px; }
.appointment-settings-hero__art { position:relative; z-index:1; width:180px; height:150px; flex:0 0 180px; display:grid; place-items:center; }
.appointment-settings-hero__orbit { position:absolute; width:145px; height:145px; border:1px dashed rgba(104,71,217,.25); border-radius:50%; animation:appointmentOrbit 18s linear infinite; }
.appointment-settings-hero__icon { position:relative; z-index:2; width:96px; height:96px; display:grid; place-items:center; border-radius:28px; background:linear-gradient(145deg,var(--appointment-purple),#8067ee); color:#fff; font-size:43px; box-shadow:0 20px 35px rgba(104,71,217,.25); transform:rotate(-4deg); }
.appointment-settings-hero__bubble { position:absolute; z-index:3; width:39px; height:39px; display:grid; place-items:center; border:5px solid #f8f9ff; border-radius:50%; color:#fff; box-shadow:0 9px 20px rgba(42,45,75,.14); animation:appointmentFloat 3s ease-in-out infinite; }
.appointment-settings-hero__bubble--one { top:7px; right:5px; background:var(--appointment-cyan); }
.appointment-settings-hero__bubble--two { left:2px; bottom:10px; background:#8b70ea; animation-delay:-1.4s; }
.appointment-settings-card { overflow:hidden; border:1px solid #e7e9f2; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(43,46,76,.055); }
.appointment-settings-card__head { min-height:86px; padding:20px 24px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #eff0f5; background:linear-gradient(180deg,#fff,#fdfdff); }
.appointment-settings-card__head h3 { margin:0 0 3px; color:var(--appointment-ink); font-size:18px; font-weight:800; }
.appointment-settings-card__head p { margin:0; color:#8a8da0; font-size:12px; line-height:1.5; }
.appointment-settings-card__icon { width:43px; height:43px; flex:0 0 43px; display:grid; place-items:center; border-radius:13px; font-size:19px; }
.appointment-settings-card__icon--cyan { background:#e9fafd; color:#06a9c2; }
.appointment-settings-card__icon--purple { background:#f0edff; color:var(--appointment-purple); }
.appointment-settings-card__icon--green { background:#e8faf2; color:#13a66d; }
.appointment-settings-card__body { padding:24px; }
.appointment-settings-page .form-label { margin-bottom:8px; color:#4d5068; font-size:12px; font-weight:800; }
.appointment-settings-page .form-control { min-height:44px; border:1px solid #e1e4ed; border-radius:11px; background:#fafbfc; color:#34364c; font-size:13px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.appointment-settings-page .form-control:focus { border-color:rgba(16,200,227,.65); background:#fff; box-shadow:0 0 0 4px rgba(16,200,227,.1); }
.appointment-input { position:relative; }
.appointment-input > i { position:absolute; z-index:2; top:50%; left:15px; color:#9195a7; font-size:15px; transform:translateY(-50%); }
.appointment-input .form-control { padding-left:42px; }
.appointment-rule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.appointment-rule-field { position:relative; padding:13px 11px 11px; border:1px solid #ececf3; border-radius:14px; background:#fcfcfe; }
.appointment-rule-field__icon { width:31px; height:31px; margin-bottom:11px; display:grid; place-items:center; border-radius:9px; background:#f0edff; color:var(--appointment-purple); font-size:14px; }
.appointment-rule-field .form-label { min-height:30px; margin-bottom:4px; display:flex; align-items:flex-end; font-size:10px; }
.appointment-number-input { position:relative; }
.appointment-number-input .form-control { min-height:39px; padding-right:40px; background:#fff; font-weight:800; }
.appointment-number-input span { position:absolute; top:50%; right:9px; color:#9a9dac; font-size:9px; font-weight:700; transform:translateY(-50%); }
.appointment-settings-textarea { min-height:116px!important; resize:vertical; }
.appointment-settings-page .form-text { margin-top:8px; color:#999cac; font-size:10px; }
.appointment-settings-card__body--hours { padding:11px 20px 17px; }
.appointment-hours-head,.appointment-hours__row { display:grid; grid-template-columns:145px 90px minmax(125px,1fr) minmax(125px,1fr); gap:12px; align-items:center; }
.appointment-hours-head { padding:8px 13px; color:#a0a3b2; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.appointment-hours__row { min-height:61px; margin-bottom:4px; padding:7px 12px; border:1px solid transparent; border-radius:13px; background:#f8f9fb; transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.appointment-hours__row.is-enabled { border-color:#e2def8; background:#fbfaff; box-shadow:0 5px 15px rgba(90,70,170,.055); }
.appointment-hours__day { display:flex; align-items:center; gap:10px; color:#51546b; }
.appointment-hours__day > span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:#e9ebf1; color:#898c9e; font-size:8px; font-weight:800; }
.appointment-hours__row.is-enabled .appointment-hours__day > span { background:#ece8ff; color:var(--appointment-purple); }
.appointment-hours__day b { font-size:12px; }
.appointment-day-toggle { margin:0; display:flex; align-items:center; gap:6px; cursor:pointer; }
.appointment-day-toggle input { position:absolute; opacity:0; pointer-events:none; }
.appointment-day-toggle > span { position:relative; width:34px; height:19px; flex:0 0 34px; border-radius:99px; background:#cfd2dc; transition:background .2s ease; }
.appointment-day-toggle > span::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.15); transition:transform .2s ease; }
.appointment-day-toggle input:checked + span { background:var(--appointment-purple); }
.appointment-day-toggle input:checked + span::after { transform:translateX(15px); }
.appointment-day-toggle em { color:#999cab; font-size:9px; font-style:normal; font-weight:800; }
.appointment-hours__row.is-enabled .appointment-day-toggle em { color:var(--appointment-purple); }
.appointment-time-field { position:relative; margin:0; }
.appointment-time-field small { display:none; }
.appointment-time-field i { position:absolute; z-index:2; top:50%; left:11px; color:#9b9eae; font-size:12px; transform:translateY(-50%); }
.appointment-time-field .form-control { min-height:39px; padding-left:31px; background:#fff; font-size:11px; }
.appointment-time-field .form-control:disabled { border-color:#eceef2; background:#f1f2f5; color:#afb1bc; opacity:.72; }
.appointment-whatsapp-card__head { background:linear-gradient(90deg,#fbfffd,#f9fffd); }
.appointment-switch { margin-left:auto; padding:7px 9px; display:flex; align-items:center; gap:8px; border:1px solid #e5e8ed; border-radius:99px; background:#fff; cursor:pointer; }
.appointment-switch input { position:absolute; opacity:0; pointer-events:none; }
.appointment-switch__track { position:relative; width:37px; height:21px; flex:0 0 37px; border-radius:99px; background:#cfd2da; transition:background .2s ease; }
.appointment-switch__track span { position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.15); transition:transform .2s ease; }
.appointment-switch input:checked + .appointment-switch__track { background:#18b77a; }
.appointment-switch input:checked + .appointment-switch__track span { transform:translateX(16px); }
.appointment-switch__label { min-width:44px; color:#858897; font-size:10px; }
.appointment-switch input:checked ~ .appointment-switch__label { color:#129765; }
#appointmentWhatsappFields { transition:opacity .2s ease; }
#appointmentWhatsappFields.is-disabled { opacity:.68; }
.appointment-credentials-note { margin-bottom:22px; padding:12px 15px; display:flex; align-items:center; gap:11px; border:1px solid #e8e4fa; border-radius:13px; background:#faf9ff; }
.appointment-credentials-note > i { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:#ede9ff; color:var(--appointment-purple); font-size:15px; }
.appointment-credentials-note div { display:flex; flex-direction:column; gap:2px; }
.appointment-credentials-note b { color:#4a4d65; font-size:11px; }
.appointment-credentials-note span { color:#9598a8; font-size:10px; }
.appointment-webhook { margin-top:22px; padding:17px; display:flex; gap:13px; border:1px solid #dceff2; border-radius:15px; background:linear-gradient(110deg,#f5fcfd,#faf9ff); }
.appointment-webhook__icon { width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:11px; background:#ddf7fb; color:#08a9c2; font-size:20px; }
.appointment-webhook__content { min-width:0; flex:1; }
.appointment-webhook__content > b { color:#41445b; font-size:12px; }
.appointment-webhook__content > p { margin:2px 0 10px; color:#8b8e9f; font-size:10px; }
.appointment-webhook__copy { display:flex; gap:8px; }
.appointment-webhook__copy .form-control { min-width:0; background:#fff; }
.appointment-webhook__copy .btn { flex:0 0 auto; border-radius:10px; background:var(--appointment-purple); color:#fff; font-size:11px; font-weight:700; }
.appointment-settings-actions { padding:15px 17px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #e4e6ee; border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(42,44,70,.06); }
.appointment-settings-actions > div { display:flex; align-items:center; gap:11px; }
.appointment-settings-actions > div > i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#eafafd; color:#07abc4; font-size:17px; }
.appointment-settings-actions span { display:flex; flex-direction:column; }
.appointment-settings-actions b { color:#45485f; font-size:11px; }
.appointment-settings-actions small { color:#989baa; font-size:9px; }
.appointment-settings-actions .btn { min-width:155px; min-height:43px; border:0; border-radius:11px; background:linear-gradient(135deg,#6645d7,#7557e6); box-shadow:0 9px 18px rgba(104,71,217,.2); font-size:12px; font-weight:800; }
@keyframes appointmentOrbit { to { transform:rotate(360deg); } }
@keyframes appointmentFloat { 50% { transform:translateY(-7px); } }

@media (max-width: 991.98px) {
    .appointment-settings-hero { min-height:200px; padding:30px; }
    .appointment-settings-hero__art { width:145px; flex-basis:145px; transform:scale(.88); }
}
@media (max-width: 767.98px) {
    .appointment-settings-hero { min-height:unset; padding:25px 22px; }
    .appointment-settings-hero h2 { font-size:25px; }
    .appointment-settings-hero__art { display:none; }
    .appointment-settings-hero__features { gap:7px; }.appointment-settings-hero__features span { padding:7px 9px; font-size:9px; }
    .appointment-settings-card__head { padding:17px; }.appointment-settings-card__body { padding:17px; }
    .appointment-rule-grid { grid-template-columns:1fr; }
    .appointment-rule-field { display:grid; grid-template-columns:34px 1fr 105px; align-items:center; gap:9px; }
    .appointment-rule-field__icon { margin:0; }.appointment-rule-field .form-label { min-height:0; margin:0; align-items:center; }
    .appointment-settings-card__body--hours { padding:10px; }
    .appointment-hours-head { display:none; }
    .appointment-hours__row { grid-template-columns:1fr auto; gap:9px; padding:11px; }
    .appointment-time-field { grid-column:auto; }
    .appointment-time-field small { margin-bottom:5px; display:block; color:#999cac; font-size:8px; font-weight:700; }
    .appointment-time-field i { top:auto; bottom:12px; transform:none; }
    .appointment-whatsapp-card__head { align-items:flex-start; flex-wrap:wrap; }
    .appointment-whatsapp-card__head .appointment-switch { width:100%; margin:2px 0 0 57px; justify-content:space-between; }
    .appointment-webhook { padding:13px; }.appointment-webhook__icon { display:none; }
    .appointment-webhook__copy { flex-direction:column; }.appointment-webhook__copy .btn { min-height:40px; }
    .appointment-settings-actions { align-items:stretch; flex-direction:column; }.appointment-settings-actions .btn { width:100%; }
}
@media (max-width: 420px) {
    .appointment-hours__row { grid-template-columns:1fr auto; }
    .appointment-time-field { grid-column:1/-1; }
    .appointment-rule-field { grid-template-columns:32px 1fr 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .appointment-settings-page * { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
}

@media (max-width: 767.98px) {
    .barcode-page__header { min-height: 145px; padding: 25px; }.barcode-page__mark { width: 65px; height: 65px; font-size: 29px; }
    .barcode-scope { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .barcode-page__mark { display: none; } }