/**
 * CETIN IKYS - Merkezi CSS Dosyası
 * Konum: /vitrin/assets/app.css
 * Bütçe ve Bordro modüllerindeki ortak tasarımlar burada birleştirildi.
 */

:root {
    --bg-dark: #121212;         
    --bg-dark-panel: #1E1E1E;   
    --accent-yellow: #EAB308;   
    --text-light: #F3F4F6;      
    --text-muted: #9CA3AF;      
    --bg-body: #F9FAFB;         
    --border-color: #E5E7EB;    
    --text-dark: #111827;       
}

#module-container { font-family: 'Inter', sans-serif; background: var(--bg-body); margin: 0; display: flex; height: 100vh; overflow: hidden; font-size: 13.5px; color: var(--text-dark); }

/* --- ORTAK SOL PANEL (SIDEBAR) --- */
.sidebar { width: 300px; background: var(--bg-dark); color: var(--text-light); padding: 15px; overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid #333; box-shadow: 4px 0 15px rgba(0,0,0,0.1); }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.sidebar h2 { color: var(--accent-yellow); margin: 0 0 10px 0; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }

.input-group { background: var(--bg-dark-panel); border-radius: 6px; padding: 12px; border: 1px solid #333; margin-bottom: 5px; }
.input-group-title { color: var(--accent-yellow); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.input-row { margin-bottom: 12px; }
.input-row label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
.sidebar input, .sidebar select { width: 100%; padding: 10px; background: #2D2D2D; border: 1px solid #444; color: var(--text-light); border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: all 0.2s; }
.sidebar input:focus, .sidebar select:focus { background: #121212; border-color: var(--accent-yellow); outline: none; }

.btn-calc { background: var(--accent-yellow); color: var(--bg-dark); border: none; padding: 12px; width: 100%; border-radius: 4px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.btn-calc:hover { background: #Ca9a06; }

/* --- ORTAK SAĞ PANEL (CONTENT & TABLO) --- */
.content { flex-grow: 1; padding: 20px; height: 100vh; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.info-bar { display: flex; gap: 15px; flex-shrink: 0; flex-wrap: wrap; }
.card-info { background: #FFFFFF; padding: 15px 20px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 0.85rem; flex: 1; min-width: 200px; color: #4B5563; display: flex; flex-direction: column; border-left: 4px solid var(--accent-yellow); }
.card-info b { color: var(--bg-dark); font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.card-info.warning { border-left-color: #EF4444; }

.table-container { background: #FFFFFF; width: 100%; overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-radius: 6px; border: 1px solid var(--border-color); }
table { width: 100%; min-width: 1000px; border-collapse: collapse; white-space: nowrap; }
th { background: var(--bg-dark); color: var(--text-light); padding: 12px 10px; text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; border-bottom: 3px solid var(--accent-yellow); }
td { padding: 10px; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; color: #374151; vertical-align: middle; }
tr:nth-child(even) td { background-color: #F9FAFB; }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 15px; margin-bottom: 20px; }
.chart-box { background: #FFFFFF; border-radius: 6px; padding: 20px; border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chart-box h4 { margin: 0 0 15px 0; color: var(--bg-dark); font-size: 0.95rem; font-weight: 700; width: 100%; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; text-transform: uppercase; }
.chart-canvas-wrap { position: relative; height: 250px; width: 100%; display: flex; justify-content: center; }

@media (max-width: 992px) {
    body { flex-direction: column; height: auto; overflow: auto; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #333; }
    .dashboard-grid { grid-template-columns: 1fr; }
}