/* Black Fast Transfert — brand override for the admin theme.
   Same token values as blackfast-web/lib/tokens.ts & app/globals.css
   Load this LAST after style.css so it overrides the generic theme defaults. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bf-black: #0B0D10;
  --bf-ink: #12151A;
  --bf-blue-700: #123E7C;
  --bf-blue-500: #1D63B8;
  --bf-teal-400: #2FB6C4;
  --bf-teal-200: #8FE0E6;
  --bf-fog: #F5F7FA;
  --bf-line: #E4E8EE;
  --bf-white: #FFFFFF;
  --bf-gradient: linear-gradient(135deg, var(--bf-blue-700) 0%, var(--bf-teal-400) 100%);
  --bf-radius-lg: 16px;
  --bf-radius-md: 10px;
  --bf-shadow-card: 0 1px 2px rgba(11,13,16,0.05), 0 12px 28px -12px rgba(18,62,124,0.12);
  --bf-shadow-card-hover: 0 1px 2px rgba(11,13,16,0.06), 0 20px 40px -16px rgba(18,62,124,0.22);
}

/* ── Global type & canvas ───────────────────────────────── */
body {
  font-family: 'Inter', 'Open Sans', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
/* Light-mode-only canvas/text — body.dark supplies its own (see dark.css),
   and must not be beaten by an unscoped !important rule here. */
body:not(.dark) {
  background: var(--bf-fog) !important;
  color: var(--bf-black);
}
h1, h2, h3, h4, h5, h6, .card-header h5 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--bf-black);
}
::selection { background: rgba(47,182,196,0.25); }

/* Thin brand scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(11,13,16,0.18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(11,13,16,0.32); }

/* ── Sidebar ─────────────────────────────────────────────── */
.pcoded-navbar {
  background: linear-gradient(180deg, var(--bf-black) 0%, #0d1420 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 24px rgba(11,13,16,0.12);
}
.pcoded-navbar .navbar-brand.header-logo {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.pcoded-navbar .navbar-brand.header-logo:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--bf-gradient);
  opacity: 0.9;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption label {
  color: rgba(255,255,255,0.4) !important;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption {
  margin-top: 18px;
}

/* Nav items — real markup is <li class="nav-item"> directly inside
   ul.pcoded-inner-navbar (no .pcoded-item wrapper), so target it directly. */
.pcoded-navbar .nav-item > a.nav-link {
  color: rgba(255,255,255,0.72) !important;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  margin: 2px 10px 2px 0;
  transition: all 0.2s cubic-bezier(.22,1,.36,1);
}
.pcoded-navbar .nav-item.active > a.nav-link,
.pcoded-navbar .nav-item.pcoded-trigger > a.nav-link,
.pcoded-navbar .nav-item > a.nav-link.pcoded-trigger,
.pcoded-navbar .nav-item > a.nav-link:hover,
.pcoded-navbar .nav-item > a.nav-link:focus {
  background: linear-gradient(90deg, rgba(47,182,196,0.18), rgba(47,182,196,0.02)) !important;
  border-left: 3px solid var(--bf-teal-400) !important;
  color: #fff !important;
}
.pcoded-navbar .nav-item.active > a.nav-link .pcoded-micon i,
.pcoded-navbar .nav-item.pcoded-trigger > a.nav-link .pcoded-micon i,
.pcoded-navbar .nav-item > a.nav-link:hover .pcoded-micon i {
  color: var(--bf-teal-400) !important;
}
.pcoded-navbar .pcoded-micon {
  opacity: 0.95;
}
.pcoded-navbar .pcoded-submenu li a {
  color: rgba(255,255,255,0.6) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.pcoded-navbar .pcoded-submenu li a:hover {
  color: var(--bf-teal-200) !important;
  padding-left: 24px;
}

/* Real logo mark in the sidebar brand slot (replaces the old icon+text lockup) */
.pcoded-navbar .b-brand-blackfast {
  padding: 4px 0;
}
.pcoded-navbar .b-brand-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.navbar-collapsed .pcoded-navbar .b-brand-logo {
  height: 26px;
}
.pcoded-navbar .b-brand .b-bg {
  background: var(--bf-gradient) !important;
}
.pcoded-navbar .b-brand .b-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* ── Header / topbar (light mode only — body.dark keeps dark.css's dark header) ── */
body:not(.dark) .pcoded-header {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bf-line) !important;
  box-shadow: 0 1px 3px rgba(11,13,16,0.05) !important;
}
body.dark .pcoded-header {
  backdrop-filter: saturate(180%) blur(12px);
}
.pcoded-header .m-header .b-brand .b-bg {
  background: var(--bf-gradient) !important;
  border-radius: 8px;
}
.pcoded-header .m-header .b-title {
  font-weight: 800 !important;
  background: var(--bf-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body:not(.dark) .pcoded-header .input-group .input-group-text,
body:not(.dark) .pcoded-header a,
body:not(.dark) .pcoded-header .dropdown-toggle {
  color: var(--bf-black) !important;
}
.pcoded-header ul.navbar-nav > li > a.dropdown-toggle,
.pcoded-header ul.navbar-nav > li > a.full-screen {
  height: 40px; width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  transition: background 0.18s ease;
}
.pcoded-header ul.navbar-nav > li > a.dropdown-toggle:hover,
.pcoded-header ul.navbar-nav > li > a.full-screen:hover {
  background: var(--bf-fog);
}
.pcoded-header .dropdown-menu.profile-notification {
  border-radius: var(--bf-radius-lg);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow-card-hover);
  overflow: hidden;
}
.pcoded-header .dropdown .profile-notification .pro-head {
  background: var(--bf-gradient) !important;
}
.pcoded-header .dropdown .profile-notification .pro-body .dropdown-item {
  font-weight: 500;
  transition: background 0.15s ease;
}
.pcoded-header .dropdown .profile-notification .pro-body .dropdown-item:hover {
  background: var(--bf-fog);
  color: var(--bf-blue-700);
}

/* ── Primary buttons & links ────────────────────────────── */
.btn {
  border-radius: var(--bf-radius-md) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary {
  background: var(--bf-gradient) !important;
  border: none !important;
  box-shadow: 0 8px 20px -10px rgba(18,62,124,0.55);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(18,62,124,0.65) !important;
  filter: brightness(1.05);
}
.btn-outline-secondary, .btn-secondary {
  border-radius: var(--bf-radius-md) !important;
}
.btn-danger { background: #E5484D !important; border-color: #E5484D !important; }
.btn-success { background: var(--bf-teal-400) !important; border-color: var(--bf-teal-400) !important; color: #06232a !important; }
a {
  color: var(--bf-blue-500);
}
a:hover {
  color: var(--bf-blue-700);
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  border-radius: var(--bf-radius-lg) !important;
  border: 1px solid var(--bf-line) !important;
  box-shadow: var(--bf-shadow-card) !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--bf-gradient);
  opacity: 0.9;
}
.card.card--flat:before,
.pro-head:before,
.dropdown-menu .card:before { display: none; }
.card .card-header {
  border-bottom-color: var(--bf-line) !important;
  background: transparent;
}
.card .card-header h5 {
  font-size: 16px;
  font-weight: 700 !important;
}
.card .card-header h5:after {
  background-color: var(--bf-teal-400) !important;
}
.card-block h6 {
  color: #6B7280;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Dashboard stat cards — icon tiles + big numbers */
.daily-sales h3, .Monthly-sales h3, .yearly-sales h3 {
  font-weight: 800 !important;
  font-size: 30px;
}
.daily-sales .feather, .Monthly-sales .feather, .yearly-sales .feather {
  height: 44px; width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 20px !important;
  margin-right: 12px !important;
  color: #fff !important;
}
.daily-sales .icon-clock { background: linear-gradient(135deg, #F59E0B, #F97316); }
.Monthly-sales .icon-arrow-up { background: linear-gradient(135deg, var(--bf-teal-400), #12b886); }
.yearly-sales .icon-arrow-down { background: linear-gradient(135deg, #E5484D, #C2373D); }
.daily-sales .progress-bar.progress-c-theme,
.yearly-sales .progress-bar.progress-c-theme {
  background: linear-gradient(90deg, var(--bf-blue-500), var(--bf-teal-400)) !important;
}
.Monthly-sales .progress-bar.progress-c-theme2 {
  background: linear-gradient(90deg, var(--bf-blue-700), var(--bf-teal-400)) !important;
}
.progress {
  border-radius: 999px !important;
  background: var(--bf-fog) !important;
  overflow: hidden;
}
.progress-bar {
  border-radius: 999px !important;
}

/* ── Tables ─────────────────────────────────────────────── */
.table thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 14px;
  padding-bottom: 14px;
}
body:not(.dark) .table thead th {
  color: #6B7280;
  border-bottom: 1px solid var(--bf-line) !important;
  background: var(--bf-fog);
}
body.dark .table thead th {
  color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid #2A2F38 !important;
}
.table tbody td {
  vertical-align: middle;
  border-top-color: var(--bf-line);
}
.table-hover tbody tr {
  transition: background 0.15s ease;
}
.table-hover tbody tr:hover {
  background: rgba(47,182,196,0.05) !important;
}
.table-responsive {
  border-radius: 12px;
  overflow: hidden;
}

/* ── Status badges / labels ─────────────────────────────── */
.badge-pending { background: linear-gradient(135deg,#F59E0B,#F97316); color: white; border-radius: 9999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.badge-confirmed { background: linear-gradient(135deg, var(--bf-teal-400), #12b886); color: white; border-radius: 9999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.badge-cancelled { background: linear-gradient(135deg, #E5484D, #C2373D); color: white; border-radius: 9999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }

/* DataTables pagination — brand */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--bf-gradient) !important;
  color: white !important;
  border-color: transparent !important;
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bf-fog) !important;
  border-color: var(--bf-line) !important;
  color: var(--bf-black) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border-color: var(--bf-line) !important;
}

/* ── Forms ──────────────────────────────────────────────── */
.form-control {
  border-radius: 10px !important;
  border-color: var(--bf-line) !important;
}
.form-control:focus {
  border-color: var(--bf-teal-400) !important;
  box-shadow: 0 0 0 3px rgba(47,182,196,0.15) !important;
}
label {
  font-weight: 600;
  color: var(--bf-black);
  font-size: 13px;
}

/* ── Loader ─────────────────────────────────────────────── */
.loader-bg .loader-track .loader-fill:before,
.loader-bg .loader-track .loader-fill:after {
  background: linear-gradient(90deg, var(--bf-teal-400), var(--bf-blue-700)) !important;
}

/* ── Theme accent utilities ─────────────────────────────── */
.theme-bg {
  background: var(--bf-gradient) !important;
}
.theme-bg2 {
  background: linear-gradient(135deg, var(--bf-blue-500) 0%, var(--bf-teal-400) 100%) !important;
}
.text-c-green { color: var(--bf-teal-400) !important; }
.text-c-blue { color: var(--bf-blue-500) !important; }
.text-c-yellow { color: #F59E0B !important; }
.text-c-red { color: #E5484D !important; }

/* ── This Week card ─────────────────────────────────────── */
.bf-week-card .badge {
  letter-spacing: 0.02em;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb-item a { color: var(--bf-blue-500); }

/* ── Alert ──────────────────────────────────────────────── */
.alert {
  border-radius: 12px;
  border-width: 1px;
}
.alert-danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.alert-success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer-section, footer.footer {
  color: #6B7280;
  font-size: 13px;
}

/* ── Modals ─────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--bf-radius-lg) !important;
  border: none !important;
  box-shadow: var(--bf-shadow-card-hover) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--bf-line) !important;
  background: var(--bf-fog);
}
.modal-header .modal-title {
  font-weight: 700 !important;
  font-size: 16px;
}
.modal-footer {
  border-top: 1px solid var(--bf-line) !important;
}
.modal-backdrop.show {
  opacity: 0.55 !important;
}
body.dark .modal-content {
  background-color: #171B22;
}
body.dark .modal-header {
  background: #12151A;
  border-bottom-color: #2A2F38 !important;
}
body.dark .modal-header .modal-title,
body.dark .modal-body,
body.dark .modal-body label {
  color: #E8EAF0 !important;
}
body.dark .modal-footer {
  border-top-color: #2A2F38 !important;
}
body.dark .close {
  color: #E8EAF0;
  text-shadow: none;
  opacity: 0.7;
}
body.dark .close:hover { opacity: 1; }

/* ── Reusable page-header block (breadcrumb + title + primary action) ── */
.bf-page-head {
  margin-bottom: 20px;
}
.bf-page-head .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 6px;
}
.bf-page-title {
  font-size: 22px;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.bf-page-title .feather {
  height: 38px; width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bf-gradient);
  color: #fff;
  font-size: 17px;
}

/* Single flat card body (avoids the old card-inside-card look) */
.bf-clean-card .card-block { padding-left: 0; padding-right: 0; }
.bf-avatar-tile {
  height: 34px; width: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--bf-fog);
  color: var(--bf-blue-500);
  margin-right: 10px;
  flex-shrink: 0;
}
.font-weight-600 { font-weight: 600; }
.bf-action-btn {
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 12px;
}
.bf-action-btn .feather { width: 13px; height: 13px; margin-right: 3px; }

/* ── Auth page ──────────────────────────────────────────── */
.auth-wrapper {
  font-family: 'Inter', system-ui, sans-serif;
}
.auth-wrapper .card {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 30px 80px -30px rgba(11,13,16,0.5) !important;
}
.auth-wrapper .card:before {
  height: 4px;
}
.auth-wrapper .form-control {
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px !important;
}
.auth-wrapper .btn-primary {
  height: 48px;
  font-size: 15px;
}

/* Booking details modal: dark theme paints p/labels near-white, but the
   modal card is white - force dark text so values (order id, names, ...) stay readable */
.modal-content {
  color: #111827;
}
.modal-content .modal-title {
  color: #000 !important;
}
.modal-content .modal-body p {
  color: #000 !important;
}
.modal-content .modal-body label {
  color: #111827 !important;
  font-weight: 600;
}