/* Screen-only section hierarchy. No table, dialog, navigation or print layout changes. */
@media screen {
  #appShell {
    --section-canvas: #eef3f9;
    --section-border: #bdcde0;
    --section-heading: #f0f5fc;
    --section-accent: #7698c4;
    --section-gap: 24px;
  }

  #appShell main .panel {
    background: var(--section-canvas);
    border-color: #d0dcea;
    box-shadow: none;
  }

  #appShell .panel > .section-head {
    padding-bottom: 18px;
    margin-bottom: var(--section-gap);
    border-bottom: 2px solid #cbd9e9;
  }
  #appShell .panel > .section-head h2 { margin-bottom: 0; }

  #appShell .panel :is(.card, .form-card, .mypage-card, .product-bulk-card) {
    background-color: #fff;
    border: 1px solid var(--section-border);
    box-shadow: 0 3px 12px rgb(23 50 77 / 6%);
  }
  #appShell .panel > :is(.card, .form-card, .product-bulk-card, .dashboard-grid) {
    margin-block: var(--section-gap);
  }
  #appShell .panel :is(.dashboard-grid, .target-catalog-grid, .leave-management-grid, .salary-management-grid, .mypage-grid, .compliance-layout) {
    gap: 22px;
  }

  /* Only the main heading of a work card gets the band, not every list row. */
  #appShell .panel :is(.card, .form-card, .mypage-card, .product-bulk-card) > :is(
    h3, .today-check-head, .operations-dashboard-head, .director-approval-head,
    .director-usage-head, .compliance-card-head, .employee-detail-head,
    .management-board-head, .mypage-card-head, .product-bulk-head,
    .stock-adjustment-head, .receipt-new-head, .usage-draft-head,
    .usage-summary-head, .return-history-head
  ) {
    padding: 14px 16px;
    margin: 0 0 18px;
    border: 0;
    border-left: 4px solid var(--section-accent);
    border-bottom: 1px solid #d7e2f0;
    border-radius: 9px;
    background: var(--section-heading);
  }
  #appShell .panel :is(.card, .form-card, .mypage-card, .product-bulk-card) > :is(
    .today-check-head, .operations-dashboard-head, .director-approval-head,
    .director-usage-head, .compliance-card-head, .employee-detail-head,
    .management-board-head, .mypage-card-head, .product-bulk-head,
    .stock-adjustment-head, .receipt-new-head, .usage-draft-head,
    .usage-summary-head, .return-history-head
  ) > div { min-width: 0; }

  /* Preserve the existing pending/clear meanings instead of painting them blue. */
  #appShell .panel .director-approval-card {
    --section-accent: #6fa98e;
    --section-heading: #eff8f3;
    border-color: #a9cdb9;
  }
  #appShell .panel .director-approval-card.has-pending {
    --section-accent: #cc942c;
    --section-heading: #fff6e5;
    border-color: #dfbc7d;
  }
  #appShell .panel .director-today-usage-card.has-usage { border-color: #8fb3f7; }
  #appShell .panel .receipt-new-product { border-color: #9bb7e4; background-color: #f5f8ff; }

  @media (max-width: 700px) {
    #appShell { --section-gap: 18px; }
    #appShell .panel :is(.dashboard-grid, .target-catalog-grid, .leave-management-grid, .salary-management-grid, .mypage-grid, .compliance-layout) { gap: 16px; }
    #appShell .panel :is(.card, .form-card, .mypage-card, .product-bulk-card) > :is(
      h3, .today-check-head, .operations-dashboard-head, .director-approval-head,
      .director-usage-head, .compliance-card-head, .employee-detail-head,
      .management-board-head, .mypage-card-head, .product-bulk-head,
      .stock-adjustment-head, .receipt-new-head, .usage-draft-head,
      .usage-summary-head, .return-history-head
    ) { padding: 12px; margin-bottom: 14px; }
  }
}