/*
  utilities.css — layout-helpers og hjelpeklasser for Cold-Sale
  Kun tokens. Ingen hardkodede verdier.
*/

@import './tokens.css';

/* ─── Layout ─── */

.stack       { display: flex; flex-direction: column; }
.stack--sm   { gap: var(--space-sm); }
.stack--md   { gap: var(--space-md); }
.stack--lg   { gap: var(--space-lg); }

.row         { display: flex; flex-direction: row; align-items: center; }
.row--sm     { gap: var(--space-sm); }
.row--md     { gap: var(--space-md); }
.row--lg     { gap: var(--space-lg); }
.row--wrap   { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end    { justify-content: flex-end; }

.grid-2      { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3      { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); }

.flex-1      { flex: 1; }
.min-w-0     { min-width: 0; }

/* ─── Spacing ─── */

.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }

.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ─── Typografi ─── */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

.font-400  { font-weight: 400; }
.font-500  { font-weight: 500; }
.font-600  { font-weight: 600; }
.font-700  { font-weight: 700; }

.font-mono   { font-family: var(--font-mono); }
.font-serif  { font-family: var(--font-serif); }
.font-sans   { font-family: var(--font-sans); }

.text-upper  { text-transform: uppercase; letter-spacing: 0.10em; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Farger ─── */

.color-ink        { color: var(--color-ink); }
.color-ink-soft   { color: var(--color-ink-soft); }
.color-muted      { color: var(--color-muted); }
.color-muted-soft { color: var(--color-muted-soft); }
.color-accent     { color: var(--color-accent); }
.color-pos        { color: var(--color-pos); }
.color-neg        { color: var(--color-neg); }

/* ─── Divider ─── */

.divider {
  height: 1px;
  background: var(--color-line-soft);
  border: none;
}

/* ─── Synlighet ─── */

.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ─── Responsivt design ─── */

/* Topbar-hamburger (skjult på desktop) */
.topbar__menu-btn {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ≤ 1024px: sidebar kollapser til icon-strip */
@media (max-width: 1024px) {
  :root { --sidebar-width: 60px; }

  .sidebar__logo-name,
  .sidebar__logo-tag,
  .nav-item__label,
  .nav-item__count,
  .nav-group__label,
  .sidebar__team-label,
  .team-member__name,
  .team-member__dot {
    display: none;
  }

  .sidebar__logo {
    justify-content: center;
    padding: var(--space-lg) 0;
  }

  .nav-item {
    justify-content: center;
    padding: var(--space-sm) 0;
    margin: 1px var(--space-xs);
  }

  .nav-item__icon { margin: 0; }

  .sidebar__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
  }

  .team-member {
    justify-content: center;
    padding: 0;
  }

  .team-member__avatar { margin: 0; }

  .topbar__menu-btn { display: inline-flex; }
}

/* ≤ 900px: noen grid-layouts stacker */
@media (max-width: 900px) {
  .dash-kpi-grid        { grid-template-columns: 1fr 1fr; }
  .dash-two-col         { grid-template-columns: 1fr; }
  .settings-layout      { grid-template-columns: 1fr; }
  .settings-nav         { flex-direction: row; flex-wrap: wrap; position: static; }
  .settings-fields      { grid-template-columns: 1fr; }
  .dt-body              { grid-template-columns: 1fr; min-width: unset; }
  .imp-layout           { grid-template-columns: 1fr; }
  .today-grid           { grid-template-columns: 1fr; }
}

/* ≤ 640px: mobil (iPhone 13 = 390px) */
@media (max-width: 640px) {
  /* Sidebar skjult — erstattes av bunnnavigasjon */
  #sidebar              { display: none !important; }

  /* KPI-grid: 2-kolonne på mobil */
  .dash-kpi-grid        { grid-template-columns: 1fr 1fr; }

  /* Filtre brytes over flere linjer */
  .lf-filters           { flex-wrap: wrap; }

  /* Pipeline kanban skjules — erstattes av stage-tabs */
  .kb-board             { display: none !important; }

  /* Enkelt-kolonne layouts */
  .dt-body              { grid-template-columns: 1fr; }
  .dash-two-col         { grid-template-columns: 1fr !important; }
  .today-grid           { grid-template-columns: 1fr; }

  /* Sidebar-width til 0 slik at innhold fyller skjermen */
  :root                 { --sidebar-width: 0px; }
}