/**
 * CasinoTutor CMS - Comprehensive Modern Design System
 * Based on ui-ux skill (references/tokens.css, layouts/app.md, components/*)
 * Replaces legacy AdminLTE 3 / Bootstrap 4 styles across ALL pages and features.
 */

:root {
  /* Typography */
  --app-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Surfaces & Backgrounds */
  --background: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --surface-active: #f1f5f9;
  --item-hover: #f1f5f9;

  /* Text & Foreground */
  --foreground: #0f172a;
  --foreground-light: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;

  /* Borders */
  --border: #f1f5f9;
  --border-strong: #e2e8f0;
  --border-focus: #0f172a;

  /* Brand & Accents */
  --primary: #0f172a;
  --primary-hover: #1e293b;
  --primary-foreground: #ffffff;
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --brand-light: #eef2ff;
  --brand-border: #c7d2fe;

  /* Status Colors */
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --success-text: #15803d;

  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #b45309;

  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #b91c1c;

  --info: #0284c7;
  --info-bg: #f0f9ff;
  --info-border: #bae6fd;
  --info-text: #0369a1;

  --purple: #7c3aed;
  --purple-bg: #f5f3ff;
  --purple-border: #ddd6fe;
  --purple-text: #6d28d9;

  /* Shadows */
  --elevation-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --elevation-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --elevation-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --elevation-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ========================================================
   1. GLOBAL & RESET OVERRIDES
   ======================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--app-font) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 14px;
}

::selection {
  background: #0f172a;
  color: #ffffff;
}

/* Minimal Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.wrapper,
.content-wrapper {
  background-color: var(--background) !important;
}

/* ========================================================
   2. APP SHELL: TOP HEADER NAVBAR & HORIZON LINE
   ======================================================== */
.main-header.navbar,
.app-header {
  height: 64px !important;
  min-height: 64px !important;
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 1030 !important;
  margin-left: 256px !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-collapse .main-header.navbar,
body.sidebar-collapse .app-header {
  margin-left: 64px !important;
}

@media (max-width: 991.98px) {
  .main-header.navbar,
  .app-header {
    margin-left: 0 !important;
    padding: 0 1rem !important;
  }
}

.app-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-pushmenu {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-lg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.btn-pushmenu:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-portal-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-lg) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.app-portal-link:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-nav-divider {
  width: 1px !important;
  height: 20px !important;
  background-color: var(--border-strong) !important;
  margin: 0 8px !important;
}

.app-quick-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-lg) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.app-quick-link:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-quick-link.active {
  background-color: var(--surface-active) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.app-count-pill {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background-color: #fef3c7 !important;
  color: #92400e !important;
  line-height: 1 !important;
}

.app-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.app-header-search-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-header-search-hint:hover {
  border-color: #cbd5e1;
  background: var(--surface);
  color: var(--foreground);
}

.app-kbd {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.app-status-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--background);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
}

.app-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.app-header-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.15s ease !important;
}

.app-header-user-btn:hover {
  background-color: var(--item-hover) !important;
}

.user-avatar-container {
  width: 32px;
  height: 32px;
  display: inline-block;
  flex-shrink: 0;
}

.user-avatar-container .user-image {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border-strong) !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.user-online-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid #ffffff;
  z-index: 2;
}

.app-dropdown-panel {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--elevation-popover) !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-width: 250px !important;
  margin-top: 8px !important;
  animation: fadeInDown 0.15s ease-out;
}

/* Header Notification Bell */
.app-header-icon-btn {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-lg) !important;
  position: relative !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.app-header-icon-btn:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-notify-badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 9999px !important;
  background-color: var(--danger) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--surface) !important;
}

.app-notify-menu {
  min-width: 320px !important;
  padding: 0 !important;
}

.app-notify-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
}

.app-notify-list {
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}

.app-notify-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--foreground) !important;
  transition: background-color 0.12s ease !important;
  text-decoration: none !important;
}

.app-notify-item:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-notify-item-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-md) !important;
  background-color: #fef3c7 !important;
  color: #92400e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.app-notify-item-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.app-notify-item-title {
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-notify-item-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-menu .user-header {
  height: auto !important;
  padding: 20px 16px !important;
  background-color: var(--surface) !important;
  color: var(--foreground) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  text-align: center !important;
}

.user-menu .user-header img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 2px solid var(--border-strong) !important;
  margin-bottom: 10px !important;
}

.user-menu .user-footer {
  background-color: var(--background) !important;
  padding: 12px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ========================================================
   3. APP SHELL: SIDEBAR & PINNED FOOTER (LIGHT MODERN)
   ======================================================== */
.main-sidebar,
.app-sidebar {
  background-color: var(--surface) !important;
  border-right: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
  width: 256px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 1038 !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-collapse .main-sidebar,
body.sidebar-collapse .app-sidebar {
  width: 64px !important;
}

/* Horizon Brand Header */
.app-brand-header {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  line-height: 64px !important;
  padding: 0 16px !important;
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
}

.app-brand-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--foreground) !important;
  width: 100% !important;
  overflow: hidden !important;
}

.app-brand-link:hover {
  color: var(--foreground) !important;
}

.app-brand-header .brand-image {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-md) !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.app-brand-header .brand-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.15s ease !important;
}

.app-badge-cms {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
  background: var(--background) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border-strong) !important;
  letter-spacing: 0.05em !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

body.sidebar-collapse .app-brand-header .brand-title,
body.sidebar-collapse .app-badge-cms {
  display: none !important;
}

/* Sidebar Search */
.app-sidebar-search {
  padding: 12px 14px 6px 14px !important;
  flex-shrink: 0 !important;
}

body.sidebar-collapse .app-sidebar-search {
  display: none !important;
}

.app-search-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.app-search-icon {
  position: absolute !important;
  left: 11px !important;
  font-size: 12px !important;
  color: var(--muted-light) !important;
  pointer-events: none !important;
}

.app-search-input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 28px 0 32px !important;
  font-size: 13px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-strong) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  transition: all 0.15s ease !important;
}

.app-search-input:focus {
  background-color: var(--surface) !important;
  border-color: var(--foreground) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--foreground) !important;
}

.app-search-kbd {
  position: absolute !important;
  right: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  pointer-events: none !important;
}

/* Scrollable Nav Area */
.app-sidebar-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
}

.app-nav-header {
  padding: 16px 12px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--muted) !important;
  background: transparent !important;
}

body.sidebar-collapse .app-nav-header {
  display: none !important;
}

.app-nav-item {
  margin-bottom: 2px !important;
}

.app-nav-link {
  height: 40px !important;
  border-radius: var(--radius-lg) !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  transition: all 0.15s ease-in-out !important;
}

.app-nav-link:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-nav-link.active {
  background-color: #f1f5f9 !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.app-nav-icon {
  width: 18px !important;
  font-size: 14px !important;
  text-align: center !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-nav-link:hover .app-nav-icon,
.app-nav-link.active .app-nav-icon {
  color: var(--foreground) !important;
}

.app-nav-text {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-nav-arrow {
  margin-left: auto !important;
  font-size: 10px !important;
  color: var(--muted-light) !important;
  transition: transform 0.2s ease !important;
}

.menu-open > .app-nav-link .app-nav-arrow {
  transform: rotate(180deg) !important;
}

.app-nav-treeview {
  padding-left: 14px !important;
  margin: 2px 0 4px !important;
}

.app-sub-link {
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.app-sub-link:hover {
  color: var(--foreground) !important;
  background-color: var(--item-hover) !important;
}

.app-sub-link.active {
  color: var(--foreground) !important;
  font-weight: 600 !important;
  background-color: #f1f5f9 !important;
}

.app-sub-icon {
  font-size: 12px !important;
  width: 16px !important;
  text-align: center !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

.app-sub-text {
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-nav-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important;
  background-color: #fef3c7 !important;
  color: #92400e !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Pinned Sidebar Footer (Chân sidebar) */
.app-sidebar-footer {
  margin-top: auto !important;
  padding: 10px 12px !important;
  border-top: 1px solid var(--border-strong) !important;
  background-color: var(--surface) !important;
  flex-shrink: 0 !important;
}

.app-user-card-btn {
  width: 100% !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-lg) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  text-align: left !important;
  outline: none !important;
}

.app-user-card-btn:hover {
  background-color: var(--item-hover) !important;
}

.app-user-avatar-wrap {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

.app-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid var(--border-strong) !important;
}

.app-user-online-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #22c55e !important;
  border: 1.5px solid #ffffff !important;
}

.app-user-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.app-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.app-user-role {
  font-size: 11px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-user-chevrons {
  font-size: 12px !important;
  color: var(--muted-light) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

body.sidebar-collapse .app-user-meta,
body.sidebar-collapse .app-user-chevrons {
  display: none !important;
}

body.sidebar-collapse .app-user-card-btn {
  justify-content: center !important;
  padding: 0 !important;
}

.app-user-dropdown-menu {
  width: 232px !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--elevation-popover) !important;
  padding: 6px !important;
  margin-bottom: 8px !important;
  animation: fadeInUp 0.15s ease-out !important;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-dropdown-header {
  padding: 10px 12px 8px !important;
}

.app-dropdown-email {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-dropdown-sub {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

.app-dropdown-item {
  height: 38px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  transition: all 0.12s ease !important;
}

.app-dropdown-item:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-dropdown-logout {
  color: var(--danger) !important;
}

.app-dropdown-logout:hover {
  background-color: var(--danger-bg) !important;
  color: var(--danger-text) !important;
}

/* ========================================================
   4. CONTENT SHELL: HEADER, MAIN WRAPPER & FOOTER
   ======================================================== */
.content-wrapper,
.app-content-wrapper {
  background-color: var(--background) !important;
  margin-left: 256px !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: calc(100vh - 64px) !important;
}

body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .app-content-wrapper {
  margin-left: 64px !important;
}

@media (max-width: 991.98px) {
  .content-wrapper,
  .app-content-wrapper {
    margin-left: 0 !important;
  }
}

.content-header,
.app-content-header {
  padding: 24px 28px 16px !important;
}

.app-page-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.app-heading-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.app-breadcrumb-container {
  margin-bottom: 6px !important;
}

.app-page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.app-header-clock {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  border-radius: var(--radius-md);
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: #cbd5e1 !important;
  padding: 0 8px !important;
}

.breadcrumb-item a {
  color: var(--muted) !important;
  text-decoration: none !important;
}

.breadcrumb-item a:hover {
  color: var(--foreground) !important;
}

.breadcrumb-item.active {
  color: var(--foreground) !important;
  font-weight: 500 !important;
}

.content,
.app-main-content {
  padding: 0 28px 36px !important;
}

.main-footer,
.app-footer {
  margin-left: 256px !important;
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border-strong) !important;
  padding: 14px 28px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-collapse .main-footer,
body.sidebar-collapse .app-footer {
  margin-left: 64px !important;
}

@media (max-width: 991.98px) {
  .main-footer,
  .app-footer {
    margin-left: 0 !important;
  }
}

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

.app-footer-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.app-footer-sep {
  color: var(--border-strong) !important;
}

.app-system-version {
  font-size: 12px !important;
  font-weight: 600 !important;
  background-color: var(--background) !important;
  border: 1px solid var(--border-strong) !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-xs) !important;
  color: var(--foreground) !important;
}

/* ========================================================
   5. CARDS, PANELS & CONTAINERS
   ======================================================== */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-card) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.card-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-body {
  padding: 20px !important;
}

.card-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border-strong) !important;
  padding: 14px 20px !important;
}

/* Reset heavy AdminLTE card outline borders */
.card-primary.card-outline,
.card-info.card-outline,
.card-success.card-outline,
.card-warning.card-outline,
.card-danger.card-outline {
  border-top: 1px solid var(--border-strong) !important;
}

/* ========================================================
   6. FORMS, INPUTS & CONTROLS
   ======================================================== */
.form-group {
  margin-bottom: 18px !important;
}

label {
  display: inline-block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.form-control,
.custom-select {
  height: 38px !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control-sm,
.custom-select-sm {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-sm) !important;
}

.form-control-lg,
.custom-select-lg {
  height: 44px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  border-radius: var(--radius-lg) !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 90px !important;
  padding: 10px 12px !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

.form-control::placeholder {
  color: var(--muted-light) !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* Input Groups */
.input-group {
  position: relative !important;
}

.input-group-text {
  background-color: #f8fafc !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
}

.input-group-prepend .input-group-text {
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
  border-right: none !important;
}

.input-group-append .input-group-text {
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
  border-left: none !important;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Select2 Modern Overhaul */
.select2-container .select2-selection--single {
  height: 38px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--surface) !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  color: var(--foreground) !important;
  font-size: 13.5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 8px !important;
}

.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--surface) !important;
  padding: 2px 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #f1f5f9 !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  color: var(--foreground) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  margin-top: 4px !important;
}

.select2-dropdown {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-popover) !important;
  background-color: var(--surface) !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.select2-results__option {
  padding: 8px 12px !important;
  font-size: 13.5px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #f1f5f9 !important;
  color: var(--foreground) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #e2e8f0 !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

/* Custom Checkbox & Switches */
.custom-control-label {
  font-size: 13.5px !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  font-weight: 450 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ========================================================
   6.5. LIST PAGE TOOLBAR & SMART FILTER SYSTEM (UI-UX SKILL)
   ======================================================== */

/* Unified Page Toolbar */
.app-page-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.app-toolbar-left,
.app-toolbar-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.app-total-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 13px !important;
  color: var(--foreground) !important;
  font-weight: 500 !important;
  box-shadow: var(--elevation-card) !important;
  line-height: 1.4 !important;
}

.badge-primary-light {
  background-color: var(--surface-active) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 11.5px !important;
  padding: 5px 10px !important;
  border-radius: 9999px !important;
}

/* Secondary Actions Dropdown Menu */
.app-action-dropdown {
  min-width: 250px !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--elevation-popover) !important;
  padding: 6px !important;
  animation: fadeInDown 0.15s ease-out !important;
}

.app-action-dropdown .dropdown-item {
  height: 38px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  transition: all 0.12s ease !important;
}

.app-action-dropdown .dropdown-item:hover {
  background-color: var(--item-hover) !important;
  color: var(--foreground) !important;
}

.app-action-dropdown .dropdown-header {
  padding: 8px 12px 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
}

/* Smart Filter Card */
.app-filter-card {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-card) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.app-filter-main {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  background-color: var(--surface) !important;
}

.app-filter-search-wrap {
  position: relative !important;
  flex: 1 1 240px !important;
  min-width: 200px !important;
}

.app-filter-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  pointer-events: none !important;
}

.app-filter-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 34px 0 34px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  background-color: var(--background) !important;
  font-size: 13.5px !important;
  color: var(--foreground) !important;
  transition: all 0.15s ease !important;
}

.app-filter-search-input:focus {
  background-color: var(--surface) !important;
  border-color: var(--foreground) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--foreground) !important;
}

.app-filter-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-filter-search-clear:hover {
  color: var(--foreground) !important;
}

.app-filter-select {
  height: 38px !important;
  padding: 0 28px 0 12px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  background-color: var(--surface) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  min-width: 130px !important;
}

.app-filter-advanced-toggle {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  background-color: var(--surface) !important;
  color: var(--foreground) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.app-filter-advanced-toggle:hover,
.app-filter-advanced-toggle.active {
  background-color: var(--item-hover) !important;
  border-color: #cbd5e1 !important;
  color: var(--foreground) !important;
}

.app-filter-badge-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.app-filter-limit-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.app-filter-limit-input {
  width: 64px !important;
  height: 38px !important;
  text-align: center !important;
  padding: 0 6px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Collapsible Advanced Panel */
.app-filter-advanced-panel {
  padding: 16px 18px !important;
  background-color: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
}

.app-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

.app-filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.app-filter-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

/* Active Chips Strip */
.app-filter-chips {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  font-size: 12.5px !important;
}

.app-filter-chips-title {
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

.app-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background-color: var(--surface-active) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--foreground) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
}

.app-filter-chip:hover {
  background-color: #e2e8f0 !important;
  color: var(--foreground) !important;
}

.app-filter-chip-remove {
  color: var(--muted) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 2px !important;
}

.app-filter-chip-remove:hover {
  color: var(--danger) !important;
}

.app-filter-clear-all {
  color: var(--danger) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-left: 6px !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-xs) !important;
}

.app-filter-clear-all:hover {
  background-color: var(--danger-bg) !important;
  text-decoration: none !important;
}

/* ========================================================
   7. TABLES & DATA GRIDS
   ======================================================== */
.table {
  width: 100% !important;
  margin-bottom: 0 !important;
  color: var(--foreground) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13.5px !important;
}

.table thead th {
  padding: 12px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
  background-color: #f8fafc !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-strong) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.table tbody td {
  padding: 12px 16px !important;
  color: #1e293b !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
  vertical-align: middle !important;
}

.table-hover tbody tr:hover td {
  background-color: var(--surface-hover) !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: #fafbfc !important;
}

.table-bordered {
  border: 1px solid var(--border-strong) !important;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--border) !important;
}

.table-responsive {
  border-radius: var(--radius-lg) !important;
  overflow-x: auto !important;
}

/* Todo List / Drag-Sortable list (casinoRank.php) */
.todo-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.todo-list > li {
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--foreground) !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.15s ease !important;
}

.todo-list > li:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

.todo-list > li .handle {
  cursor: grab !important;
  margin-right: 12px !important;
  color: var(--muted-light) !important;
}

.todo-list > li .tools {
  display: flex !important;
  gap: 10px !important;
  color: var(--muted) !important;
}

.todo-list > li .tools i {
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.todo-list > li .tools i:hover {
  color: var(--foreground) !important;
}

/* Pagination Overhaul */
.pagination {
  margin: 16px 0 0 !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.page-item .page-link {
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface) !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.page-item:hover .page-link {
  background: #f1f5f9 !important;
  color: var(--foreground) !important;
  border-color: #cbd5e1 !important;
}

.page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.page-item.disabled .page-link {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: #f8fafc !important;
}

/* ========================================================
   8. BUTTONS & ACTIONS
   ======================================================== */
.btn {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: var(--radius-md) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-sm {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-sm) !important;
}

.btn-xs {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  border-radius: var(--radius-xs) !important;
}

.btn-lg {
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  border-radius: var(--radius-lg) !important;
}

/* Button Variants */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--foreground) !important;
}
.btn-outline-primary:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--foreground) !important;
}

.btn-secondary,
.btn-default {
  background-color: #f1f5f9 !important;
  border: 1px solid var(--border-strong) !important;
  color: #334155 !important;
}
.btn-secondary:hover,
.btn-default:hover {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: var(--foreground) !important;
}

.btn-outline-secondary {
  background-color: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  color: #475569 !important;
}
.btn-outline-secondary:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: var(--foreground) !important;
}

.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background-color: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.btn-outline-success {
  background-color: var(--success-bg) !important;
  border: 1px solid var(--success-border) !important;
  color: var(--success-text) !important;
}
.btn-outline-success:hover {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: var(--success-text) !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.btn-outline-danger {
  background-color: var(--danger-bg) !important;
  border: 1px solid var(--danger-border) !important;
  color: var(--danger-text) !important;
}
.btn-outline-danger:hover {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: var(--danger-text) !important;
}

.btn-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background-color: #b45309 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}

.btn-outline-warning {
  background-color: var(--warning-bg) !important;
  border: 1px solid var(--warning-border) !important;
  color: var(--warning-text) !important;
}
.btn-outline-warning:hover {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: var(--warning-text) !important;
}

.btn-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: #ffffff !important;
}
.btn-info:hover {
  background-color: #0369a1 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}

.btn-outline-info {
  background-color: var(--info-bg) !important;
  border: 1px solid var(--info-border) !important;
  color: var(--info-text) !important;
}
.btn-outline-info:hover {
  background-color: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: var(--info-text) !important;
}

/* ========================================================
   9. TABS & NAV PILLS
   ======================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--border-strong) !important;
  gap: 2px !important;
  margin-bottom: 20px !important;
}

.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
  transition: all 0.15s ease !important;
}

.nav-tabs .nav-link:hover {
  color: var(--foreground) !important;
  border-bottom-color: #cbd5e1 !important;
}

.nav-tabs .nav-link.active {
  color: var(--foreground) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--primary) !important;
  background: transparent !important;
}

.nav-pills {
  background-color: #f1f5f9 !important;
  padding: 4px !important;
  border-radius: var(--radius-lg) !important;
  gap: 2px !important;
}

.nav-pills .nav-link {
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  padding: 6px 14px !important;
  transition: all 0.15s ease !important;
}

.nav-pills .nav-link:hover {
  color: var(--foreground) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--surface) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ========================================================
   10. BADGES, STATUSES & TAGS
   ======================================================== */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

.badge-success, .bg-success {
  background-color: var(--success-bg) !important;
  color: var(--success-text) !important;
  border: 1px solid var(--success-border) !important;
}

.badge-danger, .bg-danger {
  background-color: var(--danger-bg) !important;
  color: var(--danger-text) !important;
  border: 1px solid var(--danger-border) !important;
}

.badge-warning, .bg-warning {
  background-color: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border: 1px solid var(--warning-border) !important;
}

.badge-info, .bg-info {
  background-color: var(--info-bg) !important;
  color: var(--info-text) !important;
  border: 1px solid var(--info-border) !important;
}

.badge-primary, .bg-primary {
  background-color: #f1f5f9 !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border-strong) !important;
}

.badge-secondary, .bg-secondary {
  background-color: #f8fafc !important;
  color: var(--muted) !important;
  border: 1px solid var(--border-strong) !important;
}

/* ========================================================
   11. MODALS, DIALOGS & NOTIFICATIONS
   ======================================================== */
.modal-content {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-modal) !important;
  overflow: hidden !important;
  background-color: var(--surface) !important;
}

.modal-header {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

.modal-body {
  padding: 24px !important;
  font-size: 14px !important;
}

.modal-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.modal-backdrop.show {
  opacity: 0.45 !important;
  backdrop-filter: blur(2px) !important;
}

/* ========================================================
   12. ALERTS & MESSAGES (BANNERS PER UI-UX SKILL)
   ======================================================== */
.alert {
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  margin-bottom: 20px !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.alert-success {
  background-color: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}

.alert-danger {
  background-color: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}

.alert-warning {
  background-color: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}

.alert-info {
  background-color: var(--info-bg) !important;
  border-color: var(--info-border) !important;
  color: var(--info-text) !important;
}

/* Banner Component per ui-ux skill references/components/banner.md */
.app-banner {
  border-radius: var(--radius-xl) !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.app-banner-success {
  background-color: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}

.app-banner-danger {
  background-color: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}

.app-banner-icon-wrap {
  font-size: 18px !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}

.app-banner-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.app-banner-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  color: inherit !important;
}

.app-banner-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  color: inherit !important;
}

.app-banner-list {
  margin: 0 !important;
  padding-left: 20px !important;
  font-size: 13px !important;
  color: inherit !important;
}

.app-banner-close {
  padding: 0 !important;
  font-size: 18px !important;
  color: inherit !important;
  opacity: 0.6 !important;
  margin-left: auto !important;
  background: transparent !important;
  border: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.app-banner-close:hover {
  opacity: 1 !important;
}

.app-avatar-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.bg-danger-light {
  background-color: var(--danger-bg);
}

.bg-warning-light {
  background-color: var(--warning-bg);
}

.app-error-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--background);
  margin-bottom: 16px;
}

/* ========================================================
   13. DASHBOARD SPECIFIC COMPONENTS
   ======================================================== */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--elevation-card);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.stat-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--elevation-hover);
  transform: translateY(-1px);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.stat-card-icon.icon-articles {
  background-color: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

.stat-card-icon.icon-casinos {
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

.stat-card-icon.icon-bonuses {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.stat-card-icon.icon-members {
  background-color: var(--purple-bg);
  color: var(--purple-text);
  border: 1px solid var(--purple-border);
}

.stat-card-icon.icon-games {
  background-color: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.stat-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}

.stat-card-footer a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.stat-card-footer a:hover {
  color: var(--foreground);
}

.system-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
  margin-bottom: 24px;
}

.system-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  font-size: 12.5px;
  font-weight: 500;
}

.status-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
  display: inline-block;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--foreground);
}

.btn-modern:hover {
  background: var(--item-hover);
  border-color: #cbd5e1;
  color: var(--foreground);
}

.btn-modern-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-modern-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
}

.btn-modern-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.btn-modern-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--danger-text);
}

.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

.modern-table thead th {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
}

.modern-table tbody td {
  padding: 14px 18px;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.modern-table tbody tr:hover td {
  background-color: var(--surface-hover);
}

.modern-table tbody tr:last-child td {
  border-bottom: none;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modern-progress {
  flex: 1;
  height: 7px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.modern-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--primary);
  transition: width 0.4s ease;
}

.modern-progress-bar.success {
  background-color: var(--success);
}

.modern-progress-bar.brand {
  background-color: var(--brand);
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-status.success {
  background-color: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.badge-status.warning {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.badge-status.neutral {
  background-color: var(--background);
  color: var(--muted);
  border: 1px solid var(--border-strong);
}

.badge-status.danger {
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

.badge-status.brand {
  background-color: var(--brand-light);
  color: var(--brand);
  border: 1px solid var(--brand-border);
}

.badge-status.info {
  background-color: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--success);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.queue-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.queue-stat-box {
  background-color: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out;
}

.queue-stat-box:hover {
  background-color: var(--surface-active);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.queue-stat-box .val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.queue-stat-box .lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

.quick-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.quick-module-link {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--foreground);
  transition: all 0.15s ease-in-out;
}

.quick-module-link:hover {
  background: var(--item-hover);
  border-color: #cbd5e1;
  color: var(--foreground);
  transform: translateY(-1px);
}

.quick-module-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #f1f5f9;
  color: var(--foreground);
}

.quick-module-title {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
}

.quick-module-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ========================================================
   14. FOOTER
   ======================================================== */
.main-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-strong) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  padding: 16px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.main-footer a {
  color: var(--foreground) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.main-footer a:hover {
  text-decoration: underline !important;
}

/* ========================================================
   15. LEGACY ADMINLTE COMPONENTS OVERHAUL (ALL PAGES)
   ======================================================== */

/* Info Boxes */
.info-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-card) !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 84px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s ease !important;
}

.info-box:hover {
  border-color: #cbd5e1 !important;
  box-shadow: var(--elevation-hover) !important;
  transform: translateY(-1px);
}

.info-box-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.info-box-content {
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.info-box-text {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}

.info-box-number {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Callouts */
.callout {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-left-width: 4px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-card) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

.callout-info { border-left-color: var(--info) !important; }
.callout-warning { border-left-color: var(--warning) !important; }
.callout-danger { border-left-color: var(--danger) !important; }
.callout-success { border-left-color: var(--success) !important; }

.callout h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  margin-bottom: 6px !important;
}

.callout p {
  font-size: 13.5px !important;
  color: var(--muted) !important;
  margin-bottom: 0 !important;
}

/* AdminLTE Btn-App */
.btn-app {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-card) !important;
  color: var(--foreground) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  min-width: 90px !important;
  height: auto !important;
  padding: 14px 12px !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
}

.btn-app:hover {
  background-color: var(--item-hover) !important;
  border-color: #cbd5e1 !important;
  color: var(--foreground) !important;
  transform: translateY(-1px);
}

.btn-app > .fas,
.btn-app > .far,
.btn-app > .fa {
  display: block !important;
  font-size: 20px !important;
  margin-bottom: 8px !important;
  color: var(--muted) !important;
}

.btn-app:hover > .fas,
.btn-app:hover > .far,
.btn-app:hover > .fa {
  color: var(--foreground) !important;
}

/* Tool Buttons in Card Headers */
.btn-tool {
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.btn-tool:hover {
  color: var(--foreground) !important;
  background: var(--item-hover) !important;
}

/* Summernote Editor Clean Styling */
.note-editor.note-frame {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.note-editor.note-frame .note-toolbar {
  background-color: #f8fafc !important;
  border-bottom: 1px solid var(--border-strong) !important;
  padding: 6px 10px !important;
}

.note-editor.note-frame .note-statusbar {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--border-strong) !important;
}

/* DataTables Styling */
.dataTables_wrapper .dataTables_filter input {
  height: 34px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_length select {
  height: 34px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 13px !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  padding-top: 14px !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 10px !important;
}

/* Fancybox Popups */
.fancybox-content {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-modal) !important;
  border: 1px solid var(--border-strong) !important;
  padding: 24px !important;
}

/* SweetAlert2 Dialogs */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
  font-family: var(--app-font) !important;
  box-shadow: var(--elevation-modal) !important;
  border: 1px solid var(--border-strong) !important;
  padding: 28px !important;
}

.swal2-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

.swal2-content {
  font-size: 14px !important;
  color: var(--muted) !important;
}

/* Toastr Notifications */
#toast-container > div {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-popover) !important;
  font-family: var(--app-font) !important;
  font-size: 13.5px !important;
  opacity: 1 !important;
}

/* ========================================================
   28. CASINO EDIT / CREATE REDESIGN (Payments, Licenses, Games)
   ======================================================== */

/* Inline AJAX Modal Card Container: ensure card-body keeps its proper card padding */
.card-body.js-modal-inline,
.card-body[data-modal-name] {
  padding: 16px 18px !important;
  background: transparent !important;
}

/* Reset inner pseudo-modal wrappers inside inline cards so they never create double borders */
.js-modal-inline .modal-content,
.js-modal-inline .modal-body,
[jsModalName]:not(.modal) .modal-content,
[jsModalName]:not(.modal) .modal-body {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Headers */
.app-payment-header,
.app-license-header {
  min-height: 32px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
}

.app-payment-header .btn,
.app-license-header .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--radius-sm) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* Payment Methods Grid */
.app-payment-container {
  width: 100% !important;
}

.app-payment-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
  gap: 8px !important;
  max-height: 290px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 2px 4px 2px !important;
  scrollbar-width: thin;
}

.app-payment-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  background-color: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.app-payment-card:hover {
  border-color: var(--border-focus) !important;
  box-shadow: var(--elevation-card) !important;
  transform: translateY(-1px) !important;
}

.app-payment-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

.app-payment-img {
  max-width: 100% !important;
  max-height: 34px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.15s ease !important;
}

.app-payment-card:hover .app-payment-img {
  transform: scale(1.06) !important;
}

.app-payment-del {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 18px !important;
  height: 18px !important;
  background-color: var(--danger) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  z-index: 5 !important;
}

.app-payment-card:hover .app-payment-del {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.app-payment-del:hover {
  background-color: #b91c1c !important;
  transform: scale(1.15) !important;
}

/* Licenses List - Clean list rows inside card without nested card borders */
.app-license-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.app-license-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.app-license-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.app-license-item:first-child {
  padding-top: 0 !important;
}

.app-license-item:hover {
  background-color: transparent !important;
}

.app-license-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.app-license-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-license-status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  border-radius: 9999px !important;
  width: fit-content !important;
}

.app-license-status.is-active {
  background-color: var(--success-bg) !important;
  color: var(--success-text) !important;
  border: 1px solid var(--success-border) !important;
}

.app-license-status.is-suspended {
  background-color: var(--danger-bg) !important;
  color: var(--danger-text) !important;
  border: 1px solid var(--danger-border) !important;
}

.app-license-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  position: static !important;
}

.app-license-action-btn,
.card-license-del {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11.5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  color: var(--muted) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.app-license-action-btn.edit:hover {
  background-color: var(--surface-active) !important;
  color: var(--foreground) !important;
}

.app-license-action-btn.delete:hover,
.card-license-del:hover {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
}

/* Empty State Helper */
.app-empty-state-sm {
  padding: 20px 12px !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  background-color: #f8fafc !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
}

/* Game Type Tiles Overrides */
.csn-available-games-item {
  border-radius: var(--radius-md) !important;
  background-color: #f8fafc !important;
  border: 1.5px solid var(--border-strong) !important;
  padding: 10px 4px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  min-height: 56px !important;
}

.csn-available-games-item:hover {
  border-color: var(--brand-border) !important;
  background-color: #f1f5f9 !important;
  transform: translateY(-1px) !important;
}

.csn-available-games-item.active {
  background-color: var(--brand-light) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px var(--brand) !important;
}

.csn-available-games-item.active .available-games-icon {
  fill: var(--brand) !important;
}

.csn-available-games-item.active .text-grey-7 {
  color: var(--brand) !important;
  font-weight: 600 !important;
}

.csn-available-games-item .availability-icon {
  top: 5px !important;
  right: 5px !important;
}

.csn-available-games-item.active .availability-icon-check {
  fill: var(--brand) !important;
}