/* Independent SALES shell skin. Existing forms, maps and print templates retain their IDs. */
@media screen {
  body.km-sales {
    --ink: #183143; --muted: #637888; --line: #dce5eb;
    --brand: #136b61; --brand-strong: #0b3b50;
    --shadow: 0 3px 12px rgba(16,45,63,.05); --shadow-soft: 0 2px 8px rgba(16,45,63,.035);
    --radius-lg: 12px; --radius: 10px; --radius-sm: 7px;
    background: #f3f6f8; color: var(--ink); line-height: 1.55;
  }
  .km-sales .app-header { min-height: 78px; padding: 13px 28px; border-bottom: 1px solid var(--line); box-shadow: none; background: #fff; }
  .km-sales .app-brand { gap: 18px; align-items: center; }
  .km-sales .app-brand .brand-mark { width: 120px; padding: 0; }
  .km-sales .app-header-eyebrow { color: #16796d; letter-spacing: .16em; font-size: 9px; }
  .km-sales .app-brand h1 { font-size: 18px; letter-spacing: -.04em; }
  .km-sales .app-brand h1 small { display: none; }
  .km-sales .user-box { box-shadow: none; border: 0; background: transparent; font-size: 12px; }
  .km-sales .app-shell { max-width: 2160px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0,1fr); padding: 24px; gap: 24px; align-items: start; }
  .km-sales .app-content, .km-sales .tab-panel, .km-sales .work-panel { min-width: 0; }
  .km-sales .side-nav { position: sticky; top: 100px; max-height: calc(100dvh - 124px); display: flex; flex-direction: column; padding: 12px; gap: 3px; border-radius: 12px; background: #102f42; box-shadow: none; scrollbar-gutter: stable; }
  .km-sales .side-nav::before { content: 'WORKSPACE / SALES'; font-size: 9px; letter-spacing: .16em; font-weight: 750; color: #9cb5c3; padding: 12px 10px 16px; }
  .km-sales .side-nav .tab-button { flex: none; width: 100%; min-height: 41px; padding: 10px; font-size: 12px; border-radius: 7px; justify-content: flex-start; box-shadow: none; white-space: normal; text-align: left; }
  .km-sales .side-nav .tab-button:hover { transform: none; }
  .km-sales .side-nav .tab-button.is-active { color: #12483e; background: #e5f5f0; border-color: #e5f5f0; box-shadow: none; }
  .km-sales .summary-band { padding: 26px 28px; min-height: 132px; border-radius: 12px; background: linear-gradient(115deg,#10354b,#16564f); box-shadow: none; }
  .km-sales .summary-band h2 { font-size: clamp(22px,2.2vw,30px); letter-spacing: -.05em; }
  .km-sales .summary-band p { line-height: 1.7; font-size: 13px; }
  .km-sales .metrics-grid { gap: 16px; }
  .km-sales .metric-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: none; }
  .km-sales .work-panel { padding: 22px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
  .km-sales .panel-titlebar { gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
  .km-sales .panel-titlebar h2 { font-size: 18px; letter-spacing: -.03em; }
  .km-sales .panel-titlebar h2::after { display: none; }
  .km-sales .panel-eyebrow { font-size: 9px; letter-spacing: .16em; }
  .km-sales :is(.account-filterbar,.quote-filterbar,.order-filterbar) { flex-wrap: wrap; gap: 10px; min-width: 0; max-width: 100%; }
  .km-sales :is(.account-filterbar,.quote-filterbar,.order-filterbar) > * { min-width: 0; }
  .km-sales .account-list-search-form { flex: 1 1 260px; }
  .km-sales .account-list-search-control { width: 100%; }
  .km-sales .account-list-search-control input { min-width: 0; }
  .km-sales :is(input,select,textarea) { border-radius: 7px; border-color: #cad7df; font-size: 13px; }
  .km-sales :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select) { min-height: 40px; }
  .km-sales :is(button,.small-action) { border-radius: 7px; }
  .km-sales .table-wrap { max-width: 100%; border: 1px solid var(--line); border-radius: 9px; overscroll-behavior-x: contain; }
  .km-sales table th { background: #edf3f6; color: #526979; font-size: 11px; padding: 13px 12px; }
  .km-sales table td { font-size: 12px; padding: 14px 12px; font-variant-numeric: tabular-nums; }
  .km-sales table tbody tr:hover { background: #f1f8f6; }
  .km-sales .account-map-layout { grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 18px; }
  .km-sales .account-map-layout > * { min-width: 0; }
  .km-sales :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #258aaf; outline-offset: 3px; }
  .km-sales .km-nav-toggle, .km-sales .km-nav-backdrop { display: none; }
  .km-skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-160%); background: white; color: #123c51; border: 2px solid #16796d; padding: 10px 18px; border-radius: 7px; }
  .km-skip-link:focus { transform: translateY(0); }
  .km-sales.login-page { background: #0d293b; color: #fff; }
  .km-sales .login-panel { border-radius: 14px; box-shadow: 0 24px 70px #0004; }
  .km-sales .login-copy p { white-space: normal; }
  @media (max-width: 1180px) {
    .km-sales .app-shell { grid-template-columns: 198px minmax(0,1fr); padding: 18px; gap: 18px; }
    .km-sales .account-map-layout { grid-template-columns: minmax(0,1fr); }
    .km-sales .work-panel { padding: 18px; }
  }
  @media (max-width: 900px) {
    .km-sales .app-header { padding: 12px 16px; min-height: 68px; gap: 10px; flex-wrap: wrap; }
    .km-sales .app-brand { gap: 10px; }
    .km-sales .app-brand .brand-mark { width: 95px; }
    .km-sales .app-brand h1 { font-size: 15px; }
    .km-sales .app-shell { grid-template-columns: minmax(0,1fr); padding: 16px; }
    /* Without JS the navigation remains visible and usable. */
    .km-sales .side-nav { position: static; max-height: 240px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .km-sales .side-nav::before { grid-column: 1 / -1; padding-bottom: 4px; }
    .km-sales.km-nav-ready .km-nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; background: #edf5f7; color: #123c51; border: 1px solid #cad7df; }
    .km-sales.km-nav-ready .side-nav { position: fixed; inset: 0 auto 0 0; width: min(290px,85vw); max-height: 100dvh; height: 100dvh; border-radius: 0; display: flex; z-index: 1300; padding: 70px 14px 24px; transform: translateX(-102%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
    .km-sales.km-nav-ready.km-nav-open .side-nav { transform: translateX(0); visibility: visible; }
    .km-sales.km-nav-open { overflow: hidden; }
    .km-sales.km-nav-open .km-nav-backdrop { display: block; position: fixed; inset: 0; border-radius: 0; background: #102c3a99; z-index: 1290; border: 0; }
    .km-sales .summary-band { padding: 22px; }
    .km-sales .user-box { padding: 0; gap: 8px; }
    .km-sales .user-box #userName { max-width: 150px; overflow-wrap: anywhere; }
  }
  @media (max-width: 600px) {
    .km-sales .app-shell { padding: 12px; gap: 12px; }
    .km-sales .app-header-eyebrow { display: none; }
    .km-sales .app-brand { flex: 1; }
    .km-sales .user-box { width: 100%; justify-content: flex-end; }
    .km-sales .work-panel { padding: 16px 12px; }
    .km-sales .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .km-sales .metric-card { padding: 16px 12px; }
    .km-sales :is(input,select,textarea) { font-size: 16px; }
    .km-sales .form-grid { grid-template-columns: minmax(0,1fr); }
    .km-sales .form-grid > * { min-width: 0; }
    .km-sales .form-grid .span-2 { grid-column: 1; }
    .km-sales .panel-titlebar > * { max-width: 100%; }
    .km-sales .login-copy h1 { white-space: normal; }
  }
  @media (prefers-reduced-motion: reduce) {
    .km-sales *, .km-sales *::before, .km-sales *::after { transition: none !important; scroll-behavior: auto !important; }
  }
}
@media print { .km-nav-toggle, .km-nav-backdrop, .km-skip-link { display: none !important; } }