// --------------------------------------------------------------------------
// Elevation — CSS tĩnh cho Angular Material shadow levels (Light Mode)
//   Thay thế Angular Material mixin `mat.elevation()` bằng CSS cứng để
//   tránh phụ thuộc vào Material theme SCSS khi cần dùng elevation riêng lẻ.
//
//   Tương đương: mat-elevation-z{0..8}
//   Nguồn shadow: Material Design spec (3 lớp: ambient + penumbra + umbra)
// --------------------------------------------------------------------------

// z0 — không có shadow (dùng để reset)
.mat-elevation-z0 {
  box-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

// z1 — surface nhẹ (card, chip)
.mat-elevation-z1 {
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px  0px rgba(0, 0, 0, 0.14),
    0px 1px 3px  0px rgba(0, 0, 0, 0.12);
}

// z2 — button raised
.mat-elevation-z2 {
  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px  0px rgba(0, 0, 0, 0.14),
    0px 1px 5px  0px rgba(0, 0, 0, 0.12);
}

// z3 — card hover
.mat-elevation-z3 {
  box-shadow:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px  0px rgba(0, 0, 0, 0.14),
    0px 1px 8px  0px rgba(0, 0, 0, 0.12);
}

// z4 — app bar
.mat-elevation-z4 {
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px  0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

// z5
.mat-elevation-z5 {
  box-shadow:
    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px   0px rgba(0, 0, 0, 0.14),
    0px 1px 14px  0px rgba(0, 0, 0, 0.12);
}

// z6 — floating action button
.mat-elevation-z6 {
  box-shadow:
    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px  0px rgba(0, 0, 0, 0.14),
    0px 1px 18px  0px rgba(0, 0, 0, 0.12);
}

// z7
.mat-elevation-z7 {
  box-shadow:
    0px 4px 5px  -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px  1px rgba(0, 0, 0, 0.14),
    0px 2px 16px  1px rgba(0, 0, 0, 0.12);
}

// z8 — dialog, drawer
.mat-elevation-z8 {
  box-shadow:
    0px 5px 5px  -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px  1px rgba(0, 0, 0, 0.14),
    0px 3px 14px  2px rgba(0, 0, 0, 0.12);
}