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

:root {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --primary-soft: #eff6ff;
    --bg-body: #f1f5f9;
    --bg-panel: #f8fafc;
    --sidebar-bg: #0f172a;
    --sidebar-text: #94a3b8;
    --sidebar-active-bg: #1e293b;
    --sidebar-active-text: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Premium dashboard application layer */
:root {
    --amtv-bg: #f6f8fb;
    --amtv-surface: rgba(255, 255, 255, 0.92);
    --amtv-surface-solid: #ffffff;
    --amtv-surface-muted: #f1f5f9;
    --amtv-text: #111827;
    --amtv-muted: #667085;
    --amtv-subtle: #94a3b8;
    --amtv-border: rgba(148, 163, 184, 0.28);
    --amtv-border-strong: rgba(100, 116, 139, 0.36);
    --amtv-accent: #2563eb;
    --amtv-accent-strong: #1d4ed8;
    --amtv-success: #16a34a;
    --amtv-danger: #dc2626;
    --amtv-warning: #d97706;
    --amtv-ring: rgba(37, 99, 235, 0.28);
    --amtv-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --amtv-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.08);
    --amtv-shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"],
body[data-theme="dark"] {
    --amtv-bg: #0b1120;
    --amtv-surface: rgba(15, 23, 42, 0.86);
    --amtv-surface-solid: #111827;
    --amtv-surface-muted: #172033;
    --amtv-text: #f8fafc;
    --amtv-muted: #cbd5e1;
    --amtv-subtle: #94a3b8;
    --amtv-border: rgba(148, 163, 184, 0.2);
    --amtv-border-strong: rgba(203, 213, 225, 0.3);
    --amtv-accent: #60a5fa;
    --amtv-accent-strong: #93c5fd;
    --amtv-ring: rgba(96, 165, 250, 0.34);
    --bg-body: var(--amtv-bg);
    --card-bg: var(--amtv-surface-solid);
    --text-main: var(--amtv-text);
    --text-muted: var(--amtv-muted);
    --border-color: var(--amtv-border);
}

body:has(.amtv-dashboard) {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32rem),
        linear-gradient(180deg, var(--amtv-bg), var(--amtv-bg));
}

html[data-theme="dark"] #header,
body[data-theme="dark"] #header {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: var(--amtv-border) !important;
}

html[data-theme="dark"] #header-company-info h1,
body[data-theme="dark"] #header-company-info h1,
html[data-theme="dark"] #header .user-area span,
body[data-theme="dark"] #header .user-area span {
    color: var(--amtv-text) !important;
}

.amtv-icon {
    display: block;
    height: 1.15rem;
    width: 1.15rem;
}

.amtv-theme-toggle {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    color: var(--amtv-muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    width: 34px;
}

.amtv-theme-toggle:hover,
.amtv-theme-toggle:focus {
    border-color: var(--amtv-accent);
    color: var(--amtv-accent);
    outline: none;
    transform: translateY(-1px);
}

.amtv-theme-toggle:focus-visible,
.amtv-dashboard a:focus-visible,
.amtv-dashboard button:focus-visible,
.amtv-dashboard input:focus-visible,
.amtv-dashboard select:focus-visible {
    box-shadow: 0 0 0 4px var(--amtv-ring) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

#wrapper-content.amtv-dashboard {
    margin-left: 280px !important;
    max-width: none;
    padding: 1.5rem 2rem 3rem;
}

.amtv-dashboard #header-content.amtv-dashboard-hero {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.13), transparent 24rem);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-md);
    display: flex !important;
    float: none !important;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 0 1.25rem !important;
    padding: 1.25rem !important;
    position: relative !important;
    width: 100% !important;
}

html[data-theme="dark"] .amtv-dashboard #header-content.amtv-dashboard-hero,
body[data-theme="dark"] .amtv-dashboard #header-content.amtv-dashboard-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.15), transparent 24rem);
}

.amtv-dashboard-hero__copy {
    display: grid;
    gap: 0.55rem;
    max-width: 760px;
    min-width: 0;
}

.amtv-dashboard #header-content .amtv-dashboard-hero__copy h1,
body .amtv-dashboard #header-content .amtv-dashboard-hero__copy h1.dfi-2 {
    color: var(--amtv-text) !important;
    display: block !important;
    font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
}

.amtv-dashboard #header-content .amtv-dashboard-hero__copy h1::after {
    content: none !important;
}

.amtv-dashboard-hero__copy p {
    color: var(--amtv-muted);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
}

.amtv-dashboard-hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.amtv-pill {
    align-items: center;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px;
    color: var(--amtv-accent);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 0.45rem;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.42rem 0.64rem;
    width: fit-content;
}

.amtv-pill--neutral {
    background: var(--amtv-surface-muted);
    border-color: var(--amtv-border);
    color: var(--amtv-muted);
}

.amtv-pill__icon {
    height: 0.85rem;
    width: 0.85rem;
}

.amtv-monitor-button,
.amtv-dashboard #header-content button.amtv-monitor-button {
    align-items: center;
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
    display: inline-flex !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    gap: 0.55rem;
    height: 44px !important;
    line-height: 1 !important;
    padding: 0 0.9rem !important;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.amtv-monitor-button:hover,
.amtv-dashboard #header-content button.amtv-monitor-button:hover {
    border-color: var(--amtv-accent) !important;
    color: var(--amtv-accent) !important;
    transform: translateY(-1px);
}

.amtv-status-metric,
.amtv-dashboard #header-content button.amtv-status-metric {
    align-items: center;
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
    display: inline-grid !important;
    gap: 0.1rem;
    height: 54px !important;
    justify-items: center;
    margin: 0 !important;
    min-width: 76px !important;
    padding: 0.48rem 0.75rem !important;
}

.amtv-status-metric span {
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1;
}

.amtv-status-metric small {
    color: var(--amtv-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.amtv-status-metric--online {
    border-color: rgba(22, 163, 74, 0.24) !important;
}

.amtv-status-metric--online span {
    color: var(--amtv-success);
}

.amtv-status-metric--offline {
    border-color: rgba(220, 38, 38, 0.24) !important;
}

.amtv-status-metric--offline span {
    color: var(--amtv-danger);
}

.amtv-dashboard__content,
.amtv-dashboard #content.amtv-dashboard__content {
    float: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amtv-stat-card {
    align-items: center;
    background: var(--amtv-surface);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    color: var(--amtv-text) !important;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 150px;
    padding: 1.1rem;
    text-decoration: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.amtv-stat-card:hover {
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: var(--amtv-shadow-md);
    color: var(--amtv-text) !important;
    transform: translateY(-3px);
}

.amtv-stat-card__icon {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.amtv-stat-card__icon--blue {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.amtv-stat-card__icon--green {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.amtv-stat-card__icon--violet {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.amtv-stat-card__content {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.amtv-stat-card__label {
    color: var(--amtv-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.amtv-stat-card__value {
    color: var(--amtv-text);
    font-size: 2.35rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
}

.amtv-stat-card__meta {
    color: var(--amtv-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.amtv-stat-card__arrow,
.amtv-shortcut-card__arrow {
    color: var(--amtv-subtle);
    height: 1rem;
    width: 1rem;
}

.amtv-ops-panel {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 1.2rem;
}

.amtv-ops-panel h2,
.amtv-section-heading h2,
.amtv-panel__header h2 {
    color: var(--amtv-text);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
}

.amtv-ops-panel p,
.amtv-panel__header p {
    color: var(--amtv-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0.55rem 0 0;
    max-width: 680px;
}

.amtv-primary-link {
    align-items: center;
    background: var(--amtv-accent);
    border-radius: 10px;
    color: #ffffff !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 800;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.95rem;
    text-decoration: none !important;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.amtv-primary-link:hover {
    background: var(--amtv-accent-strong);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.amtv-client-identity {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    box-shadow: var(--amtv-shadow-sm);
    display: flex;
    gap: 0.72rem;
    max-width: 320px;
    min-width: 0;
    padding: 0.45rem 0.8rem 0.45rem 0.48rem;
}

.amtv-client-identity img,
.amtv-client-identity > span {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    color: var(--amtv-accent);
    display: inline-flex;
    flex: 0 0 38px;
    font-weight: 850;
    height: 38px;
    justify-content: center;
    object-fit: contain;
    width: 38px;
}

.amtv-client-identity div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.amtv-client-identity strong,
.amtv-client-identity small {
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amtv-client-identity strong {
    color: var(--amtv-text);
    font-size: 0.9rem;
    font-weight: 850;
}

.amtv-client-identity small {
    color: var(--amtv-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.amtv-client-grid {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(270px, 0.95fr) minmax(310px, 1.25fr) minmax(260px, 1fr) minmax(240px, 0.9fr);
    margin: 0 !important;
}

.amtv-client-grid::before,
.amtv-client-grid::after {
    content: none !important;
}

.amtv-panel {
    background: var(--amtv-surface);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    color: var(--amtv-text);
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
    padding: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.amtv-panel:hover {
    border-color: var(--amtv-border-strong);
    box-shadow: var(--amtv-shadow-md);
    transform: translateY(-2px);
}

.amtv-panel__header {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.amtv-panel__header-icon {
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 10px;
    color: var(--amtv-accent);
    flex: 0 0 38px;
    height: 38px;
    padding: 0.55rem;
    width: 38px;
}

.amtv-detail-list {
    display: grid;
    gap: 0.65rem;
}

.amtv-detail-row {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 10px;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    min-height: 52px;
    padding: 0.7rem 0.8rem;
}

.amtv-detail-row span {
    color: var(--amtv-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.amtv-detail-row strong {
    color: var(--amtv-text);
    font-size: 0.92rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amtv-display-preview,
.amtv-ad-preview {
    background-color: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 10px;
    flex: 1 1 auto;
    min-height: 242px;
    overflow: hidden;
}

.amtv-display-preview iframe {
    border: 0;
    display: block;
    height: 100%;
    min-height: 242px;
    pointer-events: none !important;
    width: 100%;
}

.amtv-empty-state {
    align-items: center;
    color: var(--amtv-muted);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    justify-content: center;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
}

.amtv-empty-state svg {
    color: var(--amtv-subtle);
    height: 1.5rem;
    width: 1.5rem;
}

.amtv-empty-state strong {
    color: var(--amtv-text);
    font-size: 0.95rem;
    font-weight: 850;
}

.amtv-empty-state span {
    font-size: 0.86rem;
    line-height: 1.45;
}

.amtv-empty-state--compact {
    min-height: 170px;
}

.amtv-rich-message {
    color: var(--amtv-muted);
    flex: 1 1 auto;
    font-size: 0.92rem;
    line-height: 1.55;
    overflow: auto;
    padding-right: 0.2rem;
}

.amtv-rich-message h3 {
    color: var(--amtv-text);
    font-size: 1rem;
    font-weight: 850;
    margin: 0 0 0.7rem;
}

.amtv-rich-message p {
    margin: 0 0 0.75rem;
}

.amtv-ad-preview {
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--amtv-muted);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0;
    transition: border-color 0.18s ease, transform 0.18s ease;
    width: 100%;
}

.amtv-ad-preview:hover {
    border-color: var(--amtv-accent);
    transform: scale(1.01);
}

.amtv-ad-preview--empty {
    cursor: default;
    font-weight: 800;
}

.amtv-ad-modal {
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-lg);
    left: 50%;
    max-height: min(620px, calc(100vh - 6rem));
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    z-index: 999;
}

.amtv-ad-modal__header {
    align-items: center;
    border-bottom: 1px solid var(--amtv-border);
    display: flex;
    justify-content: space-between;
    padding: 0.95rem 1rem;
}

.amtv-ad-modal__header h2 {
    color: var(--amtv-text);
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.amtv-ad-modal__header button {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    color: var(--amtv-muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.amtv-ad-modal__body {
    color: var(--amtv-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    max-height: 500px;
    overflow: auto;
    padding: 1rem;
}

.amtv-shortcuts {
    margin-top: 1.25rem;
}

.amtv-section-heading {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.amtv-section-heading > div {
    display: grid;
    gap: 0.5rem;
}

.amtv-shortcut-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.amtv-shortcut-card {
    align-items: center;
    background: var(--amtv-surface);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    color: var(--amtv-text) !important;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 92px;
    padding: 0.85rem;
    text-decoration: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.amtv-shortcut-card:hover {
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: var(--amtv-shadow-md);
    color: var(--amtv-text) !important;
    transform: translateY(-2px);
}

.amtv-shortcut-card__icon {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.amtv-shortcut-card__icon i {
    color: inherit !important;
    font-size: 1.05rem;
}

.amtv-shortcut-card > span:not(.amtv-shortcut-card__icon) {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.amtv-shortcut-card--wide {
    display: block;
    grid-column: span 2;
}

.amtv-shortcut-card .btn,
.amtv-shortcut-card button,
.amtv-shortcut-card select {
    border-radius: 10px !important;
    min-height: 40px;
}

.amtv-shortcut-card .btn {
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
}

@media (max-width: 1280px) {
    .amtv-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amtv-shortcut-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    #wrapper-content.amtv-dashboard {
        margin-left: 0 !important;
        padding: 1rem 1rem 2rem;
    }

    .amtv-dashboard #header-content.amtv-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .amtv-dashboard-hero__actions,
    .amtv-client-identity {
        justify-content: flex-start;
        width: 100%;
    }

    .amtv-stat-grid,
    .amtv-client-grid {
        grid-template-columns: 1fr;
    }

    .amtv-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amtv-panel {
        min-height: 0;
    }

    .amtv-ops-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Dashboard-matched Ads Comms General pages */
.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.13), transparent 24rem) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    display: flex !important;
    float: none !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    margin: 0 0 1.25rem !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 1.25rem !important;
    width: 100% !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.15), transparent 24rem) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy {
    display: grid !important;
    flex: 1 1 auto;
    gap: 0.55rem;
    max-width: 760px;
    min-width: 0;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1 {
    color: var(--amtv-text) !important;
    display: block !important;
    float: none !important;
    font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1::before,
.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy p {
    color: var(--amtv-muted) !important;
    font-size: 0.98rem !important;
    font-weight: 500;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__actions {
    align-items: center !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-monitor-button,
.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-primary-link {
    align-items: center !important;
    border-radius: 10px !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    gap: 0.55rem !important;
    height: 44px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 0 0.95rem !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
    white-space: nowrap !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-monitor-button {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-monitor-button:hover {
    border-color: var(--amtv-accent) !important;
    color: var(--amtv-accent) !important;
    transform: translateY(-1px);
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-primary-link {
    background: var(--amtv-accent) !important;
    border: 1px solid var(--amtv-accent) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-primary-link:hover {
    background: var(--amtv-accent-strong) !important;
    border-color: var(--amtv-accent-strong) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.amtv-admin-app #wrapper-content.amtv-page-comms #content.amtv-comms-page {
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-layout {
    align-items: flex-start;
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-layout::before,
.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-layout::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-layout > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
    margin: 0 !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card:hover {
    transform: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--amtv-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card-header h2 {
    color: var(--amtv-text) !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    margin: 0.55rem 0 0 !important;
    text-align: left !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-action-row {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
    padding-top: 0.05rem;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-action-row .btn {
    margin: 0 !important;
    min-height: 36px;
    min-width: 76px;
    white-space: nowrap;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .form-group {
    margin-bottom: 1rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .form-group label,
.amtv-admin-app #wrapper-content.amtv-page-comms form > .row label,
.amtv-admin-app #wrapper-content.amtv-page-comms .control-label {
    color: var(--amtv-text) !important;
    font-size: 0.83rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .bootstrap-tagsinput {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 42px;
    padding: 0.4rem 0.55rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .note-editor {
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .note-toolbar {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .note-editable {
    background: var(--amtv-surface-solid) !important;
    color: var(--amtv-text) !important;
    min-height: 250px;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-image-preview,
.amtv-admin-app #wrapper-content.amtv-page-comms form .col-md-3 > div[style*="border: 1px solid"],
.amtv-admin-app #wrapper-content.amtv-page-comms form .col-md-5 > div[style*="border: 1px solid"] {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
    border-radius: 12px !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-history-card {
    position: sticky;
    top: 76px;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-history-list {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    gap: 0.75rem;
    max-width: none !important;
    padding: 0.85rem !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-history-item,
.amtv-admin-app #wrapper-content.amtv-page-comms .dashboard-icon-block.noticeboard,
.amtv-admin-app #wrapper-content.amtv-page-comms .dashboard-icon-block.ads {
    background-color: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    cursor: pointer;
    flex: 0 0 auto;
    height: 250px !important;
    margin: 0 !important;
    overflow: auto;
    padding: 1rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .dashboard-icon-block.ads,
.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-ad-item {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-history-item:hover,
.amtv-admin-app #wrapper-content.amtv-page-comms .dashboard-icon-block.noticeboard:hover,
.amtv-admin-app #wrapper-content.amtv-page-comms .dashboard-icon-block.ads:hover {
    border-color: rgba(37, 99, 235, 0.32) !important;
    box-shadow: var(--amtv-shadow-md) !important;
    transform: translateY(-2px);
}

.amtv-admin-app #wrapper-content.amtv-page-comms .modal-content {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-lg) !important;
    overflow: hidden;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .modal-header,
.amtv-admin-app #wrapper-content.amtv-page-comms .modal-footer {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-comms .modal-dialog {
    max-width: calc(100vw - 2rem);
}

.amtv-admin-app #wrapper-content.amtv-page-comms iframe {
    max-width: 100%;
}

@media (max-width: 1200px) {
    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-layout {
        grid-template-columns: 1fr;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-history-card {
        position: static;
    }
}

@media (max-width: 991px) {
    .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__actions {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card-header {
        flex-direction: column;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-action-row {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1 {
        font-size: 1.7rem !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-monitor-button,
    .amtv-admin-app #wrapper-content.amtv-page-comms #header-content.amtv-dashboard-hero .amtv-primary-link {
        flex: 1 1 100%;
        width: 100%;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-card {
        padding: 0.9rem !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-comms .amtv-comms-action-row .btn {
        flex: 1 1 calc(50% - 0.55rem);
    }

}

@media (max-width: 560px) {
    .amtv-dashboard #header-content .amtv-dashboard-hero__copy h1 {
        font-size: 1.7rem !important;
    }

    .amtv-dashboard-hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .amtv-dashboard-hero__actions .amtv-monitor-button {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .amtv-status-metric {
        width: 100%;
    }

    .amtv-stat-card,
    .amtv-shortcut-card {
        min-height: 88px;
    }

    .amtv-stat-card__value {
        font-size: 1.85rem;
    }

    .amtv-detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .amtv-detail-row strong {
        text-align: left;
        white-space: normal;
    }

    .amtv-shortcut-grid {
        grid-template-columns: 1fr;
    }

    .amtv-shortcut-card--wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amtv-dashboard *,
    .amtv-dashboard *::before,
    .amtv-dashboard *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.5;
}

a {
    color: var(--primary-color);
}

a:hover,
a:focus {
    color: var(--primary-hover);
    text-decoration: none;
}

/* Sidebar Modernization */
#sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    width: 260px !important;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-active-bg) transparent;
}

#sidebar::-webkit-scrollbar {
    width: 4px;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: var(--sidebar-active-bg);
    border-radius: 10px;
}

.menu-sidebar {
    padding: 2.5rem 0;
}

.menu-sidebar > li:first-child {
    margin-top: 2rem !important;
}

.menu-sidebar li {
    border-bottom: none !important;
    margin: 0.25rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.menu-sidebar > li > a {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem !important;
    color: var(--sidebar-text) !important;
    border-radius: 0.75rem;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-sidebar > li > a:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text) !important;
    transform: translateX(4px);
}

.menu-sidebar > li.active > a {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.menu-sidebar li.active > a i {
    color: #ffffff !important;
}

.menu-sidebar li a div {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-weight: 500;
    line-height: 1.25;
}

.menu-sidebar li i {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    padding: 0 !important;
    font-size: 1.1rem !important;
    color: var(--sidebar-text) !important;
    transition: color 0.2s ease;
    margin: 0 !important;
}

.submenu {
    background-color: rgba(0,0,0,0.1);
    margin: 0.25rem 0;
    border-radius: 0.5rem;
    padding: 0.35rem 0 !important;
}

.submenu li {
    margin: 0.1rem 0.5rem !important;
}

.submenu li a {
    display: flex !important;
    align-items: center;
    gap: 1.35rem;
    padding: 0.675rem 1rem 0.675rem 1.15rem !important;
    color: var(--sidebar-text) !important;
    border-radius: 0.5rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    min-height: 40px;
}

.submenu li a i {
    flex: 0 0 22px;
    margin: 0 0.35rem 0 0 !important;
    width: 22px;
    text-align: center;
}

.submenu li a div {
    overflow-wrap: anywhere;
}

.submenu .submenu {
    background-color: rgba(15, 23, 42, 0.22);
    margin-left: 0.65rem !important;
}

.submenu .submenu li a {
    gap: 1.25rem;
    padding-left: 1.4rem !important;
}

.submenu li.active > a {
    color: var(--primary-color) !important;
    background-color: rgba(37, 99, 235, 0.1) !important;
    font-weight: 600;
}

.submenu li.active > a i {
    color: var(--primary-color) !important;
}

/* Header Modernization */
#header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    min-height: 54px !important;
    padding: 0 1.5rem !important;
}

#header > .row {
    flex-wrap: nowrap !important;
    min-height: 54px !important;
}

#header-company-info img {
    height: 34px !important;
    margin-right: 0.75rem !important;
}

#header-company-info h1 {
    font-size: 1rem !important;
}

#header-company-info h2 {
    font-size: 0.7rem !important;
}

#header-company-info,
#header-user-area {
    min-width: 0;
}

#header-user-area {
    padding-right: 1.5rem !important;
}

#header .user-area {
    flex-wrap: nowrap !important;
    gap: 0.85rem;
    min-width: 0;
}

#header .user-area > li {
    margin-bottom: 0 !important;
    white-space: nowrap;
}

/* Page Title / Header Content Area */
#header-content {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 2.5rem 0 !important;
    margin-bottom: 1.5rem;
    z-index: 5;
    float: none !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

#header-content h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-main);
    margin: 0 !important;
}

body #header-content h1.dfi-2,
body #header-content h1 {
    display: inline-flex !important;
    align-items: center;
}

/* Header Content Action Buttons */
#header-content ul {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    list-style: none !important;
}

#header-content ul.text-right,
#header-content ul[class*="text-right"] {
    justify-content: flex-end !important;
    text-align: right !important;
}

#header-content > h1[class*="col-"],
#header-content > ul[class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

#header-content > h1[class*="col-"] {
    flex: 0 1 auto;
}

#header-content > ul[class*="col-"] {
    flex: 1 1 auto;
}

#header-content > .row {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

#header-content > .row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#header-content > .row > [class*="col-"]:first-child {
    flex: 0 1 auto;
}

#header-content > .row > [class*="col-"]:last-child {
    flex: 1 1 auto;
}

#header-content ul li {
    align-items: center;
    display: flex !important;
    margin: 0 !important;
}

#header-content a,
#header-content button:not(.close),
.btn-modern {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem !important;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-sm) !important;
    height: 44px !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
}

#header-content .btn-template-submit {
    height: 44px !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 44px !important;
}

#header-content a i, #header-content button i {
    margin-right: 0.75rem !important;
    font-size: 1.125rem !important;
}

#header-content a:hover, #header-content button:not(.close):hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
}

#header-content a:active, #header-content button:not(.close):active {
    transform: translateY(0);
}

/* Secondary/Ghost Buttons (often used for Export/Import/Back) */
#header-content a[id*="export"],
#header-content a[id*="import"],
#header-content a[id*="back"],
.btn-secondary-modern {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

#header-content a[id*="export"]:hover,
#header-content a[id*="import"]:hover,
#header-content a[id*="back"]:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Modern Button System */
.btn-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-sm) !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2) !important;
}

.btn-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-sm) !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-danger:hover {
    background-color: #dc2626 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2) !important;
}

/* Disabled/Unenable Button State */
.unenable-button {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
}

/* Exit Session Button */
.btn-exit-session {
    align-items: center;
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(154, 52, 18, 0.08) !important;
    color: #9a3412 !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    gap: 0.55rem;
    height: 32px !important;
    justify-content: center;
    letter-spacing: 0 !important;
    line-height: 1;
    max-width: 230px;
    overflow: hidden;
    padding: 0.45rem 0.75rem !important;
    text-decoration: none !important;
    text-overflow: ellipsis;
    text-transform: none;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}

.btn-exit-session i {
    color: #ea580c !important;
    font-size: 0.85rem !important;
    margin-right: 0 !important;
}

.btn-exit-session:hover {
    background: #ffedd5 !important;
    border-color: #fdba74 !important;
    color: #7c2d12 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(154, 52, 18, 0.14) !important;
}

#content {
    margin-top: 0 !important;
    float: none !important;
    width: 100%;
}

#content.tempalte-page-content {
    float: left !important;
    width: 75% !important;
}

.wrap-client-of-template {
    float: left !important;
    width: 25% !important;
}

.tempalte-page-content .dashboard-icon-block {
    height: 280px !important;
}

.tempalte-page-content .dashboard-icon-block > div:nth-child(2) {
    min-height: 0;
}

.tempalte-page-content .dashboard-icon-block > div:nth-child(2) > div {
    width: 100px !important;
    height: 100px !important;
    flex: 0 0 100px !important;
}

.tempalte-page-content [ng-repeat="section in template.sections"] > div {
    box-sizing: border-box;
    transform: none !important;
}

/* User Area Containtment */
#header-user-area {
    padding-right: 1.5rem !important;
}

.user-area {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 0.85rem;
    margin: 0 !important;
}

.user-area > li {
    align-items: center;
    display: inline-flex !important;
    line-height: 1 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Monitor Status Badges */
.monitor_status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 36px;
    padding: 0 12px !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-left: 10px;
    box-shadow: var(--shadow-sm);
}

/* Content Area */
#wrapper-content {
    margin-left: 280px !important;
    padding: 0 2rem;
    position: relative;
}

#wrapper-content-o,
#wrapper-content.tempalte-page-content {
    padding: 0 2rem;
}

#wrapper-content > .row,
#content > .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

/* Cards / Dashboard Widgets */
.dashboard-icon-block {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem !important;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.dashboard-icon-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

#content .dashboard-icon-block[style*="height: auto"],
#content .dashboard-icon-block.information_detail,
#content .dashboard-icon-block.ads,
#content .dashboard-icon-block.noticeboard {
    height: auto;
}

.dashboard-icon-block.active-card {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.dashboard-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #eff6ff !important;
    color: var(--primary-color) !important;
    border-radius: 1.25rem !important;
}

.dashboard-icon i {
    color: var(--primary-color) !important;
    font-size: 2.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.dashboard-icon-block h3 {
    border-bottom: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.dashboard-icon-block h4 {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-top: 0.5rem !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Client Dashboard */
#wrapper-content:has(#wrap_cb) {
    padding-bottom: 2rem;
}

#wrapper-content:has(#wrap_cb) #header-content {
    align-items: flex-start;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem !important;
}

#wrapper-content:has(#wrap_cb) #header-content h1 {
    align-items: flex-start;
    color: var(--text-main) !important;
    display: flex !important;
    flex-direction: column;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

#wrapper-content:has(#wrap_cb) #header-content h1::after {
    color: var(--text-muted);
    content: "Client workspace overview, display preview, notices, and shortcuts.";
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.35rem;
}

#wrapper-content:has(#wrap_cb) #content {
    padding: 0 !important;
}

#wrap_cb {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(320px, 1.15fr) repeat(3, minmax(220px, 1fr));
    margin: 0 !important;
}

#wrap_cb::before,
#wrap_cb::after,
#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb)::before,
#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb)::after {
    content: none !important;
    display: none !important;
}

#wrap_cb > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrap_cb .dashboard-icon-block {
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 1rem !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    height: auto !important;
    max-height: none !important;
    min-height: 330px;
    overflow: hidden;
    padding: 1.25rem !important;
}

#wrap_cb .dashboard-icon-block.information_detail {
    max-height: none !important;
}

#wrap_cb .dashboard-icon-block:hover {
    border-color: rgba(37, 99, 235, 0.22);
}

#wrap_cb .dashboard-icon-block h3 {
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.25;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

#wrap_cb .dashboard-icon-block.text-center h3 {
    text-align: center !important;
}

#wrap_cb .overview-item {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.6rem !important;
    padding: 0.6rem 0.75rem;
}

#wrap_cb .overview-item:first-of-type {
    margin-top: 0 !important;
}

#wrap_cb .overview-item label {
    color: var(--text-muted) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.04em !important;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

#wrap_cb .overview-item p {
    color: var(--text-main);
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 700 !important;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

#wrap_cb #client_displays {
    background: #e2e8f0;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.75rem;
}

#wrap_cb #client_displays + *,
#wrap_cb #client_displays {
    display: block;
}

#wrap_cb .information_detail > div[style*="height: 200px"],
#wrap_cb .information_detail > div[style*="No Displays"] {
    border: 1px solid var(--border-color);
    border-radius: 0.875rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

#wrap_cb .information_detail:not(.text-center) {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

#wrap_cb .information_detail:not(.text-center) p,
#wrap_cb .information_detail:not(.text-center) div {
    color: var(--text-main);
    line-height: 1.55;
}

#list_ads {
    align-items: flex-end;
    background-color: #f1f5f9 !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: relative;
}

#list_ads::after {
    background: rgba(15, 23, 42, 0.72);
    border-radius: 999px;
    bottom: 1rem;
    color: #ffffff;
    content: "View announcement";
    font-size: 0.75rem;
    font-weight: 800;
    left: 50%;
    opacity: 0;
    padding: 0.45rem 0.75rem;
    position: absolute;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

#list_ads:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 1.5rem 0 0 !important;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) > .col-xs-12 {
    grid-column: 1 / -1;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) h3 {
    color: var(--text-main) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin: 0.25rem 0 0.25rem !important;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) a {
    display: block;
    height: 100%;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) .dashboard-icon-block {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) .dashboard-icon {
    height: 58px !important;
    margin-bottom: 0.75rem !important;
    width: 58px !important;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) .dashboard-icon i {
    font-size: 1.65rem !important;
}

#wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) .dashboard-icon-block p {
    color: var(--text-main) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    line-height: 1.25;
    margin: 0.4rem 0 0 !important;
}

#wrapper-content:has(#wrap_cb) #ad_wrap {
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    max-width: calc(100vw - 2rem);
    padding: 1.25rem !important;
}

#wrapper-content:has(#wrap_cb) #ad_close {
    align-items: center;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: #dc2626 !important;
    display: inline-flex !important;
    float: right;
    height: 34px;
    justify-content: center !important;
    width: 34px !important;
}

#wrapper-content:has(#wrap_cb) #ad_message {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.55;
    padding-right: 0.25rem;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard {
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.15), transparent 24rem) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-panel,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-stat-card,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ops-panel,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-shortcut-card,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-panel,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-stat-card,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ops-panel,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-shortcut-card,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal {
    background: var(--amtv-surface) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-detail-row,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-display-preview,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-preview,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-panel__header-icon,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity img,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity > span,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-detail-row,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-display-preview,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-preview,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-panel__header-icon,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity img,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-client-identity > span {
    background-color: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard #list_ads,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard #list_ads,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard #client_displays,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard #client_displays {
    background-color: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-muted) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard #ad_message,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message,
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard #ad_message,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body {
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="background"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="background"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="background"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="background"] {
    background-color: transparent !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color: white"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color:#fff"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color: #fff"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color: white"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color:#fff"],
html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color: #fff"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color: white"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color:#fff"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-rich-message [style*="color: #fff"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color: white"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color:#fff"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-ad-modal__body [style*="color: #fff"] {
    color: var(--amtv-text) !important;
}

html[data-theme="dark"] .amtv-dashboard-design-switch,
body[data-theme="dark"] .amtv-dashboard-design-switch {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
}

html[data-theme="dark"] .amtv-dashboard-design-switch a[aria-pressed="false"],
body[data-theme="dark"] .amtv-dashboard-design-switch a[aria-pressed="false"] {
    background: transparent !important;
    color: var(--amtv-muted) !important;
}

html[data-theme="dark"] .amtv-dashboard-design-switch a[aria-pressed="true"],
body[data-theme="dark"] .amtv-dashboard-design-switch a[aria-pressed="true"] {
    background: var(--amtv-accent) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-dashboard .amtv-shortcut-card__icon[style*="#eff6ff"],
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-dashboard .amtv-shortcut-card__icon[style*="#eff6ff"] {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: var(--amtv-accent) !important;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Form Controls */
input[type="text"], input[type="password"], input[type="email"], select, textarea, .form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    background-color: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
}

input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    background-color: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

label {
    color: var(--text-main);
}

.display-detail,
.display-detail-custom-page,
.client-detail {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    padding: 1.5rem !important;
}

.display-detail label,
.display-detail-custom-page label {
    color: var(--text-main);
    font-weight: 700;
}

.display-detail .row,
.display-detail-custom-page .row {
    margin-bottom: 0.85rem;
}

.display-detail button,
.display-detail-custom-page button,
.btn-template-submit,
.submit-button {
    align-items: center;
    background-color: var(--primary-color) !important;
    border: 1px solid transparent !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-sm);
    color: #ffffff !important;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 40px;
    padding: 0.625rem 1rem !important;
}

.display-detail button:hover,
.display-detail-custom-page button:hover,
.btn-template-submit:hover,
.submit-button:hover {
    background-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nav-tabs > li {
    margin-bottom: 0 !important;
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
    border: 1px solid transparent !important;
    border-radius: 0.625rem 0.625rem 0 0 !important;
    color: var(--text-muted) !important;
    font-weight: 700;
    padding: 0.7rem 1rem !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active {
    background: #ffffff !important;
    border-color: var(--border-color) var(--border-color) #ffffff !important;
    color: var(--primary-color) !important;
}

.alert {
    border: 1px solid transparent;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background-color: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Tables */
.table {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.table thead th {
    background-color: #f8fafc;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem !important;
}

.table tbody td {
    padding: 1rem !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--border-color) !important;
}

.table tbody th {
    padding: 1rem !important;
    vertical-align: middle !important;
}

.table-responsive {
    border: 0;
}

/* Client Dashboard Pages */
#wrapper-content:has(.wrap-content-block) #header-content,
#wrapper-content:has(.display-detail) #header-content,
#wrapper-content:has(.wrap-display-detail) #header-content,
#wrapper-content:has(.survey-container) #header-content,
#wrapper-content:has(.news-actions) #header-content {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex !important;
    float: none !important;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.25rem !important;
    width: 100% !important;
}

#wrapper-content:has(.wrap-content-block) #header-content::before,
#wrapper-content:has(.wrap-content-block) #header-content::after,
#wrapper-content:has(.display-detail) #header-content::before,
#wrapper-content:has(.display-detail) #header-content::after {
    content: none !important;
    display: none !important;
}

#wrapper-content:has(.wrap-content-block) #header-content .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
}

#wrapper-content:has(.wrap-content-block) #header-content h1,
#wrapper-content:has(.display-detail) #header-content h1,
#wrapper-content:has(.wrap-display-detail) #header-content h1,
#wrapper-content:has(.survey-container) #header-content h1,
#wrapper-content:has(.news-actions) #header-content h1 {
    color: var(--text-main) !important;
    float: none !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

#wrapper-content:has(.wrap-content-block) #header-content ul,
#wrapper-content:has(.display-detail) #header-content ul,
#wrapper-content:has(.wrap-display-detail) #header-content ul,
#wrapper-content:has(.survey-container) #header-content ul,
#wrapper-content:has(.news-actions) #header-content ul {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap;
    float: none !important;
    gap: 0.55rem;
    justify-content: flex-end;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

#wrapper-content:has(.wrap-content-block) #header-content li,
#wrapper-content:has(.display-detail) #header-content li,
#wrapper-content:has(.wrap-display-detail) #header-content li {
    display: inline-flex;
    margin: 0 !important;
}

#wrapper-content:has(.wrap-content-block) #header-content ul a,
#wrapper-content:has(.display-detail) #header-content ul a,
#wrapper-content:has(.wrap-display-detail) #header-content ul a,
#wrapper-content:has(.survey-container) #header-content ul a,
#wrapper-content:has(.news-actions) #header-content ul a {
    align-items: center;
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-sm);
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    gap: 0.5rem;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0.6rem 0.9rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(.wrap-content-block) #header-content ul a:hover,
#wrapper-content:has(.display-detail) #header-content ul a:hover,
#wrapper-content:has(.wrap-display-detail) #header-content ul a:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

#wrapper-content:has(.wrap-content-block) #header-content ul a i,
#wrapper-content:has(.display-detail) #header-content ul a i,
#wrapper-content:has(.wrap-display-detail) #header-content ul a i {
    margin: 0 !important;
}

#wrapper-content:has(.wrap-content-block) #content,
#wrapper-content:has(.display-detail) #content,
#wrapper-content:has(.wrap-display-detail) #content,
#wrapper-content:has(.survey-container) #content,
#wrapper-content:has(.news-actions) #content {
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(.wrap-content-block) .login-as-alert {
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(.wrap-content-block) .wrap-content-block {
    background: transparent;
    display: flow-root;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

#wrapper-content:has(.wrap-display-block) .wrap-content-block,
#wrapper-content:has(.wrap-content-block > .wrap-slideshow-block) .wrap-content-block,
#wrapper-content:has(.wrap-user-management-block) .col-none-padding,
#wrapper-content:has(.wrap-slideshow-block) #content.slideshow-page-content,
#wrapper-content:has(.wrap-slideshow-block) .slideshow-page-content {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}

#wrapper-content:has(.wrap-display-block) .wrap-content-block::before,
#wrapper-content:has(.wrap-display-block) .wrap-content-block::after,
#wrapper-content:has(.wrap-content-block > .wrap-slideshow-block) .wrap-content-block::before,
#wrapper-content:has(.wrap-content-block > .wrap-slideshow-block) .wrap-content-block::after,
#wrapper-content:has(.wrap-user-management-block) .col-none-padding::before,
#wrapper-content:has(.wrap-user-management-block) .col-none-padding::after,
#wrapper-content:has(.wrap-slideshow-block) #content.slideshow-page-content::before,
#wrapper-content:has(.wrap-slideshow-block) #content.slideshow-page-content::after,
#wrapper-content:has(.wrap-slideshow-block) .slideshow-page-content::before,
#wrapper-content:has(.wrap-slideshow-block) .slideshow-page-content::after {
    content: none !important;
    display: none !important;
}

#wrapper-content:has(.wrap-display-block) .wrap-display-block,
#wrapper-content:has(.wrap-slideshow-block) .wrap-slideshow-block,
#wrapper-content:has(.wrap-user-management-block) .wrap-user-management-block {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    width: 100% !important;
}

#wrapper-content:has(.wrap-display-block) .display-block,
#wrapper-content:has(.wrap-slideshow-block) .display-block,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block,
#wrapper-content:has(.wrap-slideshow-block) .wrap-slideshow-block > .client-icon-block {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    height: 100%;
    min-height: 250px;
    overflow: hidden;
    padding: 1.1rem !important;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(.wrap-display-block) .display-block:hover,
#wrapper-content:has(.wrap-slideshow-block) .display-block:hover,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block:hover,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block:hover {
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

#wrapper-content:has(.wrap-display-block) .display-feature,
#wrapper-content:has(.wrap-slideshow-block) .slideshow-feature,
#wrapper-content:has(.wrap-slideshow-block) .client-logo-block,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block > div:first-child,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block .display-feature {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    display: flex;
    justify-content: center;
    margin-bottom: 0.9rem;
    min-height: 136px;
    overflow: hidden;
}

#wrapper-content:has(.wrap-display-block) .display-feature img,
#wrapper-content:has(.wrap-slideshow-block) .slideshow-feature img,
#wrapper-content:has(.wrap-slideshow-block) .client-logo-block img,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block img,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block img {
    max-height: 96px;
    max-width: 80%;
    object-fit: contain;
}

#wrapper-content:has(.wrap-display-block) .display-block h1,
#wrapper-content:has(.wrap-slideshow-block) .display-block h1,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block h3,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block h4 {
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.3;
    margin: 0.55rem 0 !important;
    padding: 0 !important;
}

#wrapper-content:has(.wrap-display-block) .display-block h1 a,
#wrapper-content:has(.wrap-slideshow-block) .display-block h1 a,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block h3 a {
    color: var(--text-main) !important;
    text-decoration: none !important;
}

#wrapper-content:has(.wrap-display-block) .display-block h3,
#wrapper-content:has(.wrap-slideshow-block) .client-icon-block h4,
#wrapper-content:has(.wrap-user-management-block) .client-icon-block h4 {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    margin: 0.45rem 0 0 !important;
}

#wrapper-content:has(.wrap-display-block) .display-block .table {
    border-radius: 0.625rem;
    box-shadow: none;
    font-size: 0.8rem;
    margin: 0.45rem 0 0;
}

#wrapper-content:has(.wrap-display-block) .display-block .table td {
    padding: 0.5rem 0.6rem !important;
}

#wrapper-content:has(.wrap-display-block) .display-group-feature {
    background: #eff6ff;
    color: var(--primary-color);
    text-align: center;
    width: 42px;
}

.wrap-action-for-template {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 5;
}

.wrap-action-for-template > li > i {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.action-for-template-lv2 {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    list-style: none;
    min-width: 150px;
    overflow: hidden;
    padding: 0.35rem !important;
    position: absolute;
    right: 0;
    top: 38px;
}

.action-for-template-lv2 a {
    align-items: center;
    border-radius: 0.5rem;
    color: var(--text-main) !important;
    display: flex !important;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem !important;
    text-decoration: none !important;
}

.action-for-template-lv2 a:hover {
    background: #eff6ff;
    color: var(--primary-color) !important;
}

.action-for-template-lv2 a.delete_color,
.action-for-template-lv2 .delete_color {
    color: #dc2626 !important;
}

#wrapper-content:has(.wrap-page-of-slideshow) .wrap-page-of-slideshow {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 1rem !important;
}

#wrapper-content:has(.wrap-page-of-slideshow) .page-of-slideshow-block {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem !important;
}

#wrapper-content:has(.display-detail) .wrap-display-detail {
    float: none !important;
    padding: 0 0.75rem 1rem 0 !important;
}

#wrapper-content:has(.display-detail) .display-detail {
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

#wrapper-content:has(.display-detail) .display-detail .row::before,
#wrapper-content:has(.display-detail) .display-detail .row::after {
    content: none !important;
    display: none !important;
}

#wrapper-content:has(.survey-container) .survey-container,
#wrapper-content:has(.news-actions) .wrap-content-block,
#wrapper-content:has(.survey-actions) .wrap-content-block {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    padding: 1rem !important;
}

.survey-actions,
.news-actions {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.survey-actions td,
.news-actions td {
    border: 0 !important;
    padding: 0.2rem !important;
}

.survey-actions a,
.survey-actions i,
.news-actions a,
.news-actions button {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-main) !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    min-width: 32px;
    padding: 0 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.survey-actions a:hover,
.survey-actions i:hover,
.news-actions a:hover,
.news-actions button:hover {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.28);
    color: var(--primary-color) !important;
}

#wrapper-content:has(.news-actions) td img {
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    height: 84px !important;
    object-fit: cover;
    width: 140px !important;
}

/* Digital Posters */
#wrapper-content:has(a[href$="events/add"]) {
    margin-top: 1.25rem;
}

#wrapper-content:has(a[href$="events/add"]) .slideshow-page-content {
    align-items: stretch;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
}

#wrapper-content:has(a[href$="events/add"]) .wrap-slideshow-block {
    min-width: 0;
}

#wrapper-content:has(a[href$="events/add"]) .client-icon-block {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-height: 320px !important;
    padding: 1.35rem !important;
    text-align: center !important;
}

#wrapper-content:has(a[href$="events/add"]) .client-icon-block > input.client-id {
    display: none;
}

#wrapper-content:has(a[href$="events/add"]) .client-logo-block {
    align-items: center;
    box-sizing: border-box;
    display: grid !important;
    height: 190px;
    justify-content: center;
    line-height: 0;
    margin: 0;
    min-height: 190px;
    padding: 0 !important;
    place-items: center;
    width: 100%;
}

#wrapper-content:has(a[href$="events/add"]) .client-logo-block img {
    display: block;
    height: auto !important;
    margin: auto !important;
    max-height: 155px;
    max-width: 80%;
    object-fit: contain;
    width: auto !important;
}

#wrapper-content:has(a[href$="events/add"]) .client-icon-block h3 {
    align-self: center;
    display: block;
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    min-height: 0;
    overflow: visible;
    padding: 0 !important;
    text-align: center !important;
    width: 100%;
}

#wrapper-content:has(a[href$="events/add"]) .client-icon-block h3 a {
    display: inline-block;
    line-height: inherit;
    max-width: 100%;
    overflow-wrap: anywhere;
}

#wrapper-content:has(a[href$="events/add"]) .client-icon-block h4 {
    align-self: start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8 !important;
    display: inline-flex;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    justify-content: center;
    margin: 0 auto !important;
    padding: 0.35rem 0.65rem !important;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .wrap-content-block {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .display-block {
    min-height: 265px;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .display-feature {
    min-height: 150px;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .display-feature img {
    max-height: 104px;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .display-block h1 {
    font-size: 1rem !important;
    margin-top: 0.75rem !important;
}

#wrapper-content:has(a[href$="dp-displays/add"]) .display-block h3 {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem !important;
    justify-content: center;
    margin-top: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #content {
    align-items: flex-start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 320px;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-display-detail {
    padding: 0 !important;
    width: auto !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-display-detail:first-child {
    grid-column: 1;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-display-detail:last-child {
    grid-column: 2;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row {
    align-items: end;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr;
    margin: 0 !important;
    padding: 0.9rem !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(1),
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(2),
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(3),
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(4),
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(5),
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(6) {
    grid-column: 1 / -1;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0 !important;
    text-transform: uppercase;
    width: auto !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail input,
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail select,
#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail textarea {
    margin: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail .row > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_status_wrap span,
#wrapper-content:has(a[href*="dp-displays/delete/"]) #last_connected,
#wrapper-content:has(a[href*="dp-displays/delete/"]) #last_ip {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.4rem 0.65rem;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_poster_history,
#wrapper-content:has(a[href*="dp-displays/delete/"]) .link-as-button,
#wrapper-content:has(a[href*="dp-displays/delete/"]) #remove-event {
    align-items: center;
    border-radius: 0.625rem;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 800;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.7rem !important;
    text-decoration: none !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #display_poster_history,
#wrapper-content:has(a[href*="dp-displays/delete/"]) .link-as-button {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8 !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) #remove-event {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626 !important;
    cursor: pointer;
    margin-left: 0.5rem;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-assign-slideshow,
#wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-preview-slideshow {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .assign-slideshow-title {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .assign-slideshow-title h3 {
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper-content:has(a[href*="dp-displays/delete/"]) .assign-slideshow-content {
    max-height: 420px;
    overflow: auto;
    padding: 0.9rem;
}

/* Digital poster display edit */
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) {
    margin-top: 1rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content {
    align-items: center;
    border-radius: 0.875rem;
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content h1 {
    display: flex !important;
    flex-direction: column;
    font-size: 1.35rem !important;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content h1::after {
    color: var(--text-muted);
    content: "Manage display details, connectivity, access restrictions, and the assigned event.";
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content ul {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content li {
    display: inline-flex;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content a,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content button {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 0.625rem !important;
    box-shadow: none;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    gap: 0.5rem;
    height: 38px;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 86px;
    padding: 0 0.85rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #refresh_btn {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #refresh_btn:hover {
    background: #0e7490 !important;
    border-color: #0e7490 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content a[href$="dp-displays"] {
    background: #64748b !important;
    border-color: #64748b !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content a[href$="dp-displays"]:hover {
    background: #475569 !important;
    border-color: #475569 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content .btn-template-submit {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content .btn-template-submit:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content .delete_btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content .delete_btn:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content a:hover,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content button:hover {
    transform: translateY(-1px);
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #content {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) .wrap-display-detail {
    float: none !important;
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) .wrap-display-detail:last-child {
    display: contents;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail {
    background: #ffffff !important;
    border-radius: 0.875rem;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 1rem !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
    margin: 0 !important;
    min-height: 58px;
    padding: 0.9rem !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(1),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(2),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(3),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(4),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(5),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(6),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(8) {
    grid-column: 1 / -1;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(2),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(3),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(4),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(6),
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(8) {
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr) minmax(0, 1fr);
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    width: auto !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail input,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail select,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail textarea,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail .bootstrap-tagsinput {
    margin: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail .row > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(2) > div > .row {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 !important;
    padding: 0.65rem !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_status_wrap,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(3) > div {
    margin: 0 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_status_wrap span,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #last_connected,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #last_ip {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-main);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.4rem 0.7rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_poster_history,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) .link-as-button,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail button,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #remove-event {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 0.625rem;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.75rem !important;
    text-decoration: none !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail button,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) .link-as-button {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_poster_history {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #3730a3 !important;
    margin-top: 0.5rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #remove-event {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
    cursor: pointer;
    margin-left: 0.5rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-content,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .modal-content {
    border: 0;
    border-radius: 0.875rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-header,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .modal-header {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-title,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .modal-title {
    color: var(--text-main);
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .close,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .close {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted) !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    opacity: 1;
    width: 32px;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
    padding: 1rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .wrap-assign-slideshow-block,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .wrap-preview-slideshow-block {
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .wrap-assign-slideshow,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .wrap-preview-slideshow {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: none;
    overflow: hidden;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .assign-slideshow-content label {
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    display: flex;
    font-weight: 800;
    gap: 0.5rem;
    margin: 0 0 0.45rem !important;
    padding: 0.55rem 0.65rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .assign-slideshow-content input[type="radio"] {
    accent-color: #2563eb;
    margin: 0 !important;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-footer,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .modal-footer {
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
}

#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .btn-assign-slideshow,
#wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #list_dp_history .btn {
    background: #2563eb !important;
    border: 1px solid #2563eb !important;
    border-radius: 0.625rem;
    color: #ffffff !important;
    font-weight: 800;
    min-height: 38px;
    padding: 0.55rem 0.95rem !important;
}

@media (max-width: 991px) {
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content,
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail,
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row,
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(2),
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(3),
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(4),
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(6),
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #display_detail > .row:nth-child(8),
    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #assignEvent .modal-body {
        grid-template-columns: 1fr;
    }

    #wrapper-content:has(form[name="displayDetailForm"] a[href*="dp-displays/delete/"]) #header-content ul {
        justify-content: flex-start;
    }
}

#wrapper-content:has(#table_ai_history) #header-content {
    align-items: flex-start;
}

#wrapper-content:has(#table_ai_history) #header-content h1 {
    display: flex !important;
    flex-direction: column;
}

#wrapper-content:has(#table_ai_history) #header-content h1::after {
    color: var(--text-muted);
    content: "Review generated event intelligence reports and export PDFs.";
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.35rem;
}

#wrapper-content:has(#table_ai_history) .slideshow-page-content {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    padding: 1rem !important;
}

#table_ai_history {
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 0;
}

#table_ai_history thead th {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.95rem 1rem !important;
    text-transform: uppercase;
}

#table_ai_history tbody td {
    color: var(--text-main);
    padding: 0.85rem 1rem !important;
}

#table_ai_history .label {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.35rem 0.6rem;
}

#table_ai_history .label-success {
    background: #dcfce7;
    color: #166534;
}

#table_ai_history .label-default {
    background: #e5e7eb;
    color: #374151;
}

#table_ai_history .btn {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 0.55rem !important;
    box-shadow: none !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    gap: 0.4rem;
    height: 30px !important;
    justify-content: center;
    margin: 0.15rem;
    padding: 0.35rem 0.6rem !important;
}

#table_ai_history .btn-primary {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

#table_ai_history .btn-info {
    background: #ecfeff !important;
    border-color: #a5f3fc !important;
    color: #0e7490 !important;
}

#table_ai_history .btn-danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

#wrapper-content:has(iframe[src*="filemanager"]) {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    margin-left: 280px !important;
    margin-top: 0 !important;
    padding: 1rem !important;
}

#wrapper-content:has(iframe[src*="filemanager"]) iframe {
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    height: calc(100vh - 170px);
    min-height: 550px;
}

.modal-content {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.modal-title {
    color: var(--text-main);
    font-weight: 700;
}

/* Summernote editor refresh */
.note-editor.note-frame,
.note-editor.note-airframe {
    background: #ffffff;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.875rem !important;
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    overflow: hidden;
}

.note-editor.note-frame:focus-within,
.note-editor.note-airframe:focus-within {
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), var(--shadow-sm);
}

.note-editor .note-toolbar,
.note-popover .popover-content {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem !important;
}

.note-editor .note-btn-group,
.note-popover .note-btn-group {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: inline-flex;
    float: none !important;
    margin: 0 !important;
    overflow: hidden;
}

.note-editor .note-btn,
.note-popover .note-btn {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--text-main) !important;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
    min-width: 34px;
    padding: 0.45rem 0.65rem !important;
    text-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.note-editor .note-btn + .note-btn,
.note-popover .note-btn + .note-btn {
    border-left: 1px solid var(--border-color) !important;
}

.note-editor .note-btn:hover,
.note-editor .note-btn:focus,
.note-editor .note-btn.active,
.note-popover .note-btn:hover,
.note-popover .note-btn:focus,
.note-popover .note-btn.active {
    background: #eff6ff !important;
    color: var(--primary-color) !important;
    outline: none !important;
}

.note-editor .note-icon-caret,
.note-popover .note-icon-caret {
    margin-left: 0.35rem;
}

.note-editor .dropdown-menu,
.note-popover .dropdown-menu,
.note-color .dropdown-menu {
    border: 1px solid var(--border-color) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
    margin-top: 0.45rem;
    overflow: hidden;
    padding: 0.4rem !important;
}

.note-editor .dropdown-menu li a,
.note-popover .dropdown-menu li a {
    border-radius: 0.5rem;
    color: var(--text-main);
    padding: 0.5rem 0.7rem;
}

.note-editor .dropdown-menu li a:hover,
.note-popover .dropdown-menu li a:hover {
    background: #eff6ff;
    color: var(--primary-color);
}

.note-editor .note-editing-area {
    background: #ffffff;
}

.note-editor.note-frame .note-editing-area .note-editable,
.note-editor.note-airframe .note-editing-area .note-editable {
    background-color: #ffffff;
    color: var(--text-main);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.6;
    padding: 1rem !important;
}

.note-editor .note-placeholder {
    color: var(--text-muted);
    padding: 1rem !important;
}

.note-editor.note-frame .note-editing-area .note-codable,
.note-editor.note-airframe .note-editing-area .note-codable {
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.875rem;
    padding: 1rem !important;
}

.note-editor .note-statusbar {
    background: #f8fafc !important;
    border-top: 1px solid var(--border-color) !important;
}

.note-editor .note-statusbar .note-resizebar {
    height: 12px;
    padding-top: 3px;
}

.note-editor .note-statusbar .note-icon-bar {
    border-top: 1px solid #cbd5e1 !important;
}

.note-editor .note-status-output {
    border: 0 !important;
    color: var(--text-muted);
}

.note-editor .note-dropzone {
    background: rgba(239, 246, 255, 0.94) !important;
    border: 2px dashed rgba(37, 99, 235, 0.35);
    color: var(--primary-color) !important;
}

.note-editor .note-dropzone .note-dropzone-message {
    font-size: 1rem;
    font-weight: 800;
}

.note-modal .modal-content {
    border: 0;
    border-radius: 0.875rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.note-modal .modal-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
}

.note-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 800;
}

.note-modal .modal-body {
    padding: 1.5rem;
}

.note-modal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

.note-modal .form-control {
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-sm);
    min-height: 40px;
}

.note-modal .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#exportModal .modal-dialog,
#importModal .modal-dialog {
    max-width: 620px;
    width: calc(100% - 2rem);
}

#exportModal .modal-content,
#importModal .modal-content {
    border: 0;
    border-radius: 0.875rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

#exportModal .modal-header,
#importModal .modal-header {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    position: relative;
}

#exportModal .modal-title,
#importModal .modal-title {
    display: flex;
    align-items: center;
    color: var(--text-main);
    font-size: 1.2rem;
    line-height: 1.2;
    margin: 0;
}

#exportModal .modal-title b,
#importModal .modal-title b {
    font-weight: 800;
}

#exportModal .close,
#importModal .close {
    align-items: center;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem;
    color: var(--text-muted);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    opacity: 1;
    padding: 0 !important;
    position: absolute;
    right: 1rem;
    text-shadow: none;
    top: 1rem;
    width: 36px;
}

#exportModal .close:hover,
#importModal .close:hover {
    color: var(--text-main);
    background: #f1f5f9 !important;
}

#exportModal .modal-body,
#importModal .modal-body {
    padding: 1.5rem;
}

#exportModal .button-container,
#importModal .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

#exportModal .button-container button,
#importModal .button-container button {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    color: var(--text-main);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    justify-content: center;
    min-height: 38px;
    padding: 0.55rem 0.9rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#exportModal .button-container button:hover,
#importModal .button-container button:hover {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

#exportModal .select2-container,
#importModal .select2-container {
    width: 100% !important;
}

#exportModal .select2-container--default .select2-selection--multiple,
#importModal .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    min-height: 48px;
    padding: 0.35rem 0.45rem;
}

#exportModal .select2-container--default.select2-container--focus .select2-selection--multiple,
#importModal .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#exportModal .select2-container--default .select2-selection--multiple .select2-selection__choice,
#importModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #eff6ff;
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 999px;
    color: #1e40af;
    font-weight: 700;
    margin: 0.25rem;
    padding: 0.25rem 0.6rem;
}

#exportModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
#importModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #1e40af;
    margin-right: 0.35rem;
}

#importModal .file_import {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin: 1rem 0 0;
    padding: 1rem;
}

#importModal .file_import label {
    color: var(--text-main);
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

#importModal .file_import input[type="file"] {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.625rem;
    color: var(--text-muted);
    cursor: pointer;
    display: block;
    padding: 0.75rem;
    width: 100%;
}

#status_exporting,
#status_importing {
    display: block;
    margin-top: 1rem;
}

#status_exporting p,
#status_importing p {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    color: var(--text-main);
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0.75rem 0.875rem;
}

#exportModal .modal-footer,
#importModal .modal-footer {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
}

#exportModal .modal-footer .btn,
#importModal .modal-footer .btn {
    align-items: center;
    border-radius: 0.625rem;
    display: inline-flex;
    font-weight: 800;
    gap: 0.55rem;
    justify-content: center;
    margin: 0 !important;
    min-height: 42px;
    padding: 0.65rem 1rem;
}

#exportModal .modal-footer .btn-secondary,
#importModal .modal-footer .btn-secondary {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

#exportModal .modal-footer .btn-primary,
#importModal .modal-footer .btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #ffffff;
    min-width: 112px;
}

/* Server & API settings */
form[name="addNewStaffForm"] .server-toggle-group {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: inline-flex;
    gap: 0.25rem;
    line-height: 1;
    margin: 0 !important;
    padding: 0.25rem;
    vertical-align: middle;
}

form[name="addNewStaffForm"] .server-toggle-group::before,
form[name="addNewStaffForm"] .server-toggle-group::after {
    content: none;
}

form[name="addNewStaffForm"] .server-toggle-option {
    align-items: center;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.55rem !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    display: inline-flex;
    font-weight: 800;
    gap: 0.5rem;
    height: 38px;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 38px;
    min-width: 104px;
    padding: 0.55rem 0.95rem !important;
    vertical-align: middle;
}

form[name="addNewStaffForm"] .server-toggle-option input {
    display: none;
}

form[name="addNewStaffForm"] .server-toggle-option::before {
    background: #94a3b8;
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
}

form[name="addNewStaffForm"] .server-toggle-option:hover {
    background: #ffffff !important;
    color: var(--text-main) !important;
}

form[name="addNewStaffForm"] .server-toggle-option.active {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-main) !important;
}

form[name="addNewStaffForm"] .server-toggle-option.server-local.active {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

form[name="addNewStaffForm"] .server-toggle-option.server-local.active::before {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

form[name="addNewStaffForm"] .server-toggle-option.server-online.active {
    background: #ecfdf5 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

form[name="addNewStaffForm"] .server-toggle-option.server-online.active::before {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

form[name="addNewStaffForm"] .server-toggle-group,
form[name="addNewStaffForm"] .server-toggle-group .server-toggle-option {
    float: none !important;
}

form[name="addNewStaffForm"] .server-toggle-group {
    position: relative;
    top: 0;
}

form[name="addNewStaffForm"] #test_ai_btn {
    align-items: center;
    display: inline-flex !important;
    gap: 0.55rem;
}

form[name="addNewStaffForm"] #test_ai_btn i {
    margin-right: 0 !important;
}

/* Portfolio category display */
.poster_item[data-category]:not([data-category=""])::after {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    content: "Categories: " attr(data-category);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0.5rem auto 0.75rem;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    padding: 0.35rem 0.65rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poster_item[data-category="0"]::after,
.poster_item[data-category=","]::after {
    display: none;
}

/* Add/Edit template editor */
form[name="addNewTemplate"] #header-content.add-new-template,
form[name="editTemplate"] #header-content.add-new-template {
    align-items: start !important;
    background: var(--bg-main) !important;
    display: grid !important;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 1.25rem !important;
    position: relative !important;
    z-index: 10000;
}

form[name="addNewTemplate"] #header-content.add-new-template h1,
form[name="editTemplate"] #header-content.add-new-template h1 {
    align-self: center;
    float: none !important;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto !important;
}

form[name="addNewTemplate"] #header-content.add-new-template > ul,
form[name="editTemplate"] #header-content.add-new-template > ul {
    align-self: center;
    display: flex !important;
    float: none !important;
    gap: 0.75rem;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

form[name="addNewTemplate"] #header-content.add-new-template .clearboth,
form[name="editTemplate"] #header-content.add-new-template .clearboth {
    display: none;
}

form[name="addNewTemplate"] .new-template-block,
form[name="editTemplate"] .new-template-block {
    background: #ffffff !important;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.8fr) minmax(240px, 1fr) minmax(190px, 0.8fr);
    margin: 0 !important;
    padding: 1rem !important;
}

form[name="addNewTemplate"] .add-section,
form[name="editTemplate"] .add-section {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    display: grid;
    float: none !important;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) minmax(190px, 0.85fr) minmax(170px, 0.65fr) minmax(240px, auto);
    padding: 1rem !important;
    text-align: left !important;
    width: 100% !important;
}

form[name="addNewTemplate"] .add-section .new-template-item:nth-child(2),
form[name="editTemplate"] .add-section .new-template-item:nth-child(2),
form[name="addNewTemplate"] .add-section .new-template-item:nth-child(3),
form[name="editTemplate"] .add-section .new-template-item:nth-child(3),
form[name="addNewTemplate"] .add-section .new-template-item:nth-child(4),
form[name="editTemplate"] .add-section .new-template-item:nth-child(4),
form[name="addNewTemplate"] .add-section .new-template-item:nth-child(5),
form[name="editTemplate"] .add-section .new-template-item:nth-child(5) {
    padding-top: 1.45rem !important;
}

form[name="addNewTemplate"] .new-template-item,
form[name="editTemplate"] .new-template-item {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    padding: 0 !important;
}

form[name="addNewTemplate"] .new-template-block .new-template-item,
form[name="editTemplate"] .new-template-block .new-template-item {
    align-items: flex-start;
    flex-direction: column;
}

form[name="addNewTemplate"] .new-template-block .new-template-item:nth-child(3),
form[name="editTemplate"] .new-template-block .new-template-item:nth-child(3),
form[name="addNewTemplate"] .new-template-block .new-template-item:nth-child(4),
form[name="editTemplate"] .new-template-block .new-template-item:nth-child(4) {
    align-items: center;
    flex-direction: row;
    padding-top: 1.45rem !important;
}

form[name="addNewTemplate"] .template-section-field,
form[name="editTemplate"] .template-section-field {
    align-items: flex-start;
    flex-direction: column;
}

form[name="addNewTemplate"] .template-grid-field,
form[name="editTemplate"] .template-grid-field {
    align-items: center;
    gap: 0.45rem;
    padding-top: 1.45rem !important;
}

form[name="addNewTemplate"] .new-template-item label,
form[name="editTemplate"] .new-template-item label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    text-transform: uppercase;
}

form[name="addNewTemplate"] .new-template-item input,
form[name="addNewTemplate"] .new-template-item select,
form[name="editTemplate"] .new-template-item input,
form[name="editTemplate"] .new-template-item select {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    height: 42px !important;
    margin: 0 !important;
    min-width: 0;
    padding: 0.55rem 0.75rem;
}

form[name="addNewTemplate"] input[name="templateName"],
form[name="editTemplate"] input[name="templateName"],
form[name="addNewTemplate"] input[name="sectionName"],
form[name="editTemplate"] input[name="sectionName"],
form[name="addNewTemplate"] select[name="templateOrientation"],
form[name="editTemplate"] select[name="templateOrientation"] {
    width: 100% !important;
}

form[name="addNewTemplate"] #sectionSelector,
form[name="editTemplate"] #sectionSelector {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    width: 100% !important;
}

form[name="addNewTemplate"] #templateWidth,
form[name="addNewTemplate"] #templateHeight,
form[name="addNewTemplate"] #sectionWidth,
form[name="addNewTemplate"] #sectionHeight,
form[name="addNewTemplate"] #sectionX,
form[name="addNewTemplate"] #sectionY,
form[name="addNewTemplate"] #snapGridSize,
form[name="editTemplate"] #templateWidth,
form[name="editTemplate"] #templateHeight,
form[name="editTemplate"] #sectionWidth,
form[name="editTemplate"] #sectionHeight,
form[name="editTemplate"] #sectionX,
form[name="editTemplate"] #sectionY,
form[name="editTemplate"] #snapGridSize {
    width: 88px !important;
}

form[name="addNewTemplate"] .template-checkbox,
form[name="editTemplate"] .template-checkbox {
    box-shadow: none;
    height: 18px !important;
    margin: 0 !important;
    width: 18px !important;
}

form[name="addNewTemplate"] .labelTemplateIsDefault,
form[name="editTemplate"] .labelTemplateIsDefault {
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

form[name="addNewTemplate"] .add-section button,
form[name="editTemplate"] .add-section button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    box-shadow: var(--shadow-sm);
    font-weight: 800;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.6rem 0.95rem;
}

form[name="addNewTemplate"] .add-section button i,
form[name="editTemplate"] .add-section button i {
    margin-right: 0.45rem;
}

form[name="addNewTemplate"] #btn-add-section,
form[name="editTemplate"] #btn-add-section,
form[name="addNewTemplate"] #btn-save-section,
form[name="editTemplate"] #btn-save-section {
    background: var(--primary-color);
    color: #ffffff;
}

form[name="addNewTemplate"] #btn-save-section:disabled,
form[name="addNewTemplate"] #btn-save-section.is-loading,
form[name="editTemplate"] #btn-save-section:disabled,
form[name="editTemplate"] #btn-save-section.is-loading {
    cursor: wait;
    opacity: 0.72;
}

form[name="addNewTemplate"] #btn-cancel-section,
form[name="editTemplate"] #btn-cancel-section {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--text-main);
}

form[name="addNewTemplate"] #btn-delete-section,
form[name="editTemplate"] #btn-delete-section {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

form[name="addNewTemplate"] .template-section-status,
form[name="editTemplate"] .template-section-status {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.35;
    margin: 0.35rem auto 0;
    max-width: 100%;
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    text-align: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

form[name="addNewTemplate"] .template-section-status[hidden],
form[name="editTemplate"] .template-section-status[hidden] {
    display: none;
}

form[name="addNewTemplate"] .template-section-status--success,
form[name="editTemplate"] .template-section-status--success {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

form[name="addNewTemplate"] .template-section-status--error,
form[name="editTemplate"] .template-section-status--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

form[name="addNewTemplate"] .add-section-block,
form[name="editTemplate"] .add-section-block {
    float: none !important;
    margin-top: 1rem !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    width: 100% !important;
}

form[name="addNewTemplate"] .wrap-template,
form[name="editTemplate"] .wrap-template {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    float: none !important;
    overflow: auto;
    padding: 1.25rem !important;
    position: relative;
    z-index: 1;
    width: 100% !important;
}

form[name="addNewTemplate"] #template,
form[name="editTemplate"] #template {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
    isolation: isolate;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
}

form[name="addNewTemplate"] .template-section,
form[name="editTemplate"] .template-section {
    align-items: center;
    background: rgba(37, 99, 235, 0.1) !important;
    border: 1px solid rgba(37, 99, 235, 0.45) !important;
    border-radius: 0.5rem;
    color: #1e40af;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    justify-content: center;
    overflow: hidden;
    padding: 0.25rem;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1;
}

form[name="addNewTemplate"] .template-section-label,
form[name="editTemplate"] .template-section-label {
    cursor: pointer;
    display: inline-block;
    max-width: min(100%, 180px);
    min-width: 0;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}

form[name="addNewTemplate"] .template-section::after,
form[name="editTemplate"] .template-section::after {
    content: " (" attr(data-section-width) " x " attr(data-section-height) ")";
    align-self: center;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 0.25rem;
    opacity: 0.78;
    position: relative;
    top: 0.01em;
    white-space: nowrap;
}

form[name="addNewTemplate"] .template-section[data-section-name="Main Section"],
form[name="addNewTemplate"] .template-section[data-section-name="Main section"],
form[name="addNewTemplate"] .template-section[data-section-name="main section"],
form[name="editTemplate"] .template-section[data-section-name="Main Section"],
form[name="editTemplate"] .template-section[data-section-name="Main section"],
form[name="editTemplate"] .template-section[data-section-name="main section"] {
    background: rgba(15, 23, 42, 0.055) !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
    border-style: dashed !important;
    color: #334155;
    opacity: 0.62;
}

form[name="addNewTemplate"] .template-section[data-section-name="Main Section"]:hover,
form[name="addNewTemplate"] .template-section[data-section-name="Main Section"].template-section-active,
form[name="addNewTemplate"] .template-section[data-section-name="Main section"]:hover,
form[name="addNewTemplate"] .template-section[data-section-name="Main section"].template-section-active,
form[name="addNewTemplate"] .template-section[data-section-name="main section"]:hover,
form[name="addNewTemplate"] .template-section[data-section-name="main section"].template-section-active,
form[name="editTemplate"] .template-section[data-section-name="Main Section"]:hover,
form[name="editTemplate"] .template-section[data-section-name="Main Section"].template-section-active,
form[name="editTemplate"] .template-section[data-section-name="Main section"]:hover,
form[name="editTemplate"] .template-section[data-section-name="Main section"].template-section-active,
form[name="editTemplate"] .template-section[data-section-name="main section"]:hover,
form[name="editTemplate"] .template-section[data-section-name="main section"].template-section-active {
    opacity: 0.82;
}

form[name="addNewTemplate"] .template-section:nth-child(6n + 1),
form[name="editTemplate"] .template-section:nth-child(6n + 1) {
    background: rgba(37, 99, 235, 0.14) !important;
    border-color: rgba(37, 99, 235, 0.55) !important;
    color: #1e40af;
}

form[name="addNewTemplate"] .template-section:nth-child(6n + 2),
form[name="editTemplate"] .template-section:nth-child(6n + 2) {
    background: rgba(5, 150, 105, 0.14) !important;
    border-color: rgba(5, 150, 105, 0.55) !important;
    color: #047857;
}

form[name="addNewTemplate"] .template-section:nth-child(6n + 3),
form[name="editTemplate"] .template-section:nth-child(6n + 3) {
    background: rgba(217, 119, 6, 0.16) !important;
    border-color: rgba(217, 119, 6, 0.55) !important;
    color: #92400e;
}

form[name="addNewTemplate"] .template-section:nth-child(6n + 4),
form[name="editTemplate"] .template-section:nth-child(6n + 4) {
    background: rgba(219, 39, 119, 0.13) !important;
    border-color: rgba(219, 39, 119, 0.5) !important;
    color: #9d174d;
}

form[name="addNewTemplate"] .template-section:nth-child(6n + 5),
form[name="editTemplate"] .template-section:nth-child(6n + 5) {
    background: rgba(124, 58, 237, 0.13) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
    color: #5b21b6;
}

form[name="addNewTemplate"] .template-section:nth-child(6n),
form[name="editTemplate"] .template-section:nth-child(6n) {
    background: rgba(8, 145, 178, 0.14) !important;
    border-color: rgba(8, 145, 178, 0.55) !important;
    color: #0e7490;
}

form[name="addNewTemplate"] .template-section[data-section-name="Main Section"],
form[name="addNewTemplate"] .template-section[data-section-name="Main section"],
form[name="addNewTemplate"] .template-section[data-section-name="main section"],
form[name="editTemplate"] .template-section[data-section-name="Main Section"],
form[name="editTemplate"] .template-section[data-section-name="Main section"],
form[name="editTemplate"] .template-section[data-section-name="main section"] {
    background: rgba(15, 23, 42, 0.055) !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
    border-style: dashed !important;
    color: #334155;
    opacity: 0.62;
}

form[name="addNewTemplate"] .template-section:hover,
form[name="addNewTemplate"] .template-section-active,
form[name="editTemplate"] .template-section:hover,
form[name="editTemplate"] .template-section-active {
    border-color: currentColor !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12), inset 0 0 0 1px currentColor;
    filter: saturate(1.2);
}

form[name="addNewTemplate"] .template-section:focus-visible,
form[name="editTemplate"] .template-section:focus-visible {
    box-shadow: 0 0 0 4px var(--amtv-ring), inset 0 0 0 1px currentColor;
    outline: 2px solid transparent;
    outline-offset: 3px;
}

form[name="addNewTemplate"] .template-section .ui-resizable-handle,
form[name="editTemplate"] .template-section .ui-resizable-handle {
    background: #ffffff;
    border: 1px solid currentColor;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    height: 10px;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
    width: 10px;
    z-index: 4 !important;
}

form[name="addNewTemplate"] .template-section:hover .ui-resizable-handle,
form[name="addNewTemplate"] .template-section-active .ui-resizable-handle,
form[name="editTemplate"] .template-section:hover .ui-resizable-handle,
form[name="editTemplate"] .template-section-active .ui-resizable-handle {
    opacity: 1;
}

form[name="addNewTemplate"] .template-section .ui-resizable-handle:hover,
form[name="editTemplate"] .template-section .ui-resizable-handle:hover {
    transform: scale(1.16);
}

form[name="addNewTemplate"] .template-section .ui-resizable-n,
form[name="editTemplate"] .template-section .ui-resizable-n {
    cursor: ns-resize;
    left: calc(50% - 5px);
    top: 2px;
}

form[name="addNewTemplate"] .template-section .ui-resizable-s,
form[name="editTemplate"] .template-section .ui-resizable-s {
    bottom: 2px;
    cursor: ns-resize;
    left: calc(50% - 5px);
}

form[name="addNewTemplate"] .template-section .ui-resizable-e,
form[name="editTemplate"] .template-section .ui-resizable-e {
    cursor: ew-resize;
    right: 2px;
    top: calc(50% - 5px);
}

form[name="addNewTemplate"] .template-section .ui-resizable-w,
form[name="editTemplate"] .template-section .ui-resizable-w {
    cursor: ew-resize;
    left: 2px;
    top: calc(50% - 5px);
}

form[name="addNewTemplate"] .template-section .ui-resizable-ne,
form[name="editTemplate"] .template-section .ui-resizable-ne {
    cursor: nesw-resize;
    right: 2px;
    top: 2px;
}

form[name="addNewTemplate"] .template-section .ui-resizable-nw,
form[name="editTemplate"] .template-section .ui-resizable-nw {
    cursor: nwse-resize;
    left: 2px;
    top: 2px;
}

form[name="addNewTemplate"] .template-section .ui-resizable-se,
form[name="editTemplate"] .template-section .ui-resizable-se {
    bottom: 2px;
    cursor: nwse-resize;
    right: 2px;
}

form[name="addNewTemplate"] .template-section .ui-resizable-sw,
form[name="editTemplate"] .template-section .ui-resizable-sw {
    bottom: 2px;
    cursor: nesw-resize;
    left: 2px;
}

/* Event edit */
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) {
    margin-top: 1rem;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content {
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 1rem;
    padding: 1rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content h1 {
    color: var(--text-main);
    float: none !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content ul {
    align-items: center;
    display: flex !important;
    float: none !important;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content li {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content button {
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: none;
    display: inline-flex !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    gap: 0.5rem;
    height: 38px;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 92px;
    padding: 0 0.85rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a {
    background: #ffffff;
    color: var(--text-main) !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content button:hover {
    transform: translateY(-1px);
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href*="/posters/add/"] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href*="/posters/add/"]:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href$="/events"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href$="events"] {
    background: #64748b;
    border-color: #64748b;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href$="/events"]:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href$="events"]:hover {
    background: #475569;
    border-color: #475569;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content .delete_btn {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content .delete_btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href*="/events/report/"] {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content a[href*="/events/report/"]:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content button {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #header-content i {
    margin: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .event-page-content {
    background: transparent !important;
    padding: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .event-page-content > .nav-tabs {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 0.45rem;
    margin: 0 0 0.85rem !important;
    padding: 0.45rem !important;
    width: fit-content;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event {
    display: inline-flex;
    margin: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event > a {
    align-items: center;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.65rem !important;
    color: var(--text-muted) !important;
    display: inline-flex !important;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.45rem;
    letter-spacing: 0;
    min-height: 40px;
    padding: 0.6rem 0.95rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event > a::before {
    align-items: center;
    background: #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-family: FontAwesome;
    font-size: 0.82rem;
    font-weight: normal;
    height: 22px;
    justify-content: center;
    line-height: 1;
    width: 22px;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event[data-tab="1"] > a::before {
    content: "\f05a";
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event[data-tab="2"] > a::before {
    content: "\f013";
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event[data-tab="3"] > a::before {
    content: "\f023";
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event.active > a,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event > a:hover {
    background: #ffffff !important;
    border-color: #bfdbfe !important;
    box-shadow: var(--shadow-sm);
    color: #1d4ed8 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event.active > a::before,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .tab_event > a:hover::before {
    background: #2563eb;
    color: #ffffff;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display-detail {
    background: #ffffff !important;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    padding: 1.25rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_detail > .col-md-2 {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.85rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_detail > .col-md-2 label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    text-transform: uppercase;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #group-of-event,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #group-of-event-settings {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    padding: 0.9rem;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-detail-title {
    align-items: center;
    color: var(--text-main);
    display: flex;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    justify-content: space-between;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-detail {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .wrap-action-for-template {
    right: 0.55rem;
    top: 0.55rem;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .wrap-action-for-template > li > i {
    background: rgba(255, 255, 255, 0.94);
    border-color: #dbe3ee;
    color: #475569;
    height: 32px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    width: 32px;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .wrap-action-for-template > li:hover > i {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    transform: translateY(-1px);
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 {
    border-radius: 0.75rem;
    min-width: 168px;
    padding: 0.4rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 li {
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 a,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 button {
    align-items: center;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.55rem !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    display: flex !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    gap: 0.55rem;
    justify-content: flex-start;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 34px;
    padding: 0.5rem 0.6rem !important;
    text-align: left;
    text-decoration: none !important;
    width: 100%;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 a i,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 button i {
    margin: 0 !important;
    min-width: 14px;
    text-align: center;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 .btn-edit-event-group:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 .btn-delete-event-group {
    color: #b91c1c !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .page-of-slideshow-lv2 .btn-delete-event-group:hover {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #add-edit-event,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #add-edit-screensaver {
    border: 1px dashed #bfdbfe !important;
    border-radius: 0.75rem;
    color: #1d4ed8;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #add-edit-event:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #add-edit-screensaver:hover {
    background: #eff6ff !important;
    border-color: #60a5fa !important;
    transform: translateY(-1px);
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting > .col-md-8 {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    padding: 1rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .row,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting > .col-md-8 > .row {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 0.65rem !important;
    min-height: 50px;
    padding: 0.75rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .row > label,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting > .col-md-8 > .row > label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .row:has(input[name="search_filter"]),
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .display_filter {
    background: #f8fbff;
    border-color: #bfdbfe;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .row:has(input[name="search_filter"]) {
    gap: 0.75rem;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[name="search_filter"] {
    accent-color: #2563eb;
    height: 16px;
    margin: 0 0.25rem 0 0.4rem !important;
    width: 16px;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .display_filter {
    align-items: flex-start;
    margin-top: -0.35rem !important;
    padding-left: calc(25% + 0.75rem) !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter > label {
    display: none !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter > div {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.55rem;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter label {
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    color: #334155;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800 !important;
    gap: 0.45rem;
    line-height: 1;
    margin: 0 !important;
    min-height: 36px;
    padding: 0.5rem 0.75rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter label:has(input:checked) {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter input[type="checkbox"] {
    accent-color: #2563eb;
    height: 15px;
    margin: 0 !important;
    width: 15px;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[type="radio"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting input[type="radio"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[type="checkbox"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting input[type="checkbox"] {
    margin: 0 0.25rem 0 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[name="search_filter"] {
    margin: 0 0.25rem 0 0.4rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .display_filter input[type="checkbox"] {
    margin: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting select,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting select,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[type="date"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting input[type="number"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting input[type="date"],
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting input[type="number"] {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    min-height: 38px;
    padding: 0.45rem 0.65rem !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 0.625rem;
    box-shadow: none;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    justify-content: center;
    min-height: 34px;
    padding: 0.42rem 0.75rem !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn:hover {
    transform: translateY(-1px);
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn-primary,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn-primary:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn-default,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn-default {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: var(--text-main) !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn-default:hover,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn-default:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn i,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn i {
    margin: 0 !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_admin_setting .btn:disabled,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting .btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #df_category,
#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .display_filter label:has(input[name="display_filter[]"][value="category"]) {
    display: none !important;
}

#wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) .poster_item[data-category]::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 991px) {
    #wrapper-content:has(form[name="addNewSlideshowForm"] #event_detail) #event_setting > .col-md-8 > .display_filter {
        padding-left: 0.75rem !important;
    }
}

/* Admin management pages */
form[name="addNewUser"] .wrap-client-page,
form[name="addNewUser"] .display-detail,
#table_version,
#table_log_access {
    width: 100%;
}

form[name="addNewUser"] .wrap-client-page {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    padding: 0 !important;
}

form[name="addNewUser"] .display-detail {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

form[name="addNewUser"] .display-detail .row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}

form[name="addNewUser"] .display-detail .row label,
form[name="addNewUser"] .display-detail .row input,
form[name="addNewUser"] .display-detail .row select {
    float: none;
    margin: 0 !important;
    width: 100% !important;
}

form[name="addNewUser"] .alert-error-messager {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    color: #991b1b !important;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.85rem 1rem;
}

#table_version_wrapper,
#table_log_access_wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    margin-top: 1.25rem;
    padding: 1.25rem;
}

#table_version_wrapper .dataTables_length,
#table_version_wrapper .dataTables_filter,
#table_log_access_wrapper .dataTables_length,
#table_log_access_wrapper .dataTables_filter {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

#table_version_wrapper .dataTables_filter input,
#table_log_access_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
}

#table_version_wrapper .dataTables_info,
#table_log_access_wrapper .dataTables_info {
    color: var(--text-muted);
    padding-top: 1rem;
}

#table_version_wrapper .dataTables_paginate,
#table_log_access_wrapper .dataTables_paginate {
    padding-top: 0.75rem;
}

#table_version_wrapper .paginate_button,
#table_log_access_wrapper .paginate_button {
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    color: var(--text-main) !important;
    margin-left: 0.25rem !important;
}

#table_version_wrapper .paginate_button.current,
#table_log_access_wrapper .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

#refresh_btn,
#archive_btn {
    align-items: center;
    border: 0 !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    float: none !important;
    font-weight: 700;
    gap: 0.55rem;
    justify-content: center;
    margin: 0 0 1rem 0.75rem !important;
    min-height: 40px;
    padding: 0.625rem 1rem !important;
}

#refresh_btn {
    background: #16a34a !important;
    color: #ffffff !important;
}

#archive_btn {
    background: #f59e0b !important;
    color: #111827 !important;
}

#wrapper-content:has(#table_log_access) #header-content h1 {
    align-items: flex-start !important;
    flex-direction: column;
}

#wrapper-content:has(#table_log_access) #header-content h1::after {
    color: var(--text-muted);
    content: "Audit recent admin access, IP details, and archived logs.";
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.35rem;
}

#wrapper-content:has(#table_log_access) > .dfi-t {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    float: none !important;
    margin-top: 0 !important;
    padding: 1.25rem !important;
    width: 100% !important;
}

#wrapper-content:has(#table_log_access) > .dfi-t::before {
    color: var(--text-main);
    content: "Login Access Activity";
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

#wrapper-content:has(#table_log_access) > .dfi-t::after {
    color: var(--text-muted);
    content: "Showing access and change activity from the last 30 days.";
    display: block;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

#wrapper-content:has(#table_log_access) #refresh_btn,
#wrapper-content:has(#table_log_access) #archive_btn {
    border: 1px solid transparent !important;
    border-radius: 0.625rem !important;
    float: none !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    height: 40px;
    letter-spacing: 0 !important;
    margin: 0 0 1rem 0.75rem !important;
    min-height: 40px;
    padding: 0.6rem 0.95rem !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#wrapper-content:has(#table_log_access) #refresh_btn {
    background: #ecfdf5 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

#wrapper-content:has(#table_log_access) #archive_btn {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

#wrapper-content:has(#table_log_access) #refresh_btn:hover,
#wrapper-content:has(#table_log_access) #archive_btn:hover {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-1px);
}

#table_log_access_wrapper {
    border: 0;
    box-shadow: none;
    clear: both;
    margin-top: 0;
    overflow-x: auto;
    padding: 0;
}

#table_log_access_wrapper .dataTables_length,
#table_log_access_wrapper .dataTables_filter {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: inline-flex;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}

#table_log_access_wrapper .dataTables_filter {
    float: right;
}

#table_log_access_wrapper .dataTables_filter label,
#table_log_access_wrapper .dataTables_length label {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0;
}

#table_log_access_wrapper .dataTables_filter input,
#table_log_access_wrapper .dataTables_length select {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: none;
    color: var(--text-main);
    height: 34px;
    margin: 0 !important;
    padding: 0.35rem 0.55rem;
}

#table_log_access {
    border-collapse: separate !important;
    border-spacing: 0;
}

#table_log_access thead th,
#table_log_access tfoot th {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.95rem 1rem !important;
    text-transform: uppercase;
}

#table_log_access tbody td {
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-main);
    padding: 0.95rem 1rem !important;
    vertical-align: top !important;
}

#table_log_access tbody tr:hover {
    background: #f8fafc;
}

#table_log_access .ip_address_btn {
    align-items: center;
    background: #eef6ff !important;
    border: 1px solid #b9d9ff !important;
    border-radius: 999px !important;
    color: #155cc7 !important;
    display: inline-flex;
    font-size: 0.8125rem !important;
    font-weight: 700;
    gap: 0.45rem;
    line-height: 1;
    min-height: 30px;
    padding: 0.4rem 0.7rem !important;
}

#table_log_access .ip_address_btn i {
    color: #155cc7 !important;
    margin-right: 0 !important;
}

#table_log_access .btn-success,
#table_log_access .btn-danger {
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 800;
    min-width: 52px;
    padding: 0.35rem 0.65rem !important;
}

#table_log_access_wrapper .dataTables_info {
    color: var(--text-muted);
    font-weight: 700;
}

#table_log_access_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    min-width: 36px;
    padding: 0.45rem 0.7rem !important;
}

#table_log_access_wrapper .dataTables_paginate .paginate_button.current,
#table_log_access_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

#wrapper-content:has(#table_log_access) #modal_gn .modal-dialog {
    max-width: 680px;
    width: calc(100% - 2rem);
}

#wrapper-content:has(#table_log_access) #modal_gn .modal-header {
    padding-right: 4rem;
}

#wrapper-content:has(#table_log_access) #modal_gn .modal-body table {
    margin: 0;
}

#wrapper-content:has(#table_log_access) #modal_gn .archive_log {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    color: var(--text-main);
    display: flex;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
}

#wrapper-content:has(#table_log_access) #modal_gn .archive_log:hover {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--primary-color);
}

#table_log_access {
    table-layout: auto;
}

#table_log_access td,
#table_version td {
    max-width: 360px;
    overflow-wrap: anywhere;
}

/* Version and display option forms */
form[name="addNewStaffForm"] #content .display-detail,
#wrapper-content > form[action=""] #content .display-detail {
    margin-top: 0;
}

#wrapper-content:has(#table_version) #header-content h1 {
    align-items: flex-start !important;
    flex-direction: column;
}

#wrapper-content:has(#table_version) #header-content h1::after {
    color: var(--text-muted);
    content: "Version release notes and change history";
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.35rem;
}

#wrapper-content:has(#table_version) #content {
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(#table_version) #content .display-detail {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.5rem;
    padding: 1.5rem !important;
}

#wrapper-content:has(#table_version) #content .display-detail::before {
    color: var(--text-main);
    content: "Add Version";
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    grid-column: 1 / -1;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

#wrapper-content:has(#table_version) #content .display-detail .row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 !important;
}

#wrapper-content:has(#table_version) #content .display-detail .row:last-child {
    grid-column: 1 / -1;
}

#wrapper-content:has(#table_version) #content .display-detail label {
    color: var(--text-muted);
    float: none !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    width: 100% !important;
}

#wrapper-content:has(#table_version) #content .display-detail .row > div,
#wrapper-content:has(#table_version) #content .display-detail input,
#wrapper-content:has(#table_version) #content .display-detail textarea {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

#wrapper-content:has(#table_version) #content .display-detail input[readonly] {
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 700;
}

#wrapper-content:has(#table_version) .input-group.date {
    display: flex;
    width: 100%;
}

#wrapper-content:has(#table_version) .input-group.date .form-control {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#wrapper-content:has(#table_version) .input-group-addon.icon-startdate {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 0.625rem 0.625rem 0;
    color: var(--primary-color);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-width: 44px;
}

#table_version_wrapper::before {
    color: var(--text-main);
    content: "Version History";
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

#table_version_wrapper {
    position: relative;
    overflow-x: auto;
    padding-top: 1.5rem;
}

#table_version_wrapper::after {
    color: var(--text-muted);
    content: "Review, edit, or remove previous version notes.";
    display: block;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

#table_version_wrapper .dataTables_length,
#table_version_wrapper .dataTables_filter {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    display: inline-flex;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}

#table_version_wrapper .dataTables_filter {
    float: right;
}

#table_version_wrapper .dataTables_filter label,
#table_version_wrapper .dataTables_length label {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0;
}

#table_version_wrapper .dataTables_filter input,
#table_version_wrapper .dataTables_length select {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: none;
    color: var(--text-main);
    height: 34px;
    margin: 0 !important;
    padding: 0.35rem 0.55rem;
}

#table_version_wrapper .dataTables_filter input:focus,
#table_version_wrapper .dataTables_length select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

#table_version {
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

#table_version thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.95rem 1rem !important;
    text-transform: uppercase;
}

#table_version tbody td {
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-main);
    padding: 1rem !important;
    vertical-align: top !important;
}

#table_version tbody td:first-child {
    color: var(--primary-color);
    font-weight: 800;
    white-space: nowrap;
}

#table_version tbody tr:hover {
    background: #f8fafc;
}

#table_version .btn,
#table_version button,
#table_version a {
    align-items: center;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: inline-flex;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    gap: 0.45rem;
    justify-content: center;
    letter-spacing: 0 !important;
    height: 30px !important;
    line-height: 1 !important;
    margin: 0.15rem 0.2rem !important;
    min-height: 30px;
    min-width: 86px;
    padding: 0.4rem 0.7rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
}

#table_version .btn::before,
#table_version button::before,
#table_version a::before {
    font-size: 0.9rem;
    line-height: 1;
    margin-right: 0.1rem;
}

#table_version .update_btn {
    background: #eef6ff !important;
    border: 1px solid #b9d9ff !important;
    color: #155cc7 !important;
}

#table_version .update_btn:hover {
    background: #dbeeff !important;
    border-color: #88bfff !important;
    color: #0f4fab !important;
    box-shadow: 0 8px 18px rgba(21, 92, 199, 0.12) !important;
    transform: translateY(-1px);
}

#table_version .del_btn {
    background: #fff1f1 !important;
    border: 1px solid #ffc9c9 !important;
    color: #b42318 !important;
}

#table_version .del_btn:hover {
    background: #ffe4e4 !important;
    border-color: #ffadad !important;
    color: #981b12 !important;
    box-shadow: 0 8px 18px rgba(180, 35, 24, 0.12) !important;
    transform: translateY(-1px);
}

#table_version .update_btn:active,
#table_version .del_btn:active {
    box-shadow: none !important;
    transform: translateY(0);
}

#table_version td:last-child {
    white-space: nowrap;
}

#table_version_wrapper .dataTables_info {
    font-weight: 700;
}

#table_version_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    min-width: 36px;
    padding: 0.45rem 0.7rem !important;
}

#table_version_wrapper .dataTables_paginate .paginate_button.current,
#table_version_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

#table_version_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eff6ff !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    color: var(--primary-color) !important;
}

#modal_gn .modal-content,
#modal_edit .modal-content {
    border: 0;
    border-radius: 0.875rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

#modal_gn .modal-header,
#modal_edit .modal-header {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    position: relative;
}

#modal_gn .modal-title,
#modal_edit .modal-title {
    color: var(--text-main);
    font-size: 1.125rem;
    font-weight: 800;
    margin: 0;
}

#modal_gn .close,
#modal_edit .close {
    align-items: center;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem;
    color: var(--text-muted);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    opacity: 1;
    padding: 0 !important;
    position: absolute;
    right: 1rem;
    text-shadow: none;
    top: 1rem;
    width: 36px;
}

#modal_edit .modal-dialog {
    max-width: 680px;
    width: calc(100% - 2rem);
}

#modal_edit .modal-header {
    justify-content: flex-start;
    padding-right: 4rem;
}

#modal_edit .modal-title {
    text-align: left;
    width: 100%;
}

#modal_edit .modal-title::after {
    color: var(--text-muted);
    content: "Edit the release date and notes for this version.";
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.35rem;
}

#modal_edit .display-detail {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#modal_edit .display-detail .row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 !important;
}

#modal_edit .display-detail .row:last-child {
    grid-column: 1 / -1;
}

#modal_edit .display-detail label {
    color: var(--text-muted);
    float: none !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    width: 100% !important;
}

#modal_edit .display-detail .row > div,
#modal_edit .display-detail input,
#modal_edit .display-detail textarea {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

#modal_edit .display-detail input[readonly] {
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 700;
}

#modal_gn .modal-body,
#modal_edit .modal-body {
    padding: 1.5rem;
}

#modal_gn .modal-footer,
#modal_edit .modal-footer {
    align-items: center;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
}

#modal_gn .modal-footer .btn,
#modal_edit .modal-footer .btn {
    align-items: center;
    border-radius: 0.625rem;
    display: inline-flex;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0 !important;
    margin: 0 !important;
    min-height: 40px;
    padding: 0.6rem 0.95rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#modal_edit .modal-footer .btn-secondary {
    background: #f8fafc !important;
    border: 1px solid var(--border-color) !important;
    color: #475569 !important;
}

#modal_edit .modal-footer .btn-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

#modal_edit .modal-footer .btn-warning,
#modal_edit .modal-footer #btn_update {
    background: #eef6ff !important;
    border: 1px solid #b9d9ff !important;
    color: #155cc7 !important;
}

#modal_edit .modal-footer .btn-warning:hover,
#modal_edit .modal-footer #btn_update:hover {
    background: #dbeeff !important;
    border-color: #88bfff !important;
    box-shadow: 0 8px 18px rgba(21, 92, 199, 0.12) !important;
    color: #0f4fab !important;
    transform: translateY(-1px);
}

#modal_edit .modal-footer .btn:active {
    box-shadow: none !important;
    transform: translateY(0);
}

#modal_edit .display-detail {
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 !important;
}

#modal_edit .display-detail .row {
    margin-bottom: 0;
}

#modal_edit textarea,
textarea#description,
textarea#description_edit {
    min-height: 120px;
    width: 100% !important;
}

.bootstrap-tagsinput {
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 42px;
    padding: 0.45rem 0.6rem !important;
    width: 100% !important;
}

.bootstrap-tagsinput .tag {
    background: var(--primary-soft);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1e40af;
    display: inline-flex;
    font-weight: 700;
    margin: 0.15rem;
    padding: 0.25rem 0.55rem !important;
}

/* Page detail editor */
#wrapper-content[data-page-id] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 340px;
}

#wrapper-content[data-page-id] form,
#wrapper-content[data-page-id] #header-content,
#wrapper-content[data-page-id] #content {
    grid-column: 1;
}

#wrapper-content[data-page-id] #header-content.add-new-template {
    align-items: flex-start;
}

#wrapper-content[data-page-id] #header-content h1 {
    display: block !important;
    line-height: 1.35;
    min-width: 280px;
}

#wrapper-content[data-page-id] .header-breadcrumb {
    color: var(--primary-color);
    font-weight: 700;
}

#wrapper-content[data-page-id] #header-content ul {
    align-items: center;
    flex-wrap: wrap;
}

#wrapper-content[data-page-id] .page-detail {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
    padding: 1.25rem;
}

#wrapper-content[data-page-id] .page-detail-1,
#wrapper-content[data-page-id] .page-detail-2 {
    align-items: end;
    display: grid;
    float: none;
    gap: 0.75rem 1rem;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    padding: 0;
    width: 100%;
}

#wrapper-content[data-page-id] .page-detail label {
    color: var(--text-main);
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0;
}

#wrapper-content[data-page-id] .page-detail input {
    margin: 0 !important;
    width: 100% !important;
}

#wrapper-content[data-page-id] .page-background-color {
    min-height: 42px;
    padding: 0.25rem !important;
}

#wrapper-content[data-page-id] .page-detail-template-name {
    align-self: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.75rem 1rem;
}

#wrapper-content[data-page-id] #sorted-instance-list {
    display: none;
}

#wrapper-content[data-page-id] .page-detail-content {
    float: none;
    margin-top: 0 !important;
    padding: 0;
    width: 100%;
}

#wrapper-content[data-page-id] .wrap-template {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: auto;
    padding: 1.25rem;
}

#wrapper-content[data-page-id] #template {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--border-color);
    margin: 0 auto;
    overflow: hidden;
}

#wrapper-content[data-page-id] .template-section {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
    border-radius: 0.5rem;
    overflow: hidden;
}

#wrapper-content[data-page-id] .template-section-active {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

#wrapper-content[data-page-id] .section-name-of-page {
    background: rgba(255,255,255,0.9);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

#wrapper-content[data-page-id] .wrap-instance-of-page {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    float: none;
    grid-column: 2;
    grid-row: 2 / span 3;
    margin-top: 0;
    padding: 1.25rem;
    position: sticky;
    top: 90px;
    width: auto;
}

#wrapper-content[data-page-id] .wrap-instance-of-page h2 {
    color: var(--text-main);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

#wrapper-content[data-page-id] .btn-control-of-instance {
    display: grid;
    gap: 0.75rem;
    padding: 0;
}

#wrapper-content[data-page-id] #btn-all-instance,
#wrapper-content[data-page-id] #btn-add-instance {
    align-items: center;
    border-radius: 0.75rem;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0.625rem 1rem;
}

#wrapper-content[data-page-id] #btn-all-instance {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

#wrapper-content[data-page-id] #btn-add-instance {
    background: var(--primary-color);
    color: #ffffff;
}

#wrapper-content[data-page-id] #instance-search-text {
    width: 100%;
}

#wrapper-content[data-page-id] .instance-of-section-block {
    margin-top: 1rem;
    overflow-y: auto;
    padding: 0;
}

#wrapper-content[data-page-id] .wrap-instance-of-section {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.85rem;
    padding: 1rem;
}

#wrapper-content[data-page-id] .instance-of-section {
    border: 0;
    padding: 0;
}

#wrapper-content[data-page-id] .instance-name-of-section {
    color: var(--text-main);
    font-size: 0.95rem !important;
    font-weight: 700;
}

#wrapper-content[data-page-id] .section-of-instance,
#wrapper-content[data-page-id] .info-of-instance {
    color: var(--text-muted);
    font-size: 0.8125rem !important;
}

@media (max-width: 1199px) {
    #wrap_cb {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #wrapper-content:has(.wrap-display-block) .wrap-content-block,
    #wrapper-content:has(.wrap-content-block > .wrap-slideshow-block) .wrap-content-block,
    #wrapper-content:has(.wrap-user-management-block) .col-none-padding,
    #wrapper-content:has(.wrap-slideshow-block) #content.slideshow-page-content,
    #wrapper-content:has(.wrap-slideshow-block) .slideshow-page-content {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    #wrapper-content:has(a[href$="events/add"]) .slideshow-page-content {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    }

    #wrapper-content[data-page-id] {
        grid-template-columns: 1fr;
    }

    #wrapper-content[data-page-id] .wrap-instance-of-page {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }

    #wrapper-content[data-page-id] .page-detail-1,
    #wrapper-content[data-page-id] .page-detail-2 {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc;
}

/* Dropdown Menu */
.drop-down-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--text-main);
    text-align: left;
    list-style: none;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}

.drop-down-menu li a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--text-main);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none;
}

.drop-down-menu li a:hover {
    color: var(--primary-color);
    background-color: #f8fafc;
}

/* Login Page Modernization */
.login-body {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#wrap-login {
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
    padding: 3rem !important;
    position: static !important;
    transform: none !important;
    max-width: 450px;
    width: 100%;
}

.login-logo img {
    height: 60px;
    margin-bottom: 1.5rem;
}

.login-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
}

.login-form {
    margin-top: 2rem;
    padding: 0 !important;
}

.login-form input {
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    padding: 0.875rem 1rem !important;
}

.submit-button {
    width: 100% !important;
    margin: 1rem 0 0 0 !important;
    padding: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
}

.login-help {
    margin-top: 1.5rem !important;
}

.login-help a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.login-footer {
    background: transparent !important;
    position: fixed;
    bottom: 1.5rem;
    width: 100%;
    border: none !important;
}

.login-footer p {
    color: #94a3b8 !important;
    font-size: 0.875rem;
}

.login-footer a {
    color: #cbd5e1 !important;
    transition: color 0.2s ease;
}

.login-footer a:hover {
    color: #ffffff !important;
}

.mb-10 { margin-bottom: 2.5rem !important; }
.mt-10 { margin-top: 2.5rem !important; }

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%);
    }
    #wrapper-content {
        margin-left: 0 !important;
        padding: 0 1rem;
    }

    #header-content {
        padding: 1.25rem 0 !important;
    }

    #header-content ul {
        justify-content: flex-start;
        width: 100%;
    }

    .user-area {
        gap: 0.75rem;
    }

    .btn-exit-session {
        max-width: 100%;
        width: auto;
    }

    #wrapper-content:has(#wrap_cb) #header-content {
        padding: 1rem !important;
    }

    #wrapper-content:has(#wrap_cb) #header-content h1 {
        font-size: 1.35rem !important;
    }

    #wrap_cb,
    #wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) {
        grid-template-columns: 1fr;
    }

    #wrap_cb .dashboard-icon-block {
        min-height: 0;
    }

    #wrapper-content:has(#wrap_cb) #content > .row:not(#wrap_cb) .dashboard-icon-block {
        min-height: 130px;
    }

    #wrapper-content:has(#wrap_cb) #ad_wrap {
        height: auto !important;
        left: 1rem;
        right: 1rem;
        width: auto !important;
    }

    #wrapper-content:has(.wrap-content-block) #header-content,
    #wrapper-content:has(.display-detail) #header-content,
    #wrapper-content:has(.wrap-display-detail) #header-content,
    #wrapper-content:has(.survey-container) #header-content,
    #wrapper-content:has(.news-actions) #header-content {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem !important;
    }

    #wrapper-content:has(.wrap-content-block) #header-content .row {
        gap: 0.75rem;
    }

    #wrapper-content:has(.wrap-content-block) #header-content .row > [class*="col-"] {
        padding: 0 !important;
        width: 100% !important;
    }

    #wrapper-content:has(.wrap-content-block) #header-content ul,
    #wrapper-content:has(.display-detail) #header-content ul,
    #wrapper-content:has(.wrap-display-detail) #header-content ul,
    #wrapper-content:has(.survey-container) #header-content ul,
    #wrapper-content:has(.news-actions) #header-content ul {
        justify-content: flex-start;
        width: 100% !important;
    }

    #wrapper-content:has(.wrap-display-block) .wrap-content-block,
    #wrapper-content:has(.wrap-content-block > .wrap-slideshow-block) .wrap-content-block,
    #wrapper-content:has(.wrap-user-management-block) .col-none-padding,
    #wrapper-content:has(.wrap-slideshow-block) #content.slideshow-page-content,
    #wrapper-content:has(.wrap-slideshow-block) .slideshow-page-content {
        grid-template-columns: 1fr;
    }

    #wrapper-content:has(a[href$="events/add"]) .client-icon-block {
        min-height: 285px !important;
    }

    #wrapper-content:has(a[href$="events/add"]) .client-logo-block {
        height: 165px;
        min-height: 165px;
        width: 100%;
    }

    #wrapper-content:has(a[href$="events/add"]) .client-logo-block img {
        max-height: 132px;
        max-width: 80%;
    }

    #wrapper-content:has(a[href*="dp-displays/delete/"]) #content {
        grid-template-columns: 1fr;
    }

    #wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-display-detail:first-child,
    #wrapper-content:has(a[href*="dp-displays/delete/"]) .wrap-display-detail:last-child {
        grid-column: 1;
    }

    #wrapper-content:has(a[href*="dp-displays/delete/"]) #display_detail {
        grid-template-columns: 1fr;
    }

    #wrapper-content:has(a[href*="dp-displays/delete/"]) #remove-event {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    #wrapper-content:has(.wrap-display-block) .display-block,
    #wrapper-content:has(.wrap-slideshow-block) .display-block,
    #wrapper-content:has(.wrap-slideshow-block) .client-icon-block,
    #wrapper-content:has(.wrap-user-management-block) .client-icon-block {
        min-height: 0;
    }

    #wrapper-content:has(iframe[src*="filemanager"]) {
        margin-left: 0 !important;
    }

    .display-detail,
    .display-detail-custom-page,
    .client-detail {
        padding: 1rem !important;
    }

    form[name="addNewUser"] .display-detail,
    #wrapper-content[data-page-id] .page-detail-1,
    #wrapper-content[data-page-id] .page-detail-2 {
        grid-template-columns: 1fr;
    }

    #refresh_btn,
    #archive_btn {
        margin-left: 0 !important;
        width: 100%;
    }

    #content.tempalte-page-content,
    .wrap-client-of-template {
        float: none !important;
        width: 100% !important;
    }

    #exportModal .modal-dialog,
    #importModal .modal-dialog {
        margin: 1rem auto;
        width: calc(100% - 1rem);
    }

    #exportModal .modal-header,
    #importModal .modal-header,
    #exportModal .modal-body,
    #importModal .modal-body,
    #exportModal .modal-footer,
    #importModal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #exportModal .modal-footer,
    #importModal .modal-footer {
        flex-direction: column-reverse;
    }

    #exportModal .modal-footer .btn,
    #importModal .modal-footer .btn {
        width: 100%;
    }

    form[name="addNewTemplate"] #header-content.add-new-template,
    form[name="editTemplate"] #header-content.add-new-template,
    form[name="addNewTemplate"] .new-template-block,
    form[name="editTemplate"] .new-template-block,
    form[name="addNewTemplate"] .add-section,
    form[name="editTemplate"] .add-section {
        grid-template-columns: 1fr;
    }

    form[name="addNewTemplate"] #header-content.add-new-template h1,
    form[name="editTemplate"] #header-content.add-new-template h1 {
        white-space: normal;
    }

    form[name="addNewTemplate"] #header-content.add-new-template > ul,
    form[name="editTemplate"] #header-content.add-new-template > ul {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    form[name="addNewTemplate"] #header-content.add-new-template > ul li,
    form[name="editTemplate"] #header-content.add-new-template > ul li {
        flex: 1 1 auto;
    }

    form[name="addNewTemplate"] #header-content.add-new-template > ul a,
    form[name="addNewTemplate"] #header-content.add-new-template > ul button,
    form[name="editTemplate"] #header-content.add-new-template > ul a,
    form[name="editTemplate"] #header-content.add-new-template > ul button {
        width: 100%;
    }

    form[name="addNewTemplate"] .new-template-block .new-template-item:nth-child(3),
    form[name="editTemplate"] .new-template-block .new-template-item:nth-child(3),
    form[name="addNewTemplate"] .new-template-block .new-template-item:nth-child(4),
    form[name="editTemplate"] .new-template-block .new-template-item:nth-child(4),
    form[name="addNewTemplate"] .add-section .new-template-item,
    form[name="editTemplate"] .add-section .new-template-item {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 0 !important;
    }

    form[name="addNewTemplate"] #templateWidth,
    form[name="addNewTemplate"] #templateHeight,
    form[name="addNewTemplate"] #sectionWidth,
    form[name="addNewTemplate"] #sectionHeight,
    form[name="addNewTemplate"] #sectionX,
    form[name="addNewTemplate"] #sectionY,
    form[name="addNewTemplate"] #snapGridSize,
    form[name="editTemplate"] #templateWidth,
    form[name="editTemplate"] #templateHeight,
    form[name="editTemplate"] #sectionWidth,
    form[name="editTemplate"] #sectionHeight,
    form[name="editTemplate"] #sectionX,
    form[name="editTemplate"] #sectionY,
    form[name="editTemplate"] #snapGridSize {
        width: 100% !important;
    }

    #wrapper-content:has(#table_version) #content .display-detail {
        grid-template-columns: 1fr;
        padding: 1rem !important;
    }

    #table_version_wrapper .dataTables_length,
    #table_version_wrapper .dataTables_filter {
        float: none;
        margin-bottom: 0.75rem;
        width: 100%;
    }

    #table_version_wrapper .dataTables_filter label,
    #table_version_wrapper .dataTables_length label {
        justify-content: space-between;
        width: 100%;
    }

    #table_version_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        min-width: 0;
    }

    #wrapper-content:has(#table_log_access) #refresh_btn,
    #wrapper-content:has(#table_log_access) #archive_btn {
        margin: 0 0 0.75rem 0 !important;
        width: 100%;
    }

    #table_log_access_wrapper .dataTables_length,
    #table_log_access_wrapper .dataTables_filter {
        float: none;
        margin-bottom: 0.75rem;
        width: 100%;
    }

    #table_log_access_wrapper .dataTables_filter label,
    #table_log_access_wrapper .dataTables_length label {
        justify-content: space-between;
        width: 100%;
    }

    #table_log_access_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        min-width: 0;
    }

    #modal_gn .modal-footer,
    #modal_edit .modal-footer {
        flex-direction: column-reverse;
    }

    #modal_gn .modal-footer .btn,
    #modal_edit .modal-footer .btn {
        width: 100%;
    }

    #modal_edit .modal-dialog {
        margin: 1rem auto;
        width: calc(100% - 1rem);
    }

    #modal_edit .display-detail {
        grid-template-columns: 1fr;
    }
}

/* Final dashboard cascade layer: keep redesigned dashboards above legacy selectors. */
#wrapper-content.amtv-dashboard,
#wrapper-content.amtv-dashboard:has(#wrap_cb) {
    margin-left: 280px !important;
    padding: 1.5rem 2rem 3rem !important;
}

#wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero,
#wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.13), transparent 24rem) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    display: flex !important;
    float: none !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    margin: 0 0 1.25rem !important;
    padding: 1.25rem !important;
    position: relative !important;
    width: 100% !important;
}

html[data-theme="dark"] #wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero,
body[data-theme="dark"] #wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.15), transparent 24rem) !important;
}

#wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero h1,
#wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero h1 {
    color: var(--amtv-text) !important;
    display: block !important;
    flex-direction: initial !important;
    font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
}

#wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero h1::after {
    content: none !important;
}

#wrapper-content.amtv-dashboard #content.amtv-dashboard__content,
#wrapper-content.amtv-dashboard:has(#wrap_cb) #content.amtv-dashboard__content {
    float: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid,
#wrapper-content.amtv-dashboard:has(#wrap_cb) #wrap_cb.amtv-client-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: minmax(270px, 0.95fr) minmax(310px, 1.25fr) minmax(260px, 1fr) minmax(240px, 0.9fr) !important;
    margin: 0 !important;
}

#wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid > * {
    float: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    width: auto !important;
}

#wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid .amtv-panel {
    min-height: 360px !important;
}

#wrapper-content.amtv-dashboard .amtv-shortcut-grid {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 1280px) {
    #wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid,
    #wrapper-content.amtv-dashboard:has(#wrap_cb) #wrap_cb.amtv-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #wrapper-content.amtv-dashboard .amtv-shortcut-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    #wrapper-content.amtv-dashboard,
    #wrapper-content.amtv-dashboard:has(#wrap_cb) {
        margin-left: 0 !important;
        padding: 1rem 1rem 2rem !important;
    }

    #wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero,
    #wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid,
    #wrapper-content.amtv-dashboard:has(#wrap_cb) #wrap_cb.amtv-client-grid {
        grid-template-columns: 1fr !important;
    }

    #wrapper-content.amtv-dashboard #wrap_cb.amtv-client-grid .amtv-panel {
        min-height: 0 !important;
    }

    #wrapper-content.amtv-dashboard .amtv-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    #wrapper-content.amtv-dashboard #header-content.amtv-dashboard-hero h1,
    #wrapper-content.amtv-dashboard:has(#wrap_cb) #header-content.amtv-dashboard-hero h1 {
        font-size: 1.7rem !important;
    }

    #wrapper-content.amtv-dashboard .amtv-shortcut-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Global admin SaaS layer for legacy pages and subpages. */
.amtv-admin-app {
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.08), transparent 30rem),
        linear-gradient(180deg, var(--amtv-bg, #f6f8fb), var(--amtv-bg, #f6f8fb)) !important;
    color: var(--amtv-text, #111827);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    min-width: 320px;
}

.amtv-admin-app *,
.amtv-admin-app *::before,
.amtv-admin-app *::after {
    letter-spacing: 0;
}

.amtv-admin-app #wrap-content {
    background: transparent !important;
    min-height: 100vh;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.amtv-admin-app #main-content {
    background: transparent !important;
    margin-top: 54px;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) {
    margin-left: 280px !important;
    padding: 1.5rem 2rem 3rem !important;
    position: relative;
}

.amtv-admin-app #wrapper-content-o {
    margin-left: 280px !important;
    padding: 1.5rem 2rem 3rem !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 22rem) !important;
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-md);
    display: flex !important;
    float: none !important;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 0 1.25rem !important;
    min-height: 86px;
    padding: 1.1rem 1.2rem !important;
    position: relative !important;
    width: 100% !important;
    z-index: 8;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content,
body[data-theme="dark"].amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 22rem) !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content h1 {
    color: var(--amtv-text) !important;
    display: block !important;
    flex: 0 1 auto;
    font-size: 1.72rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    max-width: 760px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content h1::after {
    color: var(--amtv-muted);
    content: "Manage workspace configuration and content.";
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 0.35rem;
}

.amtv-admin-app #wrapper-content:has(.client-icon-block) #header-content h1::after,
.amtv-admin-app #wrapper-content:has(.display-block) #header-content h1::after,
.amtv-admin-app #wrapper-content:has(.wrap-slideshow-block) #header-content h1::after {
    content: "Browse, filter, and manage items in this workspace.";
}

.amtv-admin-app #wrapper-content:has(.display-detail) #header-content h1::after,
.amtv-admin-app #wrapper-content:has(.page-detail) #header-content h1::after,
.amtv-admin-app #wrapper-content:has(form) #header-content h1::after {
    content: "Review details, make changes, then save when ready.";
}

.amtv-admin-app #wrapper-content:has(table.data-table) #header-content h1::after,
.amtv-admin-app #wrapper-content:has(.dataTables_wrapper) #header-content h1::after {
    content: "Monitor activity, export reports, and inspect records.";
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content ul {
    align-items: center;
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content li {
    display: inline-flex !important;
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a,
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close),
.amtv-admin-app .btn-template-submit,
.amtv-admin-app .link-as-button {
    align-items: center;
    background: var(--amtv-accent) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    gap: 0.5rem;
    justify-content: center;
    line-height: 1 !important;
    min-height: 42px !important;
    padding: 0.72rem 0.9rem !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
    white-space: nowrap;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a:hover,
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close):hover,
.amtv-admin-app .btn-template-submit:hover,
.amtv-admin-app .link-as-button:hover {
    background: var(--amtv-accent-strong) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[id*="back"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="cancel"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="client"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="display"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="template"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="events"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="slideshow"],
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a[href$="group"],
.amtv-admin-app .btn-secondary,
.amtv-admin-app .btn-default,
.amtv-admin-app .btn-secondary-modern {
    background: var(--amtv-surface-solid) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a.delete_btn,
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content .delete_btn,
.amtv-admin-app .delete_btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.amtv-admin-app .unenable-button,
.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content .unenable-button {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
    box-shadow: none !important;
    color: var(--amtv-subtle) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.amtv-admin-app #wrapper-content:not(.amtv-dashboard) #content {
    float: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app #content > .row,
.amtv-admin-app .wrap-content-block > .row,
.amtv-admin-app .display-detail > .row,
.amtv-admin-app .page-detail > .row {
    margin-left: -0.6rem;
    margin-right: -0.6rem;
}

.amtv-admin-app .wrap-content-block,
.amtv-admin-app .wrap-client-page,
.amtv-admin-app .display-detail,
.amtv-admin-app .wrap-display-detail,
.amtv-admin-app .wrap-preview-slideshow,
.amtv-admin-app .wrap-assign-slideshow,
.amtv-admin-app .display-news-detail,
.amtv-admin-app .survey-container,
.amtv-admin-app .news-actions,
.amtv-admin-app .display-detail-content,
.amtv-admin-app #content > .dashboard-icon-block {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text);
}

.amtv-admin-app .wrap-content-block,
.amtv-admin-app .wrap-client-page,
.amtv-admin-app .display-detail,
.amtv-admin-app .display-news-detail,
.amtv-admin-app .survey-container,
.amtv-admin-app .news-actions,
.amtv-admin-app .display-detail-content {
    padding: 1.15rem !important;
}

.amtv-admin-app .wrap-display-detail {
    padding: 0 !important;
}

.amtv-admin-app .wrap-content-block::before,
.amtv-admin-app .wrap-content-block::after,
.amtv-admin-app .display-detail::before,
.amtv-admin-app .display-detail::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app .dashboard-icon-block,
.amtv-admin-app .client-icon-block,
.amtv-admin-app .display-block,
.amtv-admin-app .page-of-slideshow-block,
.amtv-admin-app .instance-of-section,
.amtv-admin-app .client-logo-block,
.amtv-admin-app .wrap-client-of-template,
.amtv-admin-app .user-of-client > div,
.amtv-admin-app .filter-user-of-client-block,
.amtv-admin-app .new-template-block {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.amtv-admin-app .dashboard-icon-block:hover,
.amtv-admin-app .client-icon-block:hover,
.amtv-admin-app .display-block:hover,
.amtv-admin-app .page-of-slideshow-block:hover,
.amtv-admin-app .instance-of-section:hover {
    border-color: rgba(37, 99, 235, 0.34) !important;
    box-shadow: var(--amtv-shadow-md) !important;
    transform: translateY(-2px);
}

.amtv-admin-app .client-icon-block h3,
.amtv-admin-app .display-block h1,
.amtv-admin-app .display-block h3,
.amtv-admin-app .dashboard-icon-block h3,
.amtv-admin-app .wrap-content-block h2,
.amtv-admin-app .display-detail h2,
.amtv-admin-app .display-detail h3,
.amtv-admin-app .new-template-block h2 {
    color: var(--amtv-text) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

.amtv-admin-app .client-icon-block h3 a,
.amtv-admin-app .display-block h1 a,
.amtv-admin-app .display-block h3 a,
.amtv-admin-app .page-of-slideshow-block a {
    color: var(--amtv-text) !important;
    text-decoration: none !important;
}

.amtv-admin-app .client-logo-block,
.amtv-admin-app .display-feature,
.amtv-admin-app .slideshow-feature,
.amtv-admin-app .image-of-page {
    align-items: center;
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.amtv-admin-app .client-logo-block img,
.amtv-admin-app .display-feature img,
.amtv-admin-app .slideshow-feature img,
.amtv-admin-app .image-of-page img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.amtv-admin-app .wrap-action-for-template,
.amtv-admin-app .action-for-template-lv2,
.amtv-admin-app .dropdown-menu {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app .dropdown-menu > li > a,
.amtv-admin-app .action-for-template-lv2 a {
    color: var(--amtv-text) !important;
    font-weight: 700;
    padding: 0.65rem 0.85rem !important;
}

.amtv-admin-app .dropdown-menu > li > a:hover,
.amtv-admin-app .action-for-template-lv2 a:hover {
    background: var(--amtv-surface-muted) !important;
    color: var(--amtv-accent) !important;
}

.amtv-admin-app .delete_color,
.amtv-admin-app .dropdown-menu .delete_color,
.amtv-admin-app .action-for-template-lv2 .delete_color {
    color: var(--amtv-danger) !important;
}

.amtv-admin-app label {
    color: var(--amtv-text) !important;
    font-size: 0.88rem;
    font-weight: 800 !important;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}

.amtv-admin-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.amtv-admin-app select,
.amtv-admin-app textarea,
.amtv-admin-app .form-control,
.amtv-admin-app .bootstrap-tagsinput,
.amtv-admin-app .select2-container .select2-selection {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--amtv-text) !important;
    font-size: 0.92rem !important;
    font-weight: 600;
    min-height: 42px;
    padding: 0.62rem 0.75rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.amtv-admin-app textarea,
.amtv-admin-app textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.amtv-admin-app input::placeholder,
.amtv-admin-app textarea::placeholder {
    color: var(--amtv-subtle);
}

.amtv-admin-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
.amtv-admin-app select:focus,
.amtv-admin-app textarea:focus,
.amtv-admin-app .form-control:focus,
.amtv-admin-app .bootstrap-tagsinput:focus,
.amtv-admin-app .select2-container--focus .select2-selection {
    border-color: var(--amtv-accent) !important;
    box-shadow: 0 0 0 4px var(--amtv-ring) !important;
    outline: 2px solid transparent !important;
}

.amtv-admin-app input[readonly],
.amtv-admin-app textarea[readonly],
.amtv-admin-app input:disabled,
.amtv-admin-app select:disabled,
.amtv-admin-app textarea:disabled {
    background: var(--amtv-surface-muted) !important;
    color: var(--amtv-muted) !important;
    cursor: not-allowed;
}

.amtv-admin-app input[type="checkbox"],
.amtv-admin-app input[type="radio"] {
    accent-color: var(--amtv-accent);
    min-height: auto;
}

.amtv-admin-app .display-detail > .row,
.amtv-admin-app .page-detail > .row,
.amtv-admin-app .display-news-detail > .row,
.amtv-admin-app .new-template-item,
.amtv-admin-app .survey-container .row {
    align-items: center;
    border-bottom: 1px solid var(--amtv-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0;
    margin-bottom: 0 !important;
    padding: 0.85rem 0 !important;
}

.amtv-admin-app .display-detail > .row:last-child,
.amtv-admin-app .page-detail > .row:last-child,
.amtv-admin-app .display-news-detail > .row:last-child,
.amtv-admin-app .new-template-item:last-child {
    border-bottom: 0;
}

.amtv-admin-app .btn,
.amtv-admin-app button:not(.close):not(.amtv-theme-toggle):not(.amtv-ad-preview):not(.amtv-status-metric):not(.amtv-monitor-button),
.amtv-admin-app input[type="button"],
.amtv-admin-app input[type="submit"] {
    border-radius: 10px !important;
    font-weight: 800 !important;
    min-height: 40px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.amtv-admin-app .btn-primary {
    background: var(--amtv-accent) !important;
    border-color: var(--amtv-accent) !important;
    color: #ffffff !important;
}

.amtv-admin-app .btn-primary:hover {
    background: var(--amtv-accent-strong) !important;
    border-color: var(--amtv-accent-strong) !important;
}

.amtv-admin-app .btn-danger {
    background: var(--amtv-danger) !important;
    border-color: var(--amtv-danger) !important;
    color: #ffffff !important;
}

.amtv-admin-app table.table,
.amtv-admin-app table.data-table,
.amtv-admin-app .dataTables_wrapper table,
.amtv-admin-app .bootstrap-table .table {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-collapse: separate !important;
    border-radius: 12px !important;
    border-spacing: 0;
    box-shadow: var(--amtv-shadow-sm);
    color: var(--amtv-text) !important;
    overflow: hidden;
    width: 100% !important;
}

.amtv-admin-app table.table > thead > tr > th,
.amtv-admin-app table.data-table > thead > tr > th,
.amtv-admin-app .dataTables_wrapper table > thead > tr > th {
    background: var(--amtv-surface-muted) !important;
    border-bottom: 1px solid var(--amtv-border) !important;
    color: var(--amtv-muted) !important;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    padding: 0.85rem 0.95rem !important;
    text-transform: uppercase;
}

.amtv-admin-app table.table > tbody > tr > td,
.amtv-admin-app table.data-table > tbody > tr > td,
.amtv-admin-app .dataTables_wrapper table > tbody > tr > td {
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
    padding: 0.82rem 0.95rem !important;
    vertical-align: middle !important;
}

.amtv-admin-app table.table > tbody > tr:hover > td,
.amtv-admin-app table.data-table > tbody > tr:hover > td,
.amtv-admin-app .dataTables_wrapper table > tbody > tr:hover > td {
    background: rgba(37, 99, 235, 0.04) !important;
}

.amtv-admin-app .dataTables_wrapper,
.amtv-admin-app .bootstrap-table {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm);
    padding: 1rem !important;
}

.amtv-admin-app .dataTables_length,
.amtv-admin-app .dataTables_filter,
.amtv-admin-app .dataTables_info,
.amtv-admin-app .dataTables_paginate {
    color: var(--amtv-muted) !important;
    font-size: 0.88rem;
    font-weight: 700;
}

.amtv-admin-app .pagination > li > a,
.amtv-admin-app .pagination > li > span,
.amtv-admin-app .dataTables_paginate .paginate_button {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 8px !important;
    color: var(--amtv-text) !important;
    margin: 0 0.15rem !important;
}

.amtv-admin-app .pagination > .active > a,
.amtv-admin-app .pagination > .active > span,
.amtv-admin-app .dataTables_paginate .paginate_button.current {
    background: var(--amtv-accent) !important;
    border-color: var(--amtv-accent) !important;
    color: #ffffff !important;
}

.amtv-admin-app .alert {
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm);
    font-weight: 700;
    line-height: 1.45;
    padding: 0.85rem 1rem !important;
}

.amtv-admin-app .alert-success {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.amtv-admin-app .alert-danger,
.amtv-admin-app .error_msg {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.amtv-admin-app .alert-warning {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.amtv-admin-app .modal-content,
.amtv-admin-app .jconfirm-box {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-lg) !important;
    color: var(--amtv-text) !important;
    overflow: hidden;
}

.amtv-admin-app .modal-header,
.amtv-admin-app .modal-footer {
    border-color: var(--amtv-border) !important;
    padding: 1rem 1.15rem !important;
}

.amtv-admin-app .modal-title,
.amtv-admin-app .modal-header h3,
.amtv-admin-app .modal-header h4 {
    color: var(--amtv-text) !important;
    font-weight: 850 !important;
    margin: 0 !important;
}

.amtv-admin-app .modal-body {
    color: var(--amtv-muted);
    padding: 1.15rem !important;
}

.amtv-admin-app iframe {
    border-radius: 10px;
}

.amtv-admin-app .note-editor,
.amtv-admin-app .note-toolbar,
.amtv-admin-app .note-editing-area {
    border-color: var(--amtv-border) !important;
}

.amtv-admin-app .note-editor {
    border-radius: 12px !important;
    overflow: hidden;
}

.amtv-admin-app .note-toolbar {
    background: var(--amtv-surface-muted) !important;
}

.amtv-admin-app .note-editable {
    background: var(--amtv-surface-solid) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.amtv-admin-app ::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
}

.amtv-admin-app ::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

.amtv-admin-app ::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.48);
    background-clip: content-box;
}

html[data-theme="dark"] .amtv-admin-app .wrap-content-block,
html[data-theme="dark"] .amtv-admin-app .wrap-client-page,
html[data-theme="dark"] .amtv-admin-app .display-detail,
html[data-theme="dark"] .amtv-admin-app .wrap-display-detail,
html[data-theme="dark"] .amtv-admin-app .wrap-preview-slideshow,
html[data-theme="dark"] .amtv-admin-app .wrap-assign-slideshow,
html[data-theme="dark"] .amtv-admin-app .display-news-detail,
html[data-theme="dark"] .amtv-admin-app .survey-container,
html[data-theme="dark"] .amtv-admin-app .news-actions,
html[data-theme="dark"] .amtv-admin-app .dashboard-icon-block,
html[data-theme="dark"] .amtv-admin-app .client-icon-block,
html[data-theme="dark"] .amtv-admin-app .display-block,
html[data-theme="dark"] .amtv-admin-app .page-of-slideshow-block,
html[data-theme="dark"] .amtv-admin-app table.table,
html[data-theme="dark"] .amtv-admin-app table.data-table {
    background: var(--amtv-surface) !important;
}

html[data-theme="dark"] .amtv-admin-app .client-logo-block,
html[data-theme="dark"] .amtv-admin-app .display-feature,
html[data-theme="dark"] .amtv-admin-app .slideshow-feature,
html[data-theme="dark"] .amtv-admin-app .image-of-page,
html[data-theme="dark"] .amtv-admin-app table.table > thead > tr > th,
html[data-theme="dark"] .amtv-admin-app table.data-table > thead > tr > th {
    background: var(--amtv-surface-muted) !important;
}

@media (max-width: 991px) {
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard),
    .amtv-admin-app #wrapper-content-o {
        margin-left: 0 !important;
        padding: 1rem 1rem 2rem !important;
    }

    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 1rem !important;
    }

    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content h1 {
        font-size: 1.45rem !important;
        width: 100% !important;
    }

    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content ul {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a,
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close) {
        flex: 1 1 auto;
        min-width: min(100%, 150px);
    }

    .amtv-admin-app .display-detail > .row,
    .amtv-admin-app .page-detail > .row,
    .amtv-admin-app .display-news-detail > .row,
    .amtv-admin-app .new-template-item {
        align-items: stretch;
        flex-direction: column;
    }

    .amtv-admin-app .display-detail > .row > [class*="col-"],
    .amtv-admin-app .page-detail > .row > [class*="col-"],
    .amtv-admin-app .display-news-detail > .row > [class*="col-"] {
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .amtv-admin-app .dataTables_wrapper,
    .amtv-admin-app .bootstrap-table,
    .amtv-admin-app .table-responsive {
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content ul {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content li,
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content a,
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close) {
        width: 100%;
    }
}

/* Menu-linked page families and subpages. */
.amtv-admin-app.amtv-menu-page #sidebar {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98)) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.amtv-admin-app.amtv-menu-page .menu-sidebar > li > a {
    min-height: 46px;
}

.amtv-admin-app.amtv-menu-page .menu-sidebar li.active-parent > a,
.amtv-admin-app.amtv-menu-page .menu-sidebar li.has-child.active > a {
    background: rgba(37, 99, 235, 0.14) !important;
    color: #ffffff !important;
}

.amtv-admin-app.amtv-menu-page .menu-sidebar li.active > a {
    background: var(--amtv-accent) !important;
    color: #ffffff !important;
}

.amtv-admin-app.amtv-menu-page .menu-sidebar li.active > a i,
.amtv-admin-app.amtv-menu-page .menu-sidebar li.active-parent > a i {
    color: #ffffff !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="client"] #header-content h1::after {
    content: "Manage client workspaces, users, access, services, and account configuration.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="display"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="digital-poster-display"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="survey-display"] #header-content h1::after {
    content: "Manage display endpoints, assignments, status, monitoring, and playback configuration.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="group"] #header-content h1::after {
    content: "Organise displays into operational groups and assign content quickly.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="slideshow"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="template"] #header-content h1::after {
    content: "Build, preview, and manage reusable content layouts.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="events"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="event"] #header-content h1::after {
    content: "Manage event posters, groups, display rules, reports, and AI summaries.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="comms-ads"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="newsevents"] #header-content h1::after {
    content: "Create and schedule audience communications, campaigns, and notices.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="digital-wayfinding"] #header-content h1::after {
    content: "Manage destinations, content pages, translations, lifts, and wayfinding reports.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="survey"] #header-content h1::after {
    content: "Create surveys, review responses, and manage survey display delivery.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="staff"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="staff-department"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="staff-group"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="machine"] #header-content h1::after {
    content: "Manage roster content, teams, departments, machines, and screen assignments.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="bed-management"] #header-content h1::after {
    content: "Manage beds, rooms, clients, availability, and operational status.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="settings"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="apikey"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="canva"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="asset"] #header-content h1::after,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="fonts"] #header-content h1::after {
    content: "Configure integrations, system behaviour, assets, fonts, and platform preferences.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-family="reports"] #header-content h1::after {
    content: "Inspect operational data, filter records, and export reporting outputs.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-mode="create"] #header-content h1::after {
    content: "Complete the required details, then save to create this item.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-mode="detail"] #header-content h1::after {
    content: "Review configuration, update details, and save changes when ready.";
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-mode="report"] #header-content h1::after {
    content: "Review performance, filter the data, and export insights.";
}

.amtv-admin-app .slideshow-page-content,
.amtv-admin-app .tempalte-page-content,
.amtv-admin-app .add-section-block,
.amtv-admin-app .page-detail-content,
.amtv-admin-app .instance-detail-content {
    float: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app .wrap-content-block:has(.wrap-display-block),
.amtv-admin-app .wrap-content-block:has(.wrap-slideshow-block),
.amtv-admin-app .wrap-content-block:has(.wrap-user-management-block),
.amtv-admin-app .wrap-content-block:has(.client-icon-block),
.amtv-admin-app .wrap-content-block:has(.display-block) {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.amtv-admin-app .wrap-content-block:has(.wrap-display-block)::before,
.amtv-admin-app .wrap-content-block:has(.wrap-display-block)::after,
.amtv-admin-app .wrap-content-block:has(.wrap-slideshow-block)::before,
.amtv-admin-app .wrap-content-block:has(.wrap-slideshow-block)::after,
.amtv-admin-app .wrap-content-block:has(.wrap-user-management-block)::before,
.amtv-admin-app .wrap-content-block:has(.wrap-user-management-block)::after {
    display: none !important;
}

.amtv-admin-app .wrap-display-block,
.amtv-admin-app .wrap-slideshow-block,
.amtv-admin-app .wrap-user-management-block,
.amtv-admin-app .wrap-page-of-slideshow-block {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app .display-block,
.amtv-admin-app .client-icon-block {
    display: flex !important;
    flex-direction: column;
    min-height: 270px;
    overflow: hidden;
    padding: 1rem !important;
    position: relative;
}

.amtv-admin-app .display-block > a,
.amtv-admin-app .client-icon-block > a {
    color: inherit !important;
    text-decoration: none !important;
}

.amtv-admin-app .display-feature,
.amtv-admin-app .slideshow-feature,
.amtv-admin-app .client-logo-block {
    border-radius: 10px !important;
    height: 132px !important;
    margin: 0 0 0.9rem !important;
    min-height: 132px;
    width: 100% !important;
}

.amtv-admin-app .display-block iframe,
.amtv-admin-app .client-icon-block iframe,
.amtv-admin-app .page-of-slideshow-block iframe {
    background: var(--amtv-surface-muted);
    border: 0 !important;
    border-radius: 8px;
    width: 100% !important;
}

.amtv-admin-app .display-block table.table {
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    margin: 0.35rem 0 0 !important;
}

.amtv-admin-app .display-block table.table td {
    padding: 0.45rem 0.55rem !important;
}

.amtv-admin-app .display-group-feature {
    color: var(--amtv-accent) !important;
    width: 34px;
}

.amtv-admin-app .wrap-page-of-slideshow,
.amtv-admin-app .page-of-slideshow,
.amtv-admin-app .page-of-slideshow-detail,
.amtv-admin-app .assign-slideshow-content,
.amtv-admin-app .assign-slideshow-title,
.amtv-admin-app .wrap-template,
.amtv-admin-app .wrap-instance-of-page,
.amtv-admin-app .wrap-instance-of-section {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app .page-of-slideshow-detail,
.amtv-admin-app .assign-slideshow-content,
.amtv-admin-app .wrap-instance-of-page,
.amtv-admin-app .wrap-instance-of-section {
    padding: 1rem !important;
}

.amtv-admin-app .page-of-slideshow-detail-title,
.amtv-admin-app .assign-slideshow-title h3,
.amtv-admin-app .section-name-of-page,
.amtv-admin-app .instance-name-of-section {
    color: var(--amtv-text) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.85rem !important;
}

.amtv-admin-app .page-of-slideshow-block {
    min-height: 118px;
    padding: 0.85rem !important;
}

.amtv-admin-app .page-of-slideshow-block ul,
.amtv-admin-app .client-icon-block ul,
.amtv-admin-app .display-block ul {
    list-style: none !important;
}

.amtv-admin-app .table-responsive.news-actions,
.amtv-admin-app .news-actions,
.amtv-admin-app .survey-container,
.amtv-admin-app .fixed-table-container,
.amtv-admin-app .bootstrap-table .fixed-table-toolbar,
.amtv-admin-app .bootstrap-table .fixed-table-pagination {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app .fixed-table-container {
    overflow: hidden;
}

.amtv-admin-app .bootstrap-table .fixed-table-toolbar,
.amtv-admin-app .bootstrap-table .fixed-table-pagination {
    margin-bottom: 0.75rem;
    padding: 0.8rem !important;
}

.amtv-admin-app .bootstrap-table .search input,
.amtv-admin-app .fixed-table-toolbar input,
.amtv-admin-app .fixed-table-toolbar select {
    min-width: 220px;
}

.amtv-admin-app .display-detail:has(#event_setting),
.amtv-admin-app .display-detail:has(#event_admin_setting),
.amtv-admin-app .display-detail:has(#poster_detail),
.amtv-admin-app .display-detail:has(#table_services),
.amtv-admin-app .display-detail:has(#table_instances) {
    display: block;
}

.amtv-admin-app #event_setting,
.amtv-admin-app #event_admin_setting,
.amtv-admin-app #group-of-event,
.amtv-admin-app #group-of-event-settings,
.amtv-admin-app #display-of-group,
.amtv-admin-app #unassigned-display {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    padding: 1rem !important;
}

.amtv-admin-app #event_setting > .row,
.amtv-admin-app #event_admin_setting > .row,
.amtv-admin-app #group-of-event-settings > .row {
    border-bottom: 1px solid var(--amtv-border);
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.8rem 0 !important;
}

.amtv-admin-app #event_setting > .row:last-child,
.amtv-admin-app #event_admin_setting > .row:last-child,
.amtv-admin-app #group-of-event-settings > .row:last-child {
    border-bottom: 0;
}

.amtv-admin-app .bed.table_div,
.amtv-admin-app .room_bed,
.amtv-admin-app .bed_div {
    border-color: var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm);
}

.amtv-admin-app #table_wrap,
.amtv-admin-app .table_wrap,
.amtv-admin-app .board_table {
    border-radius: 12px;
}

.amtv-admin-app .display_filter,
.amtv-admin-app .filter-user-of-client-block,
.amtv-admin-app .filter-display-block,
.amtv-admin-app .filter-slideshow-block {
    align-items: center;
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem !important;
}

.amtv-admin-app .display_filter label,
.amtv-admin-app .filter-user-of-client-block label,
.amtv-admin-app .filter-display-block label {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    margin: 0 !important;
    min-height: 36px;
    padding: 0.4rem 0.7rem;
}

.amtv-admin-app .display_filter label:has(input:checked),
.amtv-admin-app .filter-display-block label:has(input:checked) {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
    color: var(--amtv-accent) !important;
}

.amtv-admin-app .new-template-block,
.amtv-admin-app .page-detail-1,
.amtv-admin-app .page-detail-2,
.amtv-admin-app .template-section,
.amtv-admin-app .template-section-active {
    border-radius: 12px !important;
}

.amtv-admin-app .template-section-active {
    border-color: var(--amtv-accent) !important;
    box-shadow: 0 0 0 4px var(--amtv-ring) !important;
}

.amtv-admin-app .modal-lg {
    max-width: calc(100vw - 2rem);
}

.amtv-admin-app .modal iframe[src*="filemanager"] {
    min-height: 500px;
    width: 100% !important;
}

@media (max-width: 1280px) {
    .amtv-admin-app .wrap-content-block:has(.wrap-display-block),
    .amtv-admin-app .wrap-content-block:has(.wrap-slideshow-block),
    .amtv-admin-app .wrap-content-block:has(.wrap-user-management-block),
    .amtv-admin-app .wrap-content-block:has(.client-icon-block),
    .amtv-admin-app .wrap-content-block:has(.display-block) {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 991px) {
    .amtv-admin-app .wrap-content-block:has(.wrap-display-block),
    .amtv-admin-app .wrap-content-block:has(.wrap-slideshow-block),
    .amtv-admin-app .wrap-content-block:has(.wrap-user-management-block),
    .amtv-admin-app .wrap-content-block:has(.client-icon-block),
    .amtv-admin-app .wrap-content-block:has(.display-block) {
        grid-template-columns: 1fr;
    }

    .amtv-admin-app .display-feature,
    .amtv-admin-app .slideshow-feature,
    .amtv-admin-app .client-logo-block {
        height: 116px !important;
        min-height: 116px;
    }

    .amtv-admin-app .filter-user-of-client-block,
    .amtv-admin-app .filter-display-block,
    .amtv-admin-app .filter-slideshow-block,
    .amtv-admin-app .display_filter {
        align-items: stretch;
        flex-direction: column;
    }

    .amtv-admin-app .bootstrap-table .search input,
    .amtv-admin-app .fixed-table-toolbar input,
    .amtv-admin-app .fixed-table-toolbar select {
        min-width: 0;
        width: 100% !important;
    }
}

/* Focused polish for requested menu pages: Clients, Events, DP Displays, AI Reports. */
.amtv-admin-app .amtv-page-insights {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.amtv-admin-app .amtv-page-insight-card {
    align-items: center;
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    display: flex;
    gap: 0.85rem;
    min-height: 92px;
    padding: 1rem;
}

.amtv-admin-app .amtv-page-insight-card > svg {
    background: rgba(37, 99, 235, 0.1);
    border-radius: 10px;
    color: var(--amtv-accent);
    flex: 0 0 42px;
    height: 42px;
    padding: 0.65rem;
    width: 42px;
}

.amtv-admin-app .amtv-page-insight-card--success > svg {
    background: rgba(22, 163, 74, 0.1);
    color: var(--amtv-success);
}

.amtv-admin-app .amtv-page-insight-card--danger > svg {
    background: rgba(220, 38, 38, 0.1);
    color: var(--amtv-danger);
}

.amtv-admin-app .amtv-page-insight-card span {
    color: var(--amtv-muted);
    display: block;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 0.38rem;
    text-transform: uppercase;
}

.amtv-admin-app .amtv-page-insight-card strong {
    color: var(--amtv-text);
    display: block;
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
}

.amtv-admin-app .amtv-page-toolbar {
    align-items: center;
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px;
    box-shadow: var(--amtv-shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.amtv-admin-app .amtv-search-control {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border-strong);
    border-radius: 10px;
    color: var(--amtv-muted) !important;
    display: flex;
    flex: 1 1 280px;
    gap: 0.6rem;
    margin: 0 !important;
    min-height: 44px;
    padding: 0 0.75rem;
}

.amtv-admin-app .amtv-search-control svg {
    flex: 0 0 1rem;
    height: 1rem;
    width: 1rem;
}

.amtv-admin-app .amtv-search-control input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--amtv-text) !important;
    flex: 1 1 auto;
    min-height: 42px;
    min-width: 0;
    padding: 0 !important;
}

.amtv-admin-app .amtv-search-control input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.amtv-admin-app .amtv-search-control:focus-within {
    border-color: var(--amtv-accent) !important;
    box-shadow: 0 0 0 4px var(--amtv-ring);
}

.amtv-admin-app .amtv-segmented-control {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
}

.amtv-admin-app .amtv-segmented-control button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--amtv-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 850 !important;
    min-height: 34px !important;
    padding: 0.42rem 0.68rem !important;
}

.amtv-admin-app .amtv-segmented-control button:hover {
    color: var(--amtv-accent) !important;
}

.amtv-admin-app .amtv-segmented-control button.is-active {
    background: var(--amtv-surface-solid) !important;
    border-color: var(--amtv-border) !important;
    box-shadow: var(--amtv-shadow-sm);
    color: var(--amtv-text) !important;
}

.amtv-admin-app .amtv-toolbar-count {
    color: var(--amtv-muted);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

.amtv-admin-app .amtv-toolbar-count strong {
    color: var(--amtv-text);
}

.amtv-admin-app .amtv-empty-results {
    align-items: center;
    background: var(--amtv-surface) !important;
    border: 1px dashed var(--amtv-border-strong) !important;
    border-radius: 12px;
    color: var(--amtv-muted);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 220px;
    padding: 2rem;
    text-align: center;
}

.amtv-admin-app .amtv-empty-results svg {
    color: var(--amtv-subtle);
    height: 1.7rem;
    width: 1.7rem;
}

.amtv-admin-app .amtv-empty-results strong {
    color: var(--amtv-text);
    font-size: 1rem;
    font-weight: 850;
}

.amtv-admin-app .amtv-empty-results span {
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 360px;
}

.amtv-admin-app .amtv-empty-results a {
    align-items: center;
    background: var(--amtv-accent);
    border-radius: 10px;
    color: #ffffff !important;
    display: inline-flex;
    font-weight: 850;
    min-height: 40px;
    padding: 0 0.85rem;
    text-decoration: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content h1::after {
    content: "Manage client workspaces, users, favourites, imports, exports, and delegated access." !important;
}

.amtv-admin-app #wrapper-content.amtv-page-events #header-content h1::after {
    content: "Manage event workspaces, poster groups, reports, and event-level configuration." !important;
}

.amtv-admin-app #wrapper-content.amtv-page-dp-displays #header-content h1::after {
    content: "Monitor and manage digital poster displays, event assignments, and orientation settings." !important;
}

.amtv-admin-app #wrapper-content.amtv-page-ai-reports #header-content h1::after {
    content: "Review generated AI report history, open reports, export PDFs, and clear archived outputs." !important;
}

.amtv-admin-app .amtv-client-management > .row {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.amtv-admin-app .amtv-client-management > .row::before,
.amtv-admin-app .amtv-client-management > .row::after {
    display: none !important;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:first-child > .row,
.amtv-admin-app .amtv-events-page .slideshow-page-content,
.amtv-admin-app .amtv-dp-displays-page .wrap-content-block {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:first-child > .row::before,
.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:first-child > .row::after,
.amtv-admin-app .amtv-events-page .slideshow-page-content::before,
.amtv-admin-app .amtv-events-page .slideshow-page-content::after,
.amtv-admin-app .amtv-dp-displays-page .wrap-content-block::before,
.amtv-admin-app .amtv-dp-displays-page .wrap-content-block::after {
    display: none !important;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:first-child > .row > [class*="col-"],
.amtv-admin-app .amtv-events-page .wrap-slideshow-block,
.amtv-admin-app .amtv-dp-displays-page .wrap-display-block {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app .amtv-page-client .client-icon-block,
.amtv-admin-app .amtv-page-events .client-icon-block,
.amtv-admin-app .amtv-page-dp-displays .display-block {
    border-radius: 12px !important;
    min-height: 285px;
    padding: 1.05rem !important;
}

.amtv-admin-app .amtv-page-client .client-icon-block::before,
.amtv-admin-app .amtv-page-events .client-icon-block::before,
.amtv-admin-app .amtv-page-dp-displays .display-block::before {
    background: linear-gradient(90deg, var(--amtv-accent), rgba(22, 163, 74, 0.8));
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.amtv-admin-app .amtv-page-client .client-logo-block,
.amtv-admin-app .amtv-page-events .client-logo-block,
.amtv-admin-app .amtv-page-dp-displays .display-feature {
    background:
        radial-gradient(circle at top, rgba(37, 99, 235, 0.09), transparent 65%),
        var(--amtv-surface-muted) !important;
    height: 118px !important;
    min-height: 118px !important;
}

.amtv-admin-app .amtv-page-client .client-icon-block h3,
.amtv-admin-app .amtv-page-events .client-icon-block h3,
.amtv-admin-app .amtv-page-dp-displays .display-block h1 {
    font-size: 1rem !important;
    margin: 0.2rem 0 0.35rem !important;
    overflow: hidden;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.amtv-admin-app .amtv-page-client .client-icon-block p,
.amtv-admin-app .amtv-page-events .client-icon-block h4,
.amtv-admin-app .amtv-page-dp-displays .display-block h3 {
    color: var(--amtv-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    margin: 0.35rem 0 0 !important;
    text-align: center !important;
}

.amtv-admin-app .amtv-page-client .client-icon-block > div:last-child,
.amtv-admin-app .amtv-page-events .client-icon-block h4,
.amtv-admin-app .amtv-page-dp-displays .display-block table + h3 {
    align-self: center;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px !important;
    color: var(--amtv-accent) !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    gap: 0.35rem;
    justify-content: center;
    margin-top: auto !important;
    padding: 0.42rem 0.7rem !important;
}

.amtv-admin-app .amtv-page-client .favourite_client {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    display: inline-flex !important;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.amtv-admin-app .amtv-page-client .favourite_client:focus-visible {
    box-shadow: 0 0 0 4px var(--amtv-ring) !important;
    outline: 2px solid transparent !important;
}

.amtv-admin-app .amtv-page-client .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.5) transparent;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:last-child > div {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    padding: 1rem !important;
}

.amtv-admin-app .amtv-client-management > .row > [class*="col-"]:last-child h2 {
    color: var(--amtv-text) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    margin: 0 0 1rem !important;
    text-align: left !important;
}

.amtv-admin-app .amtv-page-client .dropdown > i,
.amtv-admin-app .amtv-page-events .wrap-action-for-template > li > i {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    color: var(--amtv-muted) !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.amtv-admin-app .amtv-page-events .wrap-action-for-template {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 20;
}

.amtv-admin-app .amtv-page-events .client-icon-block {
    cursor: default;
}

.amtv-admin-app .amtv-page-dp-displays .display-block {
    min-height: 310px;
}

.amtv-admin-app .amtv-page-dp-displays .display-block > a > span[id^="status_"] {
    align-items: center;
    background: var(--amtv-surface-solid);
    border: 1px solid var(--amtv-border);
    border-radius: 999px;
    box-shadow: var(--amtv-shadow-sm);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    left: 0.85rem;
    margin: 0 !important;
    position: absolute !important;
    top: 0.85rem;
    width: 34px;
    z-index: 4;
}

.amtv-admin-app .amtv-page-dp-displays .display-block > a > span[id^="status_"] i {
    font-size: 0.8rem !important;
}

.amtv-admin-app .amtv-page-dp-displays .display-block table.table {
    background: var(--amtv-surface-muted) !important;
    border-radius: 10px !important;
    margin-top: 0.8rem !important;
}

.amtv-admin-app .amtv-page-ai-reports .wrap-content-block {
    padding: 0 !important;
    overflow: hidden;
}

.amtv-admin-app .amtv-page-ai-reports .slideshow-page-content {
    padding: 1rem !important;
}

.amtv-admin-app .amtv-ai-reports-table {
    margin: 0 !important;
}

.amtv-admin-app .amtv-ai-reports-table thead,
.amtv-admin-app .amtv-ai-reports-table thead[style] {
    background: var(--amtv-surface-muted) !important;
    color: var(--amtv-muted) !important;
}

.amtv-admin-app .amtv-ai-reports-table .label {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.38rem 0.58rem;
}

.amtv-admin-app .amtv-ai-reports-table .label-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.amtv-admin-app .amtv-ai-reports-table .label-default {
    background: var(--amtv-surface-muted) !important;
    color: var(--amtv-muted) !important;
}

.amtv-admin-app .amtv-ai-reports-table .btn-xs {
    align-items: center;
    border-radius: 999px !important;
    display: inline-flex;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    gap: 0.35rem;
    margin: 0.12rem;
    min-height: 32px;
    padding: 0.4rem 0.65rem !important;
}

.amtv-admin-app .amtv-ai-reports-table td[colspan] {
    color: var(--amtv-muted) !important;
    font-weight: 800;
    padding: 2rem !important;
}

@media (max-width: 1200px) {
    .amtv-admin-app .amtv-page-insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amtv-admin-app .amtv-client-management > .row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .amtv-admin-app .amtv-page-insights {
        grid-template-columns: 1fr;
    }

    .amtv-admin-app .amtv-page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .amtv-admin-app .amtv-search-control,
    .amtv-admin-app .amtv-segmented-control {
        width: 100%;
    }

    .amtv-admin-app .amtv-segmented-control {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amtv-admin-app .amtv-client-management > .row > [class*="col-"]:last-child {
        display: block !important;
    }

    .amtv-admin-app .amtv-client-management > .row > [class*="col-"]:first-child > .row,
    .amtv-admin-app .amtv-events-page .slideshow-page-content,
    .amtv-admin-app .amtv-dp-displays-page .wrap-content-block {
        grid-template-columns: 1fr;
    }

    .amtv-admin-app .amtv-page-ai-reports .slideshow-page-content {
        overflow-x: auto;
        padding: 0.75rem !important;
    }
}

/* Shared admin consistency layer for legacy menu pages */
.amtv-admin-app.amtv-menu-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.07), transparent 30rem),
        linear-gradient(180deg, var(--amtv-bg), var(--amtv-bg));
    color: var(--amtv-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) {
    float: none !important;
    margin: 0 auto !important;
    max-width: 1440px;
    min-height: calc(100vh - 54px);
    padding: clamp(1rem, 2.2vw, 1.75rem) !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard)::before,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard)::after,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #content::before,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #content::after,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .row::before,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .row::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88)),
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.12), transparent 28rem) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    display: flex !important;
    float: none !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    margin: 0 0 1.2rem !important;
    min-height: 76px;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
    position: relative !important;
    width: 100% !important;
}

html[data-theme="dark"] .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content,
body[data-theme="dark"].amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.16), transparent 26rem) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content h1,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content h1.dfi-2 {
    align-items: center !important;
    color: var(--amtv-text) !important;
    display: inline-flex !important;
    float: none !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    font-weight: 850 !important;
    gap: 0.75rem;
    letter-spacing: 0 !important;
    line-height: 1.16 !important;
    margin: 0 !important;
    max-width: min(100%, 760px);
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content h1::before {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.12)),
        var(--amtv-surface-solid);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 34px;
    width: 34px;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content ul,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .text-right {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    float: none !important;
    gap: 0.55rem !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content li {
    display: inline-flex !important;
    margin: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content input[type="submit"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .btn-template-submit {
    align-items: center !important;
    background: var(--amtv-accent) !important;
    border: 1px solid var(--amtv-accent) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16) !important;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    gap: 0.48rem !important;
    height: 40px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 40px !important;
    padding: 0.64rem 0.92rem !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    white-space: nowrap !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close):hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content input[type="submit"]:hover {
    background: var(--amtv-accent-strong) !important;
    border-color: var(--amtv-accent-strong) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[href*="back"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[href$="dashboard"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[id*="export"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[id*="import"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .btn-default {
    background: var(--amtv-surface-solid) !important;
    border-color: var(--amtv-border) !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[href*="delete"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .delete_btn,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .delete_color {
    background: #fff1f2 !important;
    border-color: rgba(220, 38, 38, 0.24) !important;
    box-shadow: none !important;
    color: var(--amtv-danger) !important;
}

html[data-theme="dark"] .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[href*="delete"],
body[data-theme="dark"].amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a[href*="delete"],
html[data-theme="dark"] .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .delete_btn,
body[data-theme="dark"].amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .delete_btn {
    background: rgba(220, 38, 38, 0.14) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #content,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .content {
    color: var(--amtv-text);
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) > .row,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #content > .row,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) form > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .login-as-alert,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .flasMessage,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .error_msg,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .alert {
    border-radius: 10px !important;
    float: none !important;
    font-weight: 750;
    margin-bottom: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail-custom-page,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .survey-container,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .tab_gs_wrap,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .news-actions {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block {
    float: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 1rem !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block:has(.dashboard-icon-block),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block:has(.client-icon-block),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block:has(.display-block),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block:has(.wrap-slideshow-block),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block:has(.wrap-display-block),
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block.dfi-t {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .slideshow-page-content,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .tempalte-page-content {
    float: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-display-detail,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-client-icon-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-dashboard-icon-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-slideshow-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-display-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-user-management-block {
    float: none !important;
    min-height: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .dashboard-icon-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .client-icon-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .page-of-slideshow-block,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-client-of-template > div {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .dashboard-icon-block:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .client-icon-block:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-block:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .page-of-slideshow-block:hover {
    border-color: rgba(37, 99, 235, 0.32) !important;
    box-shadow: var(--amtv-shadow-md) !important;
    transform: translateY(-2px);
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail-custom-page {
    float: none !important;
    margin: 0 0 1rem !important;
    padding: clamp(1rem, 2vw, 1.4rem) !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail .row,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail-custom-page .row {
    align-items: flex-start;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) label,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .control-label {
    color: var(--amtv-text) !important;
    font-size: 0.83rem !important;
    font-weight: 800 !important;
    line-height: 1.35;
    margin-bottom: 0.42rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="text"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="email"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="password"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="number"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="search"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="url"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="date"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="time"],
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) select,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) textarea,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .form-control,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .select2-selection {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--amtv-text) !important;
    font-size: 0.9rem !important;
    min-height: 42px !important;
    outline: none !important;
    padding: 0.66rem 0.75rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) textarea,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) textarea.form-control {
    line-height: 1.5;
    min-height: 110px !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input:focus,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) select:focus,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) textarea:focus,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .form-control:focus,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .select2-container--focus .select2-selection,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) a:focus-visible,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) button:focus-visible {
    border-color: var(--amtv-accent) !important;
    box-shadow: 0 0 0 4px var(--amtv-ring) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .btn,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) button,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="submit"] {
    border-radius: 10px !important;
    font-weight: 800 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .btn:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) button:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) input[type="submit"]:hover {
    transform: translateY(-1px);
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .table,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--amtv-text) !important;
    margin: 0 !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .table-responsive {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    overflow: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) th,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) thead td {
    background: var(--amtv-surface-muted) !important;
    border-bottom: 1px solid var(--amtv-border) !important;
    color: var(--amtv-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
    padding: 0.82rem 0.95rem !important;
    text-transform: uppercase;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) td {
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
    padding: 0.82rem 0.95rem !important;
    vertical-align: middle !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) tbody tr {
    transition: background-color 0.16s ease;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) tbody tr:hover {
    background: rgba(37, 99, 235, 0.045) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .news-actions {
    border-collapse: separate !important;
    overflow: hidden;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .news-actions a,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .news-actions button,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .table a.btn,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) table a.btn {
    align-items: center;
    border-radius: 999px !important;
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    gap: 0.35rem;
    justify-content: center;
    min-height: 30px !important;
    padding: 0.4rem 0.62rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .dropdown-menu,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .action-for-template-lv2 {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-lg) !important;
    overflow: hidden;
    padding: 0.35rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .dropdown-menu a,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .action-for-template-lv2 a {
    align-items: center;
    border-radius: 8px !important;
    color: var(--amtv-text) !important;
    display: flex !important;
    font-weight: 750 !important;
    min-height: 34px;
    padding: 0.55rem 0.65rem !important;
    text-decoration: none !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .dropdown-menu a:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .action-for-template-lv2 a:hover {
    background: var(--amtv-surface-muted) !important;
    color: var(--amtv-accent) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .page-of-slideshow-detail {
    background: var(--amtv-surface-muted) !important;
    border: 1px dashed var(--amtv-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    margin: 0.75rem 0 1rem !important;
    padding: 0.9rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .page-of-slideshow-detail-title {
    color: var(--amtv-text) !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.75rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) img {
    max-width: 100%;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .label,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .badge {
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    padding: 0.36rem 0.56rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .pagination > li > a,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .pagination > li > span {
    background: var(--amtv-surface-solid) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
    font-weight: 800;
}

.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .pagination > .active > a,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .pagination > .active > span {
    background: var(--amtv-accent) !important;
    border-color: var(--amtv-accent) !important;
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) {
        padding: 1rem !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content ul,
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content .text-right {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) [class*="col-xs-"],
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) [class*="col-sm-"],
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) [class*="col-md-"] {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) {
        padding: 0.75rem !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content {
        border-radius: 10px !important;
        padding: 1rem !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content h1::before {
        height: 30px;
        width: 30px;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content a,
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content button:not(.close),
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) #header-content input[type="submit"] {
        flex: 1 1 auto;
        min-width: min(100%, 132px);
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail,
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .display-detail-custom-page,
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard) .wrap-content-block {
        border-radius: 10px !important;
        padding: 0.85rem !important;
    }
}

/* Client management parity layer */
.amtv-admin-app #wrapper-content.amtv-page-client:not(.amtv-dashboard) {
    max-width: 1440px;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.14), transparent 26rem),
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.08), transparent 22rem) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-page-client #header-content,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-page-client #header-content {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.9)),
        radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.16), transparent 26rem),
        radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.08), transparent 22rem) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content h1::after {
    content: "Manage client workspaces, users, and access settings.";
}

.amtv-admin-app #wrapper-content.amtv-page-client-create #header-content h1::after {
    content: "Create a client workspace with the details users will recognize.";
}

.amtv-admin-app #wrapper-content.amtv-page-client-users #header-content h1::after {
    content: "Search and maintain user access for this client workspace.";
}

.amtv-admin-app #wrapper-content.amtv-page-client-user-create #header-content h1::after,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit #header-content h1::after {
    content: "Keep credentials and permissions clear, current, and secure.";
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit #header-content h1::before,
.amtv-admin-app #wrapper-content.amtv-page-client-edit #header-content h1::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app .amtv-client-form-page,
.amtv-admin-app .amtv-client-users-page {
    max-width: 1180px;
}

.amtv-admin-app .amtv-client-form-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.amtv-admin-app .amtv-client-form-grid {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    margin: 0 !important;
}

.amtv-admin-app .amtv-client-form-grid > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app .amtv-client-primary-card,
.amtv-admin-app .amtv-client-logo-card {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
    margin: 0 !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.amtv-admin-app .amtv-client-section-heading {
    border-bottom: 1px solid var(--amtv-border);
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
}

.amtv-admin-app .amtv-client-section-heading h2 {
    color: var(--amtv-text) !important;
    font-size: 1.02rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.amtv-admin-app .amtv-client-section-heading p {
    color: var(--amtv-muted) !important;
    font-size: 0.87rem !important;
    font-weight: 600;
    line-height: 1.45;
    margin: 0.25rem 0 0 !important;
}

.amtv-admin-app .amtv-client-primary-card > .row {
    align-items: center;
    display: grid !important;
    gap: 0.5rem 1rem;
    grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
    margin: 0 0 0.85rem !important;
}

.amtv-admin-app .amtv-client-primary-card > .row:last-child {
    margin-bottom: 0 !important;
}

.amtv-admin-app .amtv-client-primary-card > .row > label,
.amtv-admin-app .amtv-client-primary-card > .row > input,
.amtv-admin-app .amtv-client-primary-card > .row > select {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

.amtv-admin-app .amtv-client-logo-card {
    align-self: start;
}

.amtv-admin-app .amtv-client-logo-actions,
.amtv-admin-app .client-logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.amtv-admin-app .amtv-client-logo-actions .btn,
.amtv-admin-app .client-logo-actions .btn,
.amtv-admin-app .amtv-client-logo-actions button,
.amtv-admin-app .client-logo-actions button {
    flex: 1 1 auto;
    min-height: 40px;
}

.amtv-admin-app .amtv-client-logo-preview,
.amtv-admin-app .client-logo-frame,
.amtv-admin-app .client-logo-panel {
    background: var(--amtv-surface-muted) !important;
    border: 1px dashed var(--amtv-border-strong) !important;
    border-radius: 12px !important;
}

.amtv-admin-app .amtv-client-logo-preview {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    min-height: 180px;
    padding: 1rem;
}

.amtv-admin-app .amtv-client-logo-preview img,
.amtv-admin-app .client-logo-frame img,
.amtv-admin-app .client-logo-panel img {
    max-height: 140px;
    object-fit: contain;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-page {
    max-width: 1280px;
    padding: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-title {
    align-items: center;
    gap: 0.85rem;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-title-icon {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.1)),
        var(--amtv-surface-solid) !important;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 10px;
    color: var(--amtv-accent) !important;
    height: 42px;
    width: 42px;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-title-text span {
    color: var(--amtv-muted) !important;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-title-text strong {
    color: var(--amtv-text) !important;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 850;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card,
.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-tab-panel,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .client_wrapper {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card {
    margin-bottom: 1rem !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card:hover {
    transform: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card-header {
    border-color: var(--amtv-border) !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.85rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card-header h2,
.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-panel-title {
    color: var(--amtv-text) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-card-header p {
    color: var(--amtv-muted) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-tabs,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .nav-tabs {
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem !important;
    padding: 0.45rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-tabs .nav-link,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .nav-tabs .nav-link {
    align-items: center;
    border-radius: 9px !important;
    color: var(--amtv-muted) !important;
    display: inline-flex;
    font-weight: 850 !important;
    min-height: 38px;
    padding: 0.55rem 0.78rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-tabs .nav-link:hover,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .nav-tabs .nav-link:hover {
    background: var(--amtv-surface-solid) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-edit .client-tabs .nav-link.active,
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .nav-tabs .nav-link.active {
    background: var(--amtv-accent) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18) !important;
    color: #ffffff !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .wrap-content-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .col-none-padding {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .col-none-padding > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .wrap-user-management-block {
    position: relative;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .client-icon-block {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 245px;
    padding: 1rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .client-icon-block > div:first-child {
    align-items: center;
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    display: flex;
    justify-content: center;
    min-height: 96px;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .client-icon-block h4 {
    color: var(--amtv-text) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1.35;
    margin: 0.75rem 0 0 !important;
    overflow-wrap: anywhere;
}

.amtv-admin-app #wrapper-content.amtv-page-client-users .operator-user-block {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 4;
}

.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .client_wrapper,
.amtv-admin-app #wrapper-content.amtv-page-client-user-create .display-detail {
    padding: 1rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .client_wrapper > div[style*="display: flex"],
.amtv-admin-app #wrapper-content.amtv-page-client-user-edit .client_wrapper > div[style*="display:flex"] {
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    gap: 0.65rem;
    padding: 1rem;
}

@media (max-width: 1100px) {
    .amtv-admin-app .amtv-client-form-grid,
    .amtv-admin-app #wrapper-content.amtv-page-client-edit .client-overview-grid,
    .amtv-admin-app #wrapper-content.amtv-page-client-edit .client-account-grid,
    .amtv-admin-app #wrapper-content.amtv-page-client-edit .client-data-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .amtv-admin-app .amtv-client-primary-card > .row {
        grid-template-columns: 1fr;
    }

    .amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-actions {
        justify-content: flex-start !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-client-edit .client-edit-title-text strong {
        max-width: 100%;
        white-space: normal;
    }
}

/* Dashboard-matched client pages */
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.13), transparent 24rem) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    display: flex !important;
    float: none !important;
    gap: 1rem !important;
    justify-content: space-between !important;
    margin: 0 0 1.25rem !important;
    min-height: 0;
    overflow: visible;
    padding: 1.25rem !important;
    position: relative !important;
    width: 100% !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.15), transparent 24rem) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy {
    display: grid !important;
    flex: 1 1 auto;
    gap: 0.55rem;
    max-width: 760px;
    min-width: 0;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1 {
    color: var(--amtv-text) !important;
    display: block !important;
    float: none !important;
    font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    max-width: 100%;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1::before,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy p {
    color: var(--amtv-muted) !important;
    font-size: 0.98rem !important;
    font-weight: 500;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__actions {
    align-items: center !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-monitor-button,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-primary-link,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-danger-link,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero button.amtv-primary-link {
    align-items: center !important;
    border-radius: 10px !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    gap: 0.55rem !important;
    height: 44px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 0 0.95rem !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
    white-space: nowrap !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-monitor-button {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-monitor-button:hover {
    border-color: var(--amtv-accent) !important;
    color: var(--amtv-accent) !important;
    transform: translateY(-1px);
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-primary-link,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero button.amtv-primary-link {
    background: var(--amtv-accent) !important;
    border: 1px solid var(--amtv-accent) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-primary-link:hover,
.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero button.amtv-primary-link:hover {
    background: var(--amtv-accent-strong) !important;
    border-color: var(--amtv-accent-strong) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-danger-link {
    background: #fff1f2 !important;
    border: 1px solid rgba(220, 38, 38, 0.24) !important;
    box-shadow: none !important;
    color: var(--amtv-danger) !important;
}

html[data-theme="dark"] .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-danger-link,
body[data-theme="dark"].amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-danger-link {
    background: rgba(220, 38, 38, 0.14) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-page-insights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-page-insight-card {
    min-height: 108px;
    padding: 1.05rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-page-insight-card strong {
    font-size: 1.85rem !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-page-layout {
    align-items: flex-start;
    display: grid !important;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-page-layout > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card-grid {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin: 0 !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card-grid::before,
.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card-grid::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card-column {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card {
    cursor: pointer;
    height: 100%;
    min-height: 255px;
    padding: 1.15rem !important;
    position: relative;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-users-panel {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    padding: 1rem !important;
    position: sticky;
    top: 76px;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-users-panel__header {
    border-bottom: 1px solid var(--amtv-border);
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-users-panel__header h2 {
    color: var(--amtv-text) !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    margin: 0.55rem 0 0 !important;
    text-align: left !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-users-panel input.form-control {
    background: var(--amtv-surface-solid) !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-users-panel .custom-scrollbar > div[ng-repeat] {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
    border-radius: 10px !important;
}

.amtv-admin-app #wrapper-content.amtv-page-client .modal-content {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-lg) !important;
    overflow: hidden;
}

.amtv-admin-app #wrapper-content.amtv-page-client .modal-header,
.amtv-admin-app #wrapper-content.amtv-page-client .modal-footer {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
}

@media (max-width: 1200px) {
    .amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__actions {
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-dashboard-hero__copy h1 {
        font-size: 1.7rem !important;
    }

    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-monitor-button,
    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-primary-link,
    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero .amtv-danger-link,
    .amtv-admin-app #wrapper-content.amtv-page-client #header-content.amtv-dashboard-hero button.amtv-primary-link {
        flex: 1 1 100%;
        width: 100%;
    }

    .amtv-admin-app #wrapper-content.amtv-page-client .amtv-page-insights,
    .amtv-admin-app #wrapper-content.amtv-page-client .amtv-client-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin shell spacing correction: keep every admin page aligned with the dashboard sidebar offset. */
.amtv-admin-app #wrapper-content.amtv-dashboard,
.amtv-admin-app #wrapper-content:not(.amtv-dashboard),
.amtv-admin-app #wrapper-content-o,
.amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard),
.amtv-admin-app #wrapper-content.amtv-page-client:not(.amtv-dashboard) {
    margin-left: 280px !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding: 1.5rem 2rem 3rem !important;
    width: calc(100% - 280px) !important;
}

@media (max-width: 991px) {
    .amtv-admin-app #wrapper-content.amtv-dashboard,
    .amtv-admin-app #wrapper-content:not(.amtv-dashboard),
    .amtv-admin-app #wrapper-content-o,
    .amtv-admin-app.amtv-menu-page #wrapper-content:not(.amtv-dashboard),
    .amtv-admin-app #wrapper-content.amtv-page-client:not(.amtv-dashboard) {
        margin-left: 0 !important;
        padding: 1rem 1rem 2rem !important;
        width: 100% !important;
    }
}

/* Events tile grid correction: keep the wrapper full-width and make only the tile list a grid. */
.amtv-admin-app #wrapper-content.amtv-page-events .wrap-content-block,
.amtv-admin-app.amtv-menu-page #wrapper-content.amtv-page-events .wrap-content-block,
#wrapper-content.amtv-page-events:has(.wrap-slideshow-block) .wrap-content-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-events .wrap-content-block::before,
.amtv-admin-app #wrapper-content.amtv-page-events .wrap-content-block::after,
.amtv-admin-app #wrapper-content.amtv-page-events .slideshow-page-content::before,
.amtv-admin-app #wrapper-content.amtv-page-events .slideshow-page-content::after {
    content: none !important;
    display: none !important;
}

.amtv-admin-app #wrapper-content.amtv-page-events .slideshow-page-content,
.amtv-admin-app.amtv-menu-page #wrapper-content.amtv-page-events .slideshow-page-content,
#wrapper-content.amtv-page-events:has(.wrap-slideshow-block) .slideshow-page-content {
    display: grid !important;
    float: none !important;
    gap: 1rem !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-events .wrap-slideshow-block,
.amtv-admin-app.amtv-menu-page #wrapper-content.amtv-page-events .wrap-slideshow-block,
#wrapper-content.amtv-page-events:has(.wrap-slideshow-block) .wrap-slideshow-block {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
}

.amtv-admin-app #wrapper-content.amtv-page-events .client-icon-block {
    height: 100% !important;
    min-height: 285px !important;
    width: 100% !important;
}

@media (max-width: 680px) {
    .amtv-admin-app #wrapper-content.amtv-page-events .slideshow-page-content,
    .amtv-admin-app.amtv-menu-page #wrapper-content.amtv-page-events .slideshow-page-content,
    #wrapper-content.amtv-page-events:has(.wrap-slideshow-block) .slideshow-page-content {
        grid-template-columns: 1fr !important;
    }
}

/* Admin page audit polish: normalize legacy page families to the dashboard system. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) {
    box-sizing: border-box;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) *,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) *::before,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) *::after {
    box-sizing: border-box;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row {
    display: contents !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row > [class*="col-"] {
    display: flex !important;
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row > [class*="col-"]:first-child {
    align-items: center;
    flex: 1 1 260px;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row > [class*="col-"]:last-child {
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .wrap-content-block:has(.table-responsive),
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .wrap-content-block:has(> .row .table),
.amtv-admin-app.amtv-menu-page #wrapper-content[data-page-mode="report"]:not(.amtv-dashboard) .wrap-content-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .table-responsive.news-container,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .table-responsive.survey-container,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_wrapper {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    padding: 0.8rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_wrapper {
    overflow: auto;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_length,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_filter,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_info,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_paginate {
    color: var(--amtv-muted) !important;
    font-size: 0.84rem;
    font-weight: 750;
    margin: 0.35rem 0.25rem 0.75rem;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_filter input,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_length select {
    margin-left: 0.45rem;
    min-height: 36px !important;
    padding: 0.48rem 0.62rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_processing {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    color: var(--amtv-text) !important;
    font-weight: 850;
    padding: 0.55rem 0.9rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) table.news-actions,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) table.survey-actions {
    background: transparent !important;
    border: 0 !important;
    border-spacing: 0.28rem !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    width: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions td,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions td {
    border: 0 !important;
    padding: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions a,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions button,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions a,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions button {
    align-items: center !important;
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 9px !important;
    color: var(--amtv-text) !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 !important;
    width: 32px !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions a:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .news-actions button:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions a:hover,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .survey-actions button:hover {
    border-color: var(--amtv-accent) !important;
    color: var(--amtv-accent) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .delete_color,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .fa-trash-o {
    color: var(--amtv-danger) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .wrap-content-block > p:only-child,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .no-surveys,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .amtv-empty-results,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .amtv-empty-state {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88)),
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.1), transparent 22rem) !important;
    border: 1px dashed var(--amtv-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--amtv-muted) !important;
    font-size: 0.94rem !important;
    font-weight: 750 !important;
    margin: 0 !important;
    padding: 1.2rem !important;
    text-align: center !important;
}

html[data-theme="dark"] .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .wrap-content-block > p:only-child,
body[data-theme="dark"].amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .wrap-content-block > p:only-child,
html[data-theme="dark"] .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .no-surveys,
body[data-theme="dark"].amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .no-surveys {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.88)),
        radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.14), transparent 22rem) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .no-surveys h1 {
    color: var(--amtv-text) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-tabs {
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0 !important;
    padding: 0.32rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-tabs > li {
    float: none !important;
    margin: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-tabs > li > a,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--amtv-muted) !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0.7rem 0.85rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-tabs > li.active > a,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-tabs > li > a.active,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .nav-link.active {
    background: var(--amtv-surface-solid) !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .bootstrap-tagsinput,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .note-editor,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .select2-container--default .select2-selection--multiple {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .select2-container {
    max-width: 100%;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .select2-selection__choice {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    border-radius: 999px !important;
    color: var(--amtv-accent) !important;
    font-weight: 800;
    margin-top: 0.35rem !important;
    padding: 0.2rem 0.48rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .modal-content {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-lg) !important;
    overflow: hidden;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .modal-header,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .modal-footer {
    background: var(--amtv-surface-muted) !important;
    border-color: var(--amtv-border) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .modal-dialog {
    max-width: calc(100vw - 2rem) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) iframe {
    max-width: 100%;
}

/* Focused polish for Settings. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] form[name="addNewStaffForm"] {
    display: grid;
    gap: 0;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] .dashboard-icon-block {
    background: var(--amtv-surface) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] h2 {
    border-bottom: 1px solid var(--amtv-border) !important;
    color: var(--amtv-text) !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin: 0 0 1rem !important;
    padding-bottom: 0.8rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] h2:not(:first-child) {
    margin-top: 1.35rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] .display-detail {
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] .display-detail .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] #test_ai_btn {
    min-height: 42px !important;
}

/* Focused polish for Google Fonts / font integrations. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="googlefonts"] .display-news-detail,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="fonts"] .display-news-detail {
    display: grid;
    gap: 1rem;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="googlefonts"] .display-news-detail > .row,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="fonts"] .display-news-detail > .row {
    align-items: center;
    background: var(--amtv-surface-muted);
    border: 1px solid var(--amtv-border);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 0;
    margin: 0 !important;
    padding: 1rem;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="googlefonts"] .display-news-detail > .row > [class*="col-"],
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="fonts"] .display-news-detail > .row > [class*="col-"] {
    float: none !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="googlefonts"] .display-news-detail div[style*="box-shadow"],
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="fonts"] .display-news-detail div[style*="box-shadow"] {
    background: var(--amtv-surface-solid) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    overflow: hidden;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="googlefonts"] .display-news-detail div[style*="background-color:white"],
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="fonts"] .display-news-detail div[style*="background-color:white"] {
    background: var(--amtv-surface-solid) !important;
    color: var(--amtv-text) !important;
}

/* Focused polish for monitored display reports. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="reports-monitored-displays"] #content > .row {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="reports-monitored-displays"] #content > .row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="reports-monitored-displays"] .dashboard-icon-block {
    background: var(--amtv-surface) !important;
    border-color: var(--amtv-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--amtv-shadow-md) !important;
    height: 100% !important;
    padding: 1rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="reports-monitored-displays"] .dashboard-icon-block .table-responsive {
    box-shadow: none !important;
    margin-top: 0.8rem;
}

/* Focused polish for Canva integration. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] .wrap-content-block {
    padding: 1.15rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap {
    display: grid;
    gap: 1rem;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap > div[style*="inline-flex"],
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap > div[style*="justify-content: end"],
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #design_wrap {
    background: var(--amtv-surface-muted) !important;
    border: 1px solid var(--amtv-border) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #design_wrap {
    display: grid !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap label {
    display: block;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_connect_canva,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_logout_canva,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_create_canva {
    align-items: center !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    box-shadow: var(--amtv-shadow-sm) !important;
    display: inline-flex !important;
    font-size: 0.9rem !important;
    font-weight: 850 !important;
    min-height: 42px !important;
    padding: 0.55rem 0.85rem !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_connect_canva,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_logout_canva {
    background: var(--amtv-surface-solid) !important;
    border-color: var(--amtv-border) !important;
    color: var(--amtv-text) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_create_canva {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] .canva_logo,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_connect_canva img,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_logout_canva img {
    height: 28px !important;
    width: 28px !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #preview_design {
    background: var(--amtv-surface-solid) !important;
    border: 1px dashed var(--amtv-border-strong) !important;
    border-radius: 12px !important;
    color: var(--amtv-muted);
    min-height: 180px;
    padding: 1rem;
    width: 100%;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #folderInstanceModel .modal-dialog {
    height: auto !important;
    width: min(950px, calc(100vw - 2rem)) !important;
}

.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #folderInstanceModel iframe {
    height: min(500px, 72vh) !important;
    width: 100% !important;
}

/* Legacy content lists should read as product records, not raw admin tables. */
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="newsevents"] table img,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="ads-comms"] table img,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="ads-comms-general-ads"] table img,
.amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="ads-comms-general-noticeboard"] table img {
    border: 1px solid var(--amtv-border) !important;
    border-radius: 10px !important;
    height: 72px !important;
    object-fit: cover;
    width: 120px !important;
}

@media (max-width: 991px) {
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row > [class*="col-"],
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) #header-content > .row > [class*="col-"]:last-child {
        justify-content: flex-start;
        width: 100% !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="reports-monitored-displays"] #content > .row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .table-responsive.news-container,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .table-responsive.survey-container,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key]:not(.amtv-dashboard) .dataTables_wrapper,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] .wrap-content-block,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="setting"] .dashboard-icon-block {
        padding: 0.75rem !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap > div[style*="inline-flex"],
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #canva_features_wrap > div[style*="justify-content: end"],
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #design_wrap {
        padding: 0.75rem !important;
    }

    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_connect_canva,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_logout_canva,
    .amtv-admin-app.amtv-menu-page #wrapper-content[data-route-key="canva"] #btn_create_canva {
        justify-content: center !important;
        width: 100% !important;
    }
}