/**
 * ==========================================================================
 * TEK KAYNAK — Uygulama tipografisi (Online İK)
 * ==========================================================================
 * Boyut değiştirmek için YALNIZCA aşağıdaki :root değerlerini düzenleyin.
 * Sayfa/modül CSS'inde font-size yazmayın — kalıtım, .type-* veya Tailwind remap.
 *
 * Katmanlar (16px rem bazı):
 *   caption 11px | body 12px | section 13px | page-title 14px
 *   display / metric / h1 — vurgu ve dashboard (ayrı)
 * ==========================================================================
 */

:root {
    --font-family-base: 'Inter', 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-caption: 0.6875rem;
    --font-size-overline: 0.6875rem;
    --font-size-micro: 0.625rem;
    --font-size-body: 0.75rem;
    --font-size-body-sm: var(--font-size-body);
    --font-size-section: 0.8125rem;
    --font-size-title: var(--font-size-section);
    --font-size-page-title: 0.875rem;
    --font-size-page-title-mobile: var(--font-size-page-title);

    --font-size-page-content: var(--font-size-body);
    --font-size-page-content-xs: var(--font-size-caption);
    --font-size-page-description: var(--font-size-body);
    --font-size-breadcrumb: var(--font-size-caption);

    --font-size-nav-label: var(--font-size-body);
    --font-size-nav-section: var(--font-size-caption);

    --font-size-widget-title: var(--font-size-section);
    --font-size-widget-subtitle: var(--font-size-body);
    --font-size-widget-body: var(--font-size-body);
    --font-size-widget-label: var(--font-size-body);
    --font-size-widget-meta: var(--font-size-body);
    --font-size-widget-overline: var(--font-size-caption);

    --font-size-display: 2.5rem;
    --font-size-h1: 1.25rem;
    --font-size-h2: var(--font-size-page-title);
    --font-size-h3: var(--font-size-section);
    --font-size-metric: 3rem;
    --font-size-metric-sm: 1.5rem;
    --font-size-widget-metric: 2.75rem;
    --font-size-widget-metric-mobile: 2.25rem;

    --line-height-tight: 1.2;
    --line-height-body: 1.5;

    /* iOS: input focus zoom önleme (yalnızca mobil form-input override) */
    --font-size-input-ios: 16px;
}

/* ── 1. Gövde scope (app + auth) ── */
body.app-layout,
body.page-auth {
    font-size: var(--font-size-body);
}

body.app-layout .page-content {
    font-size: var(--font-size-page-content);
}

body.app-layout input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
body.app-layout select,
body.app-layout textarea,
body.app-layout button,
body.page-auth input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
body.page-auth select,
body.page-auth textarea,
body.page-auth button {
    font-size: inherit;
}

body.app-layout table,
body.page-auth table {
    font-size: inherit;
}

/* ── 2. Tailwind CDN utility → token ── */
body.app-layout .text-xs,
body.page-auth .text-xs {
    font-size: var(--font-size-caption);
}

body.app-layout .text-sm,
body.page-auth .text-sm {
    font-size: var(--font-size-body);
}

body.app-layout .text-base,
body.page-auth .text-base {
    font-size: var(--font-size-section);
}

body.app-layout .text-lg,
body.page-auth .text-lg {
    font-size: var(--font-size-page-title);
}

body.app-layout .page-content .text-sm {
    font-size: var(--font-size-page-content);
}

body.app-layout .page-content .text-xs {
    font-size: var(--font-size-page-content-xs);
}

/* ── 3. Semantik utility sınıfları (.type-*) ── */
.type-display,
.type-h1,
.type-h2,
.type-h3,
.type-title,
.type-section-title,
.type-body,
.type-body-sm,
.type-caption,
.type-overline,
.type-metric {
    margin: 0;
}

.type-display {
    font-size: var(--font-size-display);
    font-weight: 700;
    line-height: 1.1;
}

.type-h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.15;
}

.type-h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.type-h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.type-title,
.type-section-title {
    font-size: var(--font-size-section);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-heading);
}

.type-body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.type-body-sm {
    font-size: var(--font-size-body-sm);
    line-height: 1.45;
}

.type-caption,
.app-text-caption {
    font-size: var(--font-size-caption);
    line-height: 1.4;
}

.type-caption--muted {
    color: var(--color-text-body);
    opacity: 0.65;
}

.type-overline {
    font-size: var(--font-size-overline);
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.type-metric {
    font-size: var(--font-size-metric);
    font-weight: 700;
    line-height: 1;
}

/* ── 4. Layout & navigasyon ── */
.page-title {
    font-size: var(--font-size-page-title);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--color-text-heading);
}

.page-description {
    font-size: var(--font-size-page-description);
}

.breadcrumb,
.breadcrumb-link,
.breadcrumb-current {
    font-size: var(--font-size-breadcrumb);
}

.nav-section-title {
    font-size: var(--font-size-nav-section);
}

.nav-label {
    font-size: var(--font-size-nav-label);
}

.mobile-nav-label {
    font-size: var(--font-size-nav-section);
}

@media (max-width: 1023px) {
    .page-title {
        font-size: var(--font-size-page-title-mobile);
    }
}

/* ── 5. Drawer ── */
.app-drawer-title {
    font-size: var(--font-size-section);
    line-height: var(--line-height-tight);
    font-weight: 600;
    color: var(--color-text-heading);
}

.app-drawer-subtitle {
    font-size: var(--font-size-body);
    line-height: 1.45;
    color: var(--color-text-body);
    opacity: 0.88;
}

/* ── 6. Dashboard widget metin (rakamlar app.css'te metric token) ── */
.widget-heading-title {
    font-size: var(--font-size-widget-title);
}

.widget-heading-subtitle {
    font-size: var(--font-size-widget-subtitle);
}

/* ── 7. Zengin tablo — mobil kart ── */
.report-mobile-card-title {
    font-size: var(--font-size-section);
    font-weight: 600;
    color: var(--color-text-heading);
}

@media (max-width: 767px) {
    .report-mobile-card-label {
        font-size: var(--font-size-caption);
    }

    .report-mobile-card-value {
        font-size: var(--font-size-body);
    }

    .report-mobile-sort-chip {
        font-size: var(--font-size-caption);
    }

    .report-mobile-card-idx {
        font-size: var(--font-size-micro);
    }
}

.report-col-sort-add,
.report-col-sort-remove {
    font-size: var(--font-size-caption);
}

.report-col-sort-remove {
    font-size: var(--font-size-section);
}

/* ── 8. Modül kalıtımı (app.css'te font-size yazılmaz) ── */
.ev-detail-card-label,
.ev-detail-docs-table th,
.ev-process-rating .ev-rating-hint,
.ev-comment-badge-internal {
    font-size: var(--font-size-caption);
}

.ev-detail-title-body .ev-detail-title,
.ev-comments-title,
.ev-detail-card--title .ev-detail-card-value {
    font-size: var(--font-size-section);
}

/* ── 9. Dashboard metrik (display katmanı) ── */
.type-metric,
.dashboard-widget-summary-value {
    font-size: var(--font-size-widget-metric);
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1023px) {
    .dashboard-widget-summary-value {
        font-size: var(--font-size-widget-metric-mobile);
    }
}

.dashboard-push-banner__title {
    font-size: var(--font-size-section);
}

.dashboard-push-banner__desc {
    font-size: var(--font-size-caption);
}

/* ── 10. Modül alias (app.css yalnızca renk/spacing) ── */
.page-masraf-talep .masraf-page-title {
    font-size: var(--font-size-page-title);
}

.page-masraf-talep .masraf-drawer-title {
    font-size: var(--font-size-section);
}

.page-masraf-talep .masraf-card-title {
    font-size: var(--font-size-section);
}

.page-work-schedule-manage .ws-version-detail-host__title {
    font-size: var(--font-size-section);
}

.wizard-step-title {
    font-size: var(--font-size-section);
}

@media (min-width: 768px) {
    .wizard-step-title {
        font-size: var(--font-size-page-title);
    }
}

/* ── 11. iOS form zoom önleme ──
 * Yalnızca gerçek metin girişi (input/textarea/native select).
 * IkSelect / IkTime trigger button’ları zoom tetiklemez — body boyutunda kalsın
 * (aksi halde /users Sayfa başına & Sıralama vb. toolbar select’ler 16px ile şişer).
 */
@media (max-width: 1023px) {
    body.app-layout .form-input:not(.ik-select-field__trigger):not(.ik-time-field__trigger):not(.ik-select-field__native):not(.ik-time-field__native),
    body.app-layout select.form-input:not(.ik-select-field__native):not(.ik-time-field__native),
    body.app-layout textarea.form-input,
    body.page-auth .form-input:not(.ik-select-field__trigger):not(.ik-time-field__trigger):not(.ik-select-field__native):not(.ik-time-field__native),
    body.page-auth select.form-input:not(.ik-select-field__native):not(.ik-time-field__native),
    body.page-auth textarea.form-input {
        font-size: var(--font-size-input-ios);
    }
}

.ik-date-picker-nav {
    font-size: var(--font-size-h1);
}

/*
 * Not: app.css'te font-size yazmayın — değerler yalnızca bu dosyadaki :root token'larından gelir.
 * app.css sayfa-özel kuralları renk/layout tutar; tipografi buradan uygulanır (stylesheets.php sırası).
 */