/* ================================================================
   new-cine — Vaadin 24.9 application theme
   Warm light shell • violet primary • rounded soft cards
   Left navigation (app-layout drawer) intentionally untouched.
   ================================================================ */

@import url('./main.css');
@import url('./main-layout.css');
@import url('./collections.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');

html {
  /* ---------- NC Palette ---------- */
  --nc-bg:             #F1F2F7;
  --nc-surface:        #FFFFFF;
  --nc-surface-soft:   #F7F7FB;
  --nc-ink:            #1F2340;
  --nc-ink-soft:       #5A6079;
  --nc-ink-muted:      #8A8FA5;
  --nc-hairline:       #EDEEF4;

  --nc-primary:        #6C5CE7;
  --nc-primary-hover:  #5B4BDB;
  --nc-primary-soft:   #EEEBFE;

  --nc-violet:         #8B7CF6;
  --nc-blue:           #3B6BE8;
  --nc-coral:          #F06A7E;
  --nc-amber:          #F39156;
  --nc-teal:           #2EC5C1;
  --nc-pink:           #EC5A9A;

  --nc-success:        #22B07D;
  --nc-warning:        #F39156;
  --nc-danger:         #F06A7E;

  /* ---------- 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(31, 35, 64, 0.18),
                     0 2px 6px -2px rgba(31, 35, 64, 0.06);
  --nc-shadow-pop:   0 20px 40px -16px rgba(108, 92, 231, 0.45);
  --nc-shadow-soft:  0 1px 2px rgba(31, 35, 64, 0.05);

  /* ---------- Planck sidebar variables (left nav — unchanged) ---------- */
  --planck-purple: #6c5ce7;
  --planck-purple-light: rgba(108, 92, 231, 0.06);
  --planck-purple-border: #ece6f5;
  --planck-purple-bg: #e8e0f5;
  --planck-green: #2ecc71;
  --planck-orange: #f39c12;
  --planck-red: rgb(194, 8, 83);
  --planck-bg: #f4f0fa;
  --planck-card: #ffffff;
  --planck-text: #333;
  --planck-text-muted: #999;
  --planck-text-sec: #666;
  --planck-sb-exp: 290px;
  --planck-sb-col: 80px;
  --planck-speed: 0.3s;

  /* ---------- Map NC onto Lumo ---------- */
  --lumo-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --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);
  --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(31, 35, 64, 0.04);
  --lumo-contrast-10pct:  rgba(31, 35, 64, 0.07);
  --lumo-contrast-20pct:  rgba(31, 35, 64, 0.12);
  --lumo-contrast-30pct:  rgba(31, 35, 64, 0.20);
  --lumo-contrast-50pct:  rgba(31, 35, 64, 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: var(--nc-ink);
  font-family: var(--lumo-font-family);
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; }

/* ------------------------------------------------------------------
   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: 22px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 14px 30px -16px rgba(31, 35, 64, 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: 46px; height: 46px;
  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-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.nc-stat__lbl  { font-size: 13px; opacity: 0.88; margin-top: 6px; font-weight: 500; }

.nc-stat--violet { background: linear-gradient(135deg, #A79BFB 0%, #8B7CF6 100%); }
.nc-stat--blue   { background: linear-gradient(135deg, #4F82F3 0%, #3B6BE8 100%); }
.nc-stat--coral  { background: linear-gradient(135deg, #F47F8F 0%, #F06A7E 100%); }
.nc-stat--amber  { background: linear-gradient(135deg, #F6A474 0%, #F39156 100%); }

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

.nc-kpi {
  font-size: 34px; font-weight: 800; color: var(--nc-ink);
  letter-spacing: -0.03em; 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);
}
.nc-chip--coral { background: #FDE7EB; color: var(--nc-coral); }
.nc-chip--amber { background: #FCEBDD; color: var(--nc-amber); }
.nc-chip--teal  { background: #DFF6F5; color: var(--nc-teal); }

.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);
}
.nc-mini-icon--coral { background: #FDE7EB; color: var(--nc-coral); }
.nc-mini-icon--amber { background: #FCEBDD; color: var(--nc-amber); }
.nc-mini-icon--teal  { background: #DFF6F5; color: var(--nc-teal); }
.nc-mini-icon--blue  { background: #E3EAFB; color: var(--nc-blue); }
.nc-mini-icon--pink  { background: #FCE3EE; color: var(--nc-pink); }

.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);
}
.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; }