:root { --app-sidebar-width: 244px; --app-mobile-header-height: 60px; --app-mobile-nav-height: 72px; }

.has-app-nav { padding-inline-start: var(--app-sidebar-width); }
.app-content { min-height: 100vh; }
.app-sidebar { width: var(--app-sidebar-width); padding: 18px 14px; position: fixed; z-index: 100; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; color: #dbeafe; background: linear-gradient(180deg, #0b2545, #0f3a5d); box-shadow: 8px 0 28px rgba(15, 23, 42, .09); }
.app-sidebar__brand { min-height: 58px; padding: 7px 8px 16px; display: flex; align-items: center; gap: 10px; color: white; border-bottom: 1px solid rgba(255,255,255,.1); }
.app-sidebar__brand > i { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; color: #0f3a5d; background: white; border-radius: 12px; font-style: normal; font-weight: 900; }
.app-sidebar__brand span, .app-sidebar__user span { min-width: 0; display: grid; }
.app-sidebar__brand strong { font-size: 14px; }
.app-sidebar__brand small { color: #93c5fd; font-size: 10px; }
/* One scroll owner across navigation groups; brand and account stay reachable. */
.app-sidebar { overflow: hidden; gap: 10px; }
.app-sidebar__brand, .app-sidebar__user { flex-shrink: 0; }
.app-sidebar__scroll { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 3px 2px 6px; scroll-padding-block: 8px; }
.app-sidebar nav { margin-top: 12px; display: grid; gap: 3px; overflow: visible; }
.app-sidebar__scroll > nav:first-child { margin-top: 0; }
.app-sidebar nav > a { min-height: 44px; padding: 8px 11px; display: flex; align-items: center; gap: 10px; color: #bfdbfe; border-radius: 11px; font-size: 13px; font-weight: 700; transition: background var(--motion-fast), color var(--motion-fast); }
.app-sidebar nav > a i { width: 25px; color: #7dd3fc; font-style: normal; font-size: 17px; text-align: center; }
.app-sidebar nav > a:hover, .app-sidebar nav > a.active { color: white; background: rgba(255,255,255,.12); }
.app-sidebar nav > a.active i { color: white; }
.app-sidebar__section { padding: 15px 11px 4px; color: #7dd3fc; font-size: 10px; font-weight: 800; }
.app-sidebar__user { min-height: 58px; margin-top: 0; padding: 8px; display: flex; align-items: center; gap: 9px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; }
.app-sidebar__user > i { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #0f3a5d; background: #e0f2fe; border-radius: 11px; font-style: normal; font-weight: 900; }
.app-sidebar__user strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__user small { color: #bae6fd; font-size: 10px; }
.app-sidebar__user.active { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.app-mobile-header, .app-mobile-nav { display: none; }

.app-feedback { width: min(560px, calc(100% - 32px)); position: fixed; z-index: 300; inset-block-start: 16px; inset-inline-end: calc(var(--app-sidebar-width) + 18px); display: grid; gap: 8px; }
.app-feedback__item { min-height: 52px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 13px; box-shadow: var(--shadow-md); font-size: 13px; font-weight: 700; }
.app-feedback__item.error { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.app-feedback__item.warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.app-feedback__item.info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.app-feedback__item button { width: 36px; height: 36px; min-height: 36px; margin-inline-start: auto; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 9px; font-size: 18px; cursor: pointer; }
a[data-placeholder-action] { opacity: .72; cursor: help; }
.app-content .errorlist { margin: 5px 0 0; padding: 9px 12px; color: var(--color-danger-600); background: var(--color-danger-50); border-radius: var(--radius-sm); list-style: none; font-size: 12px; font-weight: 700; }
.app-content :is(input,select,textarea)[aria-invalid="true"] { border-color: var(--color-danger-600) !important; box-shadow: 0 0 0 3px rgba(225,29,72,.1); }
.jalali-input-hint { display: block; color: var(--color-info-600); font-size: 11px; line-height: 1.7; }
[data-jalali-date],[data-jalali-datetime] { text-align: right; letter-spacing: .2px; }
.app-state-page { min-height: 100vh; padding: 40px 20px; display: grid; place-items: center; }
.app-state-card { width: min(540px, 100%); padding: 34px; text-align: center; background: white; border: 1px solid var(--color-neutral-200); border-radius: 22px; box-shadow: var(--shadow-md); }
.app-state-card > i { width: 58px; height: 58px; margin: 0 auto 15px; display: grid; place-items: center; color: var(--color-danger-600); background: var(--color-danger-50); border-radius: 17px; font-style: normal; font-size: 27px; font-weight: 900; }
.app-state-card > span { color: var(--color-danger-600); font-size: 12px; font-weight: 800; }
.app-state-card h1 { margin: 7px 0; font-size: 25px; letter-spacing: -.5px; }
.app-state-card p { margin: 0; color: var(--color-neutral-600); }
.app-state-card > div { margin-top: 24px; display: flex; justify-content: center; gap: 9px; }

/* The shared shell supersedes legacy module-specific navigation without deleting it. */
.has-app-nav :is(.sidebar,.compact-sidebar,.visit-sidebar,.sales-sidebar,.mail-sidebar,.support-sidebar,.finance-sidebar,.stock-sidebar,.med-sidebar,.auto-sidebar,.gateway-sidebar) { display: none !important; }
.has-app-nav :is(.app-main,.customer-main,.visit-main,.sales-main,.mail-main,.support-main,.finance-main,.stock-main,.med-main,.auto-main,.gateway-main) { width: 100% !important; margin-inline-start: 0 !important; }
.has-app-nav :is(.mobile-nav,.contacts-mobile-nav,.visit-mobile-nav,.sales-mobile-nav,.mail-mobile-nav,.support-mobile-nav,.finance-mobile-nav,.stock-mobile-nav,.med-mobile-nav,.auto-mobile-nav,.gateway-mobile-nav) { display: none !important; }

@media (max-width: 900px) {
  .has-app-nav { padding: var(--app-mobile-header-height) 0 var(--app-mobile-nav-height); }
  .app-sidebar { display: none; }
  .app-mobile-header { height: var(--app-mobile-header-height); padding: 0 14px; position: fixed; z-index: 150; inset-block-start: 0; inset-inline: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--color-neutral-200); backdrop-filter: blur(14px); }
  .app-mobile-header > a:nth-of-type(1) { justify-self: center; display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .app-mobile-header > a:nth-of-type(1) i { width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--color-primary-600); border-radius: 9px; font-style: normal; }
  .app-back-button, .app-mobile-profile { width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 12px; }
  .app-back-button { color: var(--color-neutral-700); background: var(--color-neutral-100); border: 0; font: inherit; font-size: 20px; cursor: pointer; }
  .app-mobile-profile { justify-self: end; color: #075985; background: #e0f2fe; font-weight: 900; }
  .app-mobile-nav { height: var(--app-mobile-nav-height); padding: 6px 8px max(6px, env(safe-area-inset-bottom)); position: fixed; z-index: 160; inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.98); border-top: 1px solid var(--color-neutral-200); box-shadow: 0 -8px 25px rgba(15,23,42,.06); }
  .app-mobile-nav > a, .app-more-menu > summary { min-height: 54px; display: grid; place-items: center; align-content: center; gap: 1px; color: var(--color-neutral-500); border-radius: 11px; list-style: none; cursor: pointer; }
  .app-mobile-nav i { font-style: normal; font-size: 18px; line-height: 1; }
  .app-mobile-nav small { font-size: 10px; font-weight: 700; }
  .app-mobile-nav > a.active, .app-more-menu[data-section-active] > summary { color: var(--color-primary-700); background: var(--color-primary-50); }
  .app-more-menu > summary::-webkit-details-marker { display: none; }
  .app-more-menu > div { width: min(330px, calc(100vw - 24px)); padding: 12px; position: absolute; inset-inline-end: 12px; inset-block-end: calc(var(--app-mobile-nav-height) - 2px); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; background: white; border: 1px solid var(--color-neutral-200); border-radius: 16px; box-shadow: var(--shadow-md); }
  .app-more-menu > div a { min-height: 46px; padding: 8px 11px; display: flex; align-items: center; color: var(--color-neutral-700); background: var(--color-neutral-50); border-radius: 10px; font-size: 12px; font-weight: 700; }
  .app-feedback { width: calc(100% - 24px); inset-block-start: calc(var(--app-mobile-header-height) + 10px); inset-inline: 12px; }
  .has-app-nav :is(.app-header,.customer-topbar,.visit-top,.sales-top,.mail-top,.support-top,.finance-top,.stock-top,.med-top,.auto-top,.gateway-top) { display: none !important; }
}