/* TradeWize v1.7.8 - compact refresh
   A scoped density layer: keeps the existing look, reduces wasted space,
   and makes repeated daily use easier on desktop and mobile. */

.app-shell {
  --tw-radius-panel: 12px;
  --tw-radius-control: 8px;
  --tw-gap: 12px;
  --tw-pad-panel: 16px;
}

.app-shell .nav {
  height: 58px;
  padding-inline: 22px;
  gap: 14px;
}

.app-shell .nav-brand .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.app-shell .nav-brand-name {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.app-shell .nav-links {
  gap: 1px;
  margin-left: 4px;
}

.app-shell .nav-link {
  padding: 7px 10px;
  border-radius: var(--tw-radius-control);
  font-size: 12px;
}

.app-shell .nav-link.active::after {
  left: 10px;
  right: 10px;
}

.app-shell .nav-right {
  gap: 6px;
}

.app-shell .icon-btn,
.app-shell .user-chip {
  min-height: 34px;
}

.app-shell .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.app-shell .user-chip {
  padding: 3px 10px 3px 3px;
}

.app-shell .main {
  max-width: 1360px;
  padding: 24px 24px 56px;
}

.app-shell .page-header {
  margin-bottom: 16px;
  gap: 12px;
}

.app-shell .page-kicker {
  margin-bottom: 5px;
  font-size: 10px;
}

.app-shell .page-title {
  font-size: 28px;
}

.app-shell .page-sub {
  margin-top: 5px;
  font-size: 13px;
}

.app-shell .panel {
  border-radius: var(--tw-radius-panel);
  padding: var(--tw-pad-panel);
}

.app-shell .panel-title {
  margin-bottom: 10px;
  font-size: 14px;
}

.app-shell .panel-sub {
  margin-bottom: 10px;
  font-size: 12px;
}

.app-shell .btn {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.app-shell .input,
.app-shell input[type="text"],
.app-shell input[type="email"],
.app-shell input[type="password"],
.app-shell input[type="number"],
.app-shell input[type="search"],
.app-shell input[type="date"],
.app-shell input[type="time"],
.app-shell input[type="url"],
.app-shell select,
.app-shell textarea {
  min-height: 36px;
  border-radius: 8px;
}

.app-shell .kpi-grid {
  grid-template-columns: minmax(220px, 1.45fr) minmax(150px, .95fr) minmax(135px, .85fr) minmax(170px, 1.1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.app-shell .kpi-card {
  min-height: 88px;
  padding: 13px 15px;
  border-radius: 12px;
  gap: 2px;
}

.app-shell .kpi-card::before {
  left: 14px;
  right: 14px;
}

.app-shell .kpi-label {
  margin-bottom: 3px;
  font-size: 9.5px;
  letter-spacing: .1em;
}

.app-shell .kpi-value {
  font-size: 24px;
}

.app-shell .kpi-grid .kpi-card:first-child .kpi-value {
  font-size: 30px;
}

.app-shell .kpi-value-split {
  gap: 5px;
  font-size: 18px;
}

.app-shell .kpi-delta {
  padding-top: 5px;
  font-size: 11px;
}

.app-shell .dashboard-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, .92fr);
  gap: var(--tw-gap);
  margin-bottom: var(--tw-gap);
}

.app-shell .side-stack {
  gap: 10px;
}

.app-shell .chart-card {
  min-height: 318px;
}

.app-shell .chart-wrap {
  min-height: 238px;
  margin-bottom: -10px;
}

.app-shell .chart-legend {
  margin-bottom: 4px;
  font-size: 11px;
}

.app-shell .ranking-list {
  gap: 6px;
}

.app-shell .ranking-item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.app-shell .ranking-meta {
  font-size: 10px;
}

.app-shell .recent-card {
  margin-top: var(--tw-gap);
}

.app-shell .table-wrap {
  margin-inline: -2px;
}

.app-shell table {
  font-size: 12px;
}

.app-shell thead th {
  padding: 7px 9px;
  font-size: 9px;
}

.app-shell tbody td {
  padding: 8px 9px;
}

.app-shell .insights-grid {
  gap: var(--tw-gap);
  margin-top: var(--tw-gap);
}

.app-shell .heatmap-grid {
  gap: 6px;
}

.app-shell .heatmap-cell {
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 9px;
}

.app-shell .streak-row {
  gap: 8px;
  margin-bottom: 10px;
}

.app-shell .streak-pill {
  padding: 9px 10px;
  border-radius: 9px;
}

.app-shell .settings-shortcuts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.app-shell .settings-shortcut {
  min-height: 82px;
  padding: 11px 12px;
  border-radius: 10px;
}

.app-shell .settings-shortcut-kicker {
  margin-bottom: 5px;
  font-size: 8px;
}

.app-shell .settings-shortcut strong {
  font-size: 13px;
}

.app-shell .settings-shortcut small {
  margin-top: 4px;
  font-size: 10px;
}

.app-shell .settings-grid {
  gap: 12px;
}

.app-shell .settings-section-heading {
  padding-top: 3px;
}

.app-shell .settings-section-title {
  margin-top: 3px;
  font-size: 17px;
}

.app-shell .settings-row {
  padding: 10px 12px;
  border-radius: 9px;
}

.app-shell .settings-stack {
  gap: 8px;
}

.app-shell .calendar-toolbar,
.app-shell .toolbar-left {
  gap: 8px;
}

.app-shell .calendar-panel {
  padding: 14px;
}

.app-shell .calendar-layout {
  gap: 12px;
}

.app-shell .calendar-grid {
  gap: 6px;
}

.app-shell .calendar-cell {
  border-radius: 9px;
}

.app-shell .modal {
  border-radius: 14px;
}

.app-shell .modal-body,
.app-shell .modal-header {
  padding: 16px;
}

@media (min-width: 1180px) {
  .app-shell .insights-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 1100px) {
  .app-shell .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    --tw-gap: 10px;
    --tw-pad-panel: 13px;
  }

  .app-shell .nav {
    min-height: calc(54px + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
  }

  .app-shell .nav-brand .brand-mark,
  .app-shell .user-chip,
  .app-shell #settingsBtn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .app-shell .main {
    padding: 14px 12px 22px;
  }

  .app-shell .page-header {
    margin-bottom: 12px;
  }

  .app-shell .page-title {
    font-size: 24px;
  }

  .app-shell .page-sub {
    font-size: 12px;
  }

  body.mobile-app-chrome .app-shell > .nav-links {
    height: 46px;
    margin: 7px 12px 2px;
    border-radius: 16px;
  }

  body.mobile-app-chrome .app-shell > .nav-links .nav-link {
    min-width: 61px;
    height: 36px;
    padding-inline: 7px;
    border-radius: 12px;
    font-size: 9.5px;
  }

  .app-shell .kpi-grid,
  .app-shell .performance-kpi-grid {
    gap: 8px;
    margin-bottom: 10px;
  }

  .app-shell .kpi-card {
    min-height: 88px;
    padding: 11px;
  }

  .app-shell .kpi-value,
  .app-shell .kpi-grid .kpi-card:first-child .kpi-value {
    font-size: 22px;
  }

  .app-shell .kpi-value-split {
    font-size: 18px;
  }

  .app-shell .chart-card {
    min-height: 285px;
  }

  .app-shell .chart-wrap {
    min-height: 210px;
  }

  .app-shell .settings-shortcuts {
    grid-template-columns: 1fr 1fr;
  }

  .app-shell .settings-shortcut {
    min-height: 76px;
  }

  .app-shell .settings-shortcut small {
    display: none;
  }

  .app-shell .modal-body,
  .app-shell .modal-header {
    padding: 14px;
  }
}

@media (max-width: 430px) {
  .app-shell .kpi-card {
    min-height: 82px;
  }

  .app-shell .kpi-label {
    font-size: 8.5px;
  }

  .app-shell .kpi-value,
  .app-shell .kpi-grid .kpi-card:first-child .kpi-value {
    font-size: 20px;
  }

  .app-shell .settings-shortcuts {
    grid-template-columns: 1fr;
  }
}