/* style.css */
:root {
    --bg-color: #121212;
    --container-bg: #1e1e1e;
    --text-main: #e0e0e0;
    --border-color: #333;
    
    /* Barvy statusů */
    --color-todo: #3498db;      /* Modrá */
    --color-progress: #f1c40f;  /* Žlutá */
    --color-done: #2ecc71;      /* Zelená */
    --color-blocked: #f39c12;   /* Oranžová */
    --color-overdue: #e74c3c;   /* Červená */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg-color); 
    color: var(--text-main); 
    margin: 0; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
}

.app-container { 
    background: var(--container-bg); 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    width: 100%; 
    max-width: 900px; 
    border: 1px solid var(--border-color); 
}

/* LOGIN FORM */
.login-box { text-align: center; margin-top: 50px; }
.login-box input { padding: 12px; font-size: 16px; border-radius: 6px; border: 1px solid var(--border-color); background: #2a2a2a; color: white; margin-bottom: 10px; width: 100%; max-width: 300px;}
.login-box button { padding: 12px 20px; font-size: 16px; cursor: pointer; background: #a8ff3e; color: #121212; border: none; font-weight: bold; border-radius: 6px; width: 100%; max-width: 300px;}
.login-box button:hover { opacity: 0.9; }

h1 { margin-top: 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px;}
.logout-btn { background: none; border: 1px solid #e74c3c; color: #e74c3c; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s;}
.logout-btn:hover { background: #e74c3c; color: white; }

/* Formuláře a filtry */
.panel { background: #2a2a2a; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end;}
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-group.full-width { flex-grow: 1; min-width: 250px; }
.input-group label { font-size: 12px; color: #aaa; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;}

.button-group { margin-bottom: 1px; } /* Zarovnání tlačítka s inputy */

input[type="text"], input[type="date"], select { padding: 10px 12px; border: 1px solid #444; border-radius: 6px; font-size: 14px; background: #1e1e1e; color: white; outline: none; transition: border-color 0.2s;}
input[type="text"]:focus, input[type="date"]:focus, select:focus { border-color: var(--color-todo); }

button.btn-primary { background-color: var(--color-todo); color: white; border: none; padding: 11px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; transition: background-color 0.2s;}
button.btn-primary:hover { background-color: #2980b9; }

.filters { width: 100%; display: flex; gap: 15px; border-top: 1px solid #444; padding-top: 15px; margin-top: 5px; flex-wrap: wrap; align-items: flex-end;}
.filter-label { margin-bottom: 10px; }
.filters .input-group label { color: #888; }

/* Karty úkolů */
.task-list { display: flex; flex-direction: column; gap: 15px; }
.task-item { padding: 15px; border-radius: 8px; background: #2a2a2a; border-left: 6px solid #ccc; display: flex; flex-direction: column; gap: 10px; position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.task-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.task-item.st-todo { border-left-color: var(--color-todo); }
.task-item.st-in_progress { border-left-color: var(--color-progress); }
.task-item.st-done { border-left-color: var(--color-done); opacity: 0.6; }
.task-item.st-blocked { border-left-color: var(--color-blocked); }
.task-item.st-overdue { border-left-color: var(--color-overdue); background: rgba(231, 76, 60, 0.1); }

.task-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.task-title-group { display: flex; align-items: center; gap: 12px; flex-grow: 1; }
.task-text { font-size: 16px; font-weight: 500; word-break: break-word; }
.task-item.st-done .task-text { text-decoration: line-through; color: #888; }

.task-checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: var(--color-done); }

.badges { display: flex; gap: 6px; flex-wrap: wrap;}
.badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; background: #444; color: #fff; white-space: nowrap;}
.badge.assignee { background: #8e44ad; }
.badge.deadline { background: #34495e; }
.badge.overdue-badge { background: var(--color-overdue); }

.task-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-controls select { padding: 6px 10px; font-size: 13px; }
.task-controls input[type="date"] { padding: 5px 10px; font-size: 13px; }

.edit-btn { background: none; border: none; color: #f39c12; cursor: pointer; font-size: 16px; padding: 5px; transition: color 0.2s;}
.edit-btn:hover { color: #f1c40f; }

.delete-btn { background: none; border: none; color: #bdc3c7; cursor: pointer; font-size: 18px; padding: 5px; transition: color 0.2s;}
.delete-btn:hover { color: #e74c3c; }

/* Překážka text area */
.blocker-container { display: none; width: 100%; margin-top: 5px; }
.task-item.st-blocked .blocker-container { display: block; }
.blocker-container textarea { width: 100%; padding: 12px; background: #1e1e1e; color: white; border: 1px dashed var(--color-blocked); border-radius: 6px; box-sizing: border-box; resize: vertical; min-height: 70px; font-family: inherit;}
.blocker-container textarea:focus { outline: none; border-style: solid; }

/* --- MODAL (Mini nastavení) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal-content { background: var(--container-bg); padding: 25px; border-radius: 12px; width: 90%; max-width: 500px; border: 1px solid var(--border-color); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.modal-header h3 { margin: 0; color: white; font-size: 20px; }
.close-btn { background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; transition: color 0.2s; }
.close-btn:hover { color: white; }
.modal-body { display: flex; flex-direction: column; gap: 15px; }
.modal-grid { display: flex; flex-direction: column; gap: 15px; }

/* --- TAGS INPUT --- */
.tags-input-container { display: flex; flex-wrap: wrap; gap: 5px; background: #1e1e1e; border: 1px solid #444; border-radius: 6px; padding: 5px; align-items: center; }
.tags-input-container input { border: none !important; outline: none; background: transparent !important; color: white; padding: 5px; flex-grow: 1; min-width: 120px; font-size: 13px; }
.tags-container { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip { background: #333; color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px; display: flex; align-items: center; gap: 5px; border: 1px solid #555; }
.tag-chip.user { background: #8e44ad; border-color: #9b59b6; }
    .tag-chip.category { background: #2c3e50; border-color: #34495e; }
.tag-remove { cursor: pointer; font-weight: bold; color: #ccc; padding-left: 2px;}
.tag-remove:hover { color: #e74c3c; }