:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --light: #f8fafc;
    --dark: #1e293b;
    --gray: #94a3b8;
    --border: #e2e8f0;
    --sidebar-bg: #f1f5f9;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background-color: #f8fafc; color: var(--dark); height: 100vh; overflow: hidden; }

/* Layout */
.app-container { display: flex; height: 100vh; }
.sidebar { width: 340px; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.main-body { flex: 1; display: flex; overflow: hidden; }

/* Sidebar Elements */
.sidebar-header { padding: 20px; background: white; border-bottom: 1px solid var(--border); }
.sidebar-title { font-size: 1.4rem; color: var(--primary); margin-bottom: 15px; }
.search-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cases-list { flex: 1; overflow-y: auto; padding: 15px; }

.case-item {
    background: white; padding: 15px; margin-bottom: 10px; border-radius: 8px;
    border-left: 4px solid var(--primary); cursor: pointer; transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.case-item:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.case-item.active { border-left-color: var(--success); background: #f0fdf4; }

.case-status { font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; color: white; display: inline-block; margin-top: 5px;}
.collecting { background: var(--warning); }
.drafting { background: #8b5cf6; }
.waiting_response { background: var(--primary); }
.closed { background: var(--dark); }

/* Main Area */
.main-header { padding: 20px; background: white; border-bottom: 1px solid var(--border); }
.case-content { flex: 2; padding: 30px; overflow-y: auto; background: white; }
.materials-panel { flex: 1; padding: 20px; border-left: 1px solid var(--border); overflow-y: auto; background: #fff; min-width: 250px; }

/* Components */
.form-group { margin-bottom: 15px; }
.form-label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px;
}
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-secondary { background: var(--secondary); color: white; }
.btn-new-case { width: 100%; background: var(--primary); color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; }
.w-100 { width: 100%; }
.mt-3 { margin-top: 15px; }

/* History Timeline */
.history-item { 
    background: var(--light); border: 1px solid var(--border); border-radius: 8px; 
    padding: 15px; margin-bottom: 15px; position: relative;
}
.history-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; font-weight: bold; }
.history-date { font-weight: normal; color: var(--gray); }

/* Materials */
.material-item { 
    border: 1px solid var(--border); padding: 10px; border-radius: 6px; 
    background: var(--light); margin-bottom: 10px; 
}
.material-name { font-weight: 600; font-size: 0.95rem; }

/* Modals */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal-content { background: white; margin: 50px auto; padding: 30px; width: 90%; max-width: 600px; border-radius: 8px; }
.close-modal { float: right; font-size: 1.5rem; cursor: pointer; }

/* Responsive */
@media (max-width: 1000px) {
    .app-container { flex-direction: column; overflow: auto; height: auto; }
    .sidebar { width: 100%; height: auto; max-height: 400px; }
    .main-body { flex-direction: column; }
    .materials-panel { border-left: none; border-top: 1px solid var(--border); }
}