/* Originally generated by GitHub Copilot.
   Reworked in feature-209 impl-iteration-2-01 (Figma source baseline driven modification):
   - Tab-style procedure filter (4 tabs + vertical dividers + active state)
   - Single parent card with row dividers for the list
   - Blue underlined title links (--link-color = var(--sjmn-color-oshirase-blue-dark))
   - Inline severity badge to the right of the date on the detail page
   - Single rounded card around the detail body
*/

:root {
  --oshirase-link-color: var(--sjmn-color-oshirase-blue-dark);
  --oshirase-link-color-hover: var(--sjmn-color-oshirase-blue-deep);
  --oshirase-divider-color: var(--sjmn-color-oshirase-border);
  --oshirase-card-border-color: var(--sjmn-color-oshirase-border-md);
  --oshirase-card-shadow: 0 12px 28px
    rgb(from var(--sjmn-color-text-color-base) r g b / 8%);
  --oshirase-card-radius: 1rem;
  --oshirase-tab-bg-active: var(--sjmn-color-site-main-color-main-color-bg-l);
  --oshirase-tab-border-active: var(--sjmn-color-oshirase-blue-dark);
  --oshirase-tab-divider: var(--sjmn-color-oshirase-border-light);
  --oshirase-text-color: var(--sjmn-color-text-color-base);
  --oshirase-text-muted: var(--sjmn-color-text-color-secondary);
  --oshirase-severity-important-color: var(--sjmn-color-oshirase-error);
  --oshirase-severity-emergency-color: var(--sjmn-color-oshirase-error);
  /* Project-system design token (matches Figma `--border-color-black`). */
  --border-color-black: var(--sjmn-color-text-color-base);
}

body.oshirase-page {
  color: var(--oshirase-text-color);
  background-color: var(--sjmn-color-background-application-screen);
}

body.oshirase-page main {
  padding: 0.875rem 1.5rem 4.5rem;
}

.oshirase-list,
.oshirase-detail {
  width: min(100%, 75rem);
  margin: 0 auto;
}

.oshirase-list__header {
  margin-bottom: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.oshirase-list__header h1,
.oshirase-detail__title {
  margin: 0;
  color: var(--oshirase-text-color);
  font-size: var(--sjmn-size-32);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.oshirase-list__header p {
  margin: 0.9rem 0 0;
  color: var(--oshirase-text-muted);
  font-size: var(--sjmn-size-16);
  line-height: 1.8;
}

/* ------------------------------------------------------------------
 * Breadcrumb (shared by list and detail)
 * ------------------------------------------------------------------ */

.oshirase-list__breadcrumb,
.oshirase-detail__breadcrumb {
  width: min(100%, 75rem);
  margin: 0 auto 1.25rem;
}

@media (width >= 768px) {
  .oshirase-list__breadcrumb {
    margin-bottom: 2.3rem;
  }
}

.oshirase-list__breadcrumb ol,
.oshirase-detail__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--oshirase-text-muted);
  font-size: var(--sjmn-size-14);
  line-height: 1.6;
}

.oshirase-list__breadcrumb li,
.oshirase-detail__breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.oshirase-list__breadcrumb li + li::before,
.oshirase-detail__breadcrumb li + li::before {
  content: ">";
  margin-right: 0.65rem;
  color: var(--sjmn-color-oshirase-text-muted);
}

.oshirase-list__breadcrumb a,
.oshirase-detail__breadcrumb a {
  color: var(--oshirase-link-color);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.oshirase-list__breadcrumb a:hover,
.oshirase-detail__breadcrumb a:hover {
  color: var(--oshirase-link-color-hover);
}

.oshirase-detail__breadcrumb {
  margin: 0 0 0.875rem;
}

@media (width >= 768px) {
  .oshirase-detail__breadcrumb {
    margin-bottom: 2.4375rem;
  }
}

/* ------------------------------------------------------------------
 * Procedure-list tab filter
 * ------------------------------------------------------------------ */

.oshirase-list__tablist {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 1.25rem 0 0;
  padding: 0;
  background: transparent;
}

.oshirase-list__tab {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2rem;
  padding: 0.25rem 1rem;
  border-width: 0 1px;
  border-style: solid;
  border-color: var(--border-color-black);
  background: var(--sjmn-color-base-white);
  color: var(--oshirase-text-color);
  font-size: var(--sjmn-size-16);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Per user spec: each tab carries `border-width: 0 1px 0 1px`. The
   double 2px stroke between adjacent tabs is intentional (clearer tab
   separation). The previous `+` sibling collapse rule is intentionally
   absent. */

/* prettier-ignore */
.oshirase-list__tab:hover {
  color: var(--oshirase-link-color);
  background: rgb(from var(--sjmn-color-site-main-color-main-color-bg-l) r g b / 50%);
}

.oshirase-list__tab--active,
.oshirase-list__tab[aria-current="page"] {
  background: var(--oshirase-tab-bg-active);
  color: var(--oshirase-text-color);
  font-weight: 700;
}

/* prettier-ignore */
.oshirase-list__tab--active[data-filter-value]:not([data-filter-value="all"]),
.oshirase-list__tab[aria-current="page"][data-filter-value]:not([data-filter-value="all"]) {
  background-color: var(--waku-color-bg-light);
  color: var(--waku-color);
}

.oshirase-list__tab:focus-visible {
  outline: 3px solid var(--sjmn-color-oshirase-blue);
  outline-offset: -3px;
}

/* ------------------------------------------------------------------
 * Single parent list card with row dividers
 * ------------------------------------------------------------------ */

.oshirase-list-card {
  margin: 1.125rem 0 0;
  padding: 0.25rem 1.75rem;
  border: 1px solid var(--oshirase-card-border-color);
  border-radius: var(--oshirase-card-radius);
  background: var(--sjmn-color-base-white);
  box-shadow: none;
}

.oshirase-list-card--empty {
  padding: 2rem 1.5rem;
  text-align: center;
}

.oshirase-list-card .oshirase-list__items {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oshirase-list-item {
  display: grid;
  grid-template-columns: minmax(6rem, 7rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 0.625rem;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--oshirase-divider-color);
  background: transparent;
}

.oshirase-list-item:first-child {
  border-top: 0;
}

.oshirase-list-item__date {
  display: block;
  color: var(--oshirase-text-color);
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Title cell: severity icon (inline-flex), title link (inline), optional 新着 badge (inline-flex)
   all flow as inline elements so the badge attaches to the end of the last text line when wrapping. */
.oshirase-list-item__title-cell {
  display: block;
  min-width: 0;
}

.oshirase-list-item__title-link,
a.oshirase-list-item__title-link {
  min-width: 0;
  color: var(--sjmn-color-text-color-base);
  font-size: var(--sjmn-size-16);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.06em;
  word-break: break-word;
}

.oshirase-list-item__title-link:hover,
a.oshirase-list-item__title-link:hover {
  color: var(--sjmn-color-text-color-base);
  text-decoration: none;
  text-decoration-thickness: 0.1em;
}

/* Severity icon — inline so it flows with the title text. */
.oshirase-list-item__severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
}

.oshirase-list-item__severity img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* When the row has no severity icon, collapse the slot entirely so the
   title aligns to the same left-edge as a severity icon on a sibling row. */
.oshirase-list-item__severity.oshirase-list__severity--none {
  display: none;
}

.oshirase-list-item__new,
.oshirase-list__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 48px;
  height: 28px;
  margin-left: 0.35rem;
  padding: 6px 8px;
  border: 1px solid var(--sjmn-color-functional-color-sky-blue-1);
  border-radius: 6px;
  background-color: var(--sjmn-color-functional-color-sky-blue-1);
  color: var(--sjmn-color-basic-background-color-black);
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.oshirase-list__empty {
  margin: 0;
  color: var(--oshirase-text-muted);
  font-size: var(--sjmn-size-16);
  line-height: 1.8;
}

/* ------------------------------------------------------------------
 * Detail page — single rounded card + inline severity badge
 * ------------------------------------------------------------------ */

.oshirase-detail-card {
  padding: clamp(1.5rem, 2vw, 2.25rem);
  border: 1px solid var(--oshirase-card-border-color);
  border-radius: var(--oshirase-card-radius);
  background: var(--sjmn-color-base-white);
  box-shadow: none;
}

.oshirase-detail__header {
  margin: 0;
  padding: 0;
}

.oshirase-detail__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.9rem;
}

.oshirase-detail__date {
  display: inline-block;
  margin: 0;
  color: var(--oshirase-text-color);
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.oshirase-detail__severity {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  line-height: 1.5;
}

.oshirase-detail__severity-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.oshirase-detail__severity--important .oshirase-detail__severity-label,
.oshirase-detail__severity--emergency .oshirase-detail__severity-label {
  color: var(--oshirase-severity-important-color);
}

.oshirase-detail__status--important,
.oshirase-detail__status--emergency {
  color: var(--oshirase-severity-important-color);
}

.oshirase-detail__title {
  margin: 0;
}

.oshirase-detail__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  padding: 6px 8px;
  border: 1px solid var(--sjmn-color-functional-color-sky-blue-1);
  border-radius: 6px;
  background-color: var(--sjmn-color-functional-color-sky-blue-1);
  color: var(--sjmn-color-basic-background-color-black);
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.oshirase-detail__body {
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--oshirase-text-color);
  font-family: inherit;
  font-size: var(--sjmn-size-16);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.oshirase-detail__backlink {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.oshirase-detail__backlink a {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--oshirase-link-color);
  background: transparent;
  font-size: var(--sjmn-size-16);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

.oshirase-detail__backlink a:hover {
  color: var(--oshirase-link-color-hover);
}

/* Inline arrow with zero gap so underline stays continuous from
   the arrow through the label text. */
.oshirase-detail__backlink-arrow {
  display: inline;
  margin-right: 0;
  padding-right: 0;
  font-size: 1.05em;
  line-height: 1;
}

/* ------------------------------------------------------------------
 * Shared focus / utility
 * ------------------------------------------------------------------ */

.oshirase-list-item__title-link:focus-visible,
.oshirase-list__link:focus-visible,
.oshirase-detail__backlink a:focus-visible {
  outline: 3px solid var(--sjmn-color-oshirase-blue);
  outline-offset: 2px;
}

/* Visually-hidden helper (preserved for accessibility-only severity labels). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* System-list page: push card 2px lower to match Figma system-notice/list baseline.
 * Procedure-list cards use the default margin (tab bar provides the equivalent spacing there). */
.oshirase-page--system .oshirase-list-card {
  margin-top: 1.375rem;
}

/* ------------------------------------------------------------------
 * Mobile (SP) tuning
 * ------------------------------------------------------------------ */

@media (width <= 767.98px) {
  body.oshirase-page {
    will-change: transform;
  }

  body.oshirase-page main {
    padding: 1.5rem 1rem 3rem;
  }

  /* SP: per-severity min-heights so each state's footer aligns to its
   * Figma baseline position.  SP header = ~120px; targets derived from
   * pixel-sampling each baseline (urgent y=660, important y=800,
   * normal y=925). */
  body.oshirase-page--emergency main {
    min-height: 545px;
  }

  body.oshirase-page--important main {
    min-height: 689px;
  }

  body.oshirase-page--detail:not(
      .oshirase-page--important,
      .oshirase-page--emergency
    )
    main {
    min-height: 811px;
  }

  /* SP: 2×2 grid layout — タブ独立枠 + 8px gap.
     Row 1: すべて | 革新的新製品・サービス枠
     Row 2: 新事業進出枠 | グローバル枠
     Filter order is fixed by the LINQ reorder in Procedure.cshtml. */
  .oshirase-list__tablist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: visible;
    flex-wrap: initial;
    background: transparent;
  }

  .oshirase-list__tab {
    flex: initial;
    min-height: 2.5rem;
    padding: 0.55rem 0.5rem;
    border: 1px solid var(--border-color-black);
    font-size: var(--sjmn-size-14);
    line-height: 1.3;
    white-space: normal;
  }

  /* The desktop adjacency rule does not apply in the SP grid — every
     tab is an independent boxed button. */
  .oshirase-list__tab + .oshirase-list__tab {
    border-left-width: 1px;
  }

  .oshirase-list-card {
    padding: 0.1rem 1rem;
  }

  /* SP: stack 日付 → title-cell vertically so narrow widths fit. */
  .oshirase-list-item {
    display: block;
    padding: 0.85rem 0.1rem;
  }

  .oshirase-list-item__date {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--sjmn-size-16);
  }

  /* In SP the title-cell uses inline flow rather than flex so the
     severity icon, title text, and 新着 badge stay on the same logical
     line and the title naturally wraps to multiple lines if needed. */
  .oshirase-list-item__title-cell {
    display: block;
    gap: 0;
  }

  .oshirase-list-item__severity {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.35rem;
  }

  .oshirase-list-item__title-link,
  a.oshirase-list-item__title-link {
    display: inline;
  }

  .oshirase-list-item__new,
  .oshirase-list__new {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.35rem;
  }

  .oshirase-detail__meta-row {
    gap: 0.3rem 0.85rem;
  }

  .oshirase-detail__title {
    font-size: var(--sjmn-size-32);
    line-height: 1.5;
  }
}