/* CNMI PSS Platform — DEFAULT frontend styles. Intentionally minimal + overridable.
 * Breakdance controls the real look. All values use CSS variables so themes/Breakdance
 * can override without specificity fights. Do not add branding here. */
.cnmi {
  --cnmi-text-color: inherit;
  --cnmi-link-color: #21397e;
  --cnmi-border-color: #dcdce0;
  --cnmi-radius: 6px;
  --cnmi-gap: 1rem;
  --cnmi-grid-min: 260px;
  --cnmi-table-header-bg: #f2f4f8;
  --cnmi-table-header-color: #1b1f2a;
  --cnmi-table-row-bg: #fff;
  --cnmi-table-row-alt-bg: #f7f8fa;
  --cnmi-table-border-color: var(--cnmi-border-color);
  --cnmi-table-font-size: 0.95rem;
  color: var(--cnmi-text-color);
  /* Style Builder typography (scoped to plugin output only; falls back to theme) */
  font-family: var(--cnmi-font-family, inherit);
  font-size: var(--cnmi-font-size, inherit);
  line-height: var(--cnmi-line-height, inherit);
}
.cnmi :where(h2, h3, h4) { color: var(--cnmi-heading-color, inherit); }
.cnmi a { color: var(--cnmi-link-color); }
.cnmi a:hover { color: var(--cnmi-link-hover, var(--cnmi-link-color)); }
.cnmi-empty { padding: 1.5rem; text-align: center; color: #555; }

/* Search + filter toolbar */
.cnmi-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.cnmi-toolbar__search { position: relative; flex: 1 1 240px; min-width: 0; }
.cnmi-toolbar__search input[type="search"] { width: 100%; min-height: 42px; padding: 0.5rem 0.75rem 0.5rem 2.1rem;
  background: var(--cnmi-search-bg, #fff); border: 1px solid var(--cnmi-search-border, #c6ccd8);
  border-radius: var(--cnmi-search-radius, var(--cnmi-radius)); font-size: 1rem; }
.cnmi-toolbar__icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 0.9rem; height: 0.9rem;
  border: 2px solid #7a869a; border-radius: 50%; }
.cnmi-toolbar__icon::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 6px; height: 2px; background: #7a869a; transform: rotate(45deg); }
.cnmi-toolbar__filter { min-height: 42px; border: 1px solid var(--cnmi-search-border, #c6ccd8); border-radius: var(--cnmi-search-radius, var(--cnmi-radius)); background: var(--cnmi-search-bg, #fff); padding: 0 0.6rem; }
.cnmi-toolbar__btn { min-height: 42px; padding: 0 1rem; border: 1px solid var(--cnmi-link-color); background: var(--cnmi-link-color); color: #fff; border-radius: var(--cnmi-search-radius, var(--cnmi-radius)); cursor: pointer; font-weight: 600; }
.cnmi-toolbar__btn:hover { background: var(--cnmi-link-hover, var(--cnmi-link-color)); }
.cnmi-toolbar__clear { align-self: center; font-size: 0.9rem; }
.cnmi-toolbar :where(input, select, button):focus-visible { outline: 2px solid var(--cnmi-link-color); outline-offset: 1px; }
@media (max-width: 600px) {
  .cnmi-toolbar { flex-direction: column; align-items: stretch; }
  .cnmi-toolbar__filter, .cnmi-toolbar__btn { width: 100%; }
}

/* Table */
.cnmi-table-wrap { overflow-x: auto; border: 1px solid var(--cnmi-table-border-color); border-radius: var(--cnmi-table-radius, var(--cnmi-radius)); }
.cnmi-table { width: 100%; border-collapse: collapse; font-size: var(--cnmi-table-font-size); }
.cnmi-table caption { text-align: left; }
.cnmi-table th, .cnmi-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--cnmi-table-border-color); vertical-align: top; }
.cnmi-table thead th { background: var(--cnmi-table-header-bg); color: var(--cnmi-table-header-color); font-weight: 700; }
.cnmi-table tbody tr:nth-child(even) { background: var(--cnmi-table-row-alt-bg); }
.cnmi-table [data-sortable] { cursor: pointer; }
@media (max-width: 600px) {
  .cnmi-table thead { position: absolute; left: -9999px; }
  .cnmi-table tr { display: block; border: 1px solid var(--cnmi-table-border-color); border-radius: var(--cnmi-radius); margin-bottom: 0.75rem; }
  .cnmi-table td, .cnmi-table th { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--cnmi-table-border-color); }
  .cnmi-table td::before, .cnmi-table th[scope="row"]::before { content: attr(data-label); font-weight: 700; }
}

/* Grid / cards / list */
.cnmi-items--grid, .cnmi-items--card { display: grid; gap: var(--cnmi-grid-gap, var(--cnmi-gap)); grid-template-columns: repeat(var(--cnmi-grid-cols, auto-fill), minmax(var(--cnmi-grid-min), 1fr)); }
.cnmi-items--list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cnmi-grid-gap, var(--cnmi-gap)); }
.cnmi-item { border: 1px solid var(--cnmi-card-border-color, var(--cnmi-border-color)); border-radius: var(--cnmi-card-radius, var(--cnmi-radius)); overflow: hidden; background: var(--cnmi-card-bg, var(--cnmi-table-row-bg)); box-shadow: var(--cnmi-card-shadow, none); }
.cnmi-item__media img { display: block; width: 100%; height: auto; }
.cnmi-item__body { padding: var(--cnmi-card-padding, 0.9rem) 1rem; }
.cnmi-item__title { margin: 0 0 0.4rem; font-size: 1.1rem; }
.cnmi-item__title a { color: var(--cnmi-card-title-color, inherit); }
.cnmi-item__excerpt { margin: 0 0 0.5rem; }
.cnmi-item__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9rem; }

/* Status — icon + text, never color alone */
.cnmi-status { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; }
.cnmi-status__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cnmi-status--open, .cnmi-status--active, .cnmi-status--published, .cnmi-status--awarded { color: var(--cnmi-status-positive, #1f7a43); }
.cnmi-status--closing-soon, .cnmi-status--warning, .cnmi-status--high, .cnmi-status--pending, .cnmi-status--draft { color: var(--cnmi-status-warning, #b5730a); }
.cnmi-status--closed, .cnmi-status--archived, .cnmi-status--emergency { color: var(--cnmi-status-negative, #c62828); }

/* Emergency alerts */
.cnmi-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--cnmi-border-color); border-left-width: 4px; border-radius: var(--cnmi-alert-radius, var(--cnmi-radius)); margin-bottom: 0.5rem; }
.cnmi-alert__label { font-weight: 700; }
.cnmi-alert__icon { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; background: currentColor; }
.cnmi-alert--warning { border-left-color: var(--cnmi-alert-warning, #b5730a); }
.cnmi-alert--emergency { border-left-color: var(--cnmi-alert-emergency, #c62828); }
.cnmi-alert--info { border-left-color: var(--cnmi-alert-info, #1e56b3); }
/* Alert display styles (Style Builder) */
.cnmi-alerts[data-style="card"] .cnmi-alert { border-width: 1px; border-left-width: 4px; box-shadow: var(--cnmi-card-shadow, 0 1px 3px rgba(0,0,0,.08)); }
.cnmi-alerts[data-style="full"] .cnmi-alert { border-radius: 0; }
.cnmi-alerts[data-style="inline"] .cnmi-alert { display: inline-flex; margin-right: 0.5rem; }
.cnmi-alert__close { margin-left: auto; background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; }

/* Pagination + search */
.cnmi-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 1rem 0 0; }
.cnmi-pagination a, .cnmi-pagination span { display: inline-block; padding: 0.4rem 0.7rem; border: 1px solid var(--cnmi-border-color); border-radius: var(--cnmi-radius); text-decoration: none; }
.cnmi-search__form input[type="search"] { background: var(--cnmi-search-bg, #fff); border: 1px solid var(--cnmi-search-border, #c6ccd8); border-radius: var(--cnmi-search-radius, var(--cnmi-radius)); padding: 0.5rem 0.75rem; min-height: 40px; }
.cnmi-search__form input[type="search"]:focus-visible { outline: 2px solid var(--cnmi-link-color); outline-offset: 1px; }
.cnmi-search__results { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.cnmi-search__item { border-bottom: 1px solid var(--cnmi-border-color); padding-bottom: 1rem; }
.cnmi-badge { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Screen-reader-only (fallback if theme lacks it) */
.cnmi .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cnmi :where(a, button, input):focus-visible { outline: 2px solid var(--cnmi-link-color); outline-offset: 2px; }