/* ============================================================
   ONS RAPOR — DESIGN SYSTEM v2.0
   Mosaic Dashboard tema dilini Bootstrap üzerine oturtuyor.
   
   KURALLAR:
   - Tüm bileşenler bu dosyadan referans alır
   - Inline style KULLANILMAZ
   - Her bileşenin tek bir doğru kullanımı vardır
   - Yeni bileşen eklemek için bu dosyaya eklenir
   ============================================================ */

/* ── 1. DESIGN TOKENS (CSS Değişkenleri) ─────────────────── */
:root {
    /* Renkler — Ana Palet */
    --ons-primary:          #2E1F7A;   /* violet-500 */
    --ons-primary-dark:     #19104A;   /* violet-700 */
    --ons-primary-light:    #9b96d4;   /* violet-200 */
    --ons-primary-bg:       #eeedf8;   /* violet-50  */

    /* Renkler — Durum */
    --ons-success:          #3ec972;   /* green-500 */
    --ons-success-bg:       #d2ffe2;   /* green-50  */
    --ons-warning:          #f0bb33;   /* yellow-500 */
    --ons-warning-bg:       #fff2c9;   /* yellow-50 */
    --ons-danger:           #ff5656;   /* red-500   */
    --ons-danger-bg:        #ffe8e8;   /* red-50    */
    --ons-info:             #56b1f3;   /* sky-600   */
    --ons-info-bg:          #e3f3ff;   /* sky-50    */

    /* Nötr Palet */
    --ons-gray-50:          #f9fafb;
    --ons-gray-100:         #f3f4f6;
    --ons-gray-200:         #e5e7eb;
    --ons-gray-300:         #bfc4cd;
    --ons-gray-400:         #9ca3af;
    --ons-gray-500:         #6b7280;
    --ons-gray-600:         #4b5563;
    --ons-gray-700:         #374151;
    --ons-gray-800:         #1f2937;
    --ons-gray-900:         #111827;

    /* Tipografi */
    --ons-font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ons-font-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --ons-font-size-xs:     0.75rem;    /* 12px */
    --ons-font-size-sm:     0.875rem;   /* 14px */
    --ons-font-size-base:   1rem;       /* 16px */
    --ons-font-size-lg:     1.125rem;   /* 18px */
    --ons-font-size-xl:     1.25rem;    /* 20px */
    --ons-font-size-2xl:    1.5rem;     /* 24px */

    /* Spacing */
    --ons-radius-sm:        0.375rem;   /* 6px  */
    --ons-radius:           0.5rem;     /* 8px  */
    --ons-radius-lg:        0.75rem;    /* 12px */
    --ons-radius-xl:        1rem;       /* 16px */

    /* Gölgeler */
    --ons-shadow-xs:        0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ons-shadow-sm:        0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
    --ons-shadow:           0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
    --ons-shadow-lg:        0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);

    /* Layout */
    --ons-sidebar-width:    260px;
    --ons-header-height:    36px;
    /* iOS safe area (viewport-fit=cover gerekli) */
    --ons-safe-top:         env(safe-area-inset-top, 0px);
    --ons-safe-right:       env(safe-area-inset-right, 0px);
    --ons-safe-bottom:      env(safe-area-inset-bottom, 0px);
    --ons-safe-left:        env(safe-area-inset-left, 0px);
    /* LIGHT MODE: sidebar beyaz, metin koyu */
    --ons-sidebar-bg:       #ffffff;
    --ons-sidebar-text:     #374151;
    --ons-sidebar-border:   #e5e7eb;
    --ons-sidebar-active:   #2E1F7A;
    --ons-body-bg:          #f3f4f6;
    --ons-card-bg:          #ffffff;
    --ons-border:           #e5e7eb;

    /* Geçiş Animasyonları */
    --ons-transition:       all 0.15s ease;
    --ons-transition-slow:  all 0.3s ease;

    /* Tarayıcı native elemanları (scrollbar, input, select) için renk şeması */
    color-scheme: light;
}

/* ── 1b. DARK MODE TOKENS ────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    /* Ana Palet — dark modda daha parlak violet */
    --ons-primary:          #4A5FC1;
    --ons-primary-dark:     #1A237E;
    --ons-primary-light:    #242055;
    --ons-primary-bg:       #19104A;

    /* Durum Renkleri — dark modda biraz daha canlı */
    --ons-success:          #4bd37d;
    --ons-success-bg:       #0d2e1d;
    --ons-warning:          #f7cd4c;
    --ons-warning-bg:       #2e2206;
    --ons-danger:           #ff7474;
    --ons-danger-bg:        #2e0d0d;
    --ons-info:             #7bc8ff;
    --ons-info-bg:          #0b2540;

    /* Nötr Palet — tamamen ters */
    --ons-gray-50:          #18202e;
    --ons-gray-100:         #1e2a3a;
    --ons-gray-200:         #253347;
    --ons-gray-300:         #344560;
    --ons-gray-400:         #5a718a;
    --ons-gray-500:         #7a93ae;
    --ons-gray-600:         #a0b4c8;
    --ons-gray-700:         #c2d1df;
    --ons-gray-800:         #dce8f0;
    --ons-gray-900:         #f0f6fb;

    /* Layout — dark sidebar koyu */
    --ons-sidebar-bg:       #0f1623;
    --ons-sidebar-text:     #a8b3c4;
    --ons-sidebar-border:   #1e2a3a;
    --ons-body-bg:          #111827;
    --ons-card-bg:          #1a2236;
    --ons-border:           #253347;

    /* Gölgeler — dark modda daha belirgin */
    --ons-shadow-xs:        0 1px 2px 0 rgb(0 0 0 / 0.3);
    --ons-shadow-sm:        0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --ons-shadow:           0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --ons-shadow-lg:        0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* ── 2. TEMEL RESET / GLOBAL ─────────────────────────────── */
body,
body.ons-app {
    font-family: var(--ons-font);
    font-size: var(--ons-font-size-sm);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ons-font-mono,
.font-mono {
    font-family: var(--ons-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ons-app class'ı kullanıldığında tam tema uygula */
body.ons-app {
    background-color: var(--ons-body-bg);
    color: var(--ons-gray-800);
}

/* Dark mode geçiş animasyonu — yalnızca kullanıcı toggle yaptığında aktif.
   .theme-transitioning JS tarafından eklenir/kaldırılır (300ms sonra silinir).
   Bu sayede sayfa ilk yüklenirken layout shift ve FOUC olmaz. */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.2s ease,
                box-shadow 0.25s ease !important;
}

/* Dark mode body */
[data-theme="dark"] body {
    background-color: var(--ons-body-bg);
    color: var(--ons-gray-800);
}

/* ── 3. LAYOUT — Sidebar + Header + Content ──────────────── */

/* App Sarmalayıcı */
.ons-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.ons-sidebar {
    width: var(--ons-sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--ons-sidebar-bg);
    border-right: 1px solid var(--ons-sidebar-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    transition: transform 0.3s ease;
    padding-top: var(--ons-safe-top);
    padding-bottom: var(--ons-safe-bottom);
}
.ons-sidebar.collapsed {
    transform: translateX(calc(-1 * var(--ons-sidebar-width)));
}

/* Brand / logo strip */
.ons-sidebar-brand,
.ons-sidebar-logo {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ons-sidebar-border);
    font-weight: 700;
    font-size: var(--ons-font-size-lg);
    color: var(--ons-gray-900);
    text-decoration: none;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.ons-sidebar-brand:hover,
.ons-sidebar-logo:hover {
    color: var(--ons-gray-900);
    text-decoration: none;
}
.ons-sidebar-brand span,
.ons-sidebar-logo span {
    color: var(--ons-primary);
}
.ons-sidebar-brand-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--ons-radius);
    flex-shrink: 0;
}
.ons-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.ons-sidebar-brand-name {
    font-size: var(--ons-font-size-base);
    font-weight: 700;
    color: var(--ons-gray-900);
    line-height: 1.2;
}
.ons-sidebar-brand-sub {
    font-size: var(--ons-font-size-xs);
    font-weight: 500;
    color: var(--ons-gray-500);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ons-sidebar-brand .ons-sidebar-brand-sub {
    color: var(--ons-gray-500);
}
.ons-sidebar-brand .ons-sidebar-brand-ver {
    font-weight: 500;
    color: var(--ons-gray-400);
    letter-spacing: 0.02em;
}

/* User block */
.ons-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    flex-shrink: 0;
}
.ons-sidebar-footer .ons-sidebar-user {
    border-bottom: 1px solid var(--ons-sidebar-border);
    margin: 0 0 0.35rem;
    padding: 0.5rem 0.75rem 0.75rem;
}
.ons-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ons-primary-bg);
    color: var(--ons-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ons-font-size-sm);
    flex-shrink: 0;
}
.ons-sidebar-user-meta {
    min-width: 0;
}
.ons-sidebar-user-name {
    font-size: var(--ons-font-size-sm);
    font-weight: 600;
    color: var(--ons-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ons-sidebar-user-role {
    font-size: var(--ons-font-size-xs);
    color: var(--ons-gray-500);
}

/* Company / context info (Dashboard) */
.ons-sidebar-info {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ons-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ons-sidebar-info-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--ons-radius);
    background: var(--ons-gray-50);
}
.ons-sidebar-info-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--ons-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    background: var(--ons-primary-bg);
    color: var(--ons-primary);
}
.ons-sidebar-info-texts {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ons-sidebar-info-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ons-gray-500);
}
.ons-sidebar-info-value {
    font-size: var(--ons-font-size-xs);
    font-weight: 600;
    color: var(--ons-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Nav */
.ons-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
    scrollbar-width: none;
}
.ons-sidebar-nav::-webkit-scrollbar { display: none; }

/* Sidebar Grup Başlığı */
.ons-sidebar-group-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ons-gray-500);
    margin-top: 0.5rem;
}

/* Sidebar Link */
.ons-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    font-size: var(--ons-font-size-sm);
    font-weight: 500;
    color: var(--ons-sidebar-text);
    text-decoration: none;
    border-radius: var(--ons-radius);
    margin: 0.125rem 0;
    transition: var(--ons-transition);
    border: none;
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.ons-sidebar-link:hover {
    background-color: var(--ons-gray-100);
    color: var(--ons-gray-900);
    text-decoration: none;
}
.ons-sidebar-link:hover .ons-sidebar-icon {
    color: var(--ons-primary);
}
.ons-sidebar-link.active {
    background-color: var(--ons-primary-bg);
    color: var(--ons-primary);
}
.ons-sidebar-link.active .ons-sidebar-icon { color: var(--ons-primary); }
.ons-sidebar-link.danger {
    color: var(--ons-danger);
}
.ons-sidebar-link.danger:hover {
    background-color: var(--ons-danger-bg);
    color: var(--ons-danger);
}
.ons-sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ons-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ons-sidebar-link-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ons-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
}
.ons-sidebar-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    margin: 0.125rem 0;
    border-radius: var(--ons-radius);
    font-size: var(--ons-font-size-sm);
    font-weight: 500;
    color: var(--ons-sidebar-text);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Footer */
.ons-sidebar-footer {
    flex-shrink: 0;
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--ons-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ons-sidebar-footer form {
    width: 100%;
    margin: 0;
}
.ons-sidebar-meta {
    text-align: center;
    font-size: 11px;
    color: var(--ons-gray-400);
    letter-spacing: 0.04em;
    padding: 0.35rem 0.5rem 0.25rem;
}

/* Ana İçerik */
.ons-main {
    flex: 1;
    margin-left: var(--ons-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}
.ons-main.sidebar-collapsed { margin-left: 0; }

/* Header */
.ons-header {
    min-height: calc(48px + var(--ons-safe-top));
    height: auto;
    background-color: var(--ons-card-bg);
    border-bottom: 1px solid var(--ons-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: var(--ons-safe-top);
    padding-bottom: 0;
    padding-left: max(1rem, var(--ons-safe-left));
    padding-right: max(1rem, var(--ons-safe-right));
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: var(--ons-shadow-xs);
}
.ons-header-inner {
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    box-sizing: border-box;
}

.ons-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; }
.ons-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.ons-header-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.ons-header-search > i {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ons-gray-400);
    font-size: 0.75rem;
    pointer-events: none;
}
.ons-header-search .ons-input {
    height: 38px;
    padding-left: 1.85rem;
    min-width: 140px;
    max-width: 260px;
    width: 36vw;
    box-sizing: border-box;
}

/* Hamburger Butonu */
.ons-hamburger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ons-radius);
    border: none;
    background: transparent;
    color: var(--ons-gray-500);
    cursor: pointer;
    transition: var(--ons-transition);
}
.ons-hamburger:hover { background: var(--ons-gray-100); color: var(--ons-gray-800); }

/* Header sayfa başlığı */
.ons-page-title {
    font-size: var(--ons-font-size-base);
    font-weight: 600;
    color: var(--ons-gray-800);
    margin: 0;
}

/* ── Standalone rapor navbar (sidebar'sız ekranlar) ──────── */
.ons-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: var(--ons-safe-top);
    padding-left: var(--ons-safe-left);
    padding-right: var(--ons-safe-right);
    min-height: calc(var(--ons-header-height) + var(--ons-safe-top));
    height: auto;
    background: color-mix(in srgb, var(--ons-card-bg) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ons-border);
    box-shadow: var(--ons-shadow-xs);
}
.ons-navbar-content {
    min-height: var(--ons-header-height);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.2rem 0.75rem;
}
.ons-navbar-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.ons-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ons-radius);
    color: var(--ons-primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: var(--ons-transition);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0;
}
.ons-back-btn:hover {
    background: var(--ons-primary-bg);
    color: var(--ons-primary);
    text-decoration: none;
}
.ons-navbar-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ons-navbar-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ons-gray-800);
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ons-navbar-heading .ons-navbar-sep {
    color: var(--ons-gray-400);
    font-weight: 500;
    margin: 0 0.2rem;
}
.ons-navbar-company {
    color: var(--ons-gray-800);
    font-weight: 500;
}
.ons-navbar-page {
    color: var(--ons-primary);
    font-weight: 700;
}
.ons-header-user-sep {
    color: var(--ons-gray-400);
    font-weight: 500;
    margin: 0 0.2rem;
}
.ons-header-user {
    color: var(--ons-gray-600);
    font-weight: 600;
}
.ons-navbar-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ons-gray-800);
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ons-navbar-subtitle {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ons-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ons-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
}
.ons-navbar-meta {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ons-gray-500);
    white-space: nowrap;
    margin-right: 0.15rem;
}
.ons-theme-btn,
.ons-navbar-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ons-card-bg) 80%, transparent);
    backdrop-filter: blur(10px);
    border: 1.5px solid color-mix(in srgb, var(--ons-primary) 22%, transparent);
    color: var(--ons-primary);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: var(--ons-shadow-xs);
    flex-shrink: 0;
    padding: 0;
}
.ons-theme-btn:hover,
.ons-navbar-icon-btn:hover {
    background: var(--ons-primary-bg);
    color: var(--ons-primary-dark);
}
[data-theme="dark"] .ons-theme-btn,
[data-theme="dark"] .ons-navbar-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    box-shadow: none;
}
[data-theme="dark"] .ons-theme-btn:hover,
[data-theme="dark"] .ons-navbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

@media (max-width: 560px) {
    .ons-navbar-content {
        padding: 0.15rem 0.55rem;
    }
    .ons-navbar-heading {
        font-size: 0.75rem;
    }
    .ons-navbar-meta {
        display: none;
    }
}

.ons-report-page {
    max-width: 960px;
    margin: 0 auto;
    padding:
        calc(var(--ons-header-height) + var(--ons-safe-top) + 0.75rem)
        calc(0.75rem + var(--ons-safe-right))
        calc(2rem + var(--ons-safe-bottom))
        calc(0.75rem + var(--ons-safe-left));
}
@media (max-width: 560px) {
    .ons-report-page {
        padding-top: calc(var(--ons-header-height) + var(--ons-safe-top) + 0.75rem);
    }
}

/* Rapor tablosu — marka başlıklı varyant */
.ons-table.ons-table-brand thead {
    background: var(--ons-primary);
}
.ons-table.ons-table-brand th {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: transparent;
}
.ons-table.ons-table-brand th.num { text-align: right; }
.ons-table.ons-table-brand .total-row td {
    background: var(--ons-primary);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    border-bottom: none;
}
.ons-table.ons-table-brand .total-row .num.pos { color: #a5f3c4; }
.ons-table.ons-table-brand .total-row .num.neg { color: #ffb3ae; }

/* İçerik Alanı */
.ons-content {
    flex: 1;
    padding: 1.5rem;
}

/* Overlay (mobil sidebar kapatmak için) */
.ons-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 49;
    backdrop-filter: blur(2px);
}
.ons-sidebar-overlay.visible { display: block; }

/* ── 4. KARTLAR ──────────────────────────────────────────── */
.ons-card {
    background-color: var(--ons-card-bg);
    border-radius: var(--ons-radius-lg);
    box-shadow: var(--ons-shadow-sm);
    border: 2px solid var(--ons-border);
    overflow: hidden;
}

.ons-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--ons-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ons-card-title {
    font-size: var(--ons-font-size-sm);
    font-weight: 600;
    color: var(--ons-gray-800);
    margin: 0;
    letter-spacing: -0.01em;
}

.ons-card-body {
    padding: 1.25rem;
}

.ons-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 2px solid var(--ons-border);
    background-color: var(--ons-gray-50);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* İçerik (toplam tablosu vb.) — buton footeri değil */
.ons-card-footer.ons-card-footer-stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
}

/* Stat Kartı (Dashboard rakam kutuları) */
.ons-stat-card {
    background-color: var(--ons-card-bg);
    border-radius: var(--ons-radius-lg);
    box-shadow: var(--ons-shadow-sm);
    border: 2px solid var(--ons-border);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ons-stat-label {
    font-size: var(--ons-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ons-gray-500);
}
[data-theme="dark"] .ons-stat-label {
    color: var(--ons-gray-600);
}
.ons-stat-value {
    font-size: var(--ons-font-size-2xl);
    font-weight: 700;
    color: var(--ons-gray-900);
    letter-spacing: -0.02em;
    line-height: 1;
}
.ons-stat-change {
    font-size: var(--ons-font-size-xs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.ons-stat-change.up   { color: var(--ons-success); }
.ons-stat-change.down { color: var(--ons-danger);  }
.ons-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ons-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}
.ons-stat-icon.primary { background: var(--ons-primary-bg); color: var(--ons-primary); }
.ons-stat-icon.success { background: var(--ons-success-bg); color: var(--ons-success); }
.ons-stat-icon.warning { background: var(--ons-warning-bg); color: var(--ons-warning); }
.ons-stat-icon.danger  { background: var(--ons-danger-bg);  color: var(--ons-danger);  }
.ons-stat-icon.info    { background: var(--ons-info-bg);    color: var(--ons-info);    }

/* ── 5. BUTONLAR ─────────────────────────────────────────── */
.ons-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: var(--ons-font);
    font-size: var(--ons-font-size-sm);
    font-weight: 500;
    line-height: 1.25;
    padding: 0.5rem 1rem;
    border-radius: var(--ons-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--ons-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--ons-shadow-xs);
    -webkit-tap-highlight-color: transparent;
}
.ons-btn:focus-visible { outline: 2px solid var(--ons-primary); outline-offset: 2px; }
.ons-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ons-btn i, .ons-btn svg { flex-shrink: 0; }

/* Varyantlar */
.ons-btn-primary   { background: var(--ons-primary);   color: #fff; border-color: var(--ons-primary); }
.ons-btn-primary:hover { background: var(--ons-primary-dark); border-color: var(--ons-primary-dark); color: #fff; text-decoration: none; }

.ons-btn-success   { background: var(--ons-success);   color: #fff; border-color: var(--ons-success); }
.ons-btn-success:hover { background: #2ea85e; border-color: #2ea85e; color: #fff; text-decoration: none; }

.ons-btn-danger    { background: var(--ons-danger);    color: #fff; border-color: var(--ons-danger); }
.ons-btn-danger:hover { background: #e63939; border-color: #e63939; color: #fff; text-decoration: none; }

.ons-btn-warning   { background: var(--ons-warning);   color: #fff; border-color: var(--ons-warning); }
.ons-btn-warning:hover { background: #d4a21e; border-color: #d4a21e; color: #fff; text-decoration: none; }

.ons-btn-secondary { background: var(--ons-gray-100);  color: var(--ons-gray-700); border-color: var(--ons-border); }
.ons-btn-secondary:hover { background: var(--ons-gray-200); color: var(--ons-gray-800); text-decoration: none; }

.ons-btn-ghost    { background: transparent; color: var(--ons-gray-600); border-color: transparent; box-shadow: none; }
.ons-btn-ghost:hover { background: var(--ons-gray-100); color: var(--ons-gray-800); text-decoration: none; }

/* Outline Varyantlar */
.ons-btn-outline-primary { background: transparent; color: var(--ons-primary); border-color: var(--ons-primary); }
.ons-btn-outline-primary:hover { background: var(--ons-primary-bg); text-decoration: none; }

.ons-btn-outline-danger { background: transparent; color: var(--ons-danger); border-color: var(--ons-danger); }
.ons-btn-outline-danger:hover { background: var(--ons-danger-bg); text-decoration: none; }

/* Boyutlar */
.ons-btn-sm  { padding: 0.3125rem 0.625rem; font-size: var(--ons-font-size-xs); }
.ons-btn-lg  { padding: 0.75rem 1.5rem;     font-size: var(--ons-font-size-base); }
.ons-btn-xl  { padding: 0.875rem 2rem;      font-size: var(--ons-font-size-lg); }
.ons-btn-icon { padding: 0.5rem; width: 36px; height: 36px; }
.ons-btn-icon.ons-btn-sm { width: 28px; height: 28px; padding: 0.25rem; }

/* Loading state */
.ons-btn.loading { pointer-events: none; opacity: 0.75; }
.ons-btn.loading::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ons-spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ── 6. FORM ELEMANları ──────────────────────────────────── */

/* Input / Textarea / Select genel */
.ons-input,
.ons-textarea,
.ons-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--ons-font);
    font-size: var(--ons-font-size-sm);
    line-height: 1.5;
    color: var(--ons-gray-800);
    background-color: var(--ons-card-bg);
    border: 2px solid var(--ons-gray-300);
    border-radius: var(--ons-radius);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--ons-shadow-xs);
}
.ons-input::placeholder, .ons-textarea::placeholder { color: var(--ons-gray-400); }
.ons-input:hover, .ons-textarea:hover, .ons-select:hover { border-color: var(--ons-gray-400); }
.ons-input:focus, .ons-textarea:focus, .ons-select:focus {
    outline: none;
    border-color: var(--ons-primary);
    box-shadow: 0 0 0 3px rgba(46, 31, 122, 0.15);
}
.ons-input:disabled, .ons-textarea:disabled, .ons-select:disabled {
    background: var(--ons-gray-50);
    color: var(--ons-gray-400);
    cursor: not-allowed;
}
.ons-input.error, .ons-textarea.error, .ons-select.error {
    border-color: var(--ons-danger);
    box-shadow: 0 0 0 3px rgba(255, 86, 86, 0.12);
}

/* Tarih / saat inputları — mobilde sağdan taşmayı engelle */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
.ons-input[type="date"],
.ons-input[type="datetime-local"],
.ons-input[type="time"],
.filter-input[type="date"],
.filter-input[type="datetime-local"],
.filter-input[type="time"],
input.flatpickr-input,
.flatpickr-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Kök: tüm form kontrolleri çerçeveye sığsın (liste / rapor filtreleri) */
.ons-app input,
.ons-app select,
.ons-app textarea,
.ons-content input,
.ons-content select,
.ons-content textarea,
.filter-card input,
.filter-card select,
.filter-bar input,
.filter-bar select,
.ons-list input,
.ons-list select,
.ons-card input,
.ons-card select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ons-app .ons-list,
.ons-app .ons-card:not(.login-card),
.ons-app .filter-card,
.ons-app .filter-bar,
.ons-app .filter-panel,
.ons-app .filter-section,
.ons-app .report-container,
.ons-app table {
    max-width: 100%;
    box-sizing: border-box;
}

.ons-app .ons-list-item,
.ons-app .filter-group,
.ons-app .filter-row > *,
.ons-app label {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* WebKit native date alanı: içerik taşmasını kes */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.filter-row,
.filter-row-3,
.filter-date-grid,
.filter-grid,
.filter-group,
.filter-section,
.filter-panel,
.filter-actions {
    max-width: 100%;
    box-sizing: border-box;
}

.filter-row > *,
.filter-row-3 > *,
.filter-date-grid > *,
.filter-grid > *,
.filter-group > *,
.filter-panel > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767px) {
    .filter-row,
    .filter-row-3,
    .filter-date-grid,
    .filter-grid {
        grid-template-columns: 1fr !important;
    }

    /* Native date picker chrome taşmasın */
    body.ons-app,
    .filter-section,
    .filter-panel,
    .ons-content,
    .ons-page-body,
    .report-container,
    .perakende-page,
    .main-content,
    .ons-card,
    .filter-card,
    .filter-bar {
        overflow-x: clip;
        max-width: 100%;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        font-size: 16px; /* iOS zoom / taşma */
    }
}

/* Form Elemanları — Dark Mode */
[data-theme="dark"] .ons-input,
[data-theme="dark"] .ons-textarea,
[data-theme="dark"] .ons-select {
    background-color: var(--ons-gray-100);   /* #1e2a3a — dropdown ile aynı ton */
    color: var(--ons-gray-800);
    border-color: var(--ons-gray-300);
    box-shadow: none;
}
[data-theme="dark"] .ons-input::placeholder,
[data-theme="dark"] .ons-textarea::placeholder {
    color: var(--ons-gray-400);
}
[data-theme="dark"] .ons-input:hover,
[data-theme="dark"] .ons-textarea:hover,
[data-theme="dark"] .ons-select:hover {
    border-color: var(--ons-gray-400);
    background-color: var(--ons-gray-200);
}
[data-theme="dark"] .ons-input:focus,
[data-theme="dark"] .ons-textarea:focus,
[data-theme="dark"] .ons-select:focus {
    border-color: var(--ons-primary);
    background-color: var(--ons-gray-100);
    box-shadow: 0 0 0 3px rgba(149, 128, 255, 0.20);
}
[data-theme="dark"] .ons-input:disabled,
[data-theme="dark"] .ons-textarea:disabled,
[data-theme="dark"] .ons-select:disabled {
    background-color: var(--ons-gray-50);
    color: var(--ons-gray-400);
    border-color: var(--ons-gray-200);
}
[data-theme="dark"] .ons-input.error,
[data-theme="dark"] .ons-textarea.error,
[data-theme="dark"] .ons-select.error {
    border-color: var(--ons-danger);
    box-shadow: 0 0 0 3px rgba(255, 116, 116, 0.18);
}

/* Input Grupları */
.ons-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}
.ons-input-group .ons-input {
    flex: 1;
    border-radius: 0;
}
.ons-input-group .ons-input:first-child { border-radius: var(--ons-radius) 0 0 var(--ons-radius); }
.ons-input-group .ons-input:last-child  { border-radius: 0 var(--ons-radius) var(--ons-radius) 0; }
.ons-input-addon {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--ons-gray-100);
    border: 2px solid var(--ons-gray-300);
    color: var(--ons-gray-500);
    font-size: var(--ons-font-size-sm);
}
.ons-input-addon:first-child {
    border-right: none;
    border-radius: var(--ons-radius) 0 0 var(--ons-radius);
}
.ons-input-addon:last-child {
    border-left: none;
    border-radius: 0 var(--ons-radius) var(--ons-radius) 0;
}

/* Input İkon Wrapper */
.ons-input-icon-wrap {
    position: relative;
}
.ons-input-icon-wrap .ons-input {
    padding-left: 2.375rem;
}
.ons-input-icon-wrap .ons-input.icon-right {
    padding-left: 0.75rem;
    padding-right: 2.375rem;
}
.ons-input-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--ons-gray-400);
    pointer-events: none;
    font-size: 0.875rem;
}
.ons-input-icon.right {
    left: auto;
    right: 0.75rem;
}

/* Form Label */
.ons-label {
    display: block;
    font-size: var(--ons-font-size-sm);
    font-weight: 500;
    color: var(--ons-gray-700);
    margin-bottom: 0.375rem;
}
.ons-label.required::after {
    content: ' *';
    color: var(--ons-danger);
}

/* Form Hint */
.ons-hint {
    font-size: var(--ons-font-size-xs);
    color: var(--ons-gray-500);
    margin-top: 0.25rem;
}
.ons-hint.error { color: var(--ons-danger); }

/* Form Group */
.ons-form-group { margin-bottom: 1rem; }

/* Checkbox & Radio */
.ons-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ons-font-size-sm);
    color: var(--ons-gray-700);
    cursor: pointer;
    user-select: none;
}
.ons-check-input {
    width: 16px;
    height: 16px;
    accent-color: var(--ons-primary);
    flex-shrink: 0;
    cursor: pointer;
}

/* Form Yardımcı Elemanlar — Dark Mode (addon, label, hint, checkbox) */
[data-theme="dark"] .ons-input-addon {
    background: var(--ons-gray-200);
    border-color: var(--ons-gray-300);
    color: var(--ons-gray-600);
}
[data-theme="dark"] .ons-label {
    color: var(--ons-gray-700);
}
[data-theme="dark"] .ons-hint {
    color: var(--ons-gray-500);
}
[data-theme="dark"] .ons-check-label {
    color: var(--ons-gray-700);
}

/* ── 6b. ŞARTEL (Toggle Switch) ──────────────────────────── */
/*
  Kullanım:
    <label class="ons-switch">
      <input type="checkbox" class="ons-switch-input" />
      <span class="ons-switch-track">
        <span class="ons-switch-thumb"></span>
      </span>
      <span class="ons-switch-label">Bildirimler</span>
    </label>

  Varyantlar : ons-switch-primary (default), ons-switch-success,
               ons-switch-danger, ons-switch-warning
  Boyutlar   : ons-switch-sm, ons-switch-lg
*/

.ons-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    font-size: var(--ons-font-size-sm);
    color: var(--ons-gray-700);
    line-height: 1;
}
.ons-switch.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Gizli gerçek checkbox */
.ons-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Track (arka zemin) */
.ons-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.25rem;      /* 36px */
    height: 1.25rem;     /* 20px */
    border-radius: 9999px;
    background-color: var(--ons-gray-300);
    border: 2px solid transparent;
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}

/* Thumb (beyaz daire) */
.ons-switch-thumb {
    position: absolute;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    transition: left 0.22s cubic-bezier(0.34,1.4,0.64,1),
                width 0.12s ease,
                box-shadow 0.18s ease;
}

/* Checked — primary (varsayılan) */
.ons-switch-input:checked ~ .ons-switch-track {
    background-color: var(--ons-primary);
}
.ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb {
    left: calc(100% - 16px);
}

/* Focus ring */
.ons-switch-input:focus-visible ~ .ons-switch-track {
    outline: 2px solid var(--ons-primary);
    outline-offset: 2px;
}

/* Bastırma anında thumb genişler (iOS-like press efekti) */
.ons-switch:active .ons-switch-track .ons-switch-thumb {
    width: 17px;
}
.ons-switch:active .ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb {
    left: calc(100% - 19px);
}

/* ─ Renk varyantları ─ */
.ons-switch-success .ons-switch-input:checked ~ .ons-switch-track { background-color: var(--ons-success); }
.ons-switch-success .ons-switch-input:focus-visible ~ .ons-switch-track { outline-color: var(--ons-success); }

.ons-switch-danger .ons-switch-input:checked ~ .ons-switch-track  { background-color: var(--ons-danger);  }
.ons-switch-danger .ons-switch-input:focus-visible ~ .ons-switch-track { outline-color: var(--ons-danger); }

.ons-switch-warning .ons-switch-input:checked ~ .ons-switch-track { background-color: var(--ons-warning); }
.ons-switch-warning .ons-switch-input:focus-visible ~ .ons-switch-track { outline-color: var(--ons-warning); }

/* ─ Boyutlar ─ */
/* Small */
.ons-switch-sm .ons-switch-track { width: 1.75rem; height: 1rem; }
.ons-switch-sm .ons-switch-thumb { width: 11px; height: 11px; left: 1.5px; }
.ons-switch-sm .ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb { left: calc(100% - 13px); }
.ons-switch-sm:active .ons-switch-track .ons-switch-thumb { width: 14px; }
.ons-switch-sm:active .ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb { left: calc(100% - 16px); }
.ons-switch-sm { font-size: var(--ons-font-size-xs); }

/* Large */
.ons-switch-lg .ons-switch-track { width: 3rem; height: 1.625rem; }
.ons-switch-lg .ons-switch-thumb { width: 18px; height: 18px; left: 3px; }
.ons-switch-lg .ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb { left: calc(100% - 21px); }
.ons-switch-lg:active .ons-switch-track .ons-switch-thumb { width: 22px; }
.ons-switch-lg:active .ons-switch-input:checked ~ .ons-switch-track .ons-switch-thumb { left: calc(100% - 25px); }
.ons-switch-lg { font-size: var(--ons-font-size-base); }

/* ─ Şartel — Dark Mode ─ */
[data-theme="dark"] .ons-switch-track {
    background-color: var(--ons-gray-300);  /* #344560 — kapalıyken belirgin */
}
[data-theme="dark"] .ons-switch-thumb {
    background: var(--ons-gray-900);        /* daire rengi */
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
[data-theme="dark"] .ons-switch {
    color: var(--ons-gray-700);
}


/* ── 7. BADGE / ETİKET ───────────────────────────────────── */
.ons-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
    line-height: 1;
}
.ons-badge-primary { background: var(--ons-primary-bg); color: var(--ons-primary-dark); }
.ons-badge-success { background: var(--ons-success-bg); color: #15773a; }
.ons-badge-warning { background: var(--ons-warning-bg); color: #816316; }
.ons-badge-danger  { background: var(--ons-danger-bg);  color: #c52727; }
.ons-badge-info    { background: var(--ons-info-bg);    color: #1c71ae; }
.ons-badge-gray    { background: var(--ons-gray-100);   color: var(--ons-gray-600); }

/* Badge renkleri — Dark Mode override (hardcoded renk yerine token) */
[data-theme="dark"] .ons-badge-success { color: var(--ons-success); }
[data-theme="dark"] .ons-badge-warning { color: var(--ons-warning); }
[data-theme="dark"] .ons-badge-danger  { color: var(--ons-danger);  }
[data-theme="dark"] .ons-badge-info    { color: var(--ons-info);    }

/* Küçük nokta badge (durum göstergesi) */
.ons-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ons-dot-primary { background: var(--ons-primary); }
.ons-dot-success { background: var(--ons-success); }
.ons-dot-warning { background: var(--ons-warning); }
.ons-dot-danger  { background: var(--ons-danger);  }
.ons-dot-gray    { background: var(--ons-gray-400); }

/* ── 8. ALERT / BİLDİRİM ─────────────────────────────────── */
.ons-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ons-radius);
    border: 2px solid transparent;
    font-size: var(--ons-font-size-sm);
    line-height: 1.5;
}
.ons-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.ons-alert-body { flex: 1; }
.ons-alert-title { font-weight: 600; margin-bottom: 0.125rem; }
.ons-alert-close {
    background: none; border: none; cursor: pointer;
    padding: 0; color: inherit; opacity: 0.6; line-height: 1;
    flex-shrink: 0; font-size: 1rem; transition: opacity 0.15s;
}
.ons-alert-close:hover { opacity: 1; }

.ons-alert-success { background: var(--ons-success-bg); border-color: #8bf0b0; color: #0f5429; }
.ons-alert-warning { background: var(--ons-warning-bg); border-color: #ffe081; color: #4f3d0e; }
.ons-alert-danger  { background: var(--ons-danger-bg);  border-color: #ffb2b2; color: #941818; }
.ons-alert-info    { background: var(--ons-info-bg);    border-color: #b6e1ff; color: #124d79; }
.ons-alert-primary { background: var(--ons-primary-bg); border-color: var(--ons-primary-light); color: var(--ons-primary-dark); }

/* Alert renkleri — Dark Mode override (okunabilir kontrast + token) */
[data-theme="dark"] .ons-alert-success { color: var(--ons-success); border-color: rgba(75, 211, 125, 0.25); }
[data-theme="dark"] .ons-alert-warning { color: var(--ons-warning); border-color: rgba(247, 205, 76, 0.25); }
[data-theme="dark"] .ons-alert-danger  { color: var(--ons-danger);  border-color: rgba(255, 116, 116, 0.25); }
[data-theme="dark"] .ons-alert-info    { color: var(--ons-info);    border-color: rgba(123, 200, 255, 0.25); }
[data-theme="dark"] .ons-alert-primary { color: var(--ons-primary); border-color: rgba(74,95,193,0.30); }

/* ── 9. TABLO ────────────────────────────────────────────── */
.ons-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--ons-radius-lg);
    border: 2px solid var(--ons-border);
    box-shadow: var(--ons-shadow-xs);
}

.ons-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ons-font-size-sm);
    background: var(--ons-card-bg);
}
.ons-table thead {
    background: var(--ons-gray-50);
}
.ons-table th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ons-gray-500);
    border-bottom: 2px solid var(--ons-border);
    white-space: nowrap;
}
.ons-table td {
    padding: 0.625rem 0.875rem;
    color: var(--ons-gray-700);
    border-bottom: 2px solid var(--ons-gray-100);
    vertical-align: middle;
}
.ons-table tbody tr:last-child td { border-bottom: none; }
.ons-table tbody tr:hover td { background: var(--ons-gray-50); }

/* Sıkı / Kompakt tablo */
.ons-table-sm th { padding: 0.375rem 0.75rem; }
.ons-table-sm td { padding: 0.375rem 0.75rem; }

/* Sayısal sütun (sağa yaslı) */
.ons-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.ons-table .num.pos { color: var(--ons-success); }
.ons-table .num.neg { color: var(--ons-danger);  }

/* ── 10. MODAL ───────────────────────────────────────────── */
.ons-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ons-modal-backdrop.open {
    display: flex;
    animation: ons-fade-in 0.18s ease;
}
.ons-modal {
    background: var(--ons-card-bg);
    border-radius: var(--ons-radius-xl);
    box-shadow: var(--ons-shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ons-slide-up 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ons-modal-sm { max-width: 380px; }
.ons-modal-lg { max-width: 720px; }
.ons-modal-xl { max-width: 960px; }

.ons-modal-header {
    padding: 1.125rem 1.375rem;
    border-bottom: 2px solid var(--ons-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ons-modal-title {
    font-size: var(--ons-font-size-base);
    font-weight: 600;
    color: var(--ons-gray-900);
    margin: 0;
}
.ons-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    border-radius: var(--ons-radius);
    color: var(--ons-gray-400);
    font-size: 1.125rem;
    transition: var(--ons-transition);
}
.ons-modal-close:hover { background: var(--ons-gray-100); color: var(--ons-gray-700); }

.ons-modal-body {
    padding: 1.375rem;
    overflow-y: auto;
    flex: 1;
}
.ons-modal-footer {
    padding: 0.875rem 1.375rem;
    border-top: 2px solid var(--ons-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--ons-gray-50);
}

/* ── 11. DROPDOWN ────────────────────────────────────────── */
.ons-dropdown { position: relative; display: inline-block; }
.ons-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--ons-card-bg);
    border: 2px solid var(--ons-border);
    border-radius: var(--ons-radius);
    box-shadow: var(--ons-shadow-lg);
    z-index: 200;
    overflow: hidden;
    display: none;
    animation: ons-fade-in 0.12s ease;
}
.ons-dropdown-menu.right { left: auto; right: 0; }
.ons-dropdown-menu.open  { display: block; }
.ons-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--ons-font-size-sm);
    color: var(--ons-gray-700);
    cursor: pointer;
    transition: var(--ons-transition);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.ons-dropdown-item:hover { background: var(--ons-gray-50); color: var(--ons-gray-900); text-decoration: none; }
.ons-dropdown-item.danger { color: var(--ons-danger); }
.ons-dropdown-item.danger:hover { background: var(--ons-danger-bg); }
.ons-dropdown-divider {
    height: 1px;
    background: var(--ons-border);
    margin: 0.25rem 0;
}

/* ── 12. TOAST / BİLDİRİM ────────────────────────────────── */
.ons-toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 340px;
}
.ons-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--ons-gray-900);
    color: #fff;
    border-radius: var(--ons-radius-lg);
    box-shadow: var(--ons-shadow-lg);
    font-size: var(--ons-font-size-sm);
    min-width: 260px;
    animation: ons-slide-in-right 0.25s ease;
}
.ons-toast.success { background: var(--ons-success); }
.ons-toast.warning { background: var(--ons-warning); color: #1c1200; }
.ons-toast.danger  { background: var(--ons-danger);  }
.ons-toast.info    { background: var(--ons-info);    }
.ons-toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.ons-toast-body { flex: 1; }
.ons-toast-title { font-weight: 600; line-height: 1.3; }
.ons-toast-msg   { font-size: 0.8rem; opacity: 0.85; margin-top: 0.125rem; }
.ons-toast-hide  { animation: ons-slide-out-right 0.25s ease forwards; }

/* ── 13. LİSTE / MENU-LIST ───────────────────────────────── */
.ons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 2px solid var(--ons-border);
    border-radius: var(--ons-radius-lg);
    overflow: hidden;
    background: var(--ons-card-bg);
}
.ons-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--ons-gray-100);
    font-size: var(--ons-font-size-sm);
    color: var(--ons-gray-700);
    transition: var(--ons-transition);
    text-decoration: none;
}
.ons-list-item:last-child { border-bottom: none; }
.ons-list-item:hover { background: var(--ons-gray-50); text-decoration: none; }
.ons-list-item.active { background: var(--ons-primary-bg); color: var(--ons-primary); font-weight: 500; }
.ons-list-icon { color: var(--ons-gray-400); flex-shrink: 0; }
.ons-list-label { flex: 1; }
.ons-list-meta  { color: var(--ons-gray-400); font-size: var(--ons-font-size-xs); }

/* ── 14. AVATAR ──────────────────────────────────────────── */
.ons-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--ons-primary-bg);
    color: var(--ons-primary);
    font-size: 0.8rem;
    width: 36px;
    height: 36px;
}
.ons-avatar-sm { width: 28px; height: 28px; font-size: 0.65rem; }
.ons-avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.ons-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── 15. YARDIMCI SINIFLAR ───────────────────────────────── */

/* Sayfa Başlık Alanı */
.ons-page-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ons-page-header-left h1 {
    font-size: var(--ons-font-size-xl);
    font-weight: 700;
    color: var(--ons-gray-900);
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}
.ons-page-header-left p {
    color: var(--ons-gray-500);
    font-size: var(--ons-font-size-sm);
    margin: 0;
}

/* Grid Yardımcıları */
.ons-grid { display: grid; gap: 1rem; }
.ons-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ons-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ons-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Separator */
.ons-divider {
    height: 1px;
    background: var(--ons-border);
    margin: 1rem 0;
    border: none;
}

/* Scrollbar temizlik */
.ons-scroll-hide::-webkit-scrollbar { display: none; }
.ons-scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Dokunma geri bildirimi */
.ons-touchable { -webkit-tap-highlight-color: transparent; }
.ons-touchable:active { opacity: 0.75; transform: scale(0.97); transition: transform 0.07s ease, opacity 0.07s ease; }

/* ── 16. ANİMASYONLAR ────────────────────────────────────── */
@keyframes ons-spin          { to { transform: rotate(360deg); } }
@keyframes ons-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes ons-slide-up      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ons-slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ons-slide-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }

/* ── 17. MOBİL RESPONSIVE ───────────────────────────────── */
@media (max-width: 768px) {
    .ons-sidebar {
        transform: translateX(calc(-1 * var(--ons-sidebar-width)));
    }
    .ons-sidebar.mobile-open {
        transform: translateX(0);
    }
    .ons-main {
        margin-left: 0;
    }
    .ons-grid-2,
    .ons-grid-3,
    .ons-grid-4 { grid-template-columns: 1fr; }
    .ons-content { padding: 1rem; }
    .ons-modal { max-width: 100%; margin: 0.5rem; }
    .ons-toast-container { left: 1rem; right: 1rem; max-width: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .ons-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ons-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── iOS Safe Area — mobil (iPhone çentiği / home indicator) ─ */
@media (max-width: 1023px) {
    .ons-modal-backdrop:not(.ps-drawer-backdrop) {
        padding:
            var(--ons-safe-top)
            var(--ons-safe-right)
            var(--ons-safe-bottom)
            var(--ons-safe-left);
    }

    .ons-modal.ps-drawer {
        padding-top: var(--ons-safe-top);
        padding-bottom: var(--ons-safe-bottom);
    }

    .ps-app-shell {
        padding-left: calc(0.5rem + var(--ons-safe-left));
        padding-right: calc(0.5rem + var(--ons-safe-right));
    }

    .ps-bottom-bar,
    .ps-mobile-bar,
    #mobile-bottom-bar,
    .bottom-bar,
    .save-bar {
        padding-left: max(0.75rem, var(--ons-safe-left));
        padding-right: max(0.75rem, var(--ons-safe-right));
        padding-bottom: max(0.5rem, var(--ons-safe-bottom));
    }

    #islemler-right-panel.mobile-open {
        padding-left: max(0.75rem, var(--ons-safe-left));
        padding-right: max(0.75rem, var(--ons-safe-right));
        padding-bottom: max(1rem, var(--ons-safe-bottom));
    }

    .ons-toast-container {
        bottom: calc(1rem + var(--ons-safe-bottom));
    }
}