/* ChickenAdda - Shared Styles */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Hind Siliguri', 'Segoe UI', sans-serif; }
body { background:#f4f6f8; color:#222; }
a { text-decoration:none; color:inherit; }

:root{
  --primary:#d9480f;
  --primary-dark:#b8390c;
  --accent:#2b8a3e;
  --bg:#f4f6f8;
  --card:#ffffff;
  --border:#e4e7eb;
  --text-muted:#6b7280;
}

.topbar{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.topbar h1{ font-size:20px; }
.topbar .user-info{ font-size:14px; display:flex; gap:12px; align-items:center; }
.btn{
  display:inline-block; padding:8px 16px; border:none; border-radius:6px; cursor:pointer;
  font-size:14px; font-weight:600; transition:.2s;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-outline{ background:transparent; border:1px solid #fff; color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.15); }
.btn-success{ background:var(--accent); color:#fff; }
.btn-danger{ background:#e03131; color:#fff; }
.btn-sm{ padding:5px 10px; font-size:12px; }

.container{ max-width:1200px; margin:20px auto; padding:0 16px; }

.tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{
  padding:9px 18px; background:#fff; border:1px solid var(--border); border-radius:8px;
  cursor:pointer; font-size:14px; font-weight:600; color:var(--text-muted);
}
.tab-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

.card{ background:var(--card); border-radius:10px; padding:18px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:16px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card{ background:#fff; border-radius:10px; padding:16px; border-left:4px solid var(--primary); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.stat-card .label{ font-size:13px; color:var(--text-muted); }
.stat-card .value{ font-size:24px; font-weight:700; margin-top:4px; }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ padding:10px 8px; text-align:left; border-bottom:1px solid var(--border); }
th{ background:#f8f9fa; font-weight:600; color:var(--text-muted); }
tr:hover{ background:#fafbfc; }

.badge{ padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; display:inline-block; }
.badge-pending{ background:#fff3bf; color:#856404; }
.badge-approved, .badge-confirmed, .badge-delivered{ background:#d3f9d8; color:#2b8a3e; }
.badge-rejected, .badge-cancelled{ background:#ffe3e3; color:#c92a2a; }
.badge-placed{ background:#e7f5ff; color:#1971c2; }
.badge-out_for_delivery{ background:#fff0e6; color:#d9480f; }
.badge-suspended{ background:#e9ecef; color:#495057; }

.form-group{ margin-bottom:14px; }
.form-group label{ display:block; margin-bottom:5px; font-size:13px; font-weight:600; color:#444; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:6px; font-size:14px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999;
  align-items:center; justify-content:center;
}
.modal-overlay.active{ display:flex; }
.modal-box{ background:#fff; border-radius:10px; padding:24px; width:90%; max-width:480px; max-height:85vh; overflow-y:auto; }
.modal-box h3{ margin-bottom:16px; }

.toast{
  position:fixed; bottom:20px; right:20px; background:#333; color:#fff; padding:12px 20px;
  border-radius:8px; z-index:1100; font-size:14px; display:none;
}
.toast.show{ display:block; animation:fadeIn .3s; }
.toast.error{ background:#c92a2a; }
.toast.success{ background:#2b8a3e; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.empty-state{ text-align:center; padding:40px 20px; color:var(--text-muted); }

.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.login-box{ background:#fff; border-radius:14px; padding:32px; width:90%; max-width:380px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-box h2{ text-align:center; margin-bottom:6px; color:var(--primary); }
.login-box .sub{ text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:22px; }
.role-switch{ display:flex; gap:6px; margin-bottom:18px; }
.role-switch button{ flex:1; padding:8px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; }
.role-switch button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

@media(max-width:640px){
  .form-row{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; gap:8px; align-items:flex-start; }
}