body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #f4f7f6; }
.container { display: flex; gap: 20px; padding: 20px; align-items: flex-start; justify-content: center; }

/* Панель настроек */
.settings-panel { 
    width: 250px; 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}
.control-group { margin-bottom: 15px; }
.control-group label { display: block; font-size: 0.9em; color: #666; margin-bottom: 5px; }
.control-group input, .control-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.time-inputs-row { display: flex; gap: 5px; align-items: center; margin-bottom: 10px; }
.time-inputs-row input { flex: 1; padding: 5px; }

/* Статистика */
.stats-box { background: #f9f9f9; padding: 10px; border-radius: 5px; border: 1px solid #eee; margin-top: 15px; }
.stats-box p { margin: 5px 0; font-size: 0.95em; }

/* Календарь */
.calendar-wrapper { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.selectors select { padding: 5px 10px; font-size: 1em; }

table.calendar-table { width: 600px; border-collapse: collapse; }
th, td { border: 1px solid #e0e0e0; padding: 5px; text-align: center; vertical-align: top; height: 85px; width: 85px; }
th { background: #f8f9fa; color: #555; height: auto; padding: 10px; }

/* Ячейки дней */
td { cursor: pointer; transition: background 0.2s; position: relative; }
td:hover { background: #f1f1f1; }
.day-number { font-weight: bold; font-size: 1.1em; display: block; margin-bottom: 5px; }

/* Статусы дней */
td.weekend .day-number { color: #d9534f; }
td.holiday { background: #ffe6e6 !important; } 
td.short-day { background: #fff0f6; } 

/* Состояния данных */
td.has-data { background: #e8f5e9 !important; border: 2px solid #4caf50 !important; }
td.has-data-weekend { background: #fff3cd !important; border: 2px solid #ffc107 !important; }

/* ОТПУСК (ЗАКОММЕНТИРОВАНО) */
/*
td.vacation-day { background: #e0f7fa !important; border: 2px solid #00bcd4 !important; color: #006064; }
*/

.hours-badge { 
    display: inline-block; 
    background: #4caf50; 
    color: white; 
    border-radius: 10px; 
    padding: 2px 6px; 
    font-size: 0.75em; 
}

/* Кнопки */
button { cursor: pointer; border: none; padding: 8px 12px; border-radius: 4px; font-size: 0.9em; transition: 0.2s; width: 100%; margin-bottom: 5px; }
.btn-primary { background: #007bff; color: white; }
.btn-primary:hover { background: #0056b3; }
.btn-info { background: #17a2b8; color: white; }
.btn-info:hover { background: #138496; }
.btn-save { background: #28a745; color: white; margin-top: 10px; }
.btn-delete { background: #dc3545; color: white; }
.btn-danger { background: #dc3545; color: white; }

/* Модальное окно */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; margin: 10% auto; padding: 25px; width: 320px; border-radius: 8px; position: relative; }
.close-btn { position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; color: #aaa; }
.input-row { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.input-row input { width: 60%; padding: 5px; }