/* css/problems.css - Tmavý motiv pro Problémy a Report (Vylepšená verze) */

:root {
    --surface: #1e1e1e;
    --border: #333333;
    --text: #e0e0e0;
    --text-muted: #a0a0a0;
    --prio-low: #2ecc71;
    --prio-med: #f1c40f;
    --prio-high: #e67e22;
    --prio-crit: #e74c3c;
}

/* =========================================
   1. STYLY PRO FORMULÁŘE
   ========================================= */
.add-task, .report-form {
    background: var(--surface); padding: 30px; border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5); border: 1px solid var(--border);
    border-top: 4px solid #e74c3c; max-width: 800px; margin: 0 auto 40px auto;
}

.form-collapse-container { display: none; margin-bottom: 40px; animation: fadeInDown 0.3s ease-out forwards; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group { flex: 1; display: flex; flex-direction: column; }
label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.95em; color: var(--text-muted); }

input[type="text"], input[type="date"], select, textarea {
    width: 100%; padding: 12px; background-color: #2d2d2d; border: 1px solid #444;
    color: white; border-radius: 5px; box-sizing: border-box; font-family: inherit; font-size: 1em; transition: 0.3s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #4a90e2; box-shadow: 0 0 5px rgba(74, 144, 226, 0.3); }

select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 12px top 50%; background-size: 10px auto; padding-right: 30px;
}
select optgroup { background: #111; color: #888; font-style: italic; }
select option { background: #2d2d2d; color: #fff; font-style: normal; }

input[type="file"] { background: #222; padding: 10px; border-radius: 5px; cursor: pointer; color: #aaa; border: 1px dashed #555; }
input[type="file"]::-webkit-file-upload-button { background: #4a90e2; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-right: 15px; font-weight: bold; }

.btn-submit { width: 100%; background-color: #4a90e2; color: white; padding: 15px; border: none; border-radius: 6px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-submit:hover { opacity: 0.9; }

/* =========================================
   2. DASHBOARD A ROZBALOVACÍ HLAVIČKY
   ========================================= */
.health-bar-container { background: #222; border-radius: 10px; overflow: hidden; height: 15px; margin-bottom: 30px; border: 1px solid #444; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.health-bar-fill { background: linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71); height: 100%; transition: width 1s ease-in-out; }
.health-text { text-align: center; color: #aaa; font-size: 0.85em; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

.quick-nav { display: flex; gap: 15px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.quick-nav a { padding: 10px 20px; border-radius: 25px; text-decoration: none; color: white; font-weight: bold; font-size: 0.9em; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; }
.quick-nav a:hover { opacity: 0.8; transform: translateY(-2px); }
.q-new { background-color: #34495e; border: 1px solid #4a6278; }
.q-open { background-color: #e67e22; border: 1px solid #cf711f; }
.q-solved { background-color: #27ae60; border: 1px solid #229955; }

.search-container { text-align: center; margin-bottom: 40px; }
.search-container input { width: 100%; max-width: 600px; padding: 15px 25px; border-radius: 30px; border: 1px solid #4a90e2; background: #1a1a1a; color: white; font-size: 1.05em; box-shadow: 0 4px 10px rgba(0,0,0,0.3); outline: none; transition: 0.3s; }
.search-container input:focus { border-color: #e67e22; box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3); }

/* Nové rozbalovací hlavičky sekcí */
.status-section-title {
    background: #252525; padding: 15px 20px; border-radius: 8px; margin-top: 30px; margin-bottom: 20px;
    color: #e0e0e0; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    border-left: 5px solid #444; transition: background 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.status-section-title:hover { background: #2a2a2a; }
.status-section-title .left-side { display: flex; align-items: center; gap: 15px; }
.status-section-title .count { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px; font-size: 0.85em; }
.status-section-title .toggle-icon { transition: transform 0.3s; }
.status-section-title.closed .toggle-icon { transform: rotate(-90deg); }

/* =========================================
   3. KARTY PROBLÉMŮ A MODAL
   ========================================= */
.problem-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 20px; padding: 25px; position: relative; border-left: 5px solid #555; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s; }
.problem-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.prio-low { border-left-color: var(--prio-low); } .prio-medium { border-left-color: var(--prio-med); } .prio-high { border-left-color: var(--prio-high); } .prio-critical { border-left-color: var(--prio-crit); }
.problem-solved { opacity: 0.7; border-left-color: #27ae60; background: #141414; }
.problem-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; gap: 10px; flex-wrap: wrap; }
.problem-id { font-family: 'Consolas', monospace; color: var(--text-muted); background: #2b2b2b; padding: 2px 6px; border-radius: 4px; margin-right: 8px; font-size: 0.9em; }
.problem-location { font-weight: bold; color: #4a90e2; }
.problem-card h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.4em; color: var(--text); text-align: left; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; font-weight: bold; color: #121212; text-transform: uppercase; display: inline-block; margin-left: 5px; }
.badge-low { background-color: var(--prio-low); } .badge-medium { background-color: var(--prio-med); } .badge-high { background-color: var(--prio-high); color: white; } .badge-critical { background-color: var(--prio-crit); color: white; border: 1px solid white; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
.status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; text-transform: uppercase; font-weight: bold; color: white; display: inline-block; margin-left: 5px; }
.status-new { background: #34495e; } .status-open { background: #e67e22; } .status-solved { background: #27ae60; }
.solution-box { background: rgba(39, 174, 96, 0.1); border: 1px solid #27ae60; padding: 15px; border-radius: 5px; margin-top: 15px; color: #a0eebb; }
.comments-section { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.2); padding: 15px; border-radius: 5px; }
.comments-section h4 { margin-top: 0; color: var(--text-muted); font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; }
.comment { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #333; } .comment:last-child { border-bottom: none; }
.comment-meta { font-size: 0.8em; color: var(--text-muted); margin-bottom: 4px; } .comment-user { font-weight: bold; color: #4a90e2; }
.comment-content { color: #ddd; font-size: 0.95em; }

/* Modal pro editaci */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); justify-content: center; align-items: flex-start; padding-top: 50px; }
.modal-content { background-color: var(--surface); border: 1px solid var(--border); border-top: 4px solid #f1c40f; width: 90%; max-width: 800px; border-radius: 10px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; margin-bottom: 50px; }
.close-modal { position: absolute; right: 20px; top: 15px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: white; }

/* Tisk */
.print-table-container { display: none; }
@media print {
    .no-print { display: none !important; }
    .navbar, .btn-submit, header { display: none !important; }
    body { background: white; color: black; padding: 0; }
    .problem-card { background: white; border: 2px solid #000; box-shadow: none; border-left: 2px solid #000; page-break-inside: avoid; }
    .problem-card h2, .problem-id, .problem-location, .comment-user { color: black !important; }
    .comments-section { background: white; border: 1px solid #000; }
    @page { size: landscape; margin: 10mm; }
    .print-table-container { display: block; width: 100%; }
    .print-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11pt; }
    .print-table th, .print-table td { border: 2px solid #000; padding: 8px; text-align: center; vertical-align: middle; }
    .print-table th { font-size: 13pt; font-weight: bold; background: #eee; }
    .print-measure { color: #000; font-weight: bold; }
    .print-location { font-style: italic; }
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
    .problem-header { flex-direction: column; align-items: flex-start; }
    .problem-header > div { width: 100%; display: flex; justify-content: space-between; margin-bottom: 5px; }
    .modal-content { padding: 15px; margin-top: 10px; }
}