/* ============================================================
   FoodApp - Gold & Black theme
   ============================================================ */
:root{
  --gold:#D4AF37;
  --gold-light:#E8C860;
  --gold-dark:#B8942A;
  --black:#0d0d0d;
  --black-soft:#1a1a1a;
  --gray:#f5f5f5;
  --text:#222;
}

body{ background:var(--gray); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; }

/* ---- Navbar ---- */
.navbar-brand{ color:var(--gold)!important; font-weight:800; letter-spacing:.5px; }
.navbar-dark{ background:var(--black)!important; }
.navbar .nav-link{ color:#eee!important; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--gold)!important; }

/* ---- Buttons ---- */
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#000; font-weight:600; }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#000; }
.btn-gold{ color:var(--gold); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold); color:#000; }
.btn-dark-gold{ background:var(--black); color:var(--gold); }

a{ color:var(--gold-dark); }
a:hover{ color:var(--gold); }

/* ---- Cards ---- */
.card{ border:none; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.card-img-top{ border-radius:14px 14px 0 0; height:170px; object-fit:cover; }
.restaurant-card:hover,.food-card:hover{ transform:translateY(-4px); transition:.2s; }

/* ---- Sidebar (dashboards) ---- */
.sidebar{ background:var(--black); min-height:100vh; padding-top:1rem; }
.sidebar a{ color:#ccc; display:block; padding:.7rem 1.2rem; border-radius:8px; margin:2px 8px; text-decoration:none; }
.sidebar a:hover,.sidebar a.active{ background:var(--gold); color:#000; }
.sidebar .brand{ color:var(--gold); font-weight:800; padding:1rem 1.2rem; font-size:1.3rem; }

/* ---- Badges / status pills ---- */
.badge-gold{ background:var(--gold); color:#000; }
.status-pill{ padding:.3rem .7rem; border-radius:20px; font-size:.75rem; font-weight:600; }
.status-pending{ background:#fff3cd; color:#856404; }
.status-confirmed,.status-preparing{ background:#cce5ff; color:#004085; }
.status-on_the_way,.status-picked_up,.status-ready{ background:#d1ecf1; color:#0c5460; }
.status-delivered{ background:#d4edda; color:#155724; }
.status-cancelled,.status-rejected{ background:#f8d7da; color:#721c24; }

/* ---- Hero ---- */
.hero{ background:linear-gradient(135deg,var(--black),var(--black-soft)); color:#fff; padding:60px 0; }
.hero h1{ color:var(--gold); font-weight:800; }

/* ---- Misc ---- */
.section-title{ font-weight:700; border-left:4px solid var(--gold); padding-left:10px; margin:24px 0 16px; }
.rating{ color:var(--gold); }
footer.site-footer{ background:var(--black); color:#bbb; padding:30px 0; }
footer.site-footer a{ color:var(--gold); }
.map-box{ height:350px; border-radius:12px; overflow:hidden; }

/* ============================================================
   Responsive — phones, tablets, larger screens
   Applies to the admin / restaurant / rider dashboards and
   the customer-facing pages.
   ============================================================ */

/* Tablets and below: shorter maps so they don't dominate the screen */
@media (max-width: 991.98px){
  .map-box{ height:280px; }
  /* Wide tables (including DataTables) scroll sideways instead of squashing */
  .dataTables_wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dataTables_wrapper table.dataTable{ min-width:640px; }
  .table-responsive{ -webkit-overflow-scrolling:touch; }
}

/* Phones: turn the dashboard sidebar into a horizontal, scrollable top bar
   instead of a full-height black block, and tighten content padding. */
@media (max-width: 767.98px){
  .sidebar{
    min-height:auto;
    padding-top:0;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    position:sticky; top:0; z-index:1020;
  }
  .sidebar::-webkit-scrollbar{ height:4px; }
  .sidebar .brand{ flex:0 0 auto; padding:.7rem .9rem; font-size:1.05rem; }
  .sidebar a{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin:6px 4px;
    padding:.5rem .8rem;
    white-space:nowrap;
  }
  /* Dashboard main column: comfortable padding on small screens */
  main.col-md-9, main.col-lg-10{ padding:1rem !important; }
  .map-box{ height:240px; }
  .section-title{ margin:16px 0 12px; }
  .card{ border-radius:12px; }
  .card-img-top{ height:150px; }
}

/* Small phones: make DataTables toolbar (export buttons + search) wrap cleanly */
@media (max-width: 575.98px){
  .dt-buttons{ display:flex; flex-wrap:wrap; gap:.25rem; margin-bottom:.5rem; }
  div.dataTables_filter{ text-align:left !important; }
  div.dataTables_filter input{ width:100%; margin-left:0 !important; }
  .status-pill{ font-size:.68rem; padding:.25rem .55rem; }
  h4{ font-size:1.25rem; }
  h5{ font-size:1.1rem; }
}