/* ============================================================
   ListenUp "Frost" Dashboard Motif
   Light glass · teal-dominant · brand grid texture
   Source: ListenUp Brand Guidelines 12.2021
   Usage: import this file, apply .lu-* classes or consume the
   custom properties directly in your own components.
   ============================================================ */

:root {
  /* ---- Brand palette (do not modify — per brand guidelines) ---- */
  --lu-teal:        #34a8c4;  /* primary */
  --lu-black:       #000000;  /* primary */
  --lu-white:       #ffffff;  /* primary */
  --lu-yellow:      #f2dc62;  /* secondary — warning / attention */
  --lu-orange:      #dd5321;  /* secondary — alert / critical */
  --lu-grey-50:     #f4f4f4;  /* tertiary */
  --lu-grey-300:    #c4c4c4;  /* tertiary */
  --lu-grey-600:    #6f6b68;  /* tertiary — muted text */

  /* ---- Derived UI tones ---- */
  --lu-ink:         #111111;            /* headline / body text */
  --lu-teal-deep:   #1c7e97;            /* teal legible on light bg (links, positive deltas) */
  --lu-teal-tint:   rgba(52,168,196,.14);  /* active-nav fill, info chips */
  --lu-yellow-ink:  #7a6a10;            /* legible text on yellow tints */

  /* ---- Semantic status colors (traditional, NOT brand palette) ---- */
  --lu-green:       #1a9e4b;  /* success / positive */
  --lu-red:         #d92d20;  /* error / negative / critical */
  --lu-amber:       #d97706;  /* warning / attention */
  --lu-green-tint:  rgba(26,158,75,.12);
  --lu-red-tint:    rgba(217,45,32,.10);
  --lu-amber-tint:  rgba(217,119,6,.12);

  /* ---- Glass recipe ---- */
  --lu-glass-bg:      rgba(255,255,255,.62);
  --lu-glass-border:  rgba(255,255,255,.85);
  --lu-glass-blur:    24px;
  --lu-glass-sat:     1.3;
  --lu-glass-shadow:  0 6px 22px rgba(9,54,66,.08);
  --lu-glass-bg-bar:  rgba(255,255,255,.55);   /* topbar / chrome */

  /* ---- Shape & type ---- */
  --lu-radius:      14px;   /* cards */
  --lu-radius-sm:   9px;    /* buttons, inputs */
  --lu-radius-pill: 999px;
  --lu-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Grid texture (brand graphical element) ---- */
  --lu-grid-line: rgba(52,168,196,.10);
  --lu-grid-cell: 20px;
}

/* ============ Page canvas ============ */
.lu-app {
  font-family: var(--lu-font);
  color: var(--lu-ink);
  background-color: var(--lu-grey-50);
  background-image:
    radial-gradient(640px 300px at 12% -8%, rgba(52,168,196,.28), transparent 65%),
    radial-gradient(520px 260px at 92% 4%,  rgba(52,168,196,.14), transparent 60%);
  min-height: 100vh;
}

/* Brand grid texture — place as a positioned band behind headers */
.lu-grid-texture {
  background-image:
    repeating-linear-gradient(0deg,  var(--lu-grid-line) 0 1px, transparent 1px var(--lu-grid-cell)),
    repeating-linear-gradient(90deg, var(--lu-grid-line) 0 1px, transparent 1px var(--lu-grid-cell));
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent);
  mask-image: linear-gradient(to bottom, black 40%, transparent);
  pointer-events: none;
}

/* Solid-teal variant with white grid (hero bands, section headers) */
.lu-grid-band {
  background-color: var(--lu-teal);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.3) 0 1px, transparent 1px var(--lu-grid-cell)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px var(--lu-grid-cell));
  color: var(--lu-white);
}

/* ============ Glass surfaces ============ */
.lu-glass {
  background: var(--lu-glass-bg);
  border: 1px solid var(--lu-glass-border);
  border-radius: var(--lu-radius);
  box-shadow: var(--lu-glass-shadow);
  -webkit-backdrop-filter: blur(var(--lu-glass-blur)) saturate(var(--lu-glass-sat));
  backdrop-filter: blur(var(--lu-glass-blur)) saturate(var(--lu-glass-sat));
}

.lu-glass-bar {          /* topbar / app chrome */
  background: var(--lu-glass-bg-bar);
  border-bottom: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(20px) saturate(var(--lu-glass-sat));
  backdrop-filter: blur(20px) saturate(var(--lu-glass-sat));
}

/* ============ Type scale ============ */
.lu-h1      { font-size: 23px; font-weight: 700; line-height: 1.15; }
.lu-h2      { font-size: 16px; font-weight: 700; line-height: 1.2; }
.lu-metric  { font-size: 26px; font-weight: 700; line-height: 1.1; }
.lu-label   { font-size: 11px; font-weight: 600; letter-spacing: .08em;
              text-transform: uppercase; color: var(--lu-grey-600); }
.lu-body    { font-size: 12.5px; line-height: 1.45; }
.lu-muted   { color: var(--lu-grey-600); }

/* Deltas / status text — traditional semantic colors */
.lu-delta-up   { font-size: 11.5px; font-weight: 600; color: var(--lu-green); }
.lu-delta-warn { font-size: 11.5px; font-weight: 600; color: var(--lu-amber); }
.lu-delta-down { font-size: 11.5px; font-weight: 600; color: var(--lu-red); }

/* ============ Buttons ============ */
.lu-btn {
  font: 600 12.5px/1 var(--lu-font);
  height: 34px; padding: 0 18px;
  border-radius: var(--lu-radius-sm);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.lu-btn-primary { background: var(--lu-teal); color: var(--lu-white); }
.lu-btn-primary:hover { background: #2b93ac; }
.lu-btn-secondary {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.12);
  color: var(--lu-ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lu-btn-secondary:hover { border-color: var(--lu-teal); color: var(--lu-teal-deep); }

/* ============ Chips / badges ============ */
.lu-chip {
  font: 600 11px/1 var(--lu-font);
  height: 24px; padding: 0 10px;
  border-radius: var(--lu-radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.lu-chip-info    { background: var(--lu-teal-tint);  border: 1px solid rgba(52,168,196,.4);  color: var(--lu-teal-deep); }
.lu-chip-success { background: var(--lu-green-tint); border: 1px solid rgba(26,158,75,.45);  color: var(--lu-green); }
.lu-chip-warning { background: var(--lu-amber-tint); border: 1px solid rgba(217,119,6,.45);  color: var(--lu-amber); }
.lu-chip-alert   { background: var(--lu-red-tint);   border: 1px solid rgba(217,45,32,.45);  color: var(--lu-red); }

/* ============ Nav ============ */
.lu-nav-item {
  font: 500 12.5px/1 var(--lu-font);
  padding: 7px 12px; border-radius: 8px;
  color: var(--lu-grey-600); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: color .15s;
}
.lu-nav-item:hover { color: var(--lu-ink); }
.lu-nav-item.is-active {
  background: var(--lu-teal-tint);
  color: var(--lu-teal-deep); font-weight: 600;
}

/* ============ Masthead (logo | divider | title stack) ============ */
.lu-masthead {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 28px 14px;
}
.lu-masthead-logo { height: 34px; width: auto; display: block; flex: none; }
.lu-masthead-divider {
  width: 1px; align-self: stretch; margin: 2px 0;
  background: rgba(0,0,0,.14); flex: none;
}
.lu-masthead-title    { font: 700 22px/1.15 var(--lu-font); color: var(--lu-ink); }
.lu-masthead-subtitle { font: 500 13px/1.3 var(--lu-font); color: var(--lu-grey-600); margin-top: 3px; }

/* Tab row under the masthead */
.lu-tabs {
  display: flex; gap: 34px; padding: 0 28px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.lu-tab {
  font: 500 14px/1 var(--lu-font);
  color: var(--lu-grey-600); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 2px 13px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.lu-tab:hover { color: var(--lu-ink); }
.lu-tab.is-active {
  color: var(--lu-ink); font-weight: 600;
  border-bottom-color: var(--lu-teal);
}
.lu-tab-icon { width: 17px; height: 17px; flex: none; }

/* Segmented filter pills (MTD / QTD / YTD) */
.lu-pill {
  font: 500 12px/1 var(--lu-font);
  height: 30px; padding: 0 14px;
  border-radius: var(--lu-radius-pill);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.1);
  color: var(--lu-grey-600); cursor: pointer;
  display: inline-flex; align-items: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lu-pill:hover { color: var(--lu-ink); }
.lu-pill.is-active {
  background: var(--lu-ink); border-color: var(--lu-ink);
  color: var(--lu-white); font-weight: 600;
}

/* ============ Inputs ============ */
.lu-input {
  font: 400 12px/1 var(--lu-font);
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--lu-ink); outline: none;
}
.lu-input::placeholder { color: var(--lu-grey-300); }
.lu-input:focus { border-color: var(--lu-teal); box-shadow: 0 0 0 3px var(--lu-teal-tint); }

/* ============ KPI card ============ */
.lu-kpi { padding: 16px 18px; }              /* combine with .lu-glass */
.lu-kpi .lu-metric { margin-top: 6px; }
.lu-kpi [class^="lu-delta"] { margin-top: 4px; display: block; }

/* ============ Data viz ============ */
.lu-bar {
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(to top, var(--lu-teal), rgba(52,168,196,.55));
}
.lu-bar-neutral { background: linear-gradient(to top, var(--lu-ink), rgba(17,17,17,.6)); }
.lu-bar-muted   { background: linear-gradient(to top, var(--lu-grey-300), rgba(196,196,196,.5)); }

.lu-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lu-dot-teal   { background: var(--lu-teal); }
.lu-dot-black  { background: var(--lu-ink); }
.lu-dot-yellow { background: var(--lu-yellow); }
.lu-dot-orange { background: var(--lu-orange); }
.lu-dot-grey   { background: var(--lu-grey-300); }
/* status dots */
.lu-dot-green  { background: var(--lu-green); }
.lu-dot-amber  { background: var(--lu-amber); }
.lu-dot-red    { background: var(--lu-red); }

/* ============ Avatar ============ */
.lu-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lu-teal); color: var(--lu-white);
  font: 700 12px/1 var(--lu-font);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============ Accessibility / fallback ============ */
@supports not (backdrop-filter: blur(1px)) {
  .lu-glass, .lu-glass-bar { background: rgba(255,255,255,.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .lu-glass, .lu-glass-bar { background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}