/* ============================
   SCRATCH-LIKE THEME SYSTEM-WIDE
   Tệp này sẽ áp dụng theme Scratch cho toàn bộ hệ thống
   ============================ */

:root {
  /* Scratch Color Palette */
  --scratch-blue: #4C97FF;
  --scratch-purple: #9966FF;
  --scratch-green: #40BF4A;
  --scratch-orange: #FF8C1A;
  --scratch-red: #FF6680;
  --scratch-yellow: #FFD23C;
  --scratch-light-blue: #E5F3FF;
  --scratch-light-purple: #F0E6FF;
  --scratch-gray: #F2F2F2;
  --scratch-dark-gray: #CCCCCC;
  --scratch-light-gray: #F9F9F9;
  
  /* Text Colors */
  --scratch-text-primary: #333333;
  --scratch-text-secondary: #666666;
  --scratch-text-muted: #999999;
  
  /* Background Colors */
  --scratch-bg-primary: #FFFFFF;
  --scratch-bg-secondary: var(--scratch-gray);
  --scratch-bg-accent: var(--scratch-light-blue);
  
  /* Dark Mode Colors */
  --scratch-dark-bg: #1a1a1a;
  --scratch-dark-surface: #2a2a2a;
  --scratch-dark-border: #404040;
  --scratch-dark-input: #333333;
  --scratch-light-text: #e0e0e0;
  --scratch-blue-dark: #2C5F95;
  --scratch-purple-dark: #5A4B8A;
  --scratch-light-blue-alt: #66B3FF;
  
  /* Shadows */
  --scratch-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --scratch-shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --scratch-shadow-lg: 0 8px 16px rgba(0,0,0,0.2);
  
  /* Border Radius */
  --scratch-radius-sm: 6px;
  --scratch-radius-md: 12px;
  --scratch-radius-lg: 20px;
  --scratch-radius-xl: 25px;
  
  /* Spacing */
  --scratch-space-xs: 4px;
  --scratch-space-sm: 8px;
  --scratch-space-md: 16px;
  --scratch-space-lg: 24px;
  --scratch-space-xl: 32px;
  --scratch-space-xxl: 48px;
}

/* ============================
   GLOBAL OVERRIDES
   ============================ */

/* Bootstrap Button Overrides */
.btn-primary {
  background: linear-gradient(135deg, var(--scratch-blue), #3D7EDB) !important;
  border: none !important;
  border-radius: var(--scratch-radius-lg) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: var(--scratch-shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3D7EDB, var(--scratch-blue)) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--scratch-shadow-md) !important;
}

.btn-secondary {
  background: var(--scratch-gray) !important;
  border: 2px solid var(--scratch-dark-gray) !important;
  color: var(--scratch-text-primary) !important;
  border-radius: var(--scratch-radius-lg) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  background: var(--scratch-dark-gray) !important;
  border-color: var(--scratch-blue) !important;
  color: var(--scratch-blue) !important;
  transform: translateY(-1px) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--scratch-green), #37A83F) !important;
  border: none !important;
  border-radius: var(--scratch-radius-lg) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--scratch-orange), #E6741A) !important;
  border: none !important;
  border-radius: var(--scratch-radius-lg) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--scratch-red), #E55A73) !important;
  border: none !important;
  border-radius: var(--scratch-radius-lg) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--scratch-purple), #8A5CE6) !important;
  border: none !important;
  border-radius: var(--scratch-radius-lg) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

/* Small buttons */
.btn-sm {
  padding: 8px 16px !important;
  font-size: 14px !important;
  border-radius: var(--scratch-radius-md) !important;
}

/* ============================
   CARD COMPONENTS
   ============================ */

.card {
  border: none !important;
  border-radius: var(--scratch-radius-md) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
  transition: all 0.2s ease !important;
  background: var(--scratch-bg-primary) !important;
}

.card:hover {
  box-shadow: var(--scratch-shadow-md) !important;
  transform: translateY(-2px) !important;
}

.card-header {
  background: linear-gradient(135deg, var(--scratch-light-blue), #CCE7FF) !important;
  border-bottom: 2px solid var(--scratch-dark-gray) !important;
  border-radius: var(--scratch-radius-md) var(--scratch-radius-md) 0 0 !important;
  padding: var(--scratch-space-md) var(--scratch-space-lg) !important;
  font-weight: 600 !important;
  color: var(--scratch-blue) !important;
}

.card-body {
  padding: var(--scratch-space-lg) !important;
}

.card-footer {
  background: var(--scratch-gray) !important;
  border-top: 1px solid var(--scratch-dark-gray) !important;
  border-radius: 0 0 var(--scratch-radius-md) var(--scratch-radius-md) !important;
}

/* ============================
   FORM COMPONENTS
   ============================ */

.form-control {
  border: 2px solid var(--scratch-dark-gray) !important;
  border-radius: var(--scratch-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
  background: var(--scratch-bg-primary) !important;
}

.form-control:focus {
  border-color: var(--scratch-blue) !important;
  box-shadow: 0 0 0 3px rgba(76, 151, 255, 0.2) !important;
  outline: none !important;
}

.form-label {
  font-weight: 600 !important;
  color: var(--scratch-text-primary) !important;
  margin-bottom: var(--scratch-space-sm) !important;
}

.form-select {
  border: 2px solid var(--scratch-dark-gray) !important;
  border-radius: var(--scratch-radius-sm) !important;
  padding: 12px 16px !important;
  background: var(--scratch-bg-primary) !important;
}

.form-select:focus {
  border-color: var(--scratch-blue) !important;
  box-shadow: 0 0 0 3px rgba(76, 151, 255, 0.2) !important;
}

/* ============================
   TABLE COMPONENTS
   ============================ */

.table {
  background: var(--scratch-bg-primary) !important;
  border-radius: var(--scratch-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

.table thead th {
  background: linear-gradient(135deg, var(--scratch-blue), var(--scratch-purple)) !important;
  color: white !important;
  border: none !important;
  padding: var(--scratch-space-md) var(--scratch-space-lg) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
}

.table tbody td {
  padding: var(--scratch-space-md) var(--scratch-space-lg) !important;
  border-bottom: 1px solid var(--scratch-dark-gray) !important;
  vertical-align: middle !important;
}

.table tbody tr:nth-child(even) {
  background: var(--scratch-light-gray) !important;
}

.table tbody tr:hover {
  background: var(--scratch-light-blue) !important;
  transition: background-color 0.2s ease !important;
}

/* ============================
   BADGE COMPONENTS
   ============================ */

.badge {
  border-radius: var(--scratch-radius-xl) !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.bg-primary {
  background: var(--scratch-blue) !important;
}

.bg-success {
  background: var(--scratch-green) !important;
}

.bg-warning {
  background: var(--scratch-orange) !important;
}

.bg-danger {
  background: var(--scratch-red) !important;
}

.bg-info {
  background: var(--scratch-purple) !important;
}

.bg-secondary {
  background: var(--scratch-gray) !important;
  color: var(--scratch-text-primary) !important;
}

/* ============================
   ALERT COMPONENTS
   ============================ */

.alert {
  border: none !important;
  border-radius: var(--scratch-radius-md) !important;
  padding: var(--scratch-space-md) var(--scratch-space-lg) !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

.alert-success {
  background: linear-gradient(135deg, rgba(64, 191, 74, 0.1), rgba(55, 168, 63, 0.1)) !important;
  color: var(--scratch-green) !important;
  border-left: 4px solid var(--scratch-green) !important;
}

.alert-danger {
  background: linear-gradient(135deg, rgba(255, 102, 128, 0.1), rgba(229, 90, 115, 0.1)) !important;
  color: var(--scratch-red) !important;
  border-left: 4px solid var(--scratch-red) !important;
}

.alert-warning {
  background: linear-gradient(135deg, rgba(255, 140, 26, 0.1), rgba(230, 116, 26, 0.1)) !important;
  color: var(--scratch-orange) !important;
  border-left: 4px solid var(--scratch-orange) !important;
}

.alert-info {
  background: linear-gradient(135deg, rgba(153, 102, 255, 0.1), rgba(138, 92, 230, 0.1)) !important;
  color: var(--scratch-purple) !important;
  border-left: 4px solid var(--scratch-purple) !important;
}

/* ============================
   NAVIGATION COMPONENTS
   ============================ */

.nav-tabs .nav-link {
  border: none !important;
  border-radius: var(--scratch-radius-md) var(--scratch-radius-md) 0 0 !important;
  padding: var(--scratch-space-md) var(--scratch-space-lg) !important;
  color: var(--scratch-text-secondary) !important;
  font-weight: 600 !important;
  background: var(--scratch-gray) !important;
  margin-right: var(--scratch-space-sm) !important;
  transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
  background: var(--scratch-light-blue) !important;
  color: var(--scratch-blue) !important;
}

.nav-tabs .nav-link.active {
  background: var(--scratch-blue) !important;
  color: white !important;
  box-shadow: var(--scratch-shadow-sm) !important;
}

/* ============================
   PAGINATION
   ============================ */

.pagination .page-link {
  border: 2px solid var(--scratch-dark-gray) !important;
  color: var(--scratch-blue) !important;
  padding: 8px 16px !important;
  margin: 0 2px !important;
  border-radius: var(--scratch-radius-sm) !important;
  transition: all 0.2s ease !important;
}

.pagination .page-link:hover {
  background: var(--scratch-light-blue) !important;
  border-color: var(--scratch-blue) !important;
}

.pagination .page-item.active .page-link {
  background: var(--scratch-blue) !important;
  border-color: var(--scratch-blue) !important;
}

/* ============================
   MODAL COMPONENTS
   ============================ */

.modal-content {
  border: none !important;
  border-radius: var(--scratch-radius-md) !important;
  box-shadow: var(--scratch-shadow-lg) !important;
}

.modal-header {
  background: linear-gradient(135deg, var(--scratch-blue), var(--scratch-purple)) !important;
  color: white !important;
  border-bottom: none !important;
  border-radius: var(--scratch-radius-md) var(--scratch-radius-md) 0 0 !important;
  padding: var(--scratch-space-lg) !important;
}

.modal-header .btn-close {
  filter: invert(1) !important;
}

.modal-body {
  padding: var(--scratch-space-lg) !important;
}

.modal-footer {
  border-top: 1px solid var(--scratch-dark-gray) !important;
  padding: var(--scratch-space-lg) !important;
  background: var(--scratch-gray) !important;
  border-radius: 0 0 var(--scratch-radius-md) var(--scratch-radius-md) !important;
}

/* ============================
   UTILITY CLASSES
   ============================ */

.scratch-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--scratch-space-lg);
}

.scratch-section {
  padding: var(--scratch-space-xxl) 0;
}

.scratch-hero {
  background: linear-gradient(135deg, var(--scratch-light-blue), var(--scratch-light-purple));
  padding: var(--scratch-space-xxl) 0;
  border-radius: var(--scratch-radius-md);
  margin-bottom: var(--scratch-space-xl);
  text-align: center;
}

.scratch-hero h1 {
  color: var(--scratch-blue);
  font-weight: 700;
  margin-bottom: var(--scratch-space-md);
}

.scratch-hero p {
  color: var(--scratch-text-secondary);
  font-size: 18px;
}

/* Floating elements */
.scratch-float {
  animation: scratch-float 3s ease-in-out infinite;
}

@keyframes scratch-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Hover effects */
.scratch-hover {
  transition: all 0.2s ease;
}

.scratch-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--scratch-shadow-md);
}

/* ============================
   RESPONSIVE DESIGN
   ============================ */

@media (max-width: 768px) {
  .btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
  
  .card-body {
    padding: var(--scratch-space-md) !important;
  }
  
  .scratch-hero {
    padding: var(--scratch-space-lg) 0;
  }
  
  .table {
    font-size: 14px;
  }
  
  .table thead th,
  .table tbody td {
    padding: var(--scratch-space-sm) var(--scratch-space-md) !important;
  }
}

/* ============================
   DARK THEME SUPPORT
   ============================ */

html.dark {
  --scratch-bg-primary: #2D3748;
  --scratch-bg-secondary: #1A202C;
  --scratch-text-primary: #E2E8F0;
  --scratch-text-secondary: #A0AEC0;
  --scratch-gray: #4A5568;
  --scratch-dark-gray: #718096;
  --scratch-light-blue: #2D3748;
  --scratch-light-purple: #322659;
  --scratch-bg-accent: #2D3748;
}

html.dark .card {
  background: var(--scratch-bg-primary) !important;
  color: var(--scratch-text-primary) !important;
}

html.dark .form-control {
  background: var(--scratch-bg-primary) !important;
  color: var(--scratch-text-primary) !important;
  border-color: var(--scratch-dark-gray) !important;
}

html.dark .table tbody td {
  color: var(--scratch-text-primary) !important;
}

html.dark .scratch-hero {
  background: linear-gradient(135deg, var(--scratch-light-blue), var(--scratch-light-purple));
}