* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #f5f5f5; color: #333; line-height: 1.5;
}

.container { max-width: 1300px; margin: 0 auto; padding: 20px; }

h1 { font-size: 1.5rem; margin-bottom: 4px; color: #1a1a2e; }
.subtitle { color: #666; margin-bottom: 20px; font-size: 0.9rem; }

fieldset { border: 1px solid #ddd; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; background: #fff; }
legend { font-weight: 600; font-size: 1rem; padding: 0 8px; color: #1a1a2e; }

.form-row { display: flex; align-items: center; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.form-row label { width: 280px; min-width: 280px; font-size: 0.85rem; font-weight: 500; text-align: right; }
.form-row input, .form-row select, .form-row textarea { flex: 1; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; font-family: inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.form-col { display: flex; flex-direction: column; gap: 2px; }
.form-col label { width: auto !important; min-width: auto !important; text-align: left !important; font-size: 0.85rem; }

.form-row-inline { background: #f8f9fb; padding: 10px; border-radius: 6px; margin-bottom: 12px; }
.form-row-inline select, .form-row-inline input { flex: none !important; }

.copy-link-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; padding: 4px 0; }
.btn-copy-link { padding: 12px 40px; font-size: 1.1rem; font-weight: 600; background: #1a73e8; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.btn-copy-link:hover { background: #1557b0; }
.copy-confirm { font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; }
.copy-confirm.visible { opacity: 1; }

.quick-fill { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 10px; background: #f0f4ff; border-radius: 6px; flex-wrap: wrap; }
.quick-fill label { font-size: 0.85rem; font-weight: 600; margin-right: 4px; }
.btn-sm { padding: 4px 12px; border: 1px solid #4a90d9; background: #fff; color: #4a90d9; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: all 0.15s; }
.btn-sm:hover { background: #4a90d9; color: #fff; }

.week-grid { width: 100%; }
.week-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.weekday-header { text-align: center; font-weight: 700; font-size: 0.82rem; padding: 6px 0; background: #e8eaf0; border-radius: 5px; color: #444; border: 1px solid #ddd; }
.weekend-header { background: #faf6ee; color: #b8956e; }
.sunday-header { background: #faf0f0; color: #b87878; }

.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }

.day-cell { display: flex; flex-direction: column; align-items: center; border: 1px solid #e0e0e0; border-radius: 5px; padding: 5px 4px 5px; background: #fafafa; min-height: 82px; }
.day-cell.empty-cell { background: #f2f2f2; border-style: dashed; border-color: #ddd; }
.day-num { font-size: 0.78rem; font-weight: 700; color: #333; margin-bottom: 4px; text-align: center; width: 100%; }

.time-row { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 5px; }
.time-from, .time-to { width: 74px; padding: 5px 2px; font-size: 0.82rem; border: 1px solid #bbb; border-radius: 4px; text-align: center; font-family: inherit; }
.time-from:focus, .time-to:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.2); }
.time-from:disabled, .time-to:disabled { background: #eee; color: #ccc; border-color: #e0e0e0; cursor: not-allowed; }
.time-dash { display: none; }

.hour-input { width: 80%; text-align: center; border: 1px solid #ddd; border-radius: 4px; padding: 3px 2px; font-size: 0.78rem; font-family: inherit; background: #f0f0f0; color: #555; }
.hour-input:focus { outline: none; }

.check-row { display: flex; gap: 4px; margin-top: 3px; align-items: center; }
.check-label { font-size: 0.65rem; font-weight: 600; display: flex; align-items: center; gap: 1px; cursor: pointer; padding: 1px 3px; border-radius: 3px; }
.check-label input[type="checkbox"] { width: 11px; height: 11px; margin: 0; cursor: pointer; }
.absence-label { color: #c9a17b; }
.leave-label { color: #7b9ec9; }
.sick-label { color: #9b7bc9; }

.btn-clear-day { width: 16px; height: 16px; padding: 0; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #999; font-size: 0.6rem; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-clear-day:hover { background: #ef5350; border-color: #ef5350; color: #fff; }

/* States - desaturated */
.day-cell.absence { background: #faf3eb !important; border-color: #ddc8a8 !important; }
.day-cell.leave { background: #eef2f8 !important; border-color: #b8c8dd !important; }
.day-cell.sick { background: #f3eff8 !important; border-color: #c8b8dd !important; }
.day-cell.saturday { background: #faf6ee; border-color: #ddd0b8; }
.day-cell.saturday .day-num { color: #b8956e; }
.day-cell.sunday { background: #faf0f0; border-color: #ddc0c0; }
.day-cell.sunday .day-num { color: #b87878; }

.total-week-row { margin-top: 6px; }
.total-week-row .day-total { background: #e8f0fe; border: 2px solid #4a90d9; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 16px; min-height: auto; }
.total-value { font-weight: 700; font-size: 1.1rem; color: #1a1a2e; }

.form-actions { text-align: center; margin-top: 20px; }
.btn-primary { padding: 12px 40px; font-size: 1.1rem; font-weight: 600; background: #1a73e8; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover { background: #1557b0; }