/* =========================================================
   DSEL NOTICE BOARD  (/assets/css/notice-board.css)
   Same look as the homepage "What's New" board, but self-contained:
   it works even when the homepage stylesheet isn't loaded on this page.
   DBIM variables are used when the page defines them; the values after
   the comma are the same colours, used if it doesn't.
   ========================================================= */
#notice-board {
  --nb-key:      var(--dbim-wintergreen-dream, #162f6a);   /* footer key colour */
  --nb-key-hover:var(--dbim-powder-blue, #1f4e9a);
  --nb-tint:     var(--dbim-azureish-white-bg, #e8eef8);
  --nb-white:    var(--dbim-white, #ffffff);
  --nb-text:     var(--dbim-dark-text, #1b1b1b);
  --nb-muted:    var(--dbim-deep-earthy-brown, #3d3d3d);
  --nb-line:     var(--dbim-grey-01, #c9ced6);
  --nb-radius-sm:var(--dbim-border-radius-sm, 4px);
  --nb-radius-md:var(--dbim-border-radius-md, 8px);
  --nb-fast:     var(--dbim-transition-fast, .2s ease);
  --nb-fs:       var(--dbim-fs-p1, 16px);                   /* same text size as What's New */
  --nb-fs-sm:    var(--dbim-fs-p2, 14px);

  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: var(--dbim-section-gap, 32px) 0;
  color: var(--nb-text);
  /* same light tint as the homepage What's New band */
  background-color: color-mix(in srgb, var(--nb-tint) 40%, var(--nb-white) 60%);
}
#notice-board, #notice-board * { box-sizing: border-box; }
#notice-board > .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: clamp(12px, 2vw, 24px); }

/* ---- Heading ---- */
#notice-board .intro-heading-box { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0; border: 0; }
#notice-board .intro-heading-box img { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
#notice-board .intro-heading-box h1 {
  margin: 0; padding: 0; color: var(--nb-text);
  font-weight: 700; line-height: 1.25; text-align: left;   /* size from the base h1, as on Arts and Culture inner pages */
}
#notice-board .intro-heading-box h1::before,
#notice-board .intro-heading-box h1::after { display: none; }      /* cancel template underline on .section-title */
#notice-board .notice-board-intro { margin: 0 0 20px; color: var(--nb-muted); line-height: 1.5; }

/* ---- Search ---- */
#notice-board .notice-board-search { margin: 0 0 20px; }
#notice-board .notice-board-search .form-label { margin-bottom: 4px; color: var(--nb-text); font-weight: 600; }
#notice-board .notice-board-search .form-control,
#notice-board .notice-board-search .form-select {
  width: 100%; min-height: 44px; padding: 8px 12px;
  color: var(--nb-text); background-color: var(--nb-white);
  border: 2px solid var(--nb-line); border-radius: var(--nb-radius-sm);
  font-size: max(var(--dbim-fs-p1), 16px); line-height: 1.4;
}
#notice-board .notice-board-search .form-control:focus,
#notice-board .notice-board-search .form-select:focus {
  border-color: var(--nb-key); outline: 0;
  box-shadow: 0 0 0 3px rgba(22, 47, 106, .25);
}
#notice-board .notice-board-search .btn {
  width: 100%; min-height: 44px; padding: 8px 12px;
  color: var(--nb-key); background: var(--nb-white);
  border: 2px solid var(--nb-key); border-radius: var(--nb-radius-sm);
  font-size: var(--dbim-fs-p1); font-weight: 600; cursor: pointer;
}
#notice-board .notice-board-search .btn:hover { background: var(--nb-tint); }

/* ---- Tabs (as What's New: outlined, active = solid key colour) ---- */
#notice-board #myTab {
  display: flex; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px;
  margin: 0 0 16px; padding: 0; list-style: none; border: 0;
}
#notice-board #myTab .nav-item { display: flex; flex: 0 0 auto; margin: 0; padding: 0; }
#notice-board #myTab .nav-link {
  display: flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 18px;
  background: var(--nb-white); color: var(--nb-key);
  border: 2px solid var(--nb-key); border-radius: var(--nb-radius-sm);
  font-size: var(--nb-fs); font-weight: var(--dbim-font-weight-semibold, 600); line-height: 1.4; white-space: nowrap; cursor: pointer;
  transition: background-color var(--nb-fast), color var(--nb-fast);
}
#notice-board #myTab .nav-link:hover { background: var(--nb-tint); color: var(--nb-key); }
#notice-board #myTab .nav-link.active,
#notice-board #myTab .nav-link[aria-selected="true"] { background: var(--nb-key); color: var(--nb-white); border-color: var(--nb-key); }
#notice-board #myTab .nav-link.notice-board-none:not(.active) { border-style: dashed; }
#notice-board #myTab .nav-link:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
#notice-board #myTab .notice-board-count {
  display: inline-block; min-width: 26px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: var(--dbim-fs-p2); font-weight: 700; line-height: 1.4; text-align: center;
}
#notice-board #myTab .nav-link:not(.active) .notice-board-count { background: var(--nb-key) !important; color: var(--nb-white) !important; }
#notice-board #myTab .nav-link.active .notice-board-count      { background: var(--nb-white) !important; color: var(--nb-key) !important; }

/* ---- Results line ---- */
#notice-board .notice-board-status { margin: 0 0 12px; color: var(--nb-text); font-weight: 600; }
#notice-board .notice-board-status[hidden] { display: none; }

/* ---- Notice rows (as What's New: key colour, white text, joined rows) ---- */
#notice-board #myTabContent { padding: 0; background: transparent; border: 0; box-shadow: none; }
#notice-board #myTabContent .tab-pane[hidden] { display: none; }
#notice-board #myTabContent .tab-pane { min-width: 0; max-height: 640px; overflow-y: auto; padding-right: 6px; scrollbar-gutter: stable; }
#notice-board .notice-list {
  display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none;
  border-radius: var(--nb-radius-md); overflow: hidden;
}
#notice-board .notice-list li {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  width: 100%; min-width: 0; margin: 0; padding: 12px 16px;
  background: var(--nb-key); color: var(--nb-white);
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); border-radius: 0;
  list-style: none; transition: background-color var(--nb-fast);
}
#notice-board .notice-list li::marker { content: none; }
#notice-board .notice-list li:last-child { border-bottom: 0; }
#notice-board .notice-list li:hover,
#notice-board .notice-list li:focus-within { background: var(--nb-key-hover); }
#notice-board .notice-list li:focus-within { box-shadow: inset 0 0 0 3px var(--nb-white); }
#notice-board .notice-list li > a::after { content: ""; position: absolute; inset: 0; }   /* whole row clickable */
#notice-board .notice-list li > .notice-list-icon {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; object-fit: contain;
  filter: brightness(0) invert(1);
}
#notice-board .notice-list li > a,
#notice-board .notice-list li > a:visited {
  display: block; flex: 1 1 auto; min-width: 0;
  color: var(--nb-white); font-size: var(--nb-fs); font-weight: var(--dbim-font-weight-regular, 400); line-height: 1.5;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere;
}
#notice-board .notice-list li:hover > a { color: var(--nb-white); text-decoration: underline; text-underline-offset: .2em; }
#notice-board .notice-list li > a:focus-visible { outline: 3px solid var(--nb-white) !important; outline-offset: 2px; }
#notice-board .notice-list .file-type { color: #dfe6f3; font-size: .85em; white-space: nowrap; }   /* 9:1 on key colour */
#notice-board .notice-list mark { padding: 0 .15em; color: #1b1b1b; background: #ffe066; border-radius: 2px; }
#notice-board .notice-list .badge-new { margin-left: .35em; padding: .05em .45em; font-size: .75em; font-weight: 700; color: #fff; background: #b3261e; border-radius: 3px; }

/* "nothing here" row, with links to the sections that have matches */
#notice-board .notice-list li.notice-board-empty { display: block; }
#notice-board .notice-list li.notice-board-empty:hover { background: var(--nb-key); }
#notice-board .notice-list li.notice-board-empty .btn-link {
  padding: 0; border: 0; background: none; color: var(--nb-white);
  font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
#notice-board .notice-list li.notice-board-empty .btn-link:focus-visible { outline: 3px solid var(--nb-white); outline-offset: 2px; }

/* ---- "Show all" ---- */
#notice-board .notice-board-more-box { margin-top: 12px; }
#notice-board .notice-board-more {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px;
  color: var(--nb-key); background: var(--nb-white);
  border: 2px solid var(--nb-key); border-radius: var(--nb-radius-sm);
  font-size: var(--dbim-fs-p1); font-weight: 600; cursor: pointer;
  transition: background-color var(--nb-fast), color var(--nb-fast);
}
#notice-board .notice-board-more:hover { color: var(--nb-white); background: var(--nb-key); }
#notice-board .notice-board-more:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
#notice-board .notice-board-more[hidden] { display: none; }

/* ---- "Loading…" and error message ---- */
#notice-board .notice-board-message { margin: 0; padding: 12px 16px; color: var(--nb-text); background: var(--nb-tint); border-radius: var(--nb-radius-sm); }
#notice-board .notice-board-error { color: #5c1a14; background: #fdecea; border: 1px solid #e7a59f; }

@media (max-width: 767.98px) {
  #notice-board #myTab { gap: 6px; }
  #notice-board #myTab .nav-link { padding: 8px 12px; }
  #notice-board #myTabContent .tab-pane { max-height: 560px; padding-right: 4px; }
  #notice-board .notice-list li { gap: 8px; padding: 10px 12px; }
  #notice-board .notice-board-more { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #notice-board #myTab .nav-link, #notice-board .notice-list li, #notice-board .notice-board-more { transition: none; }
}