/* İston İK Web Admin — Design Tokens (mobil ile birebir uyumlu) */
:root {
  /* Brand */
  --brand-purple: #3D7EC9;
  --brand-purple-600: #2F6BB5;
  --brand-purple-50: #E8F1FA;
  --brand-purple-100: #D0E4F5;
  --brand-blue: #3D7EC9;
  --brand-blue-50: #E8F1FA;

  /* Surface */
  --bg-canvas: #F4F4FB;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F8F8FC;
  --bg-hover: #F4F5FA;

  /* Border */
  --border-subtle: #ECEDF5;
  --border-default: #E2E4EE;
  --border-strong: #C9CCDB;

  /* Text */
  --text-primary: #1A1B2E;
  --text-secondary: #4D5063;
  --text-tertiary: #8A8DA3;
  --text-disabled: #BFC2D4;
  --text-on-brand: #FFFFFF;

  /* Status */
  --status-pending: #3D7EC9;
  --status-pending-bg: #E8F1FA;
  --status-approved: #22C55E;
  --status-approved-bg: #E8F8EE;
  --status-rejected: #EF4444;
  --status-rejected-bg: #FEECEC;
  --status-info: #3F73E0;
  --status-info-bg: #E8F0FE;
  --status-warning: #F59E0B;
  --status-warning-bg: #FFF5E0;
  --status-neutral: #6B6E85;
  --status-neutral-bg: #F0F1F7;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(20, 22, 50, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 22, 50, 0.06), 0 1px 2px rgba(20, 22, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 50, 0.06), 0 2px 4px rgba(20, 22, 50, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 22, 50, 0.08), 0 4px 8px rgba(20, 22, 50, 0.04);

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* Common atoms */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; line-height: 1; transition: all 0.15s;
}
.btn-primary { background: var(--brand-purple); color: white; }
.btn-primary:hover { background: var(--brand-purple-600); }
.btn-secondary { background: white; color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-danger { background: white; color: var(--status-rejected); border-color: #FECACA; }
.btn-danger:hover { background: var(--status-rejected-bg); }
.btn-success { background: var(--status-approved); color: white; }
.btn-success:hover { filter: brightness(0.95); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-pending { background: var(--status-pending-bg); color: var(--status-pending); }
.pill-pending .dot { background: var(--status-pending); }
.pill-approved { background: var(--status-approved-bg); color: #15803d; }
.pill-approved .dot { background: var(--status-approved); }
.pill-rejected { background: var(--status-rejected-bg); color: #b91c1c; }
.pill-rejected .dot { background: var(--status-rejected); }
.pill-info { background: var(--status-info-bg); color: var(--status-info); }
.pill-info .dot { background: var(--status-info); }
.pill-warning { background: var(--status-warning-bg); color: #b45309; }
.pill-warning .dot { background: var(--status-warning); }
.pill-neutral { background: var(--status-neutral-bg); color: var(--status-neutral); }
.pill-neutral .dot { background: var(--status-neutral); }

.input {
  font-family: inherit; font-size: 14px;
  padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: white;
  color: var(--text-primary); width: 100%; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 3px var(--brand-purple-50); }
.input::placeholder { color: var(--text-tertiary); }

.card {
  background: white; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #C9CCDB, #A0A3BD);
  color: white; font-weight: 600; border-radius: 50%;
  font-size: 12px; flex-shrink: 0; aspect-ratio: 1;
  line-height: 1; overflow: hidden;
}

/* Scrollbars */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #D5D7E3; border-radius: 4px; }
.scroll::-webkit-scrollbar-track { background: transparent; }