@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --nv-blue: #0B5AA5;
    --nv-blue-dark: #084985;
    --nv-light-blue: #71B8D7;
    --nv-bg: #F5F7FA;
    --nv-card: #FFFFFF;
    --nv-text: #1F2937;
    --nv-muted: #6B7280;
    --nv-border: #E5E7EB;
    --nv-success: #16A34A;
    --nv-warning: #FBBF24;
    --nv-danger: #DC2626;
}

body {
    margin: 0;
    background: var(--nv-bg);
    color: var(--nv-text);
    font-family: Inter, Segoe UI, sans-serif;
}

.nv-sidebar {
    width: 280px;
    min-height: 100vh;
    border-right: 1px solid var(--nv-border);
    position: fixed;
    left: 0;
    top: 0;
    padding: 24px;
}

.nv-brand {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 36px;
}

.nv-brand img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.nv-brand h4 {
    margin: 0;
    font-weight: 800;
    color: var(--nv-blue);
}

.nv-brand span {
    color: var(--nv-muted);
    font-size: 13px;
}

.nv-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nv-nav a {
    text-decoration: none;
    color: var(--nv-text);
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    gap: 12px;
    align-items: center;
}

.nv-nav a:hover,
.nv-nav a.active {
    background: #EAF3FB;
    color: var(--nv-blue);
}

.nv-nav a.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.nv-main {
    margin-left: 280px;
    min-height: 100vh;
}

.nv-topbar {
    height: 88px;
    background: white;
    border-bottom: 1px solid var(--nv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
}

.nv-topbar h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

.nv-topbar p {
    margin: 4px 0 0 0;
    color: var(--nv-muted);
}

.nv-page {
    padding: 32px;
}

.nv-card {
    background: white;
    border: 1px solid var(--nv-border);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.nv-stat {
    padding: 24px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
}

.nv-stat .label {
    color: var(--nv-muted);
    font-weight: 600;
}

.nv-stat .value {
    font-size: 38px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 1.05;
}

.nv-stat .small,
.nv-stat small {
    margin-top: auto;
}

.nv-stat-value-small {
    font-size: 1.45rem !important;
}

.btn-primary {
    background: var(--nv-blue);
    border-color: var(--nv-blue);
}

.btn-primary:hover {
    background: var(--nv-blue-dark);
    border-color: var(--nv-blue-dark);
}

.content-row {
    transition: all 0.15s ease;
}

.content-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.content-row.dragging {
    opacity: 0.45;
}

.drag-handle {
    color: var(--nv-muted);
    cursor: grab;
    font-size: 22px;
}

.content-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #EAF3FB;
    color: var(--nv-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nv-hero {
    background: linear-gradient(135deg, var(--nv-blue), #063b6c);
    color: white;
    border-radius: 28px;
    padding: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(11, 90, 165, 0.22);
}

.nv-hero h1 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 10px;
}

.nv-hero p {
    margin: 0;
    opacity: 0.9;
}

.nv-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px !important;
}

.nv-hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nv-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    flex: 0 0 auto;
}

.nv-stat-icon.blue {
    background: #EAF3FB;
    color: var(--nv-blue);
}

.nv-stat-icon.green {
    background: #DCFCE7;
    color: var(--nv-success);
}

.nv-stat-icon.red {
    background: #FEE2E2;
    color: var(--nv-danger);
}

.nv-stat-icon.dark {
    background: #E5E7EB;
    color: #111827;
}

.nv-recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--nv-border);
}

.nv-recent-item:first-of-type {
    border-top: none;
}

.nv-auto-dismiss-alert {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nv-alert-hidden {
    opacity: 0;
    transform: translateY(-8px);
}

.nv-dashboard-preview-menu {
    color: var(--nv-text);
}

.nv-dashboard-preview-menu .nv-preview-menu-list {
    right: 0;
}

.nv-quick-preview-menu {
    position: relative;
    width: 100%;
}

.nv-quick-preview-menu .nv-preview-menu-list {
    right: 0;
    left: auto;
    width: 100%;
    min-width: 100%;
}

.content-type-card {
    display: block;
    height: 100%;
    background: white;
    border: 1px solid var(--nv-border);
    border-radius: 24px;
    padding: 30px;
    text-decoration: none;
    color: var(--nv-text);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
    transition: all 0.18s ease;
}

.content-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.10);
    color: var(--nv-text);
}

.content-type-card i {
    font-size: 42px;
    color: var(--nv-blue);
    margin-bottom: 20px;
    display: block;
}

.content-type-card h4 {
    font-weight: 800;
}

.content-type-card p {
    color: var(--nv-muted);
    margin-bottom: 0;
}

.content-type-card.safety i {
    color: var(--nv-danger);
}

.content-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 28px;
    align-items: start;
}

.preview-sticky {
    position: sticky;
    top: 24px;
}

.tv-frame {
    width: 100%;
    background: #111827;
    border-radius: 28px;
    padding: 12px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
}

.tv-canvas {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #F5F7FA;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 52px 1fr 38px;
}

.tv-preview-header,
.tv-preview-footer {
    background: white;
    color: #1F2937;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    font-size: 12px;
}

.tv-preview-header {
    border-bottom: 3px solid var(--nv-blue);
}

.tv-preview-header img {
    height: 34px;
}

.tv-preview-footer {
    background: var(--nv-blue);
    color: white;
}

.tv-preview-body {
    overflow: hidden;
    padding: 24px;
    background: #F5F7FA;
}

.preview-big-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--nv-blue);
    line-height: 1.05;
}

.preview-subtitle {
    font-size: 18px;
    margin-top: 10px;
}

.preview-divider {
    height: 4px;
    background: var(--nv-light-blue);
    width: 120px;
    margin: 18px 0;
    border-radius: 999px;
}

.preview-small {
    color: var(--nv-muted);
    font-weight: 700;
}

.preview-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.preview-two-cols > div {
    background: white;
    border-radius: 12px;
    padding: 14px;
    font-size: 13px;
}

.preview-two-cols p {
    margin-bottom: 0;
}

.preview-warning {
    display: inline-block;
    background: #FBBF24;
    color: #111827;
    font-weight: 900;
    padding: 7px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.preview-image-placeholder {
    height: 150px;
    background: white;
    border: 2px dashed #CBD5E1;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nv-muted);
    font-size: 42px;
    margin-bottom: 18px;
}

.media-thumb {
    background: #F5F7FA;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    padding: 12px;
}

.media-thumb img {
    width: 180px;
    height: 120px;
    object-fit: contain;
    display: block;
}

.preview-warning.critical {
    background: #DC2626;
    color: white;
}

.nv-display-content {
    height: 100%;
    width: 100%;
}

.nv-display-content h1 {
    font-size: 34px;
    font-weight: 900;
    color: var(--nv-blue);
    line-height: 1.05;
}

.nv-display-content h2 {
    font-size: 18px;
    font-weight: 800;
}

.nv-display-content p {
    font-size: 15px;
    line-height: 1.35;
}

.nv-display-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.nv-display-lang {
    background: white;
    border-radius: 14px;
    padding: 14px;
}

.nv-display-lang span {
    font-size: 11px;
    font-weight: 800;
    color: var(--nv-muted);
    text-transform: uppercase;
}

.nv-display-images {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.nv-display-images img {
    width: 48%;
    max-height: 120px;
    object-fit: contain;
    background: white;
    border-radius: 14px;
}

.welcome-template {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 18px;
    align-items: center;
}

.welcome-kicker {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--nv-light-blue);
    margin-bottom: 8px;
}

.welcome-divider {
    width: 120px;
    height: 5px;
    background: var(--nv-light-blue);
    border-radius: 999px;
    margin: 14px 0;
}

.welcome-main-image {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
}

.safety-alert {
    display: inline-block;
    background: #FBBF24;
    color: #111827;
    font-weight: 900;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.safety-template.critical .safety-alert {
    background: var(--nv-danger);
    color: white;
}

.gallery-template {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-images {
    flex: 1;
    display: flex;
    gap: 14px;
}

.gallery-images img {
    width: 50%;
    object-fit: contain;
    background: white;
    border-radius: 16px;
}

.gallery-caption {
    margin-top: 14px;
    text-align: center;
}

.gallery-placeholder {
    width: 100%;
    background: white;
    border: 2px dashed #CBD5E1;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nv-muted);
}

#livePreview {
    animation: previewFade .2s ease;
}

@keyframes previewFade {
    from {
        opacity: .4;
        transform: scale(.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.media-card {
    overflow: hidden;
}

.media-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: #F8FAFC;
    border-bottom: 1px solid var(--nv-border);
}

.display-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #EAF3FB;
    color: var(--nv-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.display-checkbox {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--nv-border);
    border-radius: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .15s ease;
}

.display-checkbox:hover {
    background: #F8FAFC;
    border-color: var(--nv-blue);
}

.display-checkbox input {
    transform: scale(1.25);
}

.picture-library-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 0.9fr) auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 20px;
}

.picture-library-count {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--nv-muted);
    font-weight: 800;
    white-space: nowrap;
}

.picture-library-grid,
.media-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.picture-library-card {
    appearance: none;
    border: 1px solid var(--nv-border);
    border-radius: 18px;
    background: white;
    padding: 0;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.picture-library-card:hover {
    transform: translateY(-2px);
    border-color: var(--nv-blue);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.picture-library-card.selected {
    border-color: var(--nv-blue);
    box-shadow: 0 0 0 3px rgba(11, 90, 165, 0.16);
}

.picture-library-card:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

.picture-library-image-wrap {
    position: relative;
    height: 165px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--nv-border);
}

.picture-library-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.picture-library-selected-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--nv-blue);
    color: white;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.picture-library-full-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-align: center;
    padding: 18px;
}

.picture-library-card-body {
    padding: 12px 14px 14px;
}

.picture-library-card-body strong {
    display: block;
    color: var(--nv-text);
    font-size: 0.92rem;
    line-height: 1.25;
    word-break: break-word;
}

.picture-library-card-body span {
    display: block;
    color: var(--nv-muted);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 6px;
}

.picture-library-empty {
    text-align: center;
    padding: 54px 20px;
    color: var(--nv-muted);
}

.picture-library-empty i {
    font-size: 46px;
    color: var(--nv-blue);
    display: block;
    margin-bottom: 12px;
}

.picture-library-empty h5 {
    color: var(--nv-text);
    font-weight: 800;
}

@media (max-width: 900px) {
    .picture-library-toolbar {
        grid-template-columns: 1fr;
    }

    .picture-library-count {
        justify-content: flex-start;
    }
}

.existing-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.existing-image {
    border: 1px solid var(--nv-border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: white;
}

.existing-image img {
    width: 100%;
    height: 120px;
    object-fit: contain;
}

.template-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 900;
    color: var(--nv-blue);
    margin-bottom: 10px;
}

.template-label.muted {
    color: var(--nv-muted);
}

.template-body {
    margin-bottom: 0;
    white-space: pre-line;
}

.template-body.da {
    color: var(--nv-text);
}

.template-divider {
    width: 140px;
    height: 5px;
    background: var(--nv-light-blue);
    border-radius: 999px;
    margin: 22px 0;
}

.announcement-image-row {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    min-height: 0;
}

.announcement-image {
    width: 50%;
    max-height: 130px;
    object-fit: contain;
    background: white;
    border-radius: 16px;
    padding: 8px;
}

.announcement-hero .template-body {
    max-width: 85%;
}

.announcement-hero .announcement-image-row {
    justify-content: center;
    width: 80%;
}

.announcement-minimal h1 {
    max-width: 90%;
}

.announcement-minimal .template-body {
    max-width: 80%;
}

.lobby-preview {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    overflow: hidden;
    display: grid;
    grid-template-rows: 70px 1fr 42px;
}

.lobby-preview-header {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    background: #0b5ea8;
    color: white;
}

.lobby-preview-left {
    position: relative;
    background: #f5f7fa;
    overflow: hidden;
}

.lobby-preview-watermark {
    position: absolute;
    width: 150px;
    height: 150px;
    left: -28px;
    top: -32px;
    object-fit: contain;
}

.lobby-preview-logo {
    position: absolute;
    width: 80px;
    left: 48px;
    top: 8px;
}

.lobby-preview-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

.lobby-preview-clock strong {
    font-size: 18px;
    margin-top: 4px;
}

.lobby-preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.lobby-preview-default h1,
.lobby-preview-text h1 {
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
    margin: 8px 0;
}

.lobby-preview-default img {
    width: 140px;
    margin-top: 24px;
}

.lobby-preview-kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #0b5ea8;
    font-weight: 900;
    font-size: 18px;
}

.lobby-preview-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 18px;
    align-items: center;
}

.lobby-preview-side-logo {
    max-width: 130px;
    justify-self: end;
}

.lobby-preview-visitor-logo {
    max-width: 110px;
    max-height: 90px;
    object-fit: contain;
    justify-self: start;
}

.lobby-preview-text h2 {
    color: #6b7280;
    font-size: 16px;
    font-weight: 800;
    margin: 8px 0;
}

.lobby-preview-text p {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.lobby-preview-text.only {
    max-width: 80%;
}

.lobby-preview-footer {
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 9px;
    font-weight: 800;
    color: #475569;
}

.lobby-preview-button {
    background: #0b5ea8;
    color: white;
    padding: 6px 10px;
    border-radius: 7px;
}

/* Fixed-height admin scroll areas */

.nv-scroll-table {
    max-height: 560px;
    overflow: auto;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
}

.nv-sticky-table {
    min-width: 980px;
}

.nv-sticky-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F8FAFC;
    border-bottom: 1px solid var(--nv-border);
    box-shadow: 0 1px 0 var(--nv-border);
}

.nv-sticky-table tbody tr:last-child td {
    border-bottom: 0;
}

.nv-table-details {
    max-width: 380px;
    white-space: normal;
}

.nv-audit-scroll {
    max-height: calc(100vh - 360px);
    min-height: 360px;
}

.nv-backup-scroll {
    max-height: calc(100vh - 420px);
    min-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    padding: 0 18px;
    background: #FFFFFF;
}

.nv-backup-item {
    gap: 18px;
}

.nv-backup-main {
    min-width: 0;
}

.nv-backup-main strong {
    word-break: break-word;
}

@media (max-width: 1200px) {
    .nv-audit-scroll {
        max-height: 560px;
    }

    .nv-backup-scroll {
        max-height: 520px;
    }
}

/* Media Library compact cards and category management */

.media-card-compact {
    overflow: visible;
}

.media-card-image-wrap {
    height: 170px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--nv-border);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.media-card-compact img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.media-card-body {
    padding: 14px;
}

.media-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.media-card-menu-button {
    width: 34px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.media-card-dropdown {
    width: 280px;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.media-card-meta {
    margin-top: 10px;
    color: var(--nv-muted);
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.media-category-panel {
    border: 1px solid var(--nv-border);
    border-radius: 18px;
    background: #F8FAFC;
    padding: 18px;
}

.media-category-create {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: center;
    max-width: 620px;
}

.media-category-compact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 10px;
}

.media-category-chip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--nv-border);
    border-radius: 14px;
    background: white;
}

.media-category-chip-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.media-category-chip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-category-rename-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-category-rename-compact input {
    width: 170px;
}

@media (max-width: 1100px) {
    .media-category-compact-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .media-category-create,
    .media-category-chip-row {
        grid-template-columns: 1fr;
    }

    .media-category-chip-actions,
    .media-category-rename-compact {
        width: 100%;
    }

    .media-category-rename-compact input {
        width: 100%;
    }
}

/* Visitor Welcome accurate iframe preview */

.lobby-live-preview-shell {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: white;
    border-radius: 18px;
    overflow: hidden;
}

/* More accurate scaled TV preview */

.tv-preview-body-live {
    padding: 0;
    background: white;
    overflow: hidden;
}

.nv-live-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: white;
}

/* =========================================================
   NORTHVISION THEME FOUNDATION
   ========================================================= */

:root {
    color-scheme: light;

    --nv-bg: #f5f7fa;
    --nv-card: #ffffff;
    --nv-surface: #ffffff;
    --nv-surface-muted: #f8fafc;
    --nv-surface-hover: #f1f5f9;

    --nv-text: #1f2937;
    --nv-text-strong: #0f172a;
    --nv-muted: #64748b;

    --nv-border: #e5e7eb;
    --nv-border-strong: #cbd5e1;

    --nv-blue: #0b5aa5;
    --nv-blue-dark: #084985;
    --nv-light-blue: #71b8d7;
    --nv-blue-soft: #eaf4ff;

    --nv-shadow:
        0 10px 25px rgba(15, 23, 42, 0.04);

    --nv-shadow-hover:
        0 14px 30px rgba(15, 23, 42, 0.09);

    --nv-input-bg: #ffffff;
    --nv-input-text: #0f172a;

    --nv-table-head: #f8fafc;

    --nv-success: #16a34a;
    --nv-warning: #fbbf24;
    --nv-danger: #dc2626;
}


html[data-theme="dark"] {
    color-scheme: dark;

    --nv-bg: #0d1522;
    --nv-card: #151f2e;
    --nv-surface: #151f2e;
    --nv-surface-muted: #111a27;
    --nv-surface-hover: #1c293a;

    --nv-text: #dce5ef;
    --nv-text-strong: #f4f7fb;
    --nv-muted: #9cacbf;

    --nv-border: #2a394d;
    --nv-border-strong: #3a4c63;

    --nv-blue: #61a9ef;
    --nv-blue-dark: #7ab8f4;
    --nv-light-blue: #71b8d7;
    --nv-blue-soft: #172d43;

    --nv-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);

    --nv-shadow-hover:
        0 14px 30px rgba(0, 0, 0, 0.28);

    --nv-input-bg: #111a27;
    --nv-input-text: #edf3f9;

    --nv-table-head: #111a27;
}


/* BASE */

body {
    background: var(--nv-bg);
    color: var(--nv-text);
}

.nv-main {
    background: var(--nv-bg);
}

.nv-sidebar,
.nv-topbar,
.nv-card {
    background: var(--nv-surface);
    border-color: var(--nv-border);
}

.nv-card {
    box-shadow: var(--nv-shadow);
}

.nv-topbar h1,
.nv-topbar h2,
.nv-topbar h3,
.nv-card h1,
.nv-card h2,
.nv-card h3,
.nv-card h4,
.nv-card h5,
.nv-card h6 {
    color: var(--nv-text-strong);
}


/* BOOTSTRAP TEXT HELPERS */

html[data-theme="dark"] .text-muted {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--nv-surface) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light {
    background-color: var(--nv-surface-muted) !important;
    color: var(--nv-text);
}


/* FORMS */

.form-control,
.form-select,
.input-group-text {
    background-color: var(--nv-input-bg);
    color: var(--nv-input-text);
    border-color: var(--nv-border-strong);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--nv-input-bg);
    color: var(--nv-input-text);
    border-color: var(--nv-blue);
    box-shadow:
        0 0 0 0.2rem rgba(97, 169, 239, 0.14);
}

.form-control::placeholder {
    color: var(--nv-muted);
}

.form-select {
    color-scheme: inherit;
}

.form-check-input {
    background-color: var(--nv-input-bg);
    border-color: var(--nv-border-strong);
}

.form-check-input:checked {
    background-color: var(--nv-blue);
    border-color: var(--nv-blue);
}


/* TABLES */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nv-text);
    --bs-table-border-color: var(--nv-border);
    --bs-table-hover-bg: var(--nv-surface-hover);
    --bs-table-hover-color: var(--nv-text-strong);

    color: var(--nv-text);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--nv-text);
    border-color: var(--nv-border);
}

.table thead th,
.nv-sticky-table thead th {
    background: var(--nv-table-head);
    color: var(--nv-muted);
    border-color: var(--nv-border);
}


/* BUTTONS */

html[data-theme="dark"] .btn-light {
    background: var(--nv-surface-muted);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

html[data-theme="dark"] .btn-light:hover {
    background: var(--nv-surface-hover);
    border-color: var(--nv-border-strong);
    color: var(--nv-text-strong);
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #bac7d6;
    border-color: #53657b;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background: #53657b;
    border-color: #53657b;
    color: #ffffff;
}


/* ALERTS */

html[data-theme="dark"] .alert-info {
    color: #cce9ff;
    background: #112c40;
    border-color: #244b66;
}

html[data-theme="dark"] .alert-light {
    color: var(--nv-text);
    background: var(--nv-surface-muted);
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .alert-success {
    color: #c8f5d8;
    background: #123222;
    border-color: #27543a;
}

html[data-theme="dark"] .alert-warning {
    color: #ffe7a3;
    background: #382d12;
    border-color: #62501f;
}

html[data-theme="dark"] .alert-danger {
    color: #ffd0d0;
    background: #3b171b;
    border-color: #662a32;
}


/* DROPDOWNS */

html[data-theme="dark"] .dropdown-menu {
    background: var(--nv-surface);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--nv-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--nv-surface-hover);
    color: var(--nv-text-strong);
}


/* COMMON NORTHVISION COMPONENTS */

.content-type-card,
.picture-library-card,
.existing-image,
.media-category-chip-row,
.nv-backup-scroll {
    background: var(--nv-surface);
    color: var(--nv-text);
    border-color: var(--nv-border);
}

.content-type-card:hover,
.picture-library-card:hover {
    box-shadow: var(--nv-shadow-hover);
}

.content-icon,
.display-icon,
.nv-stat-icon.blue {
    background: var(--nv-blue-soft);
    color: var(--nv-blue);
}

.media-thumb,
.media-card-image-wrap,
.picture-library-image-wrap,
.media-category-panel {
    background: var(--nv-surface-muted);
}

.display-checkbox:hover {
    background: var(--nv-surface-hover);
}

.picture-library-card-body strong,
.picture-library-empty h5 {
    color: var(--nv-text-strong);
}


/* KEEP TV / DISPLAY PREVIEWS LIGHT

   These are visual previews of what the physical screen will show,
   so admin dark mode should not recolour the actual preview output.
*/

.tv-canvas,
.tv-preview-header,
.tv-preview-body,
.tv-preview-body-live,
.preview-two-cols > div,
.preview-image-placeholder,
.nv-display-lang,
.nv-display-images img,
.gallery-images img,
.gallery-placeholder,
.lobby-preview,
.lobby-preview-left,
.lobby-live-preview-shell,
.nv-live-preview-frame {
    color-scheme: light;
}


/* SMOOTH THEME TRANSITION */

body,
.nv-sidebar,
.nv-topbar,
.nv-card,
.form-control,
.form-select,
.table,
.content-type-card,
.picture-library-card {
    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease;
}

/* =========================================================
   DARK MODE POLISH
   ========================================================= */

html[data-theme="dark"] {
    --nv-light-badge-bg: #26364a;
    --nv-light-badge-text: #dce7f3;
}


/* LIGHT BOOTSTRAP BADGES
   Fixes white Not started / Not enabled / Optional style badges
   across employee, review and skills tables.
*/

html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .badge.bg-light {
    background-color: var(--nv-light-badge-bg) !important;
    color: var(--nv-light-badge-text) !important;
    border: 1px solid var(--nv-border-strong);
}


/* READONLY / DISABLED FORM CONTROLS */

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: #202c3c !important;
    color: #aebed0 !important;
    border-color: var(--nv-border) !important;
    opacity: 1;
}


/* SWITCHES */

html[data-theme="dark"] .form-switch .form-check-input {
    background-color: #26364a;
    border-color: #61758c;
}

html[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--nv-blue);
    border-color: var(--nv-blue);
}

html[data-theme="dark"] .form-switch .form-check-input:focus {
    border-color: var(--nv-blue);
    box-shadow: 0 0 0 0.2rem rgba(97, 169, 239, 0.14);
}


/* GENERIC WHITE CARDS INSIDE DARK ADMIN PAGES */

html[data-theme="dark"] .nv-page .border.bg-light {
    background-color: var(--nv-surface-muted) !important;
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .nv-page .border.bg-white {
    background-color: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
}


/* SEARCH RESULTS */

html[data-theme="dark"] .search-result-card,
html[data-theme="dark"] .search-result-item,
html[data-theme="dark"] .search-result {
    background: var(--nv-surface) !important;
    color: var(--nv-text) !important;
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .search-result-card:hover,
html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-result:hover {
    background: var(--nv-surface-hover) !important;
}

html[data-theme="dark"] .search-result-card strong,
html[data-theme="dark"] .search-result-item strong,
html[data-theme="dark"] .search-result strong {
    color: var(--nv-text-strong) !important;
}


/* REVIEW / SKILLS ADMIN FORM PREVIEWS */

html[data-theme="dark"] .review-question-card,
html[data-theme="dark"] .skills-question-card {
    background: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .review-question-title,
html[data-theme="dark"] .skills-question-title {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .review-question-help,
html[data-theme="dark"] .skills-question-help {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .review-preview-input,
html[data-theme="dark"] .skills-preview-input {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .rating-preview span,
html[data-theme="dark"] .yes-no-preview span {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
    color: var(--nv-text) !important;
}


/* COMPANY INFORMATION CONTENT */

html[data-theme="dark"] .nv-card p,
html[data-theme="dark"] .nv-card li,
html[data-theme="dark"] .nv-card .company-info-content,
html[data-theme="dark"] .nv-card .company-info-text {
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .nv-card .text-secondary {
    color: var(--nv-muted) !important;
}


/* DARK SIDEBAR LOGO LEGIBILITY */

html[data-theme="dark"] .nv-sidebar .nv-brand {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 14px;
    padding-right: 14px;
}


/* SMALL LIGHT PANELS */

html[data-theme="dark"] .card {
    background-color: var(--nv-surface);
    color: var(--nv-text);
    border-color: var(--nv-border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--nv-surface-muted);
    border-color: var(--nv-border);
}

/* =========================================================
   NORTHVISION DARK MODE POLISH
   Append this to the very bottom of public/css/admin.css
   ========================================================= */

/* ---------------------------------------------------------
   HOME
   --------------------------------------------------------- */

html[data-theme="dark"] .home-section-title,
html[data-theme="dark"] .home-quick-title,
html[data-theme="dark"] .home-panel-title,
html[data-theme="dark"] .home-announcement-title,
html[data-theme="dark"] .home-tool-title,
html[data-theme="dark"] .home-change-title {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .home-section-subtitle,
html[data-theme="dark"] .home-quick-group,
html[data-theme="dark"] .home-quick-description,
html[data-theme="dark"] .home-panel-description,
html[data-theme="dark"] .home-tool-description,
html[data-theme="dark"] .home-change-summary,
html[data-theme="dark"] .home-change-date,
html[data-theme="dark"] .home-empty {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .home-quick-card,
html[data-theme="dark"] .home-panel,
html[data-theme="dark"] .home-tool,
html[data-theme="dark"] .home-announcement {
    background: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .home-quick-card:hover,
html[data-theme="dark"] .home-tool:hover,
html[data-theme="dark"] .home-announcement:hover {
    background: var(--nv-surface-hover) !important;
    border-color: var(--nv-border-strong) !important;
}

html[data-theme="dark"] .home-tool.disabled {
    background: var(--nv-surface-muted) !important;
}

html[data-theme="dark"] .home-quick-icon,
html[data-theme="dark"] .home-tool-icon {
    background: var(--nv-blue-soft) !important;
    color: var(--nv-blue) !important;
}

html[data-theme="dark"] .home-panel-header,
html[data-theme="dark"] .home-change-table tbody td,
html[data-theme="dark"] .home-change-table tr {
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .home-change-table thead th {
    background: var(--nv-table-head) !important;
    color: var(--nv-muted) !important;
    border-color: var(--nv-border) !important;
}

/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

html[data-theme="dark"] .search-section-title,
html[data-theme="dark"] .search-result-title {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .search-result-description,
html[data-theme="dark"] .search-result-meta,
html[data-theme="dark"] .search-empty {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .search-result {
    background: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .search-result:hover {
    background: var(--nv-surface-hover) !important;
    border-color: var(--nv-border-strong) !important;
}

html[data-theme="dark"] .search-result-icon {
    background: var(--nv-blue-soft) !important;
    color: var(--nv-blue) !important;
}

html[data-theme="dark"] .search-empty {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
}

html[data-theme="dark"] .search-section-title .badge,
html[data-theme="dark"] .search-section-title .text-bg-light {
    background: #26364a !important;
    color: #dce7f3 !important;
    border: 1px solid var(--nv-border-strong);
}

/* ---------------------------------------------------------
   BOOTSTRAP LIGHT BADGES
   Fixes white boxes in Employees, Annual Reviews, Skills, etc.
   --------------------------------------------------------- */

html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .badge.bg-light {
    background-color: #26364a !important;
    color: #dce7f3 !important;
    border: 1px solid var(--nv-border-strong) !important;
}

/* ---------------------------------------------------------
   EMERGENCY SWITCH / SWITCHES GENERALLY
   --------------------------------------------------------- */

html[data-theme="dark"] .form-switch .form-check-input {
    background-color: #26364a !important;
    border-color: #7d91a8 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

html[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--nv-blue) !important;
    border-color: var(--nv-blue) !important;
}

html[data-theme="dark"] .form-switch .form-check-input:focus {
    border-color: var(--nv-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(97, 169, 239, 0.14) !important;
}

/* ---------------------------------------------------------
   SEW76 ROBOT REPORT
   --------------------------------------------------------- */

html[data-theme="dark"] .robot-metric {
    background: var(--nv-surface-muted) !important;
    border: 1px solid var(--nv-border);
}

html[data-theme="dark"] .robot-metric-label,
html[data-theme="dark"] .robot-metric-help,
html[data-theme="dark"] .robot-refresh-note {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .robot-metric-value,
html[data-theme="dark"] .stop-reason-text {
    color: var(--nv-text-strong) !important;
}

/* ---------------------------------------------------------
   REVIEW / SKILLS FORM PREVIEWS
   --------------------------------------------------------- */

html[data-theme="dark"] .review-question-card,
html[data-theme="dark"] .skills-question-card {
    background: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .review-question-title,
html[data-theme="dark"] .skills-question-title {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .review-question-help,
html[data-theme="dark"] .skills-question-help {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .review-preview-input,
html[data-theme="dark"] .skills-preview-input {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .rating-preview span,
html[data-theme="dark"] .yes-no-preview span {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
    color: var(--nv-text) !important;
}

/* ---------------------------------------------------------
   COMPANY INFORMATION
   --------------------------------------------------------- */

html[data-theme="dark"] .company-info-text {
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .company-info-icon {
    background: var(--nv-blue-soft) !important;
    color: var(--nv-blue) !important;
}

html[data-theme="dark"] .company-info-empty {
    background: var(--nv-surface-muted) !important;
    border-color: var(--nv-border-strong) !important;
}

html[data-theme="dark"] .company-info-empty h5 {
    color: var(--nv-text-strong) !important;
}

/* ---------------------------------------------------------
   SETTINGS / DISABLED INPUTS
   --------------------------------------------------------- */

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: #202c3c !important;
    color: #b9c7d6 !important;
    border-color: var(--nv-border) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #b9c7d6;
}

html[data-theme="dark"] .form-text {
    color: var(--nv-muted) !important;
}

/* ---------------------------------------------------------
   GENERIC LIGHT PANELS IN ADMIN UI
   --------------------------------------------------------- */

html[data-theme="dark"] .nv-page .bg-light,
html[data-theme="dark"] .nv-page .bg-white {
    background-color: var(--nv-surface-muted) !important;
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .nv-page .border {
    border-color: var(--nv-border) !important;
}

/* ---------------------------------------------------------
   SIDEBAR LOGO LEGIBILITY
   Temporary light logo plate until a dedicated dark logo asset exists.
   --------------------------------------------------------- */

html[data-theme="dark"] .nv-sidebar .nv-brand {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 14px;
    padding-right: 14px;
}

/* =========================================================
   EMPLOYEE PROFILE DARK MODE POLISH
   Append to the very bottom of public/css/admin.css
   ========================================================= */

html[data-theme="dark"] .employee-profile-title {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .employee-profile-subtitle {
    color: var(--nv-muted) !important;
}

html[data-theme="dark"] .employee-detail-item {
    border-bottom-color: var(--nv-border) !important;
}

html[data-theme="dark"] .employee-detail-label {
    color: #8fa3ba !important;
}

html[data-theme="dark"] .employee-detail-value {
    color: var(--nv-text-strong) !important;
}

html[data-theme="dark"] .employee-detail-value code,
html[data-theme="dark"] .employee-history-table code {
    color: #ff5ba7 !important;
}

html[data-theme="dark"] .employee-notes-box {
    color: var(--nv-text) !important;
}

html[data-theme="dark"] .employee-history-empty {
    background: var(--nv-surface-muted) !important;
    color: var(--nv-muted) !important;
    border-color: var(--nv-border-strong) !important;
}

html[data-theme="dark"] .employee-history-table td,
html[data-theme="dark"] .employee-history-table th {
    color: var(--nv-text) !important;
    border-color: var(--nv-border) !important;
}

html[data-theme="dark"] .employee-history-table strong {
    color: var(--nv-text-strong) !important;
}


/* =========================================================
   MANAGER REVIEW & SKILLS DEADLINES
   ========================================================= */

.nv-workflow-stat-urgent {
    border-color:
        color-mix(
            in srgb,
            var(--bs-danger) 42%,
            var(--nv-border)
        );
}

.nv-workflow-stat-due-soon {
    border-color:
        color-mix(
            in srgb,
            var(--bs-warning) 48%,
            var(--nv-border)
        );
}

.nv-workflow-row > td:first-child {
    box-shadow:
        inset 4px 0 0 transparent;
}

.nv-workflow-row.is-overdue > td:first-child {
    box-shadow:
        inset 4px 0 0 var(--bs-danger);
}

.nv-workflow-row.is-due-today > td:first-child {
    box-shadow:
        inset 4px 0 0 var(--bs-warning);
}

.nv-workflow-row.is-due-soon > td:first-child {
    box-shadow:
        inset 4px 0 0 #d6a400;
}

.nv-workflow-row.is-submitted > td:first-child {
    box-shadow:
        inset 4px 0 0 var(--nv-blue);
}

.nv-workflow-row.is-overdue > td {
    background:
        color-mix(
            in srgb,
            var(--bs-danger) 5%,
            transparent
        );
}

.nv-workflow-row.is-due-today > td,
.nv-workflow-row.is-due-soon > td {
    background:
        color-mix(
            in srgb,
            var(--bs-warning) 5%,
            transparent
        );
}

.nv-workflow-row.is-submitted > td {
    background:
        color-mix(
            in srgb,
            var(--nv-blue) 5%,
            transparent
        );
}

.nv-workflow-deadline-pill {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.2;
    font-weight: 800;
}

.nv-workflow-deadline-pill.is-overdue {
    background:
        color-mix(
            in srgb,
            var(--bs-danger) 12%,
            var(--nv-surface)
        );
    color: var(--bs-danger);
}

.nv-workflow-deadline-pill.is-today,
.nv-workflow-deadline-pill.is-soon {
    background:
        color-mix(
            in srgb,
            var(--bs-warning) 15%,
            var(--nv-surface)
        );
    color: #856404;
}

html[data-theme="dark"]
.nv-workflow-deadline-pill.is-today,
html[data-theme="dark"]
.nv-workflow-deadline-pill.is-soon {
    color: #f6c453;
}

@media (max-width: 900px) {
    .nv-workflow-deadline-pill {
        white-space: normal;
    }
}


/* =========================================================
   TARGETED EMPLOYEE ANNOUNCEMENTS
   ========================================================= */

.nv-announcement-audience-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    background: var(--nv-surface);
    cursor: pointer;
}

.nv-announcement-audience-option:hover {
    border-color:
        color-mix(
            in srgb,
            var(--nv-blue) 40%,
            var(--nv-border)
        );
}

.nv-announcement-audience-option
.form-check-input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.nv-announcement-audience-summary {
    width: fit-content;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--nv-border);
    border-radius: 12px;
    background: var(--nv-surface-muted);
}

html[data-theme="dark"]
.nv-announcement-audience-option,
html[data-theme="dark"]
.nv-announcement-audience-summary {
    background: var(--nv-surface-muted);
}