/* ============================================================
   Insight Platform — Editorial Entity Form Styles
   Applied via insight_theme/entity_forms library.
   ============================================================ */

/* ── Page header ───────────────────────────────────────────── */
.insight-form-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 0 !important;
    margin-bottom: 2rem;
}

/* ── Two-column grid ───────────────────────────────────────── */
.insight-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
}

.insight-form-main {
    grid-column: span 8 / span 8;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.insight-form-sidebar {
    grid-column: span 4 / span 4;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Section cards ─────────────────────────────────────────── */
.insight-form-section {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.insight-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.insight-section-icon {
    width: 2rem;
    height: 2rem;
    background: #eceef0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-section-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Full-width fields — span both grid columns */
.insight-section-fields .field--type-text-long,
.insight-section-fields .field--name-notes,
.insight-section-fields .field--name-address-street,
.insight-section-fields .field--name-description,
.insight-section-fields > .form-item:only-child,
/* Drupal entity-form classes */
.insight-section-fields .form-item--type-textarea,
.insight-section-fields .form-item--name-notes,
.insight-section-fields .form-item--name-address-street,
.insight-section-fields .form-item--name-description,
.insight-section-fields .form-item--name-delivery-instructions,
.insight-section-fields .form-item--name-print-schedule,
.insight-section-fields .form-item--name-competitor-titles,
.insight-section-fields .form-item--name-international-prices {
    grid-column: span 2 / span 2;
}

/* ── Form labels ───────────────────────────────────────────── */
/* Exclude checkbox/radio wrappers — they get their own rule below */
.insight-form-section .form-item:not(.form-type--checkbox):not(.form-type-checkbox):not(.form-type--radio):not(.form-type-radio) label,
.insight-form-section .form-item:not(.form-type--checkbox):not(.form-type-checkbox):not(.form-type--radio):not(.form-type-radio) .label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #45464d;
    opacity: 0.8;
    margin-bottom: 0.4rem;
}

/* ── Checkbox / radio inline layout ───────────────────────── */
.insight-form-section .form-item.form-type--checkbox,
.insight-form-section .form-item.form-type-checkbox,
.insight-form-section .form-item.form-type--radio,
.insight-form-section .form-item.form-type-radio {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.insight-form-section .form-item.form-type--checkbox label,
.insight-form-section .form-item.form-type-checkbox label,
.insight-form-section .form-item.form-type--radio label,
.insight-form-section .form-item.form-type-radio label {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: #2a3439;
    opacity: 1;
    margin-bottom: 0;
    cursor: pointer;
}

.insight-form-section .form-item.form-type--checkbox input[type="checkbox"],
.insight-form-section .form-item.form-type-checkbox input[type="checkbox"],
.insight-form-section .form-item.form-type--radio input[type="radio"],
.insight-form-section .form-item.form-type-radio input[type="radio"] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: #0058be;
    cursor: pointer;
    margin: 0;
}

/* ── Text inputs ───────────────────────────────────────────── */
.insight-form-section input[type="text"],
.insight-form-section input[type="email"],
.insight-form-section input[type="tel"],
.insight-form-section input[type="number"],
.insight-form-section input[type="url"],
.insight-form-section input[type="password"],
.insight-form-section input[type="date"],
.insight-form-section select,
.insight-form-section textarea {
    width: 100%;
    border: none;
    background-color: #f2f4f6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #191c1e;
    transition: background 0.15s, box-shadow 0.15s;
    outline: none;
    font-family: 'Inter', sans-serif;
    -webkit-appearance: none;
    appearance: none;
}

.insight-form-section input:focus,
.insight-form-section select:focus,
.insight-form-section textarea:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 88, 190, 0.12);
}

.insight-form-section textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Remove Drupal's default border on inputs */
.insight-form-section .form-text,
.insight-form-section .form-email,
.insight-form-section .form-tel,
.insight-form-section .form-select {
    border: none;
}

/* Field descriptions */
.insight-form-section .form-item__description,
.insight-form-section .description {
    font-size: 0.7rem;
    color: #76777d;
    margin-top: 0.25rem;
}

/* ── Status sidebar card ───────────────────────────────────── */
.insight-status-card {
    background: #131b2e;
    border-radius: 0.75rem;
    padding: 2rem;
    color: #7c839b;
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.08);
}

.insight-status-card label,
.insight-status-card .form-item label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Checkbox — "Published/Active" toggle in sidebar */
.insight-status-card .form-type-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
}

.insight-status-card .form-type-checkbox label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.insight-status-card input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    accent-color: #0058be;
    flex-shrink: 0;
}

/* ── Meta card ─────────────────────────────────────────────── */
.insight-meta-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(198, 198, 205, 0.4);
}

/* ── Badge pill ────────────────────────────────────────────── */
.insight-badge-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #0058be;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 0.25rem;
}

/* ── Actions bar ───────────────────────────────────────────── */
/* Drupal's #type:container adds an inner <div> inside the prefix/suffix,
   so we make both the outer wrapper AND the inner div flex to prevent
   buttons from stretching to 100% width. */
.insight-form-actions,
.insight-form-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}
.insight-form-actions {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e3e5;
}

/* Prevent any button/link inside actions from stretching full-width */
.insight-form-actions input[type="submit"],
.insight-form-actions input[type="button"],
.insight-form-actions a,
.insight-form-actions button {
    width: auto;
    flex-shrink: 0;
}

.insight-btn-primary {
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #0058be, #2170e4);
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 14px -2px rgba(0, 88, 190, 0.35);
    transition: opacity 0.15s, transform 0.1s;
}

.insight-btn-primary:hover  { opacity: 0.92; }
.insight-btn-primary:active { transform: scale(0.98); }

.insight-btn-danger {
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: #ba1a1a;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #ffdad6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}

.insight-btn-danger:hover { background: #fff8f7; }

.insight-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: #45464d;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #c4c6cf;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.insight-btn-secondary:hover {
    background: #f0f4f7;
    border-color: #9ea1ab;
    color: #45464d;
    text-decoration: none;
}

/* ── Cover image upload column in Title edit form ─────────── */
.insight-cover-upload-col {
    display: flex;
    flex-direction: column;
}
.insight-cover-upload-col .form-item {
    flex: 1;
}
/* Drupal managed_file widget */
.insight-form-section .form-managed-file {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.insight-form-section .form-managed-file input[type="file"] {
    font-size: 0.75rem;
    color: #45464d;
    background: #f0f4f7;
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    cursor: pointer;
}
.insight-form-section .form-managed-file .button {
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: #eceef0;
    color: #45464d;
    border: 1px solid #c4c6cf;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
    width: auto;
    display: inline-block;
}
.insight-form-section .form-managed-file .button:hover { background: #dde1e6; }
/* Preview image inside managed_file */
.insight-form-section .form-managed-file img {
    width: 100%;
    border-radius: 0.375rem;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Responsive: stack on narrow screens ──────────────────── */
@media (max-width: 900px) {
    .insight-form-grid {
        grid-template-columns: 1fr;
    }
    .insight-form-main,
    .insight-form-sidebar {
        grid-column: span 1 / span 1;
    }
    .insight-section-fields {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   User Management page components
   ============================================================ */

/* ── Stat bento cards ──────────────────────────────────────── */
.insight-stat-card {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 7.5rem;
}

.insight-stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #717c82;
}

.insight-stat-value {
    font-family: 'Manrope', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    color: #2a3439;
    line-height: 1;
}

/* ── Directory table wrapper ───────────────────────────────── */
.insight-directory-card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    margin-bottom: 2rem;
}

.insight-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0;
}

.insight-filter-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f4f7;
}

.insight-filter-tab {
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #566166;
    transition: background 0.15s, color 0.15s;
}

.insight-filter-tab:hover,
.insight-filter-tab.is-active,
.insight-filter-tab--active {
    background: #e1e9ee;
    color: #2a3439;
}

/* Count badge inside a filter tab (e.g. "On Sale 12") */
.insight-filter-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    height: 1.2rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    background: rgba(0,0,0,0.08);
    color: inherit;
}
.insight-filter-tab--active .insight-filter-tab-count,
.insight-filter-tab.is-active .insight-filter-tab-count {
    background: rgba(0,88,190,0.12);
    color: #0058be;
}

/* Filter tabs that are <a> links (server-side filtering) */
.insight-filter-tabs a.insight-filter-tab {
    text-decoration: none;
}

/* ── Table ─────────────────────────────────────────────────── */
.insight-user-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.insight-user-table thead {
    background: #f0f4f7;
}

.insight-user-table thead th {
    padding: 0.875rem 1.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #717c82;
}

.insight-user-table tbody tr {
    border-top: 1px solid #f0f4f7;
    transition: background 0.12s;
}

.insight-user-table tbody tr:hover {
    background: #fafbfc;
}

.insight-user-table td {
    padding: 1.125rem 1.5rem;
    vertical-align: middle;
}

/* ── User avatar ───────────────────────────────────────────── */
.insight-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Role badge ────────────────────────────────────────────── */
.insight-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ── Table footer / pager row ──────────────────────────────── */
.insight-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.5rem;
    background: #f7f9fb;
    border-top: 1px solid #f0f4f7;
    font-size: 0.75rem;
    color: #566166;
}

/* ── Bottom bento row ──────────────────────────────────────── */
.insight-bento-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.insight-batch-card {
    background: #131b2e;
    border-radius: 0.75rem;
    padding: 2rem;
    color: rgba(255,255,255,0.7);
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}

.insight-batch-card h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.insight-batch-card p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.insight-batch-card label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.4rem;
}

.insight-batch-card select {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    appearance: none;
    -webkit-appearance: none;
}

.insight-batch-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    margin-top: 1rem;
    transition: background 0.15s;
}

.insight-batch-cta:hover { background: rgba(255,255,255,0.16); }

/* ══════════════════════════════════════════════════════════════
   MANAGE DATA PAGE
══════════════════════════════════════════════════════════════ */

/* Stat card link */
.insight-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--md-sys-color-secondary, #4b87d4);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: opacity 0.12s;
}
.insight-stat-link:hover { opacity: 0.75; }

/* Stat card sub-text */
.insight-stat-sub {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: #717c82;
}

/* Domain card grid — 3 equal columns */
.insight-manage-domain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Individual domain card */
.insight-domain-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px -4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* State rows within a domain card */
.insight-domain-states {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex: 1;
}

.insight-state-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background: #f7f9fb;
    border-radius: 0.375rem;
}

.insight-state-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.insight-state-name {
    flex: 1;
    font-size: 0.75rem;
    color: #566166;
}

.insight-state-count {
    font-size: 0.875rem;
    font-weight: 800;
    color: #2a3439;
    font-family: 'Manrope', sans-serif;
}

/* KPI mini-grid inside distribution card */
.insight-domain-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex: 1;
}

.insight-domain-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 0.5rem;
    background: #f7f9fb;
    border-radius: 0.5rem;
    text-align: center;
}

.insight-domain-kpi-value {
    font-family: 'Manrope', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #2a3439;
    line-height: 1.1;
    margin-top: 0.25rem;
}

.insight-domain-kpi-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #717c82;
    margin-top: 0.25rem;
}

/* Domain action links row */
.insight-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f4f7;
    margin-top: auto;
}

.insight-domain-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f0f4f7;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2a3439;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.insight-domain-action-link:hover {
    background: var(--md-sys-color-secondary-container, #d8eafe);
    color: var(--md-sys-color-on-secondary-container, #1a3a5e);
}

/* ══════════════════════════════════════════════════════════════
   PUBLISHER DIRECTORY PAGE
══════════════════════════════════════════════════════════════ */

/* Three-column charts row */
.insight-pub-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 1.5rem;
}

/* Count badges in the publisher table */
.insight-pub-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
}

.insight-pub-count-titles {
    background: #e8eeff;
    color: #1a3a7a;
}

.insight-pub-count-live {
    background: #dcfce7;
    color: #14532d;
}

.insight-pub-count-press {
    background: #dbeafe;
    color: #1e3a8a;
}

.insight-pub-count-past {
    background: #f0f4f7;
    color: #45464d;
}

/* ══════════════════════════════════════════════════════════════
   TITLE DIRECTORY PAGE
══════════════════════════════════════════════════════════════ */

/* Frequency badge — base */
.insight-frequency-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Per-frequency colour coding */
.insight-frequency-weekly      { background: #fef9c3; color: #854d0e; }
.insight-frequency-fortnightly { background: #fef3c7; color: #92400e; }
.insight-frequency-monthly     { background: #dbeafe; color: #1e3a8a; }
.insight-frequency-bimonthly   { background: #e0e7ff; color: #3730a3; }
.insight-frequency-quarterly   { background: #dcfce7; color: #14532d; }
.insight-frequency-annual      { background: #f3e8ff; color: #6b21a8; }
.insight-frequency-irregular   { background: #f0f4f7; color: #45464d; }

/* Title cover thumbnail in directory table */
.insight-title-thumb {
    width: 2.925rem;
    height: 3.575rem;       /* portrait aspect — typical magazine cover */
    object-fit: cover;
    object-position: center top;
    border-radius: 0.25rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    border: 1px solid #e6e8ea;
}

/* ============================================================
   Title Add / Edit page — 50/50 layout + preview pane
   ============================================================ */

/* Two-column wrapper: form | preview — equal 50/50 split */
.insight-title-edit-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Form column — nothing special, just constrain width */
.insight-title-edit-form-col {
    min-width: 0;
}

/* Preview column — sticky */
.insight-title-edit-preview-col {
    position: sticky;
    top: 5.5rem; /* clear the topbar */
}

/* The pane card */
.insight-preview-pane {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 40px -10px rgba(15,23,42,0.10);
    border: 1px solid rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Cover image area ─────────────────────────────────────── */
.insight-preview-cover-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0.625rem;
    overflow: hidden;
    position: relative;
    background: #f0f4f7;
}

.insight-preview-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.insight-preview-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0058be 0%, #2170e4 60%, #16a34a 100%);
}

.insight-preview-initials {
    font-family: 'Manrope', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.05em;
}

/* ── Title meta block ─────────────────────────────────────── */
.insight-preview-meta-block {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eceef0;
}

.insight-preview-name {
    font-family: 'Manrope', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #131b2e;
    line-height: 1.3;
    margin: 0 0 0.25rem;
    word-break: break-word;
}

.insight-preview-publisher {
    font-size: 0.8125rem;
    color: #717c82;
    margin: 0;
}

/* ── Progress bar ─────────────────────────────────────────── */
.insight-preview-progress-block {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eceef0;
}

.insight-progress-track {
    height: 0.5rem;
    background: #eceef0;
    border-radius: 9999px;
    overflow: hidden;
}

.insight-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: #e0e3e5;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.insight-progress-fill--low  { background: #ba1a1a; }
.insight-progress-fill--mid  { background: #f59e0b; }
.insight-progress-fill--high { background: #16a34a; }

/* ── Required field checklist ─────────────────────────────── */
.insight-preview-checklist {
    /* nothing special */
}

.insight-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-check-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.insight-check-dot--empty  { background: #c4c6cf; }
.insight-check-dot--filled { background: #16a34a; }

/* ── Cover upload column in Identity section ──────────────── */
.insight-cover-upload-col .form-item--type-managed-file,
.insight-cover-upload-col .form-item {
    margin: 0;
}
/* Make the managed_file widget fill the column height */
.insight-cover-upload-col .form-managed-file {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

/* ── Responsive: stack at narrow viewport ─────────────────── */
@media (max-width: 1100px) {
    .insight-title-edit-layout {
        grid-template-columns: 1fr;
    }
    .insight-title-edit-preview-col {
        position: static;
        max-width: 24rem;
    }
}

/* ============================================================
   RETAILER EDIT PAGE LAYOUT
   Two-column: form (left) + sticky info panel (right)
   ============================================================ */

.insight-retailer-edit-layout {
    display: grid;
    grid-template-columns: 1fr 22rem;
    gap: 2rem;
    align-items: start;
}

.insight-retailer-edit-form-col {
    min-width: 0;
}

.insight-retailer-edit-info-col {
    position: sticky;
    top: 5.5rem; /* clear the topbar */
}

/* ── Field-pair: two inputs side-by-side within a section ─── */
.retailer-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /* spacing handled by .form-item margin */
}

.retailer-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Full-width inputs inside .retailer-form-fields (exclude checkboxes) */
.retailer-form-fields .form-item input:not([type="checkbox"]),
.retailer-form-fields .form-item select,
.retailer-form-fields .form-item textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Checkboxes: natural size, never stretched */
.retailer-form-fields .form-item input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0058be;
    appearance: auto;
    -webkit-appearance: auto;
}

/* ── Info / help pane card ────────────────────────────────── */
.retailer-info-pane {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 32px -8px rgba(15,23,42,0.09);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.retailer-info-block {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f2f4;
}
.retailer-info-block:last-child {
    border-bottom: none;
}

.retailer-info-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8a9099;
    margin: 0 0 0.75rem 0;
}

/* Section nav links */
.retailer-info-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.retailer-info-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3d4349;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.retailer-info-nav-item:hover {
    background: #f0f4ff;
    color: #0058be;
}
.retailer-info-nav-item .material-symbols-outlined {
    font-size: 1rem;
    color: #9ea5b0;
    flex-shrink: 0;
}
.retailer-info-nav-item:hover .material-symbols-outlined {
    color: #0058be;
}

/* Field tips list */
.retailer-info-tips {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.retailer-tip {
    font-size: 0.78rem;
    line-height: 1.5;
    color: #5a6270;
}
.retailer-tip-field {
    display: block;
    font-weight: 700;
    color: #191c1e;
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}
.retailer-tip code {
    background: #f0f2f4;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.88em;
    color: #0058be;
    font-family: 'Roboto Mono', monospace;
}

/* Required list */
.retailer-required-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.retailer-required-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3d4349;
}

/* ── Responsive: stack at narrow viewport ─────────────────── */
@media (max-width: 1100px) {
    .insight-retailer-edit-layout {
        grid-template-columns: 1fr;
    }
    .insight-retailer-edit-info-col {
        position: static;
    }
    .retailer-info-pane {
        max-height: none;
        overflow-y: visible;
    }
}

/* ============================================================
   ISSUE STATE BADGES  (used on title view page issues table)
   ============================================================ */

.insight-issue-state {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.insight-issue-state--draft      { background: #f1f5f9; color: #64748b; }
.insight-issue-state--confirmed  { background: #dbeafe; color: #1e3a8a; }
.insight-issue-state--despatched { background: #e0f2fe; color: #0c4a6e; }
.insight-issue-state--on_sale    { background: #dcfce7; color: #14532d; }
.insight-issue-state--off_sale   { background: #fef9c3; color: #854d0e; }
.insight-issue-state--closed     { background: #f8fafc; color: #475569; }
.insight-issue-state--archived   { background: #f3f4f6; color: #9ca3af; }
.insight-issue-state--cancelled  { background: #fee2e2; color: #991b1b; }

/* ============================================================
   INTERNAL DASHBOARD
   ============================================================ */

/* ── KPI cards ─────────────────────────────────────────────── */
.insight-dash-kpi-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.insight-dash-kpi-card:hover {
    background: var(--kpi-hover-bg, #eceef0);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.18);
}

.insight-dash-kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 88, 190, 0.08);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.insight-dash-kpi-card:hover .insight-dash-kpi-icon {
    background: rgba(255, 255, 255, 0.15);
}

.insight-dash-kpi-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: rgba(0, 88, 190, 0.08);
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
}

.insight-dash-kpi-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #717c82;
    transition: color 0.3s;
}

.insight-dash-kpi-value {
    font-family: 'Manrope', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #2a3439;
    line-height: 1;
    margin-top: 0.25rem;
    transition: color 0.3s;
}

.insight-dash-kpi-sub {
    font-size: 0.6875rem;
    color: rgba(86, 97, 102, 0.7);
    margin-top: 0.5rem;
    transition: color 0.3s;
}

/* ── Quick action links ────────────────────────────────────── */
.insight-dash-quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f7f9fb;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #2a3439;
    transition: background 0.12s, box-shadow 0.12s;
}

.insight-dash-quick-action:hover {
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 88, 190, 0.18);
    text-decoration: none;
    color: #2a3439;
}

/* Alert variant — used when there are pending promotion bookings */
.insight-dash-quick-action--alert {
    background: rgba(186, 26, 26, 0.05);
    border: 1px solid rgba(186, 26, 26, 0.15);
}
.insight-dash-quick-action--alert:hover {
    background: rgba(186, 26, 26, 0.08);
    box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
}

/* Pulsing dot used on users-online and pending-booking indicators */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(1.35); }
}

/* ── Low-stock alert rows ──────────────────────────────────── */
.insight-dash-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: #f7f9fb;
}

.insight-dash-alert-bar {
    width: 0.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 2rem;
}

.insight-dash-alert--critical { background: #fff8f7; }
.insight-dash-alert--critical .insight-dash-alert-bar { background: #ba1a1a; }

.insight-dash-alert--warning  { background: #fffbf0; }
.insight-dash-alert--warning  .insight-dash-alert-bar { background: #f59e0b; }

.insight-dash-alert--low      { background: #f7f9fb; }
.insight-dash-alert--low      .insight-dash-alert-bar { background: #a9b4b9; }

/* ── Distribution run state badges ────────────────────────── */
.dash-status-active    { background: #dcfce7; color: #14532d; }
.dash-status-scheduled { background: #dbeafe; color: #1e3a8a; }
.dash-status-complete  { background: #f0f4f7; color: #45464d; }
.dash-status-default   { background: #fef9c3; color: #854d0e; }
.dash-status-cancelled { background: #fce8e8; color: #9f403d; }

/* ── Distribution action buttons ──────────────────────────── */
.insight-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.insight-action-btn--primary   { background: #0058be; color: #fff; }
.insight-action-btn--primary:hover { background: #004494; }
.insight-action-btn--secondary { background: #e8f0fe; color: #1a56db; }
.insight-action-btn--secondary:hover { background: #d0e2fc; }
.insight-action-btn--success   { background: #dcfce7; color: #14532d; }
.insight-action-btn--success:hover { background: #bbf7d0; }
.insight-action-btn--danger    { background: #fce8e8; color: #9f403d; }
.insight-action-btn--danger:hover { background: #fecaca; }

/* ── Portal form field spacing fixes ───────────────────────── */

/* Field group wrapper — adds breathing room between consecutive
   groups of fields within a section card */
.insight-field-group {
    margin-bottom: 1.25rem;
}
.insight-field-group:last-child {
    margin-bottom: 0;
}

/* More row-gap between grid cells in portal add/edit forms */
.insight-form-section .grid {
    row-gap: 1.75rem;
}

/* Each form-item: stack label then input with clear separation.
   The bottom margin is the key fix — it creates the gap between
   the bottom of one field's input and the top of the next label. */
.insight-form-section .form-item {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 1.1rem;
}
.insight-form-section .form-item:last-child {
    margin-bottom: 0;
}

/* Label: sits above the input with a little clearance below */
.insight-form-section .form-item > label,
.insight-form-section .form-item > .label {
    margin-bottom: 0.45rem;
    margin-top: 0;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

/* Description: caption under the input — not a lead-in to the next */
.insight-form-section .form-item__description,
.insight-form-section .description {
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* Checkbox form-items: keep label inline with the box,
   not stacked like text inputs */
.insight-form-section .form-item--type-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.1rem;
}

.insight-form-section .form-item--type-checkbox > label {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
    color: #2a3439;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   SHARED PORTAL TABLE — insight-table
   Alias of insight-user-table for older portal templates.
══════════════════════════════════════════════════════════════ */

.insight-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.insight-table thead {
    background: #f0f4f7;
}

.insight-table thead th {
    padding: 0.875rem 1.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #717c82;
    white-space: nowrap;
}

.insight-table tbody tr {
    border-top: 1px solid #f0f4f7;
    transition: background 0.12s;
}

.insight-table tbody tr:hover {
    background: #fafbfc;
}

.insight-table td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: #2a3439;
}

.insight-table tfoot tr {
    background: #f8f9fa;
    border-top: 2px solid #e5e8ea;
}

.insight-table tfoot td {
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #2a3439;
}

/* ── Empty state ─────────────────────────────────────────── */
.insight-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #a9b4b9;
    gap: 0.5rem;
}

.insight-empty-state .material-symbols-outlined {
    font-size: 2.5rem;
    color: #c4cbd0;
}

.insight-empty-state p {
    margin: 0;
    font-size: 0.875rem;
    color: #717c82;
}

.insight-empty-state p.text-sm {
    font-size: 0.8rem;
    color: #a9b4b9;
}

/* ══════════════════════════════════════════════════════════════
   ISSUE STATE BADGES
   Used on publisher portal and internal issue tables.
══════════════════════════════════════════════════════════════ */

.insight-badge-base {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.insight-badge-draft,
.insight-badge-confirmed,
.insight-badge-despatched,
.insight-badge-allocated,
.insight-badge-on-sale,
.insight-badge-off-sale,
.insight-badge-closed,
.insight-badge-archived,
.insight-badge-cancelled {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.insight-badge-draft      { background: #f0f4f7; color: #566166; }
.insight-badge-confirmed  { background: #e8f0fe; color: #1a56db; }
.insight-badge-despatched { background: #e8f0fe; color: #1a56db; }
.insight-badge-allocated  { background: #ede9fe; color: #6d28d9; }
.insight-badge-on-sale    { background: #dcfce7; color: #14532d; }
.insight-badge-off-sale   { background: #fef3c7; color: #92400e; }
.insight-badge-closed     { background: #f0f4f7; color: #566166; }
.insight-badge-archived   { background: #f0f0f0; color: #9ca3af; }
.insight-badge-cancelled  { background: #fde8e8; color: #b71c1c; }

/* ── Role badge modifiers ─────────────────────────────────── */
.insight-role-badge--success { background: #dcfce7; color: #14532d; }
.insight-role-badge--warning { background: #fef3c7; color: #92400e; }
.insight-role-badge--danger  { background: #fde8e8; color: #b71c1c; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Tooltips  (data-tooltip attribute — pure CSS, no library)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Establish stacking context on the host element */
[data-tooltip] {
    position: relative;
    cursor: default;
}

/* Shared base for bubble and arrow */
[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
}

/* Bubble */
[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 9px);
    background: #1e2a30;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.45;
    text-align: left;
    padding: 0.45rem 0.7rem;
    border-radius: 0.4rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    width: max-content;
    max-width: 240px;
    white-space: normal;
}

/* Arrow */
[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 3px);
    border: 5px solid transparent;
    border-top-color: #1e2a30;
    width: 0;
    height: 0;
    transform: translateX(-50%);
}

/* Reveal on hover or keyboard focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    transform: translateX(-50%);
}

/* Variant: tooltip appears below the element */
[data-tooltip-pos="below"]::before {
    bottom: auto;
    top: calc(100% + 9px);
    transform: translateX(-50%) translateY(4px);
}
[data-tooltip-pos="below"]::after {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: #1e2a30;
    transform: translateX(-50%);
}
[data-tooltip-pos="below"]:hover::before,
[data-tooltip-pos="below"]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Workflow banners  (contextual action prompts)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.insight-workflow-banners {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.insight-workflow-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem 0.8rem 1.1rem;
    border-radius: 0.5rem;
    border-left: 3px solid;
    font-size: 0.825rem;
    line-height: 1.4;
}

/* Variants */
.insight-workflow-banner--info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e3a5f;
}
.insight-workflow-banner--warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #78350f;
}
.insight-workflow-banner--urgent {
    background: #fef2f2;
    border-color: #ef4444;
    color: #7f1d1d;
}

/* Icon */
.insight-workflow-banner .material-symbols-outlined {
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Message text */
.insight-workflow-banner__text {
    flex: 1;
    font-weight: 500;
}

/* Action link */
.insight-workflow-banner__action {
    font-weight: 700;
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    margin-left: 0.5rem;
    transition: opacity 0.12s;
}
.insight-workflow-banner__action:hover { opacity: 0.75; }

.insight-workflow-banner--info    .insight-workflow-banner__action { color:#1d4ed8; background:rgba(59,130,246,0.12); }
.insight-workflow-banner--warning .insight-workflow-banner__action { color:#b45309; background:rgba(245,158,11,0.14); }
.insight-workflow-banner--urgent  .insight-workflow-banner__action { color:#dc2626; background:rgba(239,68,68,0.12); }

/* Dismiss button */
.insight-workflow-banner__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    margin-left: 0.75rem;
    flex-shrink: 0;
    opacity: 0.45;
    transition: opacity 0.12s;
    color: inherit;
    font-family: inherit;
}
.insight-workflow-banner__dismiss:hover { opacity: 1; }

/* ── Tag chips ────────────────────────────────────────────────────────────── */
.insight-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.12s;
}
.insight-tag-chip:hover {
  opacity: 0.85;
}


/* ============================================================
   insight-btn — base button class + size modifiers
   Fills the gap left by insight-btn-primary/secondary/danger
   which define appearance but not layout.
   ============================================================ */

.insight-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

/* Add flex layout to primary variant so icon+label align */
.insight-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Small button: used in table action columns */
.insight-btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 0.375rem;
}

/* ============================================================
   Page-level structural classes
   ============================================================ */

.insight-page-wrap {
    width: 100%;
}

.insight-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #717c82;
    margin-bottom: 0.75rem;
}
.insight-breadcrumb a {
    color: #0058be;
    font-weight: 600;
    text-decoration: none;
}
.insight-breadcrumb a:hover { text-decoration: underline; }
.insight-breadcrumb .material-symbols-outlined { font-size: 0.9rem; }

.insight-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.insight-page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--md-sys-color-on-background, #191c1e);
    margin: 0 0 0.3rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.insight-page-title .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--md-sys-color-primary, #0058be);
}

.insight-page-subtitle {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant, #45464d);
    margin: 0;
}

.insight-page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-bottom: 0.15rem; /* align with baseline of subtitle */
}

/* ============================================================
   Form field helpers (used in tag, pin, and similar forms
   that render their own field markup rather than Drupal forms)
   ============================================================ */

.insight-portal-form {
    /* no-op container — styling comes from insight-form-section */
}

.insight-field-row {
    margin-bottom: 1.25rem;
}
.insight-field-row:last-child { margin-bottom: 0; }

.insight-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #191c1e);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}

.insight-required {
    color: #ba1a1a;
    margin-left: 0.1rem;
}

.insight-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #c4c6cf;
    border-radius: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    background: #fff;
    color: #191c1e;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.insight-input:focus {
    outline: none;
    border-color: #0058be;
    box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.12);
}
.insight-input::placeholder { color: #9ea1ab; }

.insight-field-hint {
    font-size: 0.75rem;
    color: #717c82;
    margin: 0.3rem 0 0;
}


/* ── Card surface ───────────────────────────────────────────── */
/* White surface card: used for description, details, media, bookings, etc. */
.insight-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e8eaed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Stat tiles also need a white background */
.insight-stat-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e8eaed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   r&o/ brand polish layer — appended so it wins the cascade.
   Blue stays the action colour; the brand red (#a03232) is the
   identity layer: nav active state, header accents, icon tints.
   ============================================================ */
:root {
    --ro-brand:      #a03232;
    --ro-brand-dark: #7c2626;
    --ro-brand-tint: #f9efef;
}

/* Page headers carry the double-slash accent under the title */
.insight-form-page-header h2,
.insight-page-title {
    position: relative;
    padding-bottom: 0.7rem;
}
.insight-form-page-header h2::after,
.insight-page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3rem;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(100deg,
        var(--ro-brand) 0 58%, transparent 58% 70%,
        var(--ro-brand) 70% 100%);
}

/* Section cards: crisper border, softer layered shadow */
.insight-form-section {
    border: 1px solid #e9ebee;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 10px 28px -14px rgba(15, 23, 42, 0.10);
}

/* Section icons pick up a whisper of brand (inline overrides still win) */
.insight-section-icon {
    background: var(--ro-brand-tint);
}
.insight-section-icon > .material-symbols-outlined {
    color: var(--ro-brand);
}

/* Sidebar: brand-red active state with inset accent bar */
.insight-nav-item.is-active {
    background: var(--ro-brand-tint);
    color: var(--ro-brand-dark) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ro-brand);
}
.insight-nav-item.is-active .material-symbols-outlined {
    color: var(--ro-brand);
    font-variation-settings: 'FILL' 1;
}
.insight-nav-item.is-active:hover {
    background: #f3e4e4;
    transform: none;
}

/* Buttons: gentle lift on hover */
.insight-btn-primary,
.insight-btn-secondary {
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease, border-color 0.15s ease,
                opacity 0.15s ease;
}
.insight-btn-primary:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(0, 88, 190, 0.45);
}
.insight-btn-primary:active { transform: translateY(0) scale(0.98); }
.insight-btn-secondary:hover { transform: translateY(-1px); }

/* Tables inside cards: quiet row hover */
.insight-form-section tbody tr {
    transition: background 0.12s ease;
}
.insight-form-section tbody tr:hover {
    background: #fafbfc;
}

/* Quieter, slimmer scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #d3d8dc;
    border-radius: 8px;
    border: 2px solid #f7f9fb;
}
::-webkit-scrollbar-thumb:hover { background: #b9c0c6; }

/* Text selection in the brand tint */
::selection {
    background: #f0dcdc;
    color: #4d1a1a;
}