/*
 * OneDash Compatibility Layer for BitorePOS
 * Maps legacy AdminLTE / custom classes to OneDash Bootstrap 5 layout
 * This file preserves backward compatibility so existing Blade views
 * continue to work without refactoring every page.
 */

/* ===== Legacy .box → Bootstrap 5 .card mapping ===== */
.box {
    position: relative;
    border-radius: 10px;
    background: #ffffff;
    border: 0;
    margin-bottom: 1.5rem;
    width: 100%;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.box.box-solid {
    border: 0;
}

.box.box-primary {
    border-top: 3px solid var(--bs-primary, #3461ff);
}

.box.box-success {
    border-top: 3px solid #15ca20;
}

.box.box-warning {
    border-top: 3px solid #ffc107;
}

.box.box-danger {
    border-top: 3px solid #fd3550;
}

.box.box-info {
    border-top: 3px solid #0dcaf0;
}

.box .box-header {
    color: var(--theme-primary-dark, #4c5258);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px 10px 0 0;
}

.box .box-header .box-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    line-height: 1;
}

.box .box-header .box-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.box .box-body {
    padding: 1.25rem;
    border-radius: 0 0 10px 10px;
}

.box .box-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1.25rem;
    background-color: transparent;
    border-radius: 0 0 10px 10px;
}

/* box-body used standalone (without parent .box wrapper) */
.box-body {
    padding: 1.25rem;
}

/* box-header used standalone */
.box-header {
    color: var(--theme-primary-dark, #4c5258);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.box-header.with-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.box-header .box-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    line-height: 1;
}

.box-header .box-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* box-widget variant */
.box.box-widget {
    border: 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* box-profile variant */
.box-profile {
    padding: 1.25rem;
    text-align: center;
}

/* collapsed-box toggling */
.collapsed-box .box-body,
.collapsed-box .box-footer {
    display: none;
}

/* box-group (accordion) */
.box-group .box {
    margin-bottom: 0;
    border-radius: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.box-group .box:first-child {
    border-radius: 10px 10px 0 0;
    border-top: 0;
}

.box-group .box:last-child {
    border-radius: 0 0 10px 10px;
}

/* small-box (statistics boxes) */
.small-box {
    border-radius: 10px;
    position: relative;
    display: block;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
}

.small-box>.inner {
    padding: 1.25rem;
}

.small-box>.inner>h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.small-box>.inner>p {
    font-size: 1rem;
}

.small-box>.icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 70px;
    color: rgba(0, 0, 0, 0.15);
}

.small-box>.small-box-footer {
    display: block;
    text-align: center;
    padding: 3px 0;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.small-box>.small-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15);
}

/* ===== Legacy content-wrapper ===== */
.content-wrapper {
    margin-left: 260px;
    padding-top: 70px;
    padding-bottom: 60px;
    min-height: calc(100vh - 130px);
    transition: all .2s;
}

.toggled .content-wrapper {
    margin-left: 70px;
}

.toggled .main-footer {
    margin-left: 50px;
}

/* ===== Legacy content-header ===== */
.content-header {
    padding: 15px 15px 0 15px;
}

.content-header>h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-primary-dark, #4c5258);
    line-height: 1.4;
}

.content-header>h1>small {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 400;
}

.content-header-custom {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 10px;
    margin: 0 15px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
}

/* ===== Breadcrumb ===== */
.content-header .breadcrumb {
    float: right;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.content-header .breadcrumb>li+li:before {
    content: '>';
    padding: 0 5px;
    color: #6c757d;
}

/* ===== Legacy .content section ===== */
.content {
    padding: 15px;
    min-height: 250px;
}

/* ===== Legacy section header used in many views ===== */
section.content-header {
    padding: 15px 15px 0 15px;
}

section.content-header>h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-primary-dark, #4c5258);
}

section.content {
    padding: 5px;
}

/* ===== OneDash page-breadcrumb mapping ===== */
.page-breadcrumb {
    padding: 10px 15px;
}

.breadcrumb-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-primary-dark, #4c5258);
    border-right: 1.5px solid #ccc;
    padding-right: 15px;
    margin-right: 15px;
}

/* ===== Legacy table theme ===== */
.table-th-skin thead th {
    background-color: var(--theme-primary-light, #f7f8fa);
    color: var(--theme-primary-dark, #4c5258);
    font-weight: 600;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 0, 0, 0), 0.15);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ===== Legacy btn-flat ===== */
.btn-flat {
    border-radius: 4px;
}

/* ===== Legacy .btn-modal ===== */
/* No override needed - uses JS handlers */

/* ===== Legacy .main-header mapping (non-POS) ===== */
/* Now handled by .top-header in OneDash  */

/* ===== Legacy .main-sidebar mapping ===== */
/* Now handled by .sidebar-wrapper in OneDash */

/* ===== Legacy .main-footer mapping ===== */
.main-footer {
    position: fixed !important;
    left: 30px;
    right: 0;
    bottom: 0;
    padding: 0.7rem 1rem;
    color: #484444;
    background-color: #f7f8fa;
    border-top: 1px solid #e2e3e4;
    text-align: center;
    transition: all .2s;
    z-index: 1000;
}

.toggled .main-footer {
    left: 20px;
}

/* ===== Sidebar menu legacy class compat ===== */
.sidebar-menu.tree {
    list-style: none;
    padding: 10px;
    margin-top: 60px;
}

.sidebar-menu.tree li+li {
    margin-top: 3px;
}

.sidebar-menu.tree li a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    color: #5f5f5f;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-left: 4px solid transparent;
    transition: all 0.2s ease-out;
}

.sidebar-menu.tree li a:hover,
.sidebar-menu.tree li.active>a {
    color: var(--bs-primary, #3461ff);
    background-color: #fff;
    border-left: 4px solid var(--bs-primary, #3461ff);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

.sidebar-menu.tree li a .fa,
.sidebar-menu.tree li a .fas,
.sidebar-menu.tree li a .far,
.sidebar-menu.tree li a .bi {
    font-size: 16px;
    width: 30px;
    text-align: center;
}

.sidebar-menu.tree li a span {
    margin-left: 5px;
}

.sidebar-menu.tree .treeview>a .float-end-container {
    margin-left: auto;
}

.sidebar-menu.tree .treeview-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.sidebar-menu.tree .treeview.active>.treeview-menu {
    display: block;
}

.sidebar-menu.tree .treeview-menu li a {
    padding: 6px 15px 6px 45px;
    font-size: 13px;
    border-left: 0;
}

.sidebar-menu.tree .treeview-menu li a:hover {
    border-left: 0;
    color: var(--bs-primary, #3461ff);
    background-color: rgba(var(--bs-primary-rgb, 52, 97, 255), 0.05);
}

.sidebar-menu.tree li.header {
    color: #b0b0b0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 15px 5px;
    letter-spacing: 0.5px;
}

/* ===== Sidebar collapsed / toggled state (desktop only) ===== */
/* These rules must be desktop-only so mobile sidebar opens at full 260px width */
@media screen and (min-width: 1025px) {
    .toggled .sidebar-wrapper {
        width: 70px;
    }

    .toggled .sidebar-wrapper .sidebar-header .logo-text,
    .toggled .sidebar-wrapper .sidebar-header .toggle-icon {
        display: none;
    }

    .toggled .sidebar-wrapper .sidebar-header {
        width: 70px;
        justify-content: center;
    }

    .toggled .sidebar-wrapper:not(:hover) .sidebar-menu.tree li a span,
    .toggled .sidebar-wrapper:not(:hover) .sidebar-menu.tree li a .float-end-container,
    .toggled .sidebar-wrapper:not(:hover) .sidebar-menu.tree .treeview-menu,
    .toggled .sidebar-wrapper:not(:hover) .sidebar-menu.tree li.header {
        display: none;
    }

    .toggled .sidebar-wrapper:not(:hover) .sidebar-menu.tree li a {
        justify-content: center;
        padding: 10px;
    }

    .sidebar-hovered .sidebar-wrapper {
        width: 260px;
        z-index: 1050;
    }

    .sidebar-hovered .sidebar-wrapper .sidebar-header {
        width: 260px;
        z-index: 1051;
    }

    .sidebar-hovered .sidebar-wrapper .sidebar-header .logo-text,
    .sidebar-hovered .sidebar-wrapper .sidebar-header .toggle-icon {
        /* display: block; */
    }

    .toggled.sidebar-hovered .sidebar-wrapper .sidebar-header .logo-icon-div {
        margin-left: 5px;
    }
}

.content-wrapper {
    margin-top: 50px;
}

/* ===== Nav-link fix for sidebar logo ===== */
.sidebar-wrapper .logo.nav-link {
    display: block;
    text-align: center;
    padding: 10px 5px;
    color: var(--bs-primary, #3461ff);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #e2e3e4;
    margin-bottom: 5px;
}

/* ===== Scrolltop button ===== */
.scrolltop {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 999;
}

.scrolltop .scroll.icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary, #3461ff);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* ===== Print-specific ===== */
@media print {

    .no-print,
    .sidebar-wrapper,
    .top-header,
    .main-footer,
    .scrolltop {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}

/* ===== POS lockscreen layout ===== */
body.lockscreen .content-wrapper {
    margin-left: 0;
    padding-top: 0;
}

/* ===== Misc legacy helpers ===== */
.m-8 {
    margin: 8px;
}

.mr-5 {
    margin-right: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.w-60 {
    width: 60%;
}

/* ===== Override some OneDash page-content for non-POS ===== */
.page-content {
    margin-left: 260px;
    padding: 70px 0 60px 0;
    min-height: 100vh;
    transition: all .2s;
}

.toggled .page-content {
    margin-left: 70px;
}

/* ===== Info-box OneDash overrides ===== */
.info-box {
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 0;
    overflow: hidden;
}

.info-box-new-style {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
    padding: 1rem;
    min-height: 90px;
}

.info-box-new-style .info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    font-size: 28px;
    flex-shrink: 0;
}

.info-box-new-style .info-box-content {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
}

.info-box-new-style .info-box-text {
    font-size: 13px;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.info-box-new-style .info-box-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-primary-dark, #4c5258);
}

/* ===== Legacy bg color helpers ===== */
.bg-aqua {
    background-color: #00c0ef !important;
    color: #fff;
}

.bg-green {
    background-color: #15ca20 !important;
    color: #fff;
}

.bg-yellow {
    background-color: #ffc107 !important;
    color: #fff;
}

.bg-red {
    background-color: #fd3550 !important;
    color: #fff;
}

.bg-olive {
    background-color: #3d9970 !important;
    color: #fff;
}

.bg-maroon {
    background-color: #d81b60 !important;
    color: #fff;
}

.bg-orange {
    background-color: #ff851b !important;
    color: #fff;
}

.bg-purple {
    background-color: #605ca8 !important;
    color: #fff;
}

/* ===== btn-app (demo shop buttons) ===== */
.btn-app {
    border-radius: 10px;
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #ddd;
    background-color: #f7f8fa;
    color: #444;
}

.btn-app>.fa,
.btn-app>.fas,
.btn-app>.far,
.btn-app>.bi {
    font-size: 20px;
    display: block;
}

/* ===== Filters component ===== */
.card.filter-card .card-header {
    cursor: pointer;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1024px) {
    .content-wrapper {
        margin-left: 0;
    }

    .main-footer {
        left: 0;
        margin-left: 0;
    }

    .page-content {
        margin-left: 0;
    }

    .toggled .content-wrapper,
    .wrapper.toggled .content-wrapper {
        margin-left: 0;
    }

    .toggled .main-footer,
    .wrapper.toggled .main-footer {
        left: 0;
        margin-left: 0;
    }

    .content-header-custom {
        margin: 0 5px;
    }
}

/* ===== Dark theme overrides for legacy classes ===== */
html.dark-theme .box,
html.dark-theme .info-box,
html.dark-theme .info-box-new-style {
    background: #1e2029;
    color: #e4e5e6;
}

html.dark-theme .box .box-header {
    color: #e4e5e6;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .box .box-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-theme .content-header>h1,
html.dark-theme section.content-header>h1 {
    color: var(--bs-primary, #6db3f2);
}

html.dark-theme .content-header-custom {
    background: #1e2029;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

html.dark-theme .info-box-new-style .info-box-number {
    color: #e4e5e6;
}

html.dark-theme .info-box-new-style .info-box-text {
    color: #a0a4a8;
}

html.dark-theme .btn-app {
    background-color: #1e2029;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e4e5e6;
}

html.dark-theme .small-box {
    background: #1e2029;
}

html.dark-theme .table-th-skin thead th {
    background-color: #272935;
    color: #e4e5e6;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ===== Legacy label helpers ===== */
.label-success {
    background-color: #15ca20;
}

.label-warning {
    background-color: #ffc107;
    color: #000;
}

.label-danger {
    background-color: #fd3550;
}

.label-info {
    background-color: #0dcaf0;
}

.label-primary {
    background-color: var(--bs-primary, #3461ff);
}

.label-default {
    background-color: #6c757d;
}

/* ===== Legacy panel → card mapping ===== */
.panel {
    border-radius: 10px;
    background: #fff;
    border: 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.panel-heading {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px 10px 0 0;
}

.panel-body {
    padding: 1.25rem;
}

.panel-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 0 10px 10px;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.panel-default>.panel-heading {
    background-color: #f7f8fa;
}

.panel-primary>.panel-heading {
    background-color: var(--bs-primary, #3461ff);
    color: #fff;
}

/* ===== Legacy form-group spacing ===== */
.form-group {
    margin-bottom: 1rem;
}

/* ===== Legacy help-block ===== */
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #fd3550;
    font-size: 0.85rem;
}

/* ===== Select2 OneDash fixes ===== */
.select2-container--default .select2-selection--single {
    border-radius: 4px;
    border: 1px solid #ced4da;
    height: 38px;
    padding: 4px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

/* ===== Legacy nav-tabs-custom ===== */
.nav-tabs-custom {
    margin-bottom: 1.5rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
}

.nav-tabs-custom>.nav-tabs {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 0.5rem;
}

.nav-tabs-custom>.nav-tabs>li>a {
    color: #4c5258;
    border-radius: 0;
    padding: 12px 20px;
}

.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li>a.active {
    border-bottom: 2px solid var(--bs-primary, #3461ff);
    color: var(--bs-primary, #3461ff);
    font-weight: 600;
}

.nav-tabs-custom>.tab-content {
    padding: 1.25rem;
}

/* ===== Legacy eq-height ===== */
.eq-height-row {
    display: flex;
    flex-wrap: wrap;
}

.eq-height-col {
    display: flex;
    flex-direction: column;
}

/* ===== Legacy pull-left / pull-right (BS3) → float ===== */
.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

/* ===== Legacy btn-xs (removed in BS5) ===== */
.btn-xs {
    padding: 1px 5px;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 3px;
}

/* ===== Legacy col-md-offset-* (BS3) → offset-md-* ===== */
.col-md-offset-1 {
    margin-left: 8.3333%;
}

.col-md-offset-2 {
    margin-left: 16.6667%;
}

.col-md-offset-3 {
    margin-left: 25%;
}

.col-md-offset-4 {
    margin-left: 33.3333%;
}

.col-md-offset-5 {
    margin-left: 41.6667%;
}

.col-md-offset-6 {
    margin-left: 50%;
}

.col-md-offset-7 {
    margin-left: 58.3333%;
}

.col-md-offset-8 {
    margin-left: 66.6667%;
}

.col-md-offset-9 {
    margin-left: 75%;
}

.col-md-offset-10 {
    margin-left: 83.3333%;
}

.col-md-offset-11 {
    margin-left: 91.6667%;
}

/* ===== Legacy hidden-* responsive classes (BS3) ===== */
.hidden-xs {
    display: none !important;
}

@media (min-width: 576px) {
    .hidden-xs {
        display: inline !important;
    }
}

.hidden-sm {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-sm {
        display: inline !important;
    }
}

.hidden-md {
    display: none !important;
}

@media (min-width: 992px) {
    .hidden-md {
        display: inline !important;
    }
}

/* ===== Legacy .img-rounded (BS3) ===== */
.img-rounded {
    border-radius: 6px;
}

/* ===== Legacy .sr-only alias ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Module Sub-Nav Theme Color Integration ===== */
/* Make module nav bars (Truckmate, AiAssistance, etc.) respect user theme color */
section.no-print>.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary, #3461ff) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--bs-primary, #3461ff);
}

section.no-print>.navbar .navbar-nav .nav-link:hover {
    color: var(--bs-primary, #3461ff) !important;
}

section.no-print>.navbar .navbar-brand {
    color: var(--bs-primary, #3461ff) !important;
}

section.no-print>.navbar .navbar-brand:hover {
    color: var(--theme-primary-dark, #2850e0) !important;
}