/* ============================================================
   RestoPK SaaS — Main Stylesheet
   ============================================================ */

:root {
  --primary:      #2563eb;
  --primary-dark: #1d4ed8;
  --success:      #16a34a;
  --danger:       #dc2626;
  --warning:      #d97706;
  --info:         #0891b2;
  --dark:         #1e293b;
  --muted:        #64748b;
  --light:        #f1f5f9;
  --border:       #e2e8f0;
  --white:        #ffffff;
  --sidebar-w:    240px;
  --topbar-h:     56px;
  --radius:       8px;
  --shadow:       0 1px 3px rgba(0,0,0,.12);
  --shadow-lg:    0 4px 12px rgba(0,0,0,.15);
  --font:         'Segoe UI', Tahoma, Geneva, sans-serif;
  --font-ur:      'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:var(--font); background:#f8fafc; color:var(--dark); }

/* ---- SIDEBAR ---- */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-w); background:var(--dark);
  color:#cbd5e1; overflow-y:auto; z-index:100;
  transition:transform .25s;
  display:flex; flex-direction:column;
}
.sidebar-header { padding:16px; border-bottom:1px solid #334155; }
.logo-text  { font-size:18px; font-weight:700; color:#fff; }
.logo-img   { max-height:48px; max-width:100%; object-fit:contain; }
.plan-badge { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:700; }
.plan-basic { background:#475569; color:#e2e8f0; }
.plan-pro   { background:#7c3aed; color:#ede9fe; }

.nav-menu   { list-style:none; flex:1; padding:8px 0; }
.nav-menu li a { display:block; padding:9px 16px; color:#94a3b8; text-decoration:none; border-radius:4px; margin:1px 8px; transition:all .15s; font-size:13px; }
.nav-menu li a:hover, .nav-menu li a.active { background:#334155; color:#fff; }
.nav-group { padding:12px 16px 4px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#475569; font-weight:600; }

.sidebar-footer { padding:12px 16px; border-top:1px solid #334155; }
.user-info  { font-size:12px; color:#94a3b8; margin-bottom:8px; }
.btn-logout { display:block; padding:6px 12px; background:#dc2626; color:#fff; border-radius:var(--radius); text-decoration:none; font-size:12px; text-align:center; }

/* ---- MAIN CONTENT ---- */
.main-content { margin-left:var(--sidebar-w); min-height:100vh; }

.topbar {
  position:sticky; top:0; z-index:90;
  height:var(--topbar-h); background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:12px;
  box-shadow:var(--shadow);
}
.sidebar-toggle { background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); }
.topbar-title   { font-weight:600; font-size:16px; flex:1; }
.topbar-right   { display:flex; align-items:center; gap:8px; }
.btn-lang       { padding:4px 10px; border:1px solid var(--border); border-radius:20px; text-decoration:none; font-size:12px; color:var(--muted); }
.session-badge  { font-size:12px; color:var(--success); }

.page-content   { padding:20px; }
.page-header    { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h1 { font-size:22px; font-weight:700; }
.header-actions { display:flex; gap:8px; }

/* ---- ALERTS ---- */
.alert { padding:10px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13px; border-left:4px solid; }
.alert-success { background:#f0fdf4; color:#15803d; border-color:var(--success); }
.alert-error   { background:#fef2f2; color:#b91c1c; border-color:var(--danger); }
.alert-warning { background:#fffbeb; color:#92400e; border-color:var(--warning); }
.alert-info    { background:#ecfeff; color:#0e7490; border-color:var(--info); }

/* ---- CARDS ---- */
.card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); margin-bottom:16px; box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.card-header h3 { font-size:15px; font-weight:600; }
.card-body  { padding:16px; }

/* ---- KPI ---- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.kpi-card  { background:var(--white); border-radius:var(--radius); padding:16px; border:1px solid var(--border); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.kpi-green::before { background:var(--success); }
.kpi-blue::before  { background:var(--primary); }
.kpi-red::before   { background:var(--danger); }
.kpi-orange::before{ background:var(--warning); }
.kpi-icon  { font-size:24px; margin-bottom:8px; }
.kpi-value { font-size:20px; font-weight:700; }
.kpi-label { color:var(--muted); font-size:12px; margin-top:4px; }
.kpi-sub   { font-size:11px; color:var(--muted); }

/* ---- DASHBOARD GRID ---- */
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:768px){ .dashboard-grid { grid-template-columns:1fr; } }

.popular-list { list-style:none; padding:0; }
.popular-list li { display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border); }
.popular-list .rank { background:var(--primary); color:#fff; width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:700; display:flex;align-items:center;justify-content:center; }
.popular-list .item-name { flex:1; }
.popular-list .item-qty  { font-size:12px; color:var(--muted); }

/* ---- TABLES ---- */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { background:var(--light); padding:10px 12px; text-align:left; font-weight:600; color:var(--muted); border-bottom:2px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:hover { background:#f8fafc; }
.table-sm th, .table-sm td { padding:7px 10px; }
.row-warning { background:#fffbeb !important; }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); border:1px solid transparent; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; transition:all .15s; }
.btn-primary  { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success  { background:var(--success); color:#fff; border-color:var(--success); }
.btn-success:hover { background:#15803d; }
.btn-danger   { background:var(--danger);  color:#fff; border-color:var(--danger); }
.btn-warning  { background:var(--warning); color:#fff; border-color:var(--warning); }
.btn-outline  { background:var(--white); color:var(--dark); border-color:var(--border); }
.btn-outline:hover { background:var(--light); }
.btn-secondary{ background:#64748b; color:#fff; }
.btn-lg  { padding:12px 24px; font-size:15px; }
.btn-sm  { padding:5px 10px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn-wa  { background:#25d366; color:#fff; border-color:#25d366; }

/* ---- FORMS ---- */
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:4px; font-size:13px; font-weight:500; color:var(--dark); }
.form-control { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; outline:none; transition:border-color .15s; background:var(--white); }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.form-control-sm { padding:5px 8px; font-size:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-check { display:flex; align-items:center; gap:8px; }
.form-check input { width:16px; height:16px; }

/* ---- BADGES ---- */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-pending   { background:#fef3c7; color:#92400e; }
.badge-confirmed { background:#dbeafe; color:#1e40af; }
.badge-preparing { background:#fef9c3; color:#854d0e; }
.badge-ready     { background:#d1fae5; color:#065f46; }
.badge-completed { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.badge-cancelled { background:#fee2e2; color:#991b1b; }
.badge-delivered { background:#e0f2fe; color:#0c4a6e; }

/* ---- AUTH ---- */
.auth-body { background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.auth-container { width:100%; padding:20px; }
.auth-card { background:var(--white); border-radius:16px; padding:32px; max-width:400px; margin:0 auto; box-shadow:var(--shadow-lg); }
.auth-logo { font-size:32px; text-align:center; margin-bottom:16px; }
.auth-card h2 { text-align:center; margin-bottom:20px; font-size:20px; }
.auth-links { text-align:center; margin-top:16px; font-size:13px; }
.auth-links a { color:var(--primary); text-decoration:none; }
.auth-subtitle { text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px; margin-top:-12px; }

.plan-info { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; border-top:1px solid var(--border); padding-top:16px; }
.plan-card { background:var(--light); border-radius:var(--radius); padding:12px; font-size:12px; }
.plan-card ul { margin-top:6px; padding-left:16px; }
.plan-card ul li { margin-bottom:2px; }
.plan-card-pro { background:#f5f3ff; border:1px solid #c4b5fd; }

/* ---- PAGINATION ---- */
.pagination { display:flex; gap:4px; justify-content:center; margin-top:16px; }
.pagination a { padding:6px 10px; border:1px solid var(--border); border-radius:4px; text-decoration:none; font-size:12px; }
.pagination .active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---- MISC ---- */
.text-muted   { color:var(--muted); }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger); }
.text-center  { text-align:center; }
.mt-16 { margin-top:16px; }
.mb-16 { margin-bottom:16px; }

/* ---- RTL ---- */
.rtl { direction:rtl; }
.rtl .sidebar { left:auto; right:0; }
.rtl .main-content { margin-left:0; margin-right:var(--sidebar-w); }
.rtl .nav-menu li a { text-align:right; }

/* ---- RESPONSIVE ---- */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .rtl .sidebar { transform:translateX(100%); }
  .rtl .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .rtl .main-content { margin-right:0; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}