:root{--primary-color: #3182ce;--secondary-color: #2d3748;--background-color: #f7fafc;--card-bg: #ffffff;--text-color: #2d3748;--border-color: #e2e8f0;--sidebar-width: 240px;--status-unconfirmed-bg: #bee3f8;--status-unconfirmed-text: #2c5282;--status-confirmed-bg: #c6f6d5;--status-confirmed-text: #22543d;--status-cancelled-bg: #fed7d7;--status-cancelled-text: #822727;--status-noshow-bg: #edf2f7;--status-noshow-text: #4a5568;--status-complete-bg: #e2e8f0;--status-complete-text: #2d3748}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}.dashboard-grid{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--card-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:20px;gap:10px;overflow-y:auto}.content-area{flex:1;padding:30px;overflow-y:auto;overflow-x:hidden}.header-card{background:var(--card-bg);padding:15px 25px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.logo-section,.user-actions{display:flex;align-items:center;gap:15px}.controls-card{background:var(--card-bg);padding:20px;border-radius:12px;border:1px solid var(--border-color);margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;box-shadow:0 2px 4px #00000005}.table-card{background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;box-shadow:0 4px 6px #00000008}.placeholder-box{background:var(--card-bg);border-radius:12px;border:2px dashed var(--border-color);height:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#a0aec0}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;border:none;background:transparent;color:#4a5568;font-weight:600;cursor:pointer;transition:all .2s;text-align:left;width:100%}.nav-item:hover{background:#edf2f7;color:var(--primary-color)}.nav-item.active{background:#ebf8ff;color:var(--primary-color)}.nav-icon{font-size:20px}.icon-btn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:6px;color:#4a5568;transition:background .2s}.icon-btn:hover{background:#edf2f7;color:var(--text-color)}.logout-btn{padding:8px 16px;border:1px solid var(--border-color);background:transparent;border-radius:6px;font-weight:600;color:#4a5568;cursor:pointer;transition:all .2s}.logout-btn:hover{background:#edf2f7;border-color:#cbd5e0}.toggle-group{display:flex;background:#edf2f7;padding:4px;border-radius:8px}.toggle-btn{flex:1;padding:8px 16px;border:none;background:transparent;border-radius:6px;font-weight:600;color:#4a5568;cursor:pointer;transition:all .2s}.toggle-btn.active{background:#fff;color:var(--primary-color);box-shadow:0 2px 4px #0000000d}.styled-input{padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;color:var(--text-color);transition:border-color .2s;width:200px}.styled-input:focus{outline:none;border-color:var(--primary-color)}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-size:12px;font-weight:700;color:#718096;text-transform:uppercase}.data-table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}.data-table th{background:#f8fafc;padding:12px 16px;font-size:11px;font-weight:700;color:#718096;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color)}.data-table td{padding:12px 16px;border-bottom:1px solid var(--border-color);font-size:14px;vertical-align:middle;color:var(--text-color)}.data-table tr:last-child td{border-bottom:none}.avatar-cell{display:flex;align-items:center;gap:12px}.avatar-placeholder{width:32px;height:32px;background:#e2e8f0;color:#718096;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;white-space:nowrap}.status-Unconfirmed{background:var(--status-unconfirmed-bg);color:var(--status-unconfirmed-text)}.status-Confirmed{background:var(--status-confirmed-bg);color:var(--status-confirmed-text)}.status-Cancelled{background:var(--status-cancelled-bg);color:var(--status-cancelled-text)}.status-NoShow{background:var(--status-noshow-bg);color:var(--status-noshow-text)}.status-Complete{background:var(--status-complete-bg);color:var(--status-complete-text)}.row-complete{background:#f7fafc;color:#a0aec0}.row-complete td{color:#a0aec0}.row-complete .avatar-placeholder{background:#edf2f7;color:#cbd5e0}.row-complete .status-badge{opacity:.7}.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}.form-row.equal-height .input-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-row.equal-height .styled-input{height:42px;box-sizing:border-box;width:100%}.input-wrapper label{font-size:11px;font-weight:700;margin-bottom:5px;display:block}@media(max-width:768px){.app-container{padding:0;overflow-x:hidden}.content-area{padding:10px}.header-card{flex-direction:column;gap:15px;align-items:flex-start;padding:15px}.logo-section{width:100%;justify-content:flex-start;gap:15px}.user-actions{width:100%;display:flex}.user-actions button{flex:1}.dashboard-grid{flex-direction:column;gap:0}.sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:10px;margin-bottom:0;border-bottom:1px solid var(--border-color);border-right:none;scrollbar-width:none;-ms-overflow-style:none}.sidebar::-webkit-scrollbar{display:none}.nav-item{width:auto;flex:0 0 35%;padding:10px 5px;font-size:13px;white-space:nowrap;justify-content:center}.controls-card{flex-direction:column;align-items:stretch;border-radius:0;border-left:none;border-right:none}.controls-card>div,.controls-card>.input-group,.controls-card>.toggle-group{width:100%;margin-bottom:10px}.styled-input{width:100%!important;max-width:100%!important;min-width:0;box-sizing:border-box}.table-card{width:100%;overflow-x:auto;display:block;-webkit-overflow-scrolling:touch;border-radius:0;border-left:none;border-right:none}.data-table{min-width:600px}.data-table th,.data-table td{padding:10px 15px;white-space:nowrap}.form-row{grid-template-columns:1fr}.app-container>div[style*="height: 500px"]{height:50vh!important}}
