/* App-specific styles.

   Bootstrap 5.3 (bundled with dash-bootstrap-components) is the base design
   system; the brand tokens and component overrides (fonts, colours, buttons,
   cards, tabs, …) live in alitiq-brand.css. Only genuinely custom,
   app-specific classes remain below. */

/* Container / card helpers used across the dashboards */
.pretty_container {
  border: 1px solid var(--alitiq-border);
  border-radius: var(--radius);
  background-color: var(--alitiq-white);
  margin: 6px;
  padding: 8px;
  position: relative;
  height: max-content;
}

.flex-display {
  display: flex;
}

.container-display {
  display: flex;
}

.row {
  margin-right: -5px;
  margin-left: -5px;
  margin-top: 5px;
}

#mainContainer {
  display: flex;
  flex-direction: column;
  /* clears the fixed collapsed sidebar (64px); grows to match when expanded */
  margin-left: 64px;
  transition: margin-left 0.2s ease-in-out;
}

/* pushed further right while the sidebar is expanded (see sidebar.css) */
#mainContainer.sidebar-expanded {
  margin-left: 236px;
}

/* pages without sidebar (login) use the full width */
#mainContainer:not(:has(#sidebar)) {
  margin-left: 0;
}

/* ---------- overview hub ---------------------------------------------- */
.overview-page {
  max-width: 1440px;
  padding: 1.75rem 2% 3rem;
}

.info-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--alitiq-soft-green);
  border: 1px solid var(--alitiq-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
}
.info-banner svg { flex-shrink: 0; color: var(--alitiq-chart-green); }

.nav-tile-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.nav-tile {
  height: 100%;
  overflow: hidden;
  transition: border-color 0.15s ease-in-out;
}
/* gradient accent bar on top of each tile */
.nav-tile::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--alitiq-gradient);
}
.nav-tile-link:hover .nav-tile { border-color: var(--alitiq-black); }
.nav-tile .card-body { display: flex; flex-direction: column; }
.nav-tile h5 { font-size: 1.05rem; }
.nav-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--alitiq-gradient);
  color: var(--alitiq-black);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.nav-tile-text { font-size: 0.85rem; color: var(--alitiq-muted); margin-bottom: 0.9rem; }
.nav-tile-cta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--alitiq-chart-green);
}

/* Responsive tweaks for the custom containers on small screens */
@media (max-width: 550px) {
  .flex-display {
    display: block !important;
  }
  .container-display {
    display: flex;
  }
  .pretty_container {
    margin: 0 !important;
    margin-bottom: 25px !important;
    height: auto;
  }
  .mini_container {
    margin-bottom: 25px !important;
    border: 1px solid var(--alitiq-border);
    border-radius: var(--radius);
    background-color: var(--alitiq-white);
    padding: 15px;
    position: relative;
  }
}

/* ---------- Portfolio management (same look as the alitiq-api GUI) ---- */
.stat-tile {
    border: 1px solid var(--alitiq-border);
    border-radius: var(--radius);
    background: var(--alitiq-white);
    padding: 1rem 1.15rem;
    height: 100%;
}
.stat-tile .stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--alitiq-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stat-tile .stat-value {
    font-family: var(--alitiq-font-head);
    font-size: 2.2rem;
    color: var(--alitiq-black);
    line-height: 1.1;
    margin-top: 0.3rem;
}
.stat-tile .stat-unit {
    font-family: var(--alitiq-font-body);
    font-size: 0.95rem;
    color: var(--alitiq-muted);
    margin-left: 0.25rem;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--alitiq-border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--alitiq-muted); }
.detail-row > span:last-child { color: var(--alitiq-black); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.details-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--alitiq-chart-green);
    margin: 1.25rem 0 0.5rem;
}
.asset-table { font-size: 0.85rem; margin-bottom: 0; }
.asset-table th, .asset-table td { padding: 0.35rem 0.5rem; white-space: nowrap; }
/* crosshair marking the map center on the location picker */
.map-crosshair-container { position: relative; }
.map-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--alitiq-white);
    text-shadow: 0 0 3px var(--alitiq-black);
    pointer-events: none;
}