/* ================================================================
   blue-red-orange — Vaadin 24.9 application theme
   Warm cream shell • sunset-orange primary • midnight-blue sidebar • crimson accents
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Outfit:wght@400;500;600;700&display=swap');

@import url('./main.css');
@import url('./main-layout.css');
@import url('./components/button.css');
@import url('./components/text-field.css');
@import url('./components/select.css');
@import url('./components/date-picker.css');
@import url('./components/grid.css');
@import url('./components/dialog.css');
@import url('./components/tabs.css');
@import url('./components/badge.css');
@import url('./components/progress-bar.css');
@import url('./components/checkbox.css');
@import url('./components/card.css');
@import url('./components/cookie-consent-bar.css');
@import url('./collections.css');
@import url('./member.css');
@import url('./auth.css');


html {
  /* ---------- NC Palette ---------- */
  --nc-bg:            #FFF7F0;
  --nc-surface:        #FFFFFF;
  --nc-surface-soft:   #FFF3E8;
  --nc-ink:            #2B160B;
  --nc-ink-soft:       #6B4F3F;
  --nc-ink-muted:      #8C6B58;
  --nc-hairline:       #F0DCC9;

  --nc-primary:        #FF6B35;
  --nc-primary-hover:  #C24A14;
  --nc-primary-soft:   #FFE4D3;

  --nc-violet:         #101B42;
  --nc-blue:           #101B42;
  --nc-coral:          #FF8F5C;
  --nc-amber:          #D7263D;
  --nc-teal:           #FF6B35;
  --nc-pink:           #FFB489;

  --nc-success:        #22B07D;
  --nc-warning:        #E8B840;
  --nc-danger:         #C04040;

  /* ---------- NC Radii ---------- */
  --nc-radius-xs: 8px;
  --nc-radius-sm: 12px;
  --nc-radius-md: 16px;
  --nc-radius-lg: 20px;
  --nc-radius-pill: 999px;

  /* ---------- NC Shadows ---------- */
  --nc-shadow-card:  0 12px 30px -14px rgba(43, 22, 11, 0.18),
                     0 2px 6px -2px rgba(43, 22, 11, 0.06);
  --nc-shadow-pop:   0 20px 40px -16px rgba(255, 107, 53, 0.45);
  --nc-shadow-soft:  0 1px 2px rgba(43, 22, 11, 0.05);

  /* ---------- Planck sidebar variables (dark midnight-blue sidebar) ---------- */
  --planck-purple:        #FF6B35;
  --planck-purple-light:  rgba(255, 107, 53, 0.08);
  --planck-purple-border: #F0DCC9;
  --planck-purple-bg:     #FFE4D3;
  --planck-green:         #22B07D;
  --planck-orange:        #FF6B35;
  --planck-red:           #D7263D;
  --planck-bg:            #FFF7F0;
  --planck-card:          #ffffff;
  --planck-text:          #2B160B;
  --planck-text-muted:    #8C6B58;
  --planck-text-sec:      #6B4F3F;
  --planck-sb-exp:        290px;
  --planck-sb-col:        80px;
  --planck-speed:         0.3s;

  /* ---------- Type families ---------- */
  --nc-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --nc-font-body:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Map NC onto Lumo ---------- */
  --lumo-font-family: var(--nc-font-body);

  --lumo-base-color:       var(--nc-surface);
  --lumo-tint:             var(--nc-surface);
  --lumo-shade:            var(--nc-ink);

  --lumo-primary-color:        var(--nc-primary);
  --lumo-primary-color-50pct:  color-mix(in oklab, var(--nc-primary) 50%, transparent);
  --lumo-primary-color-10pct:  var(--nc-primary-soft);
  --lumo-primary-text-color:   var(--nc-primary-hover);
  --lumo-primary-contrast-color: #FFFFFF;

  --lumo-error-color:       var(--nc-danger);
  --lumo-error-text-color:  var(--nc-danger);
  --lumo-success-color:     var(--nc-success);
  --lumo-success-text-color:var(--nc-success);

  --lumo-header-text-color: var(--nc-ink);
  --lumo-body-text-color:   var(--nc-ink);
  --lumo-secondary-text-color: var(--nc-ink-soft);
  --lumo-tertiary-text-color:  var(--nc-ink-muted);
  --lumo-disabled-text-color:  var(--nc-ink-muted);

  --lumo-contrast-5pct:   rgba(43, 22, 11, 0.04);
  --lumo-contrast-10pct:  rgba(43, 22, 11, 0.07);
  --lumo-contrast-20pct:  rgba(43, 22, 11, 0.12);
  --lumo-contrast-30pct:  rgba(43, 22, 11, 0.20);
  --lumo-contrast-50pct:  rgba(43, 22, 11, 0.38);
  --lumo-contrast-60pct:  var(--nc-ink-soft);
  --lumo-contrast-80pct:  var(--nc-ink);
  --lumo-contrast-90pct:  var(--nc-ink);

  /* type scale */
  --lumo-font-size-xxs: 11px;
  --lumo-font-size-xs:  12px;
  --lumo-font-size-s:   13px;
  --lumo-font-size-m:   14px;
  --lumo-font-size-l:   16px;
  --lumo-font-size-xl:  20px;
  --lumo-font-size-xxl: 28px;
  --lumo-font-size-xxxl: 38px;
  --lumo-line-height-m: 1.5;

  /* radii */
  --lumo-border-radius-s: var(--nc-radius-xs);
  --lumo-border-radius-m: var(--nc-radius-sm);
  --lumo-border-radius-l: var(--nc-radius-lg);

  /* shadows */
  --lumo-box-shadow-xs: var(--nc-shadow-soft);
  --lumo-box-shadow-s:  var(--nc-shadow-card);
  --lumo-box-shadow-m:  var(--nc-shadow-card);
  --lumo-box-shadow-l:  var(--nc-shadow-pop);
}

html, body {
  background: var(--nc-bg);
  color: rgba(43, 22, 11, 0.78);
  font-family: var(--lumo-font-family);
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { font-family: var(--nc-font-display); letter-spacing: -0.005em; font-weight: 800; }

/* ------------------------------------------------------------------
   Page header block — title + description, shared by every page
   (adapted from the 'teams' page layout; 30px top padding is the one
   deliberate difference from that original).
   ------------------------------------------------------------------ */
.page-header-block {
  width: 100%;
  padding-top: 30px;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-header-block .col-page-header__title { margin: 0; }

.page-header-desc {
  margin: 0;
  color: #6B4F3F;
  font-family: var(--nc-font-body);
  font-size: 13px;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   NC Utility classes
   ------------------------------------------------------------------ */
.nc-card {
  background: var(--nc-surface);
  border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow-card);
  padding: 24px;
}

.nc-card--tight { padding: 18px; }
.nc-card--flush { padding: 0; overflow: hidden; }

.nc-stat {
  border-radius: var(--nc-radius-lg);
  padding: 8px 15px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 26px;
  box-shadow: 0 14px 30px -16px rgba(43, 22, 11, 0.35);
  position: relative;
  overflow: hidden;
}
.nc-stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none;
}
.nc-stat__icon {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.22);
  border-radius: 14px;
  flex-shrink: 0;
  backdrop-filter: blur(2px);
}
.nc-stat__num  { font-family: var(--nc-font-display); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.nc-stat__lbl  { font-size: 17px; opacity: 0.88; margin-top: 1px; font-weight: 600; }
.nc-stat__updated { font-size: 12px; opacity: 0.70; margin-top: 3px; font-weight: 400; }

/* blue-red-orange palette stat card gradients */
.nc-stat--violet { background: linear-gradient(135deg, #182859 0%, #0A1330 100%); }
.nc-stat--blue   { background: linear-gradient(135deg, #33508F 0%, #101B42 100%); }
.nc-stat--coral  { background: linear-gradient(135deg, #FF6B35 0%, #C24A14 100%); }
.nc-stat--amber  { background: linear-gradient(135deg, #D7263D 0%, #8E1029 100%); }

/* ------------------------------------------------------------------
   Top stat cards — neumorphism style (root/home page)
   ------------------------------------------------------------------ */
.nc-stat-card {
  position: relative;
  /*min-height: 300px;*/
  border-radius: 22px;
  padding: 10px;
  background: var(--nc-bg);
  /*transition: box-shadow 0.4s ease;*/
  cursor: pointer;
}

.nc-stat-card:hover {
/*  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.35),
    inset -4px -4px 10px rgba(255, 255, 255, 0.75),
    12px 12px 28px rgba(163, 177, 198, 0.6),
    -10px -10px 24px rgba(255, 255, 255, 0.9);*/
}

.nc-stat-card__inner {
  position: relative;
  height: 100%;
  /*min-height: 280px;*/
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  overflow: hidden;
  color: #fff;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.nc-stat-card__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.nc-stat-card:hover .nc-stat-card__inner {
  transform: translateY(-14px);
  box-shadow: 0 24px 34px -12px rgba(43, 22, 11, 0.5);
}

.nc-stat-card__icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  margin-top: 14px;
  margin-bottom: 16px;
  backdrop-filter: blur(2px);
}

.nc-stat-card__num {
  position: relative;
  z-index: 1;
  font-family: var(--nc-font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 8px;
  color: #fff;
}

.nc-stat-card__lbl {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.92;
  margin: 0 0 6px;
  color: #fff;
}

.nc-stat-card__updated {
  position: relative;
  z-index: 1;
  font-size: 11px;
  opacity: 0.72;
  margin-bottom: 18px;
}

.nc-stat-card__more {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: auto;
  margin-bottom: 15px;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nc-stat-card__more:hover {
  color:  dimgray;
  background: #fff;
  border-color: #fff;
}

.nc-stat-card--violet .nc-stat-card__inner { background: linear-gradient(135deg, #182859 0%, #0A1330 100%); }
.nc-stat-card--blue   .nc-stat-card__inner { background: linear-gradient(135deg, #33508F 0%, #101B42 100%); }
.nc-stat-card--coral  .nc-stat-card__inner { background: linear-gradient(135deg, #FF6B35 0%, #C24A14 100%); }
.nc-stat-card--amber  .nc-stat-card__inner { background: linear-gradient(135deg, #D7263D 0%, #8E1029 100%); }

.nc-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.nc-title {
  font-family: var(--nc-font-display);
  font-size: 20px; font-weight: 800; color: var(--nc-ink);
  letter-spacing: 0;
}
.nc-subtitle {
  font-size: 12px; color: var(--nc-ink-muted); font-weight: 500;
  margin-top: 2px;
}

.nc-kpi {
  font-family: var(--nc-font-display);
  font-size: 36px; font-weight: 800; color: var(--nc-ink);
  letter-spacing: 0; line-height: 1;
}
.nc-kpi__lbl { color: var(--nc-ink-soft); font-size: 13px; margin-top: 6px; }

.nc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--nc-primary-soft); color: var(--nc-primary-hover);
}
.nc-chip--coral { background: rgba(215,38,61,0.10); color: var(--nc-amber); }
.nc-chip--amber { background: rgba(255,107,53,0.14); color: #9C3B0F; }
.nc-chip--teal  { background: var(--nc-primary-soft); color: var(--nc-primary-hover); }

.nc-mini-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--nc-primary-soft); color: var(--nc-primary-hover);
}
.nc-mini-icon--coral { background: rgba(215,38,61,0.10); color: var(--nc-amber); }
.nc-mini-icon--amber { background: rgba(255,107,53,0.14); color: #9C3B0F; }
.nc-mini-icon--teal  { background: var(--nc-primary-soft); color: var(--nc-primary-hover); }
.nc-mini-icon--blue  { background: rgba(16,27,66,0.10); color: #101B42; }
.nc-mini-icon--pink  { background: rgba(255,143,92,0.18); color: #C24A14; }

.nc-hairline { border-top: 1px solid var(--nc-hairline); }

.nc-seg { display: inline-flex; gap: 18px; }
.nc-seg__item {
  font-size: 12px; font-weight: 700; color: var(--nc-ink-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; padding: 6px 0; position: relative;
  background: none; border: 0;
}
.nc-seg__item[aria-selected='true'] { color: var(--nc-primary-hover); }
.nc-seg__item[aria-selected='true']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px; background: var(--nc-primary);
}

.nc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }