.app{min-height:100vh;background-color:#f8f9fa;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-banner{background-color:#f8d7da;color:#721c24;padding:1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f5c6cb}.error-banner button{background:none;border:none;color:#721c24;font-size:1.2rem;cursor:pointer;padding:.25rem}.header{background-color:#667eea;color:#fff;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header h1{font-size:1.8rem;font-weight:600;margin:0}.header-actions{display:flex;gap:1rem;align-items:center}.btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}.btn-primary{background-color:#28a745;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-primary:hover{background-color:#218838}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#545b62}.btn-danger{background-color:#dc3545;color:#fff;padding:.5rem 1rem;font-size:.9rem}.btn-danger:hover{background-color:#c82333}.logout-btn{background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}.logout-btn:hover{background-color:#ffffff1a}.main-content{flex:1;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;width:100%;padding:0 2rem}.calendar-scroll{flex:1;display:flex;flex-direction:column;height:100%;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;overflow:hidden;margin:2rem 0}.calendar-header-fixed{background-color:#667eea;color:#fff;padding:1.5rem 2rem;flex-shrink:0}.calendar-title{font-size:1.5rem;font-weight:600;margin:0 0 1rem}.calendar-info{font-size:.9rem;opacity:.9;margin:0}.calendar-grid-container{flex:1;overflow-y:auto;padding:1rem}.month-header{background-color:#f8f9fa;border-radius:8px;padding:1rem;margin:1.5rem 0 1rem;text-align:center}.month-header:first-child{margin-top:0}.month-title{font-size:1.3rem;font-weight:600;color:#495057;margin:0;text-transform:capitalize}.weekday-headers{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:1px}.weekday-header{background-color:#e9ecef;padding:.75rem;text-align:center;font-weight:600;font-size:.9rem;color:#495057}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:1px}.calendar-day{background-color:#fff;border:1px solid #e9ecef;min-height:100px;padding:.5rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;position:relative}.calendar-day.empty{background-color:#f8f9fa;cursor:default}.calendar-day:hover{background-color:#f1f3f5}.calendar-day.today{background-color:#e3f2fd;border-color:#667eea;border-width:2px;font-weight:700}.calendar-day.weekend{background-color:#fdfdfe}.calendar-day.today.weekend{background-color:#e8f4fd}.day-header{display:flex;align-items:center;padding-bottom:4px}.day-number{font-size:1.1rem;font-weight:600;color:#333;flex-shrink:0}.calendar-day.today .day-number{color:#667eea}.today-indicator{font-size:1.1rem;font-weight:700;color:#667eea;text-transform:uppercase;padding:0 4px;border-radius:4px;flex-grow:1;text-align:center;flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-shifts{flex-grow:1;display:flex;flex-direction:column;gap:.25rem}.shift-dot{background-color:#667eea;color:#fff;padding:.5rem;border-radius:12px;font-size:clamp(.6rem,2vw,.8rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;transition:all .2s ease;width:100%;box-sizing:border-box;overflow:visible;min-width:0;max-width:100%;position:relative}.shift-dot:hover{background-color:#5a6fd8;transform:scale(1.02);z-index:10}.shift-time{font-weight:600;word-break:break-word;line-height:1.2;font-size:clamp(.6rem,2vw,1.2rem);max-width:100%;overflow-wrap:break-word;text-align:center}.shift-actions{position:absolute;bottom:-.5em;right:-.5em;display:flex;gap:.25rem;opacity:0;transition:opacity .2s;z-index:99}.shift-dot:hover .shift-actions{opacity:1}.shift-action-btn{background:#fff;border:1px solid #e9ecef;color:#667eea;padding:.25rem;border-radius:4px;cursor:pointer;font-size:clamp(.7rem,1.8vw,.9rem);line-height:1;transition:background-color .2s;flex-shrink:0;box-shadow:0 1px 3px #0000001a}.shift-action-btn:hover{background:#e9ecef}.no-shifts{color:#ccc;font-size:1.5rem;text-align:center;opacity:0;transition:opacity .2s}.calendar-day:hover .no-shifts{opacity:1;color:#667eea}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:10px;padding:2rem;width:80%;max-width:500px;box-shadow:0 20px 40px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-title{font-size:1.5rem;font-weight:600;color:#333;margin:0}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:.25rem}.close-btn:hover{color:#333}.form-group{margin-bottom:1.5rem}.form-inputs{display:flex;flex-direction:column;align-items:stretch;width:75%;gap:1rem;margin:0 auto}.form-label{display:block;font-weight:600;margin-bottom:.5rem;color:#4a5568;text-align:left;width:100%}.form-input{width:100%;padding:1rem 2rem;border:2px solid #e9ecef;border-radius:6px;font-size:1rem;transition:border-color .2s}.form-input:focus{outline:none;border-color:#667eea}.form-input.error{border-color:#dc3545}.error-message{color:#dc3545;font-size:.875rem;margin-top:.25rem;display:block}.form-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}.form-actions .btn{flex:1}@media (max-width: 992px){.form-inputs{width:80%}.today-indicator{display:none}}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;text-align:center;align-items:stretch}.header-actions{align-items:stretch}.header-actions .btn{flex-grow:1;text-align:center}.main-content{padding:0 1rem}.calendar-header-fixed{padding:1rem}.calendar-grid-container{padding:.5rem}.calendar-day{min-height:60px;padding:.1rem}.day-number{font-size:.9rem;margin-bottom:.2rem}.shift-dot{font-size:clamp(.4rem,2.5vw,.6rem);padding:.1rem .2rem;gap:.1rem;margin-bottom:.1rem}.shift-time{line-height:1.1}.shift-actions{display:none}.day-shifts{gap:.1rem}.weekday-header{padding:.5rem;font-size:.8rem}.modal{margin:1rem;padding:1.5rem;width:90%}.form-inputs{width:80%}}@media (max-width: 576px){.form-inputs{width:90%}}@media (max-width: 480px){.appointment-actions{align-self:stretch}.appointment-actions .btn{flex:1}.calendar-day{min-height:50px;padding:.05rem}.day-number{font-size:.8rem;margin-bottom:.1rem}.shift-dot{font-size:clamp(.3rem,2vw,.5rem);padding:.05rem .1rem;gap:.05rem;margin-bottom:.05rem;border-radius:8px}.shift-time{line-height:1}.day-shifts{gap:.05rem}.calendar-grid-container{padding:.25rem}.weekday-header{padding:.25rem;font-size:.7rem}.modal{margin:.5rem;padding:1rem;width:95%}.form-actions{gap:.25rem;margin-top:1rem;justify-content:stretch}.form-actions .btn{padding:.6rem .5rem;font-size:clamp(.9rem,3.5vw,1rem);text-align:center;min-width:0}.modal-title{font-size:clamp(1.1rem,4vw,1.3rem)}.form-label{font-size:clamp(.9rem,3vw,1rem)}.form-input{font-size:clamp(.8rem,3vw,.9rem);padding:.5rem}.form-inputs{width:90%}}@media (min-width: 769px){.appointment-item{max-width:550px;width:90%;padding:2.5rem;margin:1rem auto}.appointment-time{font-size:1.5rem}.appointment-actions{gap:1rem}.appointment-actions .btn{padding:.75rem 1.5rem;font-size:1rem}}.appointment-overlay{max-height:80vh;overflow-y:auto}.appointment-list{margin-bottom:1.5rem}.appointment-item{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;margin-bottom:.5rem;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.appointment-time{font-size:1.1rem;font-weight:600;color:#667eea;flex:1;text-align:center}.appointment-actions{display:flex;gap:.5rem}.appointment-actions .btn{padding:.5rem 1rem;font-size:.9rem}