/* NEW SS TRADERS — Final Fresh-Install Release */
.main-sidebar .sidebar {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-bottom: 80px
}

.main-sidebar .sidebar::-webkit-scrollbar {
  width: 7px
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: #68727c;
  border-radius: 8px
}

.ss-brand-link {
  display: block;
  text-align: center;
  padding: 16px 8px 12px;
  color: #fff !important;
  text-decoration: none !important
}

.ss-brand-mark {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 7px;
  background: linear-gradient(135deg, #0d6efd, #17a2b8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 800;
  border: 3px solid rgba(255, 255, 255, .8)
}

.ss-brand-name {
  font-weight: 800;
  letter-spacing: .4px
}

.ss-brand-sub {
  color: #c8d0d8
}

.final-user-brand {
  padding: 15px;
  color: #333
}

.ss-brand-link img.ss-brand-mark {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 50%
}

.btn {
  font-weight: 600
}

.btn-warning {
  color: #212529 !important
}

.btn-info,
.btn-primary,
.btn-success,
.btn-danger,
.btn-secondary,
.btn-dark {
  color: #fff !important
}

.btn-light {
  color: #212529 !important;
  border-color: #adb5bd
}

.btn:disabled,
.btn.disabled {
  opacity: .7 !important;
  color: #fff !important
}

.btn-warning:disabled {
  color: #212529 !important
}

.small-box {
  overflow: hidden
}

.small-box .inner {
  padding-right: 62px
}

.small-box .inner h3 {
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.12;
  margin-bottom: 8px
}

.small-box .inner p {
  white-space: normal;
  line-height: 1.2;
  min-height: 2.4em
}

.small-box .icon {
  opacity: .22
}

.card-tools .btn {
  margin-left: 4px
}

.table .btn {
  margin: 1px
}

.select2-container {
  width: 100% !important
}

.select2-container--bootstrap4 .select2-selection {
  min-height: 38px
}

.product-select+.select2 {
  min-width: 240px
}

.form-control.is-invalid~.select2 .select2-selection {
  border-color: #dc3545
}

.payment-guide {
  border-left: 4px solid #17a2b8;
  background: #eef9fb;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 15px
}

.payment-guide .amount {
  font-size: 1.25rem;
  font-weight: 700
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

@media(max-width:768px) {
  .small-box .inner {
    padding-right: 48px
  }

  .small-box .inner h3 {
    font-size: 24px
  }

  .ss-brand-name {
    font-size: 13px
  }
}

/* Final usability hardening */
html,
body {
  overflow-x: hidden
}

.content-wrapper {
  min-width: 0
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.btn {
  white-space: normal;
  line-height: 1.25;
  min-height: 32px
}

.btn i {
  margin-right: .18rem
}

.btn-icon-only i {
  margin-right: 0
}

.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  color: #fff !important
}

.btn-outline-warning {
  color: #7a5b00 !important;
  border-color: #ffc107 !important
}

.btn-outline-warning:hover {
  color: #212529 !important
}

.btn-link {
  color: #0069d9 !important;
  background: transparent !important
}

.btn-link:hover {
  color: #004085 !important
}

.small-box .inner h3 {
  overflow: hidden;
  text-overflow: ellipsis
}

.kpi-full-value {
  cursor: help
}

.small-box .small-box-footer {
  color: rgba(255, 255, 255, .95) !important
}

.money-value {
  font-variant-numeric: tabular-nums
}

.text-money-positive {
  color: #218838
}

.text-money-negative {
  color: #c82333
}

.form-hint {
  font-size: .82rem;
  color: #6c757d
}

.business-summary {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px
}

.business-summary .summary-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 4px 0
}

.business-summary .summary-row strong {
  white-space: nowrap
}

.transaction-preview {
  border: 1px solid #b8daff;
  background: #eaf5ff;
  border-radius: 6px;
  padding: 12px
}

.empty-state {
  padding: 30px;
  text-align: center;
  color: #6c757d
}

.empty-state i {
  font-size: 2rem;
  margin-bottom: 8px
}

.action-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.dataTables_wrapper .btn {
  white-space: nowrap
}

.main-sidebar .brand-link,
.main-sidebar .user-panel {
  overflow: hidden
}

.nav-sidebar .nav-link p {
  white-space: normal;
  line-height: 1.2
}

.nav-sidebar>.nav-item .nav-icon {
  flex: 0 0 1.6rem
}

@media(max-width:576px) {
  .card-tools {
    float: none !important;
    margin-top: 8px
  }

  .card-tools .btn {
    margin: 2px
  }

  .action-group {
    gap: 3px
  }

  .table .btn {
    padding: .25rem .4rem
  }

  .small-box .inner h3 {
    font-size: 1.35rem !important
  }

  .small-box .inner p {
    font-size: .9rem
  }

  .content-header h1 {
    font-size: 1.45rem
  }
}

@media print {

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

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

  .card {
    box-shadow: none !important
  }
}

/* Stable desktop sidebar: use the top-bar button only. Hover never expands over content. */
@media (min-width: 992px) {
  body.sidebar-mini:not(.sidebar-collapse) .main-header {
    left: 250px !important;
    margin-left: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header {
    left: 4.6rem !important;
    margin-left: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar,
  body.sidebar-mini.sidebar-collapse .main-sidebar::before,
  body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
  body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
    width: 4.6rem !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
  body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
  body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel>.info,
  body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel>.info {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar .nav-treeview {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar .ss-brand-link {
    padding: 12px 4px !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar .ss-brand-mark {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar .ss-brand-name,
  body.sidebar-mini.sidebar-collapse .main-sidebar .ss-brand-sub {
    display: none !important;
  }
}

/* Clear business sections and keep every navigation label readable. */
.nav-sidebar>.nav-header {
  margin: 16px 12px 6px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: #aeb8c2 !important;
  font-size: 10px;
  letter-spacing: .09em;
}

.nav-sidebar>.nav-item.has-treeview,
.nav-sidebar>.nav-item:not(.has-treeview) {
  margin-bottom: 5px;
}

.nav-sidebar>.nav-item>.nav-link {
  border-radius: 4px;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.nav-treeview>.nav-item>.nav-link {
  min-height: 38px;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.nav-sidebar .nav-link p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iti,
.intl-tel-input {
  display: block !important;
  width: 100% !important;
}

.iti input.phone,
.iti input.form-control,
.intl-tel-input input.phone,
.intl-tel-input input.form-control {
  width: 100% !important;
}

/* Responsive Mobile System Polish */
@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .content-header {
    padding: 12px 10px 6px;
  }

  .content-header h1 {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }

  .content {
    padding: 0 6px 30px;
  }

  .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .card {
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 100% !important;
  }

  .card-header {
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .card-header .card-title {
    font-size: 1.05rem;
  }

  .card-header .card-tools {
    margin-left: 0 !important;
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .card-body {
    padding: 12px 14px;
  }

  .card-footer {
    padding: 10px 14px;
  }

  .modal-dialog {
    margin: 12px auto;
    max-width: calc(100% - 24px);
  }

  .form-control,
  .custom-select {
    font-size: 15px;
    min-height: 40px;
  }

  .btn {
    min-height: 38px;
  }

  .btn-sm {
    min-height: 32px;
    font-size: 0.82rem;
  }

  .table th,
  .table td {
    padding: 8px 6px;
    font-size: 0.86rem;
  }

  /* Tables & Horizontal Scroll prevention */
  .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    margin-bottom: 10px;
    border: none;
    scrollbar-width: thin !important;
    scrollbar-color: #0d6efd #f1f5f9 !important;
  }

  .table-responsive::-webkit-scrollbar {
    height: 5px !important;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: #0d6efd !important;
    border-radius: 4px !important;
  }

  .table-responsive>table:not(.recovery-table) {
    min-width: 600px;
  }

  .table-responsive>table:not(.recovery-table) th,
  .table-responsive>table:not(.recovery-table) td {
    white-space: nowrap !important;
  }

  /* Search filters & DataTables */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    float: none !important;
    width: 100% !important;
    margin-bottom: 8px;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 8px;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* Metric summary tiles & small-boxes on mobile */
  .small-box {
    margin-bottom: 12px !important;
  }

  .small-box .inner {
    padding: 10px 12px !important;
  }

  .small-box .inner h3 {
    font-size: 1.25rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  .small-box .inner p {
    font-size: 0.78rem !important;
    margin-bottom: 2px !important;
    min-height: auto !important;
  }

  .small-box .icon {
    display: none !important;
  }
}