/* KIYOPOS official tenant-panel palette. Loaded last to unify legacy theme layers. */
:root {
    --color-primary: #0E253B;
    --color-secondary: #119B86;
    --color-accent: #00D294;
    --color-background: #F5F7FA;

    /* Compatibility aliases used by existing tenant components. */
    --ui-ink: var(--color-primary);
    --ui-canvas: var(--color-background);
    --ui-accent: var(--color-secondary);
    --retail-orange: var(--color-secondary);
    --retail-orange-dark: var(--color-primary);
    --retail-navy: var(--color-primary);
    --retail-tint: #eaf8f5;
    --bs-primary: #0E253B;
    --bs-primary-rgb: 14, 37, 59;
    --bs-success: #00D294;
    --bs-success-rgb: 0, 210, 148;
}

body,
.desktop-workspace,
.desktop-workspace .content-wrapper,
.auth-page {
    background-color: var(--color-background);
    color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.metric .value,
.dashboard-workspace .metric .value {
    color: var(--color-primary);
}

a { color: var(--color-secondary); }
a:hover { color: var(--color-primary); }

/* Brand and application chrome */
.navbar,
.navbar .navbar-menu-wrapper,
.navbar .navbar-brand-wrapper {
    background: #fff !important;
}

.navbar {
    border-bottom: 1px solid #dfe8ec;
    box-shadow: 0 2px 12px rgba(14, 37, 59, .06);
}

.navbar .app-brand,
.brand-name,
.auth-card .brand-name {
    color: var(--color-primary) !important;
}

.brand-symbol,
.user-avatar {
    background: linear-gradient(145deg, var(--color-accent), var(--color-secondary)) !important;
    color: var(--color-primary) !important;
}

.brand-symbol.brand-symbol--logo {
    width: clamp(116px, 12vw, 160px) !important;
    height: 44px !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden;
}
.brand-symbol.brand-symbol--logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.app-sidebar,
.sidebar {
    background: var(--color-primary) !important;
    border-right: 0;
}

.sidebar .nav .nav-item .nav-link,
.sidebar .nav .nav-item .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link i.menu-icon,
.sidebar .nav .nav-item .nav-link i.menu-arrow {
    color: #e7f0f4;
}

.sidebar .app-nav-category {
    color: #8ca6b7;
}

.sidebar .nav .nav-item:not(.active) > .nav-link:hover {
    background: rgba(255, 255, 255, .07);
}

.sidebar .nav .nav-item:not(.active) > .nav-link:hover .menu-title,
.sidebar .nav .nav-item:not(.active) > .nav-link:hover i {
    color: #fff;
}

.sidebar .nav .nav-item.active {
    background: transparent;
}

.sidebar .nav .nav-item.active > .nav-link {
    background: var(--color-secondary);
    box-shadow: 0 7px 18px rgba(17, 155, 134, .3);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i {
    color: #fff;
}

/* Stable hover/active state; overrides earlier theme layers. */
.desktop-workspace .app-sidebar .nav .nav-item > .nav-link{border-radius:9px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.desktop-workspace .app-sidebar .nav .nav-item:not(.active) > .nav-link:hover,.desktop-workspace .app-sidebar .nav .nav-item:not(.active) > .nav-link:focus-visible{background:rgba(255,255,255,.09)!important;color:#fff!important}
.desktop-workspace .app-sidebar .nav .nav-item:not(.active) > .nav-link:hover *,.desktop-workspace .app-sidebar .nav .nav-item:not(.active) > .nav-link:focus-visible *{color:#fff!important}
.desktop-workspace .app-sidebar .nav .nav-item.active,.desktop-workspace .app-sidebar .nav .nav-item.active:hover{background:transparent!important}
.desktop-workspace .app-sidebar .nav .nav-item.active > .nav-link,.desktop-workspace .app-sidebar .nav .nav-item.active > .nav-link:hover{background:var(--color-secondary)!important;color:#fff!important}
.desktop-workspace .app-sidebar .nav .nav-item.active > .nav-link *{color:#fff!important}

/* Never let a legacy nav-item hover background create a white row behind a
   white icon (most visible on Barcode Labels in the narrow sidebar). */
.desktop-workspace .app-sidebar .nav .nav-item:not(.active),
.desktop-workspace .app-sidebar .nav .nav-item:not(.active):hover {
    background: transparent !important;
    background-image: none !important;
}

/* Shared responsive safety net for tenant screens. Individual modules retain
   their own layouts while common controls stay visible and reachable. */
@media (max-width: 991px) {
    .desktop-workspace .app-sidebar{width:min(88vw,280px)!important;max-width:280px;overflow-y:auto;overflow-x:hidden}
    .desktop-workspace .app-sidebar .nav{width:100%;padding-bottom:max(24px,env(safe-area-inset-bottom))}
    .desktop-workspace .app-sidebar .nav-item,.desktop-workspace .app-sidebar .nav-link{width:100%;min-width:0}
    .desktop-workspace .content-wrapper{min-width:0;overflow-x:hidden}
    .desktop-workspace .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .desktop-workspace dialog,.desktop-workspace .modal-dialog{max-width:calc(100vw - 24px);margin-inline:auto}
}
@media (max-width: 575px) {
    .desktop-workspace .content-wrapper>.d-flex:first-child,.desktop-workspace .card-header,.desktop-workspace .modal-footer{flex-wrap:wrap;gap:10px}
    .desktop-workspace .card-header form.d-flex,.desktop-workspace form.d-flex{min-width:0;max-width:100%;flex-wrap:wrap}
    .desktop-workspace .card-header form.d-flex>.form-control,.desktop-workspace form.d-flex>.form-control{min-width:0;flex:1 1 180px}
    .desktop-workspace .nav-tabs,.desktop-workspace [role=tablist]{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
    .desktop-workspace .modal-footer>.btn,.desktop-workspace .modal-footer>form{flex:1 1 auto}
    .desktop-workspace .modal-footer>form .btn{width:100%}
}

/* Final navigation contract. Keep this at the end of the last-loaded theme so
   vendor, retail, and portal hover rules cannot compete with it. */
.desktop-workspace #sidebar.app-sidebar{
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-y:contain;
}
.desktop-workspace #sidebar.app-sidebar::-webkit-scrollbar{width:0;height:0;display:none}
.desktop-workspace #sidebar .nav>.nav-item{background:transparent!important;background-image:none!important}
.desktop-workspace #sidebar .nav>.nav-item>.nav-link{background:transparent!important;background-image:none!important;color:#e7f0f4!important;box-shadow:none!important}
.desktop-workspace #sidebar .nav>.nav-item>.nav-link .menu-title,
.desktop-workspace #sidebar .nav>.nav-item>.nav-link .menu-icon,
.desktop-workspace #sidebar .nav>.nav-item>.nav-link .menu-arrow{color:inherit!important}
.desktop-workspace #sidebar .nav>.nav-item:not(.active)>.nav-link:hover,
.desktop-workspace #sidebar .nav>.nav-item:not(.active)>.nav-link:focus-visible{background:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:none!important}
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link,
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link:hover,
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link:focus-visible{background:#119b86!important;color:#fff!important;box-shadow:0 7px 18px rgba(17,155,134,.3)!important}
.desktop-workspace #sidebar .nav>.nav-profile>.nav-link,
.desktop-workspace #sidebar .nav>.nav-profile>.nav-link:hover{background:rgba(255,255,255,.04)!important;box-shadow:none!important}
@media(max-width:991.98px){
    .desktop-workspace #sidebar.app-sidebar{top:70px;bottom:0;height:auto!important;max-height:none;width:min(88vw,280px)!important;padding-bottom:env(safe-area-inset-bottom)}
    .desktop-workspace #sidebar.app-sidebar.active{left:0!important;right:auto!important}
    .desktop-workspace .sidebar-backdrop:not([hidden]){inset:70px 0 0!important}
}

/* Navigation palette from the supplied KiyoPOS UI: white rail, navy labels,
   and a quiet mint selected state instead of a solid teal block. */
.desktop-workspace #sidebar.app-sidebar{
    background:#fff!important;
    border-right:1px solid #e0e9f2!important;
    box-shadow:5px 0 18px rgba(16,41,68,.08)!important;
}
.desktop-workspace #sidebar .app-nav-category{color:#71839e!important}
.desktop-workspace #sidebar .nav>.nav-item>.nav-link{color:#3b526d!important}
.desktop-workspace #sidebar .nav>.nav-item:not(.active)>.nav-link:hover,
.desktop-workspace #sidebar .nav>.nav-item:not(.active)>.nav-link:focus-visible{
    background:#f1f8f7!important;
    color:#007d6e!important;
}
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link,
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link:hover,
.desktop-workspace #sidebar .nav>.nav-item.active>.nav-link:focus-visible{
    background:#e8f7f5!important;
    color:#007d6e!important;
    box-shadow:none!important;
}
.desktop-workspace #sidebar .nav>.nav-profile>.nav-link,
.desktop-workspace #sidebar .nav>.nav-profile>.nav-link:hover{
    background:#f0f7fa!important;
    color:#102944!important;
}
.desktop-workspace #sidebar .nav-profile-text,
.desktop-workspace #sidebar .nav-profile-text .text-secondary{color:#526477!important}

.sidebar .nav .nav-item.nav-profile .nav-link {
    background: rgba(255, 255, 255, .04);
}

.sidebar .nav-profile-text,
.sidebar .nav-profile-text .text-secondary {
    color: #d6e3e9 !important;
}

.sidebar-backdrop:not([hidden]) {
    background: rgba(14, 37, 59, .58) !important;
}

/* Actions */
.btn-primary,
.btn-gradient-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-gradient-primary:hover,
.btn-gradient-primary:focus {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    background: #fff;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

.btn-success {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.btn-success:hover,
.btn-success:focus {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

.btn:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(0, 210, 148, .48);
    outline-offset: 3px;
}

/* Inputs and selection controls */
.desktop-workspace .form-control:focus,
.desktop-workspace select.form-select:focus,
.form-control:focus,
select.form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(0, 210, 148, .16);
}

.form-check-input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.form-check-input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(0, 210, 148, .16);
}

.info-tooltip:hover,
.info-tooltip:focus-visible {
    color: var(--color-secondary);
}

.ui-help-tooltip {
    background: var(--color-primary);
}

/* Cards, tables, tabs, and dashboard components */
.desktop-workspace .card {
    border-color: #dfe8ec;
    box-shadow: 0 1px 2px rgba(14, 37, 59, .035);
}

.desktop-workspace .card-header,
.card-header {
    background: #fbfdfd;
    border-bottom-color: #e5edef;
    color: var(--color-primary);
}

.desktop-workspace .table thead th {
    background: var(--color-background);
    color: #53687a;
}

.table tbody tr:hover {
    background: #f0faf7;
}

.dashboard-workspace .metric {
    border-top-color: var(--color-secondary);
}

.metric .icon,
.dashboard-actions-icon {
    background: #dcf8ef;
    color: var(--color-secondary);
}

.dashboard-actions {
    border-color: #bfe8dd;
}

.dashboard-actions-heading,
.dashboard-action-row:hover {
    background: #f0faf7;
}

.dashboard-actions-heading p {
    color: #37685f;
}

.dashboard-action-row,
.dashboard-action-row + .dashboard-action-row {
    border-color: #d9eee8;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.category-strip button.active,
.counter-position-control button.active {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

.nav-tabs .nav-link {
    color: #526779;
}

/* Mint is reserved for positive status and highlights. */
.alert-success,
.text-bg-success,
.status-received,
.status-open {
    background: #dcfff4 !important;
    border-color: #8ce9ce !important;
    color: #075f50 !important;
}

.status-dot {
    background: var(--color-accent);
}

.progress-bar,
.calculator-keys .calculator-equals {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.pagination .page-link {
    color: var(--color-secondary);
}

.pagination .active > .page-link,
.pagination .page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.desktop-workspace .footer {
    background: #fff !important;
    border-color: #dfe8ec;
}

::selection {
    background: rgba(0, 210, 148, .3);
    color: var(--color-primary);
}

/* Responsive and cross-browser hardening for the tenant workspace. */
html { min-width: 320px; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
.container-scroller, .page-body-wrapper, .app-main, .content-wrapper, .row > *, .card, .card-body { min-width: 0; }
.table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.desktop-workspace .card > .table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.modal { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.modal-dialog { max-width: calc(100% - 24px); }
.btn, button, .form-control, .form-select { touch-action: manipulation; }

@media (max-width: 991.98px) {
    .app-sidebar { width: min(86vw, 280px); height: calc(100vh - 70px); height: calc(100dvh - 70px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .sidebar .nav .nav-item { padding-inline: 14px; }
    .sidebar .nav .nav-item .nav-link { min-height: 44px; padding: 11px 12px; border-radius: 9px; }
    .desktop-workspace .content-wrapper { width: 100%; }
    .desktop-workspace .content-wrapper > .d-flex { min-width: 0; flex-wrap: wrap; gap: 10px !important; }
    .desktop-workspace .content-wrapper > .d-flex > div { min-width: 0; }
    .desktop-workspace .content-wrapper > .d-flex .page-title { overflow-wrap: anywhere; }
    .dropdown-menu { max-width: calc(100vw - 24px); }
}

/* Tablet and compact MacBook hardening. Page-specific layouts keep their own
   breakpoints; these rules protect shared headers, cards and action groups. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .desktop-workspace .content-wrapper { padding: 18px; }
    .desktop-workspace .content-wrapper > .d-flex { min-width: 0; flex-wrap: wrap; }
    .desktop-workspace .content-wrapper > .d-flex > * { min-width: 0; }
    .desktop-workspace .card-header,
    .desktop-workspace .card-footer { gap: 10px; flex-wrap: wrap; }
    .desktop-workspace .table-responsive { width: 100%; }
    .desktop-workspace nav[role="navigation"] > div { flex-wrap: wrap; }
    .modal-dialog-scrollable { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}

@media (max-width: 575.98px) {
    .navbar .navbar-brand-wrapper { width: 55px !important; min-width: 55px; }
    .navbar .navbar-menu-wrapper { width: calc(100% - 55px) !important; padding-left: 8px; padding-right: max(8px, env(safe-area-inset-right)); }
    .navbar .navbar-menu-wrapper > .d-flex { min-width: 0; gap: 6px !important; }
    .navbar .branch-switch { min-width: 0; }
    .navbar .branch-switch select.form-select { width: clamp(104px, 34vw, 145px); max-width: 145px; min-width: 0; }
    .navbar #navToggle, .navbar form .btn { min-width: 40px; min-height: 40px; padding: 8px 10px; }
    .desktop-workspace .content-wrapper { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    .desktop-workspace .card { border-radius: 11px; }
    .desktop-workspace .form-control, .desktop-workspace select.form-select, .auth-page .form-control { font-size: 16px; }
    .desktop-workspace textarea.form-control { min-height: 100px; }
    .desktop-workspace .btn:not(.btn-sm), .auth-page .btn { min-height: 44px; }
    .auth-page { align-items: start; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    .auth-page .auth-card { width: 100%; padding: 26px 20px; margin: auto 0; }
    .auth-page .auth-card .brand-symbol { width: 40px; height: 40px; }
    .auth-page .auth-card h1 { font-size: 22px; }
    .modal-dialog { margin: 8px auto; max-width: calc(100% - 16px); }
    .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .dashboard-actions-heading, .dashboard-action-row { align-items: flex-start; }
    .dashboard-actions-heading { flex-wrap: wrap; }
    .dashboard-actions-heading .btn { width: 100%; margin-left: 0; }
    .dashboard-action-list { grid-template-columns: minmax(0, 1fr); }
    .dashboard-action-row + .dashboard-action-row { border-left: 0; }
}

@media (max-width: 374.98px) {
    .navbar .branch-switch select.form-select { width: 104px; padding-left: 8px; padding-right: 24px; }
    .desktop-workspace .content-wrapper { padding-inline: 8px; }
    .card-body { padding: 14px; }
}

@media (hover: none) { .btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }