// ════════════════════════════════════════════════════════════
//  FikoYT Paylasim Sistemi - Tema Degiskenleri
//  Dark/Light mode uyumlu CSS Custom Properties
// ════════════════════════════════════════════════════════════

// ─── Mixin: Light Mode (varsayilan) ───
@mixin paylasim-tema-light {
  // Yuzey renkleri
  --py-arkaplan: #ffffff;
  --py-arkaplan-yukselti: #fafafa;
  --py-arkaplan-hover: #f5f5f5;
  --py-arkaplan-aktif: #e8e8e8;
  --py-arkaplan-soluk: rgba(0, 0, 0, 0.04);
  --py-arkaplan-segment: #f9f9f9;

  // Metin renkleri
  --py-metin: rgba(0, 0, 0, 0.88);
  --py-metin-ikincil: rgba(0, 0, 0, 0.65);
  --py-metin-ucuncul: rgba(0, 0, 0, 0.45);
  --py-metin-devre-disi: rgba(0, 0, 0, 0.25);
  --py-metin-ters: #ffffff;

  // Kenarlık renkleri
  --py-kenarlik: #d9d9d9;
  --py-kenarlik-hover: #b3b3b3;
  --py-kenarlik-aktif: #1890ff;

  // Gölge
  --py-golge-kart: 0 1px 3px rgba(0, 0, 0, 0.08);
  --py-golge-kart-hover: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --py-golge-yukselti: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
  --py-golge-dialog: 0 6px 24px rgba(0, 0, 0, 0.12);

  // İlerleme çubuğu arka plan
  --py-ilerleme-arka: #f0f0f0;

  // Bölücü
  --py-bolucu: rgba(0, 0, 0, 0.06);

  // Placeholder metin
  --py-placeholder: slategrey;

  // Sayfalama
  --py-sayfalama-arka: white;
  --py-sayfalama-golge: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08);

  // Link rengi
  --py-link: #1890ff;
  --py-link-hover: #40a9ff;

  // Uyarı/Hata mesaj arka planları
  --py-uyari-arka: #fff7e6;
  --py-uyari-kenarlik: #ffe58f;
  --py-hata-arka: #fff2f0;
  --py-hata-kenarlik: #ffccc7;
  --py-basari-arka: #f6ffed;
  --py-basari-kenarlik: #b7eb8f;

  // Input
  --py-input-arka: #ffffff;
  --py-input-kenarlik: #d9d9d9;
  --py-input-metin: rgba(0, 0, 0, 0.88);

  // Overlay
  --py-overlay: rgba(0, 0, 0, 0.45);

  // Scrollbar
  --py-scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --py-scrollbar-track: transparent;
}

// ─── Mixin: Dark Mode ───
@mixin paylasim-tema-dark {
  // Yuzey renkleri
  --py-arkaplan: #1f1f1f;
  --py-arkaplan-yukselti: #2a2a2a;
  --py-arkaplan-hover: #333333;
  --py-arkaplan-aktif: #404040;
  --py-arkaplan-soluk: rgba(255, 255, 255, 0.06);
  --py-arkaplan-segment: #262626;

  // Metin renkleri
  --py-metin: rgba(255, 255, 255, 0.88);
  --py-metin-ikincil: rgba(255, 255, 255, 0.65);
  --py-metin-ucuncul: rgba(255, 255, 255, 0.45);
  --py-metin-devre-disi: rgba(255, 255, 255, 0.25);
  --py-metin-ters: #1f1f1f;

  // Kenarlık renkleri
  --py-kenarlik: #434343;
  --py-kenarlik-hover: #5a5a5a;
  --py-kenarlik-aktif: #177ddc;

  // Gölge
  --py-golge-kart: 0 1px 3px rgba(0, 0, 0, 0.3);
  --py-golge-kart-hover: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --py-golge-yukselti: 0 6px 16px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2);
  --py-golge-dialog: 0 6px 24px rgba(0, 0, 0, 0.4);

  // İlerleme çubuğu arka plan
  --py-ilerleme-arka: #303030;

  // Bölücü
  --py-bolucu: rgba(255, 255, 255, 0.08);

  // Placeholder metin
  --py-placeholder: rgba(255, 255, 255, 0.35);

  // Sayfalama
  --py-sayfalama-arka: #2a2a2a;
  --py-sayfalama-golge: 0px 4px 8px -2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.06);

  // Link rengi
  --py-link: #177ddc;
  --py-link-hover: #3c9ae8;

  // Uyarı/Hata mesaj arka planları
  --py-uyari-arka: #2b2111;
  --py-uyari-kenarlik: #594214;
  --py-hata-arka: #2c1618;
  --py-hata-kenarlik: #58181c;
  --py-basari-arka: #162312;
  --py-basari-kenarlik: #274916;

  // Input
  --py-input-arka: #2a2a2a;
  --py-input-kenarlik: #434343;
  --py-input-metin: rgba(255, 255, 255, 0.88);

  // Overlay
  --py-overlay: rgba(0, 0, 0, 0.65);

  // Scrollbar
  --py-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --py-scrollbar-track: transparent;
}

// ─── Root uygulama ───
// Light mode (varsayilan)
:root {
  @include paylasim-tema-light;
}

// Dark mode: class tabanlı (.tema-karanlik veya .dark-mode)
.tema-karanlik,
.dark-mode {
  @include paylasim-tema-dark;
}

// Dark mode: OS tercihi (prefers-color-scheme)
@media (prefers-color-scheme: dark) {
  :root:not(.tema-aydinlik) {
    @include paylasim-tema-dark;
  }
}

// ─── Yardımcı Sınıflar ───
// Dialog ve modal'lara tema uygulama
.py-dialog {
  background: var(--py-arkaplan);
  color: var(--py-metin);

  .header,
  .ui.header {
    color: var(--py-metin) !important;
  }

  .description,
  .meta {
    color: var(--py-metin-ikincil) !important;
  }

  // Semantic UI list tema uyumu
  .ui.selection.list .item {
    background: var(--py-arkaplan);
    color: var(--py-metin);
    border-color: var(--py-bolucu);

    &:hover {
      background: var(--py-arkaplan-hover);
    }

    &.active {
      background: var(--py-arkaplan-aktif);
    }

    .content .header {
      color: var(--py-metin) !important;
    }

    .content .description {
      color: var(--py-metin-ucuncul) !important;
    }
  }

  // Semantic UI input tema uyumu
  .ui.input input,
  input[type="text"] {
    background: var(--py-input-arka) !important;
    color: var(--py-input-metin) !important;
    border-color: var(--py-input-kenarlik) !important;

    &::placeholder {
      color: var(--py-placeholder) !important;
    }
  }

  // Semantic UI placeholder segment
  .ui.placeholder.segment {
    background: var(--py-arkaplan-segment);
    border-color: var(--py-kenarlik);

    .ui.icon.header {
      color: var(--py-metin-ucuncul) !important;
    }
  }

  // Semantic UI divider
  .ui.divider {
    border-color: var(--py-bolucu) !important;
  }

  // Semantic UI form
  .ui.form .grouped.fields {
    color: var(--py-metin);
  }

  // Scrollbar tema uyumu
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--py-scrollbar-thumb);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: var(--py-scrollbar-track);
  }
}

// ─── ng-zorro Modal Dark Mode ───
.tema-karanlik,
.dark-mode {
  .ant-modal-content {
    background: var(--py-arkaplan);
    color: var(--py-metin);
  }

  .ant-modal-header {
    background: var(--py-arkaplan);
    border-bottom-color: var(--py-bolucu);

    .ant-modal-title {
      color: var(--py-metin);
    }
  }

  .ant-modal-close-x {
    color: var(--py-metin-ikincil);
  }

  .ant-modal-footer {
    border-top-color: var(--py-bolucu);
  }

  // ng-zorro Drawer dark mode
  .ant-drawer-content {
    background: var(--py-arkaplan);
    color: var(--py-metin);
  }

  .ant-drawer-header {
    background: var(--py-arkaplan);
    border-bottom-color: var(--py-bolucu);

    .ant-drawer-title {
      color: var(--py-metin);
    }
  }

  // ng-zorro Modal body/footer dark mode
  .ant-modal-body {
    color: var(--py-metin);
  }

  .ant-modal-footer {
    background: var(--py-arkaplan);

    .ant-btn-default {
      background: var(--py-arkaplan-yukselti);
      color: var(--py-metin);
      border-color: var(--py-kenarlik);

      &:hover {
        background: var(--py-arkaplan-hover);
        border-color: var(--py-kenarlik-hover);
        color: var(--py-metin);
      }
    }
  }

  .ant-modal-confirm-body {
    .ant-modal-confirm-title {
      color: var(--py-metin);
    }
    .ant-modal-confirm-content {
      color: var(--py-metin-ikincil);
    }
  }

  // ng-zorro Popover/Popconfirm dark mode
  .ant-popover-inner {
    background: var(--py-arkaplan-yukselti);
    color: var(--py-metin);
  }

  .ant-popover-message-title {
    color: var(--py-metin);
  }

  .ant-popover-arrow-content,
  .ant-popover-arrow::before,
  .ant-popover-arrow::after {
    background: var(--py-arkaplan-yukselti);
  }

  .ant-popconfirm-buttons {
    .ant-btn-default {
      background: var(--py-arkaplan-yukselti);
      color: var(--py-metin);
      border-color: var(--py-kenarlik);

      &:hover {
        background: var(--py-arkaplan-hover);
        border-color: var(--py-kenarlik-hover);
        color: var(--py-metin);
      }
    }
  }

  // ng-zorro Tooltip dark mode
  .ant-tooltip-inner {
    background: var(--py-arkaplan-hover);
    color: var(--py-metin);
  }

  .ant-tooltip-arrow-content,
  .ant-tooltip-arrow::before {
    background: var(--py-arkaplan-hover);
  }

  // ng-zorro Notification dark mode
  .ant-notification-notice {
    background: var(--py-arkaplan-yukselti);
    color: var(--py-metin);
    box-shadow: var(--py-golge-yukselti);

    .ant-notification-notice-message {
      color: var(--py-metin);
    }

    .ant-notification-notice-description {
      color: var(--py-metin-ikincil);
    }

    .ant-notification-notice-close {
      color: var(--py-metin-ucuncul);

      &:hover {
        color: var(--py-metin);
      }
    }
  }

  // ng-zorro Dropdown dark mode
  .ant-dropdown-menu {
    background: var(--py-arkaplan-yukselti);
    box-shadow: var(--py-golge-yukselti);

    .ant-dropdown-menu-item {
      color: var(--py-metin);

      &:hover {
        background: var(--py-arkaplan-hover);
      }

      &-disabled {
        color: var(--py-metin-devre-disi);
      }
    }

    .ant-dropdown-menu-item-divider {
      background: var(--py-bolucu);
    }
  }

  // ng-zorro Tabs dark mode
  .ant-tabs {
    color: var(--py-metin);

    .ant-tabs-tab {
      color: var(--py-metin-ikincil);

      &:hover {
        color: var(--py-metin);
      }

      &.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: var(--py-kenarlik-aktif);
      }
    }

    .ant-tabs-ink-bar {
      background: var(--py-kenarlik-aktif);
    }

    .ant-tabs-nav::before {
      border-bottom-color: var(--py-bolucu);
    }
  }

  // ng-zorro Alert dark mode
  .ant-alert {
    &-warning {
      background: var(--py-uyari-arka);
      border-color: var(--py-uyari-kenarlik);
    }

    &-error {
      background: var(--py-hata-arka);
      border-color: var(--py-hata-kenarlik);
    }

    &-success {
      background: var(--py-basari-arka);
      border-color: var(--py-basari-kenarlik);
    }

    &-info {
      background: rgba(23, 125, 220, 0.1);
      border-color: rgba(23, 125, 220, 0.3);
    }

    &-message {
      color: var(--py-metin);
    }

    &-description {
      color: var(--py-metin-ikincil);
    }
  }

  // ng-zorro Table dark mode
  .ant-table {
    background: var(--py-arkaplan);
    color: var(--py-metin);

    .ant-table-thead > tr > th {
      background: var(--py-arkaplan-yukselti);
      color: var(--py-metin);
      border-bottom-color: var(--py-bolucu);
    }

    .ant-table-tbody > tr > td {
      border-bottom-color: var(--py-bolucu);
      color: var(--py-metin);
    }

    .ant-table-tbody > tr:hover > td {
      background: var(--py-arkaplan-hover);
    }

    .ant-table-tbody > tr.ant-table-row-selected > td {
      background: var(--py-arkaplan-aktif);
    }

    .ant-empty-description {
      color: var(--py-metin-ucuncul);
    }
  }

  // ng-zorro Form dark mode
  .ant-form {
    color: var(--py-metin);

    .ant-form-item-label > label {
      color: var(--py-metin);
    }

    .ant-form-item-explain {
      color: var(--py-metin-ikincil);
    }
  }

  // ng-zorro Select dark mode
  .ant-select {
    &:not(.ant-select-customize-input) .ant-select-selector {
      background: var(--py-input-arka);
      border-color: var(--py-input-kenarlik);
      color: var(--py-input-metin);
    }

    .ant-select-arrow {
      color: var(--py-metin-ucuncul);
    }

    .ant-select-clear {
      background: var(--py-input-arka);
      color: var(--py-metin-ucuncul);
    }
  }

  // ng-zorro Empty dark mode
  .ant-empty-description {
    color: var(--py-metin-ucuncul);
  }

  // ng-zorro Divider dark mode
  .ant-divider {
    border-top-color: var(--py-bolucu);
    color: var(--py-metin-ucuncul);

    .ant-divider-inner-text {
      color: var(--py-metin-ucuncul);
    }
  }

  // ng-zorro Button typleri dark mode
  .ant-btn-text {
    color: var(--py-metin);

    &:hover {
      background: var(--py-arkaplan-hover);
      color: var(--py-metin);
    }
  }

  .ant-btn-dashed {
    background: var(--py-arkaplan-yukselti);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);

    &:hover {
      border-color: var(--py-kenarlik-aktif);
      color: var(--py-kenarlik-aktif);
    }
  }

  // ng-zorro DatePicker/TimePicker dark mode
  .ant-picker {
    background: var(--py-input-arka);
    border-color: var(--py-input-kenarlik);
    color: var(--py-input-metin);

    .ant-picker-suffix,
    .ant-picker-clear {
      color: var(--py-metin-ucuncul);
    }

    .ant-picker-input > input {
      color: var(--py-input-metin);
    }
  }

  .ant-picker-dropdown {
    .ant-picker-panel-container {
      background: var(--py-arkaplan-yukselti);
      box-shadow: var(--py-golge-yukselti);
    }

    .ant-picker-header {
      color: var(--py-metin);
      border-bottom-color: var(--py-bolucu);

      button {
        color: var(--py-metin-ikincil);

        &:hover {
          color: var(--py-metin);
        }
      }
    }

    .ant-picker-body {
      th {
        color: var(--py-metin-ucuncul);
      }
    }

    .ant-picker-cell {
      color: var(--py-metin-devre-disi);

      &-in-view {
        color: var(--py-metin);
      }
    }

    .ant-picker-footer {
      border-top-color: var(--py-bolucu);
    }
  }

  // ng-zorro Drawer close button dark mode
  .ant-drawer-close {
    color: var(--py-metin-ikincil);

    &:hover {
      color: var(--py-metin);
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.tema-aydinlik) {
    .ant-modal-content {
      background: var(--py-arkaplan);
      color: var(--py-metin);
    }

    .ant-modal-header {
      background: var(--py-arkaplan);
      border-bottom-color: var(--py-bolucu);
      .ant-modal-title { color: var(--py-metin); }
    }

    .ant-modal-close-x { color: var(--py-metin-ikincil); }

    .ant-drawer-content {
      background: var(--py-arkaplan);
      color: var(--py-metin);
    }

    .ant-drawer-header {
      background: var(--py-arkaplan);
      border-bottom-color: var(--py-bolucu);
      .ant-drawer-title { color: var(--py-metin); }
    }

    .ant-popover-inner {
      background: var(--py-arkaplan-yukselti);
      color: var(--py-metin);
    }

    .ant-popover-message-title { color: var(--py-metin); }

    .ant-popover-arrow-content,
    .ant-popover-arrow::before,
    .ant-popover-arrow::after { background: var(--py-arkaplan-yukselti); }

    .ant-modal-body { color: var(--py-metin); }
    .ant-modal-footer {
      background: var(--py-arkaplan);
      .ant-btn-default {
        background: var(--py-arkaplan-yukselti);
        color: var(--py-metin);
        border-color: var(--py-kenarlik);
      }
    }
    .ant-modal-confirm-body {
      .ant-modal-confirm-title { color: var(--py-metin); }
      .ant-modal-confirm-content { color: var(--py-metin-ikincil); }
    }

    .ant-tooltip-inner { background: var(--py-arkaplan-hover); color: var(--py-metin); }
    .ant-notification-notice {
      background: var(--py-arkaplan-yukselti);
      color: var(--py-metin);
      .ant-notification-notice-message { color: var(--py-metin); }
      .ant-notification-notice-description { color: var(--py-metin-ikincil); }
    }
    .ant-dropdown-menu {
      background: var(--py-arkaplan-yukselti);
      .ant-dropdown-menu-item { color: var(--py-metin); &:hover { background: var(--py-arkaplan-hover); } }
    }
    .ant-table {
      background: var(--py-arkaplan); color: var(--py-metin);
      .ant-table-thead > tr > th { background: var(--py-arkaplan-yukselti); color: var(--py-metin); border-bottom-color: var(--py-bolucu); }
      .ant-table-tbody > tr > td { border-bottom-color: var(--py-bolucu); }
      .ant-table-tbody > tr:hover > td { background: var(--py-arkaplan-hover); }
    }
    .ant-tabs { color: var(--py-metin); .ant-tabs-tab { color: var(--py-metin-ikincil); } .ant-tabs-nav::before { border-bottom-color: var(--py-bolucu); } }
    .ant-alert-message { color: var(--py-metin); }
    .ant-form .ant-form-item-label > label { color: var(--py-metin); }
    .ant-select:not(.ant-select-customize-input) .ant-select-selector { background: var(--py-input-arka); border-color: var(--py-input-kenarlik); color: var(--py-input-metin); }
    .ant-divider { border-top-color: var(--py-bolucu); }
    .ant-btn-text { color: var(--py-metin); }
    .ant-btn-dashed { background: var(--py-arkaplan-yukselti); color: var(--py-metin); border-color: var(--py-kenarlik); }
    .ant-picker { background: var(--py-input-arka); border-color: var(--py-input-kenarlik); color: var(--py-input-metin); }
    .ant-empty-description { color: var(--py-metin-ucuncul); }
  }
}

// ─── Semantic UI Dark Mode Override ───
.tema-karanlik,
.dark-mode {
  // Semantic UI Card
  .ui.cards > .card,
  .ui.card {
    background: var(--py-arkaplan);
    color: var(--py-metin);
    box-shadow: var(--py-golge-kart);
    border-color: var(--py-kenarlik);

    > .content > .header { color: var(--py-metin); }
    > .content > .meta { color: var(--py-metin-ikincil); }
    > .content > .description { color: var(--py-metin); }
    > .extra { border-top-color: var(--py-bolucu) !important; }
  }

  // Semantic UI Header / Block Header
  .ui.header,
  .ui.block.header {
    color: var(--py-metin);
    background: var(--py-arkaplan-yukselti);
    border-color: var(--py-kenarlik);
  }

  // Semantic UI Button
  .ui.button,
  .ui.basic.button {
    color: var(--py-metin);
    background: var(--py-arkaplan-yukselti);
    border-color: var(--py-kenarlik);

    &:hover {
      background: var(--py-arkaplan-hover);
      color: var(--py-metin);
    }
  }

  .ui.icon.button {
    color: var(--py-metin-ikincil);
  }

  // Semantic UI Segment
  .ui.segment {
    background: var(--py-arkaplan);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);
  }

  // Semantic UI Divider
  .ui.divider {
    border-color: var(--py-bolucu) !important;
    color: var(--py-metin-ucuncul);
  }

  // Semantic UI Message
  .ui.message {
    background: var(--py-arkaplan-yukselti);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);
  }

  // Semantic UI Label
  .ui.label {
    background: var(--py-arkaplan-hover);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);
  }

  // Semantic UI Input
  .ui.input > input,
  .ui.form input[type="text"],
  .ui.form textarea {
    background: var(--py-input-arka);
    color: var(--py-input-metin);
    border-color: var(--py-input-kenarlik);

    &::placeholder { color: var(--py-placeholder); }
  }

  // ng-zorro input/button/tag tema
  .ant-input,
  nz-input {
    background: var(--py-input-arka);
    color: var(--py-input-metin);
    border-color: var(--py-input-kenarlik);
  }

  .ant-btn-default {
    background: var(--py-arkaplan-yukselti);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);

    &:hover {
      background: var(--py-arkaplan-hover);
      border-color: var(--py-kenarlik-hover);
    }
  }

  .ant-tag {
    background: var(--py-arkaplan-hover);
    color: var(--py-metin);
    border-color: var(--py-kenarlik);
  }

  // Tema uyumlu yardımcı sınıflar (inline style yerine)
  .py-beyaz-arka {
    background-color: var(--py-arkaplan) !important;
  }

  .py-soluk-arka {
    background: var(--py-arkaplan-yukselti) !important;
    border-color: var(--py-bolucu) !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.tema-aydinlik) {
    .ui.cards > .card,
    .ui.card {
      background: var(--py-arkaplan);
      color: var(--py-metin);
      box-shadow: var(--py-golge-kart);
    }
    .ui.header, .ui.block.header {
      color: var(--py-metin);
      background: var(--py-arkaplan-yukselti);
    }
    .ui.button, .ui.basic.button {
      color: var(--py-metin);
      background: var(--py-arkaplan-yukselti);
    }
  }
}

// Tema uyumlu yardımcı sınıflar (her zaman mevcut)
.py-beyaz-arka {
  background-color: var(--py-arkaplan);
  padding: 1rem;
  border-radius: 5px;
}

.py-soluk-arka {
  background: var(--py-arkaplan-yukselti);
  border-color: var(--py-bolucu);
}

// ─── Kart Tema Sınıfı ───
.py-kart {
  background: var(--py-arkaplan);
  color: var(--py-metin);
  box-shadow: var(--py-golge-kart);
  border-color: var(--py-kenarlik);

  .content {
    .header {
      color: var(--py-metin) !important;
    }
    .meta {
      color: var(--py-metin-ikincil) !important;
    }
    .description {
      color: var(--py-metin) !important;
    }
  }

  .extra.content {
    border-top-color: var(--py-bolucu) !important;
  }

  // Mesaj tema uyumu
  .ui.warning.message {
    background: var(--py-uyari-arka);
    border-color: var(--py-uyari-kenarlik);
    color: var(--py-metin);

    .header {
      color: var(--py-metin) !important;
    }
  }

  .ui.error.message {
    background: var(--py-hata-arka);
    border-color: var(--py-hata-kenarlik);
    color: var(--py-metin);

    .header {
      color: var(--py-metin) !important;
    }
  }

  .ui.positive.message {
    background: var(--py-basari-arka);
    border-color: var(--py-basari-kenarlik);
    color: var(--py-metin);
  }
}