/* style.css */

/* A CSS kód a letisztultság érdekében itt van. Használat: index.php */
body { font-family: Arial, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 0px; }
.container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.container.wide { max-width: 900px; }
.auth-form { max-width: 400px; margin: 50px auto; padding: 30px; border: 1px solid #ddd; border-radius: 5px; }
h2 { text-align: center; color: #007bff; margin-bottom: 20px; }
.input-group { margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.input-group input[type="text"], 
.input-group input[type="password"],
.input-group input[type="email"],
.input-group input[type="tel"],
.input-group input[type="date"],
.input-group input[type="datetime-local"],
.input-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
button[type="submit"] { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 10px; font-size: 16px; }
button[type="submit"]:hover { background-color: #0056b3; }
.link-btn { display: block; text-align: center; margin-top: 10px; padding: 10px; background-color: #6c757d; color: white; text-decoration: none; border-radius: 4px; }
.link-btn:hover { background-color: #5a6268; }
.link-btn.small { padding: 5px 10px; font-size: 14px; }
.logout-btn { background-color: #dc3545; display: inline-block; padding: 10px 15px; border-radius: 4px; color: white; text-decoration: none; margin-left: 10px; }
.logout-btn:hover { background-color: #c82333; }
.error { color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.success { color: #28a745; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 10px; border-radius: 4px; margin-bottom: 15px; }

/* NAPTÁR STÍLUSOK */
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 15px; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; margin-top: 20px; }
.day-box { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 15px; min-height: 150px; }
.day-name { font-weight: bold; color: #007bff; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 10px; text-align: center; }
.task-item { background-color: #fff; border: 1px solid #ced4da; padding: 8px; border-radius: 4px; margin-bottom: 5px; font-size: 14px; word-wrap: break-word; }
.task-done { background-color: #e6ffed; border-color: #28a745; opacity: 0.7; }
.task-user { font-style: italic; color: #6c757d; float: right; }
.task-item-recurring { border-left: 3px solid #ffc107; }

/* TEENDŐK LISTA STÍLUS */
.task-list-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.task-list-table th, .task-list-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.task-list-table th { background-color: #f2f2f2; color: #333; }
.task-list-table tr:nth-child(even) { background-color: #f9f9f9; }
.task-list-table tr:hover { background-color: #f1f1f1; }

/* Ismétlődés napjai */
.day-selector { display: flex; flex-wrap: wrap; gap: 5px; }
.day-selector label {
    background-color: #f1f1f1;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    user-select: none;
    font-size: 14px;
}
.day-selector input[type="checkbox"] { display: none; }
.day-selector input[type="checkbox"]:checked + label {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}
.top_cont {
  position: fixed;
  top: 0;
  width: 100%;
  height: 160px;
  text-align: center;
  color: #ffffff;
}
.hour-grid-container {
    overflow-x: auto; /* Ha széles a táblázat */
    margin-top: 20px;
}

/* Alapvető táblázat stílusok */
.hour-calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* A cellák szélessége egyenletes legyen */
    min-width: 900px; /* Alap minimum szélesség */
}

.hour-calendar-table th, .hour-calendar-table td {
    border: 1px solid #ddd;
    padding: 2px;
    vertical-align: top;
	color: black;
}

/* Óra oszlop */
.hour-column-header {
    width: 60px; 
    background-color: #f8f8f8;
    position: sticky; /* Az óra oszlop fixen marad, ha vízszintesen görgetünk */
    left: 0;
    z-index: 10;
}

.hour-label {
    width: 60px;
    background-color: #f8f8f8;
    font-weight: bold;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 5;
}

/* Nap oszlopok */
.day-column-header {
    background-color: #f1f1f1;
    text-align: center;
    font-size: 0.9em;
}

.is-today-header {
    background-color: #007bff;
    color: white;
}

/* Cellák */
.calendar-cell {
    font-size: 0.8em;
    padding: 2px 5px;
}

/* Munkaidő kiemelése */
.working-hour {
    background-color: #fff;
}
.off-hour {
    background-color: #f9f9f9;
}

/* *** JAVÍTOTT TEENDŐ STÍLUSOK *** */
.task-item-hour {
    margin-bottom: 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #e9ecef; /* Háttérszín a blokknak */
    border-left: 3px solid #007bff; /* Kiemelő sáv */
    padding: 2px 4px;
    border-radius: 3px;
    min-height: 1.3em; /* Magasság biztosítása az üres blokkoknak is */
}

.task-item-hour.task-done {
    background-color: #d4edda;
    border-left-color: #28a745;
    opacity: 0.8;
}

.task-item-hour.task-done a {
    text-decoration: line-through !important;
}

.task-item-hour a {
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
}

.task-user-hour {
    color: #6c757d;
    font-size: 0.8em;
    margin-left: 4px;
}