/**
 * Starlit-tempmail — temel katman (tasarım simgeleri, sıfırlama, form öğeleri)
 *
 * Sorumluluk: Renk/tipografi değişkenleri, açık tema geçersiz kılmaları, gövde
 * sıfırlaması, dış kap ve tüm görünümlerde paylaşılan düğme/girdi bileşenleri.
 *
 * Yükleme sırası önemlidir: CSS art arda uygulandığı için bu dosyalar
 * `inc/bootstrap.php` içinde base -> simple-view -> detail-view -> components
 * -> responsive sırasıyla kuyruğa alınır. Sıra değişirse geçersiz kılmalar bozulur.
 */

:root {
    --starlit-bg-black: #000000;
    --starlit-panel-dark: #000000;
    --starlit-card-dark: #09090b;
    --starlit-border-silver: rgba(255, 255, 255, 0.08);
    --starlit-border-hover: rgba(255, 255, 255, 0.22);
    --starlit-accent-white: #ffffff;
    --starlit-accent-glow: rgba(255, 255, 255, 0.15);
    --starlit-text-primary: #ffffff;
    --starlit-text-muted: #a1a1aa;
    --starlit-text-darker: #71717a;
    --starlit-danger: #ef4444;
    --starlit-danger-glow: rgba(239, 68, 68, 0.15);

    /* Button Custom Variables (Karanlık) */
    --starlit-btn-bg: #ffffff;
    --starlit-btn-text: #000000;
    --starlit-hover-overlay: rgba(255, 255, 255, 0.04);
    --starlit-header-bg: #000000;

    /*
     * Yüzey ve denetim simgeleri.
     *
     * Bu değerler daha önce dosyalara sabit kodlanmıştı (`#0b0b0e`,
     * `rgba(255,255,255,0.06)` gibi). Sabit oldukları için açık temada olduğu gibi
     * kalıyor, beyaz zemin üzerinde siyah kartlar ve beyaz üstüne beyaz metin
     * üretiyorlardı. Artık her iki tema da aynı simgeleri kendi değerleriyle doldurur.
     */
    --starlit-surface-raised: #0b0b0e;
    --starlit-surface-sunken: #000000;
    --starlit-dashed-border: rgba(255, 255, 255, 0.15);
    --starlit-control-bg: rgba(255, 255, 255, 0.06);
    --starlit-control-bg-hover: rgba(255, 255, 255, 0.15);
    --starlit-control-border: rgba(255, 255, 255, 0.12);
    --starlit-control-border-hover: rgba(255, 255, 255, 0.35);
    --starlit-control-text: #f4f4f5;
    --starlit-control-text-hover: #ffffff;
    --starlit-shadow: rgba(0, 0, 0, 0.4);
    --starlit-shine: rgba(255, 255, 255, 0.08);
}

:root.starlit-light-theme,
html.starlit-light-theme,
body.starlit-light-theme {
    --starlit-bg-black: #f8fafc;
    --starlit-panel-dark: #ffffff;
    --starlit-card-dark: #ffffff;
    --starlit-border-silver: rgba(0, 0, 0, 0.08);
    --starlit-border-hover: rgba(0, 0, 0, 0.16);
    --starlit-accent-white: #000000;
    --starlit-accent-glow: rgba(0, 0, 0, 0.05);
    --starlit-text-primary: #0f172a;
    --starlit-text-muted: #334155;
    --starlit-text-darker: #64748b;
    --starlit-danger: #ef4444;
    --starlit-danger-glow: rgba(239, 68, 68, 0.1);

    /* Button Custom Variables (Beyaz) */
    --starlit-btn-bg: #0f172a;
    --starlit-btn-text: #ffffff;
    --starlit-hover-overlay: rgba(0, 0, 0, 0.04);
    --starlit-header-bg: #ffffff;

    /* Yüzey ve denetim simgeleri (Beyaz) */
    --starlit-surface-raised: #f8fafc;
    --starlit-surface-sunken: #f1f5f9;
    --starlit-dashed-border: rgba(0, 0, 0, 0.15);
    --starlit-control-bg: #ffffff;
    --starlit-control-bg-hover: #f1f5f9;
    --starlit-control-border: rgba(0, 0, 0, 0.12);
    --starlit-control-border-hover: rgba(0, 0, 0, 0.25);
    --starlit-control-text: #0f172a;
    --starlit-control-text-hover: #000000;
    --starlit-shadow: rgba(0, 0, 0, 0.08);
    --starlit-shine: rgba(0, 0, 0, 0.04);
}

/* Reset and Globals */
body.starlit-theme-active {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--starlit-bg-black);
    color: var(--starlit-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
}

/* Outer wrapper */
.starlit-app-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.starlit-app-container * {
    box-sizing: border-box;
}

/* Explicit interactive transitions for smooth performance */
.starlit-btn, 
.footer-link, 
.folder-item, 
.simple-inbox-row, 
.starlit-mail-item, 
.address-box-card, 
.modal-close,
.icon-action-btn,
.theme-toggle-btn {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons Styling */
.starlit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    border-radius: 20px;
    border: 1px solid var(--starlit-btn-bg);
    background-color: var(--starlit-btn-bg);
    color: var(--starlit-btn-text);
    cursor: pointer;
    text-decoration: none;
}

.starlit-btn:hover {
    background-color: transparent;
    color: var(--starlit-btn-bg);
    box-shadow: 0 0 10px var(--starlit-accent-glow);
}

.starlit-btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 15px;
}

.starlit-btn-outline {
    background-color: transparent;
    color: var(--starlit-text-primary);
    border: 1px solid var(--starlit-border-silver);
}

.starlit-btn-outline:hover {
    border-color: var(--starlit-accent-white);
    background-color: var(--starlit-hover-overlay);
}

.starlit-btn-outline-danger {
    background-color: transparent;
    color: var(--starlit-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.starlit-btn-outline-danger:hover {
    border-color: var(--starlit-danger);
    background-color: var(--starlit-danger-glow);
    color: #ffffff;
}

.starlit-btn-icon {
    padding: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--starlit-border-silver);
    color: var(--starlit-text-primary);
}

.starlit-btn-icon:hover {
    border-color: var(--starlit-accent-white);
    background-color: var(--starlit-hover-overlay);
}

/* Inputs & Selects */
.starlit-input, .starlit-select {
    width: 100%;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--starlit-border-silver);
    border-radius: 8px;
    color: var(--starlit-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

body.starlit-light-theme .starlit-input, body.starlit-light-theme .starlit-select {
    background-color: rgba(255, 255, 255, 0.8);
}

.starlit-input:focus, .starlit-select:focus {
    border-color: var(--starlit-accent-white);
    box-shadow: 0 0 8px var(--starlit-accent-glow);
}

.starlit-select option {
    background-color: var(--starlit-panel-dark);
    color: var(--starlit-text-primary);
}

/* Spinner ve Dönüş Animasyonu (Yenile Butonu Çözümü) */
@keyframes starlit-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.refresh-spinner-svg {
    display: inline-block !important;
    vertical-align: middle !important;
    transform-origin: 50% 50% !important;
    transform-box: fill-box !important;
    flex-shrink: 0 !important;
}

.refresh-spinner-svg.spinning {
    animation: starlit-spin 0.75s linear infinite !important;
}

.starlit-btn.is-refreshing,
.starlit-topbar-btn.is-refreshing {
    pointer-events: none !important;
    opacity: 0.75 !important;
}