/*
 * Graphite Note Variation B - final precision polish
 *
 * Loaded after graphite-b-unified.css. This is intentionally a narrow visual
 * layer: shell proportions, selected/focus states, canvas neutrality, welcome
 * density, nested-surface simplification and laptop-width behavior only.
 * No routes, model logic, API behavior or permissions are changed here.
 */

:root {
  /* Slightly narrower enterprise rail and a more neutral working canvas. */
  --gnb-sidebar: 204px;
  --gnb-canvas: #f8fafc;
  --gnb-surface-2: #f8fafc;
  --gnb-border: #dbe3ef;
  --gnb-border-soft: #e9eef5;
}

/* --------------------------------------------------------------------------
   Shell proportions and vertical rhythm
   -------------------------------------------------------------------------- */

.gn-app-main {
  padding: 24px 28px 48px !important;
}

.gn-app-container {
  max-width: 1680px !important;
}

/* Keep the application neutral. Blue-tinted surfaces are reserved for
   selected states, AI assistance and semantic status. */
.gn-app-shell,
.gn-app-main,
.gn-app-content,
.gn-page-content {
  background: var(--gnb-canvas) !important;
}

/* --------------------------------------------------------------------------
   Sidebar: selected is selected; keyboard focus is focus
   -------------------------------------------------------------------------- */

.gn-sidebar .gn-sidebar-navbar {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.gn-sidebar .navbar-light .navbar-nav .nav-link,
.gn-sidebar .q-main-menu-nav-link {
  min-height: 39px !important;
  border-radius: 7px !important;
}

/* Remove the browser/bootstrap focus ring that made active entries look like
   a double-outlined button after mouse navigation. */
.gn-sidebar .navbar-light .navbar-nav .nav-link:focus:not(:focus-visible),
.gn-sidebar .q-main-menu-nav-link:focus:not(:focus-visible),
.gn-sidebar .navbar-light .navbar-nav .nav-item.active > .nav-link:focus:not(:focus-visible),
.gn-sidebar .navbar-light .navbar-nav .active > .nav-link:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.gn-sidebar .navbar-light .navbar-nav .nav-item.active > .nav-link,
.gn-sidebar .navbar-light .navbar-nav .active > .nav-link {
  border-color: rgba(70, 215, 255, .13) !important;
  outline: none !important;
  box-shadow: inset 3px 0 0 var(--gnb-blue) !important;
}

/* Preserve a clear, accessible keyboard-only focus state. */
.gn-sidebar .navbar-light .navbar-nav .nav-link:focus-visible,
.gn-sidebar .q-main-menu-nav-link:focus-visible {
  outline: 2px solid rgba(70, 215, 255, .92) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Welcome: stronger hierarchy, fewer nested boxes
   -------------------------------------------------------------------------- */

.gnb-welcome-header {
  margin-bottom: 14px !important;
}

.gnb-welcome-title {
  letter-spacing: -.035em !important;
}

.gnb-stat-grid {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.gnb-stat-grid .gn-stat-card {
  box-shadow: none !important;
}

/* Give Ask Graphite a deliberate command-surface feel without making it a
   marketing hero. */
.gnb-ai-assistant {
  min-height: 66px;
  padding: 12px 14px !important;
  border-color: #cfe0ff !important;
  background: linear-gradient(100deg, #f8faff 0%, #eef4ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.gnb-ai-assistant__identity strong {
  font-size: 14px !important;
  line-height: 18px !important;
}

.gnb-ai-assistant__identity span:not(.gn-ai-card__icon) {
  font-size: 14px !important;
  line-height: 16px !important;
}

.gnb-ai-assistant .gn-ai-prompt {
  min-height: 40px !important;
}

.gnb-ai-assistant .gn-ai-prompt__placeholder {
  font-size: 14px !important;
}

.gnb-ai-assistant .gn-ai-prompt button {
  height: 32px !important;
  font-size: 14px !important;
}

/* Recent activity owns the content; Quick actions should not consume a full
   quarter of the desktop workspace. */
.gnb-welcome-grid {
  grid-template-columns: minmax(0, 2.35fr) minmax(230px, .48fr) !important;
  gap: 10px !important;
}

/* Flatten the extra box level inside Recent activity. The outer section card
   is enough structure; rows become quiet list items with separators. */
.gnb-recent-columns .gn-recent-list {
  overflow: hidden;
  border: 1px solid var(--gnb-border-soft);
  border-radius: 7px;
  background: #fff;
}

.gnb-recent-columns .gn-recent-item {
  min-height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gnb-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gnb-recent-columns .gn-recent-item:last-child {
  border-bottom: 0 !important;
}

.gnb-recent-columns .gn-recent-item:hover {
  background: #f8fbff !important;
}

/* Quick actions: quiet utility list, not a stack of little cards. */
.gn-quick-list {
  gap: 1px !important;
}

.gn-quick-action {
  min-height: 37px !important;
  border-radius: 6px !important;
}

.gn-quick-action:hover {
  background: #f6f9fd !important;
}

.gn-quick-action__icon {
  width: 25px !important;
  height: 25px !important;
  border: 0 !important;
  background: #f2f6ff !important;
}

/* --------------------------------------------------------------------------
   Content cards: fewer visual layers, consistent quiet surfaces
   -------------------------------------------------------------------------- */

.gn-section-card,
.gn-card,
.gn-panel,
.gn-app-shell .card,
.gn-chart-card,
.gn-model-metric,
.gn-predict-panel,
.gn-api-panel,
.gn-app-shell .modelScenario.wrapper {
  box-shadow: none !important;
}

/* Avoid a card-inside-card effect in common content rows. */
.gn-section-card .gn-card,
.gn-section-card .card,
.gn-panel .gn-card,
.gn-panel .card {
  border-color: var(--gnb-border-soft) !important;
}

/* --------------------------------------------------------------------------
   Laptop density: 1366 / 1440 are first-class enterprise widths
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1440px) {
  :root { --gnb-sidebar: 196px; }

  .gn-app-main {
    padding: 20px 20px 42px !important;
  }

  .gn-sidebar .gn-sidebar-navbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .gnb-welcome-grid {
    grid-template-columns: minmax(0, 2.15fr) minmax(220px, .52fr) !important;
  }

  .gnb-ai-assistant {
    grid-template-columns: minmax(220px, .64fr) minmax(360px, 1.5fr) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .gnb-welcome-grid,
  .gnb-recent-columns {
    grid-template-columns: 1fr !important;
  }

  .gnb-ai-assistant {
    grid-template-columns: 1fr !important;
  }
}