:root {
  --app-bg: #f5f5f9;
  --panel-bg: #ffffff;
  --text-main: #566a7f;
  --text-strong: #384551;
  --text-muted: #8b9bb0;
  --primary: #696cff;
  --primary-soft: #e7e7ff;
  --success: #71dd37;
  --success-soft: #e8fadf;
  --info: #03c3ec;
  --info-soft: #d7f5fc;
  --warning: #ffab00;
  --warning-soft: #fff2d6;
  --danger: #ff3e1d;
  --danger-soft: #ffe0db;
  --border: #d9dee3;
  --shadow: 0 0.125rem 0.375rem rgba(67, 89, 113, 0.12);
}

html {
  font-size: 15px;
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text-main);
  background: var(--app-bg);
  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-loading-bar {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

.page-loading-bar.is-visible {
  opacity: 1;
}

.page-loading-bar span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--primary), #a7a9ff, var(--primary));
  box-shadow: 0 0 12px rgba(105, 108, 255, .65);
  animation: page-loading-slide 1s ease-in-out infinite;
}

@keyframes page-loading-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(365%); }
}

.btn.is-loading,
button.is-loading {
  position: relative;
  cursor: wait;
  pointer-events: none;
}

.btn.is-loading > *,
button.is-loading > * {
  visibility: hidden;
}

.btn.is-loading::after,
button.is-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: button-loading-spin .65s linear infinite;
}

@keyframes button-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-bar span { animation-duration: 2s; }
}

a {
  color: var(--primary);
  text-decoration: none;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 285px minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.25rem 0.8rem;
  background: #fff;
  box-shadow: var(--shadow);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sidebar-logout{position:sticky;z-index:4;bottom:-1.25rem;margin:.8rem -.1rem -1.25rem;padding:.75rem .1rem 1.1rem;background:#0f2038}
.sidebar-logout button{display:flex;width:100%;align-items:center;justify-content:center;gap:.55rem;padding:.72rem .8rem;border:1px solid rgba(248,113,113,.35);border-radius:.65rem;color:#fecaca;background:rgba(127,29,29,.2);font-weight:750}
.sidebar-logout button:hover{color:#fff;background:#b42318}
.topbar-logout{display:inline-flex;align-items:center}

.tenant-context {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.85rem;
  border: 1px solid #edf0f4;
  border-radius: 0.5rem;
  background: #f8f8fc;
}

.tenant-context-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tenant-context-company {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.tenant-context-company img,
.tenant-context-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 0.45rem;
  background: var(--primary-soft);
  color: var(--primary);
}

.tenant-context-company img {
  object-fit: cover;
}

.tenant-context-company strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-tenant-context {
  margin-bottom: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0 0.75rem 1rem;
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 700;
}

.brand-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 0.5rem;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.35rem;
}

.menu {
  display: grid;
  gap: 0.55rem;
}

.menu-label {
  margin: 1rem 0 0.35rem;
  padding-inline: 0.75rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-link {
  display: grid;
  grid-template-columns: 20px 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.7rem 0.75rem;
  border-radius: 0.45rem;
  color: var(--text-main);
  font-weight: 700;
}

.menu-group {
  display: grid;
  gap: 0.25rem;
}

.system-menu-group {
  margin-top: 0.15rem;
}

.menu-link i {
  font-size: 1.1rem;
}

.menu-link:hover,
.menu-link:focus {
  color: var(--primary);
  background: var(--primary-soft);
}

.menu-link.active {
  color: var(--primary);
  background: linear-gradient(90deg, rgba(105, 108, 255, 0.14), rgba(105, 108, 255, 0.06));
}

.favorite-dot {
  display: inline-grid;
  width: 20px;
  place-items: center;
  color: #c5ccd6;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.favorite-dot i {
  display: none;
}

.favorite-dot::before {
  content: "\2605";
}

.favorite-dot:hover {
  color: #9aa7b8;
  transform: scale(1.08);
}

.favorite-dot.is-favorite {
  color: #f4c95d;
}

.favorite-spacer {
  width: 20px;
}

.favorite-menu-list {
  display: grid;
  gap: 0.25rem;
}

.favorite-menu-list:empty {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.summary-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid #edf0f4;
  border-radius: 0.5rem;
  background: #fff;
}

.summary-card span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.summary-card strong {
  color: var(--text-strong);
  font-size: 1.25rem;
}

.product-thumb,
.product-card-image {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #edf0f4;
  border-radius: 0.45rem;
  object-fit: cover;
  background: #fff;
}

.product-thumb-placeholder {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #edf0f4;
  border-radius: 0.45rem;
  color: var(--text-muted);
  background: #f8f8fc;
  font-size: 1.25rem;
}

.product-card-image {
  flex: 0 0 auto;
}

.favorite-menu-list .menu-link,
.favorite-menu-list .submenu-link {
  color: var(--text-main);
  background: #fffaf0;
}

.favorite-menu-list .menu-link:hover,
.favorite-menu-list .submenu-link:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.menu-chevron {
  justify-self: end;
  color: #7d8da1;
}

.submenu {
  display: none;
  gap: 0.25rem;
  margin-left: 0;
  padding-left: 0;
}

.submenu.show {
  display: grid;
}

.submenu-link {
  display: grid;
  grid-template-columns: 20px 10px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 42px;
  padding: 0.45rem 0.75rem 0.45rem 0.75rem;
  color: #6b7c90;
  font-weight: 700;
}

.menu-group .submenu {
  border-left: 1px solid #edf0f4;
  margin-left: 1.55rem;
  padding-left: 0.4rem;
}

.menu-group .submenu-link {
  grid-template-columns: 20px 10px minmax(0, 1fr);
  padding-left: 0;
}

.submenu-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aab5c3;
}

.submenu-link:hover {
  color: var(--primary);
}

.menu-link.compact {
  min-height: 38px;
  padding-block: 0.5rem;
  font-size: 0.92rem;
}

.app-main {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.company-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.topbar h1 {
  margin: 0.15rem 0 0;
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 700;
}

.tenant-chip {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.notification-dropdown {
  position: relative;
}

.notification-button {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.2rem;
  min-width: 18px;
  height: 18px;
  padding: 0 0.28rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.notification-menu {
  width: min(360px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid #edf0f4;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.notification-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #edf0f4;
  color: var(--text-strong);
}

.notification-head-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.notification-list {
  max-height: 380px;
  overflow-y: auto;
}

.notification-item {
  display: grid;
  gap: 0.18rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f0f2f5;
  color: var(--text-main);
}

.notification-item:hover {
  background: #f8f8fc;
  color: var(--text-main);
}

.notification-item.unread {
  background: var(--primary-soft);
}

.notification-item strong {
  color: var(--text-strong);
  font-size: 0.9rem;
}

.notification-item span {
  font-size: 0.82rem;
}

.notification-item small,
.notification-empty {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.notification-empty {
  padding: 1rem;
}

.icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-main);
  background: #f6f7fb;
}

.icon-button i {
  font-size: 1.3rem;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: #f6f7fb;
  color: var(--text-strong);
  font-weight: 600;
}

.avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.content {
  min-width: 0;
  padding: 1.5rem;
}

.role-mobile-mode {
  background: #eef1f6;
}

.role-mobile-mode .app-shell {
  display: block;
  min-height: 100dvh;
}

.role-mobile-mode .app-sidebar {
  display: none;
}

.role-mobile-mode .app-main {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--app-bg);
  box-shadow: 0 0 0 1px rgba(217, 222, 227, .8), 0 18px 54px rgba(44, 56, 74, .18);
}

.role-mobile-mode .topbar {
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .75rem;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(217, 222, 227, .85);
}

.role-mobile-mode .topbar .icon-button[data-bs-target="#mobileMenu"] {
  display: inline-grid !important;
}

.role-mobile-mode .company-header {
  flex: 1 1 auto;
  min-width: 0;
}

.role-mobile-mode .brand-mark {
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
}

.role-mobile-mode .topbar h1 {
  max-width: 190px;
  font-size: 1.05rem;
  white-space: nowrap;
}

.role-mobile-mode .tenant-chip {
  font-size: .68rem;
}

.role-mobile-mode .topbar-actions {
  flex: 0 0 auto;
  gap: .45rem;
}

.role-mobile-mode .topbar-actions > .btn-primary,
.role-mobile-mode .topbar-actions > .icon-button[title="Meni"],
.role-mobile-mode .topbar-actions > .icon-button[title="Puni ekran"] {
  display: none;
}

.role-mobile-mode .notification-menu {
  width: min(390px, calc(100vw - 1.25rem));
}

.role-mobile-mode .content {
  padding: .75rem .75rem calc(6.25rem + env(safe-area-inset-bottom));
}

.role-mobile-mode .app-footer {
  display: none;
}

.mobile-bottom-nav {
  position: fixed;
  z-index: 1030;
  bottom: 0;
  left: 50%;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 430px);
  min-height: 72px;
  padding: .45rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid #e2e7ee;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -10px 30px rgba(44, 56, 74, .1);
  backdrop-filter: blur(16px);
}

.session-expiry-dialog{width:min(420px,calc(100% - 2rem));padding:1.5rem;border:0;border-radius:20px;text-align:center;color:#24324a;background:#fff;box-shadow:0 24px 70px rgba(15,35,70,.28)}
.session-expiry-dialog::backdrop{background:rgba(12,28,52,.52);backdrop-filter:blur(3px)}
.session-expiry-dialog h4{margin:.75rem 0 .5rem}.session-expiry-dialog p{color:#667085}
.session-expiry-icon{display:grid;width:52px;height:52px;margin:auto;place-items:center;border-radius:16px;color:#1f6feb;background:#eaf2ff;font-size:1.65rem}
.app-confirm-dialog{width:min(430px,calc(100% - 2rem));padding:1.6rem;border:1px solid #dbe3ec;border-radius:20px;color:#1e293b;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.3)}
.app-confirm-dialog::backdrop{background:rgba(7,26,51,.58);backdrop-filter:blur(4px)}
.app-confirm-icon{display:grid;width:54px;height:54px;margin:0 auto .9rem;place-items:center;border-radius:16px;color:#1d4ed8;background:#eff6ff;font-size:1.7rem}
.app-confirm-dialog h4{margin:0 0 .55rem;text-align:center;font-weight:850}.app-confirm-dialog p{margin:0;color:#64748b;line-height:1.55;text-align:center}
.app-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1.35rem}.app-confirm-actions .btn{min-height:44px;border-radius:11px;font-weight:750}
.brand-mark img,.sales-nav-brand>span img,.sales-login-brand>span img,.landing-brand-mark img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.sales-nav-brand>span:has(img),.sales-login-brand>span:has(img){padding:0;background:transparent;box-shadow:none}
.pwa-install-prompt{position:fixed;z-index:11000;left:50%;bottom:max(18px,env(safe-area-inset-bottom));display:grid;width:min(620px,calc(100% - 28px));grid-template-columns:58px 1fr auto auto;align-items:center;gap:14px;padding:16px 18px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.16);border-radius:18px;color:#fff;background:#14213d;box-shadow:0 24px 70px rgba(3,15,35,.42)}
.pwa-install-prompt[hidden]{display:none}.pwa-install-prompt>img{width:58px;height:58px;border-radius:14px}.pwa-install-prompt>div{display:grid;gap:4px}.pwa-install-prompt strong{font-size:1rem;font-weight:850}.pwa-install-prompt p{margin:0;color:#cbd5e1;font-size:.78rem;line-height:1.45}.pwa-install-prompt ol{margin:.35rem 0 0;padding-left:1.15rem;color:#cbd5e1;font-size:.75rem;line-height:1.55}.pwa-install-action{padding:.72rem 1rem;border:0;border-radius:10px;color:#fff;background:#2563eb;font-size:.8rem;font-weight:850}.pwa-install-close{align-self:start;padding:.1rem;border:0;color:#94a3b8;background:transparent;font-size:1.4rem;line-height:1}
@media(max-width:580px){.pwa-install-prompt{bottom:max(10px,env(safe-area-inset-bottom));grid-template-columns:48px 1fr auto;padding:14px}.pwa-install-prompt>img{width:48px;height:48px}.pwa-install-action{grid-column:1/3;width:100%}.pwa-install-close{grid-column:3;grid-row:1}}
@media(display-mode:standalone){.pwa-install-prompt{display:none!important}}

/* KOMERA landing identitet */
.sales-landing{--sl-ink:#14213d;--sl-indigo:#14213d;--sl-violet:#2563eb;--sl-orange:#14b8a6}
.sales-nav{background:rgba(20,33,61,.94)}
.sales-nav-cta,.sales-primary-action{background:linear-gradient(105deg,#2563eb,#14b8a6);box-shadow:0 9px 22px rgba(37,99,235,.24)}
.sales-hero{background:radial-gradient(circle at 83% 18%,rgba(20,184,166,.18),transparent 27%),linear-gradient(145deg,#0b1730,#142b55 62%,#123f50)}
.sales-hero h1 em,.sales-eyebrow{color:#5eead4}.sales-hero-proof b{color:#2dd4bf}
.sales-product-window{box-shadow:0 35px 90px rgba(3,15,35,.48)}
.column-chooser{display:grid;gap:.5rem}.column-chooser-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem .8rem;border:1px solid #e2e8f0;border-radius:.65rem;background:#f8fafc;cursor:grab}.column-chooser-row:active{cursor:grabbing}.column-chooser-row label{display:flex;align-items:center;gap:.5rem;margin:0;font-weight:700}.column-chooser-row>div{display:flex;gap:.25rem}.column-chooser-row button{width:30px;height:30px;border:1px solid #dbe3ec;border-radius:.4rem;color:#475569;background:#fff}.column-drag{color:#94a3b8;font-size:1.2rem}
.product-list-filters{display:grid;grid-template-columns:minmax(280px,2fr) repeat(3,minmax(145px,1fr));gap:.75rem;margin:0 0 .75rem;padding:1rem;border:1px solid #e2e8f0;border-radius:.8rem;background:#f8fafc}.product-search{position:relative}.product-search i{position:absolute;z-index:2;top:50%;left:.8rem;transform:translateY(-50%);color:#64748b}.product-search input{padding-left:2.35rem}.product-filter-actions{display:flex;grid-column:1/-1;justify-content:flex-end;gap:.5rem}.product-result-summary{padding:.35rem 0 .8rem;color:#64748b;font-size:.85rem}.product-result-summary strong{color:#14213d}.product-pagination{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:1rem}.product-pagination>div{display:flex;gap:.35rem}@media(max-width:991px){.product-list-filters{grid-template-columns:1fr 1fr}.product-search{grid-column:1/-1}}@media(max-width:580px){.product-list-filters{grid-template-columns:1fr}.product-search,.product-filter-actions{grid-column:auto}.product-filter-actions{display:grid;grid-template-columns:1fr 1fr}.product-filter-actions .btn-success{grid-column:1/-1}.product-pagination{align-items:stretch}.product-pagination>div{display:none}}

.role-mobile-mode .mobile-bottom-nav { display: grid; }
.smart-grid-shell{margin:0 0 .75rem}.smart-grid-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.8rem 1rem;border:1px solid #dbe3ec;border-radius:.7rem;color:#334155;background:#fff}.smart-grid-toggle>span{display:flex;align-items:center;gap:.55rem}.smart-grid-toggle em{padding:.18rem .45rem;border-radius:999px;color:#1d4ed8;background:#dbeafe;font-size:.7rem;font-style:normal}.smart-grid-toggle.open>.bx{transform:rotate(180deg)}.smart-grid-controls{display:grid;grid-template-columns:minmax(240px,2fr) minmax(160px,1fr) 120px auto auto;gap:.6rem;margin-top:.55rem;padding:.8rem;border:1px solid #e2e8f0;border-radius:.7rem;background:#f8fafc}.smart-grid-search{position:relative}.smart-grid-search i{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);color:#64748b}.smart-grid-search input{padding-left:2.2rem}.smart-column-panel{margin-top:.55rem;padding:.8rem;border:1px solid #dbe3ec;border-radius:.7rem;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.08)}.smart-column-panel>div{display:grid;max-height:420px;gap:.45rem;overflow:auto}.smart-column-panel footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.75rem}.smart-grid-info{padding:.5rem 0 0;color:#64748b;font-size:.8rem}.smart-grid-pages{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}.smart-grid-pages button{padding:.35rem .65rem;border:1px solid #dbe3ec;border-radius:.45rem;background:#fff}@media(max-width:850px){.smart-grid-controls{grid-template-columns:1fr 1fr}.smart-grid-search{grid-column:1/-1}}@media(max-width:520px){.smart-grid-controls{grid-template-columns:1fr}.smart-grid-search{grid-column:auto}.smart-grid-controls .btn{width:100%}}
.product-filter-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;margin-bottom:.6rem;padding:.8rem 1rem;border:1px solid #dbe3ec;border-radius:.7rem;color:#334155;background:#fff}.product-filter-toggle>span{display:flex;align-items:center;gap:.55rem}.product-filter-toggle b{padding:.2rem .5rem;border-radius:999px;color:#1d4ed8;background:#dbeafe;font-size:.7rem}.product-filter-toggle[aria-expanded="true"]>.bx{transform:rotate(180deg)}.product-filter-toggle>.bx{transition:transform .2s}

.mobile-bottom-link {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .18rem;
  padding: .2rem;
  border: 0;
  color: #8592a3;
  background: transparent;
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-favorites-slot { display: contents; }
.mobile-favorite-link span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; }
[data-mobile-default][hidden] { display:none !important; }

.mobile-bottom-link > i {
  font-size: 1.42rem;
}

.mobile-bottom-link.active,
.mobile-bottom-link:hover,
.mobile-bottom-link:focus-visible {
  color: var(--primary);
}

.mobile-bottom-primary {
  margin-top: -1.35rem;
  color: var(--primary);
}

.mobile-primary-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 4px solid var(--app-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(105, 108, 255, .34);
}

.mobile-primary-icon i {
  font-size: 1.65rem;
}

.role-mobile-mode .panel,
.role-mobile-mode .module-card,
.role-mobile-mode .metric-card {
  border-radius: 16px;
}

.role-mobile-mode button,
.role-mobile-mode .btn,
.role-mobile-mode .form-control,
.role-mobile-mode .form-select {
  min-height: 44px;
}

.role-mobile-mode .table-responsive {
  margin-inline: -.75rem;
}

@media (max-width: 430px) {
  .role-mobile-mode .app-main {
    width: 100%;
    box-shadow: none;
  }
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.page-grid {
  display: grid;
  gap: 1.25rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.panel,
.module-card,
.metric-card {
  border: 0;
  border-radius: 0.5rem;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.panel {
  padding: 1.25rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.panel-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.2rem;
  font-weight: 700;
}

.panel-head p {
  margin: 0.25rem 0 0;
  color: var(--text-main);
}

.panel-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 700;
}

.metric-card,
.module-card {
  padding: 1rem;
}

.metric-icon,
.module-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 0.5rem;
  font-size: 1.35rem;
}

.metric-card strong {
  display: block;
  margin-top: 0.8rem;
  color: var(--text-strong);
  font-size: 1.45rem;
}

.metric-card span,
.module-card p {
  color: var(--text-muted);
}

.module-card {
  display: grid;
  gap: 0.8rem;
  color: var(--text-main);
}

.module-card h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 700;
}

.tone-primary {
  color: var(--primary);
  background: var(--primary-soft);
}

.tone-success {
  color: #2b8d0f;
  background: var(--success-soft);
}

.tone-info {
  color: #0287a4;
  background: var(--info-soft);
}

.tone-warning {
  color: #a66f00;
  background: var(--warning-soft);
}

.tone-muted {
  color: #697a8d;
  background: #eef1f5;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.table {
  margin-bottom: 0;
}

.table th {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.table td {
  vertical-align: middle;
  color: var(--text-main);
}

.amount {
  color: var(--text-strong);
  font-weight: 700;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-subtitle {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
}

.table-actions,
.form-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.table-actions form {
  margin: 0;
}

.form-actions {
  display: flex;
  margin-top: 1.25rem;
  justify-content: flex-start;
}

.details-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0.75rem 1rem;
  margin: 0;
}

.details-grid dt {
  color: var(--text-muted);
  font-weight: 700;
}

.details-grid dd {
  margin: 0;
  color: var(--text-strong);
}

.role-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.role-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 86px;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
}

.role-check strong,
.role-check small {
  display: block;
}

.role-check strong {
  color: var(--text-strong);
}

.role-check small {
  margin-top: 0.2rem;
  color: var(--text-muted);
}

.role-chip-list {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.company-form-card {
  max-width: 520px;
  margin: 0 auto;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(67, 89, 113, 0.2);
}

.company-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: #0d6efd;
  color: #fff;
}

.company-form-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.company-form-header .btn {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.company-form-body {
  padding: 1rem;
}

.company-form-body .form-label {
  color: #63758b;
  font-weight: 700;
}

.form-hint {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.company-module-list {
  display: grid;
  gap: 0.65rem;
}

.company-module-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 54px;
  padding: 0.75rem;
  border: 1px solid #dfe5ee;
  border-radius: 0.45rem;
  background: #f8faff;
}

.company-module-row strong {
  color: #53667c;
}

.company-module-row > span:last-child {
  color: #8190a3;
  font-size: 0.8rem;
  font-weight: 700;
}

.company-catalog {
  padding: 1.5rem;
}

.dark-head-table thead th {
  background: #1e1f21;
  color: #fff;
}

.company-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.company-cell strong,
.company-cell span {
  display: block;
}

.company-cell strong {
  color: #111;
}

.company-cell span {
  color: #343a40;
  font-size: 0.9rem;
}

.company-logo {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 0.45rem;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 800;
}

.company-table-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.company-table-logo {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: #f2f2ff;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.company-table-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module-permission-list {
  display: grid;
  gap: 0.65rem;
}

.module-permission-group {
  border: 1px solid #dfe5ee;
  border-radius: 0.45rem;
  background: #f8faff;
}

.module-permission-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 54px;
  padding: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.module-permission-group summary::-webkit-details-marker {
  display: none;
}

.module-summary-check {
  margin: 0;
}

.module-summary-check .form-check-label {
  color: #53667c;
  font-weight: 800;
}

.module-permission-summary {
  color: #8190a3;
  font-size: 0.8rem;
  font-weight: 800;
}

.module-permission-body {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.75rem 0.75rem 2.75rem;
}

.module-child-check {
  color: var(--text-main);
  font-size: 0.9rem;
}

.search-box {
  max-width: 320px;
}

.form-control:focus,
.btn:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.18rem rgba(105, 108, 255, 0.18);
}

.btn-primary {
  border-color: var(--primary);
  background: var(--primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.app-main,
.content,
.panel,
.panel-header,
.panel-head,
.company-header,
.company-header > div,
.module-card,
.metric-card,
.summary-card,
.table-responsive {
  min-width: 0;
  max-width: 100%;
}

.content {
  overflow-x: hidden;
}

.panel-header,
.panel-head,
.toolbar,
.topbar {
  flex-wrap: wrap;
}

.panel-header > *,
.panel-head > *,
.toolbar > *,
.topbar > * {
  min-width: 0;
}

.topbar h1,
.company-header strong,
.module-card h2,
.module-card p,
.summary-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-actions,
.form-actions,
.company-row-actions {
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  /* Usluge na telefonu su operativne kartice, bez ERP/web-shop detalja. */
  .service-products-table tbody td { display:none !important; }
  .service-products-table tbody td[data-column="image"],
  .service-products-table tbody td[data-column="sku"],
  .service-products-table tbody td[data-column="name"],
  .service-products-table tbody td[data-column="price"],
  .service-products-table tbody td[data-column="tax"],
  .service-products-table tbody td[data-column="unit"],
  .service-products-table tbody td[data-column="status"],
  .service-products-table tbody td[data-column="actions"] { display:grid !important; }
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
  }

  body {
    min-height: 100dvh;
  }

  .app-shell,
  .app-main,
  .topbar,
  .content,
  main,
  form,
  .card,
  .panel,
  .row,
  .modal-content,
  .offcanvas {
    min-width: 0;
    max-width: 100%;
  }

  .content,
  main {
    overflow-x: clip;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  .form-control,
  .form-select {
    max-width: 100%;
    font-size: 16px;
  }

  button,
  .btn,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  pre,
  code {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .product-form-tabs {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
  }

  .app-sidebar {
    display: none;
  }

  .topbar {
    margin: 1rem 1rem 0;
    gap: .75rem;
  }

  .content {
    padding: 1rem;
  }

  .metric-grid,
  .module-grid,
  .role-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  body { overflow:hidden !important; background:#071a33 !important; }
  body > * { visibility:hidden !important; }
  body::before {
    position:fixed;
    z-index:2147483647;
    inset:0;
    display:grid;
    visibility:visible !important;
    padding:2rem;
    place-items:center;
    color:#fff;
    background:radial-gradient(circle at 75% 20%,rgba(56,189,248,.2),transparent 32%),linear-gradient(145deg,#071a33,#0d3158);
    content:"↻  Okrenite telefon uspravno\A KOMERA je prilagođena portretnom prikazu.";
    font-size:clamp(1rem,4vw,1.35rem);
    font-weight:800;
    line-height:1.65;
    text-align:center;
    white-space:pre-line;
  }
}

@media (max-width: 575.98px) {
  html {
    font-size: 14px;
  }

  .topbar {
    align-items: flex-start;
    margin: .75rem .75rem 0;
    padding: .75rem;
  }

  .company-header {
    flex: 1 1 calc(100% - 54px);
  }

  .topbar h1 {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
    gap: .5rem;
  }

  .notification-menu {
    width: calc(100vw - 1.5rem);
  }

  .content {
    padding: .75rem;
  }

  .panel {
    padding: .85rem;
    border-radius: .45rem;
  }

  .panel-header,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }

  .panel-header .btn,
  .panel-head .btn {
    width: 100%;
  }

  .panel-head h2 {
    font-size: 1.05rem;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  .modal-dialog,
  .modal-dialog.modal-lg {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    min-height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-footer .btn,
  .form-actions .btn,
  .table-actions .btn,
  .company-row-actions .btn,
  .company-row-actions form {
    width: 100%;
  }

  .topbar-actions .user-pill span:last-child {
    display: none;
  }

  .metric-grid,
  .module-grid {
    grid-template-columns: 1fr;
  }

  .app-footer {
    flex-direction: column;
    padding: 0 .75rem 1rem;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .role-check-grid {
    grid-template-columns: 1fr;
  }
}

.role-access-header { margin-bottom: 1.25rem; }
.role-access-header h2 { margin: .3rem 0; color: var(--text-strong); font-size: 1.8rem; }
.role-access-header p { margin: 0; color: var(--text-muted); }
.role-superuser-note { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; margin-bottom: 1.25rem; border: 1px solid #cfd0ff; border-radius: 14px; background: #f4f4ff; }
.role-superuser-note > span { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; background: var(--primary); font-size: 1.25rem; }
.role-superuser-note strong { color: var(--text-strong); }
.role-superuser-note p { margin: .2rem 0 0; color: var(--text-muted); font-size: .82rem; }
.role-access-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.role-access-card { padding: 1.15rem; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-bg); box-shadow: var(--shadow); }
.role-access-card > header { display: flex; gap: .8rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #edf0f4; }
.role-access-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.role-access-card h3 { margin: 0; color: var(--text-strong); font-size: 1.1rem; }
.role-access-card header p { margin: .2rem 0 0; color: var(--text-muted); font-size: .76rem; }
.role-access-card section h4 { margin: 1rem 0 .5rem; color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.role-module-grid { display: grid; gap: .5rem; }
.role-module-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid #e1e5ea; border-radius: 10px; cursor: pointer; transition: .18s ease; }
.role-module-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-module-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--text-muted); background: #f1f3f5; font-size: 1.15rem; }
.role-module-card > span:nth-of-type(2) { display: grid; min-width: 0; }
.role-module-card strong { color: var(--text-strong); font-size: .82rem; }
.role-module-card small { overflow: hidden; color: var(--text-muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.role-module-check { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: transparent; background: #eef0f2; }
.role-module-card.selected { border-color: #aeb0ff; background: #f7f7ff; }
.role-module-card.selected .role-module-icon { color: var(--primary); background: var(--primary-soft); }
.role-module-card.selected .role-module-check { color: #fff; background: var(--primary); }
.role-access-card footer { display: flex; justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 1100px) { .role-access-layout { grid-template-columns: 1fr; } }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(135deg, rgba(8,17,31,.9), rgba(8,17,31,.74)),
    radial-gradient(circle at top right, rgba(105,108,255,.28), transparent 34%),
    var(--app-bg);
}

.auth-card {
  width: min(100%, 430px);
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(15, 23, 42, .22);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  color: var(--text-strong);
  font-size: 1.25rem;
  font-weight: 800;
}

.auth-card h1 {
  color: var(--text-strong);
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: .4rem;
}

.auth-card p {
  color: var(--text-main);
}

.auth-form label {
  color: var(--text-strong);
  font-weight: 700;
}

.renewal-box {
  display: grid;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  background: #f8faff;
}

.renewal-box strong {
  color: var(--text-strong);
}

.landing-pro {
  min-height: 100vh;
  background: #08111f;
  color: #f8fafc;
  overflow: hidden;
}

.landing-pro-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(8, 17, 31, .86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.24);
}

.landing-pro-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.2rem;
}

.landing-brand-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--primary);
  font-weight: 900;
}

.landing-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  place-items: center;
  padding: .55rem;
}

.landing-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 999px;
}

.landing-pro-links,
.landing-pro-actions,
.landing-pro-cta,
.landing-pro-proof {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.landing-pro-links a {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  font-weight: 700;
  font-size: .94rem;
}

.landing-pro-links a:hover {
  color: #f4c95d;
}

.landing-pro-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .88fr);
  align-items: center;
  gap: 3rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 8rem 0 4rem;
}

.landing-pro-hero::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: 0;
  background:
    linear-gradient(105deg, rgba(8,17,31,.9) 0%, rgba(8,17,31,.78) 42%, rgba(8,17,31,.56) 100%),
    radial-gradient(circle at 80% 30%, rgba(105,108,255,.32), transparent 34%);
}

.landing-pro-hero > * {
  position: relative;
  z-index: 1;
}

.landing-pro-kicker {
  display: inline-flex;
  width: fit-content;
  color: #f4c95d;
  background: rgba(244,201,93,.12);
  border: 1px solid rgba(244,201,93,.28);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.landing-pro h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 1rem;
  max-width: 820px;
}

.landing-pro-hero-copy p {
  max-width: 720px;
  color: rgba(255,255,255,.82);
  font-size: 1.12rem;
  line-height: 1.75;
  margin-bottom: 1.35rem;
}

.landing-pro-proof {
  margin-top: 1.25rem;
}

.landing-pro-proof span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .45rem .7rem;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.07);
  font-weight: 700;
  font-size: .9rem;
}

.landing-pro-visual {
  background: rgba(255,255,255,.94);
  color: #203047;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.28);
}

.visual-top {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1rem;
  background: #eef2f7;
  border-bottom: 1px solid #dbe3ec;
}

.visual-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9aa8b8;
}

.visual-top strong {
  margin-left: .4rem;
  color: #203047;
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  padding: 1rem;
}

.visual-card,
.visual-schedule {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}

.visual-card {
  display: grid;
  gap: .35rem;
}

.visual-card span,
.visual-schedule span {
  color: #64748b;
  font-size: .88rem;
}

.visual-card strong {
  color: #0f172a;
  font-size: 1.6rem;
}

.visual-card.primary {
  grid-column: span 2;
  background: #0e3a5b;
  color: #fff;
}

.visual-card.primary span,
.visual-card.primary strong {
  color: #fff;
}

.visual-meter {
  height: 8px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  overflow: hidden;
}

.visual-meter i {
  display: block;
  height: 100%;
  background: #f4c95d;
  border-radius: inherit;
}

.visual-schedule {
  grid-column: span 2;
  display: grid;
  gap: .55rem;
}

.visual-schedule div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: .45rem;
}

.visual-schedule div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.landing-pro-section,
.landing-pro-cta-band {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.landing-pro-section {
  padding: 5rem 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-heading > span {
  color: #f4c95d;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.section-heading h2,
.landing-pro-cta-band h2 {
  color: #fff;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: 0;
  margin: .4rem 0 .75rem;
}

.section-heading p {
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: 1.04rem;
}

.operations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.operations-grid article {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 1.2rem;
}

.operations-grid h3 {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 900;
  margin: .45rem 0;
}

.operations-grid p {
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.65;
}

.landing-pro-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #0e3a5b, #145f73);
  border: 1px solid rgba(255,255,255,.16);
}

.landing-pro-cta-band span {
  color: #f4c95d;
  font-weight: 900;
}

.landing-pro-cta-band h2 {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  max-width: 780px;
  margin-bottom: 0;
}

.auth-secondary-link {
  margin-top: 1.1rem;
  text-align: center;
  font-weight: 700;
}

.auth-secondary-link a {
  color: #696cff;
  text-decoration: none;
}

.auth-secondary-link a:hover {
  text-decoration: underline;
}

.sales-login-page { position: relative; display: grid; min-height: 100vh; grid-template-columns: 46% 54%; color: #31354a; background: #fff; }
.sales-login-brand { position: absolute; z-index: 3; top: 36px; left: 46px; display: flex; align-items: center; gap: .75rem; color: #fff; }
.sales-login-brand > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: linear-gradient(145deg,#ff9f43,#ff6b35); box-shadow: 0 10px 24px rgba(12,15,55,.3); font-weight: 900; }
.sales-login-brand strong { display: flex; align-items: baseline; gap: .35rem; font-size: 1.1rem; letter-spacing: -.02em; }
.sales-login-brand small { color: #b8b9dc; font-size: .55rem; letter-spacing: .05em; }
.sales-login-aside { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 168px 7vw 54px 6vw; color: #fff; background: radial-gradient(circle at 72% 17%,rgba(255,159,67,.22),transparent 31%),linear-gradient(145deg,#1d1c50 0%,#313178 58%,#24235e 100%); }
.sales-login-aside::before { position: absolute; top: 18%; right: -190px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 75px rgba(255,255,255,.025),0 0 0 150px rgba(255,159,67,.025); content: ""; }
.sales-login-copy,.sales-login-aside blockquote { position: relative; z-index: 1; }
.sales-login-eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: #ffbc7d; font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.sales-login-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #ff9f43; box-shadow: 0 0 0 5px rgba(255,159,67,.13); }
.sales-login-copy h1 { margin: 1.3rem 0; font-size: clamp(2.75rem,5vw,4.5rem); font-weight: 900; line-height: 1.04; letter-spacing: -.055em; }
.sales-login-copy > p { max-width: 490px; color: #c5c6e2; font-size: 1rem; line-height: 1.75; }
.sales-login-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.sales-login-pills span { padding: .48rem .72rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #dedff1; background: rgba(255,255,255,.055); font-size: .7rem; font-weight: 600; }
.sales-login-aside blockquote { max-width: 480px; margin: 0; padding-left: 1.25rem; border-left: 2px solid #ff9f43; }
.sales-login-aside blockquote > span { color: #ff9f43; font: 800 2.7rem/.5 Georgia,serif; }
.sales-login-aside blockquote p { margin: .5rem 0; font-size: .95rem; font-weight: 600; line-height: 1.6; }
.sales-login-aside blockquote footer { color: #a7a8ce; font-size: .68rem; }
.sales-login-panel { display: flex; min-width: 0; flex-direction: column; padding: 34px 6vw 28px; background: #fff; }
.sales-login-back { align-self: flex-end; color: #7c8192; font-size: .78rem; }
.sales-login-form-wrap { width: min(430px,100%); margin: auto; }
.sales-login-kicker { color: #6569d8; font-size: .67rem; font-weight: 800; letter-spacing: .14em; }
.sales-login-form-wrap h2 { margin: .65rem 0 .45rem; color: #292d41; font-size: 2.15rem; font-weight: 900; letter-spacing: -.04em; }
.sales-login-form-wrap > p { margin-bottom: 1.9rem; color: #7c8192; font-size: .9rem; }
.sales-login-alert { margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid #f2c8c3; border-radius: 9px; color: #a7443f; background: #fff2f0; font-size: .8rem; }
.sales-login-form label { display: block; margin: .95rem 0 .42rem; color: #34384b; font-size: .8rem; font-weight: 700; }
.sales-input-wrap { display: flex; align-items: center; padding: 0 .85rem; border: 1px solid #d9dce5; border-radius: 9px; transition: .18s ease; }
.sales-input-wrap:focus-within { border-color: #7376e6; box-shadow: 0 0 0 3px rgba(105,108,255,.11); }
.sales-input-wrap > span { color: #9b9fad; font-size: .75rem; }
.sales-input-wrap input { width: 100%; height: 50px; padding: 0 .7rem; border: 0; outline: 0; color: #292d41; background: transparent; font-size: .92rem; }
.sales-input-wrap input::placeholder { color: #adb0bb; }
.sales-password-label { display: flex; align-items: center; justify-content: space-between; margin-top: .95rem; }
.sales-password-label label { margin: 0; }
.sales-password-label a { color: #6569d8; font-size: .73rem; font-weight: 700; }
.sales-show-password { min-height: 0!important; padding: .3rem; border: 0; color: #8e92a2; background: transparent; cursor: pointer; }
.sales-field-error { display: block; min-height: .8rem; margin-top: .25rem; color: #b94e47; font-size: .7rem; }
.sales-login-submit { display: flex; width: 100%; height: 51px; align-items: center; justify-content: space-between; margin-top: .75rem; padding: 0 1.15rem; border: 0; color: #fff; background: linear-gradient(100deg,#6064d9,#7779ed); box-shadow: 0 9px 22px rgba(96,100,217,.24); font-weight: 700; }
.sales-login-submit:hover { color: #fff; background: linear-gradient(100deg,#5559cc,#6c6fe5); }
.sales-login-submit i { font-style: normal; font-size: 1.2rem; }
.sales-login-help { display: flex; gap: .7rem; margin-top: 1.7rem; padding-top: 1.25rem; border-top: 1px solid #eceef3; }
.sales-login-help > span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #6569d8; background: #eeeeff; font-weight: 800; }
.sales-login-help p { margin: 0; color: #838796; font-size: .72rem; line-height: 1.55; }
.sales-login-help strong { color: #414558; }
.sales-login-panel > footer { color: #a0a3ae; font-size: .65rem; text-align: center; }
.sales-login-panel > footer a { color: #6569d8; }
@media (max-width:900px) { .sales-login-page { grid-template-columns: 1fr; } .sales-login-aside { display:none; } .sales-login-panel { min-height:100vh; padding-top:calc(34px + env(safe-area-inset-top)); } .sales-login-brand { top:calc(24px + env(safe-area-inset-top)); left:24px; color:#292d41; } .sales-login-brand small { color:#989baa; } .sales-login-back { margin-top:.35rem; } }
@media (max-width:580px) { .sales-login-panel { padding:calc(30px + env(safe-area-inset-top)) 22px 20px; } .sales-login-form-wrap { margin-top:125px; margin-bottom:auto; } .sales-login-form-wrap h2 { font-size:1.85rem; } .sales-login-brand { left:22px; } }
@media (max-width:900px) {
  .sales-login-page,
  .sales-login-page button,
  .sales-login-page a,
  .sales-login-page input { touch-action:manipulation; }
  .sales-login-form input { font-size:16px; }
}

/* Professional login palette and explicit submit state */
.sales-login-page { color:#172033; background:#f8fafc; }
.sales-login-aside { background:radial-gradient(circle at 76% 18%,rgba(37,99,235,.22),transparent 32%),linear-gradient(145deg,#081426 0%,#102b4f 58%,#0b203b 100%); }
.sales-login-aside::before { border-color:rgba(148,163,184,.13); box-shadow:0 0 0 75px rgba(59,130,246,.035),0 0 0 150px rgba(14,165,233,.025); }
.sales-login-brand > span { border-color:rgba(255,255,255,.2); background:linear-gradient(145deg,#2563eb,#0ea5e9); box-shadow:0 10px 28px rgba(2,8,23,.35); }
.sales-login-brand small { color:#9fb3ca; }
.sales-login-eyebrow { color:#7dd3fc; }
.sales-login-eyebrow i { background:#38bdf8; box-shadow:0 0 0 5px rgba(56,189,248,.14); }
.sales-login-copy > p { color:#c2d0df; }
.sales-login-pills span { border-color:rgba(148,163,184,.2); color:#dce7f3; background:rgba(148,163,184,.08); }
.sales-login-aside blockquote { border-left-color:#38bdf8; }
.sales-login-aside blockquote > span { color:#38bdf8; }
.sales-login-aside blockquote footer { color:#91a7bd; }
.sales-login-panel { background:#f8fafc; }
.sales-login-form-wrap { padding:2.1rem; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 24px 65px rgba(15,23,42,.09); }
.sales-login-kicker,.sales-password-label a,.sales-login-panel > footer a { color:#2563eb; }
.sales-login-form-wrap h2 { color:#0f172a; }
.sales-login-form-wrap > p,.sales-login-back { color:#64748b; }
.sales-login-form label { color:#334155; }
.sales-input-wrap { border-color:#cbd5e1; border-radius:10px; background:#fff; }
.sales-input-wrap:hover { border-color:#94a3b8; }
.sales-input-wrap:focus-within { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.sales-input-wrap input { color:#0f172a; }
.sales-login-submit { position:relative; justify-content:center; gap:.65rem; height:52px; border-radius:10px; color:#fff; background:#1d4ed8; box-shadow:0 10px 24px rgba(29,78,216,.22); font-weight:750; letter-spacing:.01em; transition:background .18s ease,box-shadow .18s ease,transform .18s ease; }
.sales-login-submit:hover,.sales-login-submit:focus { color:#fff; background:#1e40af; box-shadow:0 12px 28px rgba(29,78,216,.3); }
.sales-login-submit:active { transform:translateY(1px); }
.sales-login-submit .sales-submit-arrow { position:absolute; right:1.15rem; }
.sales-submit-loading { display:none; align-items:center; gap:.6rem; }
.sales-submit-loading b { width:1rem; height:1rem; border:2px solid rgba(255,255,255,.38); border-top-color:#fff; border-radius:50%; animation:button-loading-spin .65s linear infinite; }
.sales-login-submit.is-loading::after { display:none; }
.sales-login-submit.is-loading > * { visibility:visible; }
.sales-login-submit.is-loading .sales-submit-idle,.sales-login-submit.is-loading .sales-submit-arrow { display:none; }
.sales-login-submit.is-loading .sales-submit-loading { display:inline-flex; }
.sales-login-submit:disabled { color:#fff; background:#1d4ed8; opacity:1; }
.sales-login-help > span { color:#2563eb; background:#eff6ff; }
@media (max-width:900px) { .sales-login-brand { color:#0f172a; } }
@media (max-width:580px) { .sales-login-form-wrap { padding:1.4rem; box-shadow:0 16px 45px rgba(15,23,42,.07); } }

.sales-landing{--sl-ink:#24273a;--sl-indigo:#292861;--sl-violet:#6468db;--sl-orange:#ff9248;overflow:hidden;color:var(--sl-ink);background:#fff}.sales-nav{position:fixed;z-index:100;top:18px;left:50%;display:flex;width:min(1180px,calc(100% - 32px));align-items:center;justify-content:space-between;gap:24px;padding:11px 14px 11px 17px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(29,28,80,.88);box-shadow:0 18px 50px rgba(12,15,55,.2);backdrop-filter:blur(16px)}.sales-nav-brand{display:flex;align-items:center;gap:10px;color:#fff}.sales-nav-brand>span{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;background:linear-gradient(145deg,#ff9f43,#ff6b35);font-weight:900}.sales-nav-brand strong{display:flex;align-items:baseline;gap:4px;font-size:16px}.sales-nav-brand small{color:#b9bade;font-size:7px}.sales-nav-links,.sales-nav-actions,.sales-hero-actions,.sales-hero-proof{display:flex;align-items:center;gap:20px}.sales-nav-links a{color:#d2d3e8;font-size:13px;font-weight:650}.sales-nav-links a:hover{color:#ffb274}.sales-nav-login{color:#fff;font-size:13px;font-weight:700}.sales-nav-cta,.sales-primary-action{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:8px;color:#fff;background:linear-gradient(105deg,#ff9f43,#ff7438);font-size:13px;font-weight:800;box-shadow:0 9px 22px rgba(255,116,56,.22)}.sales-nav-cta{padding:11px 15px}.sales-nav-toggle{display:none;width:39px;height:39px;padding:9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.07)}.sales-nav-toggle i{display:block;height:2px;margin:4px 0;border-radius:2px;background:#fff}.sales-hero{display:grid;min-height:780px;grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);align-items:center;gap:55px;padding:145px max(32px,calc((100vw - 1180px)/2)) 90px;color:#fff;background:radial-gradient(circle at 83% 18%,rgba(255,146,72,.2),transparent 27%),linear-gradient(145deg,#1c1b4d,#303073 62%,#24235d)}.sales-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#ffb77f;font-size:10px;font-weight:850;letter-spacing:.12em}.sales-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sl-orange);box-shadow:0 0 0 5px rgba(255,146,72,.13)}.sales-eyebrow.dark{color:var(--sl-violet)}.sales-hero h1{margin:20px 0 22px;font-size:clamp(46px,5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-.055em}.sales-hero h1 em{color:#ffad70;font-style:normal}.sales-hero-copy>p{max-width:650px;color:#c6c7e1;font-size:17px;line-height:1.72}.sales-hero-actions{margin-top:30px}.sales-primary-action{padding:15px 19px}.sales-secondary-action{display:inline-flex;padding:14px 18px;border:1px solid rgba(255,255,255,.24);border-radius:8px;color:#fff;font-size:13px;font-weight:750}.sales-secondary-action.light{border-color:#d6d8e4;color:#40445d}.sales-hero-proof{flex-wrap:wrap;margin-top:28px;gap:16px;color:#b8b9d5;font-size:11px}.sales-hero-proof b{margin-right:5px;color:#ff9f43}.sales-product-window{overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:14px;color:#32364c;background:#f7f8fc;box-shadow:0 35px 90px rgba(8,10,42,.42);transform:perspective(1300px) rotateY(-3deg) rotateX(1deg)}.sales-product-window>header{display:grid;height:44px;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 14px;border-bottom:1px solid #e4e6ed;background:#fff;font-size:9px}.sales-product-window>header div{display:flex;gap:5px}.sales-product-window>header div i{width:7px;height:7px;border-radius:50%;background:#d9dbe3}.sales-product-window>header strong{text-align:center}.sales-product-window>header>span{color:#8c90a0;text-align:right}.sales-window-body{display:grid;min-height:415px;grid-template-columns:53px 1fr}.sales-window-body>aside{display:flex;align-items:center;flex-direction:column;gap:25px;padding-top:15px;color:#fff;background:#27275f}.sales-window-body>aside b{display:grid;width:29px;height:29px;place-items:center;border-radius:7px;background:var(--sl-orange);font-size:10px}.sales-window-body>aside i{width:16px;height:5px;border-radius:4px;background:#7778a5}.sales-window-body>aside i.active{height:16px;background:#fff}.sales-dashboard-preview{padding:25px}.sales-preview-heading{display:grid}.sales-preview-heading span{color:#9a9daa;font-size:8px}.sales-preview-heading strong{font-size:18px}.sales-preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.sales-preview-metrics article{display:grid;gap:3px;padding:13px;border:1px solid #e8e9ef;border-radius:9px;background:#fff}.sales-preview-metrics span,.sales-preview-metrics small{color:#9295a3;font-size:7px}.sales-preview-metrics strong{font-size:13px}.sales-preview-metrics small{color:#4cb58c}.sales-preview-main{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}.sales-chart,.sales-live-list{padding:14px;border:1px solid #e8e9ef;border-radius:9px;background:#fff}.sales-chart header{display:flex;justify-content:space-between;font-size:9px}.sales-chart header span{color:#999cab}.sales-bars{display:flex;height:135px;align-items:flex-end;justify-content:space-around;gap:8px;padding-top:20px;border-bottom:1px solid #e8e9ef;background:repeating-linear-gradient(#fff,#fff 32px,#f0f1f5 33px)}.sales-bars i{width:16px;border-radius:4px 4px 0 0;background:linear-gradient(#777bea,#565ad0)}.sales-live-list>strong{font-size:9px}.sales-live-list>div{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;padding:10px 0;border-bottom:1px solid #eee}.sales-live-list>div>i{display:grid;width:24px;height:24px;place-items:center;border-radius:6px;color:#fff;font-size:8px;font-style:normal}.sales-live-list .violet{background:#676bdd}.sales-live-list .orange{background:#ff9148}.sales-live-list .blue{background:#4da5db}.sales-live-list span{display:grid;font-size:8px}.sales-live-list small{color:#9a9daa;font-size:6px}.sales-live-list b{font-size:8px}.sales-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);width:min(1180px,calc(100% - 32px));margin:-34px auto 0;position:relative;z-index:3;border:1px solid #e5e6ec;border-radius:12px;background:#fff;box-shadow:0 18px 48px rgba(35,38,72,.12)}.sales-stat-strip div{display:grid;gap:2px;padding:23px 30px;border-right:1px solid #e8e9ee}.sales-stat-strip div:last-child{border:0}.sales-stat-strip strong{color:var(--sl-indigo);font-size:24px}.sales-stat-strip span{color:#858999;font-size:10px}.sales-section,.sales-process-section{width:min(1180px,calc(100% - 32px));margin:auto;padding:100px 0}.sales-section-heading{max-width:760px;margin-bottom:38px}.sales-section-heading>span,.sales-final-cta>div>span,.sales-channel-grid>article>div>span{color:var(--sl-violet);font-size:10px;font-weight:850;letter-spacing:.13em}.sales-section-heading h2,.sales-erp-copy h2{margin:10px 0 12px;color:var(--sl-ink);font-size:clamp(32px,4vw,48px);font-weight:900;line-height:1.08;letter-spacing:-.045em}.sales-section-heading p,.sales-erp-copy>p{color:#737888;font-size:15px;line-height:1.75}.sales-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.sales-solution-grid article{position:relative;min-height:360px;padding:24px;border:1px solid #e3e5eb;border-radius:13px;background:#fff;box-shadow:0 12px 34px rgba(35,38,72,.06);transition:.2s}.sales-solution-grid article:hover{transform:translateY(-5px);border-color:#babced;box-shadow:0 20px 45px rgba(35,38,72,.11)}.sales-solution-number{position:absolute;top:20px;right:20px;color:#c9cbd5;font-size:10px;font-weight:800}.sales-solution-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(145deg,#6569dd,#8486eb);font-size:21px}.sales-solution-grid article:nth-child(2) .sales-solution-icon,.sales-solution-grid article:nth-child(4) .sales-solution-icon{background:linear-gradient(145deg,#ff9f43,#ff7438)}.sales-solution-grid h3{margin:22px 0 9px;font-size:19px;font-weight:850}.sales-solution-grid p{min-height:88px;color:#747988;font-size:12px;line-height:1.65}.sales-solution-grid ul{display:grid;gap:8px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid #eceef2;list-style:none}.sales-solution-grid li{color:#565b6c;font-size:11px}.sales-solution-grid li:before{margin-right:7px;color:#686cdf;content:"✓"}.sales-erp-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding:100px max(32px,calc((100vw - 1180px)/2));background:#f5f6fb}.sales-erp-copy{align-self:center}.sales-erp-copy>a{display:inline-flex;gap:12px;margin-top:12px;color:var(--sl-violet);font-size:13px;font-weight:800}.sales-erp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sales-erp-grid article{display:flex;gap:13px;padding:18px;border:1px solid #e1e3eb;border-radius:11px;background:#fff}.sales-erp-grid article>span{display:grid;width:31px;height:31px;flex:0 0 auto;place-items:center;border-radius:8px;color:#6569d8;background:#ededff;font-size:9px;font-weight:850}.sales-erp-grid strong{font-size:13px}.sales-erp-grid p{margin:5px 0 0;color:#7c8190;font-size:10px;line-height:1.55}.sales-channel-section{padding-bottom:110px}.sales-channel-grid{display:grid;gap:18px}.sales-channel-grid>article{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;min-height:450px;padding:50px;border-radius:17px;background:#f5f6fb}.sales-channel-grid>article:nth-child(2){background:#292861;color:#fff}.sales-channel-grid h3{margin:9px 0 13px;font-size:30px;font-weight:900;line-height:1.1;letter-spacing:-.04em}.sales-channel-grid p{color:#747989;font-size:13px;line-height:1.7}.sales-channel-grid>article:nth-child(2) p{color:#c2c3de}.sales-phone-mock{width:270px;margin:auto;overflow:hidden;border:7px solid #262939;border-radius:30px;background:#fff;box-shadow:0 25px 55px rgba(31,34,66,.2)}.sales-phone-mock header,.sales-phone-mock footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#33374a;font-size:8px}.sales-phone-mock section{padding:15px}.sales-phone-mock section>small{color:#787cdd;font-size:7px}.sales-phone-mock h4{margin:4px 0 15px;font-size:19px}.sales-phone-mock section>div{display:grid;grid-template-columns:38px 1fr auto;align-items:center;padding:11px 0;border-bottom:1px solid #eee;font-size:9px}.sales-phone-mock section>div span{display:grid}.sales-phone-mock section small{color:#9296a5}.sales-phone-mock button{width:100%;margin-top:16px;padding:11px;border:0;border-radius:8px;color:#fff;background:#666ade;font-size:9px}.sales-phone-mock footer{color:#696ddd;background:#f7f8fb;font-size:14px}.sales-channel-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.sales-channel-tags i{padding:7px 10px;border:1px solid rgba(255,255,255,.15);border-radius:20px;color:#dedff0;background:rgba(255,255,255,.06);font-size:9px;font-style:normal}.sales-shop-mock{overflow:hidden;border-radius:12px;color:#363a4c;background:#fff;box-shadow:0 24px 55px rgba(8,10,42,.3)}.sales-shop-mock>header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px;border-bottom:1px solid #eee;font-size:9px}.sales-shop-mock>header span{padding:8px;border-radius:6px;color:#9b9eaa;background:#f4f5f8}.sales-shop-mock>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:13px}.sales-shop-mock article{display:grid;gap:6px;font-size:8px}.sales-shop-mock article>i{height:95px;border-radius:7px;background:linear-gradient(145deg,#eeeef7,#d8d9eb)}.sales-shop-mock article:nth-child(2)>i{background:linear-gradient(145deg,#fff1e8,#f3c9ac)}.sales-shop-mock article span{color:#6569d8;font-weight:800}.sales-process-section{padding-top:40px}.sales-process{display:grid;grid-template-columns:repeat(9,auto);align-items:center;gap:12px}.sales-process article{min-height:145px;padding:18px;border:1px solid #e3e5eb;border-radius:11px;background:#fff}.sales-process article b{color:#ff8640;font-size:10px}.sales-process article span{display:block;margin:15px 0 7px;font-size:13px;font-weight:850}.sales-process article p{margin:0;color:#838796;font-size:9px;line-height:1.5}.sales-process>i{color:#b8bac6;font-style:normal}.sales-final-cta{display:flex;width:min(1180px,calc(100% - 32px));align-items:center;justify-content:space-between;gap:35px;margin:20px auto 70px;padding:42px;border:1px solid #dedff0;border-radius:17px;background:linear-gradient(125deg,#f4f4ff,#fff5ed)}.sales-final-cta h2{max-width:760px;margin:9px 0 0;font-size:clamp(25px,3vw,38px);font-weight:900;line-height:1.12;letter-spacing:-.04em}.sales-final-cta>div:last-child{display:flex;gap:10px;flex:0 0 auto}.sales-footer{display:flex;align-items:center;justify-content:space-between;padding:30px max(32px,calc((100vw - 1180px)/2));color:#a9aac9;background:#1d1c50;font-size:10px}.sales-footer p{margin:0}.sales-footer>.sales-nav-brand>span{width:32px;height:32px}.sales-footer>.sales-nav-brand strong{font-size:13px}
@media(max-width:1050px){.sales-nav-links{display:none}.sales-hero{grid-template-columns:1fr;padding-top:160px}.sales-product-window{max-width:760px;transform:none}.sales-solution-grid{grid-template-columns:repeat(2,1fr)}.sales-erp-section{grid-template-columns:1fr}.sales-process{grid-template-columns:repeat(5,1fr)}.sales-process>i{display:none}.sales-channel-grid>article{gap:35px}.sales-nav-toggle{display:block;margin-left:auto}.sales-nav.open{flex-wrap:wrap}.sales-nav.open .sales-nav-links{display:flex;width:100%;order:4;flex-direction:column;align-items:flex-start;padding:10px}.sales-nav-actions{gap:10px}}
@media(max-width:700px){.sales-nav{top:10px}.sales-nav-actions .sales-nav-cta{display:none}.sales-hero{min-height:auto;padding:135px 20px 70px}.sales-hero h1{font-size:44px}.sales-hero-copy>p{font-size:15px}.sales-hero-actions{align-items:stretch;flex-direction:column}.sales-hero-actions a{text-align:center}.sales-product-window{display:none}.sales-stat-strip{grid-template-columns:repeat(2,1fr);margin:-25px auto 0}.sales-stat-strip div:nth-child(2){border-right:0}.sales-stat-strip div{padding:18px}.sales-section,.sales-process-section{padding:75px 0}.sales-solution-grid,.sales-erp-grid{grid-template-columns:1fr}.sales-solution-grid article{min-height:auto}.sales-solution-grid p{min-height:auto}.sales-erp-section{padding:75px 20px;gap:40px}.sales-channel-grid>article{grid-template-columns:1fr;padding:28px 20px}.sales-channel-grid>article>div:first-child{order:2}.sales-channel-grid>article:nth-child(2)>div:first-child{order:0}.sales-shop-mock{width:100%}.sales-process{grid-template-columns:1fr}.sales-process article{min-height:auto}.sales-final-cta{align-items:flex-start;flex-direction:column;padding:28px 22px}.sales-final-cta>div:last-child{width:100%;align-items:stretch;flex-direction:column}.sales-footer{align-items:flex-start;flex-direction:column;gap:15px}.sales-footer p{display:none}}

.company-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  white-space: nowrap;
}

.company-row-actions form {
  margin: 0;
}

.user-permission-form-group {
  display: grid;
  gap: .45rem;
  padding: .7rem 0;
  border-top: 1px solid #edf0f4;
}

.user-permission-form-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.user-permission-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .45rem .85rem;
}

.tracking-panel {
  overflow: hidden;
}

.tracking-panel-header {
  align-items: flex-start;
  gap: 1rem;
}

.panel-subtitle {
  margin: .25rem 0 0;
  color: #6f7f95;
}

.tracking-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.tracking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
}

.tracking-map {
  min-height: 420px;
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  overflow: hidden;
}

.tracking-users {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.tracking-user-list {
  display: grid;
  gap: .5rem;
}

.tracking-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: #fff;
  color: #2f3a4b;
  padding: .75rem;
  text-align: left;
}

.tracking-user-item:hover {
  border-color: #696cff;
  color: #4f46e5;
}

.tracking-user-item.is-stale {
  background: #fff8ec;
}

.tracking-user-item span {
  display: grid;
  min-width: 0;
}

.tracking-user-item small {
  color: #7a8aa0;
}

.tracking-user-item i {
  font-size: 1.2rem;
}

.tracking-settings-form {
  margin: 0;
}

.tracking-refresh-input {
  max-width: 8rem;
}

@media (max-width: 991.98px) {
  .landing-pro {
    padding: 1rem;
  }

  .landing-pro-nav {
    position: relative;
    align-items: flex-start;
  }

  .landing-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: .25rem;
    border: 0;
    background: transparent;
    padding: .45rem;
    margin-left: auto;
  }

  .landing-menu-toggle span {
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .landing-pro-links,
  .landing-pro-actions {
    display: none;
  }

  .landing-pro-nav.open .landing-pro-links,
  .landing-pro-nav.open .landing-pro-actions {
    display: flex;
    width: 100%;
  }

  .landing-pro-nav.open {
    flex-wrap: wrap;
  }

  .landing-pro-nav.open .landing-pro-links {
    order: 3;
    flex-direction: column;
    margin-top: .75rem;
  }

  .landing-pro-nav.open .landing-pro-actions {
    order: 4;
    margin-top: .75rem;
  }

  .landing-pro-hero,
  .operations-grid {
    grid-template-columns: 1fr;
  }

  .landing-pro-hero {
    padding-top: 3rem;
  }

  .landing-pro-visual {
    min-height: auto;
  }

  .visual-grid {
    grid-template-columns: 1fr;
  }

  .landing-pro-cta-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .tracking-layout {
    grid-template-columns: 1fr;
  }

  .tracking-toolbar {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .auth-page {
    padding: 1rem;
  }

  .auth-card {
    padding: 1.35rem;
  }

  .landing-pro-hero-copy h1 {
    font-size: 2.25rem;
  }

  .landing-pro-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-pro-proof {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Operational dashboard */
.dashboard-analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.dashboard-chart-panel { min-width:0; padding:1.25rem; }
.dashboard-chart-wide { grid-column:span 2; }
.chart-total { color:#384551; font-size:1.1rem; white-space:nowrap; }
.sales-bar-chart { align-items:end; display:grid; gap:clamp(.45rem,2vw,1.15rem); grid-template-columns:repeat(7,1fr); height:250px; padding-top:1rem; }
.sales-bar-column { align-items:center; display:grid; grid-template-rows:1.5rem 1fr 1.25rem; height:100%; min-width:0; text-align:center; }
.sales-bar-column > span { color:#697a8d; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; }
.sales-bar-track { align-items:end; background:#f2f3ff; border-radius:9px 9px 4px 4px; display:flex; height:100%; overflow:hidden; width:min(42px,70%); }
.sales-bar-track i { background:linear-gradient(180deg,#696cff,#9b9dfd); border-radius:9px 9px 4px 4px; display:block; min-height:4px; transition:height .35s ease; width:100%; }
.sales-bar-column small { color:#697a8d; font-weight:700; padding-top:.35rem; text-transform:capitalize; }
.status-stack,.channel-chart,.dashboard-ranking,.stock-alert-list { display:grid; gap:1rem; }
.status-stack-row,.channel-chart-row { display:grid; gap:.45rem; }
.status-stack-row > div:first-child,.channel-chart-row > div:first-child { align-items:center; display:flex; gap:.5rem; }
.status-stack-row em,.channel-chart-row span { color:#697a8d; font-size:.8rem; font-style:normal; margin-left:auto; }
.chart-dot { border-radius:50%; display:inline-block; height:.65rem; width:.65rem; }
.analytics-progress { background:#f0f2f5; border-radius:999px; height:.5rem; overflow:hidden; }
.analytics-progress i { border-radius:inherit; display:block; height:100%; min-width:3px; }
.chart-dot.tone-primary,.analytics-progress i.tone-primary { background:#696cff; }
.chart-dot.tone-warning,.analytics-progress i.tone-warning { background:#ffab00; }
.chart-dot.tone-success,.analytics-progress i.tone-success { background:#71dd37; }
.chart-dot.tone-info,.analytics-progress i.tone-info { background:#03c3ec; }
.chart-dot.tone-danger,.analytics-progress i.tone-danger { background:#ff3e1d; }
.chart-dot.tone-secondary,.analytics-progress i.tone-secondary { background:#8592a3; }
.dashboard-ranking > div,.stock-alert-list > div { align-items:center; border-bottom:1px solid #edf0f4; display:flex; gap:.75rem; padding-bottom:.75rem; }
.dashboard-ranking > div:last-child,.stock-alert-list > div:last-child { border-bottom:0; }
.dashboard-ranking b { align-items:center; background:#f0f1ff; border-radius:50%; color:#696cff; display:flex; flex:0 0 1.8rem; height:1.8rem; justify-content:center; }
.dashboard-ranking span,.stock-alert-list span { display:grid; min-width:0; }
.dashboard-ranking strong,.stock-alert-list strong { color:#384551; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-ranking small,.stock-alert-list small { color:#8592a3; }
.dashboard-ranking em { color:#384551; font-style:normal; font-weight:700; margin-left:auto; white-space:nowrap; }
.stock-alert-list b { background:#fff4e5; border-radius:999px; color:#ffab00; margin-left:auto; padding:.3rem .65rem; }
.stock-alert-list b.is-empty { background:#ffe8e3; color:#ff3e1d; }
.dashboard-empty-copy { color:#8592a3; margin:0; padding:.75rem 0; }
@media (max-width: 991.98px) { .dashboard-analytics-grid { grid-template-columns:1fr; } .dashboard-chart-wide { grid-column:auto; } }
@media (max-width: 575.98px) { .dashboard-chart-panel { padding:1rem; } .sales-bar-chart { gap:.3rem; height:210px; } .sales-bar-column > span { font-size:.62rem; } }

/* Unified professional application theme */
:root {
  --app-bg:#f3f6fa;
  --panel-bg:#ffffff;
  --text-main:#475569;
  --text-strong:#0f172a;
  --text-muted:#64748b;
  --primary:#2563eb;
  --primary-soft:#eff6ff;
  --success:#16a34a;
  --success-soft:#ecfdf3;
  --info:#0284c7;
  --info-soft:#f0f9ff;
  --warning:#d97706;
  --warning-soft:#fffbeb;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --border:#dbe3ec;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.055);
}
body { color:var(--text-main); background:var(--app-bg); }
.app-sidebar { border-right:1px solid rgba(148,163,184,.14); color:#cbd5e1; background:#0f2038; box-shadow:8px 0 30px rgba(15,23,42,.08); }
.app-sidebar .brand { color:#fff; }
.app-sidebar .brand-mark { color:#fff; background:#2563eb; box-shadow:0 8px 20px rgba(37,99,235,.28); }
.app-sidebar .tenant-context { border-color:rgba(148,163,184,.16); background:rgba(255,255,255,.055); }
.app-sidebar .tenant-context-label,.app-sidebar .menu-label { color:#8294aa; }
.app-sidebar .tenant-context-company strong { color:#f8fafc; }
.app-sidebar .tenant-context-mark { color:#93c5fd; background:rgba(37,99,235,.18); }
.app-sidebar .menu-link { color:#b8c5d5; }
.app-sidebar .menu-link:hover,.app-sidebar .menu-link:focus { color:#fff; background:rgba(255,255,255,.075); }
.app-sidebar .menu-link.active { color:#fff; background:linear-gradient(90deg,rgba(37,99,235,.9),rgba(37,99,235,.62)); box-shadow:0 8px 20px rgba(2,8,23,.16); }
.app-sidebar .submenu-link { color:#9eafc2; }
.app-sidebar .submenu-link:hover,.app-sidebar .submenu-link.active { color:#fff; }
.app-sidebar .favorite-dot { color:#61748a; }
.app-sidebar .favorite-dot:hover,.app-sidebar .favorite-dot.active { color:#fbbf24; }
.topbar { border:1px solid rgba(219,227,236,.85); border-radius:.75rem; background:rgba(255,255,255,.94); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.icon-button,.user-pill { border:1px solid #e2e8f0; color:#475569; background:#f8fafc; }
.icon-button:hover { border-color:#bfdbfe; color:var(--primary); background:var(--primary-soft); }
.avatar { background:linear-gradient(145deg,#2563eb,#1d4ed8); }
.panel,.module-card,.metric-card { border:1px solid #e2e8f0; border-radius:.75rem; box-shadow:var(--shadow); }
.metric-card { position:relative; overflow:hidden; }
.metric-card::after { position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg,#2563eb,#60a5fa); content:""; }
.metric-icon,.module-icon { border-radius:.65rem; }
.tone-primary { color:#1d4ed8; background:#eff6ff; }
.tone-success { color:#15803d; background:#ecfdf3; }
.tone-info { color:#0369a1; background:#f0f9ff; }
.tone-warning { color:#b45309; background:#fffbeb; }
.tone-danger { color:#b91c1c; background:#fef2f2; }
.tone-muted,.tone-secondary { color:#475569; background:#f1f5f9; }
.btn { border-radius:.5rem; font-weight:700; }
.btn-primary { border-color:#2563eb; color:#fff; background:#2563eb; box-shadow:0 4px 12px rgba(37,99,235,.16); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active { border-color:#1d4ed8!important; color:#fff!important; background:#1d4ed8!important; }
.btn-outline-primary { border-color:#93c5fd; color:#1d4ed8; }
.btn-outline-primary:hover,.btn-outline-primary:focus { border-color:#2563eb; color:#fff; background:#2563eb; }
.btn-secondary,.btn-outline-secondary:hover { border-color:#475569; color:#fff; background:#475569; }
.form-control,.form-select { border-color:#cbd5e1; border-radius:.5rem; color:#0f172a; background-color:#fff; }
.form-control:hover,.form-select:hover { border-color:#94a3b8; }
.form-control:focus,.form-select:focus,.btn:focus { border-color:#2563eb; box-shadow:0 0 0 .18rem rgba(37,99,235,.14); }
.table thead th { border-bottom-color:#dbe3ec; color:#475569; background:#f8fafc; letter-spacing:.025em; }
.table tbody tr { transition:background .14s ease; }
.table tbody tr:hover { background:#f8fafc; }
.table td { border-color:#edf1f5; }
.status-badge { border:1px solid currentColor; border-color:color-mix(in srgb,currentColor 20%,transparent); }
.page-loading-bar span { background:linear-gradient(90deg,#1d4ed8,#38bdf8,#1d4ed8); box-shadow:0 0 12px rgba(37,99,235,.48); }
.mobile-bottom-nav { border-top-color:#dbe3ec; background:rgba(255,255,255,.97); box-shadow:0 -10px 30px rgba(15,23,42,.08); }
.mobile-bottom-link { color:#64748b; }
.mobile-bottom-link.active,.mobile-bottom-link:hover,.mobile-bottom-link:focus-visible { color:#1d4ed8; }

/* Jedinstveni mobilni PWA shell za sve role. Desktop zadržava klasični sidebar. */
@media (max-width: 991.98px) {
  html,
  body { overscroll-behavior-x:none; overscroll-behavior-y:none; }
  body:not(.role-mobile-mode) { background:#eef1f6; }
  body:not(.role-mobile-mode) .app-shell { display:block; min-height:100dvh; }
  body:not(.role-mobile-mode) .app-sidebar { display:none; }
  body:not(.role-mobile-mode) .app-main { min-height:100dvh; }
  body:not(.role-mobile-mode) .content { padding:1rem 1rem calc(6.25rem + env(safe-area-inset-bottom)); }
  body:not(.role-mobile-mode) .app-footer { display:none; }
  .mobile-bottom-nav { display:grid; width:100%; }
  .topbar,
  .role-mobile-mode .topbar {
    margin-top:calc(8px + env(safe-area-inset-top)) !important;
    overflow:visible;
    border-radius:16px !important;
  }
  .role-mobile-mode .topbar { margin-right:8px !important; margin-left:8px !important; }
  .topbar > .icon-button[data-bs-target="#mobileMenu"],
  .topbar .topbar-logout,
  .topbar .topbar-actions .icon-button { border-radius:12px; }
  .topbar .topbar-actions { border-radius:12px; }
  .topbar .icon-button[data-bs-target="#mobileMenu"] { display:inline-grid !important; }
  #mobileMenu.offcanvas-start {
    top:calc(76px + env(safe-area-inset-top));
    bottom:0;
    height:auto;
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    box-shadow:12px 18px 36px rgba(15,23,42,.2);
  }
  #mobileMenu .offcanvas-header { padding-top:1.15rem; }
  #mobileMenu .offcanvas-body { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  .topbar-logout span{display:none}.topbar-logout i{margin:0!important}.topbar-logout{width:40px;height:40px;justify-content:center;padding:0}
  .topbar-actions > .btn-primary,
  .topbar-actions > .icon-button[title="Meni"],
  .topbar-actions > .icon-button[title="Puni ekran"] { display:none; }

  .table-responsive { overflow:visible; }
  .table-responsive table.responsive-cards,
  table.responsive-cards tbody,
  table.responsive-cards tr,
  table.responsive-cards td { display:block; width:100%; }
  table.responsive-cards thead { display:none; }
  table.responsive-cards tbody { display:grid; gap:.8rem; }
  table.responsive-cards tr { overflow:hidden; border:1px solid #dfe6ef; border-radius:15px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.06); }
  table.responsive-cards td { display:grid; grid-template-columns:minmax(105px,38%) minmax(0,1fr); gap:.75rem; align-items:center; padding:.7rem .85rem !important; border:0 !important; border-bottom:1px solid #edf1f5 !important; text-align:right !important; white-space:normal; }
  table.responsive-cards td:last-child { border-bottom:0 !important; }
  table.responsive-cards td::before { content:attr(data-mobile-label); color:#718096; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-align:left; text-transform:uppercase; }
  table.responsive-cards td[colspan] { display:block; text-align:center !important; }
  table.responsive-cards td[colspan]::before { display:none; }
}

.mobile-pull-refresh {
  position:fixed;
  z-index:2147483000;
  top:calc(10px + env(safe-area-inset-top));
  left:50%;
  display:none;
  width:46px;
  height:46px;
  place-items:center;
  transform:translate(-50%,-70px) scale(.82);
  border:1px solid #dbeafe;
  border-radius:50%;
  color:#2563eb;
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 28px rgba(15,23,42,.2);
  opacity:0;
  transition:transform .12s ease,opacity .12s ease;
  pointer-events:none;
}
.mobile-pull-refresh i { font-size:1.45rem; transition:transform .08s linear; }
.mobile-pull-refresh.is-visible { opacity:1; }
.mobile-pull-refresh.is-ready { color:#fff; border-color:#2563eb; background:#2563eb; }
.mobile-pull-refresh.is-refreshing { transform:translate(-50%,0) scale(1); opacity:1; }
.mobile-pull-refresh.is-refreshing i { animation:mobile-refresh-spin .7s linear infinite; }
@keyframes mobile-refresh-spin { to { transform:rotate(360deg); } }
@media (max-width:991.98px) and (pointer:coarse) { .mobile-pull-refresh { display:grid; } }
.analytics-progress { background:#e8eef5; }
.chart-dot.tone-primary,.analytics-progress i.tone-primary { background:#2563eb; }
.chart-dot.tone-warning,.analytics-progress i.tone-warning { background:#d97706; }
.chart-dot.tone-success,.analytics-progress i.tone-success { background:#16a34a; }
.chart-dot.tone-info,.analytics-progress i.tone-info { background:#0284c7; }
.chart-dot.tone-danger,.analytics-progress i.tone-danger { background:#dc2626; }
.sales-bar-track { background:#eff6ff; }
.sales-bar-track i { background:linear-gradient(180deg,#3b82f6,#1d4ed8); }
@media (max-width:767.98px) { .topbar { border-right:0; border-left:0; border-radius:0; } }

/* Public site follows the same navy/blue identity */
.sales-landing { --sl-ink:#0f172a; --sl-indigo:#0f2038; --sl-violet:#2563eb; --sl-orange:#0ea5e9; }
.sales-nav { background:rgba(9,25,46,.92); box-shadow:0 18px 50px rgba(2,8,23,.22); }
.sales-nav-brand>span,.sales-nav-cta,.sales-primary-action { background:linear-gradient(145deg,#2563eb,#0284c7); box-shadow:0 9px 22px rgba(37,99,235,.24); }
.sales-nav-links a:hover,.sales-eyebrow,.sales-hero h1 em { color:#7dd3fc; }
.sales-eyebrow i { background:#38bdf8; box-shadow:0 0 0 5px rgba(56,189,248,.14); }
.sales-hero { background:radial-gradient(circle at 83% 18%,rgba(14,165,233,.18),transparent 28%),linear-gradient(145deg,#081426,#102b4f 62%,#0b203b); }
.sales-window-body>aside,.sales-channel-grid>article:nth-child(2),.sales-footer { background:#0f2038; }
.sales-window-body>aside b,.sales-live-list .orange { background:#0ea5e9; }
.sales-bars i,.sales-solution-icon { background:linear-gradient(145deg,#3b82f6,#1d4ed8); }
.sales-solution-grid article:nth-child(2) .sales-solution-icon,.sales-solution-grid article:nth-child(4) .sales-solution-icon { background:linear-gradient(145deg,#0ea5e9,#0369a1); }
.sales-preview-metrics small { color:#15803d; }
.sales-process article b,.sales-hero-proof b { color:#0284c7; }
.sales-final-cta { border-color:#dbeafe; background:linear-gradient(125deg,#eff6ff,#f8fafc); }

/* Landing 2026 refresh */
.sales-landing{--sl-ink:#0b1628;--sl-indigo:#071a33;--sl-violet:#3978f6;--sl-orange:#38bdf8;background:#f8fafc}
.sales-nav{top:22px;width:min(1210px,calc(100% - 36px));padding:10px 12px 10px 18px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(7,26,51,.78);box-shadow:0 24px 70px rgba(2,12,27,.28);backdrop-filter:blur(24px) saturate(140%)}
.sales-nav-brand>span{width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:linear-gradient(145deg,#4f8cff,#1367df);box-shadow:0 10px 25px rgba(17,103,223,.34)}
.sales-nav-brand strong{font-size:17px;letter-spacing:-.02em}.sales-nav-brand small{color:#8fb9ec;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.sales-nav-links{gap:7px}.sales-nav-links a{padding:10px 13px;border-radius:10px;color:#c8d7ea;font-size:12px;transition:background .2s,color .2s}.sales-nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.sales-nav-login{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border:1px solid rgba(255,255,255,.22);border-radius:13px;color:#0b1c33;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16);transition:transform .2s,box-shadow .2s}.sales-nav-login:hover{color:#0b1c33;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.sales-login-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;color:#fff;background:#1769e0;font-size:15px}
.sales-hero{position:relative;isolation:isolate;min-height:850px;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:70px;padding-top:165px;background:radial-gradient(circle at 80% 12%,rgba(56,189,248,.24),transparent 27%),radial-gradient(circle at 5% 72%,rgba(57,120,246,.18),transparent 31%),linear-gradient(138deg,#061427 0%,#0b2748 56%,#0d3158 100%)}
.sales-hero:before,.sales-hero:after{position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.08);border-radius:50%;content:""}.sales-hero:before{top:100px;right:-180px;width:650px;height:650px}.sales-hero:after{right:170px;bottom:-230px;width:480px;height:480px}
.sales-eyebrow{padding:8px 12px;border:1px solid rgba(125,211,252,.18);border-radius:999px;color:#a8ddfb;background:rgba(14,116,190,.13);letter-spacing:.14em}
.sales-hero h1{max-width:700px;margin:25px 0 24px;font-size:clamp(49px,5.25vw,76px);line-height:.99}.sales-hero h1 em{color:#7dd3fc;text-shadow:0 8px 35px rgba(56,189,248,.15)}
.sales-hero-copy>p{max-width:620px;color:#b9cade;font-size:17px}
.sales-hero-actions{gap:12px;margin-top:35px}.sales-primary-action,.sales-secondary-action{min-height:54px;border-radius:15px;font-size:13px;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,border-color .2s}.sales-primary-action{gap:24px;padding:8px 9px 8px 20px;background:linear-gradient(135deg,#3978f6,#1168df);box-shadow:0 16px 38px rgba(17,104,223,.34)}.sales-primary-action b{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;color:#1767d6;background:#fff;font-size:17px}.sales-primary-action:hover{color:#fff;transform:translateY(-3px);box-shadow:0 21px 45px rgba(17,104,223,.42)}
.sales-secondary-action{align-items:center;gap:10px;padding:8px 19px;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}.sales-secondary-action:hover{color:#fff;transform:translateY(-3px);border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1)}.sales-button-mark{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;background:rgba(255,255,255,.1)}
.sales-hero-proof{gap:10px;margin-top:31px}.sales-hero-proof span{padding:7px 10px;border-radius:999px;color:#aec1d8;background:rgba(255,255,255,.045)}.sales-hero-proof b{color:#7dd3fc}
.sales-product-window{border:1px solid rgba(255,255,255,.27);border-radius:24px;box-shadow:0 45px 110px rgba(0,8,24,.5),0 0 0 8px rgba(255,255,255,.035);transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}.sales-product-window>header{height:50px}.sales-window-body{min-height:430px}.sales-dashboard-preview{padding:28px}
.sales-stat-strip{margin-top:-42px;border:1px solid rgba(209,220,235,.8);border-radius:22px;box-shadow:0 24px 65px rgba(15,35,65,.12)}.sales-stat-strip div{padding:27px 30px}.sales-stat-strip strong{font-size:27px}.sales-stat-strip span{font-size:11px}
.sales-section,.sales-process-section{padding:112px 0}.sales-section-heading h2,.sales-erp-copy h2{font-size:clamp(34px,4vw,52px)}
.sales-solution-grid{gap:18px}.sales-solution-grid article{min-height:380px;padding:28px;border-color:#e2e9f2;border-radius:22px;box-shadow:0 16px 45px rgba(15,35,65,.06)}.sales-solution-grid article:hover{transform:translateY(-7px);border-color:#b9d2f7;box-shadow:0 28px 60px rgba(15,72,145,.13)}.sales-solution-icon{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#3978f6,#185fc9)}.sales-solution-grid article:nth-child(2) .sales-solution-icon,.sales-solution-grid article:nth-child(4) .sales-solution-icon{background:linear-gradient(145deg,#38bdf8,#1478c9)}
.sales-erp-section{gap:80px;background:linear-gradient(180deg,#f2f6fb,#f8fafc)}.sales-erp-grid{gap:15px}.sales-erp-grid article{padding:21px;border-color:#dfe8f2;border-radius:16px;box-shadow:0 10px 28px rgba(15,35,65,.045)}
.sales-service-section{background:linear-gradient(135deg,#eef6ff,#f0fdfa)}.sales-service-section .sales-erp-grid article{border-color:#cfe3f7;background:rgba(255,255,255,.92)}
.sales-channel-grid>article{border:1px solid #e2eaf3;border-radius:26px;background:#f1f6fc}.sales-channel-grid>article:nth-child(2){border-color:rgba(255,255,255,.08);background:linear-gradient(135deg,#071a33,#0d3158)}
.sales-phone-mock{border-radius:34px;box-shadow:0 32px 70px rgba(15,35,65,.25)}.sales-phone-mock button{min-height:40px;border-radius:11px;background:linear-gradient(135deg,#3978f6,#1767d8)}.sales-shop-mock{border-radius:18px;box-shadow:0 30px 70px rgba(0,8,24,.35)}
.sales-process{gap:14px}.sales-process article{min-height:155px;padding:21px;border-color:#e0e8f1;border-radius:17px;box-shadow:0 10px 28px rgba(15,35,65,.045)}
.sales-final-cta{position:relative;overflow:hidden;margin-bottom:75px;padding:50px;border:0;border-radius:28px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(56,189,248,.22),transparent 30%),linear-gradient(135deg,#071a33,#0d3158);box-shadow:0 30px 75px rgba(6,25,50,.24)}.sales-final-cta:after{position:absolute;right:-110px;bottom:-180px;width:360px;height:360px;border:1px solid rgba(255,255,255,.09);border-radius:50%;content:""}.sales-final-cta h2{position:relative;z-index:1;color:#fff}.sales-final-cta p{max-width:690px;margin:12px 0 0;color:#aec2d8;font-size:13px}.sales-final-cta>div>span{color:#7dd3fc}.sales-final-cta>div:last-child{position:relative;z-index:1}.sales-final-cta .sales-secondary-action.light{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.06)}
.sales-footer{padding-top:36px;padding-bottom:36px;background:#061427}
@media(max-width:1050px){.sales-hero{grid-template-columns:1fr}.sales-product-window{max-width:780px}.sales-nav-login{margin-left:auto}}
@media(max-width:700px){.sales-nav{top:calc(12px + env(safe-area-inset-top));border-radius:16px}.sales-nav-login{padding-right:10px}.sales-login-icon{display:none}.sales-hero{padding-top:calc(145px + env(safe-area-inset-top))}.sales-hero-actions{gap:10px}.sales-primary-action,.sales-secondary-action{width:100%}.sales-final-cta{padding:34px 24px;border-radius:22px}}

.catalog-barcode { display:grid; gap:.2rem; min-width:130px; }
.catalog-barcode svg { width:130px; height:42px; fill:#0f172a; background:#fff; }
.catalog-barcode .catalog-qr { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; background:#fff; }
.catalog-barcode small { color:#475569; font-size:.68rem; letter-spacing:.12em; }
.product-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.25rem; }
.product-media-card { overflow:hidden; border:1px solid #e2e8f0; border-radius:.8rem; background:#fff; box-shadow:var(--shadow); }
.product-media-card.is-primary { border-color:#93c5fd; box-shadow:0 0 0 2px #dbeafe, var(--shadow); }
.product-media-preview { display:grid; height:240px; place-items:center; overflow:hidden; background:linear-gradient(145deg,#f8fafc,#eef2f7); }
.product-media-preview img { width:100%; height:100%; object-fit:contain; }
.product-media-content { display:grid; gap:.65rem; padding:1rem; }
.product-media-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#0f172a; }
.product-media-content p { min-height:2.7rem; margin:0; color:#64748b; font-size:.85rem; }
.product-media-content small { color:#94a3b8; }
.product-media-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.25rem; border-top:1px solid #edf1f5; }
.product-media-actions form { margin:0; }
.product-media-empty { grid-column:1/-1; display:grid; justify-items:center; gap:.6rem; padding:3rem; color:#64748b; text-align:center; }
.product-media-empty i { color:#94a3b8; font-size:3rem; }
.product-media-empty strong { color:#0f172a; font-size:1.05rem; }
.barcode-editor-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.barcode-editor-head > div { display:grid; gap:.15rem; }
.barcode-editor-head small { color:#64748b; }
.barcode-editor { display:grid; gap:.6rem; }
.barcode-editor-row { display:grid; grid-template-columns:auto minmax(165px,.8fr) minmax(170px,.85fr) minmax(180px,1fr) minmax(150px,.75fr) 42px 42px; align-items:center; gap:.5rem; padding:.65rem; border:1px solid #dbe3ec; border-radius:.65rem; background:#f8fafc; }
.barcode-default-radio { display:grid; justify-items:center; gap:.15rem; margin:0; color:#64748b; font-size:.66rem; cursor:pointer; }
.barcode-default-radio input { accent-color:#2563eb; }
.barcode-default-radio:has(input:checked) { color:#1d4ed8; font-weight:800; }
@media (max-width:991.98px) { .barcode-editor-row { grid-template-columns:auto 1fr 1fr 42px 42px; } .barcode-editor-row [name="barcodePackagingLevels"] { grid-column:2/4; } .barcode-editor-row [name="barcodeDescriptions"] { grid-column:2/-1; } }
@media (max-width:575.98px) { .barcode-editor-head { align-items:flex-start; } .barcode-editor-row { grid-template-columns:auto 1fr 42px; } .barcode-editor-row .form-select,.barcode-editor-row [name="barcodeValues"],.barcode-editor-row [name="barcodeDescriptions"] { grid-column:1/-1; } .barcode-editor-row .remove-barcode { grid-column:3; grid-row:1; } }
.product-form-section-title { margin:.35rem 0 -.1rem; padding:.65rem .8rem; border-left:3px solid #2563eb; border-radius:.25rem; color:#0f172a; background:#f1f5f9; font-size:.82rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.product-form-tabs { display:flex; gap:.35rem; overflow-x:auto; margin-bottom:1rem; padding:.3rem; border:1px solid #dbe3ec; border-radius:.7rem; background:#f8fafc; scrollbar-width:thin; }
.product-form-tabs button { display:flex; flex:1 0 auto; align-items:center; justify-content:center; gap:.4rem; min-height:40px; padding:.55rem .85rem; border:0; border-radius:.5rem; color:#475569; background:transparent; font-weight:700; white-space:nowrap; }
.product-form-tabs button:hover { color:#1d4ed8; background:#eff6ff; }
.product-form-tabs button.is-active { color:#fff; background:linear-gradient(135deg,#2563eb,#0369a1); box-shadow:0 5px 14px rgba(37,99,235,.22); }
.product-form-tab-pane { display:none; }
.product-form-tab-pane.is-active { display:flex; }
#productModal .modal-dialog { width:min(1480px,calc(100vw - 24px)); max-width:none; margin:12px auto; }
#productModal .modal-content { max-height:calc(100vh - 24px); overflow:hidden; }
#productModal .modal-content > form { display:flex; min-height:0; flex:1 1 auto; flex-direction:column; overflow:hidden; }
#productModal .modal-body { min-height:0; overflow-x:hidden; overflow-y:auto; }
.packaging-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.packaging-editor-row { min-width:0; padding:.85rem; border:1px solid #dbe3ec; border-radius:.75rem; background:#f8fafc; box-shadow:0 3px 10px rgba(15,23,42,.04); }
.packaging-card-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; padding-bottom:.65rem; border-bottom:1px solid #e2e8f0; }
.packaging-card-head > div { display:flex; flex:1; align-items:center; gap:.5rem; min-width:0; }
.packaging-card-head > div > i { flex:0 0 auto; color:#2563eb; font-size:1.35rem; }
.packaging-card-head .form-select { min-width:0; font-weight:700; }
.packaging-card-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.packaging-card-fields label { display:grid; gap:.3rem; min-width:0; margin:0; }
.packaging-card-fields label span { overflow:hidden; color:#475569; font-size:.72rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.packaging-card-fields .packaging-type-field { grid-column:span 2; }
.product-advanced-toggle{display:flex;flex:0 0 auto;align-items:center;gap:.45rem;margin:0;padding:.5rem .65rem;border-left:1px solid #dbe3ec;color:#64748b;font-size:.72rem;font-weight:750;white-space:nowrap;cursor:pointer}.product-advanced-toggle input{width:2rem;height:1.05rem;appearance:none;border-radius:999px;background:#cbd5e1;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);cursor:pointer;transition:.2s}.product-advanced-toggle input:before{display:block;width:.81rem;height:.81rem;margin:.12rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.25);content:"";transition:.2s}.product-advanced-toggle input:checked{background:#2563eb}.product-advanced-toggle input:checked:before{transform:translateX(.95rem)}
.advanced-product-note{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;border:1px solid #bfdbfe;border-radius:.65rem;color:#1e3a5f;background:#eff6ff}.advanced-product-note>i{margin-top:.05rem;color:#2563eb;font-size:1.25rem}.advanced-product-note>div{display:grid;gap:.15rem}.advanced-product-note span{color:#64748b;font-size:.78rem}
#productModal:not(.is-advanced) .packaging-card-fields label:nth-child(n+2){display:none}#productModal:not(.is-advanced) .packaging-card-fields{grid-template-columns:minmax(180px,1fr)}
@media(max-width:991.98px){.packaging-editor{grid-template-columns:1fr}}
@media(max-width:575.98px){#productModal .modal-dialog{width:100%;margin:0}#productModal .modal-content{min-height:100vh;max-height:100vh;border-radius:0}.product-form-tabs button{flex:0 0 auto}.packaging-card-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.packaging-card-fields .packaging-type-field{grid-column:1/-1}.packaging-card-head{align-items:flex-start}.packaging-card-head .remove-packaging{padding:.45rem}.packaging-card-head .remove-packaging{font-size:0}.packaging-card-head .remove-packaging i{font-size:1rem}}
.lookup-control { display:flex; align-items:stretch; gap:.4rem; }
.lookup-control .form-select { min-width:0; }
.lookup-control > .btn { flex:0 0 42px; padding:.45rem; }
.packaging-hierarchy-panel { display:grid; gap:.85rem; padding:1rem; border:1px solid #dbe3ec; border-radius:.75rem; background:linear-gradient(145deg,#f8fafc,#fff); }
.packaging-hierarchy-heading { display:flex; align-items:center; gap:.7rem; padding-bottom:.75rem; border-bottom:1px solid #e2e8f0; }
.packaging-hierarchy-heading > div { display:grid; gap:.1rem; }
.packaging-hierarchy-heading small { color:#64748b; }
.packaging-hierarchy-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:.55rem; color:#1d4ed8; background:#dbeafe; font-size:1.25rem; }
.packaging-level-add { min-width:0; }
.packaging-level-toolbar { display:grid; grid-template-columns:minmax(260px,430px) max-content; align-items:stretch; justify-content:start; gap:.55rem; }
.packaging-level-toolbar #addPackaging { min-width:145px; }
.primary-barcode-control { margin-bottom:.65rem; }
.product-primary-image-editor { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:1rem; padding:.75rem; border:1px solid #dbe3ec; border-radius:.7rem; background:#f8fafc; }
.product-primary-image-preview { display:grid; width:110px; height:90px; place-items:center; overflow:hidden; border:1px dashed #94a3b8; border-radius:.55rem; color:#94a3b8; background:#fff; }
.product-primary-image-preview img { display:none; width:100%; height:100%; object-fit:contain; }
.product-primary-image-preview.has-image img { display:block; }
.product-primary-image-preview.has-image i { display:none; }
.product-primary-image-preview i { font-size:2rem; }
.product-gallery-note { display:flex; align-items:center; gap:.8rem; margin-top:.75rem; padding:.8rem 1rem; border:1px solid #bfdbfe; border-radius:.65rem; color:#1e3a8a; background:#eff6ff; }
.product-gallery-note > i { flex:0 0 auto; font-size:1.6rem; }
.product-gallery-note > div { display:grid; gap:.1rem; }
.product-gallery-note span { color:#475569; font-size:.8rem; }
.quick-lookup-dialog { position:fixed; z-index:1100; inset:0; display:none; place-items:center; padding:1rem; background:rgba(15,23,42,.48); backdrop-filter:blur(3px); }
.quick-lookup-dialog.is-open { display:grid; }
.quick-lookup-card { width:min(460px,100%); overflow:hidden; border:1px solid #dbe3ec; border-radius:.8rem; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.25); }
.quick-lookup-head,.quick-lookup-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; }
.quick-lookup-head { border-bottom:1px solid #e2e8f0; }
.quick-lookup-head > div { display:grid; }
.quick-lookup-head strong { color:#0f172a; }
.quick-lookup-head small { color:#64748b; }
.quick-lookup-body { padding:1.1rem; }
.quick-lookup-footer { justify-content:flex-end; border-top:1px solid #e2e8f0; background:#f8fafc; }
.generated-code-field { color:#1d4ed8; background:#eff6ff!important; font-weight:800; letter-spacing:.045em; }
.notification-toast { overflow:hidden; border:0; border-left:4px solid #2563eb; box-shadow:0 18px 45px rgba(15,23,42,.2); }
.notification-toast .toast-header { color:#0f172a; background:#fff; }
.notification-toast .toast-body { color:#334155; background:#f8fafc; }
.notification-toast.toast-success { border-left-color:#16a34a; }
.notification-toast.toast-success .toast-header i { color:#16a34a; }
.notification-toast.toast-danger { border-left-color:#dc2626; }
.notification-toast.toast-danger .toast-header i { color:#dc2626; }
.notification-toast.toast-warning { border-left-color:#d97706; }
.notification-toast.toast-warning .toast-header i { color:#d97706; }
.notification-toast.toast-info .toast-header i { color:#2563eb; }
@media(max-width:575.98px){.product-primary-image-editor{grid-template-columns:1fr}.packaging-level-toolbar{grid-template-columns:1fr}.packaging-level-toolbar #addPackaging{width:100%}.packaging-hierarchy-panel{padding:.75rem}}