/* === global.css === */
/* GLOBAL RESET & BASE STYLES */
/* Bu dosya tüm modüller tarafından paylaşılır */
/* NOT: Global stiller form modülünü etkilememeli - form modülü kendi stillerini tanımlar */

/* Global reset - SADECE form modülü ve visual editor dışındaki sayfalar için */
/* NOT: Bootstrap kendi reset'lerini kullanır, sadece box-sizing ekliyoruz */
/* Form modülü ve visual editor kendi box-sizing'ini tanımlar, admin paneli etkilenmemeli */
/* Visual editor'ı tamamen exclude et */
body:not(.tool-form):not(.module-form):not(.editor-page) * {
    box-sizing: border-box;
}

/* Visual editor'ı tamamen exclude et - hiçbir global stil uygulanmasın */
/* CSS specificity ile - visual editor'ın kendi stilleri öncelikli olacak */
body.editor-page .editor-container,
body.editor-page .editor-container * {
    /* Visual editor kendi stillerini kullanır - global reset'ler uygulanmasın */
    /* box-sizing, color, background gibi özellikler visual editor CSS'inden gelecek */
}

/* Bootstrap kendi reset'lerini kullanır - admin paneli için ek reset gerekmez */

/* HTML scroll - SADECE form modülü dışındaki sayfalar için */
/* Form modülü kendi scroll-behavior'unu tanımlar */
html:not(.tool-form-page) {
    scroll-behavior: smooth;
}

/* Editor mode'da smooth scroll kaldır - takılmaları önle */
html.editor-mode:not(.tool-form-page),
body.editor-mode:not(.tool-form) {
    scroll-behavior: auto;
}



/* === admin.css === */
/* ADMIN PANEL STİLLERİ - MODÜLER YAPI
 * Bu dosya admin paneli için özel CSS içerir.
 * Bağımsız modül - diğer modüllerle çakışmaz.
 * !important kullanılmaz - CSS specificity ile çözüldü
 */

/* === ADMIN PANEL STYLES (Merged) === */
/* ========================================== */

/* --- 1. GENEL STİLLER --- */
/* Admin paneli için - form modülünü etkilemez */
/* Background color kaldırıldı - kullanıcı isteği */

/* --- 1. GENEL STİLLER --- */
/* Admin paneli için - form modülünü etkilemez */

/* Navbar üst boşluğu düzeltmesi - Sadece admin panel sayfaları için */
/* Visual editör ve portal sayfalarını exclude et */
body:not(.tool-form):not(.module-form):not(.editor-container):not(.portal-page) {
    margin: 0;
    padding: 0;
}

html:not(.tool-form-page):not(.editor-page):not(.portal-page) {
    margin: 0;
    padding: 0;
}

/* Admin panel layout için navbar */
body:not(.editor-container):not(.portal-page) .navbar {
    margin-top: 0 !important;
    margin-bottom: 0;
}

/* --- 2. ANA PANEL STİLLERİ --- */
/* Sekme (Tab) Navigasyonu */
.nav-tabs .nav-link {
    font-weight: 600;
    color: #495057;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Kart (Card) Başlığı */
.card-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

/* --- 3. GİRİŞ SAYFASI STİLLERİ --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-card {
    max-width: 400px;
    width: 100%;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    overflow: hidden;
}

.card-header-custom {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    color: white;
    text-align: center;
    padding: 2rem 1.5rem;
    border: none;
}

.card-header-custom h4 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-header-custom p {
    margin-bottom: 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.toggle-password {
    cursor: pointer;
    background: none;
    border: none;
    color: #6c757d;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Giriş formundaki şifre gösterme butonu için kenarlık ayarı */
/* Bootstrap 5'te input-group-append kaldırıldı, buton direkt input-group içinde */
.login-card .input-group .btn {
    border-left: none;
}

.submissions-copy-field {
    cursor: pointer;
    color: #007bff;
}


/* === editor-namespace.css === */
/**
 * Editor Namespace CSS - İzole Editor Stilleri
 * Bu stiller sadece [data-editor-mode="true"] içinde çalışır
 * Direkt URL'de görünmez - sadece editör iframe içinde aktif
 */

/* Editor Mode Container - Sadece iframe içinde aktif */
[data-editor-mode="true"] {
    /* Editor mode container styles */
}

/* HTML ve Body - Editor mode'da overflow kontrolü */
/* Specificity artırıldı - !important kaldırıldı */
[data-editor-mode="true"] html {
    overflow: hidden;
    min-height: 100%;
    height: auto;
    position: relative;
}

[data-editor-mode="true"] body {
    overflow: hidden;
    min-height: 100%;
    height: auto;
    position: relative;
}

/* Görsel yükleme hatalarını gizle */
/* Specificity artırıldı - !important kaldırıldı */
[data-editor-mode="true"] img[src=""],
[data-editor-mode="true"] img:not([src]) {
    display: none;
}

/* Element seçimi için - sadece editor mode'da */
[data-editor-mode="true"] [data-json-path] {
    position: relative;
    cursor: pointer;
}

/* Hover'da hiçbir stil değişikliği yok - gerçek sayfadaki hover efektleri çalışacak */
[data-editor-mode="true"] [data-json-path]:hover:not(.editor-selected) {
    /* Gerçek sayfadaki hover stilleri korunacak */
}

/* Seçildiğinde sadece outline - bu editör için gerekli */
/* Direkt URL'de outline olmayacak çünkü editor-selected class'ı yok */
/* Specificity artırıldı - !important kaldırıldı */
[data-editor-mode="true"] [data-json-path].editor-selected {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Seçilmediğinde outline yok - direkt URL'deki gibi */
[data-editor-mode="true"] [data-json-path]:not(.editor-selected) {
    outline: none;
}

/* Gold-text elementleri için - gradient'i koru ama outline ekle */
[data-editor-mode="true"] [data-json-path].editor-selected.gold-text {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Hover highlight - sadece cursor */
[data-editor-mode="true"] [data-json-path].editor-hover-highlight {
    cursor: pointer;
}

/* Hover önizleme - butonlar için */
[data-editor-mode="true"] [data-json-path].editor-hover-preview {
    /* Hover efektini simüle et - CSS'teki hover stilleri uygulanacak */
    pointer-events: auto;
}

/* Direkt URL ile %100 aynı - sadece editör işlevleri için minimal stil */



/* === rhythm-system.css === */
/**
 * VERTICAL RHYTHM & SPACING SYSTEM (ISO 9241-210 Compliant)
 * Base Unit: 8px
 * Scaling: Device-dependent factors
 */

:root {
    /* 1. Base Constants */
    --base-unit: 8px;

    /* 2. Device Scaling Factors (Default: Mobile/New Phone) */
    --scale-factor: 1;

    /* 3. Spacing Set (Calculated: base * scale * multiplier) */
    /* calc() is used to allow dynamic scaling via --scale-factor updates */
    --space-1: calc(var(--base-unit) * var(--scale-factor) * 1);
    /* 8px */
    --space-2: calc(var(--base-unit) * var(--scale-factor) * 2);
    /* 16px */
    --space-3: calc(var(--base-unit) * var(--scale-factor) * 3);
    /* 24px */
    --space-4: calc(var(--base-unit) * var(--scale-factor) * 4);
    /* 32px */
    --space-6: calc(var(--base-unit) * var(--scale-factor) * 6);
    /* 48px */
    --space-8: calc(var(--base-unit) * var(--scale-factor) * 8);
    /* 64px */
    --space-12: calc(var(--base-unit) * var(--scale-factor) * 12);
    /* 96px */
    --space-16: calc(var(--base-unit) * var(--scale-factor) * 16);
    /* 128px */

    /* 4. Semantic Gaps (Applied to Layout) */
    --gap-component: var(--space-2);
    /* Default: 16px */
    --gap-section: var(--space-6);
    /* Default: 48px */

    /* 5. Admin Panel Semantic Spacing (8-Point Grid Compliant) */
    --admin-gap-xs: var(--space-1);
    /* 8px - minimal gaps */
    --admin-gap-sm: var(--space-2);
    /* 16px - standard gaps */
    --admin-gap-md: var(--space-3);
    /* 24px - medium gaps */
    --admin-gap-lg: var(--space-4);
    /* 32px - large gaps */
    --admin-gap-section: var(--space-6);
    /* 48px - section gaps */

    /* Admin Component Tokens */
    --admin-card-padding: var(--space-3);
    /* 24px */
    --admin-card-padding-sm: var(--space-2);
    /* 16px */
    --admin-card-gap: var(--space-3);
    /* 24px */
    --admin-header-padding: var(--space-2);
    /* 16px */
    --admin-item-gap: var(--space-1);
    /* 8px */
    --admin-panel-height: auto;
    /* Content-driven, no fixed */
}

/* Device Scaling Rules (Media Queries) */

/* Old Phones / Small Screens (<= 360px) */
@media (max-width: 360px) {
    :root {
        --scale-factor: 0.85;
        --gap-section: var(--space-6);
        /* ~40px */
        --gap-component: var(--space-2);
        /* ~13px */
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) {
    :root {
        --scale-factor: 1.0;
        --gap-section: var(--space-3);
        /* 24px - tighter section gaps */
        --gap-component: var(--space-2);
        /* 16px - standard component gaps */
    }
}

/* Laptops / Legacy PC (1280px - 1366px) */
@media (min-width: 1280px) {
    :root {
        --scale-factor: 1.0;
        --gap-section: var(--space-3);
        /* 24px - consistent section gaps */
        --gap-component: var(--space-2);
        /* 16px - compact component gaps */
    }
}

/* Modern Desktop / Large Screens (>= 1440px) */
@media (min-width: 1440px) {
    :root {
        --scale-factor: 1.0;
        --gap-section: var(--space-3);
        /* 24px - compact section spacing for admin panels */
        --gap-component: var(--space-2);
        /* 16px - tight component spacing */
    }
}

/* TV / 10-foot UX (Explicit context via class or very large query if needed, keeping simple for now) */

/* Utility Classes */
.gap-system-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-section);
}

.gap-system-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

/* Margin Utilities override if needed */
.u-mb-section {
    margin-bottom: var(--gap-section) !important;
}

.u-mb-component {
    margin-bottom: var(--gap-component) !important;
}

/* === Admin Panel Utility Classes (8-Point Grid) === */

/* Admin Padding Classes */
.admin-p-xs {
    padding: var(--admin-gap-xs) !important;
}

.admin-p-sm {
    padding: var(--admin-gap-sm) !important;
}

.admin-p-md {
    padding: var(--admin-gap-md) !important;
}

.admin-p-lg {
    padding: var(--admin-gap-lg) !important;
}

/* Admin Card Body Padding */
.admin-card-body {
    padding: var(--admin-card-padding) !important;
}

.admin-card-body-sm {
    padding: var(--admin-card-padding-sm) !important;
}

/* Admin Header Padding */
.admin-panel-header {
    padding: var(--admin-gap-xs) var(--admin-gap-sm) !important;
    /* 8px 16px */
}

/* Admin Margin Bottom Classes */
.admin-mb-xs {
    margin-bottom: var(--admin-gap-xs) !important;
}

.admin-mb-sm {
    margin-bottom: var(--admin-gap-sm) !important;
}

.admin-mb-md {
    margin-bottom: var(--admin-gap-md) !important;
}

.admin-mb-lg {
    margin-bottom: var(--admin-gap-lg) !important;
}

.admin-mb-section {
    margin-bottom: var(--admin-gap-section) !important;
}

/* Admin Gap Classes for Flex/Grid */
.admin-gap-xs {
    gap: var(--admin-gap-xs) !important;
}

.admin-gap-sm {
    gap: var(--admin-gap-sm) !important;
}

.admin-gap-md {
    gap: var(--admin-gap-md) !important;
}

/* Admin Item Compact (for lists/activity cards) */
.admin-item-compact {
    padding: var(--admin-gap-xs) !important;
    margin-bottom: var(--admin-gap-xs) !important;
}

/* Remove Fixed Heights - Content Driven */
.admin-height-auto {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* === Unified Admin Page Header System (8-Point Grid) === */
/**
 * Standardized header for all admin pages
 * - Consistent left/right margins (inherits from container-xxl)
 * - Consistent vertical spacing (8-point grid)
 * - Content area only changes, header stays consistent
 */

/* Admin Page Container - removes duplicate container padding */
.admin-page {
    /* Layout inherits container-xxl, no extra padding needed */
    padding: 0 !important;
}

/* Admin Page Header - Standardized across all tabs */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--admin-gap-sm);
    /* 16px */
    margin-bottom: var(--admin-gap-md);
    /* 24px */
    border-bottom: 1px solid #dee2e6;
    min-height: 48px;
    /* 8-point grid: 6 * 8 = 48px */
    flex-wrap: wrap;
    gap: var(--admin-gap-sm);
    /* 16px */
}

.admin-page-header-title {
    display: flex;
    align-items: center;
    gap: var(--admin-gap-sm);
    /* 16px */
}

.admin-page-header-title h4 {
    margin: 0;
    font-weight: 700;
    color: #2d3436;
    font-size: 1.25rem;
}

.admin-page-header-title .header-subtitle {
    color: #6c757d;
    font-size: 0.875rem;
    border-left: 1px solid #dee2e6;
    padding-left: var(--admin-gap-sm);
    /* 16px */
}

.admin-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--admin-gap-xs);
    /* 8px */
}

/* Admin Card Header - For card-based layouts */
.admin-card-header {
    padding: var(--admin-gap-xs) var(--admin-gap-md);
    /* 8px 24px */
    min-height: 48px;
    /* 8-point grid */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.admin-card-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

/* Admin Content Section - Below header */
.admin-content-section {
    margin-bottom: var(--admin-gap-md);
    /* 24px */
}

/* Admin Filter Bar - Consistent filter styling */
.admin-filter-bar {
    background: #f8f9fa;
    border-radius: 8px;
    padding: var(--admin-gap-sm);
    /* 16px */
    margin-bottom: var(--admin-gap-md);
    /* 24px */
    display: flex;
    align-items: center;
    gap: var(--admin-gap-xs);
    /* 8px */
    flex-wrap: wrap;
}

/* Admin Stats Row - For statistics cards */
.admin-stats-row {
    margin-bottom: var(--admin-gap-md);
    /* 24px */
}

/* Remove extra vertical gaps from nested containers */
.admin-page .container-xxl,
.admin-page .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

/* === z-index-system.css === */
/**
 * Z-Index Hiyerarşi Sistemi
 * Tüm modüllerde tutarlı z-index kullanımı için merkezi tanımlar
 */

:root {
    /* Z-Index Katmanları - Hiyerarşik Sistem */

    /* Form Tool Layer (1000-1999) */
    --z-form-background: 1000;
    --z-form-modal-overlay: 1000;
    --z-form-modal-content: 1001;
    --z-form-modal-close: 1002;
    --z-form-urgency-badge: 1003;
    --z-form-trust-badge: 1004;
    --z-form-countdown: 5;
    --z-form-hero-content: 1;
    --z-form-section-bg: -1;
    --z-form-cta-button: 2;
    --z-form-event-banner: 100;
    --z-form-presenter-image: 1;
    --z-form-author-avatar: 1;
    --z-form-logo-wrapper: 1;
    --z-form-gallery-item: 1;
    --z-form-footer-content: 1;
    --z-form-sticky-element: 10;
    --z-form-feedback: 10002;
    --z-form-overlay-content: 10001;

    /* Test Tool Layer (2000-2999) */
    --z-test-background: 2000;
    --z-test-modal-overlay: 2000;
    --z-test-modal-content: 2001;
    --z-test-modal-close: 2002;

    /* Portal Tool Layer (3000-3999) */
    --z-portal-background: 3000;
    --z-portal-modal-overlay: 3000;
    --z-portal-modal-content: 3001;
    --z-portal-loading-overlay: 3050;

    /* Admin Panel Layer (4000-4999) */
    --z-admin-background: 4000;
    --z-admin-modal-overlay: 4000;
    --z-admin-modal-content: 4001;
    --z-admin-dropdown: 4100;
    --z-admin-tooltip: 4150;

    /* Visual Editor UI Layer (5000-5999) */
    --z-editor-background: 5000;
    --z-editor-header: 5100;
    --z-editor-sidebar: 5200;
    --z-editor-property-panel: 5300;
    --z-editor-device-label: 5400;
    --z-editor-navigator: 5500;

    /* Visual Editor Modal Layer (10000-10999) */
    --z-editor-modal-overlay: 10000;
    --z-editor-modal-content: 10001;
    --z-editor-modal-close: 10002;
    --z-editor-media-gallery: 10003;
}

/* Form Tool Modals */
body.tool-form .modal-overlay,
body.tool-form #register-modal {
    z-index: var(--z-form-modal-overlay);
}

body.tool-form .modal-content {
    z-index: var(--z-form-modal-content);
}

body.tool-form .modal-close {
    z-index: var(--z-form-modal-close);
}

/* Test Tool Modals */
body.tool-test .modal,
body.tool-test #screenshotModal {
    z-index: var(--z-test-modal-overlay);
}

body.tool-test .modal-content {
    z-index: var(--z-test-modal-content);
}

/* Visual Editor UI */
.visual-editor-container {
    z-index: var(--z-editor-background);
}

.editor-header {
    z-index: var(--z-editor-header);
}

.editor-sidebar {
    z-index: var(--z-editor-sidebar);
}

.editor-property-panel {
    z-index: var(--z-editor-property-panel);
}

/* Visual Editor Modals */
#media-gallery-modal {
    z-index: var(--z-editor-modal-overlay);
}

#media-gallery-modal .modal-content {
    z-index: var(--z-editor-modal-content);
}


/* === GALLERY MODULE STYLES === */
/* Gallery sayfası için component-based namespaced CSS */

/* Drop Zone */
.gallery-drop-zone {
    border: 2px dashed #ccc;
    background: #f8f9fa;
}

/* Upload Progress */
.gallery-upload-progress {
    height: 5px;
}

.gallery-progress-bar {
    width: 0%;
}

/* Folder Header */
.gallery-folder-header {
    cursor: pointer;
    user-select: none;
}

.gallery-folder-toggle {
    transition: transform 0.3s ease;
}

/* Folder Content */
.gallery-folder-content {
    display: none;
}

/* Card Image Wrapper - Avatar */
.gallery-card-img-avatar {
    height: 80px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px 6px 0 0;
}

/* Card Image Wrapper - General */
.gallery-card-img-general {
    height: 100px;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px 6px 0 0;
}

/* Card Image */
.gallery-card-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Badge Styles */
.gallery-badge-order {
    font-size: 9px;
}

.gallery-card-text {
    font-size: 11px;
}

.gallery-card-meta {
    font-size: 9px;
}

/* Action Buttons */
.gallery-action-btn {
    width: 24px;
    height: 24px;
    padding: 0;
}

.gallery-action-icon {
    font-size: 10px;
}

/* === SUBMISSIONS MODULE STYLES === */
/* Submissions sayfası için component-based namespaced CSS */

.submissions-select-auto {
    width: auto;
}

.submissions-th-checkbox {
    width: 40px;
}

.submissions-th-id {
    width: 30%;
}

.submissions-copy-field {
    cursor: pointer;
    color: #007bff;
}

.submissions-copy-field:hover {
    color: #0056b3;
}

/* === FORM MODULE STYLES === */
/* Form template için component-based namespaced CSS */

.form-feedback-hidden {
    display: none;
}

.form-feedback-error-hidden {
    display: none;
}

/* === VISUAL EDITOR PROPERTY PANEL STYLES === */
/* Property panel advanced için component-based namespaced CSS */
.property-panel {
    background: #fff;
    border-left: 1px solid #dee2e6;
}

/* === GLOBAL COLOR OVERRIDES (User Request) === */
/* Bootstrap Info color override (#31D2F2 -> Indigo) */
:root {
    --info-indigo: #4f46e5;
    --info-indigo-hover: #4338ca;
    --info-indigo-light: #eef2ff;
}

.btn-info {
    background-color: var(--info-indigo) !important;
    border-color: var(--info-indigo) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--info-indigo-hover) !important;
    border-color: var(--info-indigo-hover) !important;
    color: #fff !important;
}

.btn-outline-info {
    color: var(--info-indigo) !important;
    border-color: var(--info-indigo) !important;
}

.btn-outline-info:hover {
    background-color: var(--info-indigo) !important;
    color: #fff !important;
}

.text-info {
    color: var(--info-indigo) !important;
}

.bg-info {
    background-color: var(--info-indigo) !important;
}

.bg-info-light {
    background-color: var(--info-indigo-light) !important;
    color: var(--info-indigo) !important;
}

.property-panel-control-spacing {
    margin-top: 10px;
}

.property-panel-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.property-panel-input-flex {
    flex: 1;
}

.property-panel-btn-upload {
    padding: 8px 12px;
}