/* ═══════════════════════════════════════════════════════
   tonguçWORKS Üretim Planlama — Design Tokens & Stiller
   GAS'taki Index.html <style> bloğundan taşındı
   ═══════════════════════════════════════════════════════ */

:root {
  /* Tipografi */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Premium Açık Tema */
  --bg-primary: #f4f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f7f8fb;
  --bg-kpi: #ffffff;
  
  /* Marka Renkleri */
  --brand-primary: #F97316;
  --brand-primary-dark: #EA580C;
  --brand-secondary: #6366f1;
  --brand-secondary-dark: #4f46e5;
  
  /* Metin */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  
  /* Kenarlar */
  --border-light: #e6e9f0;
  --border-medium: #d7dce6;
  
  /* Gölgeler */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.035);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.075), 0 2px 6px rgba(15,23,42,0.035);
  --shadow-lg: 0 18px 48px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.06);
  
  /* Tablo Başlık */
  --table-header-bg: #243247;
  --table-header-hover: #304158;
  --table-header-border: rgba(255,255,255,0.16);
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  
  /* Geçişler */
  --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 8% -12%, rgba(249,115,22,.08), transparent 26%),
    radial-gradient(circle at 88% -18%, rgba(99,102,241,.055), transparent 28%);
  margin: 0;
  color: var(--text-primary);
}

/* ═══ LOADER ═══ */
.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--brand-primary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.pulse {
  animation: pulseAnim 1.5s infinite;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══ HEADER ═══ */
.app-header {
  background: linear-gradient(100deg, #fff7ed 0%, rgba(255,255,255,.98) 32%, #ffffff 100%);
  border-bottom: 1px solid var(--border-light);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 6px 22px rgba(15,23,42,.045);
  backdrop-filter: blur(14px);
}

.app-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

.app-header .logo i {
  color: var(--brand-primary);
  font-size: 18px;
  filter: drop-shadow(0 4px 8px rgba(249,115,22,.22));
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══ TABS ═══ */
.tab-bar {
  display: flex;
  gap: 5px;
  padding: 7px 24px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.tab-btn {
  padding: 7px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-btn:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--text-primary);
}

.tab-btn.active {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: white;
  box-shadow: 0 5px 14px rgba(249,115,22,.24);
}

.tab-btn i {
  font-size: 12px;
}

/* ═══ KPI KARTLARI ═══ */
.kpi-bar {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  overflow-x: auto;
}

.kpi-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-secondary);
  border: 1px solid rgba(215,220,230,.85);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition-base);
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(249,115,22,.28);
}

.kpi-card.active {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.kpi-card .kpi-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-card .kpi-value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
}

.kpi-card[data-filter="acil"] .kpi-value { color: #dc2626; }
.kpi-card[data-filter="uyari"] .kpi-value { color: #ca8a04; }
.kpi-card[data-filter="dikkat"] .kpi-value { color: #f59e0b; }
.kpi-card[data-filter="guvenli"] .kpi-value { color: #22c55e; }

/* ═══ TOOLBAR ═══ */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0 12px;
  width: 320px;
  transition: var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(249,115,22,0.15);
}

.search-box i {
  color: var(--text-tertiary);
  font-size: 13px;
}

.search-box input {
  border: none;
  outline: none;
  padding: 8px;
  font-size: 13px;
  font-family: var(--font-primary);
  background: transparent;
  width: 100%;
  color: var(--text-primary);
}

.toolbar-info {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ═══ TABLO ═══ */
.table-container {
  flex: 1;
  overflow: auto;
  padding: 0 24px 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.data-table th {
  background: var(--table-header-bg);
  color: var(--text-inverse);
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--table-header-border);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.data-table th:hover {
  background: var(--table-header-hover);
}

.data-table th:last-child {
  border-right: none;
}

.data-table th .sort-icon {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.3;
}

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  white-space: nowrap;
}

.data-table td.left-align,
.data-table th.left-align {
  text-align: left;
}

.data-table tbody tr:hover td {
  background: rgba(99,102,241,0.04);
}

/* ═══ GELİŞMİŞ STOK EKRANI ═══ */
.stok-kpi-bar {
  display: grid;
  grid-template-columns: 1.4fr repeat(8, minmax(76px, 1fr)) 1.75fr;
  gap: 7px;
  padding: 10px 12px 8px;
  flex: 0 0 auto;
  overflow: visible;
}

.stok-kpi-bar .kpi-card {
  position: relative;
  min-width: 0;
  padding: 9px 8px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.stok-kpi-bar .kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(249,115,22,.9), rgba(251,146,60,.18));
}

.stok-kpi-bar .kpi-label {
  display: block;
  font-size: 8px;
  line-height: 1.25;
}

.stok-kpi-bar .kpi-value {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.1;
}

.kpi-value.success { color: #059669; }
.kpi-value.danger { color: #dc2626; }
.kpi-value.warning { color: #ca8a04; }
.kpi-value.info { color: #0891b2; }
.kpi-value.primary { color: #2563eb; }
.kpi-value.purple { color: #9333ea; }

.stok-kpi-bar .kpi-combined {
  display: grid;
  grid-template-columns: repeat(3, minmax(62px, 1fr));
  min-width: 0;
  cursor: default;
  background: linear-gradient(145deg, #ffffff, #f3f8ff);
}

.kpi-combined > div + div {
  border-left: 1px solid #dbeafe;
}

.stok-kpi-bar .kpi-distribution {
  min-width: 0;
  cursor: default;
  background: linear-gradient(145deg, #ffffff, #f0fdf7);
}

.distribution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 5px;
}

.distribution-grid span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.distribution-grid span + span { border-left: 1px solid #d1fae5; }
.distribution-grid b { color: #047857; font-size: 12px; }
.distribution-grid small { color: #0f766e; font-size: 8px; }
.distribution-grid em { color: #166534; font-size: 7px; font-style: normal; }

.stok-toolbar {
  margin: 0 12px 8px;
  padding: 7px 9px;
  flex: 0 0 auto;
  border: 1px solid rgba(215,220,230,.85);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text-secondary);
  padding: 6px 9px;
  font: 600 11px var(--font-primary);
  cursor: pointer;
}

.toolbar-btn:hover { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.toolbar-btn.export-btn { background: #059669; border-color: #059669; color: white; }
.toolbar-btn.export-btn:hover { background: #047857; }

#content-stok .table-container {
  margin: 0 12px;
  padding: 0;
  min-height: 0;
  border: 1px solid rgba(215,220,230,.9);
  border-radius: 11px 11px 0 0;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15,23,42,.055);
  overflow-y: auto;
}

#stokTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(8.5px, .57vw, 10.5px);
}
#stokTable th {
  height: 42px;
  padding: 5px 2px;
  font-size: clamp(8px, .5vw, 9.5px);
  line-height: 1.12;
  letter-spacing: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--brand-primary);
}
#stokTable td {
  height: 30px;
  padding: 4px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid rgba(230,233,240,.7);
}
#stokTable th:last-child,
#stokTable td:last-child { border-right: 0; }
#stokTable .stock-header-label { vertical-align: middle; }
#stokTable .product-name { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#stokTable tbody tr:nth-child(even) td { background-color: rgba(248,250,252,.62); }

.column-filter-icon { margin-left: 2px; opacity: .58; font-size: 7px; }
.column-filter-icon.active { opacity: 1; color: #fb923c; }

.days-value { font-weight: 750; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.035); }
.status-dot.active { background: #22c55e; }
.status-dot.inactive { background: #ef4444; }

.note-button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 5px;
}
.note-button.has-note { color: #16a34a; }

.quick-note-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  padding: 3px 4px;
  font: inherit;
  color: var(--text-secondary);
}
.quick-note-input:hover { border-color: var(--border-medium); background: white; }
.quick-note-input:focus { outline: none; border-color: var(--brand-primary); background: white; box-shadow: 0 0 0 2px rgba(249,115,22,.12); }

.virtual-stock-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 3px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 6px;
  font-weight: 700;
  vertical-align: middle;
}

#stokTableBody tr.row-critical td { background: rgba(254,226,226,.55); }
#stokTableBody tr.row-warning td { background: rgba(255,237,213,.55); }
#stokTableBody tr.row-watch td { background: rgba(254,249,195,.5); }
#stokTableBody tr:hover td { filter: brightness(.98); }
#stokTable td.selected { background: #dbeafe !important; outline: 1px solid #60a5fa; outline-offset: -1px; }

.empty-table-cell {
  text-align: center !important;
  padding: 40px !important;
  color: var(--text-tertiary);
}
.empty-table-cell i { display: block; font-size: 22px; margin-bottom: 8px; }

.stok-status-bar {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 0 auto;
  padding: 5px 14px;
  margin: 0 12px 8px;
  border: 1px solid rgba(215,220,230,.9);
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(90deg, #ffffff, #f8fafc);
  color: #64748b;
  font-size: 10px;
}
.stok-status-bar span:first-child { margin-right: auto; }
.stok-status-bar b { color: #c2410c; }

.column-filter-dropdown {
  display: none;
  position: fixed;
  z-index: 1500;
  width: 284px;
  max-height: 410px;
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: var(--shadow-lg);
}
.column-filter-dropdown.show { display: flex; flex-direction: column; }
.filter-sort-actions { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-light); }
.filter-sort-actions button, .column-filter-actions button {
  border: 0;
  background: white;
  padding: 9px;
  font: 600 10px var(--font-primary);
  color: var(--text-secondary);
  cursor: pointer;
}
.filter-sort-actions button:hover, .column-filter-actions button:hover { background: var(--bg-tertiary); }
#columnFilterSearch { margin: 8px; padding: 7px 9px; border: 1px solid var(--border-medium); border-radius: 5px; outline: none; font: 11px var(--font-primary); }
#columnFilterSearch:focus { border-color: var(--brand-primary); }
.column-filter-options { overflow-y: auto; min-height: 80px; max-height: 235px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.filter-option { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 10px; cursor: pointer; }
.filter-option:hover { background: var(--bg-tertiary); }
.filter-select-all { font-weight: 700; background: #f8fafc; }
.column-filter-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; padding: 4px; }
.column-filter-actions .primary { background: var(--brand-primary); color: white; border-radius: 4px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(3px);
}
.note-modal { width: min(440px, 100%); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.note-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--border-light); }
.note-modal-header strong, .note-modal-header small { display: block; }
.note-modal-header small { margin-top: 4px; color: var(--text-tertiary); }
.note-modal-header button { border: 0; background: transparent; font-size: 24px; color: var(--text-tertiary); cursor: pointer; }
.note-modal textarea { display: block; width: calc(100% - 32px); min-height: 130px; margin: 16px; padding: 10px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); resize: vertical; font: 12px var(--font-primary); }
.note-modal textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(249,115,22,.12); }
.note-modal-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 0 16px 16px; }
.note-modal-actions button { border: 1px solid var(--border-medium); background: white; border-radius: var(--radius-sm); padding: 7px 13px; cursor: pointer; }
.note-modal-actions .primary { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }

.product-report-backdrop { padding: 3vh 3vw; background: rgba(15, 23, 42, .58); backdrop-filter: blur(10px); }
.product-report-modal {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: var(--bg-primary);
  box-shadow: 0 32px 100px rgba(15,23,42,.36), 0 2px 0 rgba(255,255,255,.8) inset;
}
.product-report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 16px;
  background: radial-gradient(circle at 90% -30%, #ffedd5 0, transparent 36%), linear-gradient(115deg, #fff 0%, #fffdf9 48%, #f8fafc 100%);
  border-bottom: 1px solid #e8edf4;
}
.report-eyebrow { color: var(--brand-primary-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.report-eyebrow i { margin-right: 5px; }
.product-report-header h2 { margin: 4px 0; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.18; letter-spacing: -.025em; }
.product-report-header small { color: var(--text-tertiary); font-size: 11px; }
.product-report-actions { display: flex; gap: 7px; align-items: center; }
.report-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e0e6ef; border-radius: 9px; background: rgba(255,255,255,.78); color: #64748b; font-size: 13px; cursor: pointer; transition: .16s ease; }
.report-icon-button:hover { color: var(--brand-primary-dark); border-color: #fdba74; background: #fff7ed; transform: translateY(-1px); }
.report-icon-button.close:hover { color: #dc2626; border-color: #fecaca; background: #fff1f2; }
.product-report-controls { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 7px 18px 0; background: #fff; border-bottom: 1px solid #e8edf4; }
.product-report-tabs { display: flex; gap: 2px; align-self: stretch; overflow-x: auto; }
.product-report-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 10px 12px; color: var(--text-secondary); font: 700 11px var(--font-primary); white-space: nowrap; cursor: pointer; transition: .16s ease; }
.product-report-tabs button:hover { color: var(--brand-primary-dark); background: #fffaf5; }
.product-report-tabs button.active { color: var(--brand-primary-dark); border-bottom-color: var(--brand-primary); }
.report-control-toggles { display: flex; gap: 6px; }
.report-control-toggles label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e5eaf1; border-radius: 8px; color: #64748b; background: #f8fafc; font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.report-control-toggles input { accent-color: var(--brand-primary); margin: 0; }
.report-control-toggles b { display: inline-grid; min-width: 14px; height: 14px; place-items: center; border-radius: 50%; background: #ede9fe; color: #6d28d9; font-size: 8px; }
.report-product-search { position: relative; display: flex; align-items: center; width: 195px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #94a3b8; }
.report-product-search > i { padding-left: 9px; font-size: 10px; }
.report-product-search input { width: 100%; padding: 7px 9px 7px 6px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 600 10px var(--font-primary); }
#stockReportSearchResults { display: none; position: absolute; top: calc(100% + 7px); right: 0; width: min(360px, 88vw); max-height: 320px; overflow: auto; z-index: 4; padding: 5px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; box-shadow: 0 16px 36px rgba(15,23,42,.16); }
#stockReportSearchResults.show { display: block; }
#stockReportSearchResults button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
#stockReportSearchResults button:hover { background: #fff7ed; }
#stockReportSearchResults strong, #stockReportSearchResults small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stockReportSearchResults strong { color: #334155; font: 700 11px var(--font-primary); }
#stockReportSearchResults small, .report-search-empty { margin-top: 2px; color: #94a3b8; font: 500 9px var(--font-primary); }
.report-search-empty { padding: 10px; text-align: center; }
.product-report-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 24px; background: linear-gradient(180deg, #f8fafc 0, #f4f6fa 100%); }
.product-report-status { display: flex; justify-content: space-between; gap: 12px; padding: 8px 18px; border-top: 1px solid #e8edf4; background: #fff; color: #94a3b8; font-size: 9px; }
.report-loading, .report-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; color: var(--text-tertiary); }
.report-empty i { font-size: 24px; }
.report-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 12px; margin-bottom: 12px; }
.report-product-profile, .report-note-card, .report-meta-grid, .report-trend-card, .report-kpi-grid.premium > div { border: 1px solid #e4eaf2; border-radius: 13px; background: rgba(255,255,255,.93); box-shadow: 0 7px 24px rgba(15,23,42,.045); }
.report-product-profile { display: flex; align-items: center; gap: 13px; padding: 16px; }
.report-product-monogram { display: grid; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; font: 800 21px var(--font-primary); box-shadow: 0 7px 14px rgba(249,115,22,.2); }
.report-product-profile span, .report-product-profile strong, .report-product-profile small { display: block; }
.report-product-profile span { color: #f97316; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.report-product-profile strong { margin: 3px 0; color: #1e293b; font-size: 14px; line-height: 1.25; }
.report-product-profile small { color: #64748b; font-size: 10px; }
.report-note-card { padding: 13px 15px; background: linear-gradient(135deg, #fffaf0, #fff 72%); }
.report-note-card > div { color: #b45309; font-size: 10px; font-weight: 800; }
.report-note-card > div i { margin-right: 5px; }
.report-note-card p { display: -webkit-box; overflow: hidden; min-height: 30px; margin: 6px 0 7px; color: #78350f; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; line-height: 1.5; }
.report-note-card button { padding: 0; border: 0; background: transparent; color: #c2410c; font: 800 9px var(--font-primary); cursor: pointer; }
.report-meta-grid { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 0; margin-bottom: 12px; overflow: hidden; }
.report-meta-grid > div { min-width: 0; padding: 9px 11px; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }
.report-meta-grid small, .report-meta-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-meta-grid small { color: #94a3b8; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.report-meta-grid strong { margin-top: 3px; color: #475569; font-size: 10px; }
.report-kpi-grid.premium { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.report-kpi-grid.premium > div { position: relative; overflow: hidden; padding: 13px 14px; }
.report-kpi-grid.premium > div::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #f97316; content: ''; }
.report-kpi-grid.premium .secondary::before { background: #0ea5e9; }.report-kpi-grid.premium .days::before { background: #8b5cf6; }.report-kpi-grid.premium .sales::before { background: #16a34a; }.report-kpi-grid.premium .revenue::before { background: #db2777; }
.report-kpi-grid small, .report-kpi-grid strong, .report-kpi-grid em { display: block; }
.report-kpi-grid small { color: #64748b; font-size: 9px; font-weight: 700; text-transform: uppercase; }.report-kpi-grid strong { margin-top: 7px; color: #1e293b; font-size: 19px; letter-spacing: -.04em; }.report-kpi-grid em { margin-top: 4px; color: #94a3b8; font-size: 8px; font-style: normal; }
.report-trend-card { margin-bottom: 15px; padding: 13px 15px 10px; }
.report-trend-heading { display: flex; justify-content: space-between; align-items: center; }.report-trend-heading span, .report-trend-heading small { display: block; }.report-trend-heading span { color: #334155; font-size: 11px; font-weight: 800; }.report-trend-heading span i { color: #f97316; margin-right: 5px; }.report-trend-heading small { margin-top: 2px; color: #94a3b8; font-size: 9px; }.report-trend-heading > strong { color: #ea580c; font-size: 16px; }
.report-season-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 10px; }
.report-season-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #e3e9f1; border-radius: 999px; background: #fff; color: #64748b; font-size: 9px; font-weight: 750; cursor: pointer; user-select: none; transition: .15s ease; }
.report-season-toggle:hover { border-color: #cbd5e1; transform: translateY(-1px); }.report-season-toggle input { position: absolute; opacity: 0; pointer-events: none; }.report-season-toggle i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }.report-season-toggle input:checked + i { box-shadow: 0 0 0 3px rgba(148,163,184,.15); }
.report-season-toggle.season-orange input:checked + i, .report-season-bars .season-orange { background: #f97316; }.report-season-toggle.season-blue input:checked + i, .report-season-bars .season-blue { background: #3b82f6; }.report-season-toggle.season-green input:checked + i, .report-season-bars .season-green { background: #10b981; }.report-season-toggle.season-purple input:checked + i, .report-season-bars .season-purple { background: #8b5cf6; }.report-season-toggle.season-rose input:checked + i, .report-season-bars .season-rose { background: #e11d48; }.report-season-toggle.season-slate input:checked + i, .report-season-bars .season-slate { background: #64748b; }
.report-season-chart { display: flex; align-items: end; min-width: 560px; height: 196px; padding: 13px 10px 0; border-top: 1px solid #edf1f5; background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #f0f3f7 44px); }.report-trend-card { overflow-x: auto; }
.report-season-month { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: end; min-width: 42px; height: 100%; gap: 6px; }.report-season-bars { display: flex; align-items: end; justify-content: center; gap: 3px; height: 156px; width: 100%; }.report-season-bars span { display: block; width: min(13px, 26%); min-height: 2px; border-radius: 4px 4px 1px 1px; box-shadow: 0 3px 7px rgba(15,23,42,.13); transition: opacity .15s ease, transform .15s ease; }.report-season-bars span:hover { opacity: .78; transform: translateY(-2px); }.report-season-month small { color: #94a3b8; font-size: 8px; font-weight: 700; }.report-season-empty { padding: 28px 12px; color: #94a3b8; font-size: 10px; text-align: center; }
.report-section-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; color: var(--text-primary); font-size: 12px; font-weight: 750; }
.report-section-header i { color: var(--brand-primary); margin-right: 5px; }
.report-section-header button { border: 1px solid var(--border-medium); border-radius: 5px; background: white; color: var(--text-secondary); padding: 5px 8px; font: 600 9px var(--font-primary); cursor: pointer; }
.report-table-wrap { overflow: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: white; }
.report-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.report-table th { position: sticky; top: 0; padding: 8px; background: var(--table-header-bg); color: white; text-align: center; white-space: nowrap; }
.report-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-light); text-align: center; white-space: nowrap; }
.report-table tbody tr:hover { background: var(--bg-tertiary); }
.report-season-table th:not(:first-child), .report-season-table td:not(:first-child) { text-align: right; }.report-season-table td:first-child { color: #475569; font-weight: 700; background: #f8fafc; }.report-total-row td { border-top: 2px solid #cbd5e1; color: #1e293b; font-weight: 800; background: #f1f5f9; }
.report-linked-product { color: #c2410c; font-weight: 700; cursor: pointer; }.report-linked-product:hover { text-decoration: underline; }
.report-subprint-row { background: rgba(251,191,36,.12) !important; }
.report-isbn-cell { font-size: 9px; letter-spacing: -0.3px; }
.report-channels-cell { font-size: 9px; max-width: 160px; white-space: normal; word-break: break-word; line-height: 1.3; }
.report-history-table { table-layout: fixed; }
.report-history-table th:first-child, .report-history-table td:first-child { width: 16%; text-align: left; white-space: normal; word-break: break-word; line-height: 1.2; }
.report-history-table th:nth-child(2), .report-history-table td:nth-child(2) { width: 12%; }
.report-table th.left-align, .report-table td.left-align { text-align: left; }
.sales-bar { display: block; width: 110px; height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.sales-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f97316, #fb923c); }

/* ═══ CHART.JS CONTAINER ═══ */
.report-chart-container { position: relative; width: 100%; height: 220px; margin: 8px 0 4px; }

/* ═══ KPI KARTLARI (GAS Paritesi) ═══ */
.report-kpi-row { display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); gap: 8px; margin-bottom: 10px; }
.report-kpi-row.kpi-row-secondary { grid-template-columns: repeat(6, minmax(100px, 1fr)); }
.rk-card { position: relative; overflow: hidden; padding: 10px 11px; border: 1px solid #e4eaf2; border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.rk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #cbd5e1; }
.rk-value { color: #1e293b; font-size: 17px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.rk-label { color: #64748b; font-size: 8px; font-weight: 700; text-transform: uppercase; margin-top: 4px; line-height: 1.3; }
.rk-label small { display: block; font-size: 7px; color: #94a3b8; font-weight: 500; text-transform: none; margin-top: 2px; }

/* KPI renk varyantları */
.rk-card.rk-blue::before { background: #3b82f6; }
.rk-card.rk-green::before { background: #22c55e; }
.rk-card.rk-orange::before { background: #f97316; }
.rk-card.rk-amber::before { background: #f59e0b; }
.rk-card.rk-purple::before { background: #8b5cf6; }
.rk-card.rk-slate::before { background: #64748b; }
.rk-card.rk-teal::before { background: #14b8a6; }
.rk-card.rk-revenue::before { background: #db2777; }

/* Stok durum renkleri */
.rk-card.kpi-danger { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fecaca; }
.rk-card.kpi-danger::before { background: #ef4444; }
.rk-card.kpi-danger .rk-value { color: #dc2626; }
.rk-card.kpi-warning { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.rk-card.kpi-warning::before { background: #f59e0b; }
.rk-card.kpi-warning .rk-value { color: #d97706; }
.rk-card.kpi-safe { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #bbf7d0; }
.rk-card.kpi-safe::before { background: #22c55e; }
.rk-card.kpi-safe .rk-value { color: #16a34a; }

.mobile-kpi-toggle { display: none; }

@media (min-width: 1100px) {
  #content-stok .table-container { overflow-x: hidden; }
}

/* ═══ LOADING OVERLAY ═══ */
.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  gap: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ═══ TOAST CONTAINER ═══ */
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ═══ PLACEHOLDER (ileriki fazlar) ═══ */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  color: var(--text-tertiary);
  text-align: center;
}

.coming-soon i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.coming-soon h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.coming-soon p {
  font-size: 13px;
  max-width: 320px;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .kpi-bar {
    padding: 12px 16px;
    gap: 8px;
  }
  .kpi-card {
    min-width: 110px;
    padding: 10px 12px;
  }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box {
    width: 100%;
  }
  .table-container {
    padding: 0 12px 12px;
  }
  .app-header {
    padding: 0 12px;
  }
  .tab-bar {
    padding: 6px 12px;
  }
  .mobile-kpi-toggle {
    display: block;
    margin: 6px 12px 0;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: white;
    padding: 7px;
    color: var(--text-secondary);
    font: 600 11px var(--font-primary);
  }
  .stok-kpi-bar { display: none; }
  .stok-kpi-bar.mobile-visible { display: flex; }
  .stok-toolbar { flex-direction: column; padding: 6px 12px; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions .toolbar-btn { flex: 1; justify-content: center; }
  .stok-status-bar { gap: 8px; overflow-x: auto; justify-content: flex-start; }
  .stok-status-bar span:first-child { margin-right: 0; }
  .column-filter-dropdown.show { left: 10px !important; right: 10px; top: 110px !important; width: auto; max-height: calc(100vh - 130px); }
  .product-report-backdrop { padding: 0; }
}

/* ═══ FAZ B: SET KARTLARI, BİLEŞEN VE SERİDAŞ STİLLERİ ═══ */
.set-card-block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}
.set-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.set-card-title {
  font-size: 13px;
  color: var(--text-main);
}
.set-kutu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f97316;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-left: 8px;
}
.collapse-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #334155;
  border: 1px solid #475569;
  border-radius: 6px;
  color: #f1f5f9;
  cursor: pointer;
  font-size: 11px;
  width: 100%;
  transition: background 0.2s;
}
.collapse-btn:hover {
  background: #1e293b;
}
.report-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}
.report-loading-state i {
  font-size: 24px;
  color: var(--primary);
}
.report-seridas-table th, .report-seridas-table td {
  font-size: 10px;
  padding: 5px 6px;
}
.seridas-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
}
.seridas-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.seridas-filter-item select, .seridas-filter-item input[type="text"] {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-medium);
  background: white;
  color: var(--text-main);
  font-size: 11px;
}
.seridas-search-box {
  flex: 1;
}
.seridas-count-badge {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.seridas-info-cell {
  background: rgba(249,115,22,0.06);
}
.seridas-stok-cell {
  border-right: 2px solid var(--primary) !important;
  font-weight: 700;
}

@media (max-width: 768px) {
  .product-report-modal { width: 100%; height: 100vh; border-radius: 0; }
  .product-report-controls { grid-template-columns: 1fr; gap: 5px; padding: 7px 12px; }.report-product-search { width: 100%; }.report-control-toggles { overflow-x: auto; }.product-report-tabs { overflow-x: auto; }.report-hero-grid { grid-template-columns: 1fr; }.report-meta-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }.report-kpi-grid.premium { grid-template-columns: repeat(2, minmax(120px, 1fr)); }.product-report-status { display: none; }
  .report-kpi-row { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .report-kpi-row.kpi-row-secondary { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .report-chart-container { height: 180px; }
}