/*
 * Lynk admin theme — loaded after the vendor CSS in the admin and provider
 * panels. Matches the customer website (lynkafrica.app): white, flat,
 * hairline borders, pill buttons, DM Sans headings, Inter body.
 * Vendor files stay untouched so upstream updates remain easy to apply.
 */

body {
  --lk-brand: #1355be;
  --lk-brand-dark: #0d3f96;
  --lk-tint: #ebf4ff;
  --lk-ink: #111827;
  --lk-ink-2: #374151;
  --lk-muted: #6b7280;
  --lk-line: #e5e7eb;
  --lk-line-2: #d1d5db;
  --lk-page: #f7f8fa;
  --lk-card: #ffffff;
  --lk-hover: #f3f4f6;
  --lk-success: #1f9d6b;
  --lk-danger: #dc2626;
  --lk-warning: #b45309;
  --lk-radius: 12px;
  --lk-mono: "JetBrains Mono", ui-monospace, monospace;
  --lk-display: "DM Sans", "Inter", system-ui, sans-serif;
  --lk-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bs-primary: var(--lk-brand);
  --bs-primary-dark: var(--lk-brand-dark);
  --bs-primary-light: var(--lk-tint);
  --bs-primary-rgb: 19, 85, 190;
  --bs-body-bg: var(--lk-page);
  --bs-body-color: var(--lk-ink-2);
  --bs-dark: var(--lk-ink);
  --bs-border-color: var(--lk-line);
  --border-color: var(--lk-line);
  --input-border-color: var(--lk-line-2);
  --input-border-color-active: var(--lk-brand);
  --bs-body-font-family: var(--lk-body);
  --title-color: var(--lk-ink);

  font-family: var(--lk-body) !important;
  background-color: var(--lk-page) !important;
  color: var(--lk-ink-2);
  -webkit-font-smoothing: antialiased;
}

body[data-bs-theme="dark"] {
  --lk-tint: rgba(19, 85, 190, 0.22);
  --lk-ink: #f3f4f6;
  --lk-ink-2: #d1d5db;
  --lk-muted: #9ca3af;
  --lk-line: #2a3140;
  --lk-line-2: #374151;
  --lk-page: #0b0f17;
  --lk-card: #121826;
  --lk-hover: #1a2233;
}

/* Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.page-title, .title-color, .modal-title, .card-title {
  font-family: var(--lk-display) !important;
  color: var(--lk-ink);
  letter-spacing: -0.01em;
}
.page-title-wrap .page-title,
.page-title-wrap h2,
.main-content > .container-fluid > .d-flex h2:first-child {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
}
.c1, .text-primary { color: var(--lk-brand) !important; }
.text-muted, .opacity-75 { color: var(--lk-muted) !important; }
a { color: var(--lk-brand); }
a:hover { color: var(--lk-brand-dark); }

/* Header ---------------------------------------------------------------- */
.header {
  background-color: var(--lk-card) !important;
  border-bottom: 1px solid var(--lk-line);
  box-shadow: none !important;
  block-size: 4rem;
}
.header .bg--secondary,
.header .lagn-drop-btn {
  background: var(--lk-card) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 999px !important;
  padding-inline: 14px !important;
  color: var(--lk-ink-2) !important;
}
.header .bg--secondary:hover,
.header .lagn-drop-btn:hover { border-color: var(--lk-ink-2) !important; }
.header .user img { border: 1px solid var(--lk-line); }

/* Sidebar --------------------------------------------------------------- */
.aside {
  background-color: var(--lk-card) !important;
  border-inline-end: 1px solid var(--lk-line);
  box-shadow: none !important;
}
.aside-header {
  block-size: 4rem;
  border-bottom: 1px solid var(--lk-line);
}
.aside-header .main-logo { max-block-size: 34px; inline-size: auto; }
.aside-body { padding: 0.75rem 0.75rem 1rem; }
.aside-body .user-profile {
  background: var(--lk-page) !important;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius) !important;
  padding: 0.75rem 0.875rem !important;
}
.aside-body .nav li { padding: 0; }
.aside-body .nav li.nav-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lk-muted);
  padding: 1.25rem 0.75rem 0.375rem;
}
.aside-body .nav li > a {
  align-items: center;
  gap: 10px;
  padding: 0.5625rem 0.75rem;
  border-radius: 10px;
  color: var(--lk-ink-2);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aside-body .nav li > a .material-icons,
.aside-body .nav li > a .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--lk-muted);
}
.aside-body .nav li > a:hover { background: var(--lk-hover); color: var(--lk-ink); }
.aside-body .nav li.active > a,
.aside-body .nav li > a.active-menu,
.aside-body .nav li.active-menu > a,
.aside-body .nav a.active-menu {
  background: var(--lk-tint) !important;
  color: var(--lk-brand) !important;
  font-weight: 600;
}
.aside-body .nav li.active > a .material-icons,
.aside-body .nav a.active-menu .material-icons { color: var(--lk-brand) !important; }
.aside-body .nav li.has-sub-item:after { inset-block-start: 0.55rem; inset-inline-end: 0.5rem; color: var(--lk-muted); }
.aside-body .nav ul { padding-block-start: 0.125rem; }
.aside-body .nav ul li { padding-inline-start: 1.5rem; border-radius: 10px; }
.aside-body .nav ul li > a { padding-block: 0.4375rem; font-size: 0.8125rem; }
.aside-body .nav li .link-title .count {
  background: var(--lk-brand) !important;
  border-radius: 999px !important;
  font-size: 11px;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
}
.aside .search-form input,
.aside .form-control { border-radius: 999px !important; }

/* Page ------------------------------------------------------------------ */
.main-area { background: var(--lk-page); }
.main-content { padding-block-start: 1.75rem; }
.footer { color: var(--lk-muted); font-size: 0.8125rem; }

/* Cards ----------------------------------------------------------------- */
.card,
.dropdown-menu,
.modal-content {
  background-color: var(--lk-card) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: var(--lk-radius) !important;
  box-shadow: none !important;
}
.dropdown-menu,
.modal-content { box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12) !important; }
.card-header {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.card-header h4, .card-header h5, .card-header .card-title { font-size: 1.0625rem; font-weight: 700; }
.shadow, .shadow-sm, .shadow-lg, .box-shadow, [class*="shadow--"] { box-shadow: none !important; }

/* Dashboard summary tiles: flat white stat cards like the website ------- */
.business-summary,
.business-summary-customers,
.business-summary-providers,
.business-summary-services,
.business-summary-earning,
.business-summary-commission,
.statistics-card {
  background: var(--lk-card) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: var(--lk-radius) !important;
  padding: 1.25rem 1.25rem 1.5rem !important;
}
.business-summary::after,
.statistics-card::after { display: none !important; }
.business-summary *,
.statistics-card * { color: var(--lk-ink-2) !important; }
.business-summary h2,
.statistics-card h2 {
  font-family: var(--lk-display) !important;
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  color: var(--lk-ink) !important;
}
.business-summary h3,
.statistics-card h3 { font-size: 0.875rem !important; font-weight: 500 !important; color: var(--lk-muted) !important; }
.business-summary .absolute-img,
.statistics-card .absolute-img {
  opacity: 1;
  inset-block-start: 1.125rem;
  inset-block-end: auto;
  inline-size: 40px;
  block-size: 40px;
  padding: 8px;
  border-radius: 10px;
  background: var(--lk-tint);
  object-fit: contain;
}
/* Vendor tile icons are white artwork for coloured tiles; tint them brand blue. */
.business-summary .absolute-img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(2381%) hue-rotate(211deg) brightness(92%) contrast(95%);
  background: transparent;
  opacity: 0.9;
}
.business-summary { border-top: 3px solid var(--lk-brand) !important; }
.business-summary-customers { border-top-color: var(--lk-success) !important; }
.business-summary-providers { border-top-color: #d97706 !important; }
.business-summary-services { border-top-color: var(--lk-brand-dark) !important; }

/* Buttons --------------------------------------------------------------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary, .btn-primary, .btn--primary:focus {
  background-color: var(--lk-brand) !important;
  border-color: var(--lk-brand) !important;
  color: #fff !important;
}
.btn--primary:hover, .btn-primary:hover {
  background-color: var(--lk-brand-dark) !important;
  border-color: var(--lk-brand-dark) !important;
}
.btn--secondary, .btn-secondary, .btn--light, .btn-light {
  background: var(--lk-card) !important;
  border: 1px solid var(--lk-line-2) !important;
  color: var(--lk-ink) !important;
}
.btn--secondary:hover, .btn-secondary:hover, .btn--light:hover, .btn-light:hover { border-color: var(--lk-ink-2) !important; }
.btn-outline-primary, .btn--primary-outline {
  border: 1px solid var(--lk-line-2) !important;
  color: var(--lk-brand) !important;
  background: var(--lk-card) !important;
}
.btn-outline-primary:hover { border-color: var(--lk-brand) !important; background: var(--lk-tint) !important; }
.btn--danger, .btn-danger { background: var(--lk-danger) !important; border-color: var(--lk-danger) !important; }
/* Table action icon buttons stay square-ish */
.table .btn-sm, .table .action-btn {
  border-radius: 8px !important;
  border: 1px solid var(--lk-line-2) !important;
  background: var(--lk-card) !important;
}
.table .action-btn:hover { border-color: var(--lk-brand) !important; background: var(--lk-tint) !important; }

/* Forms ----------------------------------------------------------------- */
.form-control, .form-select, .theme-input-style,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.search-form__input_group {
  border: 1px solid var(--lk-line-2) !important;
  border-radius: 10px !important;
  background-color: var(--lk-card) !important;
  color: var(--lk-ink) !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .theme-input-style:focus,
.select2-container--focus .select2-selection {
  border-color: var(--lk-brand) !important;
  box-shadow: 0 0 0 3px rgba(19, 85, 190, 0.15) !important;
}
.search-form__input_group .form-control,
.search-form__input_group .search-form__input { border: 0 !important; box-shadow: none !important; }
.form-label, label { color: var(--lk-ink); font-weight: 500; }
.form-check-input:checked { background-color: var(--lk-brand) !important; border-color: var(--lk-brand) !important; }
.switcher_input:checked + .switcher_control { background-color: var(--lk-brand) !important; }
.switcher_control { background-color: var(--lk-line-2); }

/* Tables ---------------------------------------------------------------- */
.table { color: var(--lk-ink-2); }
.table thead, .table thead th, .table thead.text-nowrap th, .table-light, .table thead tr {
  background: var(--lk-page) !important;
  color: var(--lk-muted) !important;
}
.table thead th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--lk-line) !important;
  padding-block: 0.75rem !important;
}
.table > :not(caption) > * > * { border-color: var(--lk-line) !important; }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover { background: var(--lk-hover); }
.table td { vertical-align: middle; }
.table-responsive { border-radius: var(--lk-radius); }

/* Tabs ------------------------------------------------------------------ */
.nav--tabs, .nav-tabs { border-bottom: 1px solid var(--lk-line) !important; gap: 1.5rem; }
.nav--tabs .nav-link, .nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--lk-ink-2) !important;
  padding: 0.625rem 0 !important;
  font-weight: 500;
}
.nav--tabs .nav-link.active, .nav-tabs .nav-link.active {
  border-bottom-color: var(--lk-brand) !important;
  color: var(--lk-ink) !important;
  font-weight: 600;
}

/* Badges ---------------------------------------------------------------- */
.badge { border-radius: 999px !important; font-weight: 600; padding: 0.3125rem 0.625rem; }
.badge-primary, .badge--primary, .badge-info { background: var(--lk-tint) !important; color: var(--lk-brand) !important; }
.badge-success, .badge--success { background: #e7f6ef !important; color: var(--lk-success) !important; }
.badge-danger, .badge--danger { background: #fdecec !important; color: var(--lk-danger) !important; }
.badge-warning, .badge--warning { background: #fef3e2 !important; color: var(--lk-warning) !important; }
body[data-bs-theme="dark"] .badge-success { background: rgba(31, 157, 107, 0.18) !important; }
body[data-bs-theme="dark"] .badge-danger { background: rgba(220, 38, 38, 0.18) !important; }
body[data-bs-theme="dark"] .badge-warning { background: rgba(180, 83, 9, 0.2) !important; }

/* Pagination ------------------------------------------------------------ */
.pagination .page-link, .pagination li a, .pagination li span {
  border-radius: 999px !important;
  border: 1px solid var(--lk-line) !important;
  margin-inline: 2px;
  color: var(--lk-ink-2);
  min-inline-size: 36px;
  text-align: center;
}
.pagination .active .page-link, .pagination li.active span {
  background: var(--lk-ink) !important;
  border-color: var(--lk-ink) !important;
  color: #fff !important;
}

/* Money and IDs read better in mono ------------------------------------- */
.table td .fz-12.text-muted, .booking-id, .transaction-id { font-family: var(--lk-mono); }

/* Setup guide floating button: calmer ---------------------------------- */
.setup-guide__button {
  background: var(--lk-ink) !important;
  border-radius: 999px !important;
  padding: 0.625rem 1rem !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.2) !important;
}
.view-guideline-btn { border: 1px solid var(--lk-line); border-inline-end: 0; box-shadow: none !important; }
.view-guideline-btn .btn { background: var(--lk-brand) !important; }
.setup-guide-btn {
  background: var(--lk-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.2) !important;
}

/* Admin login: centred Thumbtack-style card, same as lynkafrica.app/login */
body.lynk-login { background: var(--lk-page) !important; }
body.lynk-login .login-wrap { display: block !important; min-block-size: 100vh; }
body.lynk-login .login-left { display: none !important; }
body.lynk-login .lynk-login-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 64px;
  padding-inline: 24px;
  background: var(--lk-card);
  border-bottom: 1px solid var(--lk-line);
}
body.lynk-login .lynk-login-bar img { block-size: 32px; inline-size: auto; }
body.lynk-login .lynk-login-bar a { color: var(--lk-ink-2); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
body.lynk-login .lynk-login-bar a:hover { color: var(--lk-ink); }
body.lynk-login .login-right-wrap {
  background: transparent !important;
  display: block !important;
  inline-size: 100% !important;
  min-block-size: 0 !important;
  padding: 0 0 64px;
}
body.lynk-login .lynk-login-title {
  text-align: center;
  font-family: var(--lk-display);
  font-weight: 800;
  font-size: 2.125rem;
  color: var(--lk-ink);
  margin: 0;
}
body.lynk-login .lynk-login-sub { text-align: center; color: var(--lk-ink-2); margin: 8px 0 24px; }
body.lynk-login .login-right {
  max-inline-size: 440px !important;
  background: var(--lk-card);
  border: 1px solid var(--lk-line);
  border-radius: 8px;
  padding: 32px !important;
  margin: 0 auto !important;
}
body.lynk-login .login-right > .d-flex:first-child { display: none !important; }
body.lynk-login .login-right .form-control {
  border-radius: 999px !important;
  padding: 0.75rem 1.25rem !important;
  block-size: auto;
}
body.lynk-login .login-right .ff-field__icon { display: none !important; }
body.lynk-login .login-right .ff-field--has-icon .ff-field__input { padding-inline-start: 1.25rem !important; }
body.lynk-login .login-right .ff-field__label { font-weight: 700; color: var(--lk-ink); }
body.lynk-login .login-right .btn--primary {
  background: var(--lk-brand-dark) !important;
  border-color: var(--lk-brand-dark) !important;
  padding-block: 0.8125rem !important;
  font-size: 1rem;
}
body.lynk-login .login-right .btn--primary:hover { background: var(--lk-ink) !important; border-color: var(--lk-ink) !important; }
body.lynk-login .lynk-login-foot { text-align: center; color: var(--lk-ink-2); margin-top: 36px; }
body.lynk-login .lynk-login-foot a { color: var(--lk-brand); }

/* =========================================================================
   LAYOUT REVAMP (v2) - Thumbtack-style app shell for admin + provider panels
   ========================================================================= */

/* Fonts everywhere: Inter for UI, DM Sans for headings, JetBrains Mono for data.
   Icon fonts (Material Icons/Symbols) are left alone because only text elements
   are targeted here. */
:root {
  --body-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title-font: "DM Sans", "Inter", system-ui, sans-serif;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-btn-font-family: "Inter", system-ui, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, monospace;
}
body, button, input, select, textarea, optgroup, table, label, p, li, td, th,
.btn, .form-control, .form-select, .dropdown-menu, .dropdown-item, .nav-link,
.select2-container, .select2-results__option, .select2-selection__rendered,
.toast, #toast-container > div, .swal2-popup, .swal2-html-container,
.tooltip, .popover, .badge, .pagination, .modal, .offcanvas, .card, .ff-field__input {
  font-family: var(--lk-body) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .modal-title, .offcanvas-title, .card-title, .swal2-title {
  font-family: var(--lk-display) !important;
}
code, kbd, pre, samp, .font-monospace { font-family: var(--lk-mono) !important; }

/* App shell ---------------------------------------------------------------- */
:root { --lk-aside-w: 16rem; }
.aside { inline-size: var(--lk-aside-w) !important; }
.header { padding-inline-start: var(--lk-aside-w) !important; padding-inline-end: 1.5rem !important; block-size: 4rem !important; }
.main-area {
  padding-inline-start: var(--lk-aside-w) !important;
  padding-inline-end: 0 !important;
  padding-block-start: 4rem !important;
}
.main-content {
  padding: 2rem 2rem 1rem !important;
  inline-size: 100%;
  max-inline-size: 1440px;
  margin-inline: auto;
}
.main-content > .container-fluid { padding-inline: 0 !important; }
.footer { padding: 1rem 2rem 1.5rem !important; border-top: 1px solid var(--lk-line); margin-top: 1.5rem; }
body.aside-folded .header { padding-inline-start: 4.375rem !important; }
body.aside-folded .main-area { padding-inline-start: 4.375rem !important; }
@media (max-width: 1199px) {
  .header { padding-inline-start: 1rem !important; padding-inline-end: 1rem !important; }
  .main-area { padding-inline-start: 0 !important; }
  .main-content { padding: 1.25rem 1rem !important; }
  .aside { transition: transform .2s ease, box-shadow .2s ease; }
  body.aside-open .aside { box-shadow: 0 0 0 100vmax rgba(17, 24, 39, .45) !important; }
}

/* Header: white bar, wide search pill on the left, actions on the right */
.header > .container-fluid { padding-inline: 1.5rem 0 !important; }
.header .row { flex-wrap: nowrap; }
.lynk-header-left { min-inline-size: 0; }
.lynk-header-search {
  display: flex; align-items: center; gap: .625rem;
  inline-size: min(520px, 100%);
  block-size: 2.625rem;
  padding: 0 .5rem 0 1rem;
  border: 1px solid var(--lk-line-2);
  border-radius: 999px;
  background: var(--lk-card);
  color: var(--lk-muted);
  font-size: .9375rem;
  text-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lynk-header-search:hover { border-color: var(--lk-ink-2); }
.lynk-header-search:focus-visible { outline: none; border-color: var(--lk-brand); box-shadow: 0 0 0 3px rgba(19, 85, 190, .15); }
.lynk-header-search .material-symbols-outlined { font-size: 1.25rem; color: var(--lk-ink); }
.lynk-header-search__text { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lynk-header-search__kbd {
  font-family: var(--lk-mono) !important; font-size: .6875rem; font-weight: 500;
  color: var(--lk-muted); border: 1px solid var(--lk-line); border-radius: 6px; padding: .125rem .375rem;
}
@media (min-width: 1200px) { .header .header-toogle-menu { display: none; } }
.header .header-icon { color: var(--lk-ink-2) !important; }
.header .header-icon .material-icons { font-size: 1.375rem; }
.header .count-btn .count { background: var(--lk-danger) !important; font-family: var(--lk-mono) !important; }

/* Sidebar: logo bar, quiet section labels, pill nav. The profile card moves to
   the header avatar menu. */
.aside-header { padding-inline: 1.25rem !important; block-size: 4rem !important; }
.aside-body .user-profile { display: none !important; }
.aside-body { padding: .5rem .75rem 6rem !important; }
.aside-body .nav li > a { min-block-size: 2.375rem; }
.aside-body .nav ul.sub-menu { border-inline-start: 1px solid var(--lk-line); margin-inline-start: 1.375rem; padding-inline-start: .25rem !important; }
.aside-body .nav ul.sub-menu li { padding-inline-start: 0 !important; }

/* Page headers: big DM Sans title like the website */
.page-title-wrap { margin-bottom: 1.5rem !important; }
.main-content h2.page-title, .main-content .page-title, .page-title-wrap h2, .page-title-wrap h3 {
  font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--lk-ink) !important;
}

/* Cards and tiles: flat, hairline, roomier */
.card { border-radius: 14px !important; }
.card-body { padding: 1.5rem !important; }
.card-header { padding: 1.125rem 1.5rem !important; }
.business-summary, .statistics-card { border-top-width: 1px !important; border-top-color: var(--lk-line) !important; }
.business-summary h2, .statistics-card h2 { font-family: var(--lk-mono) !important; font-weight: 600 !important; letter-spacing: -.02em; }

/* Tables: taller rows */
.table > :not(caption) > * > * { padding: .875rem 1rem !important; }
.table thead th { white-space: nowrap; }

/* Inputs: 44px controls */
.form-control:not(textarea), .form-select, .select2-container--default .select2-selection--single { min-block-size: 2.75rem; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.625rem !important; color: var(--lk-ink) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { block-size: 2.625rem !important; }
.select2-dropdown { border: 1px solid var(--lk-line) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 12px 32px rgba(17, 24, 39, .12); }
.select2-results__option--highlighted { background: var(--lk-tint) !important; color: var(--lk-brand) !important; }

/* Floating cards: every side panel (Bootstrap offcanvas) opens as a centred card */
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
  inset: 50% auto auto 50% !important;
  inline-size: min(560px, calc(100vw - 2rem)) !important;
  block-size: auto !important;
  max-block-size: calc(100vh - 3rem) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 18px !important;
  background: var(--lk-card) !important;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .22) !important;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.98) !important;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease !important;
}
.offcanvas.offcanvas-end.showing, .offcanvas.offcanvas-end.show:not(.hiding),
.offcanvas.offcanvas-start.showing, .offcanvas.offcanvas-start.show:not(.hiding) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}
.offcanvas.offcanvas-cus-xl { inline-size: min(880px, calc(100vw - 2rem)) !important; }
.offcanvas.offcanvas-cus-sm, .offcanvas.offcanvas-md-500 { inline-size: min(560px, calc(100vw - 2rem)) !important; }
.offcanvas .offcanvas-header {
  background: var(--lk-card) !important;
  border-bottom: 1px solid var(--lk-line);
  padding: 1.125rem 1.5rem !important;
}
.offcanvas .offcanvas-header h1, .offcanvas .offcanvas-header h2, .offcanvas .offcanvas-header h3,
.offcanvas .offcanvas-header h4, .offcanvas .offcanvas-header h5, .offcanvas .offcanvas-title { font-size: 1.125rem !important; font-weight: 700 !important; margin: 0; }
.offcanvas .offcanvas-body { background: var(--lk-card) !important; padding: 1.5rem !important; overflow-y: auto; }
.offcanvas .offcanvas-footer { background: var(--lk-card) !important; padding: 1rem 1.5rem !important; border-top: 1px solid var(--lk-line) !important; }
.offcanvas .offcanvas-h-full { max-block-size: none !important; }
.offcanvas .btn-close { border-radius: 999px; background-color: var(--lk-hover); padding: .625rem; opacity: 1; }
.offcanvas-backdrop.show, .modal-backdrop.show { opacity: .45 !important; background: #111827 !important; }
@media (prefers-reduced-motion: reduce) {
  .offcanvas.offcanvas-end, .offcanvas.offcanvas-start { transition: none !important; }
}

/* Modals: centred and rounded; the side-docked Setup Guide becomes a centred card too */
.modal-dialog:not(.modal-fullscreen) { display: flex; align-items: center; min-block-size: calc(100% - 3.5rem); }
.modal-dialog:not(.modal-fullscreen) > .modal-content { inline-size: 100%; }
.modal-content { border-radius: 18px !important; box-shadow: 0 24px 64px rgba(17, 24, 39, .22) !important; }
.modal-header { border-bottom: 1px solid var(--lk-line) !important; padding: 1.125rem 1.5rem !important; background: var(--lk-card) !important; }
.modal-footer { border-top: 1px solid var(--lk-line) !important; }
.modal-dialog-end, [dir=rtl] .modal-dialog-end {
  margin-inline: auto !important;
  align-items: center !important;
  padding-bottom: 0 !important;
  max-inline-size: 440px !important;
}
.guideline-close { inset-inline-end: 12px !important; top: 12px !important; background: var(--lk-hover) !important; }

/* Floating Setup Guide button: compact dark pill, bottom-right (clear of the sidebar menu) */
.setup-guide { inset-inline-start: auto !important; inset-inline-end: 1.5rem !important; left: auto !important; bottom: 1.5rem !important; inline-size: auto !important; z-index: 1030; }
body:has(.setup-guide) .aside-body { padding-bottom: 1.5rem !important; }
.setup-guide__button { padding: .5rem .875rem !important; gap: .5rem !important; font-size: .8125rem; }
.setup-guide__button img[src*="comment-alt-dots"] { display: none; }

/* Toasts: dark rounded cards, bottom centre */
#toast-container.toast-top-right, #toast-container.toast-top-center, #toast-container.toast-top-left {
  top: auto !important; bottom: 1.5rem !important; right: 50% !important; left: auto !important; transform: translateX(50%);
}
#toast-container > div {
  background-color: var(--lk-ink) !important;
  background-position: 16px center !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .3) !important;
  opacity: 1 !important;
  padding: 14px 20px 14px 48px !important;
  inline-size: min(420px, calc(100vw - 2rem)) !important;
}
body[data-bs-theme="dark"] #toast-container > div { background-color: #1f2937 !important; }
#toast-container > .toast-error { border-inline-start: 4px solid var(--lk-danger); }
#toast-container > .toast-success { border-inline-start: 4px solid var(--lk-success); }

/* SweetAlert confirms */
.swal2-popup { border-radius: 18px !important; padding: 1.75rem !important; }
.swal2-styled { border-radius: 999px !important; font-weight: 600 !important; padding: .625rem 1.25rem !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--lk-brand) !important; }
.swal2-styled.swal2-cancel { background: var(--lk-card) !important; color: var(--lk-ink) !important; border: 1px solid var(--lk-line-2) !important; }

/* Search modal (Ctrl K) */
.modal-content__search { border-radius: 18px !important; }
.modal-content__search .form-control { border-radius: 999px !important; }

/* Dropdown menus */
.dropdown-menu { border-radius: 12px !important; padding: .375rem !important; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--lk-hover) !important; }

/* =========================================================================
   v3 - tidy tables, sentence-case labels, payment methods page
   ========================================================================= */

/* Tables: everything left-aligned like the website; the last (actions) column
   sits on the right. Vendor tables centre most columns, which reads as ragged. */
.main-content .table th,
.main-content .table td,
.offcanvas .table th,
.offcanvas .table td { text-align: start !important; }
.main-content .table th:last-child,
.main-content .table td:last-child { text-align: end !important; }
.main-content .table td > .d-flex.justify-content-center,
.main-content .table td .table-actions.justify-content-center { justify-content: flex-start !important; }
.main-content .table td:last-child > .d-flex,
.main-content .table td:last-child .table-actions { justify-content: flex-end !important; }
.main-content .table td:first-child, .main-content .table th:first-child { inline-size: 3.5rem; color: var(--lk-muted); }
.main-content .table thead th { color: var(--lk-muted) !important; letter-spacing: .05em; }
.main-content .table td { color: var(--lk-ink); font-size: .9375rem; }

/* Sentence case for status chips and badges that come from lowercase data
   (e.g. "test", "live", "pending"). */
.badge, .lynk-chip, .payment-test, [class*="badge--"], [class*="badge-"] { text-transform: none; }
.badge::first-letter, .lynk-chip::first-letter, .payment-test::first-letter,
.booking-status::first-letter, [class*="badge--"]::first-letter, [class*="badge-"]::first-letter { text-transform: uppercase; }
.badge, .lynk-chip { display: inline-block; }

/* Chips */
.lynk-chip {
  font-size: .75rem; font-weight: 600; line-height: 1;
  padding: .3125rem .625rem; border-radius: 999px;
  background: var(--lk-hover); color: var(--lk-ink-2);
}
.lynk-chip--success { background: #e7f6ef; color: var(--lk-success); }
.lynk-chip--warning { background: #fef3e2; color: var(--lk-warning); }
body[data-bs-theme="dark"] .lynk-chip--success { background: rgba(31,157,107,.18); }
body[data-bs-theme="dark"] .lynk-chip--warning { background: rgba(180,83,9,.2); }

/* Payment methods page */
.lynk-pay-alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  border: 1px solid #f5d9a8; border-radius: 12px; background: #fff8eb; color: var(--lk-ink);
}
.lynk-pay-alert .material-symbols-outlined { color: var(--lk-warning); font-size: 1.375rem; }
.lynk-pay-alert strong { display: block; font-weight: 600; margin-bottom: .125rem; }
.lynk-pay-alert p { margin: 0; color: var(--lk-ink-2); font-size: .875rem; }
body[data-bs-theme="dark"] .lynk-pay-alert { background: rgba(180,83,9,.12); border-color: rgba(180,83,9,.35); }

.lynk-pay-group {
  font-size: .75rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em;
  color: var(--lk-muted) !important; font-family: var(--lk-body) !important; margin: .25rem 0 .75rem;
}
.lynk-pay-card {
  display: flex; align-items: center; gap: 1rem;
  block-size: 100%; padding: 1rem 1.125rem;
  background: var(--lk-card); border: 1px solid var(--lk-line); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lynk-pay-card:hover { border-color: var(--lk-line-2); box-shadow: 0 6px 18px rgba(17, 24, 39, .06); }
.lynk-pay-card.is-active { border-color: rgba(31, 157, 107, .45); }
.lynk-pay-card__logo {
  flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--lk-tint); color: var(--lk-brand);
  font-family: var(--lk-display); font-weight: 800; font-size: 1.125rem;
}
.lynk-pay-card.is-active .lynk-pay-card__logo { background: #e7f6ef; color: var(--lk-success); }
.lynk-pay-card__body { flex: 1; min-inline-size: 0; }
.lynk-pay-card__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lynk-pay-card__title h5 { margin: 0; font-size: 1rem !important; font-weight: 700 !important; color: var(--lk-ink) !important; }
.lynk-pay-card__body p { margin: .25rem 0 0; font-size: .8125rem; color: var(--lk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lynk-pay-card__actions { display: flex; align-items: center; gap: .875rem; flex: none; }
.lynk-pay-card__configure { padding: .375rem .875rem !important; font-size: .8125rem !important; }
#gateway-cards.disabled { opacity: .5; pointer-events: none; }

/* =========================================================================
   v4 - page-wide polish so every screen matches the payment methods page
   ========================================================================= */

/* Section heads inside cards: title + muted helper line */
.main-content .card > h5, .main-content .card > .border-bottom h3,
.main-content .card-body > h5:first-child { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--lk-ink) !important; }
.main-content .card p.fz-12, .main-content .card .fz-12.mb-20,
.main-content .card > p, .main-content .card-header p { color: var(--lk-muted) !important; font-size: .8125rem !important; }
.main-content .card > .border-bottom { border-color: var(--lk-line) !important; }

/* Grey inner panels become white hairline panels: no more "card inside a
   grey box inside a card". */
.main-content .card2,
.main-content div.bg-light.rounded,
.main-content div.bg-light.rounded-10,
.main-content div.bg-light.rounded-2,
.offcanvas div.bg-light.rounded,
.offcanvas .card2 {
  background: var(--lk-card) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 14px !important;
}
body[data-bs-theme="dark"] .main-content .card2,
body[data-bs-theme="dark"] .main-content div.bg-light.rounded { background: var(--lk-page) !important; }

/* Toggle rows ("Status  [switch]") */
.main-content .border.p-12.rounded.d-flex,
.main-content .border.rounded.d-flex.justify-content-between,
.main-content .form-control.d-flex.justify-content-between {
  align-items: center !important;
  min-block-size: 2.875rem;
  padding: .625rem .875rem !important;
  border: 1px solid var(--lk-line-2) !important;
  border-radius: 10px !important;
  background: var(--lk-card) !important;
}
.main-content .border.p-12.rounded.d-flex > span,
.main-content .border.rounded.d-flex.justify-content-between > span { color: var(--lk-ink-2) !important; font-size: .875rem; }
.switcher_control { box-shadow: none !important; }
.switcher_input:focus-visible + .switcher_control { outline: 3px solid rgba(19, 85, 190, .25); outline-offset: 2px; }

/* Notices: one calm style for every tinted box (info / warning / danger) */
.main-content div.bg-warning.bg-opacity-10,
.main-content div.pick-map,
.main-content div.bg-primary.bg-opacity-10.px-12,
.main-content div.bg-info.bg-opacity-10,
.main-content div.bg-danger.bg-opacity-10,
.offcanvas div.bg-warning.bg-opacity-10,
.offcanvas div.pick-map,
.offcanvas div.bg-primary.bg-opacity-10.px-12 {
  border: 1px solid #cfe0fb !important;
  border-radius: 12px !important;
  background: #f3f8ff !important;
  color: var(--lk-ink) !important;
  padding: .75rem 1rem !important;
  font-size: .8125rem !important;
  line-height: 1.5;
}
.main-content div.bg-warning.bg-opacity-10, .offcanvas div.bg-warning.bg-opacity-10,
.main-content div.pick-map.bg-warning, .offcanvas div.pick-map.bg-warning { border-color: #f5d9a8 !important; background: #fff8eb !important; }
.main-content div.bg-danger.bg-opacity-10 { border-color: #f8caca !important; background: #fef2f2 !important; }
.main-content div.bg-warning.bg-opacity-10 p, .main-content div.pick-map p,
.main-content div.bg-info.bg-opacity-10 p, .main-content div.bg-danger.bg-opacity-10 p,
.offcanvas div.pick-map p { margin: 0 !important; font-size: .8125rem !important; color: var(--lk-ink-2) !important; }
.main-content div.bg-warning.bg-opacity-10 ul, .main-content div.pick-map ul { margin: .25rem 0 0; padding-inline-start: 1.125rem; }
body[data-bs-theme="dark"] .main-content div.pick-map,
body[data-bs-theme="dark"] .main-content div.bg-info.bg-opacity-10 { background: rgba(19, 85, 190, .14) !important; border-color: rgba(19, 85, 190, .35) !important; }
body[data-bs-theme="dark"] .main-content div.bg-warning.bg-opacity-10 { background: rgba(180, 83, 9, .12) !important; border-color: rgba(180, 83, 9, .35) !important; }
.alert { border-radius: 12px !important; border-width: 1px !important; font-size: .8125rem; }
.alert-danger, .alert--danger { background: #fef2f2 !important; border-color: #f8caca !important; color: #991b1b !important; }
.alert-warning, .alert--warning { background: #fff8eb !important; border-color: #f5d9a8 !important; color: var(--lk-ink) !important; }

/* Empty states */
.main-content td .text-center img[src*="empty-state"],
.main-content .text-center > img[src*="empty-state"] { inline-size: 3rem !important; opacity: .55; margin-block-end: .5rem; }
.main-content td .text-center > span { color: var(--lk-muted); font-size: .875rem; font-weight: 500; }

/* Filter bar above tables */
.data-table-top { align-items: center; padding-block-end: 1rem; }
.search-form__input_group { border-radius: 999px !important; min-block-size: 2.5rem; padding-inline-start: .5rem; }
.search-form__input_group .material-icons { color: var(--lk-muted); font-size: 1.25rem; }
.search-form_style-two { gap: .5rem; }

/* Image upload boxes: dashed, tinted on hover */
.upload-file .upload-file__img {
  border: 1.5px dashed var(--lk-line-2) !important;
  border-radius: 12px !important;
  background: var(--lk-page) !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-file:hover .upload-file__img { border-color: var(--lk-brand) !important; background: var(--lk-tint) !important; }
.upload-file__edit, .upload-file__close { background: var(--lk-card) !important; border: 1px solid var(--lk-line-2); color: var(--lk-ink) !important; }

/* Floating save bar on long settings pages: a calm pill that does not clash
   with the Setup guide button. */
.fixed-bottom > .action-btn-wrapper {
  background: var(--lk-card) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .12) !important;
  padding: .5rem !important;
  margin: 0 1.5rem 1.25rem auto !important;
  inline-size: auto !important;
}
body:has(.fixed-bottom > .action-btn-wrapper) .setup-guide { bottom: 5.5rem !important; }
body:has(.fixed-bottom > .action-btn-wrapper) .main-content { padding-block-end: 6rem !important; }

/* "View guideline" side tab: a small round button above the setup guide */
.view-guideline-btn {
  inset: auto 1.5rem 4.75rem auto !important;
  inline-size: 2.75rem !important; block-size: 2.75rem !important;
  border-radius: 999px !important; border: 0 !important; overflow: hidden;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .18) !important;
  z-index: 1029;
}
.view-guideline-btn .btn { border-radius: 999px !important; }
.view-guideline-btn .icon { inline-size: 1.125rem; }
.view-guideline-btn-text { display: none !important; }
body:has(.fixed-bottom > .action-btn-wrapper) .view-guideline-btn { bottom: 8.75rem !important; }

/* Language tabs inside forms */
.main-content .nav--tabs.border-color-primary { gap: 1.25rem; margin-block-end: .25rem; }
.main-content .nav--tabs.border-color-primary .nav-link { font-size: .875rem; }

/* Settings cards get a little more air */
.main-content .card.p-20, .main-content .card .card-body.p-20 { padding: 1.5rem !important; }

/* Footer */
.footer .list-separator a { color: var(--lk-muted); text-decoration: none; }
.footer .list-separator a:hover { color: var(--lk-ink); }

/* Notification messages page: each message is its own card */
.lynk-msg-grid { background: transparent !important; border: 0 !important; padding: 0 !important; }
.lynk-msg-grid form > .lang-form {
  background: var(--lk-card); border: 1px solid var(--lk-line); border-radius: 14px;
  padding: 1rem 1.125rem; margin-block-end: 1rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lynk-msg-grid form > .lang-form:hover { border-color: var(--lk-line-2); box-shadow: 0 6px 18px rgba(17, 24, 39, .06); }
.lynk-msg-grid form > .lang-form > .d-flex:first-child { margin-block-end: .75rem !important; align-items: center; gap: 1rem; }
.lynk-msg-grid form > .lang-form > .d-flex:first-child b { font-family: var(--lk-display); font-weight: 700; font-size: .9375rem; color: var(--lk-ink); }
.lynk-msg-grid textarea.form-control { min-block-size: 5.5rem !important; font-size: .875rem; resize: vertical; }
.lynk-msg-grid .btn { padding: .375rem .875rem !important; font-size: .8125rem !important; }
.lynk-msg-grid form > .lang-form > .d-flex.justify-content-end { margin-block-start: .75rem !important; }
.lynk-msg-grid .switcher-toggle-card { border: 1px solid var(--lk-line); border-radius: 14px !important; padding: 1.25rem !important; }
.lynk-msg-grid .switcher-toggle-card h4 { font-size: 1rem !important; font-weight: 700 !important; }
.lynk-msg-grid .switcher-toggle-card p { margin-bottom: 0 !important; }
.lynk-pay-alert--info { border-color: #cfe0fb; background: #f3f8ff; }
.lynk-pay-alert--info .material-symbols-outlined { color: var(--lk-brand); }
body[data-bs-theme="dark"] .lynk-pay-alert--info { background: rgba(19, 85, 190, .14); border-color: rgba(19, 85, 190, .35); }

/* v4b - wrappers, headings inside cards, table edge cases */

/* Pages that use the older ".content" wrapper get the same frame as the rest */
.main-area > .content.container-fluid,
.main-area .content.container-fluid:not(.main-content .content) {
  padding: 2rem 2rem 1rem !important;
  inline-size: 100%; max-inline-size: 1440px; margin-inline: auto;
}
@media (max-width: 1199px) { .main-area .content.container-fluid { padding: 1.25rem 1rem !important; } }
.page-header-title, .page-header .page-title {
  font-family: var(--lk-display) !important; font-size: 1.75rem !important; font-weight: 800 !important;
  letter-spacing: -.02em; color: var(--lk-ink) !important; margin-bottom: 1.5rem !important;
}
.page-header { margin-bottom: 1.5rem !important; align-items: center !important; }
.page-header .text-primary.font-weight-bolder { font-size: .875rem; font-weight: 600; }

/* A page nested inside another .main-content must not add a second frame */
.main-content .main-content { padding: 0 !important; margin: 0 !important; max-inline-size: none; }
.main-content .main-content > .container-fluid { padding-inline: 0 !important; }

/* Section titles inside cards are section-sized, not page-sized */
.main-content .card .page-title,
.main-content .card .page-title-wrap h2,
.main-content .card .page-title-wrap h3,
.main-content .card-header .page-title-wrap h3 {
  font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -.01em; margin-bottom: .25rem !important;
}
.main-content .card .card-body .d-flex.justify-content-between > div > h4.page-title { font-size: 1.125rem !important; }
.main-content .card .page-title-wrap { margin-bottom: 0 !important; }
.main-content .card h3.title, .main-content .card .black-color { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--lk-ink) !important; }

/* Tables: single-column layout tables and full-width message rows */
.main-content .table th:only-child,
.main-content .table td:only-child { text-align: start !important; inline-size: auto !important; color: inherit !important; }
.main-content .table td[colspan]:not(.p-0) { text-align: center !important; color: var(--lk-muted); }
.main-content .table td:first-child, .main-content .table th:first-child { inline-size: auto; }
.main-content .table td:first-child { color: var(--lk-ink); }

/* Notification channels: tidy grouped rows */
.table-admin-channels { border: 1px solid var(--lk-line); border-radius: 14px; box-shadow: none !important; }
.table-admin-channels thead th { background: var(--lk-page) !important; }
.table-admin-channels thead th span { color: var(--lk-muted) !important; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600 !important; }
.table-admin-channels .table-toggle-btn { align-items: center; background: var(--lk-page); border-bottom: 1px solid var(--lk-line); }
.table-admin-channels .table-toggle-btn h5 { margin: 0; font-size: .9375rem !important; font-weight: 700; color: var(--lk-ink); }
.table-admin-channels .table-toggle-btn .rounded-full { display: grid; place-items: center; background: var(--lk-card) !important; border: 1px solid var(--lk-line); }
.table-admin-channels .table-toggle-btn .rounded-full i { font-size: 1rem; }
.table-admin-channels .table-custom-td { padding-block: .875rem !important; border-color: var(--lk-line) !important; }
.table-admin-channels .table-custom-td h5 { font-size: .9375rem !important; font-weight: 600; color: var(--lk-ink); margin-bottom: .125rem !important; }
.table-admin-channels .table-custom-td p { margin: 0; color: var(--lk-muted); font-size: .8125rem; }
.table-admin-channels .sl-topics { gap: 1.25rem; align-items: flex-start; text-align: start; }
.table-admin-channels .sl-topics > span { color: var(--lk-muted) !important; min-inline-size: 1.25rem; font-family: var(--lk-mono); font-size: .8125rem; padding-top: .125rem; }
.table-admin-channels .w-120 { color: var(--lk-muted); font-size: .8125rem; }
.table-admin-channels tbody tr:hover { background: transparent; }
.main-content .table-admin-channels .table td:last-child > .table-toggle-btn { justify-content: flex-start !important; flex-direction: row !important; }
.page-header-title, .page-header-title span { color: var(--lk-ink) !important; }
.main-content .statistics-card[class*="statistics-card__"], .main-content .statistics-card.border { border: 1px solid var(--lk-line) !important; background: var(--lk-card) !important; box-shadow: none !important; }