/* ==========================================================================
   Sector Browsing Pages
   Styles for sector_index.html, discovery_category_detail.html,
   sic_browser_index.html, sic_section/division/class_detail.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sector Index (sector_index.html)
   -------------------------------------------------------------------------- */

.sector-section {
    margin-bottom: var(--space-8);
}

.sector-section__heading {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-gov-blue);
}

.sector-section__intro {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.card-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card--featured {
    border-left: 4px solid var(--color-gov-blue);
    background: var(--color-bg-white);
}

.card-sectors {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.card-sectors__label {
    font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Discovery Category Detail (discovery_category_detail.html)
   -------------------------------------------------------------------------- */

/* Sector Hero */
.sector-hero {
    margin-bottom: var(--space-6);
}

.sector-hero__title {
    margin-bottom: var(--space-2);
}

.sector-hero__description {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
}

.sector-stats {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.sector-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sector-stats__number {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.sector-stats__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Subsector Grid */
.subsector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.subsector-card {
    padding: var(--space-3);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.subsector-card h3 {
    margin: 0;
    font-size: 1rem;
}

/* Topic Groups */
.topic-group {
    margin-bottom: var(--space-5);
}

.topic-group__heading {
    font-size: 1.125rem;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.topic-group__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.topic-group__list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-bg-light);
}

/* DBT Sector List */
.dbt-sector-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dbt-sector-list li {
    background: var(--color-bg-light);
    padding: 8px 15px;
    border-left: 3px solid var(--color-gov-blue);
}

.dbt-sector-list a {
    color: var(--color-gov-blue);
    text-decoration: underline;
}

.dbt-code {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 5px;
}

/* Sector Nav List */
.sector-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sector-nav-list a {
    display: inline-block;
    padding: 8px 15px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-gov-blue);
    font-size: 16px;
}

.sector-nav-list a:hover {
    background: var(--color-bg-light);
    text-decoration: underline;
}

.sector-nav-list a.featured {
    border-color: var(--color-gov-blue);
    background: var(--color-bg-alt);
}

/* Related Sectors */
.related-sectors {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-border);
}

.related-sectors__heading {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
}

.related-sectors__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Empty state */
.empty-state {
    background: var(--color-bg-light);
    padding: 30px;
    text-align: center;
    border-radius: var(--border-radius-sm, 4px);
}

.empty-state p {
    margin: 0 0 10px;
}

.empty-state__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   SIC Browser (sic_browser_index.html)
   -------------------------------------------------------------------------- */

.sector-browser {
    margin-top: var(--space-6);
}

.sector-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    text-align: center;
}

.sector-stats__item--highlight {
    background: var(--color-gov-blue);
    color: white;
    padding: var(--space-3);
    border-radius: var(--border-radius-sm, 4px);
}

.sector-stats__item--highlight .sector-stats__label {
    color: rgba(255, 255, 255, 0.9);
}

/* Sector Tree */
.sector-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sector-tree__group {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    overflow: hidden;
}

.sector-tree__group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-light);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
}

.sector-tree__group-header:hover {
    background: var(--color-bg-hover);
}

.sector-tree__group-name {
    flex: 1;
}

.sector-tree__group-code {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: white;
    padding: 2px 8px;
    border-radius: 3px;
}

.sector-tree__group-count {
    font-size: var(--font-size-sm);
    font-weight: normal;
    color: var(--color-text-secondary);
}

.sector-tree__group-content {
    padding: var(--space-4);
    background: white;
}

.sector-tree__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sector-tree__item {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
}

.sector-tree__subsector-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    cursor: pointer;
}

.sector-tree__subsector-header:hover {
    background: var(--color-bg-light);
}

.sector-tree__link {
    flex: 1;
    color: var(--color-gov-blue);
    text-decoration: none;
}

.sector-tree__link:hover {
    text-decoration: underline;
}

.sector-tree__code {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    padding: 2px 6px;
    border-radius: 3px;
}

.sector-tree__guides {
    font-size: var(--font-size-xs);
    color: white;
    background: var(--color-gov-blue);
    padding: 2px 8px;
    border-radius: 10px;
}

.sector-tree__sublist {
    list-style: none;
    padding: var(--space-3);
    margin: 0;
    background: var(--color-bg-light);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-2);
}

.sector-tree__subitem {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sector-tree__sublink {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.sector-tree__sublink:hover {
    color: var(--color-gov-blue);
    text-decoration: underline;
}

.sector-tree__empty {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   SIC Detail (sic_section/division/class_detail.html)
   -------------------------------------------------------------------------- */

.sector-level {
    display: inline-block;
    font-size: var(--font-size-xs);
    background: var(--color-gov-blue);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: var(--space-2);
    vertical-align: middle;
}

.sector-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.sector-code {
    font-family: monospace;
    font-size: var(--font-size-lg);
    background: var(--color-bg-light);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--color-text-secondary);
}

.sector-full-name {
    color: var(--color-text-secondary);
    font-style: italic;
}

.sector-parent {
    background: var(--color-bg-light);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sector-parent__label {
    color: var(--color-text-secondary);
}

.sector-parent__link {
    color: var(--color-gov-blue);
    font-weight: var(--font-weight-bold);
}

.sector-children {
    margin-bottom: var(--space-6);
}

.sector-children__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.sector-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.sector-card:hover {
    border-color: var(--color-gov-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sector-card__name {
    font-weight: var(--font-weight-bold);
    color: var(--color-gov-blue);
}

.sector-card__code {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.sector-guides {
    margin-top: var(--space-6);
}

.sector-guides h2 .count {
    font-weight: normal;
    color: var(--color-text-secondary);
}

.badge--topic {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 3px;
}

.card-meta {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* --------------------------------------------------------------------------
   Sector Affinity Badges & Cards (sic_detail pages)
   -------------------------------------------------------------------------- */

.sector-guides__badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.badge--direct {
    background: #00703c;
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 3px;
}

.badge--inherited {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 3px;
}

.card--direct {
    border-left: 4px solid #00703c;
}

.card--inherited {
    border-left: 4px solid var(--color-border);
}

/* ==========================================================================
   SIC-Based Sector Browser
   ========================================================================== */

/* --- Search hint --- */
.sic-search-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

.sic-search-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: monospace;
    font-size: 12px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

/* --- Stats --- */
.sic-stats {
    margin-bottom: var(--space-6);
}

.sic-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    text-align: center;
}

.sic-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sic-stats__number {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.sic-stats__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.sic-stats__item--highlight {
    background: var(--color-gov-blue);
    color: white;
    padding: var(--space-3);
    border-radius: var(--border-radius-sm, 4px);
}

.sic-stats__item--highlight .sic-stats__label {
    color: rgba(255, 255, 255, 0.9);
}

/* --- Theme groups --- */
.sic-theme {
    margin-bottom: var(--space-8);
}

.sic-theme__heading {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-gov-blue);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.sic-theme__enterprise-count {
    font-size: var(--font-size-sm);
    font-weight: normal;
    color: var(--color-text-secondary);
}

/* --- Section cards (index page) --- */
.sic-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.sic-section-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.sic-section-card:hover {
    border-color: var(--color-gov-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sic-section-card__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: monospace;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    background: var(--color-bg-light);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--color-gov-blue);
}

.sic-section-card__name {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gov-blue);
    margin: 0;
}

.sic-section-card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.sic-section-card__badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: auto;
}

.sic-section-card__badge--mapped {
    background: #d1fae5;
    color: #047857;
}

/* --- Division cards (section detail) --- */
.sic-division-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sic-division-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.sic-division-card:hover {
    border-color: var(--color-gov-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sic-division-card--mapped {
    border-left: 4px solid #047857;
}

.sic-division-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sic-division-card__code {
    font-family: monospace;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gov-blue);
    min-width: 40px;
}

.sic-division-card__name {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.sic-division-card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.sic-division-card__preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.sic-division-card__preview-item {
    font-size: var(--font-size-xs);
    background: var(--color-bg-light);
    padding: 2px 8px;
    border-radius: 3px;
    color: var(--color-text-secondary);
}

/* --- Badges --- */
.sic-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 10px;
}

.sic-badge--mapped {
    background: #d1fae5;
    color: #047857;
}

.sic-badge--unique {
    background: #fef3c7;
    color: #92400e;
}

.sic-enterprise-badge {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: normal;
    background: var(--color-bg-light);
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: var(--space-2);
    color: var(--color-text-secondary);
}

/* --- Requirements --- */
.sic-requirements {
    margin-bottom: var(--space-6);
}

.sic-requirements__intro {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.sic-requirements__group {
    margin-bottom: var(--space-5);
}

.sic-requirements__group-heading {
    font-size: 1.125rem;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm, 4px);
}

.sic-requirements__group-heading--unique {
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.sic-requirements__group-heading--inherited {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    border-left: 4px solid var(--color-border);
}

.sic-requirements__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}

/* --- Requirement cards --- */
.sic-req-card {
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sic-req-card--unique {
    border-left: 4px solid #f59e0b;
}

.sic-req-card--inherited {
    border-left: 4px solid var(--color-border);
}

.sic-req-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.sic-req-card__name {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

/* Requirement type badges (colour-coded) */
.sic-req-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sic-req-type--licensing {
    background: #dbeafe;
    color: #1e40af;
}

.sic-req-type--registration {
    background: #d1fae5;
    color: #047857;
}

.sic-req-type--permit {
    background: #fef3c7;
    color: #92400e;
}

.sic-req-type--notification {
    background: #ede9fe;
    color: #6d2066;
}

.sic-req-type--certification {
    background: #e0edfa;
    color: #1d70b8;
}

.sic-req-type--inspection {
    background: #fce7f3;
    color: #9d174d;
}

.sic-req-type--insurance {
    background: #f3f4f6;
    color: #374151;
}

.sic-req-type--reporting {
    background: #fef4ed;
    color: #c25614;
}

.sic-req-card__regulator a {
    font-size: var(--font-size-sm);
    color: var(--color-gov-blue);
    font-weight: var(--font-weight-bold);
}

.sic-req-card__legislation {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sic-req-card__leg-ref {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.sic-req-card__scope,
.sic-req-card__frequency {
    display: inline-block;
    font-size: var(--font-size-xs);
    background: var(--color-bg-light);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--color-text-secondary);
}

.sic-req-card__notes {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* --- Activity list (division detail + class siblings) --- */
.sic-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sic-activity-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.sic-activity-card:hover {
    border-color: var(--color-gov-blue);
    background: var(--color-bg-alt, #f4f8fb);
}

.sic-activity-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sic-activity-card__code {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 50px;
}

.sic-activity-card__name {
    font-weight: var(--font-weight-bold);
    color: var(--color-gov-blue);
}

.sic-activity-card__meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

.sic-activity-card__enterprises {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* --- Coverage indicator --- */
.sic-coverage {
    background: var(--color-bg-light);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.sic-coverage__count {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* --- No map state --- */
.sic-no-map {
    background: var(--color-bg-light);
    padding: var(--space-5);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--space-5);
    text-align: center;
}

.sic-no-map__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* --- CH descriptions (collapsible) --- */
.sic-ch-descriptions {
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
}

.sic-ch-descriptions summary {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    color: var(--color-gov-blue);
}

.sic-ch-descriptions summary:hover {
    background: var(--color-bg-light);
}

.sic-ch-descriptions__list {
    padding: var(--space-2) var(--space-4) var(--space-3) var(--space-6);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    columns: 2;
    column-gap: var(--space-4);
}

.sic-ch-descriptions__list li {
    padding: 2px 0;
    break-inside: avoid;
}

/* --- Guides section on class page --- */
.sic-guides {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

/* --- Siblings section --- */
.sic-siblings {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-border);
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .sic-section-grid {
        grid-template-columns: 1fr;
    }

    .sic-requirements__grid {
        grid-template-columns: 1fr;
    }

    .sic-activity-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .sic-ch-descriptions__list {
        columns: 1;
    }

    .sic-theme__heading {
        flex-direction: column;
        gap: var(--space-1);
    }
}