/*
 * Aishop shared component classes.
 *
 * Reference: .claude/plans/design-system.md
 *
 * Bu dosya tokens.css'in altında yüklenir; CSS variables tanımı orada.
 * Component class'ları tüm template'lerde paylaşılır:
 *   .card, .btn-primary, .btn-secondary, .field, .alert, .badge.
 * Layout-specific (.layout, .sidebar, .stat-grid, vb.) her template'in
 * kendi inline <style>'ında kalır.
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WCAG 2.4.7 Focus Visible (Level AA) — keyboard-only ring on all interactive
   elements. `:focus-visible` heuristic: pointer click ring tetiklemez, klavye
   tab tetikler. Baseline 2024 full destek.
   Standards ref: docs/standards/web-design-standards.md §4.2.
   `:where()` ile specificity 0 → component-specific override mümkün. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Typography */
h1 {
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.025em;
    font-weight: 700;
}
.lead {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin: 0 0 var(--space-6);
}

/* Card — shadow-based depth */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.15s;
}
.card.is-interactive:hover { box-shadow: var(--shadow-hover); }
.card h2 {
    margin: 0 0 0.875rem;
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.card p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* Info row — pair label/value */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.info-row:last-child { border-bottom: 0; }
.info-row .label { color: var(--text-muted); }
.info-row .value { color: var(--text); font-weight: 500; }

/* Badge — status pill */
.badge {
    display: inline-block;
    padding: 0.125rem var(--space-2);  /* y=2px scale-dışı, x=8px tokenize */
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}
.badge-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.badge-pending { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.badge-danger { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); }

/* Form field */
.field { margin-bottom: var(--space-4); }
.field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--text);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select,
.field textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.5;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    /* Global :focus-visible outline ring zaten body-level rule'dan geliyor.
       Burada border-color highlight ekliyoruz (input shape'i belirgin olsun). */
    border-color: var(--focus);
}
.field input[readonly] {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}
.field .errors { font-size: 0.8125rem; color: var(--error-text); margin-top: 0.375rem; }
.field .help { font-size: 0.8125rem; color: var(--text-subtle); margin-top: 0.375rem; }

/* Checkbox row */
.checkbox-field {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.checkbox-field input[type="checkbox"] {
    margin: 0.1875rem 0 0;  /* 3px — scale-dışı, alignment offset */
    flex-shrink: 0;
}
.checkbox-field label { display: inline; font-weight: normal; }
.checkbox-field a { color: var(--text); text-decoration: underline; }

/* Alert */
.alert {
    padding: var(--space-3) 0.875rem;  /* x=14px scale-dışı (sıkı readability) */
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    border: 1px solid var(--error-border);
    background: var(--error-bg);
    color: var(--error-text);
}
.alert-success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-text);
}

/* Buttons — state matrix: default / :hover / :focus-visible (global ds01)
   / :active / [disabled] / [aria-busy]. WCAG 2.5.8 target ≥44px (mobile-first). */

.btn-primary {
    display: inline-block;
    padding: 0.6875rem var(--space-4);  /* y=11px scale-dışı (44px target) */
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background 0.12s, box-shadow 0.12s, transform 0.08s;
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn-secondary {
    display: inline-block;
    padding: 0.6875rem var(--space-4);
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.12s, transform 0.08s;
}
.btn-secondary:hover { background: var(--bg); }
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tertiary action — bg yok, sadece hover bg. */
.btn-ghost {
    display: inline-block;
    padding: 0.6875rem var(--space-4);
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.12s;
}
.btn-ghost:hover { background: var(--surface-muted); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Destructive action — Sil/Kaldır/Reset. */
.btn-danger {
    display: inline-block;
    padding: 0.6875rem var(--space-4);
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--error-text);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background 0.12s, box-shadow 0.12s, transform 0.08s;
}
.btn-danger:hover { background: #7f1d1d; box-shadow: var(--shadow-md); }
.btn-danger:active { transform: translateY(1px); }
.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Aria-busy — async pending; tüm button variant'larında ortak. WAI-ARIA 1.2.
   Spinner pseudo-element 14px, currentColor border. */
.btn-primary[aria-busy="true"],
.btn-secondary[aria-busy="true"],
.btn-ghost[aria-busy="true"],
.btn-danger[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
    pointer-events: none;
}
.btn-primary[aria-busy="true"]::before,
.btn-secondary[aria-busy="true"]::before,
.btn-ghost[aria-busy="true"]::before,
.btn-danger[aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    margin-right: var(--space-2);
    vertical-align: -2px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Utility */
.footer-note { color: var(--text-subtle); font-size: var(--text-sm); margin-top: 2.5rem; }
.footer-note a { color: var(--text); text-decoration: underline; }

/* WCAG 2.4.1 Bypass Blocks (Level A) — sidebar nav'ı atlayıp main content'e
   geçmek için klavye kısayolu. Default off-screen, :focus alındığında görünür.
   Her layout'un <body>'sinin ilk child'ı olarak yerleştirilir; hedefi
   <main id="main-content"> element'i.
   Standards ref: docs/standards/web-design-standards.md §3.2 + §4.2. */
.skip-link {
    position: absolute;
    top: -100px;  /* off-screen sentinel; scale-dışı, transition başlangıç */
    left: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--text);
    color: var(--surface);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    z-index: var(--z-overlay);
    transition: top 0.12s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: var(--space-3);
}

/* ─────────────────────────────────────────────────────────────────
   Panel shared components (opt1)
   Plan: .claude/plans/panel-optimize-opt1.md
   ───────────────────────────────────────────────────────────────── */

/* Page header — h1 + lead + opsiyonel action slot. */
.page-header {
    margin-bottom: var(--space-5);
}
.page-header .page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}
.page-header h1 { margin-bottom: var(--space-1); }
.page-header .lead { margin: 0; }
.page-header-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Action row — page üstü buton stripi. */
.action-row {
    margin-bottom: var(--space-5);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Filter bar — select dropdown filter pattern. */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-wrap: wrap;
}
.filter-bar select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
}

/* List card — table benzeri grid. Sayfa-spesifik kolon sayısı için
   container'a `style="--cols: 1.4fr 1fr ...;"` override. */
.list-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-4);
    padding: 0;
    overflow: hidden;
}
.list-row {
    display: grid;
    grid-template-columns: var(--cols, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    align-items: center;
}
.list-row:last-child { border-bottom: 0; }
.list-row.is-link { color: inherit; text-decoration: none; }
.list-row.is-link:hover { background: var(--surface-muted); }
.list-row .muted { color: var(--text-muted); }
.list-row .num { text-align: right; }
.list-head {
    background: var(--surface-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
}

@media (max-width: 720px) {
    .list-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding: var(--space-4) var(--space-5);
    }
    .list-head { display: none; }
}

/* Empty state — uniform "boş" UI. */
.empty-state {
    text-align: center;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-4);
}
.empty-state p { margin: 0 0 var(--space-3); }
.empty-state p:last-child { margin-bottom: 0; }
.empty-state .muted { color: var(--text-subtle); font-size: var(--text-sm); }
.empty-state .btn-primary { margin-top: var(--space-2); }

/* Kind pill — kanal türü / role rozetler için küçük caps badge. */
.kind-pill {
    display: inline-block;
    padding: 0.0625rem var(--space-2);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-subtle);
    margin-right: var(--space-1);
    vertical-align: middle;
}

/* External user identifier — mesaj göndericinin ID/handle'ı. */
.ext-user {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--text-muted);
}