/* ==========================================================================
   GRAFINO DESIGN SYSTEM - BASE VARIABLES, TOKENS & UTILITIES
   ========================================================================== */

:root {
    /* --- COLOR SYSTEM: PRIMARY (Grafino Blue — logo palette) --- */
    --g-primary-50:  #eaf3fb;
    --g-primary-100: #d3e6f6;
    --g-primary-200: #a8cded;
    --g-primary-300: #72aee0;
    --g-primary-400: #3f8bcb;
    --g-primary-500: #2463af; /* Main */
    --g-primary-600: #1d5493; /* Hover */
    --g-primary-700: #164178; /* Active/Dark */
    --g-primary-800: #14345e;
    --g-primary-900: #16233f;

    /* --- COLOR SYSTEM: NEUTRAL (Slate) --- */
    --g-neutral-50:  #f8fafc;
    --g-neutral-100: #f1f5f9;
    --g-neutral-200: #e2e8f0;
    --g-neutral-300: #cbd5e1;
    --g-neutral-400: #94a3b8;
    --g-neutral-500: #64748b;
    --g-neutral-600: #475569;
    --g-neutral-700: #334155;
    --g-neutral-800: #1e293b;
    --g-neutral-900: #0f172a;

    /* --- COLOR SYSTEM: SUCCESS --- */
    --g-success-50:  #ecfdf5;
    --g-success-100: #d1fae5;
    --g-success-500: #10b981;
    --g-success-600: #059669;
    --g-success-700: #047857;

    /* --- COLOR SYSTEM: WARNING --- */
    --g-warning-50:  #fffbeb;
    --g-warning-100: #fef3c7;
    --g-warning-500: #f59e0b;
    --g-warning-600: #d97706;
    --g-warning-700: #b45309;

    /* --- COLOR SYSTEM: DANGER --- */
    --g-danger-50:  #fef2f2;
    --g-danger-100: #fee2e2;
    --g-danger-500: #ef4444;
    --g-danger-600: #dc2626;
    --g-danger-700: #b91c1c;

    /* --- COLOR SYSTEM: INFO --- */
    --g-info-50:  #f0fdfa;
    --g-info-100: #cffafe;
    --g-info-500: #06b6d4;
    --g-info-600: #0891b2;
    --g-info-700: #0e7490;

    /* --- SEMANTIC BACKGROUNDS & TEXT --- */
    --g-bg-body: var(--g-neutral-50);
    --g-bg-surface: #ffffff;
    --g-bg-surface-muted: var(--g-neutral-50);
    --g-bg-sidebar: var(--g-neutral-900);
    
    --g-text-main: var(--g-neutral-900);
    --g-text-muted: var(--g-neutral-500);
    --g-text-subtle: var(--g-neutral-400);
    --g-text-light: var(--g-neutral-50);
    
    --g-border-color: var(--g-neutral-200);
    --g-border-focus: var(--g-primary-500);

    /* --- SPACING (8px Base) --- */
    --g-space-1: 4px;
    --g-space-2: 8px;
    --g-space-3: 12px;
    --g-space-4: 16px;
    --g-space-5: 20px;
    --g-space-6: 24px;
    --g-space-8: 32px;
    --g-space-10: 40px;
    --g-space-12: 48px;
    --g-space-16: 64px;

    /* --- RADIUS --- */
    --g-radius-sm: 4px;
    --g-radius-md: 8px;
    --g-radius-lg: 12px;
    --g-radius-xl: 16px;
    --g-radius-2xl: 20px;
    --g-radius-pill: 9999px;
    --g-radius-full: 9999px;

    /* --- SHADOWS & GLOWS --- */
    --g-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --g-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --g-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --g-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --g-shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.25);
    --g-glow-primary: 0 0 0 3px rgba(37, 99, 235, 0.15);

    /* --- TRANSITIONS (150ms - 450ms limit) --- */
    --g-trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --g-trans-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --g-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-INDEX ARCHITECTURE --- */
    --g-z-dropdown: 1000;
    --g-z-sticky: 1020;
    --g-z-fixed: 1030;
    --g-z-backdrop: 1040;
    --g-z-drawer: 1045;
    --g-z-modal: 1050;
    --g-z-toast: 1060;
    --g-z-tooltip: 1070;

    /* --- Tema-duyarlı yardımcılar (ör. loading overlay arka planı) --- */
    --g-overlay-bg: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   AÇIK / KOYU / SİSTEM TEMA — yalnızca .g-themeable kapsamında (Müşteri Paneli)
   ==========================================================================
   Master Admin, Login/Register, landing sayfası bu CSS dosyalarını PAYLAŞIR ama
   <body> üzerinde .g-themeable sınıfı/data-theme özniteliği HİÇ BASILMAZ (bkz.
   templates/app.php) — bu yüzden aşağıdaki kurallar o sayfalarda asla eşleşmez,
   görünümleri bu görevden TAMAMEN etkilenmez. Yeni bir token/renk sistemi icat
   edilmedi — yukarıdaki AYNI --g-* değişkenleri, yalnızca .g-themeable[data-theme]
   kapsamında farklı (koyu) değerlerle yeniden tanımlanır; bileşen CSS'leri hiç
   değişmedi. "system" (data-theme YOK) durumunda tarayıcının prefers-color-scheme
   medya sorgusu devreye girer — JS'siz, FOUC'suz, işletim sistemi teması anlık
   değiştiğinde sayfa yenilenmeden otomatik takip eder. */
@media (prefers-color-scheme: dark) {
    .g-themeable:not([data-theme="light"]) {
        --g-neutral-50:  #101a30;
        --g-neutral-100: #16223c;
        --g-neutral-200: #253150;
        --g-neutral-300: #37456a;
        --g-neutral-400: #5c6c94;
        --g-neutral-500: #8493b8;
        --g-neutral-600: #a7b2d1;
        --g-neutral-700: #c8d0e6;
        --g-neutral-800: #e0e5f2;
        --g-neutral-900: #f2f4fa;

        --g-success-50: #0d2419; --g-success-100: #133821; --g-success-700: #4ade80;
        --g-warning-50: #2b2108; --g-warning-100: #3d2f0c; --g-warning-700: #fbbf24;
        --g-danger-50:  #2a1414; --g-danger-100: #3c1c1c;  --g-danger-700: #f87171;
        --g-info-50:    #0c2630; --g-info-100:  #133846;   --g-info-700:  #67e8f9;

        --g-bg-body: #0a1120;
        --g-bg-surface: #141d33;
        --g-bg-surface-muted: #101a30;
        --g-bg-sidebar: #0a0f1e;

        --g-text-main: #eef1f9;
        --g-text-muted: #9aa8c7;
        --g-text-subtle: #6b7ea0;
        --g-text-light: #f2f4fa;

        --g-border-color: #253150;
        --g-overlay-bg: rgba(10, 17, 32, 0.75);

        --g-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
        --g-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --g-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.44), 0 4px 6px -4px rgba(0, 0, 0, 0.32);
        --g-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.36);
    }
}
.g-themeable[data-theme="dark"] {
    --g-neutral-50:  #101a30;
    --g-neutral-100: #16223c;
    --g-neutral-200: #253150;
    --g-neutral-300: #37456a;
    --g-neutral-400: #5c6c94;
    --g-neutral-500: #8493b8;
    --g-neutral-600: #a7b2d1;
    --g-neutral-700: #c8d0e6;
    --g-neutral-800: #e0e5f2;
    --g-neutral-900: #f2f4fa;

    --g-success-50: #0d2419; --g-success-100: #133821; --g-success-700: #4ade80;
    --g-warning-50: #2b2108; --g-warning-100: #3d2f0c; --g-warning-700: #fbbf24;
    --g-danger-50:  #2a1414; --g-danger-100: #3c1c1c;  --g-danger-700: #f87171;
    --g-info-50:    #0c2630; --g-info-100:  #133846;   --g-info-700:  #67e8f9;

    --g-bg-body: #0a1120;
    --g-bg-surface: #141d33;
    --g-bg-surface-muted: #101a30;
    --g-bg-sidebar: #0a0f1e;

    --g-text-main: #eef1f9;
    --g-text-muted: #9aa8c7;
    --g-text-subtle: #6b7ea0;
    --g-text-light: #f2f4fa;

    --g-border-color: #253150;
    --g-overlay-bg: rgba(10, 17, 32, 0.75);

    --g-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
    --g-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --g-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.44), 0 4px 6px -4px rgba(0, 0, 0, 0.32);
    --g-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.36);
}

/* --- RESET & TYPOGRAPHY --- */
.grafino-app *, .grafino-app *::before, .grafino-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.grafino-app {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--g-bg-body);
    color: var(--g-text-main);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.grafino-app a {
    color: var(--g-primary-600);
    text-decoration: none;
    transition: color var(--g-trans-fast);
}

.grafino-app a:hover {
    color: var(--g-primary-700);
}

.grafino-app h1, .grafino-app h2, .grafino-app h3, .grafino-app h4, .grafino-app h5, .grafino-app h6 {
    color: var(--g-text-main);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* --- ACCESSIBILITY --- */
.grafino-app :focus { outline: none; }
.grafino-app :focus-visible { outline: 2px solid var(--g-primary-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .grafino-app *, .grafino-app *::before, .grafino-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- UTILITY CLASSES (To completely avoid inline CSS) --- */
.g-d-flex { display: flex; }
.g-flex-col { flex-direction: column; }
.g-items-center { align-items: center; }
.g-items-end { align-items: flex-end; }
.g-items-start { align-items: flex-start; }
.g-justify-between { justify-content: space-between; }
.g-justify-center { justify-content: center; }
.g-justify-end { justify-content: flex-end; }
.g-flex-1 { flex: 1; }
.g-flex-wrap { flex-wrap: wrap; }

/* Grid System */
.g-grid { display: grid; }
.g-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.g-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.g-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.g-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.g-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.g-col-span-12 { grid-column: span 12; }
.g-col-span-8 { grid-column: span 8; }
.g-col-span-6 { grid-column: span 6; }
.g-col-span-4 { grid-column: span 4; }
.g-col-span-3 { grid-column: span 3; }

/* Responsive grid-span variants (breakpoint suffix: @sm 640px, @md 768px, @lg 1024px) */
@media (min-width: 640px) {
    .g-col-span-12\@sm { grid-column: span 12; }
    .g-col-span-8\@sm  { grid-column: span 8; }
    .g-col-span-6\@sm  { grid-column: span 6; }
    .g-col-span-4\@sm  { grid-column: span 4; }
    .g-col-span-3\@sm  { grid-column: span 3; }
}
@media (min-width: 768px) {
    .g-col-span-12\@md { grid-column: span 12; }
    .g-col-span-8\@md  { grid-column: span 8; }
    .g-col-span-6\@md  { grid-column: span 6; }
    .g-col-span-4\@md  { grid-column: span 4; }
    .g-col-span-3\@md  { grid-column: span 3; }
}
@media (min-width: 1024px) {
    .g-col-span-12\@lg { grid-column: span 12; }
    .g-col-span-8\@lg  { grid-column: span 8; }
    .g-col-span-6\@lg  { grid-column: span 6; }
    .g-col-span-4\@lg  { grid-column: span 4; }
    .g-col-span-3\@lg  { grid-column: span 3; }
}

/* Gaps */
.g-gap-1 { gap: var(--g-space-1); }
.g-gap-2 { gap: var(--g-space-2); }
.g-gap-3 { gap: var(--g-space-3); }
.g-gap-4 { gap: var(--g-space-4); }
.g-gap-6 { gap: var(--g-space-6); }
.g-gap-8 { gap: var(--g-space-8); }

/* Margins & Paddings */
.g-m-0 { margin: 0; }
.g-mb-1 { margin-bottom: var(--g-space-1); }
.g-mb-2 { margin-bottom: var(--g-space-2); }
.g-mb-3 { margin-bottom: var(--g-space-3); }
.g-mb-4 { margin-bottom: var(--g-space-4); }
.g-mb-6 { margin-bottom: var(--g-space-6); }
.g-mb-8 { margin-bottom: var(--g-space-8); }

.g-mt-2 { margin-top: var(--g-space-2); }
.g-mt-4 { margin-top: var(--g-space-4); }
.g-mt-6 { margin-top: var(--g-space-6); }

.g-mr-2 { margin-right: var(--g-space-2); }
.g-mr-4 { margin-right: var(--g-space-4); }

.g-p-4 { padding: var(--g-space-4); }
.g-p-6 { padding: var(--g-space-6); }

/* Typography Utils */
.g-text-center { text-align: center; }
.g-text-right { text-align: right; }
.g-text-muted { color: var(--g-text-muted); }
.g-text-subtle { color: var(--g-text-subtle); }
.g-text-main { color: var(--g-text-main); }
.g-text-primary { color: var(--g-primary-600); }
.g-text-success { color: var(--g-success-600); }
.g-text-warning { color: var(--g-warning-600); }
.g-text-danger { color: var(--g-danger-600); }
.g-text-info { color: var(--g-info-600); }

.g-font-normal { font-weight: 400; }
.g-font-medium { font-weight: 500; }
.g-font-semibold { font-weight: 600; }
.g-font-bold { font-weight: 700; }

.g-text-xs { font-size: 12px; }
.g-text-sm { font-size: 13px; }
.g-text-base { font-size: 14px; }
.g-text-lg { font-size: 16px; }
.g-text-xl { font-size: 18px; }
.g-text-2xl { font-size: 24px; }
.g-text-3xl { font-size: 30px; }

/* Chart Height Helpers (To avoid inline styles in demo charts) */
.g-h-10 { height: 10%; } .g-h-20 { height: 20%; } .g-h-30 { height: 30%; }
.g-h-40 { height: 40%; } .g-h-50 { height: 50%; } .g-h-60 { height: 60%; }
.g-h-70 { height: 70%; } .g-h-80 { height: 80%; } .g-h-90 { height: 90%; } .g-h-100 { height: 100%; }

/* Responsive Display Utilities */
.g-d-none { display: none; }
@media (min-width: 640px)  { .g-sm-d-flex { display: flex; } .g-sm-d-block { display: block; } }
@media (min-width: 768px)  { .g-md-d-flex { display: flex; } .g-md-d-block { display: block; } }
@media (min-width: 1024px) { .g-lg-d-flex { display: flex; } .g-lg-d-block { display: block; } }

/* Scrollbar */
.grafino-app ::-webkit-scrollbar { width: 6px; height: 6px; }
.grafino-app ::-webkit-scrollbar-track { background: transparent; }
.grafino-app ::-webkit-scrollbar-thumb { background: var(--g-neutral-300); border-radius: var(--g-radius-full); }
.grafino-app ::-webkit-scrollbar-thumb:hover { background: var(--g-neutral-400); }