:root {
  --tp-page-bg: #f0f1f7;
  --tp-sidebar-bg: #111c43;
  --tp-sidebar-bg-2: #0b1334;
  --tp-card-border: rgba(0, 0, 0, 0.06);
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--tp-page-bg);
}

.tp-auth-body {
  background: var(--tp-page-bg);
}

.tp-auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 22px;
  border-radius: 16px;
  background: #fff;
  color: #4b5675;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.tp-auth-logo:hover,
.tp-auth-logo:focus {
  color: #4b5675;
  text-decoration: none;
}

.tp-auth-card .form-control,
.tp-auth-card .form-control-lg {
  min-height: calc(3.5rem + 2px);
}

.tp-auth-card .input-group > .btn {
  border-color: #e9edf4;
}

.tp-auth-card .btn-lg {
  min-height: calc(3.5rem + 2px);
}

.tp-auth-help {
  line-height: 1.8;
}

.tp-slide-verify .slide-verify-slider {
  position: relative;
  width: 100%;
  height: 52px;
  line-height: 52px;
  border-radius: 0.5rem;
  background: #f8f9fb;
  border: 1px solid #e9edf4;
  color: #8c9097;
  text-align: center;
  overflow: hidden;
}

.tp-slide-verify .slide-verify-slider-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 52px;
  border-radius: 0.5rem;
  background: rgba(132, 90, 223, 0.12);
}

.tp-slide-verify .slide-verify-slider-mask-item {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #845adf;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 0.25rem 0.75rem rgba(132, 90, 223, 0.28);
}

.tp-slide-verify .slide-verify-slider-text {
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.tp-slide-verify.slide-verify-success .slide-verify-slider-mask {
  background: rgba(38, 191, 148, 0.15);
}

.tp-slide-verify.slide-verify-success .slide-verify-slider-mask-item {
  background: #26bf94;
}

.tp-slide-verify.slide-verify-fail .slide-verify-slider-mask {
  background: rgba(230, 83, 60, 0.12);
}

.tp-slide-verify.slide-verify-fail .slide-verify-slider-mask-item {
  background: #e6533c;
}

.tp-page {
  min-height: 100vh;
}

.tp-switcher-hidden #switcher-canvas,
.tp-switcher-hidden .switcher-icon,
.tp-switcher-hidden .header-search,
.tp-switcher-hidden .country-selector,
.tp-switcher-hidden .header-theme-mode,
.tp-switcher-hidden .cart-dropdown,
.tp-switcher-hidden .notifications-dropdown,
.tp-switcher-hidden .header-shortcuts-dropdown,
.tp-switcher-hidden .header-fullscreen,
.tp-switcher-hidden #searchModal,
.tp-switcher-hidden #responsive-overlay,
.tp-switcher-hidden .scrollToTop,
.tp-switcher-hidden .offcanvas {
  display: none !important;
}

.tp-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.tp-header-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #845adf 0%, #6d4bc3 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.tp-header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.tp-header-brand-text strong {
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
}

.tp-header-brand-text span {
  color: #8c9097;
  font-size: 12px;
}

.tp-header-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f8f9fb;
  color: #8c9097;
  font-size: 13px;
}

.tp-header-note a {
  color: #845adf;
  font-weight: 600;
}

.tp-header-profile .dropdown-toggle::after {
  margin-left: 8px;
}

.tp-header-profile .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tp-header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(132, 90, 223, 0.14);
  color: #845adf;
}

.tp-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.tp-sidebar-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 700;
}

.tp-sidebar-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.tp-sidebar-logo-text strong {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.tp-sidebar-logo-text span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.app-sidebar {
  background: linear-gradient(180deg, var(--tp-sidebar-bg) 0%, var(--tp-sidebar-bg-2) 100%);
}

.app-sidebar .main-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-sidebar .main-menu > .slide__category {
  margin: 0.75rem 0 0.35rem;
}

.app-sidebar .main-menu > .slide__category .category-name {
  color: rgba(255, 255, 255, 0.45);
}

.app-sidebar .side-menu__item {
  border-radius: 0.5rem;
}

.app-sidebar .slide.has-sub.open > .side-menu__item,
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item.active {
  background: rgba(255, 255, 255, 0.08);
}

.app-sidebar .slide-menu {
  display: block;
}

.app-sidebar .slide-menu .side-menu__item {
  color: rgba(255, 255, 255, 0.75);
}

.app-sidebar .slide-menu .side-menu__item:hover,
.app-sidebar .slide-menu .side-menu__item.tp-menu-current {
  color: #fff;
}

.tp-page-content {
  padding-bottom: 1.5rem;
}

.content-wrapper {
  background: transparent;
}

.content,
.content.pt-0 {
  padding: 0 !important;
}

.page-header,
.page-header-breadcrumb {
  margin-bottom: 1.5rem;
}

.content-wrapper > .page-header.border-bottom-0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.content-wrapper > .page-header.border-bottom-0 .page-header-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.content-wrapper > .page-header.border-bottom-0 .page-title {
  margin: 0;
}

.content-wrapper > .page-header.border-bottom-0 .page-title h4 {
  margin: 0;
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 600;
}

.content-wrapper > .page-header.border-bottom-0 .page-title i {
  display: none;
}

.tp-breadcrumb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tp-breadcrumb-header h1,
.tp-breadcrumb-header .page-title,
.tp-breadcrumb-header h4 {
  margin: 0;
  font-weight: 600;
}

.tp-breadcrumb-header .breadcrumb {
  margin-bottom: 0;
}

.page-header.border-bottom-0 {
  border-bottom: 0 !important;
}

.card {
  border: 1px solid var(--tp-card-border);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}

.card.custom-card,
.tp-page .card {
  border-radius: 0.75rem;
}

.card-header {
  background: #fff;
}

.tp-page .card-title {
  color: #111827 !important;
}

.tp-page .table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(132, 90, 223, 0.12);
  border-radius: 0.75rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 90, 223, 0.35) transparent;
}

.tp-page .table-responsive::-webkit-scrollbar {
  height: 8px;
}

.tp-page .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(132, 90, 223, 0.35);
  border-radius: 999px;
}

.tp-page .table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.tp-page .table {
  width: 100%;
  margin-bottom: 0;
  color: #374151;
  vertical-align: middle;
}

.tp-page .table.text-nowrap,
.tp-page .table-responsive > .table {
  min-width: max-content;
}

.tp-page .table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-color: rgba(132, 90, 223, 0.1);
}

.tp-page .table thead th {
  white-space: nowrap;
  color: #4b5675;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f8f9fb !important;
  border-bottom-width: 1px;
}

.tp-page .table tbody tr {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-page .table.table-hover tbody tr:hover,
.tp-page .table tbody tr:hover {
  background: rgba(132, 90, 223, 0.04);
}

.tp-page .table.table-striped tbody tr:nth-of-type(odd),
.tp-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(132, 90, 223, 0.025);
}

.tp-page .table-bordered > :not(caption) > * {
  border-width: 0;
}

.tp-page .table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0;
}

.tp-page .table tbody tr:last-child > * {
  border-bottom-width: 0;
}

.tp-page .table td .btn,
.tp-page .table th .btn {
  white-space: nowrap;
}

.tp-page .table td .badge,
.tp-page .table th .badge {
  white-space: nowrap;
}

.tp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tp-stat-card {
  height: 100%;
}

.tp-stat-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tp-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.tp-ecom-card {
  border: 0;
  box-shadow: 0 0.125rem 0.75rem rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tp-ecom-card:hover {
  box-shadow: 0 0.375rem 1.25rem rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.tp-ecom-card .card-body {
  padding: 1.5rem 1.25rem;
}

.tp-ecom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
}

.tp-ecom-icon i {
  font-size: 1.5rem;
}

.tp-home-panel-card {
  border: 0;
  box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tp-home-panel-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.tp-home-panel-card .card-header {
  padding: 1.1rem 1.25rem 0;
}

.tp-home-balance-block {
  background: rgba(132, 90, 223, 0.05);
  border: 1px solid rgba(132, 90, 223, 0.1);
}

.tp-home-balance-block code {
  background: rgba(132, 90, 223, 0.08);
  color: #845adf;
  font-size: 12px;
}

.tp-stat-meta {
  color: rgba(255, 255, 255, 0.75);
}

.tp-form-card .card-body,
.tp-table-card .card-body {
  padding: 1.25rem;
}

.tp-table-card .card-body.p-0 {
  padding: 0 !important;
}

.footer {
  display: none;
}

@media (max-width: 991.98px) {
  .tp-header-note {
    display: none;
  }

  .main-content.app-content .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tp-page .table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
    font-size: 13px;
  }
}

.toggle {
  cursor: pointer;
  margin-inline-start: 0 !important;
  flex-shrink: 0;
}

.toggle:hover {
  opacity: 0.85;
}

/* 桌面版強制顯示 sidebar（覆蓋 data-toggled="close" 初始值） */
@media (min-width: 992px) {
  html[data-toggled="close"] .app-sidebar,
  html[data-toggled="close"] aside.app-sidebar {
    display: block !important;
    transform: none !important;
    left: 0 !important;
    margin-inline-start: 0 !important;
  }
}

/* 手機側邊欄遮罩 */
#responsive-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 103;
  display: none;
  cursor: pointer;
}

#responsive-overlay.active {
  display: block;
}