/* ═══════════════════════════════════════════════════════════
   Habiba Restaurant ERP — Global Stylesheet
   Designed & Developed by Insu Creation Private Limited
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Nunito:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand colours */
  --chilli:      #b83200;
  --flame:       #e85d04;
  --saffron:     #f48c06;
  --turmeric:    #faa307;

  /* Sidebar */
  --sb-bg:       #160900;
  --sb-border:   rgba(232,93,4,0.14);
  --sb-hover:    rgba(232,93,4,0.10);
  --sb-active:   rgba(232,93,4,0.18);
  --sb-text:     rgba(255,255,255,0.55);
  --sb-text-act: #ffffff;
  --sb-width:    240px;
  --sb-collapsed:64px;

  /* Layout */
  --header-h:    62px;
  --footer-h:    44px;

  /* Page bg */
  --page-bg:     #faf7f4;
  --card-bg:     #ffffff;
  --border-c:    #edddd0;

  /* Text */
  --text-dark:   #1e0c00;
  --text-mid:    #6b3a1a;
  --text-muted:  #a07050;

  /* Status */
  --green:       #16a34a;
  --green-bg:    #dcfce7;
  --red:         #dc2626;
  --red-bg:      #fee2e2;
  --blue:        #2563eb;
  --blue-bg:     #dbeafe;
  --yellow:      #d97706;
  --yellow-bg:   #fef3c7;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(100,40,0,0.08);
  --shadow-md:   0 4px 18px rgba(100,40,0,0.10);
  --shadow-lg:   0 8px 32px rgba(100,40,0,0.13);
}

html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
  background: var(--page-bg);
  color: var(--text-dark);
  font-size: 14px;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: 'Nunito', sans-serif; }
img { max-width: 100%; display: block; }

/* ── ERP Shell Layout ───────────────────────────────────── */
.erp-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Main area (right of sidebar) ──────────────────────── */
.erp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sb-width);
  transition: margin-left 0.28s ease;
}

.erp-main.collapsed { margin-left: var(--sb-collapsed); }

/* ── Content area (between header & footer) ─────────────── */
.erp-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px;
  margin-top: var(--header-h);
  margin-bottom: var(--footer-h);
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--border-c);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

/* ── Stat cards ─────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--border-c);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

.stat-body .stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stat-body .stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

.stat-body .stat-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
  display: flex; align-items: center; gap: 4px;
}

.stat-up   { color: var(--green); }
.stat-down { color: var(--red); }

/* Icon bg colours */
.ic-orange { background: #fff3e8; }
.ic-green  { background: #e8faf0; }
.ic-blue   { background: #e8f0ff; }
.ic-red    { background: #ffeaea; }
.ic-purple { background: #f3e8ff; }
.ic-teal   { background: #e8faf8; }

/* ── Section header ─────────────────────────────────────── */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

.sec-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700;
  color: var(--text-dark);
  display: flex; align-items: center; gap: 8px;
}

.sec-head h2 span { font-size: 18px; }

.btn-sm {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
}

.btn-sm:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-primary-sm {
  background: linear-gradient(135deg, var(--chilli), var(--flame));
  color: #fff;
  box-shadow: 0 3px 12px rgba(184,50,0,0.28);
}

.btn-outline-sm {
  background: transparent;
  border: 1.5px solid var(--border-c);
  color: var(--text-mid);
}

/* ── Tables ─────────────────────────────────────────────── */
.erp-table { width: 100%; border-collapse: collapse; }

.erp-table th {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--border-c);
  text-align: left; white-space: nowrap;
}

.erp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f5ede4;
  font-size: 13.5px;
  vertical-align: middle;
}

.erp-table tr:last-child td { border-bottom: none; }
.erp-table tbody tr { transition: background 0.15s; }
.erp-table tbody tr:hover { background: #fff8f4; }

/* ── Badges / pills ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}

.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-orange { background: #fff0e0; color: var(--flame); }

/* ── Page title ─────────────────────────────────────────── */
.page-title {
  margin-bottom: 20px;
}

.page-title h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 700;
  color: var(--text-dark);
}

.page-title p {
  font-size: 13px; color: var(--text-muted); margin-top: 3px;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd0c4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c8b0a0; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.4s ease both; }
.fade-up:nth-child(1) { animation-delay: 0.04s; }
.fade-up:nth-child(2) { animation-delay: 0.08s; }
.fade-up:nth-child(3) { animation-delay: 0.12s; }
.fade-up:nth-child(4) { animation-delay: 0.16s; }
.fade-up:nth-child(5) { animation-delay: 0.20s; }

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sb-width: 0px; }
  .erp-main { margin-left: 0 !important; }
  .erp-content { padding: 16px 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-body .stat-value { font-size: 24px; }
}