@import url("./app-essenza-20260828-1175-shared-canvas.css");

/* Task 1176: one canonical primary glass surface across public, learner,
   profile, authentication, and operator screens. This is intentionally
   separate from the shared floral canvas contract in Task 1175. */
:root {
  --yen-primary-glass: rgba(255, 255, 255, .34);
  --yen-primary-glass-line: rgba(255, 255, 255, .30);
  --yen-primary-glass-shadow: 0 8px 24px rgba(69, 55, 43, .10);
  --yen-primary-glass-filter: blur(14px) saturate(1.02);
}

:is(
  .blog-index-page .compact-article-card,
  .blog-detail-page .grounded-article-detail,
  .course-index-page .course-list-row,
  .course-detail-page .page-hero-copy,
  .course-detail-page .grounded-enrollment-card,
  .auth-page .auth-card,
  .dashboard-page .grounded-enrollment-card,
  .dashboard-page .grounded-course-card,
  .dashboard-page .grounded-form-card,
  .learner-course-overview-page .page-hero-copy,
  .learner-course-overview-page .grounded-enrollment-card,
  .course-player-page .course-player-main,
  .course-player-page .grounded-form-card,
  .profile-page .profile-surface,
  .operator-page .grounded-form-card,
  .operator-page .operator-stat-card,
  .operator-page .operator-traffic-panel,
  .operator-page .operator-device-card,
  .operator-page .operator-learning-course-card,
  .operator-articles-page .operator-article-inventory-card
) {
  background-color: var(--yen-primary-glass) !important;
  border-color: var(--yen-primary-glass-line) !important;
  box-shadow: var(--yen-primary-glass-shadow) !important;
  backdrop-filter: var(--yen-primary-glass-filter) !important;
  -webkit-backdrop-filter: var(--yen-primary-glass-filter) !important;
}

/* The inventory wrapper is the primary card. The table is structural content,
   not a second white glass card; stacking both alpha layers made Vận hành look
   substantially whiter than the public Blog cards. */
.operator-articles-page .operator-article-inventory-card .table,
.operator-articles-page .operator-article-inventory-card :is(thead, tbody, tr, th, td) {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* At mobile widths Task 1173 turns table rows into article cards. Those rows,
   rather than the full inventory wrapper, are equivalent to public Blog cards. */
@media (max-width: 640px) {
  .operator-articles-page .operator-article-inventory-card {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .operator-articles-page .operator-article-inventory-card tbody {
    display: grid;
    gap: .5rem;
  }

  .operator-articles-page .operator-article-inventory-card tr {
    background-color: var(--yen-primary-glass) !important;
    border: 1px solid var(--yen-primary-glass-line) !important;
    border-radius: 18px;
    box-shadow: var(--yen-primary-glass-shadow) !important;
    backdrop-filter: var(--yen-primary-glass-filter) !important;
    -webkit-backdrop-filter: var(--yen-primary-glass-filter) !important;
  }
}