body{font-family:system-ui,Arial; margin:0; background:#f6f7fb; color:#333}
.topbar{background:#0b3a6e;color:#fff;padding:10px 16px;display:flex;justify-content:space-between}
main{padding:16px}
.hidden{display:none}
.form{display:flex;gap:8px;align-items:center}
.form input{padding:6px 8px}
.form button{padding:6px 12px}
.msg{color:#d00;margin-left:8px}
.actions{margin:10px 0}
.table{width:100%}
#ordersTable,#salesTable{width:100%;border-collapse:collapse;background:#fff}
#ordersTable th,#ordersTable td,#salesTable th,#salesTable td{border-bottom:1px solid #eee;padding:8px}
footer.tabs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;padding:10px;display:flex;gap:8px;justify-content:center}
footer.tabs button{padding:6px 12px}
.red{color:#d00}

/* Toasts */
.toast-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.custom-toast{min-width:260px;max-width:420px;background:#fff;color:#333;border:1px solid #ddd;box-shadow:0 6px 20px rgba(0,0,0,0.12);padding:10px 12px;border-radius:6px;display:flex;align-items:flex-start;gap:8px;pointer-events:auto;animation:slideIn .2s ease-out}
.custom-toast.success{border-left:4px solid #2e7d32}
.custom-toast.error{border-left:4px solid #c62828}
.custom-toast.info{border-left:4px solid #1565c0}
.custom-toast .title{font-weight:600}
.custom-toast .close{margin-left:auto;cursor:pointer;background:none;border:none;color:#666;font-size:16px;line-height:1}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.custom-toast.fade-out{animation:fadeOut .2s ease-in forwards}
@keyframes fadeOut{to{opacity:0;transform:translateY(-6px)}}

/* Admin Layout Styles */
.sidebar{min-height:100vh;background-color:#343a40;transition:margin 0.3s ease}
.sidebar .nav-link{color:#fff;padding:0.75rem 1.25rem;border-radius:0}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background-color:#495057;color:#fff}
.sidebar .nav-link i{margin-right:0.5rem;width:16px;text-align:center}
.content-wrapper{min-height:100vh;background-color:#f8f9fa}
.navbar-brand{font-weight:bold}
/* Avoid content being overlapped by fixed-top navbar */
body{padding-top:56px}
@media (max-width:768px){
  .sidebar{position:fixed;top:0;left:0;z-index:1050;width:250px;margin-left:-250px}
  .sidebar.show{margin-left:0}
  .sidebar-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1040;display:none}
  .sidebar.show+.sidebar-backdrop{display:block}
}
.login-page{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.login-container{max-width:400px;margin:0 auto;padding:2rem}
.login-card{background:white;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:2rem}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo h2{color:#333;font-weight:bold}
.card{border:none;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.card-header{background-color:#f8f9fa;border-bottom:1px solid #dee2e6;border-radius:10px 10px 0 0 !important;font-weight:600}
.table{margin-bottom:0}
.table th{border-top:none;font-weight:600;color:#495057;background-color:#f8f9fa}
.btn{border-radius:5px;font-weight:500}
.btn-primary{background-color:#007bff;border-color:#007bff}
.btn-primary:hover{background-color:#0056b3;border-color:#0056b3}
.btn-success{background-color:#28a745;border-color:#28a745}
.btn-success:hover{background-color:#1e7e34;border-color:#1e7e34}
.toast.fade-out {
  opacity: 0;
}

.date-input-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.date-input-wrapper input[type="date"] {
  pointer-events: none; /* Disable direct interaction with the input */
}