#root{min-height:100vh;display:flex;flex-direction:column;position:relative;font-family:Lato}:root{--color-primary: #dff178;--color-secondary: #f59e0b;--color-primary-hover: #ccdd6e;--color-secondary-hover: #e7970c;--color-accent: #4f46e5;--color-black: #111111;--color-white: #ffffff;--color-gray-light: #f0f3f1;--color-gray-light-hover: #e7e9e7;--color-gray-medium: #9ca3af;--color-gray-dark: #4b5563;--shadow-light: 0 2px 6px rgba(0, 0, 0, .1);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .15);--shadow-dark: 0 8px 24px rgba(0, 0, 0, .25);--solid-primary: rgb(224, 235, 162);--solid-primary-light: rgb(235, 241, 198);--trans-primary: #dff17848;--trans-primary-light: #dff1781f}body{width:100%;min-height:100vh;margin:0;position:relative;background:linear-gradient(150deg,rgb(250,250,250) 80%,var(--color-primary) 160%)}.light-text{color:var(--color-gray-light)}.note{font-style:italic!important;color:var(--color-gray-medium)!important;font-size:.8rem!important}.note.danger{color:red!important}.navbar-container{position:fixed;padding:20px}.navbar-brand{border-radius:8px;width:60px;display:flex;align-items:center;justify-content:center;cursor:pointer}.navbar-brand svg{width:100%;height:auto;max-width:100%;filter:drop-shadow(0 0 4px rgba(0,0,0,.1));overflow:visible;fill:#dff178;stroke:#000;stroke-width:8px;transition:.3s}.navbar-brand svg:hover{filter:drop-shadow(0 0 4px rgba(0,0,0,.4));stroke-width:12px;transform:scale(1.05)}@media (max-width: 500px){.navbar-container{padding:4px 4px 0}}.sidebar-overlay{height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:100;background:transparent;pointer-events:none;transition:background .3s ease}.sidebar-overlay.show{background:#00000073;pointer-events:initial}.sidebar{width:300px;height:100vh;background:var(--color-white);position:fixed;top:0;left:-300px;transform:translate(0);z-index:101;transition:left .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;border-radius:0 12px 12px 0;overflow:hidden;box-shadow:4px 0 20px #00000040}.sidebar.ajar{left:-285px;transform:translate(0)}.sidebar.show{transform:translate(0);left:0}.sidebar-content{display:flex;flex-direction:column;height:100%;width:100%;background:linear-gradient(150deg,var(--color-white) 20%,var(--color-primary) 460%)}.sidebar-header{width:100%;padding:12px;font-size:12px;box-sizing:border-box;text-align:center;color:var(--color-black)}.sidebar-header img{width:100%}.sidebar-body{flex:1;padding:1rem;overflow-y:auto;display:flex;align-items:center;justify-content:stretch}.sidebar-body ul{list-style:none;flex-grow:1;margin:0;padding:0}.sidebar-body li{padding:.75rem 1rem;margin:24px 0;font-size:1rem;color:var(--color-black);border-radius:8px;transition:background .2s ease,color .2s ease;cursor:pointer;display:flex;align-items:center}.sidebar-body li:hover{background:var(--solid-primary);color:var(--color-black)}.sidebar-body li span{margin-left:12px}.sidebar-footer{padding:1rem;font-size:.9rem;text-align:center;background:radial-gradient(circle at center,var(--solid-primary-light) 20%,white 260%);border-top:1px solid var(--color-gray-medium);color:var(--color-gray-dark);display:flex;align-items:center;justify-content:center}.social-link{display:flex;align-items:center;justify-content:center;color:var(--color-black);text-decoration:none;font-weight:700;transition:color .2s ease-in-out;margin:12px}.social-link svg{transition:fill .2s ease-in-out;fill:var(--color-black)}.social-link:hover svg{fill:var(--color-gray-dark)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200}.modal{background:var(--color-white);border-radius:12px;padding:1.8rem;width:90%;max-width:420px;box-shadow:var(--shadow-medium);text-align:center;font-family:Inter,sans-serif;position:relative}.modal h3{margin:0;margin-bottom:1rem;font-size:1.35rem;font-weight:600;color:var(--color-black)}.modal p{margin-bottom:1.5rem;font-size:.95rem;color:var(--color-gray-dark);line-height:1.4}.modal-buttons{display:flex;justify-content:space-between;gap:.75rem;margin:20px auto}.modal-buttons .btn{flex:1;padding:.75rem 1rem;border-radius:8px;border:2px solid transparent;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s ease,transform .15s ease,color .2s ease}.btn{cursor:pointer;border:1px solid black!important}.btn-save{background:var(--color-primary);color:var(--color-black)}.btn-save:hover{background:var(--color-primary-hover);transform:scale(1.05)}.btn-confirm{background:var(--color-error-light);color:var(--color-error-dark)}.btn-confirm:hover{background:var(--color-error);color:var(--color-white);transform:scale(1.05)}.btn-cancel{background:var(--color-gray-light);color:var(--color-black)}.btn-cancel:hover{background:var(--color-gray-light-hover);transform:scale(1.05)}.btn-reset{background:#ef4444;color:var(--color-white)}.btn-reset:hover{background:#dc2626;color:#fff;transform:scale(1.05)}.btn-secondary{background:var(--color-secondary);color:var(--color-black)}.btn-secondary:hover{background:var(--color-secondary-hover);transform:scale(1.05)}.employee-list{display:flex;flex-direction:column;gap:.75rem;max-height:300px;overflow-y:auto;margin:2rem auto}.employee-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;gap:.5rem;padding:.6rem .8rem;border:1px solid var(--color-gray-light);border-radius:8px;background-color:var(--color-white);box-shadow:var(--shadow-small);position:relative;transition:background .2s ease}.employee-item:hover{background-color:var(--trans-primary)}.employee-item span{flex:1;font-weight:500;color:var(--color-black)}.employee-item input[type=text]{flex:1;padding:.4rem .6rem;border:2px solid var(--solid-primary);border-radius:8px;font-size:.9rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.employee-item input[type=text]:focus{border-color:var(--color-primary);box-shadow:0 0 4px var(--trans-primary)}.employee-item .btn{padding:.4rem .6rem;font-size:.85rem;font-weight:600;border-radius:8px;transition:background .2s ease,transform .15s ease}.btn-edit{background:var(--solid-primary-light);color:var(--color-black);border:1px solid var(--solid-primary)}.btn-edit:hover{background:var(--solid-primary);color:var(--color-black);transform:scale(1.05)}.btn-delete{background:var(--color-error-light);color:var(--color-error-dark);border:1px solid var(--color-error-dark)}.btn-delete:hover{background:var(--color-error);color:var(--color-white);transform:scale(1.05)}.modal-file-input{display:block;width:100%;padding:.6rem;margin:1rem 0;border:2px solid var(--solid-primary);border-radius:8px;font-size:.9rem;box-sizing:border-box;background-color:var(--color-white);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.modal-file-input:hover{border-color:var(--color-primary)}.modal-file-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 6px var(--trans-primary)}.modal-error{color:var(--color-error-dark);font-size:.9rem;font-weight:500;margin:.5rem 0 1rem;text-align:left}.confirm-employee-erase{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;background:#f5f5f5;color:var(--color-error-dark);font-weight:600;border-radius:8px;z-index:5;overflow:hidden;padding:8px;box-sizing:border-box;width:0%;transition:width .2s ease}.employee-item .confirm-employee-erase{width:100%}.confirm-buttons{display:flex;gap:.5rem}.confirm-buttons .btn{padding:.4rem .8rem;font-size:.85rem;border-radius:8px}.confirm-buttons .btn-delete{background:#ef4444;color:#fff}.confirm-buttons .btn-delete:hover{background:#dc2626}.confirm-buttons .btn-cancel{background:var(--color-primary);color:var(--color-black)}.confirm-buttons .btn-cancel:hover{background:var(--color-gray)}.icon-button{background:none;border:none;padding:6px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .1s,color .2s ease;color:var(--icon-color, #111)}.icon-button:hover{color:var(--icon-hover-color, var(--icon-color))}.icon-button:active{transform:scale(.96)}.icon-button.disabled{color:#aaa!important;cursor:not-allowed;pointer-events:none}.cal-selections{display:flex;width:100%;align-items:center;justify-content:center;gap:8px}.cal-select-wrapper{display:flex;align-items:center;justify-items:center;width:100%;height:100%;transition:.2s}.cal-select{border-radius:10px;flex-grow:1;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s ease;background-color:var(--color-white);overflow:hidden;position:relative;color:var(--color-black)}.cal-select.selected:hover{border-color:var(--trans-primary)}.cal-select.selected{position:absolute;top:10%;left:0;width:100%;height:90%;z-index:2;box-shadow:var(--shadow-medium);border-color:var(--color-primary)}.cal-select ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100%;width:100%}.cal-select ul li{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;border-radius:8px}.cal-select ul li:hover{background-color:var(--trans-primary)}.cal-select ul li.active{background:var(--trans-primary);color:#000;font-weight:600;border-radius:6px}.cal-select ul li.disabled{color:var(--color-gray-dark);pointer-events:none;opacity:.6}.cal-select-dir{height:100%;padding:4px 6px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease;color:var(--color-black)}.cal-select-dir:hover{background-color:var(--trans-primary)}.cal-select-dir.disabled{color:var(--color-gray-dark);pointer-events:none;opacity:.6;cursor:not-allowed}.cal-select-display{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between}.cal-select-text{width:100%;text-align:center;font-weight:500;color:var(--color-black)}.cal-days-container{width:100%;height:100%;overflow:hidden;margin-top:12px;transition:margin .25s ease}.cal-days-container.minimised{margin-top:0;height:0}.cal-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;width:100%}.cal-cell{padding:12px 0;text-align:center;box-sizing:border-box;transition:all .2s ease;color:var(--color-black)}.cal-cell.header{font-weight:600;background-color:var(--color-primary);color:var(--color-gray-dark)}.cal-cell.empty{background-color:transparent;border:none}.cal-cell.active{background-color:var(--solid-primary-light);color:var(--color-black);font-weight:600;box-shadow:var(--shadow-small)}.cal-cell.dimmed{color:var(--color-gray-dark);opacity:.5}.cal-cell.hovered{background-color:var(--color-primary);cursor:pointer}.controls{display:flex;width:100%;height:100%;padding:2px;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;box-sizing:border-box;background-color:var(--color-white);box-shadow:0 0 12px #0000001a}.controls-item{height:100%;flex-grow:1;border-radius:8px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;text-wrap:nowrap;color:var(--color-black)}.controls-item:hover{background-color:var(--trans-primary);cursor:pointer}.save-drawer{position:absolute;top:100%;left:0;transform:translateY(-10px);opacity:0;background-color:var(--color-white);border:1px solid var(--color-gray-medium);border-radius:8px;box-shadow:var(--shadow-medium);padding:.25rem 0;display:flex;flex-direction:column;transition:transform .3s ease,opacity .3s ease;z-index:100;pointer-events:none;min-width:180px}.save-drawer.open{transform:translateY(0);opacity:1;pointer-events:auto}.drawer-item{padding:.5rem 1rem;cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;border-radius:4px;color:var(--color-black)}.drawer-item:hover{background-color:var(--color-gray-light);transform:translate(2px);color:var(--color-black)}.arrow{display:inline-block;margin-left:4px;font-size:1.8rem;padding-top:18px;transition:transform .3s ease,color .2s ease;color:var(--color-gray-dark)}.arrow.open{transform:rotate(180deg)}.hide-on-mob{display:block}.show-on-mob{display:none}@media (max-width: 600px){.hide-on-mob{display:none}.show-on-mob{display:block}}.planner{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;padding-top:24px;box-sizing:border-box;margin:0 auto;position:relative;overflow:auto;font-family:Inter,sans-serif}.planner-header,.planner-row{width:98%;display:flex;align-items:center;justify-content:space-around;padding:4px 0;position:relative;transition:background .2s ease}.planner-header{margin-bottom:16px}.planner-item-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--solid-primary);border-radius:8px;margin:2px}.planner-item.day-header{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--solid-primary);border-radius:8px;padding:4px 8px;min-width:60px;background-color:var(--color-white);box-shadow:var(--shadow-small)}.planner-item{width:60px;min-width:60px;height:100%;min-height:40px;display:flex;align-items:center;justify-content:center;flex-grow:1;text-align:center;transition:all .2s ease}.planner-item.show{background-color:var(--solid-primary-light)}.planner-item.name{font-size:.9rem;font-weight:600;min-height:20px;text-transform:uppercase;box-sizing:border-box;color:var(--color-gray-dark);background-color:var(--solid-primary)}.planner-item.number{font-size:1.5rem;font-weight:400;color:var(--color-black);border-radius:8px;background-color:var(--color-white)}.planner-item.blank{background-color:var(--trans-primary-light);border-radius:8px}.planner-item.employee{border:1px solid var(--color-black);box-sizing:border-box;background-color:var(--solid-primary-light);position:relative}.employee-icon{position:absolute;left:0;z-index:1}.planner-item span{z-index:2}.planner-item.employee-col{min-width:80px;max-width:140px;text-wrap:wrap;overflow:hidden;justify-content:center;text-align:center;text-transform:capitalize;font-weight:500;color:var(--color-black);border-radius:40px}.planner-item.add-shift{background-color:var(--color-primary);color:var(--color-black);font-weight:500;border:1px solid black;box-sizing:border-box;cursor:pointer;transition:background .2s ease,transform .15s ease}.planner-item.add-shift:hover{background-color:var(--color-primary-hover);transform:scale(1.05)}.planner-item.assignment{background-color:var(--solid-primary);color:var(--color-black);cursor:pointer;font-size:.9rem;transition:background .2s ease,transform .1s ease}.planner-item.assignment:hover{background-color:var(--color-primary)}.planner-item.new-assignment{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:var(--color-white);transition:background .2s ease,transform .15s ease}.planner-item.new-assignment:hover{background-color:var(--trans-primary);cursor:pointer}.holiday-assignment{background-color:var(--color-error-light);color:var(--color-error-dark);font-weight:600;cursor:pointer;transition:background .2s ease}.holiday-assignment:hover{background-color:var(--color-error);color:var(--color-white)}.planner-row{margin-bottom:4px}.new-assignment-popup-container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#00000040;z-index:11}@media (max-width: 500px){.planner-item.employee-col{position:absolute}.planner-item.employee-col.employee,.planner-item.add-shift{position:absolute;height:20px;left:0;top:0}.planner-item.employee-col.employee{background-color:var(--trans-primary)}.planner-row{padding-top:40px}}.new-assignment-popup{width:100%;max-width:420px;background-color:var(--color-white);border-radius:12px;box-shadow:var(--shadow-medium);padding:20px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;font-family:Inter,sans-serif;position:relative}.new-assignment-header{text-align:center;margin:8px auto}.new-assignment-header h2{margin:12px 0;font-size:1.5rem;font-weight:600;color:var(--color-black);text-transform:capitalize}.new-assignment-header h2.emp-name{font-size:1.8rem;font-weight:700;padding:4px;color:var(--color-black)}.new-assignment-emp-name{background-color:var(--color-primary);border-radius:40px}.time-selector-container{display:flex;gap:24px;justify-content:center;width:100%;margin:16px 0}.time-block{display:flex;flex-direction:column;align-items:center;gap:8px}.time-title{font-weight:600;color:var(--color-gray-dark);font-size:.85rem;text-transform:uppercase}.time-selectors{display:flex;gap:8px}.time-selectors select{width:64px;height:40px;font-size:1rem;text-align:center;border-radius:8px;border:2px solid var(--solid-primary);background-color:var(--color-white);color:var(--color-black);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .1s ease}.time-selectors select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 6px var(--trans-primary);transform:scale(1.05)}.add-split-shift button{margin:20px;font-size:.9rem;font-weight:500;color:var(--color-black);background-color:var(--solid-primary-light);cursor:pointer;transition:color .2s ease}.add-split-shift button:hover{color:var(--color-black);background-color:var(--solid-primary)}.horiz-line{width:100%;border:1px solid var(--color-gray-light);margin:16px 0}.new-assignment-buttons{display:flex;gap:12px;margin-top:24px;width:100%;justify-content:center}.new-assignment-buttons button{flex:1;padding:10px 0;border-radius:8px;border:1px solid black;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s ease,transform .15s ease,color .2s ease}.new-assignment-buttons button:first-child{background-color:var(--solid-primary);color:var(--color-black)}.new-assignment-buttons button:first-child:hover{background-color:var(--color-primary);transform:scale(1.05)}.new-assignment-buttons button:last-child{background-color:var(--color-gray-light);color:var(--color-black)}.new-assignment-buttons button:last-child:hover{background-color:var(--color-gray-light-hover);transform:scale(1.05)}.shift-btn,.shift-btn button{padding:.4rem .6rem;font-size:.85rem;font-weight:600;border-radius:8px;transition:background .2s ease,transform .15s ease}.shift-btn button{border:1px solid black}.delete-shift{background:#ef4444;color:#fff;cursor:pointer;border:1px solid black}.delete-shift:hover{background:#dc2626}.holiday-text{color:var(--color-error-dark);margin:20px auto;font-weight:600}.tutorial-overlay{position:fixed;inset:0;z-index:2000;pointer-events:none}.tutorial-dark{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle var(--r) at var(--x) var(--y),rgba(255,255,255,0) 80%,rgba(0,0,0,.2) 180%);transition:background .3s ease;z-index:999;pointer-events:none}.tutorial-highlight{position:absolute;border-radius:8px;pointer-events:none;z-index:2100;transition:all .2s ease}.tutorial-tooltip{position:absolute;background:var(--color-white);color:var(--color-black);padding:.8rem 1rem;border-radius:8px;box-shadow:0 4px 20px #00000040;font-size:.9rem;z-index:2101;width:50vw;min-width:280px;pointer-events:auto;left:50%;transform:translate(-50%)}.tutorial-tooltip h2{text-align:center;font-size:1.2rem}.tutorial-tooltip p{text-align:center;margin:40px auto}.tutorial-tip{font-size:.8rem;font-style:italic;color:var(--color-gray-dark);margin-top:.3rem;text-align:center}.tutorial-footer{display:flex;justify-content:space-between;margin-top:40px;font-size:.8rem}.tutorial-footer button{padding:.3rem .6rem;border-radius:6px;border:none;cursor:pointer;font-weight:600;margin-left:.3rem}.tutorial-close{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:var(--color-black)}.tutorial-close:hover{color:var(--color-primary)}@media (max-width: 500px){.tutorial-tip{display:none}}.rota-container{display:flex;align-items:center;justify-content:stretch;flex-direction:column;flex-grow:1;position:relative}.controls-container{width:70%;min-width:340px;height:60px;padding:20px 0 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.controls-wrapper{margin:0 120px;height:100%;max-width:600px;width:100%;border-radius:8px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-white);box-shadow:var(--shadow-small)}.planner-container{display:flex;width:100%;height:100%;flex-grow:1;margin-top:20px}.planner-wrapper{width:100%;flex-grow:1;margin-top:20px}.calendar-container{position:absolute;top:0;right:0;width:240px;padding:20px;overflow:hidden;z-index:10}.calendar-wrapper{width:100%;height:100%;border-radius:8px;display:flex;align-items:center;justify-content:start;flex-direction:column;padding:8px;box-sizing:border-box;position:relative;background-color:var(--color-white);box-shadow:0 0 12px #0000001a}.calendar-wrapper.minimised{max-height:40px}.calendar-min-button{position:absolute;bottom:-12px;left:50%;transform:translate(-50%);border:2px solid var(--trans-primary);border-radius:20px;height:20px;width:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;background-color:var(--color-white);transition:.2s}.calendar-min-button:hover{background-color:var(--solid-primary-light);color:var(--color-black)}@media (max-width: 1000px){.calendar-container{right:50%;transform:translate(50%);top:48px}.controls-wrapper{margin:0 20px}}@media (max-width: 500px){.controls-container{padding:52px 4px 4px;height:100px}.controls-wrapper{margin:40px auto 0}.calendar-container{top:0;right:0;transform:translate(0);padding:4px 4px 20px 20px}.planner-container{margin-top:0}}