demo-nanchi/lead-discovery/src/styles.scss

@use '@angular/material' as mat;

@include mat.elevation-classes();
@include mat.app-background();

$lead-discovery-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
  ),
  density: (
    scale: 0,
  )
));

:root {
  @include mat.all-component-themes($lead-discovery-theme);
}

/* ===== Global Styles ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  background: #f5f7fa;
  color: #1a1a2e;
  overflow: hidden;
}

/* Fix mat-sidenav-container height */
.mat-sidenav-container {
  height: 100% !important;
}

.mat-sidenav-content {
  overflow: auto !important;
}


/* ===== CSS Variables ===== */
:root {
  --primary: #1976d2;
  --primary-light: #e3f2fd;
  --accent: #ff6f00;
  --success: #2e7d32;
  --success-light: #e8f5e9;
  --warning: #f57f17;
  --warning-light: #fff8e1;
  --danger: #c62828;
  --danger-light: #ffebee;
  --info: #0277bd;
  --info-light: #e1f5fe;

  --grade-s: #c62828;
  --grade-s-bg: #ffebee;
  --grade-a: #e65100;
  --grade-a-bg: #fff3e0;
  --grade-b: #f9a825;
  --grade-b-bg: #fffde7;
  --grade-c: #757575;
  --grade-c-bg: #fafafa;

  --cat-a: #1565c0;
  --cat-a-bg: #e3f2fd;
  --cat-b: #2e7d32;
  --cat-b-bg: #e8f5e9;
  --cat-c: #6a1b9a;
  --cat-c-bg: #f3e5f5;
  --cat-d: #e65100;
  --cat-d-bg: #fff3e0;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
}

/* ===== Utility classes ===== */
.page-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 32px;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: var(--shadow-md);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  &.grade-s { background: var(--grade-s-bg); color: var(--grade-s); }
  &.grade-a { background: var(--grade-a-bg); color: var(--grade-a); }
  &.grade-b { background: var(--grade-b-bg); color: var(--grade-b); }
  &.grade-c { background: var(--grade-c-bg); color: var(--grade-c); }

  &.cat-a { background: var(--cat-a-bg); color: var(--cat-a); }
  &.cat-b { background: var(--cat-b-bg); color: var(--cat-b); }
  &.cat-c { background: var(--cat-c-bg); color: var(--cat-c); }
  &.cat-d { background: var(--cat-d-bg); color: var(--cat-d); }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}