:root {
    --mylab-blue: #0f5dcf;
    --mylab-blue-dark: #0a3f91;
    --mylab-blue-mid: #2b7ae8;
    --mylab-blue-soft: #eaf2ff;
    --mylab-surface: #f6f9ff;
    --mylab-border: #d9e7ff;
}

html,
body {
    color: #1e355f;
}

body,
.content-wrapper,
main {
    background: linear-gradient(160deg, #f7faff 0%, #eef4ff 100%);
}

.main-header,
.navbar {
    background: linear-gradient(90deg, var(--mylab-blue-dark), var(--mylab-blue)) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.main-header .navbar-nav > li > a,
.main-header .logo,
.main-header .navbar-brand,
.navbar a {
    color: #ffffff !important;
}

.main-header .navbar-nav > li > a:hover,
.navbar a:hover {
    color: #e4efff !important;
}

.side-bar {
    background: #ffffff !important;
    border-right: 1px solid var(--mylab-border);
    box-shadow: 0 10px 30px rgba(15, 93, 207, 0.08);
}

.mylab-brand {
    background: linear-gradient(90deg, #ffffff 0%, #f2f7ff 100%);
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.mylab-brand-logo {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid var(--mylab-blue-soft);
    box-shadow: 0 8px 16px rgba(15, 93, 207, 0.14);
}

.mylab-brand-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mylab-blue-dark);
    letter-spacing: 0.3px;
}

.mylab-brand-subtitle {
    font-size: 12px;
    color: #4c5b78;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#side-bar {
    background: #ffffff;
}

#side-bar > a,
#side-bar .drop_down {
    border: 1px solid transparent;
    border-radius: 10px;
}

#side-bar > a:hover,
#side-bar .drop_down:hover {
    background: var(--mylab-blue-soft) !important;
    color: var(--mylab-blue-dark) !important;
    border-color: #c8dcff;
}

#side-bar > a.tw-bg-gray-200,
#side-bar .tw-bg-gray-200 .drop_down,
#side-bar > div.tw-bg-gray-200 .drop_down {
    background: linear-gradient(90deg, #edf4ff, #e4efff) !important;
    color: var(--mylab-blue-dark) !important;
    border-color: #bfd7ff;
}

#side-bar > a > svg,
#side-bar .drop_down > svg:first-child,
#side-bar > a > i,
#side-bar .drop_down > i:first-child {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 3px;
    border-radius: 7px;
    color: var(--mylab-blue) !important;
    background: linear-gradient(160deg, #ffffff 0%, #dceaff 100%);
    border: 1px solid #c8dcff;
    box-shadow: inset 0 1px 0 #ffffff;
}

#side-bar .chiled a {
    color: #41506e;
    border-radius: 8px;
    margin-bottom: 2px;
}

#side-bar .chiled a:hover,
#side-bar .chiled a.tw-text-primary-700 {
    color: var(--mylab-blue-dark) !important;
    background: #eef5ff;
}

.box,
.small-box,
.info-box,
.widget-user,
.modal-content,
.tw-bg-white {
    border-radius: 14px !important;
    border: 1px solid var(--mylab-border) !important;
    box-shadow: 0 8px 24px rgba(9, 61, 150, 0.06) !important;
}

.content-header h1,
.box-title,
.page-title {
    color: #173a76;
    font-weight: 700;
}

.box.box-primary,
.box.box-info {
    border-top: 3px solid var(--mylab-blue) !important;
}

.table > thead > tr > th,
.table thead th {
    background: #f0f6ff;
    color: #173a76;
    border-bottom: 1px solid #caddff !important;
}

.table-hover > tbody > tr:hover,
.table tbody tr:hover {
    background: #f6faff;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: #d6e6ff !important;
}

.btn-primary,
.btn-info,
.btn-success,
.tw-dw-btn,
.tw-bg-primary-800 {
    background: linear-gradient(90deg, var(--mylab-blue-dark), var(--mylab-blue-mid)) !important;
    border-color: var(--mylab-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover,
.tw-dw-btn:hover {
    filter: brightness(1.06);
}

.btn-default,
.btn-light {
    background: #fff !important;
    border-color: #c7dcff !important;
    color: var(--mylab-blue-dark) !important;
    border-radius: 10px !important;
}

.nav-tabs-custom,
.nav-tabs-custom > .nav-tabs {
    background: #fff;
    border-color: var(--mylab-border) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--mylab-blue) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--mylab-blue-dark) !important;
    font-weight: 600;
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.input-group .form-control {
    border-color: #caddff !important;
    border-radius: 10px !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mylab-blue) !important;
    box-shadow: 0 0 0 3px rgba(15, 93, 207, 0.12) !important;
}

.input-group-addon {
    background: #f0f6ff;
    border-color: #caddff !important;
    color: var(--mylab-blue-dark);
}

.label-primary,
.badge-primary {
    background: var(--mylab-blue) !important;
}

.box-header,
.box-footer,
.panel,
.panel-heading,
.panel-footer,
.well {
    border-color: var(--mylab-border) !important;
}

.box-header.with-border,
.panel-heading,
.modal-header {
    background: #f3f8ff !important;
    color: #12336e !important;
}

.modal-header,
.modal-footer {
    border-color: #d6e6ff !important;
}

.modal-title,
.panel-title {
    color: #12336e !important;
    font-weight: 700;
}

.small-box,
.info-box {
    overflow: hidden;
}

.small-box .icon,
.info-box .info-box-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}

.small-box .small-box-footer,
.info-box .progress .progress-bar,
.info-box .progress {
    background: rgba(255, 255, 255, 0.22) !important;
}

.bg-aqua,
.bg-light-blue,
.bg-blue,
.bg-primary,
.label-info,
.badge-info,
.callout.callout-info {
    background: linear-gradient(120deg, #0a3f91, #2b7ae8) !important;
    color: #fff !important;
}

.bg-green,
.bg-olive,
.label-success,
.badge-success,
.callout.callout-success {
    background: linear-gradient(120deg, #0f5dcf, #3a8fff) !important;
    color: #fff !important;
}

.bg-yellow,
.bg-orange,
.label-warning,
.badge-warning,
.callout.callout-warning {
    background: linear-gradient(120deg, #4d8ff0, #89b9ff) !important;
    color: #fff !important;
}

.bg-red,
.bg-maroon,
.bg-red-active,
.label-danger,
.badge-danger,
.callout.callout-danger {
    background: linear-gradient(120deg, #1f64cc, #6ca4ff) !important;
    color: #fff !important;
}

.progress,
.progress-bar,
.progress-bar-success,
.progress-bar-info,
.progress-bar-warning,
.progress-bar-danger {
    background-image: none !important;
}

.progress {
    background-color: #deebff !important;
}

.progress-bar,
.progress-bar-success,
.progress-bar-info,
.progress-bar-warning,
.progress-bar-danger {
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
}

table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #1f417e !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #caddff !important;
    border-radius: 8px !important;
    background: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #c7dcff !important;
    color: #0a3f91 !important;
    background: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border-color: #0f5dcf !important;
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
}

.dt-buttons .btn,
.dt-buttons a.btn,
.buttons-copy,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print,
.buttons-collection {
    border-radius: 9px !important;
    border: 1px solid #c7dcff !important;
    color: #0a3f91 !important;
    background: #fff !important;
}

.dt-buttons .btn:hover,
.dt-buttons a.btn:hover {
    background: #edf5ff !important;
    color: #0a3f91 !important;
}

.daterangepicker,
.daterangepicker .calendar-table,
.daterangepicker td,
.daterangepicker th {
    border-color: #d6e6ff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
    color: #fff !important;
}

.fc-unthemed .fc-toolbar,
.fc-toolbar h2,
.fc-unthemed .fc-today {
    color: #153c78;
}

.fc button,
.fc .fc-button,
.fc-state-default {
    border-radius: 8px !important;
    border: 1px solid #c7dcff !important;
    color: #0a3f91 !important;
    background: #fff !important;
}

.fc-state-active,
.fc-state-down,
.fc-state-hover {
    color: #fff !important;
    border-color: #0f5dcf !important;
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
}

.charts,
.highcharts-container,
.highcharts-root,
.highcharts-background,
.highcharts-plot-background,
.chart,
.chart-container,
.chartjs-render-monitor,
canvas {
    border-color: #d9e7ff;
}

.charts {
    border-radius: 14px !important;
    border: 1px solid #d9e7ff !important;
    background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
    box-shadow: 0 8px 24px rgba(9, 61, 150, 0.05) !important;
}

.highcharts-title,
.highcharts-axis-title,
.highcharts-axis-labels text,
.highcharts-legend-item text,
.highcharts-data-label text,
.highcharts-subtitle,
.highcharts-caption,
.highcharts-tooltip text {
    fill: #22457f !important;
}

.highcharts-grid-line,
.highcharts-minor-grid-line {
    stroke: #d9e7ff !important;
}

.highcharts-axis-line,
.highcharts-tick,
.highcharts-minor-tick {
    stroke: #bcd5fb !important;
}

.highcharts-tooltip-box {
    fill: #ffffff !important;
    stroke: #c7dcff !important;
}

.content.no-print .tw-shadow-\[rgba\(17,_17,_26,_0\.1\)_0px_0px_16px\],
.content.no-print .box.box-solid,
.content.no-print .box-body {
    border-color: #d9e7ff !important;
}

#add_pos_sell_form .input-group .btn,
#edit_pos_sell_form .input-group .btn,
.content.no-print .pos_add_quick_product,
.content.no-print .add_new_customer,
.content.no-print #weighing_scale_btn {
    border: 1px solid #c7dcff !important;
    background: #ffffff !important;
    color: #0a3f91 !important;
    border-radius: 9px !important;
}

#add_pos_sell_form .input-group .btn:hover,
#edit_pos_sell_form .input-group .btn:hover,
.content.no-print .pos_add_quick_product:hover,
.content.no-print .add_new_customer:hover,
.content.no-print #weighing_scale_btn:hover {
    background: #edf5ff !important;
    border-color: #9ec1ff !important;
}

#search_product {
    height: 44px;
    font-size: 15px;
}

.pos_product_div {
    margin-top: 6px;
}

#pos_table {
    border: 1px solid #d6e6ff !important;
    border-radius: 12px !important;
    overflow: hidden;
}

#pos_table thead th {
    background: linear-gradient(90deg, #eef5ff, #f6faff) !important;
    color: #173a76 !important;
    border-bottom: 1px solid #cfe1ff !important;
    font-weight: 700;
}

#pos_table tbody tr:nth-child(even) {
    background: #fbfdff;
}

#pos_table tbody tr:hover {
    background: #eef5ff !important;
}

#pos_table td,
#pos_table th {
    border-color: #d9e7ff !important;
    vertical-align: middle !important;
}

.pos_form_totals {
    margin-top: 10px;
}

.pos_form_totals .table {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid #d9e7ff;
    border-radius: 12px;
    overflow: hidden;
}

.pos_form_totals .table td {
    border-top-color: #e2eeff !important;
    color: #173a76;
}

.pos_form_totals .cursor-pointer {
    color: #0f5dcf !important;
}

.pos-form-actions {
    border: 1px solid #d8e7ff;
    background: linear-gradient(180deg, #ffffff, #f5faff) !important;
    box-shadow: 0 -2px 18px rgba(9, 61, 150, 0.08) !important;
}

.pos-form-actions .tw-bg-\[\#001F3E\],
.pos-form-actions #pos-finalize {
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
    color: #ffffff !important;
    border: 1px solid #0f5dcf !important;
}

.pos-form-actions .tw-bg-\[rgb\(40\,183\,123\)\],
.pos-form-actions .pos-express-finalize[data-pay_method="cash"] {
    background: linear-gradient(90deg, #0f5dcf, #57a0ff) !important;
    color: #ffffff !important;
    border: 1px solid #2b7ae8 !important;
}

.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete,
.pos-form-actions .tw-bg-red-600 {
    background: linear-gradient(90deg, #306fcf, #6ca4ff) !important;
    color: #ffffff !important;
    border: 1px solid #2b7ae8 !important;
}

.pos-form-actions .tw-pos-total,
.pos-form-actions .pos-total {
    background: #edf5ff;
    border: 1px solid #cfe1ff;
    border-radius: 12px;
    padding: 8px 14px;
}

.pos-form-actions #total_payable {
    color: #0a3f91 !important;
    text-shadow: 0 1px 0 #ffffff;
}

#product_list_body .tw-dw-card,
#product_list_body .product_box,
#product_list_body .eq-height-row > div {
    border: 1px solid #d8e7ff !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
    box-shadow: 0 6px 16px rgba(9, 61, 150, 0.07) !important;
}

#product_list_body .tw-dw-card:hover,
#product_list_body .product_box:hover,
#product_list_body .eq-height-row > div:hover {
    border-color: #a9c9ff !important;
    box-shadow: 0 10px 20px rgba(15, 93, 207, 0.14) !important;
    transform: translateY(-1px);
}

#product_category_div label[for="my-drawer-4"],
#product_brand_div label[for="my-drawer-brand"],
#feature_product_div .btn {
    background: linear-gradient(90deg, #0a3f91, #2b7ae8) !important;
    border: 1px solid #0f5dcf !important;
    color: #fff !important;
}

.close-side-bar-category,
.close-side-bar-brand {
    border-radius: 9999px !important;
}

body.lockscreen,
body.lockscreen .content-wrapper,
body.lockscreen main,
body.lockscreen #scrollable-container,
body.lockscreen .tw-bg-gray-100,
body.lockscreen .tw-h-full.tw-bg-white {
    background: #f7faff !important;
    background-image: none !important;
}

.quick_add_product_modal .modal-content,
.register_details_modal .modal-content,
.close_register_modal .modal-content,
.recent_transactions_modal .modal-content {
    border: 1px solid #d9e7ff !important;
    border-radius: 14px !important;
}

@media (max-width: 1024px) {
    .mylab-brand {
        min-height: 64px;
    }

    .mylab-brand-logo {
        width: 46px;
        height: 46px;
    }

    .mylab-brand-subtitle {
        max-width: 120px;
    }

    .content.no-print {
        padding-left: 6px;
        padding-right: 6px;
    }

    #add_pos_sell_form .row.mb-12,
    #edit_pos_sell_form .row.mb-12 {
        margin-bottom: 8px !important;
    }

    #search_product,
    #customer_id {
        height: 40px;
        font-size: 14px;
    }

    #pos_table thead th,
    #pos_table td {
        padding: 8px 6px !important;
        font-size: 13px;
    }

    .pos_form_totals .table td {
        padding: 8px !important;
        font-size: 13px;
    }

    .pos-form-actions {
        border-radius: 14px !important;
    }

    .pos-form-actions > div,
    .pos-form-actions .tw-flex.tw-items-center.tw-gap-4.tw-flex-row.tw-overflow-x-auto {
        gap: 10px !important;
    }

    .pos-form-actions button,
    .pos-form-actions .tw-dw-btn,
    .pos-form-actions [id^="pos-"] {
        min-height: 40px;
        font-size: 12px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .pos-form-actions #total_payable {
        font-size: 1.25rem !important;
    }

    #product_list_body .tw-dw-card,
    #product_list_body .product_box,
    #product_list_body .eq-height-row > div {
        border-radius: 10px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .pos-form-actions .tw-w-\[8\.5rem\],
    .pos-form-actions .tw-w-\[5\.5rem\] {
        width: auto !important;
        min-width: 7.5rem;
    }

    .pos-form-actions .tw-hidden.md\:tw-flex,
    .pos-form-actions .tw-hidden.md\:tw-block {
        display: flex !important;
    }

    .pos-form-actions .md\:tw-block {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .pos-form-actions {
        border-radius: 14px 14px 0 0 !important;
    }

    .pos-form-actions .tw-w-\[8\.5rem\],
    .pos-form-actions .tw-w-\[5\.5rem\] {
        width: 100% !important;
    }
}

.dropdown-menu {
    border: 1px solid #d6e6ff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(9, 61, 150, 0.1) !important;
}

.dropdown-menu > li > a:hover {
    background: #edf4ff !important;
    color: var(--mylab-blue-dark) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--mylab-blue) !important;
    border-color: var(--mylab-blue) !important;
}