/* Distinct product identity layer. Loaded after the established component styles. */
:root {
  --product-navy: #193c50;
  --product-navy-strong: #102f40;
  --product-teal: #0d7d72;
  --product-teal-soft: #e4f3ef;
  --product-red: #b93844;
  --product-red-soft: #fff0f1;
  --product-amber: #a9650a;
  --product-amber-soft: #fff5df;
  --product-green: #24734f;
  --product-green-soft: #eaf6ef;
  --product-ink: #14252e;
  --product-muted: #60717a;
  --product-line: #d6e1df;
  --product-line-strong: #bacbc8;
  --product-canvas: #eef3f2;
  --product-surface: #fff;
  --sidebar-width: 252px;
  --topbar-height: 70px;
}

html,
body {
  background: var(--product-canvas);
  color: var(--product-ink);
  font-size: 14px;
}

.product-sidebar {
  border-inline-start: 1px solid var(--product-line);
  background: #fbfdfc;
  color: var(--product-ink);
}

.sidebar-brand {
  min-height: var(--topbar-height);
  border-bottom-color: var(--product-line);
}

.sidebar-brand img {
  border: 1px solid var(--product-line);
}

.sidebar-brand strong,
.sidebar-footer strong {
  color: var(--product-ink);
  font-size: 13px;
}

.sidebar-brand small,
.sidebar-footer small {
  color: var(--product-muted);
  font-size: 10px;
}

.product-sidebar .icon-btn {
  border-color: var(--product-line);
  background: #fff;
  color: var(--product-muted);
}

.sidebar-navigation {
  gap: 4px;
  padding: 14px 10px 20px;
}

.sidebar-item,
.sidebar-child {
  min-height: 44px;
  gap: 11px;
  color: #52656e;
  padding: 9px 11px;
}

.sidebar-item span,
.sidebar-child span {
  font-size: 12px;
}

.sidebar-item:hover,
.sidebar-child:hover {
  background: #eff5f3;
  color: var(--product-ink);
}

.sidebar-item.active {
  background: var(--product-teal-soft);
  color: #075f57;
  box-shadow: inset -3px 0 0 var(--product-teal);
}

.sidebar-child.active {
  background: #edf7f4;
  color: #075f57;
}

.sidebar-children {
  border-right-color: #c8d7d4;
}

.sidebar-footer {
  min-height: 64px;
  border-top-color: var(--product-line);
  background: #f2f7f5;
}

.app .product-topbar {
  grid-template-columns: minmax(190px, auto) minmax(320px, 1fr) auto auto;
  gap: 18px;
  min-height: var(--topbar-height);
  border-bottom-color: var(--product-line);
  background: #fff;
  padding: 10px 28px;
}

.page-identity > span,
.page-identity p,
.breadcrumbs {
  font-size: 10px;
}

.page-identity h1 {
  font-size: 18px;
}

.global-search-shell {
  max-width: 720px;
}

.searchbox {
  min-height: 44px;
  border-color: var(--product-line);
  border-radius: 8px;
  background: #f5f8f7;
  padding-inline: 13px;
}

.searchbox input {
  font-size: 12px;
}

.context-filters select {
  min-width: 150px;
  height: 42px;
  font-size: 11px;
}

.profile-copy strong {
  font-size: 11px;
}

.profile-copy small {
  font-size: 9px;
}

.page-context-bar {
  min-height: 70px;
  background: #fff;
  padding: 9px 28px 8px;
}

.context-tabs .chip {
  min-height: 34px;
  font-size: 10px;
}

.page-content {
  padding: 24px 28px 52px;
}

.page-content > section,
.dashboard-home {
  max-width: 1600px;
}

.app .btn {
  min-height: 40px;
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 11px;
}

.app .btn.small {
  min-height: 34px;
  font-size: 10px;
}

.app .icon-btn {
  width: 38px;
  height: 38px;
}

.app .panel {
  border-radius: 8px;
  box-shadow: none;
}

.app .panel-head {
  min-height: 64px;
  padding: 13px 17px;
}

.app .panel-head h3,
.app .panel-head strong {
  font-size: 14px;
}

.app .panel-head p {
  font-size: 10px;
}

.app .panel-body {
  padding: 17px;
}

.page-header,
.detail-header {
  min-height: 78px;
}

.page-header h2,
.detail-title h2 {
  font-size: 21px;
}

.page-header p,
.detail-title p {
  font-size: 11px;
}

.dashboard-home {
  gap: 18px;
}

.dashboard-welcome {
  min-height: 126px;
  align-items: center;
  border: 1px solid #193f51;
  border-radius: 8px;
  background: #143747;
  padding: 22px 24px;
}

.dashboard-welcome > div:first-child > span {
  color: #83d9cf;
  font-size: 11px;
}

.dashboard-welcome h2 {
  color: #fff;
  font-size: 24px;
  line-height: 1.55;
}

.dashboard-welcome p {
  color: #c7d7dc;
  font-size: 11px;
}

.dashboard-welcome .btn.primary {
  border-color: #15998c;
  background: #15998c;
}

.dashboard-welcome .btn:not(.primary) {
  border-color: rgba(255, 255, 255, .42);
  background: transparent;
  color: #fff;
}

.dashboard-welcome .btn:not(.primary):hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

.role-focus-bar {
  display: grid;
  grid-template-columns: minmax(170px, auto) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid var(--product-line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.role-focus-bar > strong {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--product-line);
  background: #f1f6f4;
  padding: 12px 16px;
  color: #2d494f;
  font-size: 11px;
}

.role-focus-bar > button {
  min-height: 56px;
  justify-content: center;
  border: 0;
  border-left: 1px solid #e4ebe9;
  border-radius: 0;
  background: #fff;
  color: #465b64;
  padding: 10px 13px;
  font-size: 11px;
}

.role-focus-bar > button:last-child {
  border-left: 0;
}

.role-focus-bar > button:hover {
  background: var(--product-teal-soft);
  color: #075f57;
}

.dashboard-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--product-line);
  border-radius: 8px;
  background: #fff;
}

.dashboard-kpi {
  min-height: 116px;
  border: 0;
  border-left: 1px solid #e3eae8;
  border-radius: 0;
  padding: 15px 14px;
  box-shadow: inset 0 3px 0 transparent;
}

.dashboard-kpi:last-child {
  border-left: 0;
}

.dashboard-kpi:hover {
  border-color: #e3eae8;
  background: #f6faf8;
  box-shadow: inset 0 3px 0 var(--product-teal);
}

.dashboard-kpi.warning {
  box-shadow: inset 0 3px 0 #c88222;
}

.dashboard-kpi.danger {
  box-shadow: inset 0 3px 0 var(--product-red);
}

.dashboard-kpi.success {
  box-shadow: inset 0 3px 0 var(--product-green);
}

.dashboard-kpi small,
.dashboard-kpi em {
  font-size: 10px;
}

.dashboard-kpi strong {
  font-size: 19px;
}

.kpi-icon {
  width: 40px;
  height: 40px;
}

.dashboard-layout,
.dashboard-analytics {
  gap: 18px;
}

.dashboard-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr);
}

.action-row {
  min-height: 66px;
  border-right: 3px solid transparent;
  padding: 10px 14px;
}

.action-row.priority-0 {
  border-right-color: var(--product-red);
}

.action-row.priority-1 {
  border-right-color: var(--product-amber);
}

.action-row:hover {
  background: #f5f9f7;
}

.action-row strong {
  font-size: 12px;
}

.action-row small {
  font-size: 10px;
}

.action-row em {
  font-size: 9px;
}

.empty-state strong {
  font-size: 13px;
}

.empty-state span {
  font-size: 10px;
  line-height: 1.8;
}

.dashboard-chart {
  height: 255px;
}

.dashboard-shortcuts {
  gap: 4px;
  overflow: hidden;
  border: 1px solid var(--product-line);
  border-radius: 8px;
  background: #f7faf9;
  padding: 7px;
}

.dashboard-shortcuts button {
  min-height: 48px;
  border: 0;
  border-left: 1px solid #dce6e3;
  background: transparent;
  font-size: 10px;
}

.dashboard-shortcuts button:last-child {
  border-left: 0;
}

.dashboard-shortcuts button:hover {
  background: var(--product-teal-soft);
  color: #075f57;
}

.local-search {
  min-height: 44px;
}

.local-search input,
.segmented button {
  font-size: 10px;
}

.app table {
  font-size: 11px;
}

.app table th {
  height: 42px;
  background: #f1f5f4;
  font-size: 10px;
}

.app table td {
  height: 50px;
}

.app table td small,
.record-link small,
.workflow-status {
  font-size: 9px;
}

@media (max-width: 1280px) {
  :root {
    --sidebar-width: 228px;
  }

  .app .product-topbar {
    grid-template-columns: minmax(160px, auto) minmax(240px, 1fr) auto;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-kpi:nth-child(3) {
    border-left: 0;
  }

  .dashboard-kpi:nth-child(-n + 3) {
    border-bottom: 1px solid #e3eae8;
  }
}

@media (max-width: 980px) {
  html,
  body,
  .app.product-shell {
    max-width: 100%;
    overflow-x: clip;
  }

  .product-sidebar {
    box-shadow: -18px 0 42px rgba(23, 45, 55, .16);
  }

  .app .product-topbar,
  .page-content {
    padding-inline: 16px;
  }

  .dashboard-layout,
  .dashboard-analytics {
    grid-template-columns: 1fr;
  }

  .mobile-bottom-nav {
    min-height: 64px;
    background: #fff;
  }
}

@media (max-width: 720px) {
  .page-content {
    padding: 12px 10px 32px;
  }

  .dashboard-home {
    gap: 12px;
  }

  .dashboard-welcome {
    min-height: 156px;
    padding: 18px;
  }

  .dashboard-welcome h2 {
    font-size: 19px;
  }

  .role-focus-bar {
    grid-template-columns: 170px repeat(3, 150px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .role-focus-bar::-webkit-scrollbar {
    display: none;
  }

  .dashboard-primary-actions .btn {
    min-height: 44px;
  }

  #sample-wizard-form .wizard-foot .btn,
  .focus-result-form .modal-foot .btn {
    min-height: 44px;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi {
    min-height: 96px;
    padding: 11px 10px;
  }

  .dashboard-kpi:nth-child(2n) {
    border-left: 0;
  }

  .dashboard-kpi:nth-child(3) {
    border-left: 1px solid #e3eae8;
  }

  .dashboard-kpi:nth-child(-n + 4) {
    border-bottom: 1px solid #e3eae8;
  }

  .dashboard-kpi strong {
    font-size: 16px;
  }

  .dashboard-shortcuts {
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  .dashboard-welcome {
    min-height: 170px;
  }

  .dashboard-kpi {
    min-height: 92px;
  }
}