:root {
  --text: #202124;
  --muted: #6c757d;
  --page-bg: #ffffff;
  --icasa-green: #629080;
  --icasa-green-dark: #4f766a;
  --icasa-yellow: #FDB945;
  --icasa-charcoal: #333333;
  --header: #f5f5f5;
  --faint-line: #fafafa;
  --black-line: #000000;
  --button-green: #629080;
  --button-grey: #6c757d;

  /*
    Shared column widths for the fixed heading bar and the table body.
    Adjust these four values only if the client wants different column proportions.
  */
  --col1-width: 18.5%;
  --col2-width: 22.5%;
  --col3-width: 21.5%;
  --col4-width: 37.5%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--page-bg);
}

.sticky-top-area {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/*
  Compact ICASA-themed NRFP banner.
  The normal ICASA website navigation is intentionally not reproduced here,
  because this is a single-purpose regulatory viewer.

  Layout:
  - ICASA logo in a light grey block on the left.
  - No vertical orange separator.
  - Green title area on the upper right.
  - Blue gazette-link bar on the lower right.
  - Orange horizontal rule runs under the full banner from the left edge.
*/
.nrfp-title-strip {
  display: grid;
  grid-template-columns: 305px 1fr;
  grid-template-rows: 82px 32px;
  min-height: 114px;
  color: #ffffff;
  background: #ffffff;
  border-bottom: 3px solid var(--icasa-yellow);
}

.title-logo-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: #f7f7f7;
  padding: 0.45rem 0.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e0e0e0;
}

.icasa-logo {
  width: 290px;
  max-width: 100%;
  max-height: 106px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  image-rendering: auto;
}

.title-accent {
  display: none;
}

.site-title-block {
  grid-column: 2;
  grid-row: 1;
  background:
    linear-gradient(90deg, rgba(98, 144, 128, 0.99), rgba(79, 118, 106, 0.99)),
    #629080;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
}

.site-title-block h1 {
  margin: 0;
  font-size: 1.55rem;
  color: #ffffff;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.gazette-bar {
  grid-column: 2;
  grid-row: 2;
  background: #5CA1AE;
  color: #ffffff;
  padding: 0.45rem 1.25rem;
  font-size: 0.92rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.gazette-note {
  margin: 0;
}

.gazette-note a {
  color: #ffffff;
  text-decoration: underline;
  }

a {
  color: #004b9b;
}

main {
  padding: 0 1.25rem 1rem;
}

/* Sticky filter block */
.controls {
  display: grid;
  grid-template-columns:
    minmax(240px, 2fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(110px, 0.6fr)
    minmax(220px, 1.2fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 1.25rem 0.95rem;
  align-items: start;
  background: #f7f7f7;
  border-bottom: 1px solid #d8d8d8;
}


.search-mode-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.35rem 0 0.15rem;
  border-bottom: 1px solid #e1e1e1;
}

.search-mode-title {
  font-weight: 700;
  color: #222222;
}

.search-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.search-mode-options label {
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.search-mode-status {
  color: var(--muted);
  font-size: 0.86rem;
  margin-left: auto;
}

.controls input:disabled,
.controls button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.controls label {
  display: block;
  font-size: 0.84rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: #1f1f1f;
}

.controls > div {
  min-width: 0;
}

.control-spacer-label {
  display: block;
  height: 1.05rem;
  margin-bottom: 0.25rem;
  visibility: hidden;
}

.controls input,
.controls select,
.controls button {
  width: 100%;
  padding: 0.45rem;
  box-sizing: border-box;
  border: 1px solid #8f8f8f;
  border-radius: 2px;
  background: #ffffff;
}

.controls input:focus,
.controls select:focus {
  outline: 2px solid rgba(253, 185, 69, 0.65);
  border-color: var(--icasa-green);
}

.keyword-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
}

.keyword-row button {
  width: auto;
  white-space: nowrap;
}

button {
  cursor: pointer;
  font-weight: 600;
}

button.primary,
#applyFilters,
#printSaveFiltered,
#openAllocationFilter {
  background: var(--icasa-green);
  color: #ffffff;
  border: 1px solid var(--icasa-green-dark);
}

button.primary:hover,
#applyFilters:hover,
#printSaveFiltered:hover,
#openAllocationFilter:hover {
  background: var(--icasa-green-dark);
}

button.secondary,
#clearFilters,
#openSearchOptions {
  background: #4a4a4a;
  color: #ffffff;
  border: 1px solid #333333;
}

button.secondary:hover,
#clearFilters:hover,
#openSearchOptions:hover {
  background: #333333;
}

.summary {
  margin: 0.75rem 0;
  color: var(--muted);
}

.sticky-top-area > .summary {
  margin: 0;
  padding: 0.55rem 1.25rem 0.6rem;
  background: #ffffff;
  border-bottom: 1px solid #d8d8d8;
}

.print-only {
  display: none;
}

.print-metadata {
  margin: 0.5rem 0 0.75rem 0;
  padding: 0.55rem 0;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  color: #333333;
  font-size: 0.9rem;
}

.print-metadata p {
  margin: 0.2rem 0;
}

.print-help {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.25;
}

/*
  Keep Apply, Clear and Print/PDF controls on one aligned action row.
*/
.filter-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(240px, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.1rem;
}

.filter-actions button {
  min-height: 34px;
}

.filter-action {
  min-width: 0;
}

.allocation-filter-status,
.search-options-status {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.table-scroll-top {
  /*
    Hidden to remove the visual gap between the separate sticky table header
    and the first row of the allocation table. Horizontal scrolling remains
    available through the table itself and the floating bottom scrollbar.
  */
  display: none;
}

.table-scroll-spacer {
  height: 1px;
  min-width: 1100px;
}

/*
  Floating horizontal scrollbar.
  This remains available even when the user is far down the long allocation table,
  where the normal table scrollbar is not visible.
*/
.floating-table-scroll {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #f7f7f7;
  border-top: 1px solid #999999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
  z-index: 1600;
  display: none;
  -webkit-overflow-scrolling: touch;
}

.floating-table-scroll.visible {
  display: block;
}

.floating-table-scroll-spacer {
  height: 1px;
  min-width: 1100px;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--black-line);
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/*
  Keep horizontal scrolling usable in browsers that hide thin scrollbars.
*/
.table-scroll-top::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.floating-table-scroll::-webkit-scrollbar {
  height: 16px;
}

.table-scroll-top::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.floating-table-scroll::-webkit-scrollbar-thumb {
  background: #777777;
  border-radius: 8px;
}

.table-scroll-top::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.floating-table-scroll::-webkit-scrollbar-track {
  background: #efefef;
}

table.nrfp {
  border-collapse: collapse;
  width: 100%;
  min-width: 1100px;
  table-layout: fixed;
  border: 1px solid var(--black-line);
}

table.nrfp col.col-itu {
  width: var(--col1-width);
}

table.nrfp col.col-rsa {
  width: var(--col2-width);
}

table.nrfp col.col-applications {
  width: var(--col3-width);
}

table.nrfp col.col-notes {
  width: var(--col4-width);
}

table.nrfp th {
  border: 1px solid var(--black-line);
  padding: 0.55rem;
  vertical-align: top;
  background: var(--header);
  text-align: center;
}

/*
  Separate sticky column-heading bar.
  This is more reliable than sticky <th> inside a very large table.
*/
.sticky-table-header-wrap {
  margin: 0.5rem 1.25rem 0;
  width: calc(100% - 2.5rem);
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.sticky-table-header {
  display: grid;
  grid-template-columns: var(--col1-width) var(--col2-width) var(--col3-width) var(--col4-width);
  width: 100%;
  min-width: 1100px;
  box-sizing: border-box;
  border: 2px solid var(--black-line);
  border-bottom: 1px solid var(--black-line);
  background: var(--header);
}

.sticky-table-header div {
  padding: 0.55rem;
  border-right: 1px solid var(--black-line);
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}

.sticky-table-header div:last-child {
  border-right: none;
}

.sticky-table-header::before {
  content: "";
  grid-column: 1 / -1;
  height: 3px;
  background: var(--icasa-yellow);
  margin: -2px -2px 0 -2px;
}

/*
  Hide the original table header. The visible, fixed header above replaces it.
  The original header text remains in the generated HTML source for structure,
  but is not displayed, to avoid a duplicate or broken sticky table header row.
*/
table.nrfp thead {
  display: none;
}

table.nrfp td {
  border-left: 1px solid var(--black-line);
  border-right: 1px solid var(--black-line);
  border-top: 1px solid var(--faint-line);
  border-bottom: 1px solid var(--faint-line);
  padding: 0.55rem;
  vertical-align: top;
}

table.nrfp tr.band-start td {
  border-top: 2px solid var(--black-line) !important;
}

table.nrfp tr.band-end td {
  border-bottom: 2px solid var(--black-line) !important;
}

table.nrfp tbody tr:last-child td {
  border-bottom: 2px solid var(--black-line) !important;
}

table.nrfp p {
  margin: 0 0 0.45rem 0;
}

/* Mobile stacked card view. Hidden on desktop/tablet table view. */
.mobile-band-list {
  display: none;
}

.mobile-band-card {
  border: 1px solid var(--black-line);
  border-top: 4px solid var(--icasa-green);
  margin: 0 0 1rem 0;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.mobile-band-title {
  margin: 0;
  padding: 0.7rem;
  background: #f7f7f7;
  border-bottom: 1px solid #d9d9d9;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
}

.mobile-band-section {
  padding: 0.7rem;
  border-bottom: 1px solid #eeeeee;
}

.mobile-band-section:last-child {
  border-bottom: none;
}

.mobile-band-section h3 {
  margin: 0 0 0.45rem 0;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--icasa-green);
}

.mobile-band-section-content {
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mobile-band-section-content p {
  margin: 0 0 0.45rem 0;
}

.mobile-no-results {
  border: 1px solid #dddddd;
  background: #ffffff;
  padding: 1rem;
  color: var(--muted);
}

/* Footnote popup */
.footnote-panel {
  position: fixed;
  right: 1rem;
  top: 6rem;
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 8rem);
  overflow: auto;
  background: #ffffff;
  border: 1px solid #999999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 1rem;
  display: none;
  z-index: 1200;
}

.footnote-panel.visible {
  display: block;
}

.footnote-panel h2 {
  margin-top: 0;
  border-left: 5px solid var(--icasa-yellow);
  padding-left: 0.5rem;
}

.footnote-panel button {
  float: right;
  width: auto;
}

/* Modal windows */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 1000;
}

.modal-backdrop.visible {
  display: block;
}

.allocation-modal,
.search-options-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow: auto;
  background: #ffffff;
  border: 1px solid #999999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: none;
  z-index: 1100;
}

.allocation-modal.visible,
.search-options-modal.visible {
  display: block;
}

.allocation-modal-header,
.search-options-modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--icasa-green);
  color: #ffffff;
}

.allocation-modal-header h2,
.search-options-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close-x {
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  width: auto;
  color: #ffffff;
}

.allocation-modal-body,
.search-options-modal-body {
  padding: 1rem 1.25rem;
}

.allocation-modal-actions,
.search-options-modal-actions {
  padding: 1rem 1.25rem;
  border-top: 1px solid #dddddd;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.allocation-tools,
.search-options-tools {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.allocation-tools button,
.search-options-tools button {
  width: auto;
  padding: 0.45rem 0.75rem;
}

.allocation-note {
  margin: 0 0 0.85rem 0;
  padding: 0.55rem 0.7rem;
  background: #f7f7f7;
  border-left: 4px solid var(--icasa-yellow);
  color: #333333;
  font-size: 0.9rem;
  line-height: 1.35;
}

.allocation-status-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #222222;
}

.allocation-list {
  columns: 2;
  column-gap: 2rem;
}

.allocation-list label,
.allocation-type-list label,
.search-scope-list label {
  display: block;
  break-inside: avoid;
  margin: 0.35rem 0;
}

.allocation-type-list {
  margin-top: 1rem;
  border-top: 1px solid #dddddd;
  padding-top: 0.75rem;
}

.search-scope-list {
  margin-top: 0.75rem;
}

.embedded-table {
  border-collapse: collapse;
  width: 100%;
}

.embedded-table td {
  border: 1px solid #dddddd;
  padding: 0.4rem;
}

.error-message {
  color: #b00020;
  font-weight: bold;
  margin: 1rem 0;
}


/*
  Responsive layout rules.
  On smaller or short screens, the large search area becomes part of normal
  page flow instead of staying sticky and consuming most of the viewport.
*/
@media (max-width: 1100px) {
  .controls {
    grid-template-columns: 1fr 1fr;
  }

  .filter-actions {
    grid-template-columns: 1fr 1fr;
  }

  .search-mode-control {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  .search-mode-status {
    margin-left: 0;
  }

  .allocation-list {
    columns: 1;
  }
}

@media (max-width: 760px), (max-height: 650px) {
  .sticky-top-area {
    position: static;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .nrfp-title-strip {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .title-logo-panel {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    min-height: 86px;
  }

  .title-accent {
    display: none;
  }

  .site-title-block {
    grid-column: 1;
    grid-row: 2;
    min-height: 70px;
  }

  .gazette-bar {
    grid-column: 1;
    grid-row: 3;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    grid-template-columns: 1fr;
  }

  .controls input,
  .controls select,
  .controls button {
    min-height: 38px;
  }

  main {
    padding: 0 0.6rem 0.75rem;
  }

  .sticky-table-header-wrap {
    display: none;
  }

  table.nrfp thead {
    display: table-header-group;
  }

  table.nrfp th {
    font-size: 0.9rem;
    line-height: 1.15;
  }

  table.nrfp {
    min-width: 980px;
  }

  .table-scroll-spacer,
  .floating-table-scroll-spacer {
    min-width: 980px;
  }
}

@media (max-width: 749px) {
  /*
    Below 750 px the four-column regulatory table is replaced by stacked
    band cards. This avoids an unusable minimum-width table on phones,
    split-screen windows and high-zoom accessibility scenarios.
  */
  .sticky-table-header-wrap,
  .table-scroll-top,
  .table-wrap,
  .floating-table-scroll {
    display: none !important;
  }

  .mobile-band-list {
    display: block;
  }

  .sticky-top-area > .summary {
    padding: 0.55rem 0.6rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .site-title-block h1 {
    font-size: 1.22rem;
  }

  .gazette-bar {
    font-size: 0.82rem;
  }

  .icasa-logo {
    width: 250px;
  }

  table.nrfp {
    min-width: 900px;
  }

  .table-scroll-spacer,
  .floating-table-scroll-spacer {
    min-width: 900px;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body {
    font-size: 9pt;
    padding-bottom: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sticky-top-area {
    position: static !important;
    box-shadow: none !important;
  }

  .controls,
  .footnote-panel,
  .modal-backdrop,
  .allocation-modal,
  .search-options-modal,
  .mobile-band-list,
  .table-scroll-top,
  .sticky-table-header-wrap,
  .floating-table-scroll {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .nrfp-title-strip {
    display: block;
    border-bottom: 2px solid #000000;
  }

  .title-logo-panel {
    display: none !important;
  }

  .title-accent {
    display: none !important;
  }

  .site-title-block {
    display: block;
    min-height: 0;
    padding: 0 0 4mm 0;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .site-title-block h1 {
    color: #000000 !important;
    font-size: 15pt;
    margin: 0;
  }

  .gazette-bar {
    display: block;
    padding: 0 0 4mm 0;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 9pt;
  }

  header,
  main {
    padding: 0 !important;
    margin: 0 !important;
  }

  .summary {
    color: #000000 !important;
    font-size: 9pt;
    margin: 4mm 0 2mm 0;
  }

  .print-metadata {
    color: #000000 !important;
    font-size: 8.5pt;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 2mm 0;
    margin: 0 0 4mm 0;
  }

  .table-wrap {
    display: block !important;
    overflow: visible !important;
    border: none !important;
    max-width: none !important;
  }

  table.nrfp {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 7.2pt;
    line-height: 1.18;
  }

  table.nrfp thead {
    display: table-header-group !important;
  }

  table.nrfp th,
  table.nrfp td {
    padding: 2.5pt !important;
    vertical-align: top !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  table.nrfp th {
    border: 0.6pt solid #000000 !important;
    font-weight: 700;
    text-align: center;
  }

  /*
    In the screen view, each frequency band is separated by strong black
    band boundaries, while the internal row separators inside a band are
    visually white/invisible. Do not force all internal row borders to black
    in print/PDF export.
  */
  table.nrfp tbody td {
    border-left: 0.6pt solid #000000 !important;
    border-right: 0.6pt solid #000000 !important;
    border-top: 0.6pt solid #ffffff !important;
    border-bottom: 0.6pt solid #ffffff !important;
  }

  table.nrfp tr.band-start td {
    border-top: 1.2pt solid #000000 !important;
  }

  table.nrfp tr.band-end td,
  table.nrfp tbody tr:last-child td {
    border-bottom: 1.2pt solid #000000 !important;
  }

  table.nrfp p {
    margin: 0 0 2pt 0;
  }

  a {
    color: #000000 !important;
    text-decoration: none !important;
  }
}