@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&family=Playfair+Display:wght@500;600&display=swap');

:root{--primary:#4A3D8F;--primary-light:#EEEDFE;--primary-100:#CECBF6;--primary-400:#7F77DD;--primary-800:#3C3489;--accent:#1A8A62;--accent-light:#E1F5EE;--accent-400:#1D9E75;--accent-800:#085041;--bg:#F7F6F3;--card:#FFFFFF;--border:#E8E6E1;--border-hover:#D1CFC9;--text:#2C2B28;--text-sec:#7A7870;--text-hint:#A9A89F;--amber-50:#FAEEDA;--amber-600:#BA7517;--amber-800:#633806;--red-50:#FCEBEB;--red-600:#E24B4A;--red-800:#791F1F;--blue-50:#E6F1FB;--blue-800:#0C447C;--green-50:#EAF3DE;--green-800:#27500A;--radius:8px;--radius-lg:12px;--font-body:'DM Sans',-apple-system,sans-serif;--font-display:'Playfair Display',Georgia,serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--primary-100)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:var(--font-body);transition:all .15s}
.btn:hover{border-color:var(--border-hover);background:var(--bg)}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{opacity:.9;background:var(--primary)}
.btn-danger{background:var(--red-50);color:var(--red-800);border-color:var(--red-50)}.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary-100)}
.btn-sm{padding:5px 12px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}

.form-group{margin-bottom:16px}.form-label{display:block;font-size:12px;font-weight:500;color:var(--text);margin-bottom:4px}.form-hint{font-size:11px;color:var(--text-hint);margin-bottom:6px;line-height:1.4}
.form-input,.form-select,.form-textarea{width:100%;height:38px;border-radius:var(--radius);border:1px solid var(--border);padding:0 12px;font-size:13px;color:var(--text);background:var(--card);font-family:var(--font-body);outline:none;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-400)}.form-textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}.form-row{display:flex;gap:12px}.form-row>*{flex:1}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.card-body{padding:20px}

.stat-grid{display:grid;gap:12px}.stat-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-card{background:var(--bg);border-radius:var(--radius);padding:14px}.stat-label{font-size:11px;color:var(--text-hint);margin-bottom:4px}.stat-value{font-size:22px;font-weight:500;color:var(--text)}
.stat-sub{font-size:11px;margin-top:3px}.stat-sub-green{color:var(--accent-800)}.stat-sub-amber{color:var(--amber-800)}.stat-sub-red{color:var(--red-800)}

.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:500}
.badge-green{background:var(--accent-light);color:var(--accent-800)}.badge-red{background:var(--red-50);color:var(--red-800)}.badge-amber{background:var(--amber-50);color:var(--amber-800)}
.badge-blue{background:var(--blue-50);color:var(--blue-800)}.badge-purple{background:var(--primary-light);color:var(--primary-800)}

.toggle{width:42px;height:24px;border-radius:12px;position:relative;cursor:pointer;transition:background .2s;border:none}.toggle.on{background:var(--accent-400)}.toggle.off{background:var(--border)}
.toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:left .2s}.toggle.on .knob{left:21px}.toggle.off .knob{left:3px}.toggle.disabled{opacity:.5;cursor:not-allowed}

.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;padding:12px 14px;font-size:11px;color:var(--text-hint);text-transform:uppercase;letter-spacing:.5px;font-weight:500;border-bottom:1px solid var(--border)}
.table td{padding:10px 14px;border-bottom:1px solid var(--border)}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg)}

.tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}.tab{padding:6px 14px;border-radius:var(--radius);font-size:12px;cursor:pointer;background:var(--bg);color:var(--text-sec);transition:all .2s;text-decoration:none}
.tab.active{background:var(--primary-light);color:var(--primary-800);font-weight:500}

.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 14px;border-radius:20px;font-size:12px;cursor:pointer;background:var(--card);color:var(--text-sec);border:1px solid var(--border);text-decoration:none}
.chip.active{background:var(--primary-light);color:var(--primary-800);border-color:var(--primary-100);font-weight:500}

.alert{border-radius:var(--radius);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:13px}
.alert-amber{background:var(--amber-50);color:var(--amber-800)}.alert-green{background:var(--accent-light);color:var(--accent-800)}.alert-red{background:var(--red-50);color:var(--red-800)}

.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;flex-shrink:0;background:var(--primary-light);color:var(--primary-800)}
.avatar-sm{width:28px;height:28px;font-size:11px}.avatar-md{width:34px;height:34px;font-size:13px}.avatar-lg{width:56px;height:56px;font-size:20px}

.logo{display:flex;align-items:center;gap:8px}.logo-name{font-family:var(--font-display);font-weight:600;color:var(--primary)}.logo-suffix{font-family:var(--font-body);font-weight:400;color:var(--text);margin-left:3px}

.ad-block{background:var(--card);border-radius:var(--radius);padding:14px;text-align:center;border:1px dashed var(--border);margin-bottom:16px}.ad-label{font-size:9px;color:var(--text-hint);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}

.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.popup-card{background:var(--card);border-radius:16px;padding:28px;width:100%;max-width:340px;text-align:center;animation:popIn .25s ease}.popup-hidden{display:none}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:400px;background:var(--card);border-radius:20px;padding:40px 32px;border:1px solid var(--border)}
.login-logo{text-align:center;margin-bottom:32px}.login-tagline{font-size:12px;color:var(--text-hint);letter-spacing:1.5px;text-transform:uppercase;margin-top:8px}
.login-divider{border-top:1px solid var(--border);margin:20px 0;padding-top:16px;text-align:center}

.mobile-app{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:105px;position:relative}
.mobile-header{padding:16px 20px 0;display:flex;justify-content:space-between;align-items:center}
.mobile-title{padding:12px 20px 0}.mobile-title h1{font-family:var(--font-display);font-size:22px;font-weight:500}.mobile-title .greeting{font-size:12px;color:var(--text-hint)}
.mobile-content{padding:12px 20px}

.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;justify-content:space-around;padding:10px 0 env(safe-area-inset-bottom,16px);background:var(--card);border-top:1px solid var(--border);z-index:50}
.bottom-nav-item{text-align:center;cursor:pointer;color:var(--text-hint);font-size:10px;transition:color .2s;border:none;background:none;font-family:var(--font-body)}
.bottom-nav-item.active{color:var(--primary)}.bottom-nav-item svg{display:block;margin:0 auto 2px}

.day-tabs{display:flex;gap:4px;margin-bottom:16px}.day-tab{flex:1;text-align:center;padding:8px 2px;border-radius:10px;cursor:pointer;border:1px solid var(--border);background:var(--card);transition:all .2s}
.day-tab.active{background:var(--primary-light);border-color:var(--primary-100)}.day-tab .day-num{font-size:16px;font-weight:500;display:block}.day-tab .day-name{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-hint)}
.day-tab.active .day-num,.day-tab.active .day-name{color:var(--primary-800)}.day-tab .day-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-400);margin:4px auto 0}

.dish-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--card);border:1px solid var(--border);margin-bottom:6px;transition:border-color .2s}
.dish-row.booked{border-color:var(--accent-light)}.dish-icon{font-size:20px;flex-shrink:0}.dish-info{flex:1;min-width:0}
.dish-type{font-size:10px;color:var(--text-hint);text-transform:uppercase;letter-spacing:.5px}.dish-name{font-size:13px;color:var(--text);margin-top:1px}
.meal-header{font-size:14px;font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:8px}.meal-time{font-size:11px;color:var(--text-hint);font-weight:400}

.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:230px;background:var(--card);border-right:1px solid var(--border);padding:20px 12px;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-logo{padding:0 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--border)}.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar-item{padding:9px 12px;border-radius:var(--radius);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .15s;color:var(--text-sec);border:none;background:none;width:100%;text-align:left;font-family:var(--font-body)}
.sidebar-item:hover{background:var(--bg)}.sidebar-item.active{background:var(--primary-light);color:var(--primary-800);font-weight:500}.sidebar-item svg{flex-shrink:0}
.sidebar-divider{margin:12px 0;padding-top:12px;border-top:1px solid var(--border)}.sidebar-footer{padding-top:12px;border-top:1px solid var(--border);margin-top:auto}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:4px 8px}.sidebar-user-info{flex:1}.sidebar-user-name{font-size:12px;font-weight:500}.sidebar-user-role{font-size:10px;color:var(--text-hint)}
.sidebar-future{font-size:9px;padding:2px 8px;border-radius:8px;background:var(--bg);color:var(--text-hint);border:1px dashed var(--border);margin-left:auto}

.admin-content{flex:1;padding:24px 32px;overflow-y:auto;min-width:0}.admin-content h1{font-family:var(--font-display);font-size:22px;font-weight:500;margin-bottom:24px}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-header h1{margin-bottom:0}

.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:32px;text-align:center;background:var(--bg);cursor:pointer;transition:border-color .2s}.upload-zone:hover{border-color:var(--primary-400)}
.upload-icon{width:48px;height:48px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}

.toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius);font-size:13px;animation:slideIn .3s ease;min-width:260px;max-width:400px}
.toast-success{background:var(--accent-light);color:var(--accent-800);border:1px solid var(--accent-400)}.toast-error{background:var(--red-50);color:var(--red-800);border:1px solid var(--red-600)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

@media(max-width:768px){.admin-sidebar{display:none}.admin-content{padding:16px}.stat-grid-4,.stat-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.form-row{flex-direction:column}}

.admin-mobile-header{display:none}
.sidebar-overlay{display:none}
.sidebar-close{display:none}

@media(max-width:768px){
.admin-mobile-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.mobile-page-title{font-size:15px;font-weight:500;font-family:var(--font-display)}
.hamburger-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}
.hamburger-btn:active{background:var(--bg)}
.admin-layout{flex-direction:column}
.admin-sidebar{display:none;position:fixed;top:0;left:0;bottom:0;width:280px;z-index:200;transform:translateX(-100%);transition:transform .25s ease}
.admin-sidebar.open{display:flex;transform:translateX(0)}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:199}
.sidebar-overlay.open{display:block}
.sidebar-close{display:flex;position:absolute;top:14px;right:14px;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius);cursor:pointer;color:var(--text-sec);z-index:201}
.sidebar-close:hover{background:var(--border)}
.admin-content{margin-left:0;padding:16px}
.admin-content .page-header{flex-direction:column;gap:12px;align-items:flex-start}
.admin-content .page-header>div{width:100%;flex-wrap:wrap}
.stat-grid-4,.stat-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row{flex-direction:column}
.table{font-size:12px}
.card{overflow-x:auto}
.card .table{min-width:600px}
.tabs{flex-wrap:wrap;gap:4px}
.chips{flex-wrap:wrap}
}

/* Demo mode banner */
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:#FAEEDA;color:#633806;text-align:center;padding:6px 16px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:1px solid #EFD49A;}
.demo-banner ~ .admin-content{margin-top:32px;}
@media(max-width:768px){.demo-banner{font-size:11px;padding:5px 12px;}}