/* KazanimPOS: templates/bunu kullnacaz.jpeg + templates/fontlar.jpeg. */
@font-face { font-family: Poppins; src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --brand-50: #f0f6ff;
  --brand-100: #dbeafe;
  --brand-200: #b3d3fe;
  --brand-300: #7eb2fc;
  --brand-400: #4e95f9;
  --brand-500: #227af7;
  --brand-600: #0c64df;
  --brand-700: #0b51b1;
  --brand-800: #0d4087;
  --brand-900: #11325f;
  --brand-950: #102037;
  --brand-chrome: #19182b;
  --brand-font: Poppins, 'Segoe UI', sans-serif;
}

html body[data-bs-theme] {
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 12, 100, 223;
  --bs-link-color: var(--brand-700);
  --bs-link-color-rgb: 11, 81, 177;
  --bs-link-hover-color: var(--brand-800);
  --bs-link-hover-color-rgb: 13, 64, 135;
  --bs-primary-bg-subtle: var(--brand-50);
  --bs-primary-border-subtle: var(--brand-200);
  --bs-primary-text-emphasis: var(--brand-800);
  --bs-font-sans-serif: var(--brand-font);
  --bs-body-font-family: var(--brand-font);
  --qds-font-family: var(--brand-font);
  --qds-color-primary: var(--brand-600);
  --qds-color-primary-rgb: 12, 100, 223;
  --bs-body-bg: #f4f4f7;
  --bs-body-color: var(--brand-chrome);
  --bs-emphasis-color: var(--brand-chrome);
  --bs-secondary-color: #737285;
  --bs-secondary-bg: #ffffff;
  --bs-tertiary-bg: #f4f4f7;
  --bs-border-color: #e5e5ed;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-card-bg: #ffffff;
  --bs-card-cap-bg: #ffffff;
  --bs-header-bg: #ffffff !important;
  --bs-sidebar-bg: #ffffff !important;
  --bs-sidebar-dark-bg: var(--brand-chrome) !important;
  --qds-color-text: var(--bs-body-color);
  --qds-color-text-muted: var(--bs-secondary-color);
  --qds-color-border: var(--bs-border-color);
  --qds-color-border-strong: #c7c6d5;
  --qds-color-surface: #ffffff;
  --qds-color-surface-muted: #f4f4f7;
  font-family: var(--brand-font);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

html body[data-bs-theme='dark'] {
  color-scheme: dark;
  --bs-body-bg: #141322;
  --bs-body-color: #f8f8fc;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #b8b7cb;
  --bs-secondary-bg: #222136;
  --bs-tertiary-bg: #29283f;
  --bs-border-color: #3b3952;
  --bs-card-bg: #222136;
  --bs-card-cap-bg: #29283f;
  --bs-header-bg: var(--brand-chrome) !important;
  --bs-sidebar-bg: var(--brand-chrome) !important;
  --bs-link-color: #ffffff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #dbeafe;
  --bs-link-hover-color-rgb: 219, 234, 254;
  --bs-primary-text-emphasis: var(--brand-200);
  --bs-primary-bg-subtle: var(--brand-950);
  --bs-primary-border-subtle: var(--brand-800);
  --qds-color-surface: #222136;
  --qds-color-surface-muted: #29283f;
  --qds-color-border-strong: #54516d;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body input, html body select, html body textarea, html body button {
  font-family: var(--brand-font);
}

/* Wordmark and supplied symbols. No raster regeneration or stretched logos. */
.app-brand-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--brand-height, 38px);
  max-width: 100%;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--brand-chrome);
  line-height: 1;
}
.app-brand-name .brand-mark {
  width: var(--brand-height, 38px);
  height: var(--brand-height, 38px);
  flex: 0 0 auto;
  overflow: hidden;
}
.brand-mark--light { mix-blend-mode: multiply; }
.app-brand-name .brand-mark--dark { display: none; mix-blend-mode: lighten; }
.brand-wordmark { font-family: var(--brand-font); font-size: min(34px, calc(var(--brand-height, 38px) * 0.65)); font-weight: 700; letter-spacing: -0.055em; }
.app-brand-name--compact { gap: 0; }
body[data-bs-theme='dark'] .app-brand-name--auto,
.logo-light .app-brand-name,
.pos-header .app-brand-name,
.app-brand-name--dark { color: #ffffff; }
body[data-bs-theme='dark'] .app-brand-name--auto .brand-mark--light,
.logo-light .brand-mark--light,
.pos-header .brand-mark--light,
.app-brand-name--dark .brand-mark--light { display: none; }
body[data-bs-theme='dark'] .app-brand-name--auto .brand-mark--dark,
.logo-light .brand-mark--dark,
.pos-header .brand-mark--dark,
.app-brand-name--dark .brand-mark--dark { display: block; }
.navbar-brand-box .app-brand-name { --brand-height: 28px !important; gap: 6px; }
.navbar-brand-box .brand-wordmark { font-size: 18px; }

/* Dark navigation chrome, with an independently switchable content canvas. */
html body[data-topbar='dark'] { --bs-header-bg: var(--brand-chrome) !important; }
html body[data-sidebar='dark'], html body[data-sidebar='brand'] { --bs-sidebar-bg: var(--brand-chrome) !important; }
html body #page-topbar, html body .navbar-brand-box { background: var(--bs-header-bg) !important; }
html body .vertical-menu, html body #sidebar-menu, html body .sidebar-search,
html body .sidebar-nav, html body .sidebar-nav__rail, html body .sidebar-user-footer {
  background: var(--bs-sidebar-bg) !important;
}
html body[data-topbar='dark'] #page-topbar { border-color: #323047 !important; }
html body[data-topbar='dark'] #page-topbar :is(.header-item, .header-item i, .sidebar-toggle-btn, .brand-notifications__button) { color: #f8f8fc !important; }
html body[data-topbar='dark'] #page-topbar .global-tab { background: #29283f; color: #d0cfe0; border-color: #3b3952; }
html body[data-topbar='dark'] #page-topbar .global-tab.active { background: var(--bs-body-bg); color: var(--bs-body-color); border-top-color: var(--brand-600); }
html body[data-sidebar='dark'] .sidebar-nav { --sidebar-accent: #ffffff; }
html body[data-sidebar='dark'] #sidebar-menu :is(.sidebar-nav__module-button, .sidebar-nav__module-button > span, .sidebar-nav__module-button > i) { color: #e2e1ef !important; }
html body[data-sidebar='dark'] #sidebar-menu .sidebar-nav__module-button:hover { background: #29283f !important; }
html body[data-sidebar='dark'] #sidebar-menu :is(.is-active, .is-expanded) > .sidebar-nav__module-button { background: var(--brand-600) !important; color: #ffffff !important; }
html body[data-sidebar='dark'] #sidebar-menu :is(.is-active, .is-expanded) > .sidebar-nav__module-button > :is(span, i) { color: #ffffff !important; }
html body[data-sidebar='dark'] #sidebar-menu .sidebar-nav__module-button > .sidebar-icon-box { background: #343149 !important; color: #ffffff !important; }
html body[data-sidebar='dark'] #sidebar-menu .sidebar-nav__module-button > i:first-child { background: #343149 !important; }
html body[data-sidebar='dark'] .sidebar-search-input { background: #29283f !important; color: #ffffff !important; border-color: #3b3952 !important; }
html body[data-sidebar='dark'] .sidebar-nav__panel,
html body[data-sidebar='dark'] .sidebar-nav__panel-header,
html body[data-sidebar='dark'] .sidebar-nav__panel-body { background: var(--brand-chrome) !important; color: #f8f8fc; }
html body[data-sidebar='dark'] .sidebar-nav__panel :is(a, button, .sidebar-nav__panel-title) { color: #e2e1ef; }
html body[data-sidebar='dark'] .sidebar-nav__sub-link.is-active { background: var(--brand-600) !important; color: #ffffff !important; }
html body[data-sidebar='dark'] :is(.sidebar-tree__row, .sidebar-tree__label) { color: #e2e1ef !important; }
html body[data-sidebar='dark'] :is(.sidebar-tree__leaf-wrap:hover, .sidebar-tree__row:hover) { background: #29283f !important; }
html body[data-sidebar='dark'] :is(.sidebar-tree__leaf-wrap.is-active, .sidebar-tree__row.is-active) { background: var(--brand-600) !important; }
html body[data-sidebar='dark'] .sidebar-icon-box { background: #343149; color: #ffffff; }
html body[data-sidebar='dark'] .user-menu-trigger { background: #29283f !important; border-color: #3b3952 !important; }
html body[data-sidebar='dark'] .user-menu-fullname { color: #ffffff; }
html body[data-sidebar='dark'] .user-menu-tenant { color: #b8b7cb; }
html body .user-menu-avatar { background: var(--brand-600); }

/* Shared controls keep one brand blue in both modes. */
html body .btn-primary {
  --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-600); --bs-btn-disabled-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 12, 100, 223;
}
html body .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700); }
html body .login-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 0; border-radius: 10px; color: #ffffff; font-weight: 600; background: var(--brand-600); box-shadow: 0 4px 12px rgb(12 100 223 / 18%); }
html body .login-submit:hover:not(:disabled) { background: var(--brand-700); }
html body .login-modal-accent { background: var(--brand-600); }
html body[data-bs-theme='dark'] :is(.login-screen, .login-modal) { background: var(--bs-body-bg) !important; color: var(--bs-body-color); border-color: var(--bs-border-color); }
html body[data-bs-theme='dark'] .login-screen :is(h1, label) { color: var(--bs-body-color); }
html body[data-bs-theme='dark'] .login-screen :is(p, a, label span) { color: var(--bs-secondary-color); }
html body[data-bs-theme='dark'] :is(.login-field, .login-modal-user-card, .login-modal-tenant-preview) { background: var(--qds-color-surface); color: var(--bs-body-color); border-color: var(--bs-border-color); }
html body[data-bs-theme='dark'] :is(.login-modal-title, .login-modal-user-name, .login-modal-tenant-name, .login-modal-field-label) { color: var(--bs-body-color); }
html body[data-bs-theme='dark'] :is(.login-modal-subtitle, .login-modal-user-email, .login-modal-card-label, .login-modal-eyebrow) { color: var(--bs-secondary-color); }
html body .form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); }
html body :is(.form-control, .form-select, .login-field):focus { border-color: var(--brand-600) !important; box-shadow: 0 0 0 3px rgb(12 100 223 / 16%) !important; }
html body .card { border-color: var(--bs-border-color); border-radius: 12px; }
html body[data-bs-theme='dark'] :is(#layout-wrapper, .main-content, .page-content, .page-content > .container-fluid) { background: var(--bs-body-bg); color: var(--bs-body-color); }
html body[data-bs-theme='dark'] .card { background: var(--bs-card-bg) !important; border-color: var(--bs-border-color) !important; }
html body[data-bs-theme='dark'] :is(.card-header, .form-control, .form-select, .alert-light) { background: var(--qds-color-surface-muted) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }
html body[data-bs-theme='dark'] :is(.btn-light, .btn-secondary, .btn-outline-secondary, .btn-outline-dark, .qds-btn--secondary) { background: var(--qds-color-surface-muted) !important; border-color: var(--bs-border-color) !important; color: #ffffff !important; }
html body[data-bs-theme='dark'] :is(a.text-primary, .btn-link) { color: #ffffff !important; }

/* AG Grid owns its own variables; align both its host and root wrapper. */
html body .qds-grid, html body .qds-grid .ag-root-wrapper {
  --ag-font-family: var(--brand-font) !important;
  --ag-accent-color: var(--brand-600) !important;
  --ag-background-color: var(--qds-color-surface) !important;
  --ag-foreground-color: var(--bs-body-color) !important;
  --ag-data-color: var(--bs-body-color) !important;
  --ag-header-background-color: var(--qds-color-surface-muted) !important;
  --ag-header-foreground-color: var(--bs-body-color) !important;
  --ag-odd-row-background-color: var(--qds-color-surface) !important;
  --ag-border-color: var(--bs-border-color) !important;
  --ag-row-hover-color: rgb(12 100 223 / 6%) !important;
  --ag-selected-row-background-color: rgb(12 100 223 / 14%) !important;
  --ag-input-background-color: var(--qds-color-surface) !important;
  --ag-input-text-color: var(--bs-body-color) !important;
}

html body .pos-shell, html body .pos-overlay-root {
  --pos-font: var(--brand-font);
  --pos-primary: var(--brand-600); --pos-primary-rgb: 12, 100, 223;
  --pos-gold: var(--brand-600); --pos-gold-deep: var(--brand-700); --pos-gold-soft: var(--brand-400);
  --pos-gold-light: rgb(12 100 223 / 18%);
  --pos-bg: var(--bs-body-bg); --pos-navy: var(--bs-body-color);
  --pos-navy-soft: var(--bs-secondary-color); --pos-white: var(--qds-color-surface);
  --pos-line: var(--bs-border-color); --pos-glass: var(--qds-color-surface);
}
html body .pos-header { background: var(--brand-chrome); border-color: #323047; }
html body .pos-header-clock, html body .pos-header-clock-date, html body .pos-header-clock-time { color: #ffffff; }

@media (max-width: 991.98px) {
  html body[data-topbar='dark'] .navbar-brand-box .logo-dark { display: none !important; }
  html body[data-topbar='dark'] .navbar-brand-box .logo-light { display: inline-flex !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-brand-box .logo-lg .app-brand-name { --brand-height: 22px !important; gap: 4px; }
  .navbar-brand-box .logo-lg .brand-wordmark { font-size: 12px; }
}