/* =============================================================
 * МонартСтрой · Саха — shared design tokens & utilities
 *
 * NOT: bu dosya MEVCUT sayfaların inline `<style>` bloklarını
 * geçersiz kılmaz. Yalnızca ortak `:root` token'ları + opt-in
 * utility class'ları sağlar. Her sayfa kendi inline stilini
 * `<link rel="stylesheet" href="/css/app.css">`'den sonra
 * yüklediği için override doğal cascade ile çalışır.
 * ============================================================= */

:root {
  /* ===== Brand & status renkleri ===== */
  --app-primary:        #2563eb;   /* login, director, PM */
  --app-primary-strong: #1d4ed8;
  --app-primary-soft:   #dbeafe;
  --app-accent:         #0ea5e9;   /* worker app, public landing */
  --app-success:        #10b981;
  --app-warn:           #f59e0b;
  --app-danger:         #ef4444;
  --app-info:           #38bdf8;

  /* ===== Nötr gri skala (light) ===== */
  --app-gray-0:  #ffffff;
  --app-gray-50: #f8fafc;
  --app-gray-100:#f1f5f9;
  --app-gray-200:#e2e8f0;
  --app-gray-300:#cbd5e1;
  --app-gray-400:#94a3b8;
  --app-gray-500:#64748b;
  --app-gray-600:#475569;
  --app-gray-700:#334155;
  --app-gray-800:#1e293b;
  --app-gray-900:#0f172a;

  /* ===== Semantic surface (light tema varsayılan) ===== */
  --app-bg:        var(--app-gray-50);
  --app-surface:   var(--app-gray-0);
  --app-surface-2: var(--app-gray-100);
  --app-border:    var(--app-gray-200);
  --app-text:      var(--app-gray-900);
  --app-muted:     var(--app-gray-500);

  /* ===== Spacing (4px tabanlı) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ===== Radius ===== */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ===== Shadow ===== */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

  /* ===== Font ===== */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ============================================================
 * Reset/normalize — sadece sayfa-spesifik stil bozmayan minimum
 * ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--app-text);
}

/* ============================================================
 * Utility class'lar — opt-in (yeni kod kullanır, eskiler etkilenmez)
 * Prefix: .u-* — utility, .ui-* — component, kasıtlı çatışma yok
 * ============================================================ */

/* layout */
.u-stack > * + * { margin-top: var(--sp-3); }
.u-stack-sm > * + * { margin-top: var(--sp-2); }
.u-stack-lg > * + * { margin-top: var(--sp-5); }

.u-row { display: flex; gap: var(--sp-3); align-items: center; }
.u-row-wrap { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.u-grid { display: grid; gap: var(--sp-4); }

.u-hidden { display: none !important; }
.u-mono { font-family: var(--font-mono); }
.u-muted { color: var(--app-muted); }

/* status badge — tüm sayfalarda tutarlı kullanım için */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.ui-badge.is-success { background: #d1fae5; color: #065f46; }
.ui-badge.is-warn    { background: #fef3c7; color: #92400e; }
.ui-badge.is-danger  { background: #fee2e2; color: #991b1b; }
.ui-badge.is-info    { background: #dbeafe; color: #1e3a8a; }
.ui-badge.is-muted   { background: var(--app-gray-100); color: var(--app-gray-600); }

/* toast — auth-guard.js içinden tetiklenecek */
.ui-toast-host {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.ui-toast {
  background: var(--app-gray-900);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: 0.9rem;
  min-width: 200px;
  max-width: 380px;
  pointer-events: auto;
  animation: ui-toast-in 0.18s ease-out;
}
.ui-toast.is-danger  { background: var(--app-danger); }
.ui-toast.is-success { background: var(--app-success); }
.ui-toast.is-warn    { background: var(--app-warn); color: var(--app-gray-900); }
@keyframes ui-toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* visually-hidden — accessibility */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* focus halkası — keyboard nav görünürlüğü için */
:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}

/* ============================================================
 * Responsive scaffolding — sayfalar uygulayabilir
 * ============================================================ */
@media (max-width: 768px) {
  .u-hide-md-down { display: none !important; }
}
@media (max-width: 480px) {
  .u-hide-sm-down { display: none !important; }
  body { font-size: 15px; }
}
@media (min-width: 769px) {
  .u-hide-md-up { display: none !important; }
}

/* print: gizli kalsın */
@media print {
  .ui-toast-host, .u-no-print { display: none !important; }
}