/* ==========================================================================
   FoodClick admin — the same design language as the customer app, on desktop.
   Loaded AFTER the stock theme so it wins the cascade; no markup changes.
   Palette = FcTokens light. Fonts: Bricolage Grotesque display, Plus Jakarta.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --fc-bg: #F8F4F1;
  --fc-surface: #FFFFFF;
  --fc-surface2: #F6F2F0;
  --fc-ink: #1A120E;
  --fc-text2: #6E625C;
  --fc-muted: #A0928B;
  --fc-line: rgba(26, 18, 14, .09);
  --fc-line2: rgba(26, 18, 14, .13);
  --fc-accent: #F16235;
  --fc-accent-strong: #D8431D;
  --fc-accent-bg: #FFF1EC;
  --fc-accent-line: #F0E2DA;
  --fc-good: #5F8A3F;
  --fc-good-bg: #F1F6EE;
  --fc-danger: #E03B24;
  --fc-danger-bg: #FDECE9;
  --fc-gold: #C98A16;
  --fc-gold-bg: #FFF6E4;
}

/* ---------- ground ------------------------------------------------------ */
body {
  background: var(--fc-bg) !important;
  color: var(--fc-ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px;
}
.page-wrapper { background: var(--fc-bg) !important; }
h1, h2, h3, h4, h5,
.text-themecolor,
.card-title {
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  color: var(--fc-ink) !important;
  letter-spacing: -.2px;
}
.text-themecolor { font-size: 22px; }
a { color: var(--fc-accent-strong); }
a:hover { color: var(--fc-accent); }
.text-muted { color: var(--fc-muted) !important; }

/* ---------- topbar ------------------------------------------------------ */
.topbar, .topbar .top-navbar, .navbar-header {
  background: var(--fc-surface) !important;
  box-shadow: none !important;
}
.topbar { border-bottom: 1px solid var(--fc-line2); }
.topbar .top-navbar .navbar-header { border-right: 1px solid var(--fc-line); }
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link,
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
  color: var(--fc-text2) !important;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover { color: var(--fc-accent) !important; }

/* ---------- sidebar ----------------------------------------------------- */
.left-sidebar, .sidebar-nav {
  background: var(--fc-surface) !important;
  box-shadow: none !important;
}
.left-sidebar { border-right: 1px solid var(--fc-line2); }
.sidebar-nav ul li a {
  color: var(--fc-text2) !important;
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 11px;
  margin: 1px 10px;
  padding: 9px 12px !important;
  border-left: 0 !important;
}
.sidebar-nav ul li a:hover {
  background: var(--fc-surface2) !important;
  color: var(--fc-ink) !important;
}
.sidebar-nav ul li a.active,
.sidebar-nav ul li.active > a {
  background: var(--fc-accent-bg) !important;
  color: var(--fc-accent-strong) !important;
  font-weight: 800;
  border-left: 0 !important;
}
.sidebar-nav ul li a i { color: inherit !important; }
.sidebar-nav .nav-small-cap {
  color: var(--fc-muted) !important;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 18px 22px 6px !important;
}
.sidebar-nav > ul > li > a.active, .sidebar-nav > ul > li > a:hover { border-left: 0 !important; }
.sidebar-nav ul li ul { background: transparent !important; }
.sidebar-nav ul li ul li a { margin-left: 26px; font-weight: 500; }

/* ---------- breadcrumbs & page titles ----------------------------------- */
.page-titles {
  background: transparent !important;
  box-shadow: none !important;
  padding: 18px 10px 4px;
}
.breadcrumb { background: transparent; font-size: 12px; }
.breadcrumb .breadcrumb-item a { color: var(--fc-muted); }
.breadcrumb-item.active { color: var(--fc-text2); }

/* ---------- cards ------------------------------------------------------- */
.card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin-bottom: 18px;
}
.card .card-body { border-radius: 16px; }
.card-no-border .card { border: 1px solid var(--fc-line) !important; }

/* ---------- buttons ----------------------------------------------------- */
.btn { border-radius: 12px !important; font-weight: 700; font-size: 13.5px; }
.btn-primary, .btn-info, .btn-success.fc-keep {
  background: var(--fc-accent) !important;
  border-color: var(--fc-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--fc-accent-strong) !important;
  border-color: var(--fc-accent-strong) !important;
}
.btn-secondary, .btn-default, .btn-light {
  background: var(--fc-surface2) !important;
  border-color: var(--fc-line2) !important;
  color: var(--fc-ink) !important;
}
.btn-outline-secondary { border-color: var(--fc-line2) !important; color: var(--fc-text2) !important; }
.btn-outline-secondary:hover { background: var(--fc-surface2) !important; color: var(--fc-ink) !important; }
.btn-danger { background: var(--fc-danger) !important; border-color: var(--fc-danger) !important; }
.btn-success { background: var(--fc-good) !important; border-color: var(--fc-good) !important; }
.btn-warning { background: var(--fc-gold) !important; border-color: var(--fc-gold) !important; color: #fff !important; }

/* ---------- forms ------------------------------------------------------- */
.form-control, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple, textarea {
  border: 1.5px solid var(--fc-line2) !important;
  border-radius: 11px !important;
  color: var(--fc-ink);
  background: var(--fc-surface);
  font-size: 13.5px;
}
.form-control:focus {
  border-color: var(--fc-accent) !important;
  box-shadow: 0 0 0 3px var(--fc-accent-bg) !important;
}
label, .control-label { color: var(--fc-text2); font-weight: 600; font-size: 13px; }
.form-text { font-size: 12px; }
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked { accent-color: var(--fc-accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fc-accent); }

/* ---------- tables ------------------------------------------------------ */
.table { color: var(--fc-ink); }
.table thead th, table.dataTable thead th {
  border-top: 0 !important;
  border-bottom: 1px solid var(--fc-line2) !important;
  color: var(--fc-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.table td, table.dataTable tbody td {
  border-top: 1px solid var(--fc-line) !important;
  vertical-align: middle;
  font-size: 13.5px;
}
.table-hover tbody tr:hover, table.dataTable.hover tbody tr:hover { background: var(--fc-surface2); }
table.dataTable.no-footer { border-bottom: 1px solid var(--fc-line2) !important; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--fc-line2) !important;
  border-radius: 10px !important;
  padding: 4px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: var(--fc-text2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--fc-accent) !important;
  border-color: var(--fc-accent) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--fc-surface2) !important;
  color: var(--fc-ink) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--fc-muted) !important; font-size: 12px; }

/* ---------- badges, labels, alerts -------------------------------------- */
.badge, .label { border-radius: 99px !important; font-weight: 700; padding: 4px 10px; }
.badge-success, .label-success { background: var(--fc-good-bg) !important; color: var(--fc-good) !important; }
.badge-danger, .label-danger { background: var(--fc-danger-bg) !important; color: var(--fc-danger) !important; }
.badge-warning, .label-warning { background: var(--fc-gold-bg) !important; color: var(--fc-gold) !important; }
.badge-info, .label-info, .badge-primary { background: var(--fc-accent-bg) !important; color: var(--fc-accent-strong) !important; }
.alert { border-radius: 14px !important; border: 1px solid var(--fc-line2); }
.alert-warning { background: var(--fc-gold-bg); color: #7a5a10; border-color: transparent; }
.alert-danger { background: var(--fc-danger-bg); color: var(--fc-danger); border-color: transparent; }
.alert-success { background: var(--fc-good-bg); color: var(--fc-good); border-color: transparent; }

/* ---------- modals & dropdowns ------------------------------------------ */
.modal-content { border-radius: 18px !important; border: 1px solid var(--fc-line2) !important; }
.modal-header { border-bottom: 1px solid var(--fc-line); }
.modal-footer { border-top: 1px solid var(--fc-line); }
.dropdown-menu { border-radius: 14px !important; border: 1px solid var(--fc-line2) !important; box-shadow: 0 10px 30px rgba(26,18,14,.10) !important; }
.dropdown-item:hover { background: var(--fc-surface2); }

/* ---------- footer ------------------------------------------------------ */
.footer {
  background: transparent !important;
  border-top: 1px solid var(--fc-line) !important;
  color: var(--fc-muted) !important;
  font-size: 12px;
}

/* ---------- misc stock-theme overrides ---------------------------------- */
.fix-header .topbar { box-shadow: none !important; }
.card-outline-info .card-header, .bg-info, .bg-primary {
  background: var(--fc-accent) !important;
  border-color: var(--fc-accent) !important;
}
.pagination .page-item.active .page-link {
  background: var(--fc-accent) !important;
  border-color: var(--fc-accent) !important;
}
.page-link { color: var(--fc-accent-strong); border-radius: 10px !important; margin: 0 2px; }
.nav-tabs .nav-link.active {
  color: var(--fc-accent-strong) !important;
  border-color: transparent transparent var(--fc-accent) !important;
  border-bottom-width: 2.5px !important;
  font-weight: 800;
}
.nav-tabs .nav-link { color: var(--fc-text2); }
::selection { background: var(--fc-accent-bg); }