// /src/assets/styles/main.scss

@use '@fontsource/vazirmatn/400.css' as *;
@use '@fontsource/vazirmatn/500.css' as *;
@use '@fontsource/vazirmatn/700.css' as *;

@use './light-theme' as *;
@use './dark-theme' as *;
@use './rtl-overrides' as *;



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--app-font-size, 14px);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  &:hover {
    color: var(--primary-color-hover);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
  &:hover {
    background: var(--text-secondary);
  }
}

/* ==========================================
   Global Border Polish (Removing Harsh Outlines)
   ========================================== */
.border-color,
.border-1,
.border-top-1,
.border-bottom-1,
.border-left-1,
.border-right-1 {
  border-color: var(--border-color) !important;
}

.surface-card,
.p-component,
.p-card,
.p-panel,
.p-datatable,
.p-datatable-header,
.p-datatable-thead > tr > th,
.p-datatable-tbody > tr > td,
.p-paginator,
.p-dialog,
.p-sidebar,
.p-menu,
.p-select,
.p-inputtext,
.p-button {
  border-color: var(--border-color) !important;
}

/* ==========================================
   Vue Persian Datetime Picker Styling & Theme
   Theme & coloring rebuilt from scratch using CSS variables
   ========================================== */
.vpd-wrapper {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important;

  .vpd-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--surface-card) !important;
  }

  .vpd-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%) !important;
    color: #ffffff !important;

    .vpd-year-label,
    .vpd-year-label span {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    .vpd-date,
    .vpd-date span {
      color: #ffffff !important;
      font-weight: 700 !important;
    }
  }

  .vpd-content {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
  }

  .vpd-controls {
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl !important;
    padding: 6px 10px;

    .vpd-prev {
      order: 1 !important;

      svg {
        transform: rotate(180deg) !important;
      }
    }

    .vpd-month-label {
      order: 2 !important;
      flex: 1 !important;
      text-align: center !important;
    }

    .vpd-next {
      order: 3 !important;

      svg {
        transform: rotate(0deg) !important;
      }
    }

    .vpd-next,
    .vpd-prev,
    button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 8px !important;
      background-color: var(--surface-ground) !important;
      border: 1px solid var(--border-color) !important;
      color: var(--text-primary) !important;
      cursor: pointer;
      transition: all 0.2s ease;

      svg {
        width: 14px !important;
        height: 14px !important;
        fill: var(--text-primary) !important;

        path {
          fill: var(--text-primary) !important;
        }
      }

      &:hover:not([disabled="true"]) {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #ffffff !important;

        svg,
        svg path {
          fill: #ffffff !important;
        }
      }

      &[disabled="true"] {
        opacity: 0.3 !important;
        cursor: not-allowed !important;
      }
    }

    .vpd-month-label {
      span {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        border: 1px solid var(--border-color) !important;
        background-color: var(--surface-ground) !important;

        &:hover {
          background-color: var(--surface-hover) !important;
          border-color: var(--primary-color) !important;
        }
      }
    }
  }

  .vpd-up-arrow-btn,
  .vpd-down-arrow-btn {
    svg,
    svg path {
      fill: var(--text-primary) !important;
    }
    &:hover {
      svg,
      svg path {
        fill: var(--primary-color) !important;
      }
    }
  }


  .vpd-week {
    .vpd-weekday {
      color: var(--text-muted) !important;
      font-weight: 600 !important;
    }
  }

  .vpd-days {
    .vpd-day {
      color: var(--text-primary) !important;

      .vpd-day-text {
        color: var(--text-primary) !important;
        font-weight: 500;
      }

      &:not([disabled="true"]):hover:not(.vpd-selected):not(.vpd-empty) {
        .vpd-day-effect {
          background-color: var(--surface-hover) !important;
          opacity: 0.9 !important;
        }
      }

      &.vpd-selected {
        .vpd-day-effect {
          background-color: var(--primary-color) !important;
          opacity: 1 !important;
        }
        .vpd-day-text {
          color: #ffffff !important;
          font-weight: 700 !important;
        }
      }

      &.vpd-range-first,
      &.vpd-range-last,
      &.vpd-range-between,
      &.vpd-range-hover {
        .vpd-day-effect {
          background-color: var(--primary-color-light) !important;
          opacity: 1 !important;
        }
        .vpd-day-text {
          color: var(--primary-color) !important;
        }
      }

      &[disabled="true"] {
        .vpd-day-text {
          color: var(--text-muted) !important;
          opacity: 0.4 !important;
        }
      }

      &.vpd-empty {
        background: transparent !important;
      }
    }
  }

  .vpd-actions {
    border-top: 1px solid var(--border-color) !important;
    background-color: var(--surface-card) !important;

    button {
      color: var(--primary-color) !important;
      font-weight: 700 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      transition: background-color 0.15s ease, color 0.15s ease;

      &:hover {
        background-color: var(--primary-color-light) !important;
      }
    }
  }

  .vpd-addon-list {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;

    .vpd-addon-list-item {
      color: var(--text-secondary) !important;
      background-color: transparent !important;

      &:hover {
        background-color: var(--surface-hover) !important;
        color: var(--text-primary) !important;
      }

      &.vpd-selected {
        background-color: var(--primary-color-light) !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
      }

      &[disabled="true"] {
        color: var(--text-muted) !important;
        opacity: 0.4 !important;
      }
    }
  }

  .vpd-close-addon {
    color: var(--text-primary) !important;
    background-color: var(--surface-hover) !important;
  }
}

/* ==========================================
   Global High-Contrast Hover & Selection States
   ========================================== */
.p-datatable-tbody > tr {
  transition: background-color 0.15s ease;
  &:hover {
    background-color: var(--surface-hover) !important;
  }
}

.p-select-option,
.p-dropdown-item {
  transition: all 0.15s ease;
  &:hover {
    background-color: var(--primary-color-light) !important;
    color: var(--primary-color) !important;
  }
  &.p-select-option-selected,
  &.p-highlight {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
  }
}

/* ==========================================
   Responsive Tabs & TabList Horizontal Scroll
   ========================================== */
.p-tablist {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

.p-tablist-tab-list {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}