/* ===== Epsilos Reseller Portal ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --rp-bg:        oklch(0.975 0.004 150);
  --rp-surface:   #ffffff;
  --rp-ink:       oklch(0.27 0.012 155);
  --rp-ink-soft:  oklch(0.46 0.012 155);
  --rp-ink-faint: oklch(0.60 0.010 155);
  --rp-line:      oklch(0.925 0.006 155);
  --rp-line-soft: oklch(0.955 0.005 155);

  --rp-brand:      oklch(0.52 0.10 158);
  --rp-brand-deep: oklch(0.43 0.09 158);
  --rp-brand-tint: oklch(0.965 0.02 158);
  --rp-brand-line: oklch(0.90 0.04 158);

  --rp-radius: 16px;
  --rp-shadow-sm: 0 1px 2px oklch(0.4 0.02 155 / .06);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Manrope", system-ui, sans-serif;
  min-height:100vh;
  background:var(--rp-bg);
  color:var(--rp-ink);
  -webkit-font-smoothing:antialiased;
}

/* ----- auth screen (login + application) ----- */
.reseller-auth-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:40px 20px;
}
.reseller-auth-topbar{ position:absolute; top:20px; right:20px; }
.reseller-auth-card{
  width:100%; max-width:440px;
  background:var(--rp-surface); border:1px solid var(--rp-line);
  border-radius:var(--rp-radius); box-shadow:var(--rp-shadow-sm);
  padding:36px 32px;
}
.reseller-auth-logo{
  font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--rp-brand-deep); margin-bottom:18px; text-align:center;
}
.reseller-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:24px;
  background:var(--rp-line-soft); border-radius:11px;
}
.reseller-tab{
  flex:1; text-align:center; padding:9px 12px; border:0; border-radius:8px;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--rp-ink-faint);
  background:transparent; cursor:pointer; transition:.15s ease;
}
.reseller-tab.active{
  background:var(--rp-surface); color:var(--rp-brand-deep); box-shadow:var(--rp-shadow-sm);
  border:1px solid var(--rp-brand-line);
}

.reseller-panel{ display:none; }
.reseller-panel.active{ display:block; }
.reseller-panel h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.reseller-panel > p.reseller-hint{ font-size:13.5px; color:var(--rp-ink-faint); margin:0 0 20px; line-height:1.6; }

.reseller-alert{
  font-size:13px; border-radius:10px; padding:11px 14px; margin-bottom:16px; line-height:1.5;
}
.reseller-alert-error{ background:oklch(0.96 0.03 25); color:oklch(0.42 0.15 25); }
.reseller-alert-success{ background:var(--rp-brand-tint); color:var(--rp-brand-deep); }

.reseller-field{ margin-bottom:14px; }
.reseller-field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--rp-ink-soft);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.reseller-field input, .reseller-field textarea, .reseller-field select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--rp-ink);
  background:var(--rp-surface); border:1px solid var(--rp-line);
  border-radius:11px; padding:12px 15px; transition:.15s ease;
}
.reseller-field textarea{ resize:vertical; min-height:72px; }
.reseller-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23768079' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:36px;
}
.reseller-field input:focus, .reseller-field textarea:focus, .reseller-field select:focus{
  outline:none; border-color:var(--rp-brand); box-shadow:0 0 0 3px var(--rp-brand-tint);
}
.reseller-field-hint{ font-size:11.5px; color:var(--rp-ink-faint); margin-top:5px; }

.reseller-password-wrap{ position:relative; }
.reseller-password-wrap input{ padding-right:44px; }
.reseller-password-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px; color:var(--rp-ink-faint);
  cursor:pointer; transition:.15s ease; padding:0;
}
.reseller-password-toggle:hover{ background:var(--rp-line-soft); color:var(--rp-ink-soft); }
.reseller-password-toggle i{ font-size:16px; }

.reseller-theme-search{ width:100%; margin-bottom:10px; }
.reseller-theme-gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.reseller-theme-gallery-empty{
  grid-column:1 / -1; padding:20px; text-align:center; color:var(--rp-ink-faint); font-size:13px;
}
.reseller-theme-pager{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px;
}
.reseller-theme-pager-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--rp-line);
  background:var(--rp-surface); color:var(--rp-ink); font-size:16px; line-height:1; cursor:pointer;
  transition:.15s ease;
}
.reseller-theme-pager-btn:hover:not(:disabled){ border-color:var(--rp-brand); color:var(--rp-brand-deep); }
.reseller-theme-pager-btn:disabled{ opacity:.35; cursor:default; }
.reseller-theme-pager-label{ font-size:12.5px; font-weight:700; color:var(--rp-ink-soft); min-width:44px; text-align:center; }

@media (max-width: 640px){
  .reseller-theme-gallery{ grid-template-columns:repeat(2, 1fr); }
}
.reseller-theme-card{
  display:flex; flex-direction:column; gap:0; font-family:inherit; text-align:left;
  background:var(--rp-surface); border:2px solid var(--rp-line); border-radius:12px;
  padding:0; cursor:pointer; overflow:hidden; transition:.15s ease;
}
.reseller-theme-card:hover{ border-color:var(--rp-ink-faint); }
.reseller-theme-card.selected{ border-color:var(--rp-brand); box-shadow:0 0 0 3px var(--rp-brand-tint); }
.reseller-theme-card-image{
  width:100%; aspect-ratio:4/3; background-color:var(--rp-line-soft);
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.reseller-theme-card-name{
  padding:9px 11px; font-size:12.5px; font-weight:700; color:var(--rp-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reseller-theme-card.selected .reseller-theme-card-name{ color:var(--rp-brand-deep); }

.reseller-btn-primary{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; font-family:inherit; font-size:14.5px; font-weight:700; color:#fff;
  background:linear-gradient(150deg, var(--rp-brand), var(--rp-brand-deep));
  border:0; border-radius:11px; padding:13px 20px; cursor:pointer;
  box-shadow:0 6px 16px -8px var(--rp-brand); transition:.18s ease;
}
.reseller-btn-primary:hover{ filter:brightness(1.06); }
.reseller-btn-primary:disabled{ opacity:.6; cursor:default; filter:none; }

/* ----- progress bar + toast (mirrors the public kurulum wizard's .sw-progress/.sw-toast —
   wwwroot/themes/epsilos/css/style.css — same indeterminate-slide + persistent-toast pattern,
   reseller design tokens instead) ----- */
.reseller-progress{
  height:4px; border-radius:4px; background:var(--rp-line); overflow:hidden; margin:14px 0 0;
}
.reseller-progress span{
  display:block; height:100%; width:35%; border-radius:4px;
  background:linear-gradient(150deg, var(--rp-brand), var(--rp-brand-deep));
  animation:reseller-progress-slide 1.1s ease-in-out infinite;
}
@keyframes reseller-progress-slide{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(285%); } }

.reseller-toast{
  position:fixed; left:50%; bottom:1.8rem; transform:translateX(-50%); z-index:2000;
  display:flex; align-items:center; gap:.7rem; background:var(--rp-surface);
  border-left:5px solid var(--rp-brand); border-radius:12px;
  box-shadow:0 14px 34px oklch(0 0 0 / .2); padding:.9rem 1.2rem; max-width:min(92vw,440px);
  animation:reseller-toast-in .25s ease;
}
.reseller-toast-icon{ color:var(--rp-brand-deep); font-size:1.2rem; flex:none; }
.reseller-toast-msg{ font-family:inherit; font-weight:700; font-size:.92rem; color:var(--rp-ink); }
.reseller-toast-close{
  margin-left:.2rem; border:none; background:transparent; font-size:1.4rem; line-height:1;
  color:var(--rp-ink-faint); cursor:pointer; padding:0 .25rem; flex:none;
}
.reseller-toast.reseller-toast-error{ border-left-color:oklch(0.58 0.21 25); }
.reseller-toast.reseller-toast-error .reseller-toast-icon{ color:oklch(0.58 0.21 25); }
@keyframes reseller-toast-in{ from{ opacity:0; transform:translate(-50%,14px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ----- authenticated shell: top bar + left sidebar (starts below the bar) + main content ----- */
:root{ --rp-topbar-h: 60px; }
.reseller-shell-with-sidebar{ display:flex; flex-direction:column; min-height:100vh; }

.reseller-topbar{
  display:flex; align-items:center; gap:16px; height:var(--rp-topbar-h); flex:0 0 var(--rp-topbar-h);
  padding:0 20px; background:var(--rp-surface); border-bottom:1px solid var(--rp-line);
  position:sticky; top:0; z-index:20;
}
.reseller-topbar-brand{ display:flex; align-items:center; }
.reseller-logo{ height:36px; width:auto; display:block; }
.reseller-topbar-tools{ flex:1; display:flex; justify-content:flex-end; align-items:center; gap:12px; }

.reseller-lang-switcher{ display:flex; gap:2px; background:var(--rp-line-soft); border-radius:9px; padding:3px; }
.reseller-lang-switcher a{
  padding:5px 10px; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none;
  color:var(--rp-ink-faint); transition:.15s ease;
}
.reseller-lang-switcher a:hover{ color:var(--rp-ink); }
.reseller-lang-switcher a.active{ background:var(--rp-surface); color:var(--rp-brand-deep); box-shadow:var(--rp-shadow-sm); }

.reseller-body-row{ display:flex; align-items:stretch; flex:1; min-height:0; }

.reseller-sidebar{
  width:240px; flex:0 0 240px; display:flex; flex-direction:column;
  background:var(--rp-surface); border-right:1px solid var(--rp-line);
  position:sticky; top:var(--rp-topbar-h); height:calc(100vh - var(--rp-topbar-h));
}
.reseller-sidebar-nav{ display:flex; flex-direction:column; gap:2px; padding:16px 12px 0; flex:1; }
.reseller-sidebar-nav a{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px; text-decoration:none;
  font-size:13.5px; font-weight:700; color:var(--rp-ink-soft);
  border-left:3px solid transparent; transition:.15s ease;
}
.reseller-sidebar-nav a i{ font-size:16px; width:16px; text-align:center; flex-shrink:0; }
.reseller-sidebar-nav a:hover{ background:var(--rp-line-soft); color:var(--rp-ink); }
.reseller-sidebar-nav a.active{
  background:var(--rp-brand-tint); color:var(--rp-brand-deep); border-left-color:var(--rp-brand);
}
.reseller-sidebar-footer{
  padding:16px 22px 22px; border-top:1px solid var(--rp-line);
  display:flex; flex-direction:column; gap:10px;
}
.reseller-shell-company{ font-size:13px; color:var(--rp-ink-soft); }
.reseller-logout-btn{
  font-family:inherit; font-size:13px; font-weight:700; color:var(--rp-ink-soft);
  background:transparent; border:1px solid var(--rp-line); border-radius:9px;
  padding:7px 14px; cursor:pointer; transition:.15s ease; width:100%;
}
.reseller-logout-btn:hover{ border-color:var(--rp-ink-faint); color:var(--rp-ink); }

.reseller-sidebar-toggle{
  display:none; width:36px; height:36px; border-radius:10px; border:1px solid var(--rp-line);
  background:var(--rp-surface); cursor:pointer; flex:0 0 auto;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.reseller-sidebar-toggle span{ width:18px; height:2px; background:var(--rp-ink); border-radius:1px; }
.reseller-sidebar-backdrop{
  display:none; position:fixed; inset:0 0 0 0; top:var(--rp-topbar-h);
  background:oklch(0.2 0.01 155 / .4); z-index:25;
}

.reseller-main{ flex:1; min-width:0; }
.reseller-shell-body{ max-width:1080px; margin:0 auto; padding:32px 28px 60px; }
.reseller-shell-body h1{ font-size:20px; font-weight:800; margin:0 0 4px; }
.reseller-shell-body p.reseller-hint{ font-size:13.5px; color:var(--rp-ink-faint); margin:0 0 24px; }
.reseller-subheading{
  font-size:14.5px; font-weight:800; color:var(--rp-ink); margin:28px 0 4px;
  padding-top:20px; border-top:1px solid var(--rp-line);
}

.reseller-stat-grid{
  display:grid; grid-template-columns:repeat(1, 1fr); gap:16px; margin-bottom:28px;
}
@media (min-width: 640px){
  .reseller-stat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 992px){
  /* Bootstrap's col-lg-4 equivalent — 3 per row, 6 cards form two even rows. */
  .reseller-stat-grid{ grid-template-columns:repeat(3, 1fr); }
}
.reseller-stat-card{
  background:var(--rp-surface); border:1px solid var(--rp-line); border-radius:var(--rp-radius);
  padding:18px 20px; box-shadow:var(--rp-shadow-sm);
}
.reseller-stat-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--rp-ink); }
.reseller-stat-label{
  font-size:12px; font-weight:700; color:var(--rp-ink-faint); text-transform:uppercase;
  letter-spacing:.04em; margin-top:4px;
}
.reseller-stat-card.reseller-stat-accent .reseller-stat-value{ color:var(--rp-brand-deep); }

.reseller-chart-section{
  background:var(--rp-surface); border:1px solid var(--rp-line); border-radius:var(--rp-radius);
  padding:20px 22px 8px; box-shadow:var(--rp-shadow-sm); margin-bottom:28px;
}
.reseller-chart-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:8px;
}
.reseller-chart-header h2{ font-size:15px; font-weight:800; margin:0; }
.reseller-discount-badge{
  font-size:12px; font-weight:700; color:var(--rp-brand-deep);
  background:var(--rp-brand-tint); border-radius:999px; padding:4px 12px;
}
.reseller-chart-wrap{ width:100%; }
.reseller-chart-svg-wrap{ position:relative; width:100%; }
.reseller-chart-svg{ width:100%; height:auto; display:block; }
.reseller-chart-grid{ stroke:var(--rp-line); stroke-width:1; }
.reseller-chart-axis-label{ font-size:9.5px; fill:var(--rp-ink-faint); font-family:inherit; }
.reseller-chart-bar{ fill:var(--rp-brand-tint); stroke:var(--rp-brand-line); stroke-width:1; }
.reseller-chart-line{ fill:none; stroke:var(--rp-brand-deep); stroke-width:2; }
.reseller-chart-dot{ fill:var(--rp-brand-deep); transition:r .1s ease; }
.reseller-chart-hit{ fill:transparent; cursor:pointer; }
.reseller-chart-guide{
  stroke:var(--rp-ink-faint); stroke-width:1; stroke-dasharray:3 3; visibility:hidden; pointer-events:none;
}
.reseller-chart-tooltip{
  display:none; position:absolute; z-index:15; pointer-events:none;
  background:var(--rp-ink); color:#fff; border-radius:9px; padding:9px 12px;
  font-size:12px; line-height:1.6; box-shadow:0 8px 20px oklch(0.2 0.01 155 / .25); white-space:nowrap;
}
.reseller-chart-tooltip-title{ font-weight:800; font-size:11.5px; margin-bottom:3px; color:oklch(0.85 0.01 155); }
.reseller-chart-tooltip-row{ display:flex; align-items:center; gap:6px; }
.reseller-chart-tooltip-row strong{ margin-left:auto; padding-left:10px; }
.reseller-chart-legend{ display:flex; gap:18px; padding:10px 0 16px; font-size:12px; color:var(--rp-ink-soft); }
.reseller-chart-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.reseller-chart-swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.reseller-chart-swatch-bar{ background:var(--rp-brand-tint); border:1px solid var(--rp-brand-line); }
.reseller-chart-swatch-line{ background:var(--rp-brand-deep); border-radius:50%; }

.reseller-table-wrap{
  background:var(--rp-surface); border:1px solid var(--rp-line); border-radius:var(--rp-radius);
  overflow-x:auto; box-shadow:var(--rp-shadow-sm);
}
.reseller-table-toolbar{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--rp-line);
}
.reseller-search{
  font-family:inherit; font-size:13.5px; color:var(--rp-ink);
  padding:8px 12px; border:1px solid var(--rp-line); border-radius:9px;
  width:240px; max-width:100%; background:var(--rp-surface);
}
.reseller-search:focus{ outline:none; border-color:var(--rp-brand); box-shadow:0 0 0 3px var(--rp-brand-tint); }

.reseller-dt-columns{ position:relative; }
.reseller-dt-columns-btn{
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--rp-ink-soft);
  background:var(--rp-surface); border:1px solid var(--rp-line); border-radius:9px;
  padding:8px 14px; cursor:pointer; transition:.15s ease;
}
.reseller-dt-columns-btn:hover{ border-color:var(--rp-ink-faint); color:var(--rp-ink); }
.reseller-dt-columns-menu{
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:10; min-width:180px;
  background:var(--rp-surface); border:1px solid var(--rp-line); border-radius:11px;
  box-shadow:0 10px 30px oklch(0.2 0.01 155 / .14); padding:8px; flex-direction:column; gap:2px;
}
.reseller-dt-columns-menu.open{ display:flex; }
.reseller-dt-columns-item{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--rp-ink);
  padding:7px 8px; border-radius:7px; cursor:pointer;
}
.reseller-dt-columns-item:hover{ background:var(--rp-line-soft); }
.reseller-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
.reseller-table th{
  text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--rp-ink-faint); padding:12px 16px; border-bottom:1px solid var(--rp-line);
  white-space:nowrap;
}
.reseller-table th.reseller-th-sortable{ cursor:pointer; user-select:none; }
.reseller-table th.reseller-th-sortable::after{ content:'\2195'; opacity:.35; margin-left:5px; font-size:10px; }
.reseller-table th.reseller-th-sortable.sorted-asc::after{ content:'\2191'; opacity:1; color:var(--rp-brand-deep); }
.reseller-table th.reseller-th-sortable.sorted-desc::after{ content:'\2193'; opacity:1; color:var(--rp-brand-deep); }
.reseller-table td{ padding:13px 16px; border-bottom:1px solid var(--rp-line-soft); vertical-align:middle; }
.reseller-table tr:last-child td{ border-bottom:0; }
.reseller-table td.reseller-domain{ font-weight:700; }

.reseller-badge{
  display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px;
}
.reseller-badge-active{ background:var(--rp-brand-tint); color:var(--rp-brand-deep); }
.reseller-badge-expired{ background:oklch(0.96 0.03 25); color:oklch(0.42 0.15 25); }
.reseller-badge-pending{ background:oklch(0.96 0.04 85); color:oklch(0.5 0.12 75); }

.reseller-empty{ padding:48px 16px; text-align:center; color:var(--rp-ink-faint); font-size:13.5px; }

@media (max-width: 860px){
  /* Hamburger takes the left slot; the logo (already the only other topbar child before the empty
     tools slot) is pushed to the right, per "mobil ... header'da sağda en üstte" — the desktop-left
     logo placement is a plain flex order on a wide topbar, this is the same markup, just narrower. */
  .reseller-sidebar-toggle{ display:flex; order:1; }
  .reseller-topbar-brand{ order:2; margin-left:auto; }
  .reseller-topbar-tools{ order:3; flex:0 0 auto; }

  .reseller-sidebar{
    position:fixed; left:0; z-index:35; transform:translateX(-100%);
    box-shadow:0 0 0 transparent; transition:transform .2s ease;
  }
  .reseller-sidebar.open{ transform:translateX(0); box-shadow:8px 0 24px oklch(0.2 0.01 155 / .12); }
  .reseller-sidebar-backdrop.open{ display:block; }
}

@media (max-width: 640px){
  .reseller-shell-body{ padding-left:16px; padding-right:16px; }
  .reseller-auth-card{ padding:28px 22px; }
}
