/* css/todo.css - Tmavý motiv pro Úkoly */

/* =========================================
   1. HLAVIČKA A ROZBALOVACÍ FORMULÁŘ
   ========================================= */

.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.page-header-container h1 { margin: 0; color: #4a90e2; }

#btn-add-task {
    background-color: #4a90e2;
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    font-size: 1em;
}
#btn-add-task:hover { background-color: #357abd; }

.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); } 
}

.task-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 #4a90e2;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

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

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

/* Checkboxy pro výběr více lidí */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    background: #2d2d2d;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #444;
    margin-bottom: 10px;
}
.checkbox-grid label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: #ccc; font-weight: normal; font-size: 0.95em;}
.checkbox-grid input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

/* =========================================
   2. FILTRY (Dropdown)
   ========================================= */

.filter-panel { background: var(--surface); padding: 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 30px; text-align: center; }
.filter-panel h3 { margin-top: 0; font-size: 1.1em; color: #aaa; margin-bottom: 15px; }
.filter-select {
    background: #2d2d2d; border: 1px solid #444; color: #ddd; padding: 12px 15px; border-radius: 20px; cursor: pointer;
    font-weight: bold; font-size: 1em; max-width: 300px; width: 100%; 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 15px top 50%; background-size: 12px auto;
}

/* Nadpisy sekcí */
.status-section-title { border-bottom: 2px solid #444; padding-bottom: 10px; margin-top: 40px; margin-bottom: 20px; color: #e0e0e0; display: flex; align-items: center; gap: 10px; }

/* =========================================
   3. KARTY ÚKOLŮ A EDITACE
   ========================================= */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column;
    border-left: 5px solid #555; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* Okraje podle priority */
.border-low { border-left-color: #2ecc71; }
.border-medium { border-left-color: #f1c40f; }
.border-high { border-left-color: #e74c3c; }

/* Obsah karty */
.card-content { padding: 20px; flex-grow: 1; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.85em; color: #888; }
.badge { padding: 4px 10px; border-radius: 12px; color: white; font-size: 0.8em; font-weight: bold; text-transform: uppercase;}
.badge-low { background-color: #2ecc71; color: #111; }
.badge-medium { background-color: #f1c40f; color: #111; }
.badge-high { background-color: #e74c3c; }

.card h3 { margin: 0 0 10px 0; font-size: 1.3em; color: var(--text);}
.assignee { color: #ccc; font-size: 0.95em; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.description { font-size: 0.95em; color: #aaa; line-height: 1.6; }

/* Poznámky k úkolu */
.task-notes {
    margin-top: 15px; padding: 12px; background: rgba(74, 144, 226, 0.1);
    border-left: 3px solid #4a90e2; border-radius: 4px; font-size: 0.9em; color: #b0d4ff;
}

/* Patička karty */
.card-footer { padding: 15px 20px; border-top: 1px solid #333; display: flex; justify-content: space-between; align-items: center; background: #222; }
.status-indicator { font-size: 0.85em; font-weight: bold; text-transform: uppercase; }
.status-new { color: #3498db; }
.status-progress { color: #f1c40f; }
.status-done { color: #2ecc71; text-decoration: line-through; }
.card.status-done { opacity: 0.6; }
.card.status-done h3 { text-decoration: line-through; color: #888;}

/* Tlačítka akcí */
.actions button { background: none; border: 1px solid #555; color: #aaa; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 0.9em; transition: all 0.2s; }
.actions button:hover { color: white; }
.btn-progress:hover { background: #e67e22; border-color: #e67e22; }
.btn-done:hover { background: #27ae60; border-color: #27ae60; }
.btn-delete:hover { background: #c0392b; border-color: #c0392b; }
.btn-edit:hover { background: #4a90e2; border-color: #4a90e2; }

/* =========================================
   4. EDITAČNÍ FORMULÁŘ UVNITŘ KARTY
   ========================================= */
.card-edit-form { padding: 25px; background: #1a252f; flex-grow: 1; border-top: 4px solid #f1c40f; }
.card-edit-form label { color: #ecf0f1; font-size: 0.85em; margin-bottom: 5px; display: block; font-weight: bold;}
.card-edit-form input, .card-edit-form select, .card-edit-form textarea {
    width: 100%; border: 1px solid #555; padding: 10px; margin-bottom: 15px; background: #111; color: white; border-radius: 5px; box-sizing: border-box; font-family: inherit;
}
.card-edit-form input:focus, .card-edit-form select:focus, .card-edit-form textarea:focus { border-color: #f1c40f; outline: none; }
.card-edit-form .btn-submit { width: 100%; background: #f1c40f; color: #111; padding: 12px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.2s;}
.card-edit-form .btn-submit:hover { opacity: 0.9; }
.card-edit-form .btn-cancel { background: #555; color: white; padding: 10px; border: none; border-radius: 5px; width: 100%; margin-top: 10px; cursor: pointer; font-weight: bold; transition: 0.2s;}
.card-edit-form .btn-cancel:hover { background: #777; }

/* Responzivita */
@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
}