eapim-portal/src/main/resources/static/sass/pages/_commission.scss

@use '../abstracts/variables' as *;
@use '../abstracts/color-functions' as *;
@use '../abstracts/mixins' as *;

// Commission Pages Styles
// 수수료 관리 및 청구서 출력 페이지 스타일


// ==================== Commission Management Page ====================

// Commission Container
.commission-container {
  max-width: 1400px;
  margin: 0 auto;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  background: $white;
  padding: $spacing-lg;
  border-radius: $border-radius-md;
  box-shadow: $shadow-md;
}

.searchInfo {
  display: inline-block;
  margin-right: $spacing-sm;
  margin-bottom: $spacing-md;
}

// Search Box
.searchBox {
  background: #f8f9fa;
  padding: 20px;
  border-radius: $border-radius-md;
  margin-bottom: 20px;

  &.row-two {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  label {
    font-weight: $font-weight-medium;
    color: $text-dark;
    min-width: 80px;
  }

  .form-control {
    padding: 6px 12px;
    border: 1px solid $border-gray;
    border-radius: $border-radius-sm;
    font-size: $font-size-sm;
    min-width: 100px;
  }
}

.form-inline {
  display: flex;
  align-items: center;
  gap: 10px;

  // 조회기간 [년] [월] 컨테이너 - PC 기본 스타일
  .period-selects {
    display: flex;
    align-items: center;
    gap: 10px;

    .period-unit {
      margin-right: 10px;
    }
  }
}

.btnBox {
  margin-left: auto;

  .btn + .btn {
    margin-left: 5px;
  }
}

// Print Button (initially hidden)
#printBtn {
  display: none;
}

// Notice Text
.commission-notice {
  color: #dc3545;
  margin-top: 30px;
  line-height: 1.6;
}

.voffset3 {
  margin-top: 30px;
}

// Color Utilities
.color_red {
  color: $accent-orange;
}

.color_blue {
  color: #007bff;
}

.color_darkRed {
  color: #8b0000;
}

// Table Styles
.table-responsive {
  overflow-x: auto;
  margin-top: 30px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: $font-size-sm;

  th {
    background: $gray-bg;
    font-weight: $font-weight-medium;
    color: $text-dark;
    padding: $spacing-md;
    text-align: center;
    border: 1px solid $border-gray;
  }

  td {
    padding: $spacing-md;
    text-align: center;
    border: 1px solid $border-gray;
  }
}

.table-bordered {
  border: 1px solid $border-gray;

  th,
  td {
    border: 1px solid $border-gray;
  }
}

.border-type {
  border: 2px solid #dee2e6;
}

// Commission Tables
.commission-table-wrapper {
  margin-top: 30px;

  .table {
    border: 2px solid #dee2e6;
  }
}

// Summary Row
.summary-row {
  background-color: #fff3cd !important;

  td {
    font-weight: $font-weight-semibold;
  }

  .summary-amount {
    font-size: 16px;
    color: #007bff;
  }
}

// Text Alignment Utilities
.text-center {
  text-align: center;
}

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

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

// Background Utilities
.bg-warning {
  background-color: #fff3cd !important;
}

// Icon
.glyphicon-search::before {
  content: "🔍";
}

// ==================== Commission Print Page ====================

.info-table {
  border-top: 10px solid $text-gray;
  width: 100%;
  border-bottom: 2px solid $text-dark;
  margin-bottom: $spacing-2xl;

  th {
    text-align: left;
    padding: $spacing-md $spacing-lg;
    font-weight: $font-weight-semibold;
    background: none;
    border: none;
  }

  td {
    padding: $spacing-md $spacing-lg;
    border: none;
  }
}

.commission-table {
  width: 100%;
  margin-top: $spacing-2xl;

  th,
  td {
    border: 1px solid #999 !important;
    padding: $spacing-md $spacing-lg;
  }

  td {
    text-align: right;
  }
}

.bg_ygreen {
  background-color: aquamarine;
  text-align: center;
}

.bg_skyBlue {
  background-color: skyblue;
  text-align: center;
}

.bg_yellow {
  background-color: yellow;
  text-align: center;
}

// Print-specific styles
@media print {
  body {
    padding: 0;
    background: $white;
  }

  .searchBox,
  .searchInfo,
  #printButton,
  #backButton,
  #printBtn {
    display: none !important;
  }

  @page {
    size: auto;
    margin: 0 -0cm;
  }

  html {
    margin: 0 0cm;
  }
}

// Responsive Design
@media screen and (max-width: $breakpoint-md) {
  .wrap {
    padding: $spacing-md;
  }

  .searchBox {
    padding: $spacing-md;

    &.row-two {
      flex-direction: column;
      align-items: flex-start;
      gap: $spacing-md;
    }
  }

  .form-inline {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;

    label {
      min-width: auto;
      margin-bottom: $spacing-xs;
    }

    .form-control {
      width: 100%;
    }

    // 조회기간: [년] [월] 한 줄 유지
    &--period {
      .period-selects {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $spacing-sm;
        width: 100%;

        .form-control {
          flex: 1;
          min-width: 0;
        }

        .period-unit {
          flex-shrink: 0;
          font-size: $font-size-sm;
          color: $text-dark;
        }
      }
    }
  }

  .btnBox {
    margin-left: 0;
    width: 100%;

    .btn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table-responsive {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

// Commission Print Page Specific
// Note: commissionPrint.html uses body class for scoping
body.commission-print-page {
  font-size: 12px;
  width: 600px;
  margin: 90px;
  font-family: $font-family-primary;

  div {
    position: relative;
  }

  table {
    border-collapse: collapse;

    th,
    td {
      padding: 5px 10px;
    }

    tr {
      font-size: 12px;
    }
  }

  h1 {
    text-align: center;

    img {
      width: 300px;
    }
  }

  h2 {
    margin-top: $spacing-2xl;
    float: left;
  }

  p {
    line-height: 1.6;

    &[style*="float: right"] {
      margin-top: 25px;
    }
  }

  // Print buttons
  .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .btn-primary {
    background: #667eea;
    color: white;

    &:hover {
      background: #5a67d8;
    }
  }
}