/* GlowSuite — UI KIT (Minimal UI inspired) overrides
   Version: R2.5.87_UIKIT.8
   Purpose: Override Sneat/Bootstrap defaults to match Minimal UI tokens (light).
*/

:root{
  /* Core palette (Minimal UI) */
  --ui-primary-main:#1877F2;
  --ui-primary-light:#73BAFB;
  --ui-primary-lighter:#D0ECFE;
  --ui-primary-dark:#0C44AE;

  --ui-secondary-main:#8E33FF;
  --ui-secondary-light:#C684FF;
  --ui-secondary-lighter:#EFD6FF;

  --ui-success-main:#22C55E;
  --ui-warning-main:#FFAB00;
  --ui-error-main:#FF5630;
  --ui-info-main:#00B8D9;

  --ui-grey-50:#FCFDFD;
  --ui-grey-100:#F9FAFB;
  --ui-grey-200:#F4F6F8;
  --ui-grey-300:#DFE3E8;
  --ui-grey-400:#C4CDD5;
  --ui-grey-500:#919EAB;
  --ui-grey-600:#637381;
  --ui-grey-700:#454F5B;
  --ui-grey-800:#1C252E;
  --ui-grey-900:#141A21;

  --ui-text-primary:var(--ui-grey-800);
  --ui-text-secondary:var(--ui-grey-600);
  --ui-text-disabled:var(--ui-grey-500);

  --ui-bg-default:var(--ui-grey-100);
  --ui-bg-paper:#FFFFFF;
  --ui-bg-neutral:var(--ui-grey-200);

  /* Alphas */
  --ui-divider: rgba(145,158,171,.20);
  --ui-border: rgba(145,158,171,.12);
  --ui-hover: rgba(145,158,171,.08);
  --ui-selected: rgba(145,158,171,.16);
  --ui-focus: rgba(145,158,171,.24);

  --ui-primary-bg: rgba(24,119,242,.08);
  --ui-primary-bg-hover: rgba(24,119,242,.16);
  --ui-backdrop: rgba(20,26,33,.80);

  /* Radius */
  --ui-radius-1: 8px;
  --ui-radius-1-5: 12px;
  --ui-radius-2: 16px;
  --ui-radius-pill: 999px;

  /* Shadows */
  --ui-shadow-card: 0 0 2px rgba(145,158,171,.20), 0 12px 24px -4px rgba(145,158,171,.12);
  --ui-shadow-dropdown: 0 0 2px rgba(145,158,171,.24), 0 20px 40px -4px rgba(145,158,171,.18);
  --ui-shadow-z8: 0 8px 16px rgba(145,158,171,.20);

  /* Glass */
  --ui-glass-bg: rgba(249,250,251,.80);
  --ui-glass-blur: blur(6px);
}

/* Typography */
html, body{
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--ui-text-primary);
  font-size: 0.94rem !important;
}

/* =============================
   Build / Version badge
   Bottom-right, subtle pill
============================= */
.sj-version-badge{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .4rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-grey-100);
  color: var(--ui-text-secondary);
  border: 1px solid var(--ui-border);
  font-weight: 500;
  font-size: .6rem;
  text-transform: none;
  letter-spacing: 0.025em;
  user-select: none;
  margin-top: 6px;
  z-index: 1;
}
.sj-version-badge::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--ui-grey-500);
    border-radius: 50%;
    display: inline-block;
}
@keyframes sj-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}
@media print{
  .sj-version-badge{ display:none !important; }
}

h1,h2,h3{
  font-family: "Barlow", "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-transform: none !important;
}

h4,h5,h6{
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  letter-spacing: -0.005em;
  font-weight: 600;
  text-transform: none !important;
}

body{
  background: var(--ui-bg-default) !important;
}

a{ color: var(--ui-primary-main); }
a:hover{ color: var(--ui-primary-dark); }

/* Layout background */
.layout-wrapper, .layout-container, .layout-page, .content-wrapper{ background: transparent !important; }
.container-p-y{ padding-top: 8px !important; padding-bottom: 64px !important; }

/* Navbar (glass) */
#layout-navbar.navbar{
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Search input in navbar */
#layout-navbar #navbar-collapse{ width: 100%; }
/*
  IMPORTANT:
  Only the LEFT navbar group (the one that contains the search input) should grow.
  The RIGHT group (language + user) must stay pinned to the far-right.
  A previous selector was too broad and made the right group flex:1, shifting it left.
*/
#layout-navbar #navbar-collapse > .navbar-nav.align-items-center.flex-grow-1{
  flex: 1 1 auto;
  min-width: 0;
}
#layout-navbar #navbar-collapse > ul.navbar-nav{
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Full-width pill that expands until the language (globe) icon */
#layout-navbar .sj-searchbar{
  display:flex;
  align-items:center;
  width: 100%;
  background: var(--ui-bg-neutral) !important;
  border: 1px solid rgba(145,158,171,.20) !important;
  border-radius: var(--ui-radius-pill) !important;
  padding: .55rem .9rem !important;
  height: 40px !important;
}

/* Blue magnifier icon */
#layout-navbar .sj-searchbar .bx-search{ color: var(--ui-primary-main) !important; }

/* Input inside the pill */
#layout-navbar .sj-searchbar #sjNavSearch{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 40px !important;
  font-weight: 600;
  color: var(--ui-text-primary);
  width: 100%;
  min-width: 0;
}
#layout-navbar .sj-searchbar #sjNavSearch::placeholder{ color: rgba(99,115,129,.85); }
#layout-navbar .sj-searchbar #sjNavSearch:focus{ box-shadow: none !important; }

/* Focus ring on wrapper */
#layout-navbar .sj-searchbar:focus-within{
  box-shadow: 0 0 0 .25rem rgba(24,119,242,.16) !important;
  border-color: rgba(24,119,242,.45) !important;
}

/* Avatar */
.avatar img.rounded-circle{ border-radius: 999px !important; }

/* Sidebar */
#layout-menu{
  background: var(--ui-bg-paper) !important;
  border-right: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}
#layout-menu .menu-header-text{
  color: var(--ui-grey-500) !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none !important;
}

/* Brand section */
#layout-menu .app-brand{
  position: relative;
  border-bottom: 1px solid rgba(145,158,171,.12);
  height: auto !important;
  min-height: 80px;
}

/* Tenant brand (logo + name) - Modern Card Style */
#layout-menu .app-brand {
    padding: 0.25rem 0.5rem 0 !important;
    border-bottom: none !important;
    min-height: auto !important;
}
#layout-menu .app-brand-link.uikit-brand-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 4px 10px 4px !important;
  width: 100% !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(145,158,171,0.04);
}
#layout-menu .app-brand-link.uikit-brand-link:hover {
    background: rgba(145,158,171,0.02);
}
#layout-menu .uikit-tenant-mark{
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 1;
}
#layout-menu .uikit-tenant-mark img{
  width: 180px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display:block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.05));
  transition: transform 0.3s ease;
}
#layout-menu .app-brand-link.uikit-brand-link:hover .uikit-tenant-mark img {
    transform: scale(1.03);
}
#layout-menu .uikit-tenant-meta{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
#layout-menu .uikit-tenant-title{
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.1;
  color: var(--ui-grey-700);
  margin-bottom: 2px;
}
#layout-menu .uikit-tenant-subtitle{
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ui-grey-500);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Menu items Modern Mockup */
#layout-menu .menu-inner{ padding: 0rem 1rem .75rem !important; }
#layout-menu .menu-item .menu-link{
  border-radius: 999px !important;
  min-height: 48px;
  padding-top: .65rem !important;
  padding-bottom: .65rem !important;
  padding-left: 1rem !important;
  padding-right: 1.25rem !important;
  margin-right: 8px !important;
  color: rgba(99,115,129,.90) !important;
  font-weight: 500;
  font-size: 0.96rem;
  transition: all 0.2s ease-in-out;
}
/* Sub-menus indenting, lowered font weight, and bullet removal */
#layout-menu .menu-sub .menu-link::before {
  display: none !important;
}
#layout-menu .menu-sub .menu-link {
  padding-left: 3.2rem !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  min-height: 34px !important;
}
#layout-menu .menu-item .menu-link:hover{
  background: transparent !important;
  color: var(--ui-primary-main) !important;
}
/* When a sub-menu parent is open (but not the active leaf), keep it clean */
#layout-menu .menu-item.open:not(.active) > .menu-link {
  background: rgba(145,158,171,.04) !important;
  color: var(--ui-text-primary) !important;
}

/* Sub-menus indenting */
#layout-menu .menu-sub .menu-link {
  padding-left: 3.2rem !important;
}

/* Active state (The beautiful blue bubble from the mockup) */
#layout-menu .menu-item.active > .menu-link {
  background: var(--ui-primary-main) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(24,119,242,.40) !important;
}
/* Remove vertical active indicator line from original template (total wipe) */
#layout-menu .menu-item.active > .menu-link::before,
#layout-menu .menu-item.active > .menu-link::after,
#layout-menu .menu-item.active::before,
#layout-menu .menu-item.active::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
}
#layout-menu .menu-item.active > .menu-link:hover {
  background: var(--ui-primary-dark) !important;
}
/* Active SVG icons keep original color (GlowSuite Modern Sidebar) */
#layout-menu .menu-item.active > .menu-link .menu-icon-img,
#layout-menu .menu-item.active > .menu-link i.menu-icon {
  filter: none !important;
  /* color: #fff !important; -- Removed to keep original colors */
}


/* Sidebar collapse toggle button (main sidebar toggle to hide/show sidebar) */
#layout-menu .app-brand .layout-menu-toggle{
  position: absolute;
  right: .5rem;
  top: .75rem;
  margin: 0 !important;
  border-radius: 12px;
}

/* Kill Sneat's native accordion arrow */
#layout-menu .menu-link.menu-toggle::after {
  display: none !important;
}

/* Custom circular + toggle button (real element) */
#layout-menu .sj-menu-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid var(--ui-primary-main) !important;
  color: var(--ui-primary-main) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(79,142,247,.20) !important;
  transition: transform 0.25s ease, border-color 0.2s ease, color 0.2s ease !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
#layout-menu .menu-item.open > .menu-link .sj-menu-toggle-btn {
  transform: rotate(45deg) !important;
  border-color: #f7584f !important;
  color: #f7584f !important;
  box-shadow: 0 1px 4px rgba(247,88,79,.20) !important;
}
/* Keep white bg even when parent link is in active blue-bubble state */
#layout-menu .menu-item.active > .menu-link .sj-menu-toggle-btn,
#layout-menu .menu-link .sj-menu-toggle-btn {
  background: #fff !important;
}

/* Cards */
.card{
  border: 0 !important;
  border-radius: var(--ui-radius-2) !important;
  box-shadow: var(--ui-shadow-card) !important;
  background: var(--ui-bg-paper) !important;
}
.card .card-header{
  background: transparent !important;
  min-height: 56px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  border-bottom: 0 !important;
  padding: 12px 24px !important;
}
.card .card-body{ padding: 24px !important; }

/* Sections inside cards */
hr, .dropdown-divider{
  border-top: 1px dashed rgba(145,158,171,.40) !important;
}

/* Tables & list views (UI KIT fidelity) */
.table{
  color: var(--ui-text-primary);
  margin-bottom: 0 !important;
}
.table thead th{
  background: #d0ecfe !important;
  color: #1c252e !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none !important;
  padding: 16px 16px !important;
  border-bottom: none !important;
}
.table tbody td{
  border-color: rgba(145,158,171,.08) !important;
  padding: 16px 16px !important;
  vertical-align: middle;
  color: #454f5b;
}
.table tbody tr td:first-child, 
.table thead tr th:first-child { padding-left: 24px !important; }
.table tbody tr td:last-child, 
.table thead tr th:last-child { padding-right: 24px !important; }

/* Status Dot Badge */
.uikit-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #f4f6f8;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
}
.uikit-status-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #919eab;
}
.uikit-status-dot.is-active { color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.uikit-status-dot.is-active::before { background: #22c55e; }

/* Avatar with Status Dot */
.uikit-avatar-wrapper { position: relative; display: inline-block; }
.uikit-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}
.uikit-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #22c55e;
}

/* WhatsApp Icon */
.uikit-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.uikit-whatsapp-link:hover { color: #22c55e; }
.uikit-whatsapp-icon { color: #22c55e; font-size: 1.1rem; }

/* Action Buttons Modern */
.uikit-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
    transition: all 0.2s;
    background: transparent;
}
.uikit-btn-action.btn-edit { color: #2477f2; border-color: rgba(36, 119, 242, 0.15); }
.uikit-btn-action.btn-edit:hover { background: rgba(36, 119, 242, 0.05); }
.uikit-btn-action.btn-schedule { color: #2477f2; border-color: rgba(36, 119, 242, 0.25); }
.uikit-btn-action.btn-schedule:hover { background: rgba(36, 119, 242, 0.05); border-color: rgba(36, 119, 242, 0.4); }
.uikit-btn-action.btn-view { color: #00b8d9; border-color: rgba(0, 184, 217, 0.15); }
.uikit-btn-action.btn-view:hover { background: rgba(0, 184, 217, 0.05); }
.uikit-btn-action.btn-copy { color: #637381; border-color: rgba(145, 158, 171, 0.15); }
.uikit-btn-action.btn-copy:hover { background: rgba(145, 158, 171, 0.05); }
.uikit-btn-action.btn-delete { color: #ff5630; border-color: rgba(255, 86, 48, 0.15); }
.uikit-btn-action.btn-delete:hover { background: rgba(255, 86, 48, 0.05); }

/* Soft Badges */
.badge-soft-success { background: rgba(34, 197, 94, 0.12) !important; color: #22c55e !important; border-radius: 8px; font-weight: 700; padding: 6px 12px; }
.badge-soft-warning { background: rgba(255, 171, 0, 0.12) !important; color: #ffab00 !important; border-radius: 8px; font-weight: 700; padding: 6px 12px; }
.table tbody tr{
  transition: background-color .15s ease;
}
.uikit-time-input-group {
    background: #fff;
    border: 1px solid rgba(145, 158, 171, 0.2);
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    padding-right: 12px;
    transition: all 0.2s;
    max-width: 130px;
}
.uikit-time-input-group:focus-within {
    border-color: #2477f2;
    box-shadow: 0 0 0 3px rgba(36, 119, 242, 0.1);
}
.uikit-time-input-group input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
}
.uikit-time-input-group i {
    color: #2477f2;
    font-size: 1.1rem;
}
.uikit-time-input-group.is-disabled {
    background: #f4f6f8;
    opacity: 0.6;
}
.table tbody tr:hover{
  background: rgba(145,158,171,.08) !important;
}
.table tbody tr.table-active,
.table tbody tr.active{
  background: rgba(24,119,242,.08) !important;
}

/* Table containers inside cards */
.card > .table-responsive,
.card > .table-responsive-sm,
.card > .table-responsive-md,
.card > .table-responsive-lg,
.card > .table-responsive-xl{
  border-radius: var(--ui-radius-2) !important;
  /* Allow horizontal scrolling inside card tables (PC + mobile)
     while keeping rounded corners. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card > .table-responsive .table{
  margin: 0 !important;
}

/* POS: allow item autocomplete dropdowns to be visible (table wrapper clips Y overflow by default) */
.card > .table-responsive.pos-ticket-tablewrap{
  overflow-y: visible !important;
}

/* Action buttons inside tables */
.table .btn.btn-sm{
  border-radius: var(--ui-radius-pill) !important;
  font-weight: 400;
  height: 32px;
  padding: .25rem .8rem !important;
}

/* Toolbars / filters above tables */
.uikit-toolbar,
.card .card-body form.row.g-2{
  align-items: end;
}
.card .card-body form.row.g-2 .form-control:not(textarea),
.card .card-body form.row.g-2 .form-select{
  min-height: 44px;
}
.card .card-body form.row.g-2 .btn{
  min-height: 44px;
}

/* Pagination (if/when used) */
.pagination{
  gap: 6px;
}
.page-link{
  border-radius: 10px !important;
  border-color: rgba(145,158,171,.20) !important;
  color: var(--ui-text-primary) !important;
  font-weight: 800;
}
.page-link:hover{
  background: rgba(145,158,171,.08) !important;
}
.page-item.active .page-link{
  background: var(--ui-primary-main) !important;
  border-color: var(--ui-primary-main) !important;
  color: #fff !important;
}

/* DataTables (Sneat vendor) - keep it Minimal UI styled */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius: var(--ui-radius-1-5) !important;
  border-color: rgba(145,158,171,.20) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 10px !important;
}

/* Forms (UI KIT fidelity) */
.form-label{ font-weight: 600; color: var(--ui-text-primary); margin-bottom: .35rem; text-transform: none !important; }
.form-text{ color: rgba(99,115,129,.92) !important; }

.form-control:not(textarea), .form-select, .input-group-text{
  border-radius: var(--ui-radius-pill) !important;
  border-color: rgba(145,158,171,.20) !important;
}
.input-group > .form-control:not(:last-child){ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:first-child{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

textarea.form-control{
  border-radius: var(--ui-radius-1-5) !important;
  border-color: rgba(145,158,171,.20) !important;
}

.form-control, .form-select{
  background: var(--ui-bg-paper) !important;
  color: var(--ui-text-primary) !important;
  padding: .6rem 1.25rem !important;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.92rem !important;
}

textarea.form-control{ min-height: 110px; padding: .7rem .85rem !important; font-weight: 500; }

.form-control::placeholder{ color: rgba(99,115,129,.85) !important; }
.form-select{ padding-right: 2.15rem !important; }

.input-group-text{
  background: var(--ui-bg-neutral) !important;
  color: var(--ui-text-secondary) !important;
  font-weight: 700;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(24,119,242,.45) !important;
  box-shadow: 0 0 0 .25rem rgba(24,119,242,.16) !important;
}

/* Disabled */
.form-control:disabled, .form-select:disabled, .form-control[readonly]{
  background: var(--ui-bg-neutral) !important;
  color: rgba(99,115,129,.95) !important;
}

/* Validation */
.is-invalid.form-control, .is-invalid.form-select{
  border-color: rgba(255,86,48,.55) !important;
}
.is-invalid.form-control:focus, .is-invalid.form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(255,86,48,.14) !important;
}
.invalid-feedback{ font-weight: 600; }

/* Checkboxes / radios / switches */
.form-check-input{
  width: 18px; height: 18px;
  border-radius: 6px !important;
  border-color: rgba(145,158,171,.35) !important;
}
.form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(24,119,242,.14) !important;
}
.form-check-input:checked{
  background-color: var(--ui-primary-main) !important;
  border-color: rgba(24,119,242,.65) !important;
}
.form-check-input[type="radio"]{ border-radius: 999px !important; }

/* Time input cleanup (remove native double clock) */
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
input[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* Icon Badges for Titles */
.uikit-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.uikit-badge-icon.bg-soft-primary { background: rgba(105, 108, 255, 0.1); color: #696cff; }
.uikit-badge-icon.bg-soft-success { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.uikit-badge-icon.bg-soft-info { background: rgba(0, 184, 217, 0.1); color: #00b8d9; }

/* Custom Inputs for Booking Admin */
.uikit-link-input {
    background: #f8fafc !important;
    border: 1px solid rgba(145, 158, 171, 0.15) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem;
    color: #454f5b !important;
}

.form-switch .form-check-input{
  width: 42px; height: 22px;
  border-radius: 999px !important;
}

/* Fix for staggered switches in roles/forms */
.form-check.form-switch {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding-left: 0 !important;
  margin-bottom: 0.5rem !important;
}
.form-check.form-switch .form-check-input {
  margin-left: 0 !important;
  float: none !important;
  flex-shrink: 0;
}
.form-check.form-switch .form-check-label {
  margin-top: 0 !important;
  cursor: pointer;
  line-height: 1.2;
}

/* Small form controls keep UI KIT radius */
.form-control-sm, .form-select-sm{
  border-radius: 10px !important;
  min-height: 38px;
  padding: .45rem .75rem !important;
}

/* Buttons */
.btn{ border-radius: var(--ui-radius-pill) !important; font-weight: 400 !important; font-size: 0.92rem !important; }
.btn + .btn, .btn + a.btn, a.btn + .btn, a.btn + a.btn { margin-left: 10px !important; }
.btn-primary{
  background: var(--ui-primary-main) !important;
  border-color: var(--ui-primary-main) !important;
}
.btn-primary:hover{ background: var(--ui-primary-dark) !important; border-color: var(--ui-primary-dark) !important; }
.btn-outline-primary{ color: var(--ui-primary-main) !important; border-color: rgba(24,119,242,.45) !important; }
.btn-outline-primary:hover{ background: rgba(24,119,242,.08) !important; }
.btn-outline-secondary{ border-color: rgba(145,158,171,.28) !important; }
.btn-outline-danger{ border-color: rgba(255,86,48,.45) !important; color: var(--ui-error-main) !important; }
.btn-outline-danger:hover{ background: rgba(255,86,48,.08) !important; }

/* Alerts */
.alert{
  border-radius: var(--ui-radius-1-5) !important;
  border: 1px solid rgba(145,158,171,.12) !important;
  border-radius: var(--ui-radius-1-5) !important;
}

/* =============================
   Pixel Perfect Search Bar
   ============================= */
.uikit-search-pixel-perfect {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(145, 158, 171, 0.1);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
    transition: all 0.3s ease;
}
.uikit-search-pixel-perfect:focus-within {
    box-shadow: 0 15px 40px rgba(24, 119, 242, 0.12);
    border-color: rgba(24, 119, 242, 0.2);
}
.uikit-search-pixel-perfect .search-icon-box {
    background: #f0f7ff;
    border-radius: 14px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary-main);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.uikit-search-pixel-perfect .search-content {
    flex: 1;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    min-width: 0;
    height: 48px;
}
.uikit-search-pixel-perfect .search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ui-grey-800);
    height: 24px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.uikit-search-pixel-perfect .search-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.uikit-search-pixel-perfect .search-input::placeholder {
    color: var(--ui-grey-800);
    opacity: 1;
}
.uikit-search-pixel-perfect .search-subtitle {
    font-size: 0.75rem;
    color: var(--ui-grey-500);
    font-weight: 500;
    margin-top: -2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uikit-search-pixel-perfect .search-separator {
    width: 1px;
    height: 30px;
    background: rgba(145, 158, 171, 0.2);
    margin: 0 5px;
}
.uikit-search-pixel-perfect .filter-btn-box {
    background: #f0f7ff;
    border-radius: 14px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary-main);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    flex-shrink: 0;
}
.uikit-search-pixel-perfect .filter-btn-box:hover {
    background: #e1efff;
    transform: scale(1.05);
}

/* Dropdown menus */
.dropdown-menu{
  border-radius: var(--ui-radius-1-5) !important;
  border: 1px solid rgba(145,158,171,.12) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
}
.dropdown-item{ border-radius: 10px; font-weight: 600; }
.dropdown-item:active{ background: var(--ui-primary-main) !important; }

/* Badges */
.badge, .badge-soft{
  border-radius: var(--ui-radius-pill) !important;
  font-weight: 800 !important;
}

/* Soft labels (bg-label-*) — match Minimal UI 'soft' chips */
.badge.bg-label-primary{ background: rgba(24,119,242,.16) !important; color: var(--ui-primary-main) !important; border: 1px solid rgba(24,119,242,.24) !important; }
.badge.bg-label-secondary{ background: rgba(142,51,255,.16) !important; color: var(--ui-secondary-main) !important; border: 1px solid rgba(142,51,255,.24) !important; }
.badge.bg-label-success{ background: rgba(34,197,94,.16) !important; color: var(--ui-success-main) !important; border: 1px solid rgba(34,197,94,.24) !important; }
.badge.bg-label-danger{ background: rgba(255,86,48,.16) !important; color: var(--ui-error-main) !important; border: 1px solid rgba(255,86,48,.24) !important; }
.badge.bg-label-info{ background: rgba(0,184,217,.16) !important; color: var(--ui-info-main) !important; border: 1px solid rgba(0,184,217,.24) !important; }
.badge.bg-label-warning{ background: rgba(255,171,0,.16) !important; color: #B76E00 !important; border: 1px solid rgba(255,171,0,.24) !important; }

/* Modal backdrop (match Minimal UI overlay) */
.modal-backdrop.show{ opacity: 1 !important; background: var(--ui-backdrop) !important; }

/* Modal (UI KIT) */
.modal-content{
  border-radius: var(--ui-radius-2) !important;
  border: 1px solid rgba(145,158,171,.16) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-header, .modal-footer{
  padding: 18px 24px !important;
  background: transparent !important;
  border-color: rgba(145,158,171,.12) !important;
}
.modal-header{ border-bottom: 1px dashed rgba(145,158,171,.40) !important; padding-right: 56px !important; }
.modal-footer{ border-top: 1px dashed rgba(145,158,171,.40) !important; gap: 12px !important; }
.modal-title{ font-weight: 600 !important; letter-spacing: -0.01em; color: var(--ui-grey-800); text-transform: none !important; }
.modal-body{ padding: 24px; }
.modal .btn-close{
  background-color: #1877f2 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3) !important;
  transition: all 0.25s ease !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  inset-block-start: 12px !important;
  inset-inline-end: 12px !important;
  margin: 0 !important;
  z-index: 1080 !important;
  transform: none !important;
}
.modal .btn-close::before {
  display: none !important;
  content: none !important;
}
.modal .btn-close:hover{
  background-color: #115ec9 !important;
  transform: scale(1.1) rotate(90deg) !important;
  opacity: 1 !important;
}
.modal .btn-close:focus,
.modal .btn-close:active {
  transform: scale(1.1) rotate(90deg) !important;
  opacity: 1 !important;
  outline: 0 !important;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.5) !important;
}

/* Offcanvas */
.offcanvas{
  border-left: 1px solid rgba(145,158,171,.12) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
}


/* Utility: neutral box */
.uikit-surface{
  background: var(--ui-bg-paper);
  border: 1px solid rgba(145,158,171,.12);
  border-radius: var(--ui-radius-2);
  box-shadow: var(--ui-shadow-card);
}

/* Auth pages: make card premium */
.authentication-wrapper .card{ box-shadow: var(--ui-shadow-card) !important; border-radius: var(--ui-radius-2) !important; }

.authentication-wrapper.authentication-basic{
  position: relative;
}
.authentication-wrapper.authentication-basic::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(24,119,242,.14), transparent 60%),
    radial-gradient(780px 380px at 85% 25%, rgba(142,51,255,.12), transparent 60%),
    radial-gradient(700px 360px at 40% 90%, rgba(0,184,217,.10), transparent 60%);
}
.authentication-wrapper .card{
  border: 1px solid rgba(145,158,171,.12) !important;
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Kiosk/store small tweaks (keep existing look but unify radius + typography) */
.kiosk-topbar{ backdrop-filter: var(--ui-glass-blur) !important; -webkit-backdrop-filter: var(--ui-glass-blur) !important; }

/* ---------------------------
   Dashboard (UI KIT feel)
---------------------------- */
.uikit-dashboard-title{
  font-family: "Barlow", "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.02em;
  color: #637381 !important;
}

.uikit-section-title{
  font-size: .95rem;
  font-weight: 800;
  color: var(--ui-text-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-left: .25rem;
}

.kpi-icon-img{ width: 22px; height: 22px; display:block; }

.uikit-kpi{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ui-radius-2);
  box-shadow: var(--ui-shadow-card);
  min-height: 200px; /* Más aire para que no se encimen */
}
.uikit-kpi::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 78% 55%, rgba(255,255,255,.45) 0 2px, transparent 2px 16px);
  opacity:.65;
  z-index: 0;
  pointer-events:none;
}
.uikit-kpi__content{ position: relative; z-index: 5; padding: 20px 20px 14px; }
.uikit-kpi__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.uikit-kpi__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.55);
}
.uikit-kpi__delta{
  font-weight: 900;
  font-size: .82rem;
  padding: .2rem .55rem;
  border-radius: var(--ui-radius-pill);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  color: var(--ui-text-primary);
  display:flex; align-items:center; gap:.25rem;
}
.uikit-kpi__delta.is-up{ color: var(--ui-success-main); }
.uikit-kpi__delta.is-down{ color: var(--ui-error-main); }
.uikit-kpi__delta.is-flat{ color: var(--ui-text-secondary); }
.uikit-kpi__delta-icon{ font-size: .9rem; line-height: 1; }
.uikit-kpi__title{ font-weight: 800; color: rgba(28,37,46,.85); font-size: .95rem; }
.uikit-kpi__value{ font-weight: 900; font-size: 2.1rem; letter-spacing: -0.04em; margin-top: 6px; line-height: 1; }
.uikit-kpi__spark{ 
  position: absolute;
  bottom: 0; 
  left: 0;
  right: 0;
  min-height: 160px; 
  line-height: 0; 
  pointer-events: none;
  z-index: 1;
}

.kpi-blue{ background: linear-gradient(135deg, rgba(208,236,254,.95), rgba(115,186,251,.55)); }
.kpi-purple{ background: linear-gradient(135deg, rgba(239,214,255,.95), rgba(198,132,255,.55)); }
.kpi-yellow{ background: linear-gradient(135deg, rgba(255,243,204,.92), rgba(255,171,0,.38)); }
.kpi-red{ background: linear-gradient(135deg, rgba(255,221,214,.92), rgba(255,86,48,.32)); }

.uikit-mini-kpi{ display:flex; align-items:flex-start; gap: 14px; }
.uikit-mini-kpi__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
}
.uikit-mini-kpi__meta{ flex: 1 1 auto; min-width: 0; }
.uikit-mini-kpi__title{ font-weight: 800; color: rgba(28,37,46,.80); }
.uikit-mini-kpi__value{ font-weight: 900; font-size: 1.25rem; margin-top: 2px; }
.uikit-mini-kpi__hint{ font-size: .8rem; }

/* Modern Mini KPI */
.uikit-mini-kpi-modern{ 
  position: relative; 
  overflow: hidden; 
  border: none; 
  box-shadow: var(--ui-shadow-card); 
  transition: transform .2s ease; 
  min-height: 120px;
  background: #fff;
}
.uikit-mini-kpi-modern:hover{ transform: translateY(-3px); }
.uikit-mini-kpi-modern__content{ 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  position: relative; 
  z-index: 5; 
  padding: 0;
}
.uikit-mini-kpi-modern__left{ display: flex; gap: 16px; flex: 1; }
.uikit-mini-kpi-modern__icon-wrapper{ position: relative; flex-shrink: 0; width: 54px; height: 54px; }
.uikit-mini-kpi-modern__icon{ 
  width: 54px; height: 54px; 
  border-radius: 18px; 
  display: flex; align-items: center; justify-content: center;
}
.uikit-mini-kpi-modern__icon img{ width: 28px !important; height: 28px !important; object-fit: contain; }
.uikit-mini-kpi-modern__trend-indicator{
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; border: 2px solid #fff;
  z-index: 2;
}
.uikit-mini-kpi-modern__info{ display: flex; flex-direction: column; gap: 2px; }
.uikit-mini-kpi-modern__title{ font-weight: 700; font-size: 0.95rem; color: #1c252e; opacity: 0.8; }
.uikit-mini-kpi-modern__value{ font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.2; }
.uikit-mini-kpi-modern__badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 700; width: fit-content; margin-top: 6px;
}
.uikit-mini-kpi-modern__right{ 
  position: absolute; 
  right: -10px; 
  bottom: -5px; 
  width: 140px; 
  height: 80px; 
  pointer-events: none; 
  z-index: 1;
}
.uikit-mini-kpi-modern__sparkline{ width: 100%; height: 100%; }
.uikit-mini-kpi-modern__bg-icon{
  position: absolute; 
  right: 5px; 
  bottom: 5px;
  width: 90px !important; 
  height: 90px !important; 
  opacity: 0.06;
  filter: grayscale(1);
  object-fit: contain;
}

.bg-light-success{ background-color: rgba(34, 197, 94, 0.12) !important; }
.bg-light-info{ background-color: rgba(0, 184, 217, 0.12) !important; }
.bg-light-warning{ background-color: rgba(255, 171, 0, 0.12) !important; }

.text-success{ color: #00ab55 !important; }
.text-info{ color: #00b8d9 !important; }
.text-warning{ color: #ffab00 !important; }

/* ApexCharts tooltip (glass) */
.apexcharts-tooltip{
  background: var(--ui-glass-bg) !important;
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  border: 1px solid rgba(145,158,171,.16) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
  border-radius: var(--ui-radius-1-5) !important;
  color: var(--ui-text-primary) !important;
}
.apexcharts-tooltip-title{
  background: transparent !important;
  border-bottom: 1px dashed rgba(145,158,171,.40) !important;
  margin-bottom: .35rem;
}
.kiosk-card{ box-shadow: var(--ui-shadow-card) !important; border-radius: var(--ui-radius-2) !important; }

/* Footer */
.content-footer.footer{
  background: transparent !important;
  border-top: 1px solid rgba(145,158,171,.12) !important;
}

/* Sneat shadows/overlays neutralize */
.menu-inner-shadow{ display:none !important; }

/* Small rounded icon buttons in navbar */
.navbar-nav .nav-link{
  border-radius: 10px;
}

/* SweetAlert2: match typography */
.swal2-popup{ font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; border-radius: 16px !important; }
.swal2-styled.swal2-confirm{ border-radius: var(--ui-radius-pill) !important; }
.swal2-styled.swal2-cancel{ border-radius: var(--ui-radius-pill) !important; }

/* Toasts (Bootstrap) */
.toast{
  border-radius: var(--ui-radius-1-5) !important;
  border: 1px solid rgba(145,158,171,.12) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* SweetAlert2: Minimal UI look */
.swal2-popup{
  border: 1px solid rgba(145,158,171,.16) !important;
  box-shadow: var(--ui-shadow-dropdown) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.swal2-title{ font-family: "Barlow","DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; font-weight: 900 !important; }
.swal2-html-container{ color: var(--ui-text-secondary) !important; }
.swal2-styled{ font-weight: 400 !important; }


/* ---------------------------
   UI KIT Reskin5: Final polish
---------------------------- */

/* Text helpers */
.text-muted{ color: var(--ui-text-secondary) !important; }
.text-secondary{ color: var(--ui-text-secondary) !important; }

/* Breadcrumbs */
.breadcrumb{
  background: transparent !important;
  padding: .25rem 0 !important;
  margin-bottom: .75rem !important;
}
.breadcrumb-item + .breadcrumb-item::before{
  color: rgba(99,115,129,.65) !important;
}
.breadcrumb-item a{ color: rgba(99,115,129,.95) !important; font-weight: 700; text-decoration: none; }
.breadcrumb-item a:hover{ color: var(--ui-primary-main) !important; }
.breadcrumb-item.active{ color: rgba(28,37,46,.75) !important; font-weight: 800; }

/* Nav tabs / pills */
.nav-tabs{
  border-bottom: 0 !important;
  gap: .5rem;
}
.nav-tabs .nav-link{
  border: 1px solid rgba(145,158,171,.20) !important;
  border-radius: 12px !important;
  font-weight: 800;
  color: rgba(28,37,46,.85) !important;
  padding: .55rem .9rem !important;
  background: rgba(255,255,255,.65);
}
.nav-tabs .nav-link:hover{ background: rgba(145,158,171,.08) !important; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  background: rgba(24,119,242,.08) !important;
  border-color: rgba(24,119,242,.30) !important;
  color: var(--ui-primary-main) !important;
}

.nav-pills{ gap: .5rem; }
.nav-pills .nav-link{
  border-radius: 12px !important;
  font-weight: 800;
  color: rgba(28,37,46,.85) !important;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(145,158,171,.20);
}
.nav-pills .nav-link:hover{ background: rgba(145,158,171,.08) !important; }
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
  background: var(--ui-primary-main) !important;
  border-color: var(--ui-primary-main) !important;
  color: #fff !important;
}

/* List group */
.list-group{
  border-radius: var(--ui-radius-2) !important;
  border: 1px solid rgba(145,158,171,.12) !important;
  overflow: hidden;
}
.list-group-item{
  border-color: rgba(145,158,171,.12) !important;
  padding: .85rem 1rem !important;
}
.list-group-item-action{ font-weight: 700; }
.list-group-item-action:hover{ background: rgba(145,158,171,.08) !important; }

/* Autocomplete dropdowns (POS client/item) */
.sj-autocomplete{
  background: var(--ui-bg-paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--ui-shadow-dropdown);
  opacity: 1 !important;
}
.sj-autocomplete .list-group-item{
  background: var(--ui-bg-paper) !important;
}
.sj-autocomplete .list-group-item-action:hover{
  background: rgba(145,158,171,.08) !important;
}

/* Accordions */
.accordion-item{
  border: 1px solid rgba(145,158,171,.12) !important;
  border-radius: var(--ui-radius-2) !important;
  overflow: hidden;
  box-shadow: var(--ui-shadow-card);
}
.accordion-button{
  font-weight: 900;
  padding: 1rem 1.25rem;
}
.accordion-button:not(.collapsed){
  background: rgba(24,119,242,.08) !important;
  color: var(--ui-primary-main) !important;
}
.accordion-body{ padding: 1.25rem; }

/* Progress */
.progress{ height: 10px; border-radius: 999px; background: rgba(145,158,171,.16) !important; }
.progress-bar{ border-radius: 999px; }

/* Outlined card (paper outlined) */
.card.border,
.card.uikit-outline{
  border: 1px solid rgba(145,158,171,.12) !important;
  box-shadow: none !important;
}

/* Page header pattern */
.uikit-pagehead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.uikit-pagehead h4,
.uikit-pagehead h5{
  margin: 0;
  font-weight: 900;
  color: #1c252e;
}
.uikit-pagehead-icon {
    width: 48px;
    height: 48px;
    background: rgba(105, 108, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #696cff;
    font-size: 1.5rem;
}
.uikit-pagehead-info { flex: 1; }
.uikit-pagehead-subtitle { color: #637381; font-size: 0.85rem; margin-top: 2px; }

/* Modern Search Bar */
.uikit-search-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 10px 12px 10px 16px;
    border: 1px solid rgba(145, 158, 171, 0.2);
    border-radius: 12px;
    min-width: 300px;
    min-height: 45px;
}
.uikit-search-wrapper input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.9rem;
    color: #1c252e;
}
.uikit-search-wrapper i { color: #919eab; }

/* Reduce overly strong demo gradients from vendor (keep clean) */
.bg-menu-theme .menu-inner > .menu-item > .menu-link:focus{ outline: none; }

/* ---------------------------
   UI KIT Reskin7: Settings 2-column layout
---------------------------- */
.uikit-settings-card .card-body{
  padding: 20px !important;
}
.uikit-settings-card h6{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ---------------------------
   UI KIT: Avatars & Circles
---------------------------- */
.uikit-avatar-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

.uikit-avatar-circle-sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

.uikit-avatar-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    z-index: 5 !important;
}

/* Status Badge with Dot (Table Cell) */
.uikit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
}
.uikit-status-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.uikit-status-badge.is-active { background: rgba(34, 197, 94, 0.1); color: #118d57; }
.uikit-status-badge.is-active .dot { background: #22c55e; }
/* ---------------------------
   UI KIT: Floating Navbar (Mobile Header)
---------------------------- */
/* ---------------------------
   UI KIT: Floating Navbar (Mobile Header)
---------------------------- */
/* ---------------------------
   UI KIT: Floating Navbar (Mobile Header)
---------------------------- */
@media (max-width: 1199.98px) {
    .layout-navbar {
        background: #fff !important;
        border-radius: 20px !important;
        margin: 15px !important;
        padding: 10px 18px !important;
        
        /* Cross-Browser Shadows */
        -webkit-box-shadow: 0 12px 40px rgba(145, 158, 171, 0.18) !important;
        -moz-box-shadow: 0 12px 40px rgba(145, 158, 171, 0.18) !important;
        box-shadow: 0 12px 40px rgba(145, 158, 171, 0.18) !important;
        
        border: 1px solid rgba(145, 158, 171, 0.08) !important;
        width: calc(100% - 30px) !important;
        position: fixed !important;
        top: 0;
        z-index: 1075;
        
        /* Smooth Rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        
        transition: all 0.3s ease;
    }
    .content-wrapper { padding-top: 85px !important; }

    .nav-lang-btn {
        background: #f4f6f8 !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 6px 14px !important;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 0.85rem;
        color: #1c252e;
        
        /* Safari Appearance Reset */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        
        transition: all 0.2s;
    }
    .nav-lang-btn:hover { background: #eef1f4 !important; }

    .badge-notifications {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        background: #ff5630 !important;
        color: #fff !important;
        font-size: 10px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        font-weight: 800 !important;
        
        -webkit-box-shadow: 0 2px 4px rgba(255, 86, 48, 0.4) !important;
        box-shadow: 0 2px 4px rgba(255, 86, 48, 0.4) !important;
        z-index: 10 !important;
    }

    .uikit-avatar-nav {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        padding: 2px;
        border: 2px solid rgba(36, 119, 242, 0.4);
        
        /* Safari Rounding Fix */
        overflow: hidden;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .uikit-avatar-nav img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .uikit-avatar-nav .dot {
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 11px;
        height: 11px;
        background: #22c55e;
        border: 2px solid #fff;
        border-radius: 50%;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
}
/* =============================
   POS (Point of Sale) Enhancements
============================= */
.pos-ticket-tablewrap .table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #f1f5f9 !important;
    color: #637381 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
}

.pos-ticket-tablewrap .table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.pos-item-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: #f8fafc;
    color: #637381;
}

.pos-summary-card {
    border-radius: 20px !important;
    border: 2px solid #f8fafc !important;
}

.pos-total-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ui-primary-main);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pos-summary-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #919eab;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pos-action-bar {
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
    padding: 1.5rem;
    margin: 0 -24px -24px -24px;
    border-top: 1px solid #f1f5f9;
}

/* Custom styles for POS selects and inputs to be more pill-like */
.pos-ticket-tablewrap .form-select, 
.pos-ticket-tablewrap .form-control {
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid transparent !important;
    transition: all 0.2s;
}

.pos-ticket-tablewrap .form-select:focus, 
.pos-ticket-tablewrap .form-control:focus {
    background-color: #fff !important;
    border-color: var(--ui-primary-main) !important;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1) !important;
}