// ============================================================================
// AsielConnect Donation System Styles
// ============================================================================

// Variables
// ============================================================================

// Colors
$primary-color: #4a7c7e;
$primary-dark: #3a5f61;
$primary-light: #e8f4f8;
$success-color: #28a745;
$danger-color: #dc3545;
$warning-color: #ffc107;
$warning-bg: #fff3cd;
$warning-border: #ffc107;
$warning-text: #856404;
$info-bg: #d4edda;
$info-border: #28a745;
$info-text: #155724;
$error-bg: #f8d7da;
$error-border: #dc3545;
$error-text: #721c24;

$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$text-muted: #888;

$bg-light: #f9f9f9;
$bg-lighter: #f5f5f5;
$bg-white: white;

$border-color: #ddd;
$border-light: #eee;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 15px;
$spacing-xl: 20px;
$spacing-xxl: 30px;
$spacing-3xl: 40px;
$spacing-4xl: 50px;
$spacing-5xl: 60px;

// Typography
$font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-md: 15px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-2xl: 20px;
$font-size-3xl: 24px;
$font-size-4xl: 28px;
$font-size-5xl: 32px;
$font-size-6xl: 36px;
$font-size-7xl: 48px;

// Breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

// Border Radius
$border-radius-sm: 4px;
$border-radius-md: 6px;
$border-radius-lg: 8px;

// Shadow
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

// Transitions
$transition-fast: 0.2s;
$transition-base: 0.3s;
$transition-slow: 0.5s;

// ============================================================================
// Mixins
// ============================================================================

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin button-base {
  padding: $spacing-md $spacing-xl;
  border: none;
  border-radius: $border-radius-sm;
  cursor: pointer;
  font-weight: bold;
  font-size: $font-size-base;
  transition: all $transition-fast ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;

  &:hover {
    transform: translateY(-1px);
    box-shadow: $shadow-md;
  }

  &:active {
    transform: translateY(0);
  }
}

@mixin input-base {
  width: 100%;
  padding: $spacing-md;
  border: 2px solid $border-color;
  border-radius: $border-radius-md;
  font-size: $font-size-base;
  box-sizing: border-box;
  font-family: $font-family;
  transition: border-color $transition-fast, box-shadow $transition-fast;

  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
  }
}

@mixin card {
  background: $bg-white;
  padding: $spacing-3xl;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
}

@mixin card-header {
  margin: 0 0 $spacing-xl 0;
  font-size: $font-size-3xl;
  color: $text-primary;
  font-weight: 600;
}

@mixin alert($bg-color, $border-color, $text-color) {
  background: $bg-color;
  padding: $spacing-lg;
  border-radius: $border-radius-md;
  border-left: 4px solid $border-color;
  margin-bottom: $spacing-lg;
  color: $text-color;
}

// ============================================================================
// Base Styles
// ============================================================================

* {
  font-family: $font-family;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: $bg-light;
}

// ============================================================================
// Layout
// ============================================================================

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-lg;
}

.container-md {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 $spacing-lg;
}

.container-sm {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 $spacing-lg;
}

.page-wrapper {
  background-color: $bg-light;
  min-height: calc(100vh - 60px);
  padding: $spacing-3xl $spacing-lg;
}

// ============================================================================
// Typography
// ============================================================================

h1 {
  margin: 0 0 $spacing-md 0;
  font-size: $font-size-6xl;
  color: $text-primary;
}

h2 {
  margin: 0 0 $spacing-xl 0;
  font-size: $font-size-3xl;
  color: $text-primary;
  font-weight: 600;
}

h3 {
  margin: 0 0 $spacing-lg 0;
  font-size: $font-size-2xl;
  color: $text-primary;
  font-weight: 600;
}

h4 {
  margin: 0 0 $spacing-lg 0;
  color: $text-primary;
  font-size: $font-size-lg;
  font-weight: 600;
}

p {
  margin: 0;
  color: $text-secondary;
  line-height: 1.8;
  font-size: $font-size-lg;
}

small {
  font-size: $font-size-sm;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: $text-light;
}

// ============================================================================
// Buttons
// ============================================================================

.btn {
  @include button-base;

  &--primary {
    background-color: $primary-color;
    color: $bg-white;

    &:hover {
      background-color: $primary-dark;
    }
  }

  &--success {
    background-color: $success-color;
    color: $bg-white;

    &:hover {
      background-color: darken($success-color, 5%);
    }
  }

  &--danger {
    background-color: $danger-color;
    color: $bg-white;

    &:hover {
      background-color: darken($danger-color, 5%);
    }
  }

  &--outline {
    background-color: transparent;
    color: $primary-color;
    border: 2px solid $primary-color;

    &:hover {
      background-color: $primary-light;
    }
  }

  &--block {
    display: block;
    width: 100%;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// ============================================================================
// Forms
// ============================================================================

.form-group {
  margin-bottom: $spacing-3xl;

  label {
    display: block;
    margin-bottom: $spacing-md;
    font-weight: 600;
    color: $text-primary;
    font-size: $font-size-base;
  }

  small {
    display: block;
    margin: $spacing-md 0 0 0;
    color: $text-secondary;
    font-size: $font-size-sm;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  @include input-base;
}

textarea {
  resize: vertical;
  font-family: $font-family;
}

select {
  padding: $spacing-md;
}

// ============================================================================
// Cards
// ============================================================================

.card {
  @include card;
  margin-bottom: $spacing-3xl;

  &__header {
    @include card-header;
  }

  &__body {
    margin: 0;
    color: $text-secondary;
    line-height: 1.8;
  }

  &--bordered {
    border-left: 6px solid $primary-color;
  }

  &--success {
    border-left: 4px solid $success-color;
  }
}

// ============================================================================
// Grid
// ============================================================================

.grid {
  display: grid;
  gap: $spacing-xl;

  &--2col {
    grid-template-columns: repeat(2, 1fr);

    @media (max-width: $breakpoint-md) {
      grid-template-columns: 1fr;
    }
  }

  &--3col {
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: $breakpoint-lg) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: $breakpoint-sm) {
      grid-template-columns: 1fr;
    }
  }

  &--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

// ============================================================================
// Alerts
// ============================================================================

.alert {
  margin-bottom: $spacing-lg;

  &--success {
    @include alert($info-bg, $info-border, $info-text);
  }

  &--error {
    @include alert($error-bg, $error-border, $error-text);
  }

  &--warning {
    @include alert($warning-bg, $warning-border, $warning-text);
  }

  &--info {
    @include alert($primary-light, $primary-color, $primary-color);
  }

  ul {
    margin: 0;
    padding-left: $spacing-xl;
    color: inherit;

    li {
      margin-bottom: $spacing-md;
    }
  }
}

// ============================================================================
// List
// ============================================================================

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;

  &__item {
    color: $text-secondary;
    font-size: $font-size-md;
    display: flex;
    gap: $spacing-md;

    &--check {
      &::before {
        content: '✓';
        color: $primary-color;
        font-weight: bold;
        font-size: $font-size-xl;
        min-width: 20px;
      }
    }
  }
}

// ============================================================================
// Utilities
// ============================================================================

.margin-bottom {
  &--sm {
    margin-bottom: $spacing-lg;
  }

  &--md {
    margin-bottom: $spacing-xl;
  }

  &--lg {
    margin-bottom: $spacing-3xl;
  }

  &--xl {
    margin-bottom: $spacing-4xl;
  }
}

.padding {
  &--md {
    padding: $spacing-xl;
  }

  &--lg {
    padding: $spacing-3xl;
  }
}

.gap {
  &--sm {
    gap: $spacing-lg;
  }

  &--md {
    gap: $spacing-xl;
  }

  &--lg {
    gap: $spacing-3xl;
  }
}

.flex {
  display: flex;

  &--between {
    @include flex-between;
  }

  &--center {
    @include flex-center;
  }

  &--column {
    flex-direction: column;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--gap-sm {
    gap: $spacing-lg;
  }

  &--gap-md {
    gap: $spacing-xl;
  }

  &--gap-lg {
    gap: $spacing-3xl;
  }
}

.opacity-low {
  opacity: 0.6;
}

.cursor-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}