/* KYS Portal CSS v2 — Fibonacci spacing system */
:root {
  /* Renkler — değişmedi */
  --c-blue:   #185FA5; --c-blue-lt:   #E6F1FB;
  --c-green:  #3B6D11; --c-green-lt:  #EAF3DE;
  --c-amber:  #854F0B; --c-amber-lt:  #FAEEDA;
  --c-red:    #A32D2D; --c-red-lt:    #FCEBEB;
  --c-purple: #3C3489; --c-purple-lt: #EEEDFE;
  --bg: #F5F5F3; --bg-card: #fff;
  --border: rgba(0,0,0,.09); --border-md: rgba(0,0,0,.16);
  --text: #1a1a18; --text-2: #555551; --text-3: #888880;

  /* Fibonacci boşluk sistemi: 5 · 8 · 13 · 21 · 34 · 55 */
  --sp-xs:  5px;
  --sp-sm:  8px;
  --sp-md: 13px;
  --sp-lg: 21px;
  --sp-xl: 34px;
  --sp-2xl:55px;

  /* Fibonacci radius: 5 · 8 · 13 · 21 */
  --r-sm:  5px;   /* badge, pill */
  --r-md:  8px;   /* buton, input */
  --r-lg: 13px;   /* kart */
  --r-xl: 21px;   /* modal, büyük kart */

  /* Yazı tipi skalası */
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-base:13px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  26px;
  --fs-stat:34px;

  /* Layout */
  --sb-width: 233px;
  --topbar-h:  55px;

  /* Eski adlar (geriye dönük uyumluluk) */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.618;
  color: var(--text);
  background: var(--bg);
}

/* ── AUTH ────────────────────────────────────────────────────────── */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: var(--bg-card); border: .5px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-xl) var(--sp-xl);
  width: 377px; /* Fibonacci yaklaşımı */
}
.auth-logo { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.logo-icon {
  width: 34px; height: 34px; background: var(--c-blue);
  border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-app-name { font-size: var(--fs-base); font-weight: 600; }
.auth-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-lg); line-height: 1.382; }
.auth-footer { font-size: var(--fs-xs); color: var(--text-3); text-align: center; margin-top: var(--sp-lg); }

/* ── FORMS ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-md); }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); margin-bottom: var(--sp-xs); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: var(--sp-sm) var(--sp-md);
  border: .5px solid var(--border-md);
  border-radius: var(--r-md); font-size: var(--fs-base);
  color: var(--text); background: var(--bg-card);
  outline: none; transition: border-color .15s;
  line-height: 1.618;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--c-blue); }
.form-group textarea { min-height: 89px; resize: vertical; } /* Fibonacci */

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border: .5px solid var(--border-md); border-radius: var(--r-md);
  font-size: var(--fs-base); cursor: pointer;
  background: transparent; color: var(--text);
  transition: background .15s, border-color .15s;
  line-height: 1;
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover { background: #0C447C; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-sm); }

/* ── ALERTS ──────────────────────────────────────────────────────── */
.alert { padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-md); font-size: var(--fs-base); margin-bottom: var(--sp-md); }
.alert-error   { background: var(--c-red-lt);   color: var(--c-red);   }
.alert-success { background: var(--c-green-lt); color: var(--c-green); }

/* ── PORTAL LAYOUT ───────────────────────────────────────────────── */
.portal-body { margin: 0; }
.portal-wrap { display: grid; grid-template-columns: var(--sb-width) 1fr; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  background: #1a2332; color: #c9d3e0;
  display: flex; flex-direction: column;
  min-height: 100vh; position: sticky; top: 0; overflow-y: auto;
}
.sidebar.collapsed { display: none; }

.sb-logo {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md); border-bottom: .5px solid rgba(255,255,255,.08);
}
.logo-icon-sm {
  width: 28px; height: 28px; background: var(--c-blue);
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-app { font-size: var(--fs-sm); font-weight: 600; color: #e8edf4; line-height: 1.4; }
.sb-env { font-size: var(--fs-xs); color: #7a8fa6; }

.sb-nav { flex: 1; padding: var(--sp-xs) 0; }
.nav-section { padding: var(--sp-sm) 0; border-bottom: .5px solid rgba(255,255,255,.06); }
.nav-label {
  font-size: var(--fs-xs); font-weight: 600; color: #4d6380;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 0 var(--sp-md) var(--sp-xs);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-sm);
  color: #8fa3bc; text-decoration: none;
  position: relative; border-left: 2px solid transparent;
  transition: color .12s, background .12s;
}
.nav-item:hover { color: #e8edf4; background: rgba(255,255,255,.05); }
.nav-item.active { color: #e8edf4; background: rgba(255,255,255,.07); border-left-color: var(--c-blue); }

.sb-user-row {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md); border-top: .5px solid rgba(255,255,255,.08);
}
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #2d4a6b;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; color: #9ec5e8; flex-shrink: 0;
}
.sb-uname { font-size: var(--fs-sm); font-weight: 500; color: #c9d3e0; line-height: 1.4; }
.sb-urole { font-size: var(--fs-xs); color: #4d6380; }
.sb-logout { margin-left: auto; color: #4d6380; text-decoration: none; transition: color .12s; }
.sb-logout:hover { color: #c9d3e0; }
.sb-toggle { background: none; border: none; cursor: pointer; font-size: var(--fs-md); color: var(--text-2); }

/* MAIN */
.main-wrap { display: flex; flex-direction: column; min-height: 100vh; overflow: auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-lg); height: var(--topbar-h);
  background: var(--bg-card); border-bottom: .5px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.tb-left { display: flex; align-items: center; gap: var(--sp-md); }
.tb-title { font-size: var(--fs-base); font-weight: 600; }
.tb-right { display: flex; gap: var(--sp-sm); }
.page-content { padding: var(--sp-lg) var(--sp-lg); flex: 1; }

/* ── CARDS ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: .5px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-lg); margin-bottom: var(--sp-md);
}
.card-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-md); }
.card-link { display: inline-block; margin-top: var(--sp-sm); font-size: var(--fs-sm); color: var(--c-blue); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* ── STATS ───────────────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.stat-card {
  background: var(--bg-card); border: .5px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-lg);
}
.sc-label { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-sm); }
.sc-val { font-size: var(--fs-stat); font-weight: 700; color: var(--text); line-height: 1; }

/* ── TWO-COL ─────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--sp-md); }

/* ── TABLE / LIST ────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.data-table th {
  text-align: left; padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-3); border-bottom: .5px solid var(--border);
}
.data-table td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: .5px solid var(--border); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(0,0,0,.015); }

.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-sm) 0; border-bottom: .5px solid var(--border); font-size: var(--fs-base);
}
.list-row:last-child { border-bottom: none; }

/* ── BADGES ──────────────────────────────────────────────────────── */
.badge { font-size: var(--fs-xs); padding: 2px var(--sp-sm); border-radius: var(--sp-sm); display: inline-block; white-space: nowrap; }
.badge-draft, .badge-pending      { background: var(--c-amber-lt); color: var(--c-amber); }
.badge-in_progress, .badge-active { background: var(--c-blue-lt);  color: var(--c-blue);  }
.badge-completed, .badge-achieved { background: var(--c-green-lt); color: var(--c-green); }
.badge-archived, .badge-inactive  { background: #f0eeea; color: #666; }

/* ── EFQM ────────────────────────────────────────────────────────── */
.crit-row {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) 0; border-bottom: .5px solid var(--border); font-size: var(--fs-base);
}
.crit-row:last-child { border-bottom: none; }
.crit-no   { font-weight: 700; color: var(--c-blue); min-width: 22px; }
.crit-name { flex: 1; color: var(--text); }
.crit-dim  { font-size: var(--fs-xs); padding: 2px var(--sp-sm); border-radius: 20px; }
.dim-direction { background: var(--c-blue-lt);  color: var(--c-blue);  }
.dim-execution { background: var(--c-green-lt); color: var(--c-green); }
.dim-results   { background: var(--c-amber-lt); color: var(--c-amber); }

.radar-group { display: flex; flex-direction: column; gap: var(--sp-md); }
.radar-item label { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-base); margin-bottom: var(--sp-xs); }
.radar-item input[type=range] { width: 100%; }
.radar-score { font-weight: 600; color: var(--c-blue); min-width: 34px; text-align: right; }

/* ── ORG TREE ────────────────────────────────────────────────────── */
.tree-node {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm); border-bottom: .5px solid var(--border); font-size: var(--fs-base);
}
.tree-node:last-child { border-bottom: none; }
.tree-type  { font-size: var(--fs-xs); background: var(--c-blue-lt); color: var(--c-blue); padding: 2px var(--sp-sm); border-radius: 20px; flex-shrink: 0; }
.tree-name  { flex: 1; font-weight: 500; }
.tree-count { font-size: var(--fs-sm); color: var(--text-3); }

/* ── MISC ────────────────────────────────────────────────────────── */
.loading { color: var(--text-3); font-size: var(--fs-base); padding: var(--sp-sm) 0; }
.empty   { color: var(--text-3); font-size: var(--fs-base); padding: var(--sp-sm) 0; font-style: italic; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal {
  background: var(--bg-card); border-radius: var(--r-xl);
  padding: var(--sp-xl); min-width: 377px; max-width: 555px; width: 90%;
}
.modal-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-lg); line-height: 1.382; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-sm); margin-top: var(--sp-lg); }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); }
.page-header h2 { font-size: var(--fs-md); font-weight: 600; line-height: 1.382; }