/* MedCina shared shell — source of truth: pos_billing_items_selected_state */
:root {
  --mc-primary: #4252d0;
  --mc-primary-hover: #3542b8;
  --mc-secondary: #545b8a;
  --mc-secondary-container: #c2c9fe;
  --mc-on-secondary-container: #4c5381;
  --mc-surface: #fbf8ff;
  --mc-surface-container: #efecf7;
  --mc-surface-container-low: #f5f2fd;
  --mc-surface-container-lowest: #ffffff;
  --mc-on-surface: #1b1b22;
  --mc-on-surface-variant: #454653;
  --mc-outline: #757685;
  --mc-outline-variant: #c5c5d6;
  --mc-page-bg: #f1f5f9;
  --mc-error: #ba1a1a;
  --mc-radius: 0.125rem;
  --mc-radius-lg: 0.25rem;
  --mc-radius-xl: 0.5rem;
  --mc-font-body: "Hanken Grotesk", sans-serif;
  --mc-font-mono: "JetBrains Mono", monospace;
  --mc-sidebar-width: 16rem;
  --mc-sidebar-collapsed: 4rem;
  --mc-topbar-height: 3rem;
}

html.h-full,
html:not([style*="width"]) {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body.app-shell,
body.font-body.h-full.flex {
  background: var(--mc-page-bg);
  color: var(--mc-on-surface);
  font-family: var(--mc-font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Kill Stitch fixed canvas locks when present */
html[style*="1368px"],
html[style*="1032px"] {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c5d0e6;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9aa8c7;
}

/* ========== Sidebar chrome ========== */
#app-sidebar,
aside#sidebar {
  width: var(--mc-sidebar-width);
  min-width: var(--mc-sidebar-width);
  height: 100%;
  background: var(--mc-surface-container-lowest) !important;
  border-right: 1px solid var(--mc-surface-container) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  box-shadow: 0 1px 2px rgb(27 27 34 / 6%);
  font-family: var(--mc-font-body);
  transition: width 0.3s ease, min-width 0.3s ease;
}

#app-sidebar.w-16,
#app-sidebar.sidebar-collapsed,
aside#sidebar.w-16,
aside#sidebar.sidebar-collapsed {
  width: var(--mc-sidebar-collapsed) !important;
  min-width: var(--mc-sidebar-collapsed) !important;
}

#app-sidebar > div:first-child > div:first-child,
#app-sidebar .sidebar-header,
aside#sidebar .sidebar-header {
  height: 3.5rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(239 236 247 / 60%) !important;
  margin-bottom: 0 !important;
}

#app-sidebar nav,
aside#sidebar nav {
  padding: 0.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}

#app-sidebar nav a,
aside#sidebar nav a,
aside#sidebar nav .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: var(--mc-on-surface-variant) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

#app-sidebar nav a:hover,
aside#sidebar nav a:hover,
aside#sidebar nav .nav-item:hover {
  color: var(--mc-on-surface) !important;
  background: var(--mc-surface-container) !important;
}

#app-sidebar nav a.bg-\[\#4252d0\],
#app-sidebar nav a[class*="bg-[#4252d0]"],
#app-sidebar nav a.bg-primary,
aside#sidebar nav a.bg-\[\#4252d0\],
aside#sidebar nav a.bg-primary,
aside#sidebar nav .nav-item.bg-\[\#4252d0\] {
  background: var(--mc-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgb(27 27 34 / 10%);
}

#app-sidebar nav a.bg-\[\#4252d0\]:hover,
#app-sidebar nav a.bg-primary:hover,
aside#sidebar nav a.bg-primary:hover {
  background: var(--mc-primary) !important;
  color: #ffffff !important;
}

#app-sidebar nav .material-symbols-outlined,
aside#sidebar nav .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 400;
  flex-shrink: 0;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

#app-sidebar nav a.bg-\[\#4252d0\] .material-symbols-outlined,
#app-sidebar nav a.bg-primary .material-symbols-outlined,
aside#sidebar nav a.bg-primary .material-symbols-outlined {
  color: #ffffff !important;
}

#app-sidebar .sidebar-text-item,
#app-sidebar .sidebar-text,
aside#sidebar .sidebar-text-item,
aside#sidebar .sidebar-text {
  font-family: var(--mc-font-body) !important;
  font-size: 0.75rem !important;
}

#app-sidebar .font-headline,
aside#sidebar .font-headline {
  font-family: var(--mc-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--mc-on-surface) !important;
}

#app-sidebar .font-mono,
aside#sidebar .font-mono {
  font-family: var(--mc-font-mono) !important;
}

#sidebar-toggle-btn .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
}

#app-sidebar > div:last-child,
aside#sidebar .sidebar-footer {
  padding: 0.5rem !important;
  border-top: 1px solid rgb(239 236 247 / 60%) !important;
  background: rgb(245 242 253 / 40%) !important;
}

#app-sidebar > div:last-child .material-symbols-outlined,
aside#sidebar .sidebar-footer .material-symbols-outlined {
  font-size: 16px !important;
}

/* ========== Main shell ========== */
.app-main,
#main-content-wrapper.app-main,
body > .flex-1.flex.flex-col {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: 0 !important;
}

/* Scroll the page body under a sticky/in-flow top bar */
.app-main > main,
#main-content-wrapper > main,
.app-main .overflow-y-auto {
  min-height: 0;
}

.app-main > main {
  flex: 1 1 0%;
  overflow-y: auto;
}

/* Strip hybrid fixed-offset patterns when shared shell is loaded */
#main-content-wrapper.pl-64,
#main-content-wrapper.pl-16,
#main-layout-wrapper.pl-64,
#main-layout-wrapper.pl-16 {
  padding-left: 0 !important;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  min-height: 0 !important;
}

#main-top-header.fixed,
header#main-top-header,
header[data-purpose="top-navigation-bar"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: var(--mc-topbar-height) !important;
  min-height: var(--mc-topbar-height) !important;
  flex-shrink: 0;
  z-index: 20;
  gap: 0.75rem;
  overflow: hidden;
}

header[data-purpose="top-navigation-bar"] > div {
  min-width: 0;
}

header[data-purpose="top-navigation-bar"] .gap-5 {
  gap: 0.75rem !important;
}

header[data-purpose="top-navigation-bar"] .px-3 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

header[data-purpose="top-navigation-bar"] .py-1\.5 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* ========== Content type scale ========== */
.app-main h1,
#main-content-wrapper h1,
main h1 {
  font-family: var(--mc-font-body) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.75rem !important;
  color: var(--mc-on-surface) !important;
}

.app-main h2,
#main-content-wrapper h2,
main h2 {
  font-family: var(--mc-font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--mc-on-surface) !important;
}

.app-main h3,
#main-content-wrapper h3,
main h3 {
  font-family: var(--mc-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--mc-on-surface) !important;
}

.mc-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.75rem;
}

.mc-section-label {
  font-family: var(--mc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mc-on-surface-variant);
}

.mc-table-header {
  font-family: var(--mc-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-on-surface-variant);
}

.mc-btn,
.mc-btn-primary {
  font-family: var(--mc-font-body);
  font-size: 11px;
  font-weight: 600;
  border-radius: 0.5rem;
}

.mc-btn-primary {
  background: var(--mc-primary);
  color: #fff;
}

.mc-badge {
  font-family: var(--mc-font-mono);
  font-size: 10px;
  font-weight: 600;
}

/* Map dead Stitch spacing tokens → reference spacing */
.px-gutter-lg { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-gutter-lg { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-gutter-lg { padding: 1rem !important; }
.p-space-lg { padding: 1rem !important; }
.p-space-md { padding: 0.75rem !important; }
.px-space-md { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-space-md { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.gap-space-lg { gap: 0.625rem !important; }
.gap-space-md { gap: 0.5rem !important; }
.gap-space-sm { gap: 0.375rem !important; }
.space-y-space-lg > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem !important; }
.mt-space-lg { margin-top: 0.625rem !important; }
.mb-space-lg { margin-bottom: 0.625rem !important; }

/* Prefer denser primary CTAs */
.app-main button.bg-\[\#4252d0\],
.app-main button.bg-primary,
#main-content-wrapper button.bg-primary {
  font-size: 11px;
}