:root{--max-width: 475px;--clr-primary: #0062e1;--clr-secondary: #ff7d00;--clr-bg: #ffffff;--clr-text: #1f2937;--radius-md: 12px;--radius-lg: 18px;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;font-family:system-ui,Arial,Helvetica,sans-serif;color:var(--clr-text);background:var(--clr-bg)}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;justify-content:center;background:var(--clr-bg)}#root{width:100%;max-width:var(--max-width);min-height:100vh;display:flex;flex-direction:column}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.text-center{text-align:center}.missing-day{background:#ffceca}.react-calendar__tile--now.missing-day{background:#ffa39d}.app-header{margin-top:50px}.header-row1{background-color:#000;justify-content:space-between;display:flex;align-items:center}.header-image .logo{width:150px;height:auto}.header-clock .clock-time{font-size:1.2rem;font-weight:700;color:#fff}.header-clock{margin-right:20px;text-align:right}.home-buttons{display:flex;gap:1rem;justify-content:center;align-items:center}.app-header .admin{padding-bottom:5px}.logout{text-align:right;padding-bottom:5px}.logout a{color:#000;text-decoration:none}.header-row1 h2{color:#fff;margin-left:10px;font-size:20px;word-break:break-word}.header-row2{background-color:#555;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.missing-edit-submit{display:flex;justify-content:center;align-items:center}.active-vacation{margin:20px}.active-vacation,.active-vacation .home-button2{text-align:center}.header-image{text-align:right}textarea.day-comment{width:100%;height:100px;padding:12px;border:1px solid #ccc;border-radius:8px;font-size:16px;font-family:inherit;resize:vertical;background-color:#f9f9f9;transition:border .2s,box-shadow .2s}textarea.day-comment:focus{outline:none;border-color:#0073e6;box-shadow:0 0 0 2px #0073e633}.btn{display:inline-block;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s ease}.btn:hover{opacity:.8}.btn-primary{background:var(--clr-primary);color:#fff}.btn-secondary{background:var(--clr-secondary);color:#fff}.btn-green{background:#48be48;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary,.btn-secondary,.btn-green{height:100px;width:150px}.btn-comment{height:50px}.btn-comment-cancel{height:30px;background-color:#ff7d00;color:#fff;font-size:14px;line-height:14px}.btn-comment-accept{height:30px;font-size:14px;line-height:14px;background-color:#0062e1;color:#fff}.btn-small{height:35px;width:50px;background:var(--clr-secondary);color:#fff}.btn-icon{border:none;background:none;cursor:pointer;font-size:1.2rem}.btn-wide{height:50px;width:100%}.btn-half{height:35px;width:175px}.btn-small,.btn-icon{width:100%}@media only screen and (max-width: 340px){.btn-primary,.btn-secondary,.btn-green{width:100px;height:50px;font-size:12px}}@media (max-width: 480px){.btn-half,.btn-wide{width:100%}}.input{width:100%;padding:var(--space-sm);border:1px solid #ccc;border-radius:var(--radius-sm, 8px);font-size:1rem}.h1{font-size:1.25rem;margin:var(--space-md) 0;font-weight:700}.h2{font-size:1.1rem;margin:var(--space-sm) 0;font-weight:600}.stat-bar{margin:10px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}.stat-card{background:#e5e7eb;border-radius:var(--radius-md);padding:.5rem .75rem;text-align:center}.stat-card .val{font-size:1.1rem;font-weight:700;color:#1f2937}.stat-card .label{font-size:.75rem;color:#111827}@media only screen and (max-width: 340px){.stat-card{padding:10px}.stat-card .val,.stat-card .label{font-size:12px}}.notifications-list{display:flex;flex-direction:column;gap:1rem;width:100%;padding:0 var(--space-md);margin:0 auto}.notification-group{border:1px solid #ddd;padding:1rem;background:#fff;border-radius:15px}.notification-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.notif-date{font-weight:700;font-size:1rem}.notif-edit{background:none;border:none;color:#007bff;cursor:pointer;font-size:.9rem;padding:.25rem .5rem}.notif-edit:hover{text-decoration:underline}.notif-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.notification-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:4px}@media only screen and (max-width: 301px){.notification-item{display:contents}}.notification-item.over_day,.notification-item.over_week,.notification-item.short_rest,.notification-item.weekend_rest{background:#ffe5e5;border:1px solid #f44336}.notification-item.missing{background:#fff9c4;border:1px solid #ffeb3b}.notif-fix-btn{background:#ffc107;color:#000;text-decoration:none;padding:.25rem .5rem;border-radius:3px;font-size:.9rem}.notif-fix-btn:hover{opacity:.8}.notif-msg{flex:1}.notification-item.auto_closed{background:#e0f7fa;border:1px solid #26c6da}.home-office-toggle{display:inline-block;margin:10px 0}.toggle-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:10px}.toggle-label input[type=checkbox]{display:none}.toggle-slider{position:relative;width:60px;height:30px;background:#e9ecef;border-radius:15px;transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.toggle-icon{font-size:14px;transition:all .3s ease;z-index:2}.toggle-icon.office{opacity:1;transform:scale(1)}.toggle-icon.home{opacity:.5;transform:scale(.8)}.home-office-toggle.active .toggle-slider{background:#28a745}.home-office-toggle.active .toggle-icon.office{opacity:.5;transform:scale(.8)}.home-office-toggle.active .toggle-icon.home{opacity:1;transform:scale(1)}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:26px;height:26px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003;z-index:1}.home-office-toggle.active .toggle-slider:before{transform:translate(30px)}.toggle-text{font-weight:500;color:#495057;transition:color .3s ease}.home-office-toggle.active .toggle-text{color:#28a745}.home-office-toggle.disabled{opacity:.6;cursor:not-allowed}.home-office-toggle.disabled .toggle-label{cursor:not-allowed}.home-office-toggle.disabled .toggle-slider{background:#6c757d}.home-office-toggle:not(.disabled):hover .toggle-slider{box-shadow:0 4px 8px #00000026}.home-office-toggle:not(.disabled):hover .toggle-slider:before{box-shadow:0 4px 8px #0000004d}.toggle-label:focus-within .toggle-slider{outline:2px solid #007bff;outline-offset:2px}@media (max-width: 480px){.toggle-slider{width:50px;height:25px}.toggle-slider:before{width:21px;height:21px}.home-office-toggle.active .toggle-slider:before{transform:translate(25px)}.toggle-icon{font-size:12px}.toggle-text{font-size:.9em}}.select{width:100%;padding:var(--space-sm);border:1px solid #ccc;border-radius:var(--radius-sm, 8px);font-size:1rem;background:#fff}.textarea{width:100%;padding:var(--space-sm);border:1px solid #ccc;border-radius:var(--radius-sm, 8px);font-size:1rem;resize:vertical;min-height:6rem}.card{background:var(--clr-bg);border:1px solid #e5e7eb;border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:0 2px 6px #0000000d}.card h3{margin:0 0 var(--space-sm);font-size:1.1rem;font-weight:600}.card p{margin:0 0 var(--space-md);font-size:.9rem;color:#444}.datepicker,.time-input{width:100%;padding:var(--space-sm);border:1px solid #ccc;border-radius:var(--radius-sm, 8px);font-size:1rem}.missing-edit{padding:var(--space-lg)}.alert-error{background:#fdecea;border:1px solid #f5c6cb;color:#721c24;padding:.75rem;margin-bottom:var(--space-md);border-radius:4px}.day-comment-section{margin-top:20px;margin-bottom:var(--space-md)}.day-comment-label{display:block;margin-bottom:8px;font-weight:700;color:#495057}.day-comment-textarea{width:100%;height:100px;padding:8px;border:1px solid #ced4da;border-radius:4px;font-family:inherit;font-size:14px;resize:vertical}.day-comment-textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.home-office-section{margin-bottom:var(--space-md)}.home-office-label{display:block;margin-bottom:8px;font-weight:700;color:#495057}.day-comment-bar{text-align:right;margin-bottom:var(--space-md)}.pause-comment{width:100%;height:100px;margin-top:4px}.missing-form{display:grid;gap:var(--space-lg)}.slot-header,.break-header{display:grid;gap:1rem;font-weight:700}.slot-row,.break-row{display:grid;gap:1rem;align-items:center}.slot-header,.slot-row{grid-template-columns:1fr 1fr auto}.break-header,.break-row{grid-template-columns:1fr 1fr auto auto auto}.day-summary-section{margin-top:var(--space-lg);padding:var(--space-md);background:#f8f9fa;border-radius:8px;border:1px solid #dee2e6}.day-summary-title{font-size:1.1rem;font-weight:700;margin-bottom:var(--space-md);color:#495057}.day-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-md)}.day-summary-item{display:flex;flex-direction:column}.day-summary-label{font-size:.9rem;color:#6c757d;margin-bottom:4px}.day-summary-value{font-size:1.1rem;font-weight:700;color:#495057}.day-summary-flags{margin-top:var(--space-md)}.day-summary-flags-title{font-weight:700;margin-bottom:var(--space-sm);color:#495057}.day-summary-flag{display:inline-flex;align-items:center;padding:6px 10px;margin:4px 6px 4px 0;border-radius:6px;font-size:.85rem;font-weight:700;cursor:help;transition:all .2s ease}.day-summary-flag:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.flag-icon{margin-right:6px;font-size:1rem}.flag-label{font-size:.8rem}.day-summary-flag.red{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.day-summary-flag.yellow{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.day-summary-update-btn{margin-top:var(--space-md);text-align:center}.add-slot-wrapper{text-align:center}.controls-row{display:flex;justify-content:space-between}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:999}.modal-box{background:#fff;padding:16px;border-radius:4px;width:320px}.modal-box h3{margin:0 0 12px}.field{display:block;margin-bottom:12px}.field>select,.field>textarea{width:100%;margin-top:4px}.modal-actions{display:flex;justify-content:space-between;align-items:center}.day-comment{width:100%;height:200px;margin-bottom:12px}.mobile-heading-only{display:none}.day-arrows{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:15px}.arrows-1{width:25%;height:30px;background-color:#f0f0f0;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.arrows-1:hover{background-color:#e0e0e0}.arrows-2{width:50%;height:30px;background-color:#f0f0f0;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.arrows-3{width:25%;height:30px;background-color:#f0f0f0;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.arrows-3:hover{background-color:#e0e0e0}.submit-row{margin-top:10px;display:flex;justify-content:center}@media (max-width: 480px){.slot-header,.break-header{display:none}.mobile-heading-only{display:block;font-weight:700}.slot-row,.break-row{grid-template-columns:1fr}.slot-row input,.break-row input{width:100%}.slot-row,.break-row{margin-bottom:.5rem}.controls-row{flex-direction:column;gap:var(--space-sm)}}.change-password-container{max-width:400px;margin:2rem auto;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #0000001a;font-family:var(--font-sans, sans-serif)}.change-password-container h2{margin-bottom:1.5rem;text-align:center;font-size:1.5rem;color:#333}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.4rem;font-weight:500;color:#444}.form-group input{width:100%;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#6c63ff}.message{padding:.75rem 1rem;border-radius:4px;margin-bottom:1rem;text-align:center;font-weight:500}.message.error{background:#ffe5e5;color:#d32f2f}.message.success{background:#e5ffe5;color:#388e3c}.submit-button{width:100%;margin-top:1rem}.password-input-wrapper{position:relative}.password-input-wrapper input{width:100%;padding:.5rem 2.5rem .5rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;transition:border-color .2s}.password-input-wrapper input:focus{outline:none;border-color:#6c63ff}.toggle-button{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6c757d}.toggle-button:focus{outline:none}.toggle-button:hover{color:#212529}.monthly-report{margin:0 auto}.report-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;flex-wrap:wrap;gap:20px}.header-content{flex:1;text-align:center}.header-content h1{margin-bottom:0;margin-top:0}.month-selector{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:10px}.month-selector select{min-width:200px;padding:8px 12px;border:1px solid #ced4da;border-radius:6px;font-size:1em;background:#fff;cursor:pointer}.month-selector select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.month-display{font-size:1.2em;font-weight:700;min-width:150px;text-align:center}.back-button,.export-button{min-width:100px}.report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.summary-grid,.flags-grid,.absences-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.summary-item,.flag-item,.absence-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#f8f9fa;border-radius:8px}.summary-item label,.flag-item label,.absence-item label{font-weight:500;color:#495057}.summary-item span,.flag-item span,.absence-item span{font-weight:700;color:#212529}.flag-count{background:#dc3545;color:#fff!important;padding:2px 8px;border-radius:12px;font-size:.9em}.positive{color:#28a745!important}.negative{color:#dc3545!important}.daily-breakdown{margin-top:30px}.table-container{overflow-x:auto;border-radius:8px;border:1px solid #dee2e6}.daily-table{width:100%;border-collapse:collapse;font-size:.9em}.daily-table th{background:#f8f9fa;padding:12px 8px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6;white-space:nowrap}.daily-table td{padding:8px;border-bottom:1px solid #dee2e6;white-space:nowrap}.daily-table tr:hover{background:#f8f9fa}.daily-table tr.auto-closed{background:#fff3cd}.daily-table tr.auto-closed:hover{background:#ffeaa7}.daily-table tr.holiday-weekend{background:#e3f2fd}.daily-table tr.holiday-weekend:hover{background:#bbdefb}.daily-table tr.flag-row{background-color:#f8d7da}.daily-table tr.flag-row:hover{background-color:#f5c6cb}.daily-table tr.flag-row.holiday-weekend{background-color:#f8d7da}.daily-table tr.flag-row.holiday-weekend:hover{background-color:#f5c6cb}.daily-table tr.selected-row{background:#e8f5e8!important;border-left:4px solid #28a745}.daily-table tr.selected-row:hover{background:#d4edda!important}.daily-table tr{cursor:pointer;transition:background-color .2s ease}.flags-cell{text-align:center;padding:8px 4px}.flags-cell span{display:inline-block;margin:2px 3px;padding:4px 8px;border-radius:12px;font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border:1px solid;min-width:60px;text-align:center}.flag-red{background-color:#f8d7da;color:#721c24;border-color:#f5c6cb}.flag-yellow{background-color:#fff3cd;color:#856404;border-color:#ffeaa7}.flags-cell span:hover{transform:translateY(-1px);box-shadow:0 2px 4px #00000026;transition:all .2s ease}.absences-cell{text-align:center}.absences-cell span{display:block;margin:2px 0;font-size:.9em}.absence-type-cell{text-align:center;font-size:.9em;color:#6c757d;font-style:italic}.comment-cell{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.monthly-report{padding:10px}.report-header{flex-direction:column;text-align:center}.header-content{order:2}.back-button{order:1;align-self:flex-start}.export-button{order:3;align-self:flex-end}.report-summary,.summary-grid,.flags-grid,.absences-grid{grid-template-columns:1fr}.daily-table{font-size:.8em}.daily-table th,.daily-table td{padding:6px 4px}.comment-cell{max-width:80px}}@media (max-width: 480px){.month-selector{flex-direction:column;gap:10px}.month-display{min-width:auto}}.admin-reports{padding:20px;max-width:1200px;margin:0 auto}.admin-header{display:flex;align-items:center;gap:20px;margin-bottom:30px}.back-button{min-width:80px}.admin-controls{margin-bottom:30px}.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.control-item{display:flex;flex-direction:column;gap:8px}.control-item label{font-weight:500;color:#495057}.action-buttons{display:flex;gap:15px;flex-wrap:wrap}.primary-button{background:#007bff;color:#fff}.primary-button:hover:not(:disabled){background:#0056b3}.export-button{background:#28a745;color:#fff}.export-button:hover:not(:disabled){background:#1e7e34}.primary-button:disabled,.export-button:disabled{background:#6c757d;cursor:not-allowed}.daily-reports{margin-top:30px}.instruction{color:#6c757d;margin-bottom:20px;font-style:italic}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:800px}.calendar-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;border:1px solid #dee2e6;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;min-height:60px}.calendar-day:hover{background:#f8f9fa;border-color:#007bff;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.calendar-day.weekend{background:#f8f9fa;color:#6c757d}.calendar-day.weekend:hover{background:#e9ecef;color:#495057}.day-number{font-size:1.2em;font-weight:700;margin-bottom:2px}.day-name{font-size:.8em;color:#6c757d}.loading,.error{text-align:center;padding:40px;font-size:1.2em}.error{color:#dc3545}@media (max-width: 768px){.admin-reports{padding:10px}.admin-header{flex-direction:column;text-align:center;gap:15px}.control-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{min-height:50px;padding:4px}.day-number{font-size:1em}.day-name{font-size:.7em}}@media (max-width: 480px){.calendar-grid{grid-template-columns:repeat(7,1fr);gap:2px}.calendar-day{min-height:40px;padding:2px}.day-number{font-size:.9em}.day-name{font-size:.6em}}