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

@import 'variables.scss';

// ============================================================================
// Donation Page
// ============================================================================

.donate {
  &__container {
    @extend .page-wrapper;
  }

  &__header {
    text-align: center;
    margin-bottom: $spacing-5xl;

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

    p {
      font-size: $font-size-xl;
      color: $text-secondary;
      max-width: 700px;
      margin: 0 auto;
    }
  }

  &__info-section {
    @include card;
    @include card-header;
    border-left: 6px solid $primary-color;
    margin-bottom: $spacing-3xl;

    h2 {
      margin-bottom: $spacing-xl;
    }

    p {
      margin-bottom: $spacing-lg;
    }

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

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

        span:first-child {
          color: $primary-color;
          font-weight: bold;
          flex-shrink: 0;
        }
      }
    }
  }

  &__amount-section {
    @include card;
    margin-bottom: $spacing-3xl;

    h2 {
      margin-bottom: $spacing-xl;
    }
  }

  &__amount-label {
    display: block;
    margin-bottom: $spacing-lg;
    font-weight: 600;
    color: $text-primary;
  }

  &__buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: $spacing-md;
    margin-bottom: $spacing-xl;

    button {
      padding: $spacing-lg;
      border: 2px solid $border-color;
      background: $bg-white;
      border-radius: $border-radius-md;
      cursor: pointer;
      font-weight: bold;
      color: $text-primary;
      transition: all $transition-fast;
      font-size: $font-size-base;

      &:hover {
        background-color: $primary-color;
        color: $bg-white;
        border-color: $primary-color;
      }
    }
  }

  &__custom-amount {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;

    input {
      flex: 1;
    }

    button {
      @include button-base;
      background-color: $primary-color;
      color: $bg-white;
    }
  }

  &__paypal-container {
    margin: $spacing-3xl 0;

    button {
      width: 100% !important;
    }
  }

  &__message {
    background: $primary-light;
    padding: $spacing-lg;
    border-radius: $border-radius-md;
    border-left: 4px solid $primary-color;
    text-align: center;
    font-size: $font-size-sm;

    p {
      margin: 0;
      color: $primary-color;
    }
  }

  &__impact {
    @include card;
    margin-top: $spacing-3xl;

    h2 {
      margin-bottom: $spacing-xl;
      text-align: center;
    }

    .grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

      > div {
        text-align: center;
        padding: $spacing-xl;

        .amount {
          font-size: $font-size-7xl;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: $spacing-md;
        }

        p {
          font-size: $font-size-sm;
          color: $text-secondary;
        }
      }
    }
  }

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

// ============================================================================
// Success Page
// ============================================================================

.donate-success {
  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: $spacing-3xl $spacing-lg;
  }

  &__content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }

  &__icon {
    font-size: $font-size-7xl;
    margin-bottom: $spacing-3xl;
    color: $success-color;
  }

  &__heading {
    margin: 0 0 $spacing-lg 0;
    font-size: $font-size-5xl;
    color: $text-primary;
  }

  &__card {
    @include card;
    border-left: 6px solid $success-color;
    margin-bottom: $spacing-3xl;

    p {
      margin: 0 0 $spacing-lg 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__info-box {
    background: $primary-light;
    padding: $spacing-3xl;
    border-radius: $border-radius-lg;
    margin-bottom: $spacing-3xl;
    border-left: 4px solid $primary-color;

    h3 {
      margin: 0 0 $spacing-lg 0;
      color: $text-primary;
    }

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

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

        span:first-child {
          color: $primary-color;
          font-weight: bold;
          font-size: $font-size-lg;
          flex-shrink: 0;
        }
      }
    }
  }

  &__actions {
    display: flex;
    gap: $spacing-lg;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: $spacing-5xl;

    a {
      @include button-base;

      &:first-child {
        background-color: $primary-color;
        color: $bg-white;
      }

      &:last-child {
        background-color: transparent;
        color: $primary-color;
        border: 2px solid $primary-color;
      }
    }
  }

  &__gratitude {
    margin-top: $spacing-5xl;
    padding-top: $spacing-3xl;
    border-top: 1px solid $border-color;

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

// ============================================================================
// Admin Dashboard
// ============================================================================

.admin-dashboard {
  &__container {
    @extend .page-wrapper;
  }

  &__header {
    margin-bottom: $spacing-3xl;

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

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

  &__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: $spacing-3xl;
    margin-bottom: $spacing-3xl;

    .card {
      border-top: 4px solid $primary-color;

      &.coming-soon {
        opacity: 0.6;

        a {
          @extend .cursor-disabled;
        }
      }
    }
  }

  &__icon {
    font-size: $font-size-7xl;
    margin-bottom: $spacing-lg;
  }

  &__card-title {
    margin: 0 0 $spacing-lg 0;
    font-size: $font-size-2xl;
    color: $text-primary;
  }

  &__card-text {
    margin: 0 0 $spacing-lg 0;
    color: $text-secondary;
    font-size: $font-size-sm;
    line-height: 1.6;
  }

  &__card-link {
    @include button-base;
    background-color: $primary-color;
    color: $bg-white;
  }

  &__quick-access {
    @include card;

    h2 {
      margin-bottom: $spacing-xl;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: $spacing-lg;

      a {
        padding: $spacing-lg;
        background: $primary-light;
        text-decoration: none;
        border-radius: $border-radius-md;
        border-left: 4px solid $primary-color;
        color: $text-primary;
        transition: background-color $transition-fast;

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

        strong {
          display: block;
          margin-bottom: $spacing-md;
          font-weight: 600;
        }

        small {
          display: block;
          font-size: $font-size-sm;
          color: $text-secondary;
        }
      }
    }
  }
}

// ============================================================================
// Admin Donation Settings
// ============================================================================

.admin-settings {
  &__container {
    @extend .page-wrapper;
  }

  &__header {
    margin-bottom: $spacing-3xl;

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

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

  &__alerts {
    margin-bottom: $spacing-xl;

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

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

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

        h4 {
          margin: 0 0 $spacing-md 0;
          color: inherit;
        }
      }
    }
  }

  &__form {
    @include card;

    form {
      display: flex;
      flex-direction: column;
    }
  }

  &__form-group {
    margin-bottom: $spacing-3xl;

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

    input,
    textarea,
    select {
      @include input-base;
    }

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

      a {
        color: $primary-color;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  &__submit {
    @include button-base;
    background-color: $primary-color;
    color: $bg-white;
    align-self: flex-start;
  }

  &__instructions {
    background: $primary-light;
    padding: $spacing-3xl;
    border-radius: $border-radius-lg;
    margin-top: $spacing-3xl;
    border-left: 4px solid $primary-color;

    h3 {
      margin: 0 0 $spacing-lg 0;
      color: $text-primary;
    }

    ol {
      margin: 0;
      padding-left: $spacing-xl;
      color: $text-secondary;
      line-height: 1.8;

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

// ============================================================================
// Poster Dashboard Styles
// ============================================================================

.poster-dashboard {
  &__container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);

    main {
      flex: 1;
      padding: $spacing-3xl;
      background-color: $bg-light;

      @media (max-width: $breakpoint-md) {
        padding: $spacing-xl;
      }
    }
  }

  &__header {
    margin-bottom: $spacing-3xl;

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

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

  &__stats {
    margin-bottom: $spacing-3xl;

    h2 {
      margin-bottom: $spacing-xl;
    }
  }

  &__stat-card {
    background: $bg-white;
    padding: $spacing-3xl;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-md;
    text-align: center;

    .stat-value {
      font-size: $font-size-7xl;
      font-weight: bold;
      margin-bottom: $spacing-md;
    }

    .stat-label {
      color: $text-secondary;
      font-size: $font-size-base;
    }
  }

  &__applications {
    @include card;

    h2 {
      margin-bottom: $spacing-xl;
    }

    table {
      width: 100%;
      border-collapse: collapse;

      thead {
        background-color: $bg-lighter;
        border-bottom: 2px solid $border-color;

        th {
          padding: $spacing-lg;
          text-align: left;
          font-weight: 600;
          color: $text-primary;
        }
      }

      tbody {
        tr {
          border-bottom: 1px solid $border-light;
          transition: background-color $transition-fast;

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

          td {
            padding: $spacing-lg;
            color: $text-primary;

            strong {
              font-weight: 600;
            }
          }
        }
      }
    }

    .status-badge {
      display: inline-block;
      padding: $spacing-sm $spacing-md;
      border-radius: 15px;
      font-size: $font-size-xs;
      font-weight: bold;

      &--applied {
        background-color: #cfe2ff;
        color: #084298;
      }

      &--reviewed {
        background-color: #fff3cd;
        color: #664d03;
      }

      &--accepted {
        background-color: #d1e7dd;
        color: #0f5132;
      }

      &--rejected {
        background-color: #f8d7da;
        color: #842029;
      }
    }
  }

  &__jobs {
    margin-bottom: $spacing-3xl;

    h2 {
      margin-bottom: $spacing-xl;
    }

    .job-card {
      @include card;
      border-left: 4px solid $primary-color;

      &__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: $spacing-md;
      }

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

      &__location {
        margin: 0;
        color: $text-secondary;
        font-size: $font-size-sm;
      }

      &__description {
        margin: $spacing-md 0;
        color: $text-secondary;
        font-size: $font-size-sm;
        line-height: 1.6;
        @include line-clamp(2);
      }

      &__badges {
        display: flex;
        gap: $spacing-md;

        .badge {
          display: inline-block;
          background-color: $primary-light;
          color: $primary-color;
          padding: $spacing-sm $spacing-md;
          border-radius: 15px;
          font-size: $font-size-xs;
          font-weight: bold;

          &--count {
            background-color: #d1e7dd;
            color: #0f5132;
          }
        }
      }

      &__actions {
        display: flex;
        gap: $spacing-md;
        margin-top: $spacing-md;

        a {
          flex: 1;
          padding: $spacing-md $spacing-lg;
          background-color: $primary-color;
          color: $bg-white;
          text-decoration: none;
          border-radius: $border-radius-sm;
          text-align: center;
          font-weight: bold;
          font-size: $font-size-sm;
          transition: background-color $transition-fast;

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

          &--secondary {
            background-color: #6c757d;

            &:hover {
              background-color: #5c636a;
            }
          }
        }
      }
    }
  }

  &__empty {
    @include card;
    text-align: center;

    .empty-icon {
      font-size: $font-size-7xl;
      margin-bottom: $spacing-lg;
    }

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

    p {
      margin: 0 0 $spacing-xl 0;
      color: $text-secondary;
    }

    .btn {
      @include button-base;
      background-color: $primary-color;
      color: $bg-white;
    }
  }

  &__sidebar {
    width: 280px;
    background-color: $bg-lighter;
    padding: $spacing-xl;
    box-shadow: $shadow-sm;

    @media (max-width: $breakpoint-lg) {
      width: 240px;
      padding: $spacing-lg;
    }

    @media (max-width: $breakpoint-md) {
      display: none;
    }
  }

  &__nav {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    .nav-item {
      display: flex;
      align-items: center;
      gap: $spacing-md;
      padding: $spacing-md;
      text-decoration: none;
      color: $text-secondary;
      border-radius: $border-radius-md;
      transition: background-color $transition-fast;

      &:hover {
        background-color: rgba($primary-color, 0.1);
      }

      &.active {
        background-color: $primary-color;
        color: $bg-white;
      }

      .icon {
        font-size: $font-size-3xl;
      }
    }
  }
}

// ============================================================================
// Responsive Design
// ============================================================================

@media (max-width: $breakpoint-md) {
  .donate {
    &__header {
      margin-bottom: $spacing-3xl;

      h1 {
        font-size: $font-size-5xl;
      }
    }

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

    &__custom-amount {
      flex-direction: column;

      button {
        width: 100%;
      }
    }
  }

  .admin-dashboard {
    &__cards {
      grid-template-columns: 1fr;
    }
  }

  .poster-dashboard {
    &__container {
      main {
        padding: $spacing-xl;
      }
    }
  }
}

@media (max-width: $breakpoint-sm) {
  .donate {
    &__header {
      h1 {
        font-size: $font-size-3xl;
      }

      p {
        font-size: $font-size-lg;
      }
    }

    &__buttons {
      grid-template-columns: 1fr;
    }
  }

  .donate-success {
    &__content {
      margin-bottom: $spacing-3xl;
    }

    &__icon {
      font-size: $font-size-6xl;
      margin-bottom: $spacing-xl;
    }

    &__heading {
      font-size: $font-size-4xl;
    }

    &__actions {
      flex-direction: column;

      a {
        width: 100%;
      }
    }
  }

  .admin-dashboard {
    &__header h1 {
      font-size: $font-size-4xl;
    }

    &__cards {
      grid-template-columns: 1fr;
    }
  }

  .poster-dashboard {
    &__header {
      h1 {
        font-size: $font-size-4xl;
      }
    }
  }
}