/**
 * POS-PHP White Business UI
 * Final override layer for modern white interface.
 */

:root {
  --pp-bg: #f6f8fc;
  --pp-surface: #ffffff;
  --pp-border: #e5eaf3;
  --pp-text: #172033;
  --pp-muted: #667085;
  --pp-primary: #2563eb;
  --pp-success: #16a34a;
}

body,
.wrapper,
.content-wrapper,
.right-side {
  background: var(--pp-bg) !important;
  color: var(--pp-text) !important;
}

.content-wrapper::before {
  display: none !important;
}

/* White top bar */
.skin-blue .main-header .navbar {
  background: var(--pp-surface) !important;
  border-bottom: 1px solid var(--pp-border) !important;
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.04) !important;
}

.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle {
  color: #344054 !important;
}

/* White sidebar */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: var(--pp-surface) !important;
  border-right: 1px solid var(--pp-border) !important;
  box-shadow: none !important;
}

.skin-blue .main-header .logo {
  background: var(--pp-surface) !important;
  color: var(--pp-text) !important;
  border-right: 1px solid var(--pp-border) !important;
  border-bottom: 1px solid var(--pp-border) !important;
}

.skin-blue .sidebar-menu > li > a {
  color: #344054 !important;
  border-left: 3px solid transparent !important;
  margin: 0 !important;
}

.skin-blue .sidebar-menu > li.active > a {
  background: #eef4ff !important;
  color: var(--pp-primary) !important;
  border-left-color: var(--pp-primary) !important;
}

.skin-blue .sidebar-menu > li:hover > a {
  background: #f8faff !important;
  color: #1d4ed8 !important;
}

.skin-blue .sidebar-menu .treeview-menu {
  background: #fbfcff !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: #667085 !important;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--pp-primary) !important;
  background: #eef4ff !important;
}

/* Business cards */
.box {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05) !important;
}

.box-header {
  background: #fbfcff !important;
  border-bottom: 1px solid var(--pp-border) !important;
}

.box-title {
  color: #1d2939 !important;
  font-weight: 700 !important;
}

/* Forms + tables */
.form-control {
  border: 1px solid #d8e0ee !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: #8cb4ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.table > thead > tr > th {
  background: #f9fbff !important;
  color: #475467 !important;
  border-bottom: 1px solid var(--pp-border) !important;
  text-transform: none !important;
}

.table > tbody > tr > td {
  border-color: #edf1f7 !important;
}

.table-hover > tbody > tr:hover {
  background: #f7faff !important;
}

/* Buttons */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.btn-primary {
  background: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
}

.btn-success {
  background: var(--pp-success) !important;
  border-color: var(--pp-success) !important;
}

/* Footer */
.main-footer {
  background: var(--pp-surface) !important;
  border-top: 1px solid var(--pp-border) !important;
}

/* Enterprise suite visual upgrade */
.enterprise-suite-page .content-header h1 {
  font-weight: 800;
  letter-spacing: 0.1px;
}

.enterprise-suite-page .content-header h1 small {
  color: #64748b;
  font-weight: 600;
}

.enterprise-suite-page .box {
  border: 1px solid #dbe5f4 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.enterprise-suite-page .box-header {
  background: linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%) !important;
}

.enterprise-suite-page .panel {
  border: 1px solid #dbe5f4 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.enterprise-suite-page .panel:hover {
  transform: translateY(-3px);
  border-color: #93c5fd !important;
  box-shadow: 0 14px 30px rgba(30, 64, 175, 0.14);
}

.enterprise-suite-page .panel-heading {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
}

.enterprise-suite-page .panel-body {
  background: #ffffff;
}

.enterprise-suite-page .panel-body p {
  color: #475569;
  line-height: 1.55;
}

.enterprise-suite-page .btn.btn-default {
  border: 1px solid #c7d7f2 !important;
  background: #f8fbff !important;
  color: #1e3a8a !important;
  font-weight: 600 !important;
  transition: all 0.16s ease;
}

.enterprise-suite-page .btn.btn-default:hover {
  background: #1e40af !important;
  border-color: #1e40af !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(30, 64, 175, 0.22);
}

.enterprise-suite-page .callout.callout-info {
  border-left: 4px solid #2563eb !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #ecf5ff 100%) !important;
  color: #1e293b;
}

.enterprise-suite-page .table > thead > tr > th {
  background: linear-gradient(180deg, #f6faff 0%, #eff5ff 100%) !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

.enterprise-suite-page .table > tbody > tr {
  transition: background-color 0.12s ease;
}

.enterprise-suite-page .table > tbody > tr:hover {
  background: #f8fbff !important;
}

/* Global Blue/White premium refresh */
:root {
  --pp-bg: #f2f7ff;
  --pp-surface: #ffffff;
  --pp-border: #dbe7fb;
  --pp-text: #0f172a;
  --pp-muted: #64748b;
  --pp-primary: #2563eb;
}

body,
.wrapper,
.content-wrapper,
.right-side {
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%) !important;
}

.box {
  border: 1px solid #dbe7fb !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

.box:hover {
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12) !important;
}

.box-header {
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%) !important;
}

.btn {
  transition: all 0.18s ease !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.24) !important;
}

.btn-success:hover {
  box-shadow: 0 10px 18px rgba(22, 163, 74, 0.2) !important;
}

.table-hover > tbody > tr:hover {
  background: #edf4ff !important;
}

.skin-blue .sidebar-menu > li > a {
  border-left: 3px solid transparent !important;
  border-radius: 0 10px 10px 0;
  margin-right: 8px !important;
  transition: all 0.15s ease;
}

.skin-blue .sidebar-menu > li:hover > a {
  background: #eaf2ff !important;
  color: #1d4ed8 !important;
  border-left-color: #60a5fa !important;
}

.skin-blue .sidebar-menu > li.active > a {
  background: linear-gradient(90deg, #e8f1ff 0%, #dceaff 100%) !important;
  color: #1d4ed8 !important;
  border-left-color: #2563eb !important;
}

/* Premium light-blue footer */
.main-footer.main-footer-premium {
  background: linear-gradient(135deg, #e9f2ff 0%, #dbeafe 100%) !important;
  border-top: 1px solid #bfdbfe !important;
  box-shadow: 0 -4px 16px rgba(30, 64, 175, 0.08) !important;
}

.main-footer-premium .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.main-footer-premium .footer-left strong,
.main-footer-premium .footer-tagline {
  color: #1e3a8a !important;
}

.main-footer-premium .footer-divider {
  color: #60a5fa !important;
}

.main-footer-premium .footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 9px;
  color: #1e3a8a !important;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.16s ease;
}

.main-footer-premium .footer-link:hover {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #1d4ed8;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.26);
  transform: translateY(-1px);
}

/* Dashboard force light-blue style */
.dash-v2 .hero-card {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 55%, #93c5fd 100%) !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 20px 36px rgba(37, 99, 235, 0.18) !important;
}

.dash-v2 .hero-card h1,
.dash-v2 .hero-card .hero-greeting {
  color: #0f172a !important;
}

.dash-v2 .hero-card .btn-hero-secondary {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.dash-v2 .hero-card .today-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #1e3a8a !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
}

/* Sidebar redesign: intentionally different visual identity */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 6px 0 16px rgba(2, 6, 23, 0.18) !important;
}

.skin-blue .main-header .logo {
  background: #0f172a !important;
  color: #eff6ff !important;
  border-right: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

.skin-blue .sidebar-menu {
  padding: 10px 8px 16px;
}

.skin-blue .sidebar-menu > li {
  margin-bottom: 6px;
}

.skin-blue .sidebar-menu > li > a {
  color: #cbd5e1 !important;
  border-left: none !important;
  border-radius: 12px !important;
  margin-right: 0 !important;
  padding: 10px 12px !important;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: all 0.18s ease;
}

.skin-blue .sidebar-menu > li > a i {
  color: #93c5fd !important;
  transition: transform 0.18s ease;
}

.skin-blue .sidebar-menu > li:hover > a {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #eff6ff !important;
  border-left-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.18);
}

.skin-blue .sidebar-menu > li:hover > a i {
  transform: translateX(1px);
  color: #bfdbfe !important;
}

.skin-blue .sidebar-menu > li.active > a {
  background: #2563eb !important;
  color: #ffffff !important;
  border-left-color: transparent !important;
  box-shadow: 0 8px 14px rgba(37, 99, 235, 0.25);
}

.skin-blue .sidebar-menu > li.active > a i {
  color: #dbeafe !important;
}

.skin-blue .sidebar-menu .treeview-menu {
  background: rgba(15, 23, 42, 0.38) !important;
  border-radius: 10px;
  margin: 4px 4px 8px 6px;
  padding: 6px 6px 8px;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: #cbd5e1 !important;
  border-radius: 8px;
  padding: 8px 10px 8px 24px !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff !important;
  background: rgba(59, 130, 246, 0.25) !important;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff !important;
  background: rgba(37, 99, 235, 0.45) !important;
}

/* System-wide format lock: apply one consistent visual language */
html,
body,
.wrapper,
.content-wrapper,
.right-side,
.content {
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%) !important;
  color: #0f172a !important;
}

.content-header {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  border: 1px solid #dbe7fb !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  margin-bottom: 16px !important;
  padding: 14px 18px !important;
}

.content-header h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.content-header .breadcrumb {
  background: transparent !important;
}

/* Cards/containers */
.box,
.panel,
.small-box,
.callout,
.info-box {
  border: 1px solid #dbe7fb !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
}

.box-header,
.panel-heading {
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%) !important;
  border-bottom: 1px solid #dbe7fb !important;
}

.box-title,
.panel-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Buttons */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-default {
  background: #f8fbff !important;
  border-color: #c7d7f2 !important;
  color: #1e3a8a !important;
}

.btn-default:hover {
  background: #eaf2ff !important;
  border-color: #93c5fd !important;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
}

.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.24) !important;
}

.btn-success:hover {
  box-shadow: 0 10px 18px rgba(22, 163, 74, 0.2) !important;
}

/* Forms */
.form-control,
.input-group-addon,
select.form-control,
textarea.form-control {
  border-radius: 10px !important;
}

.form-control {
  border: 1px solid #cfe0fb !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: #8cb4ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Tables */
.table > thead > tr > th {
  background: linear-gradient(180deg, #f6faff 0%, #eff5ff 100%) !important;
  color: #1e3a8a !important;
  border-bottom: 1px solid #dbe7fb !important;
  font-weight: 700 !important;
}

.table > tbody > tr > td {
  border-color: #e6eefb !important;
}

.table-hover > tbody > tr:hover {
  background: #edf4ff !important;
}

/* Modals */
.modal-content {
  border-radius: 14px !important;
  border: 1px solid #dbe7fb !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
}

.modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 65%, #2563eb 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.modal-header .close {
  color: #fff !important;
  opacity: 0.95 !important;
}

/* Alerts/callouts */
.callout.callout-info,
.alert-info {
  border-left: 4px solid #2563eb !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #ecf5ff 100%) !important;
  color: #1e293b !important;
}

.alert-warning {
  border-color: #facc15 !important;
}

/* Tabs/nav pills */
.nav-tabs-custom,
.nav-tabs-custom > .nav-tabs > li.active {
  border-color: #dbe7fb !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a {
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

/* Footer globally aligned */
.main-footer,
.main-footer.main-footer-premium {
  background: linear-gradient(135deg, #e9f2ff 0%, #dbeafe 100%) !important;
  border-top: 1px solid #bfdbfe !important;
  color: #1e3a8a !important;
}

.main-footer a {
  color: #1e3a8a !important;
}

.main-footer a:hover {
  color: #1d4ed8 !important;
}

/* Professional baseline: typography + rhythm across all modules */
body {
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.content {
  padding-bottom: 20px !important;
}

.text-muted {
  color: #64748b !important;
}

/* Breadcrumbs / labels / badges */
.breadcrumb > li > a {
  color: #1e40af !important;
}

.label {
  border-radius: 999px !important;
  padding: 0.35em 0.7em !important;
  font-weight: 700 !important;
}

.label-default { background: #e2e8f0 !important; color: #334155 !important; }
.label-info { background: #dbeafe !important; color: #1e3a8a !important; }
.label-success { background: #dcfce7 !important; color: #166534 !important; }
.label-warning { background: #fef3c7 !important; color: #92400e !important; }
.label-danger { background: #fee2e2 !important; color: #991b1b !important; }

/* KPI/small boxes */
.small-box {
  border-radius: 14px !important;
  border: 1px solid #dbe7fb !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

.small-box > .inner h3 {
  font-weight: 800 !important;
}

.small-box > .small-box-footer {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* DataTables + pagination professional look */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #cfe0fb !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}

.pagination > li > a,
.pagination > li > span {
  border-color: #dbe7fb !important;
  color: #1e3a8a !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

/* Info boxes / metrics */
.info-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.info-box-icon {
  border-radius: 12px 0 0 12px !important;
}

/* Dropdowns, menus, list groups */
.dropdown-menu {
  border: 1px solid #dbe7fb !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12) !important;
}

.dropdown-menu > li > a:hover {
  background: #edf4ff !important;
  color: #1e3a8a !important;
}

.list-group-item {
  border-color: #e6eefb !important;
}

/* Tabs / pills */
.nav-pills > li > a {
  border-radius: 10px !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background: #2563eb !important;
}

/* Hover polish for interactive cards/boxes/links */
.box,
.panel,
.info-box,
.small-box,
.qa-card,
.btn,
a {
  transition: all 0.18s ease;
}

a:hover {
  text-decoration: none !important;
}

/* Keep print/document pages unaffected by app shell styles */
body.print-document-mode,
body.print-document-mode .content-wrapper {
  background: #fff !important;
}

/* License & login forms: keep typed text visible on light panels */
body.login-page {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #0f766e 100%) !important;
  color: #e2e8f0 !important;
}

body.login-page .login-box-body {
  background: #ffffff !important;
  color: #334155 !important;
}

body.login-page .login-box .form-control,
body.login-page .login-box input[type="text"],
body.login-page .login-box input[type="password"],
body.login-page .login-box input[type="email"],
body.login-page .license-key-input {
  color: #0f172a !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

body.login-page .login-box .form-control::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

body.login-page .login-box label {
  color: #334155 !important;
}

/* Retail POS sidebar — grouped sections, modern nav */
.pos-sidebar .sidebar-menu > li.header {
  padding: 18px 16px 8px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
}

.pos-sidebar .sidebar-menu > li > a {
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 11px 14px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.pos-sidebar .sidebar-menu .treeview-menu > li > a {
  padding: 9px 12px 9px 36px !important;
  font-size: 13px !important;
}

.pos-sidebar .sidebar-menu .treeview-menu > li > a i {
  font-size: 11px !important;
  margin-right: 8px !important;
  opacity: 0.7;
}

.pos-sidebar .sidebar-menu > li.active > a,
.pos-sidebar .sidebar-menu > li > a:hover {
  background: rgba(37, 99, 235, 0.18) !important;
}

.pos-sidebar .sidebar-menu > li > a i.ph-bold {
  margin-right: 10px !important;
  font-size: 1.15rem !important;
  vertical-align: -2px;
}

/* Empty logo — user uploads in Settings */
.skin-blue .main-header .logo.logo-empty {
  min-width: 50px;
}
.skin-blue .main-header .logo.logo-empty .logo-lg,
.skin-blue .main-header .logo.logo-empty .logo-mini {
  display: block !important;
  min-height: 50px;
}
.login-logo-empty {
  min-height: 60px;
  margin-bottom: 8px;
}
.login-logo-placeholder {
  display: inline-block;
  width: 120px;
  height: 48px;
}
.login-logo-img {
  max-width: 180px;
  max-height: 72px;
  object-fit: contain;
}
.login-logo-img--header {
  display: block;
  margin: 0 auto 12px;
  max-height: 56px;
}

.pos-sidebar .sidebar-menu .treeview.menu-open > .treeview-menu,
.pos-sidebar .sidebar-menu .treeview.active > .treeview-menu {
  display: block !important;
}

.pos-sidebar .sidebar-menu .treeview:not(.menu-open):not(.active) > .treeview-menu {
  display: none !important;
}