:root {
    --color-primary: #61a729;
    --color-accent: #f2891d;
    --color-neutral: #706758;
    --color-secondary: #00752d;
    --color-lime: #cddc39;

    --gradient-primary-accent: linear-gradient(
        135deg,
        var(--color-secondary) 0%,
        var(--color-primary) 55%,
        var(--color-accent) 100%
    );
    --gradient-lime-accent: linear-gradient(135deg, var(--color-lime) 0%, var(--color-accent) 100%);
    --gradient-primary-secondary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

body {
    background-color: #f3f4f6;
    color: #2f3a28;
    min-height: 100vh;
    font-family:
        "Nunito",
        system-ui,
        -apple-system,
        sans-serif;
}

body.live-preview-body {
    margin: 0;
    padding: 0;
    background: #e6e8ec;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fdfdf9;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fdfdf9;
}

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 194px;
    height: 100vh;
    background: #f1f2f4;
    color: #364035;
    border-right: 1px solid #d9ddd4;
    box-shadow: 2px 0 10px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    /* padding: 0.75rem 0.65rem; */
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.15rem 0.35rem 0.9rem;
    border-bottom: 1px solid #d9ddd4;
}
.sidebar-brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: var(--color-primary);
    color: #fdfdf9;
    font-size: 1.15rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-brand h1 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2f3a28;
}
.sidebar-brand p {
    margin: 0.05rem 0 0;
    font-size: 0.72rem;
    color: #7c8273;
    letter-spacing: 0.08px;
}
.sidebar-menu {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.sidebar-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.45rem;
    padding: 0.54rem 0.65rem;
    color: #5f6758;
    font-size: 0.92rem;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}
.sidebar-menu-item .material-symbols-outlined {
    font-size: 1rem;
    font-variation-settings:
        "FILL" 0,
        "wght" 420,
        "GRAD" 0,
        "opsz" 24;
}
.sidebar-menu-item:hover {
    background: #e6e9e2;
    transform: translateX(2px);
    color: #3a4333;
}
.sidebar-menu-item.active {
    background: var(--color-primary);
    color: #fdfdf9;
    box-shadow: 0 4px 10px rgba(97, 167, 41, 0.25);
}
.sidebar-menu-item.active .material-symbols-outlined {
    color: #fdfdf9;
}
.sidebar-menu-text {
    font-weight: 500;
    letter-spacing: 0.1px;
}
.sidebar-admin-section {
    margin-top: auto;
    border-top: 1px solid #d9ddd4;
    padding-top: 1rem;
}
.sidebar-admin-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
    background: #ecefea;
    border: 1px solid #d8ddd2;
    border-radius: 0.62rem;
    padding: 0.5rem 0.55rem;
}
.sidebar-admin-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fdfdf9;
    font-size: 0.92rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 520,
        "GRAD" 0,
        "opsz" 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-admin-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.sidebar-admin-title,
.sidebar-admin-subtitle {
    margin: 0;
    line-height: 1.2;
}
.sidebar-admin-title {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-admin-subtitle {
    font-size: 0.78rem;
    color: #7c8273;
}
.sidebar-logout-form {
    margin: 0;
}
.sidebar-logout-btn {
    width: 100%;
    border: 1px solid #d0d6c8;
    background: #f9faf8;
    color: #4a5442;
    border-radius: 0.58rem;
    padding: 0.43rem 0.7rem;
    font-weight: 600;
    font-size: 0.84rem;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
.sidebar-logout-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fdfdf9;
}
.sidebar-footer {
    display: none;
}

body > .container {
    margin-left: 208px;
    width: calc(100% - 208px);
    max-width: none;
    padding: 1.45rem 1.35rem 1.8rem 1.35rem;
}

body.no-sidebar > .container,
body.live-preview-body > .container {
    margin-left: 0;
    width: 100%;
}

body.live-preview-body > .container {
    padding: 0;
}

.protected-page {
    width: 100%;
}
.protected-page-header {
    background: #ffffff;
    border: 1px solid #e3e7df;
    border-radius: 0.7rem;
    padding: 1.05rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}
.protected-page-title {
    margin: 0;
    font-size: 2.95rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1f2a1d;
    font-weight: 700;
}
.protected-page-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    color: #7d8576;
    font-weight: 500;
}

.page-header-flat {
    background: transparent;
    border: 0;
    padding: 0;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-stat-card {
    background: #ffffff;
    border: 1px solid #d8dde4;
    border-radius: 0.55rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    padding: 0.8rem 0.95rem;
}

.dashboard-stat-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
    margin-bottom: 0.2rem;
    color: #67ab33;
    font-weight: 700;
    font-size: 0.74rem;
}

.dashboard-stat-trend.material-symbols-outlined {
    font-size: 0.88rem;
    line-height: 1;
}

.dashboard-stat-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.dashboard-stat-icon.green,
.quick-action-icon.green,
.content-item-icon.green {
    background: #61a729;
}

.dashboard-stat-icon.dark-green,
.quick-action-icon.dark-green,
.content-item-icon.dark-green {
    background: #007d38;
}

.dashboard-stat-icon.orange,
.quick-action-icon.orange,
.content-item-icon.orange {
    background: #f2891d;
}

.dashboard-stat-icon.gray {
    background: #7b756b;
}

.dashboard-stat-label {
    margin: 0.45rem 0 0.2rem;
    color: #788294;
    font-size: 0.86rem;
}

.dashboard-stat-value {
    margin: 0;
    color: #0f1d35;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
}

.dashboard-panel,
.content-panel {
    background: #ffffff;
    border: 1px solid #d8dde4;
    border-radius: 0.55rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    padding: 1rem;
}

.dashboard-panel-title,
.content-panel-title {
    margin: 0 0 0.8rem;
    color: #13213a;
    font-size: 1.2rem;
    font-weight: 700;
}

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

.quick-action-card {
    border: 1px dashed #ced5df;
    border-radius: 0.5rem;
    padding: 0.95rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    text-decoration: none;
    color: #0f1d35;
    transition: all 0.2s ease;
}

.quick-action-card:hover {
    border-color: #8dc25f;
    background: #f7fbf2;
}

.quick-action-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.45rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-action-title {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
}

.quick-action-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: #7e8798;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.activity-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.activity-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #61a729;
}

.activity-dot.orange {
    background: #f2891d;
}

.activity-slide-thumb {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.42rem;
    object-fit: cover;
    border: 1px solid #d5dde8;
    background: #eef3f9;
}

.activity-type,
.activity-title,
.activity-time {
    margin: 0;
}

.activity-type {
    font-size: 0.9rem;
    color: #263246;
    font-weight: 600;
}

.activity-title,
.activity-time {
    font-size: 0.8rem;
    color: #7e8798;
}

.activity-preview {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: #6f7c92;
    line-height: 1.3;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 52ch;
}

.activity-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.activity-badge,
.status-pill {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
}

.activity-badge.green,
.status-pill.green {
    color: #1c8c41;
    background: #dff5e6;
}

.activity-badge.orange,
.status-pill.orange {
    color: #c16b0a;
    background: #ffe9d1;
}

.activity-badge.blue,
.status-pill.blue {
    color: #0d5fa6;
    background: #dbefff;
}

.activity-badge.red,
.status-pill.red {
    color: #b23333;
    background: #ffe0e0;
}

.content-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.status-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.status-filter-wrap .material-symbols-outlined {
    color: #707d90;
    font-size: 1.1rem;
}

.search-box {
    position: relative;
    flex: 1;
}

.search-box .material-symbols-outlined {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8490a2;
    font-size: 1.05rem;
}

.search-box input {
    padding-left: 2rem;
}

.status-filter {
    width: 180px;
}

@media (max-width: 575.98px) {
    .content-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        width: 100%;
    }

    .status-filter-wrap {
        width: 100%;
    }

    .status-filter {
        width: 100%;
    }
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.content-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-item {
    border: 1px solid #d6dce4;
    border-radius: 0.55rem;
    padding: 0.95rem;
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 0.55rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.content-item-main {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.content-card-actions {
    margin-left: auto;
    display: flex;
    gap: 0.35rem;
}

.content-icon-btn {
    border: 0;
    background: transparent;
    color: #72a35a;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.content-icon-btn .material-symbols-outlined {
    font-size: 1rem;
}

.content-icon-btn:hover {
    background: #edf6e7;
}

.content-icon-btn.danger {
    color: #ff4d4f;
}

.content-icon-btn.danger:hover {
    background: #ffe9e9;
}

.content-item-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.45rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-item-text h3 {
    margin: 0;
    font-size: 1rem;
    color: #111f36;
    font-weight: 700;
}

.content-item-text p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #6d788b;
}

.slide-card-thumb-wrap {
    margin-bottom: 0.65rem;
}

.slide-card-thumb {
    width: 100%;
    max-height: 168px;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid #d7dfeb;
    background: #eef3f9;
}

.slide-card-preview {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.content-meta-row {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.76rem;
    color: #7f8898;
}

.content-item-editor {
    margin-top: 0.65rem;
    border-top: 1px dashed #d4dce8;
    padding-top: 0.55rem;
}

.slide-quick-start {
    border: 1px solid #dbe5f3;
    border-left: 4px solid #61a729;
    border-radius: 0.58rem;
    background: #f7faf5;
    padding: 0.7rem 0.8rem;
}

.slide-quick-start h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #22342a;
}

.slide-quick-start p {
    margin: 0.25rem 0 0;
    color: #57677f;
    font-size: 0.84rem;
}

.slide-advanced-panel {
    border: 1px solid #d7dfec;
    border-radius: 0.58rem;
    background: #fbfcff;
    padding: 0.65rem 0.75rem;
}

.slide-advanced-panel summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #314c6d;
}

.slide-advanced-panel summary::-webkit-details-marker {
    display: none;
}

.slide-advanced-panel summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    margin-right: 0.25rem;
    color: #4e647d;
}

.slide-advanced-panel[open] summary::before {
    content: "-";
}

.slide-layout-editor {
    border: 1px solid #d6dde8;
    border-radius: 0.58rem;
    background: #f7f9fc;
    padding: 0.8rem;
}

.slide-layout-help {
    margin: 0 0 0.55rem;
    color: #5f6f86;
    font-size: 0.83rem;
}

.slide-layout-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    border: 1px dashed #bfcde2;
    background:
        linear-gradient(90deg, rgba(176, 195, 220, 0.16) 1px, transparent 1px),
        linear-gradient(rgba(176, 195, 220, 0.16) 1px, transparent 1px), #f0f4fb;
    background-size:
        38px 38px,
        38px 38px,
        auto;
    overflow: hidden;
}

.slide-layout-guide {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    background: rgba(14, 133, 55, 0.7);
}

.slide-layout-guide.guide-x {
    left: 0;
    right: 0;
    height: 1px;
}

.slide-layout-guide.guide-y {
    top: 0;
    bottom: 0;
    width: 1px;
}

.slide-layout-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    touch-action: none;
    cursor: grab;
    box-sizing: border-box;
}

.slide-layout-item.is-dragging {
    cursor: grabbing;
}

.slide-layout-image {
    width: 36%;
    min-height: 78px;
    border-radius: 0.55rem;
    border: 2px dashed #90a3be;
    background: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slide-layout-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-layout-image-placeholder {
    color: #587090;
    font-size: 0.85rem;
    font-weight: 700;
}

.slide-layout-text {
    width: 42%;
    border-radius: 0.55rem;
    border: 2px solid rgba(0, 117, 45, 0.3);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    padding: 0.45rem 0.58rem;
    --slide-title-size: 16px;
    --slide-body-size: 9px;
}

.slide-layout-text strong {
    display: block;
    margin-bottom: 0.3em;
    color: #13213a;
    font-size: var(--slide-title-size);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.slide-layout-text span {
    display: block;
    color: #43556f;
    font-size: var(--slide-body-size);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.content-item-editor summary {
    cursor: pointer;
    font-weight: 600;
    color: #3b4a64;
}

#slide-description,
#notification-message,
.content-item-editor textarea {
    resize: none;
}

.btn-warning {
    background: #f2891d;
    border-color: #f2891d;
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #d97510;
    border-color: #d97510;
    color: #fff;
}

.video-guideline-panel {
    background: #fff8ef;
    border-color: #f2c187;
}

.guideline-list {
    margin: 0;
    padding-left: 1.2rem;
    color: #7f6951;
    font-size: 0.86rem;
}

.guideline-list li + li {
    margin-top: 0.35rem;
}

.video-card {
    border: 1px solid #d6dce4;
    border-radius: 0.58rem;
    overflow: hidden;
    background: #fff;
}

.video-card-preview {
    height: 292px;
    position: relative;
    background: #f6dfc3;
}

.video-card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.video-card-embed {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.1rem;
    color: #4d436e;
    pointer-events: none;
}

.video-card-body {
    padding: 0.8rem;
}

.video-card-body h3 {
    margin: 0 0 0.45rem;
    color: #111f36;
    font-size: 0.95rem;
    font-weight: 700;
}

.video-card-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    color: #7f8898;
    font-size: 0.76rem;
}

.video-card-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.6rem;
}

.video-card-actions .status-pill {
    margin-left: auto;
}

.video-upload-card {
    border: 1px dashed #cfd7e1;
    border-radius: 0.5rem;
    background: #f9fbfd;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-upload-card h3 {
    margin: 0;
    color: #12213a;
    font-size: 1rem;
    font-weight: 700;
}

.video-upload-card p {
    margin: 0.3rem 0 0.8rem;
    font-size: 0.82rem;
    color: #7f8898;
}

.live-preview-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    background: #e6e8ec;
    display: flex;
    flex-direction: column;
}

.live-preview-topbar {
    background: linear-gradient(135deg, #5ca524 0%, #4b8f1f 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.3rem;
    flex-wrap: wrap;
}

.live-preview-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 240px;
}

.live-preview-brand .material-symbols-outlined {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.live-preview-brand h1 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
}

.live-preview-brand p {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.95;
}

.live-preview-header-meta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.live-preview-weather-inline,
.live-preview-clock-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.live-preview-weather-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(255, 255, 255, 0.14);
    flex: 0 0 auto;
}

.live-preview-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.live-preview-countdown {
    text-align: right;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.live-preview-countdown-label {
    margin: 0;
    opacity: 0.95;
}

.live-preview-countdown-days {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.live-preview-countdown-value {
    margin: 0;
    line-height: 1;
}

.live-preview-weather-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.live-preview-weather-location {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.9;
}

#live-weather-description {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 800;
    color: #fff;
}

.live-preview-weather-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.live-preview-weather-temperature {
    font-weight: 800;
}

.live-preview-weather-wind {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.live-preview-clock-inline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.live-preview-clock-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    flex: 0 0 auto;
}

.live-preview-clock-icon .material-symbols-outlined {
    font-size: 1rem;
}

.live-preview-clock-values {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.live-preview-clock-values p {
    margin: 0;
}

#live-clock-time {
    font-size: 1.55rem;
    line-height: 0.95;
    font-weight: 800;
    color: #fff;
}

#live-clock-date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.live-preview-clock p {
    margin: 0;
}

#live-topbar-countdown {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
}

#live-topbar-countdown-date {
    font-size: 0.95rem;
}

.live-preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    gap: 1rem;
}

.live-frame {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.live-frame[hidden] {
    display: none;
}

.live-preview-card {
    width: min(1120px, 100%);
    background: #fff;
    border-radius: 0.75rem;
    border-top: 8px solid #0e8537;
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.16);
    padding: 2.6rem 2.8rem;
    display: flex;
    gap: 1rem;
}

.live-preview-card-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 0.6rem;
    background: #008c3f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    flex-shrink: 0;
}

.live-preview-badge {
    display: inline-block;
    background: #0c8b3d;
    color: #fff;
    border-radius: 0.4rem;
    padding: 0.42rem 1.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.live-preview-badge.live-badge-normal {
    background: #0c8b3d;
}

.live-preview-badge.live-badge-info {
    background: #0d5fa6;
}

.live-preview-badge.live-badge-important {
    background: #c16b0a;
}

.live-preview-badge.live-badge-urgent {
    background: #b23333;
}

.live-preview-card.live-level-info {
    border-top-color: #0d5fa6;
}

.live-preview-card.live-level-important {
    border-top-color: #c16b0a;
}

.live-preview-card.live-level-urgent {
    border-top-color: #b23333;
}

.live-preview-card-text h2 {
    margin: 1rem 0 0.9rem;
    color: #11213a;
    font-size: clamp(2.1rem, 3vw, 3.3rem);
    font-weight: 700;
}

.live-preview-card-text p {
    margin: 0;
    color: #35445e;
    font-size: clamp(1.65rem, 2vw, 2.6rem);
    line-height: 1.45;
}

.live-preview-student-card {
    width: min(1120px, 100%);
    background: linear-gradient(135deg, #f0f8f4 0%, #e8f0d8 100%);
    border-radius: 0.75rem;
    border-top: 8px solid #61a729;
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.16);
    padding: 2.6rem 2.8rem;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.live-preview-student-avatar {
    width: 8rem;
    height: 8rem;
    min-width: 8rem;
    border-radius: 50%;
    background: #61a729;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.live-preview-student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-preview-student-initials {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

.live-preview-student-text {
    min-width: 0;
    flex: 1;
}

.live-preview-student-text h2 {
    margin: 0.5rem 0 0.9rem;
    color: #11213a;
    font-size: clamp(2.1rem, 3vw, 3.3rem);
    font-weight: 700;
}

.live-preview-student-text p {
    margin: 0;
    color: #35445e;
    font-size: clamp(1.65rem, 2vw, 2.6rem);
    line-height: 1.45;
}

.live-preview-enquete {
    width: min(1120px, 100%);
    background: linear-gradient(135deg, #f3f9ff 0%, #e9f1ff 100%);
    border-radius: 0.75rem;
    border-top: 8px solid #1f5da8;
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.16);
    padding: 2.4rem 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
}

.live-preview-enquete-info h2 {
    margin: 0.75rem 0 0.8rem;
    color: #11213a;
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 700;
}

.live-preview-enquete-info p {
    margin: 0;
    color: #32425c;
    font-size: clamp(1.2rem, 1.8vw, 1.8rem);
    line-height: 1.45;
}

.live-preview-enquete-url {
    margin-top: 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #0d3f78 !important;
    word-break: break-all;
}

.live-preview-enquete-qr-wrap {
    width: min(320px, 42vw);
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 0.65rem;
    border: 2px solid #d2e2f6;
    padding: 0.8rem;
    box-shadow: 0 8px 20px rgba(12, 46, 92, 0.14);
}

.live-preview-enquete-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.live-preview-roster {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #eceff4 100%);
    border-radius: 0.75rem;
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.16);
    padding: 1.2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow: hidden;
}

.live-roster-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-bottom: 3px solid #61a729;
    padding-bottom: 0.6rem;
}

.live-roster-header h2 {
    margin: 0;
    color: #11213a;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
}

.live-roster-table-wrap {
    flex: 1;
    overflow: auto;
}

.live-roster-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d8dde4;
    border-radius: 0.5rem;
    overflow: hidden;
}

.live-roster-table thead th {
    background: #fbfdff;
    border-bottom: 2px solid #61a729;
    padding: 0.6rem 0.5rem;
    color: #11213a;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.live-roster-table tbody tr {
    border-top: 1px solid #e6eef3;
    transition: background-color 0.15s ease;
}

.live-roster-table tbody tr:hover {
    background-color: #fbfdf7;
}

.live-roster-table tbody td {
    padding: 0.65rem 0.5rem;
    color: #35445e;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
}

.live-roster-break td {
    background-color: #f8fafc;
}

.live-roster-time {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.live-roster-time span:first-child {
    font-size: 1rem;
    color: #61a729;
    flex-shrink: 0;
}

.live-roster-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.live-roster-badge.bg-primary {
    background-color: #61a729;
    color: #fff;
}

.live-roster-badge.bg-secondary {
    background-color: #706758;
    color: #fff;
}

.roster-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.roster-table-panel,
.roster-form-panel,
.roster-screen-panel {
    margin-bottom: 0.5rem;
}

.roster-table {
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 0.55rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.roster-table thead th {
    background: #fbfdff;
    border-bottom: 1px solid #d8dde4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.roster-table tbody td {
    border-top: 1px solid #e6eef3;
}

.roster-table tbody tr:first-child td {
    border-top: 0;
}

.roster-row-break td {
    background: #f8fafc;
}

.roster-row-lesson:hover td,
.roster-row-break:hover td {
    background: #fbfdf7;
}

.roster-day-cell,
.roster-time-cell,
.roster-room-cell {
    white-space: nowrap;
}

.roster-day-cell,
.roster-time-cell,
.roster-room-cell,
.roster-actions-cell,
.roster-type-cell {
    width: 1%;
}

.roster-time-cell {
    vertical-align: middle;
}

.roster-time-content {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.roster-actions {
    display: inline-flex;
    gap: 0.45rem;
}

.roster-icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d6dce4;
    color: var(--color-primary);
    border-radius: 0.35rem;
    padding: 0;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}

.roster-icon-btn:hover {
    background: #f7fbf2;
    border-color: #8dc25f;
    transform: translateY(-1px);
}

.roster-icon-btn.danger {
    color: #c83a3a;
}

.roster-icon-btn.danger:hover {
    background: #ffecec;
    border-color: #ffb3b3;
}

.roster-icon-btn .material-symbols-outlined {
    font-size: 1rem;
}

.rooster-screen {
    background: #fff;
    padding: 1.25rem 1.35rem;
    border: 1px solid #d8dde4;
    border-radius: 0.55rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.rooster-screen-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e6eef3;
    color: #111827;
}

.rooster-screen-header .material-symbols-outlined {
    font-size: 2rem;
}

.rooster-screen-header h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
}

.rooster-screen-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rooster-screen-empty {
    padding: 0.9rem 1rem;
    border: 1px dashed #d8dde4;
    border-radius: 0.5rem;
    background: #fbfcfe;
}

.rooster-screen-item {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #d9dfe9;
    border-radius: 0.45rem;
    padding: 0.85rem 0.95rem;
}

.rooster-screen-item.pause {
    background: #f8fafc;
}

.rooster-screen-item:hover {
    background: #fbfdf7;
}

.rooster-screen-time {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

.rooster-screen-content h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #111827;
}

.rooster-screen-content p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: #637083;
}

.rooster-screen-type {
    justify-self: end;
}

.rooster-actions {
    display: inline-flex;
    gap: 0.45rem;
}
.rooster-icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d6dce4;
    color: var(--color-primary);
    border-radius: 0.35rem;
    padding: 0;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}
.rooster-icon-btn:hover {
    background: #f7fbf2;
    border-color: #8dc25f;
    transform: translateY(-1px);
}
.rooster-icon-btn.danger {
    color: #ff4d4f;
}
.rooster-icon-btn.danger:hover {
    background: #ffecec;
    border-color: #ffb3b3;
}

.roster-screen-item.pause {
    background: #f8fafc;
}

.roster-screen-time {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

.roster-screen-content h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #111827;
}

.roster-screen-content p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: #637083;
}

.roster-screen-type {
    justify-self: end;
}
.live-birthday-card {
    width: min(1280px, 100%);
    min-height: min(74vh, 780px);
    border-radius: 1.1rem;
    padding: 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 1rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(243, 185, 53, 0.18) 0 2px, transparent 2px 100%),
        radial-gradient(circle at 82% 22%, rgba(92, 165, 36, 0.16) 0 2px, transparent 2px 100%),
        radial-gradient(circle at 88% 80%, rgba(242, 141, 27, 0.14) 0 2px, transparent 2px 100%),
        linear-gradient(180deg, #ffffff 0%, #fbfcf8 100%);
    border: 1px solid rgba(92, 165, 36, 0.22);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(242, 141, 27, 0.08) inset,
        0 0 26px rgba(92, 165, 36, 0.14);
    position: relative;
    overflow: hidden;
    animation: birthday-card-float 6s ease-in-out infinite;
}

.live-birthday-card::before,
.live-birthday-card::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.22;
}

.live-birthday-card::before {
    top: -70px;
    right: -50px;
    background: radial-gradient(circle, rgba(92, 165, 36, 0.35) 0 18px, transparent 18px 100%);
}

.live-birthday-card::after {
    left: -60px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(242, 141, 27, 0.28) 0 18px, transparent 18px 100%);
}

@keyframes birthday-card-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.live-birthday-content {
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e3eadc;
    box-shadow: none;
    padding: clamp(1.1rem, 2vw, 1.7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.live-birthday-badge {
    align-self: flex-start;
    margin-bottom: 0.9rem;
    background: #eef5e7;
    color: #2f5f24;
    box-shadow: none;
}

.live-birthday-banner {
    display: inline-flex;
    align-self: flex-start;
    margin: -0.15rem 0 0.65rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #61a729 0%, #8ac349 100%);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 10px 18px rgba(92, 165, 36, 0.24);
    animation: birthday-banner-pulse 2.6s ease-in-out infinite;
}

@keyframes birthday-banner-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

.live-birthday-content h2 {
    margin: 0.45rem 0 0.85rem;
    color: #18241a;
    font-size: clamp(2.3rem, 3.3vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.live-birthday-message {
    margin: 0;
    color: #3f4f47;
    font-size: clamp(1.05rem, 1.4vw, 1.55rem);
    line-height: 1.35;
    font-weight: 600;
}

.live-birthday-visuals {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, #f8faf7 0%, #eef3ea 100%);
    min-height: 100%;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
}

.live-birthday-confetti {
    position: absolute;
    width: 7.2rem;
    height: 7.2rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0.95;
    animation: confetti-bob 4.5s ease-in-out infinite;
}

@keyframes confetti-bob {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
    }
}

.live-birthday-confetti::before,
.live-birthday-confetti::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.live-birthday-confetti-top-left {
    top: 0.1rem;
    left: 0.15rem;
    background:
        radial-gradient(circle at 18% 18%, #f2af1a 0 6px, transparent 6px 100%),
        radial-gradient(circle at 42% 26%, #61a729 0 5px, transparent 5px 100%),
        radial-gradient(circle at 22% 58%, #f2891d 0 4px, transparent 4px 100%),
        radial-gradient(circle at 58% 50%, #d85b4d 0 5px, transparent 5px 100%),
        radial-gradient(circle at 78% 18%, #89b95a 0 4px, transparent 4px 100%);
}

.live-birthday-confetti-top-right {
    top: 0.1rem;
    right: 0.15rem;
    background:
        radial-gradient(circle at 78% 18%, #f2af1a 0 6px, transparent 6px 100%),
        radial-gradient(circle at 56% 28%, #61a729 0 5px, transparent 5px 100%),
        radial-gradient(circle at 76% 58%, #f2891d 0 4px, transparent 4px 100%),
        radial-gradient(circle at 42% 48%, #d85b4d 0 5px, transparent 5px 100%),
        radial-gradient(circle at 22% 18%, #89b95a 0 4px, transparent 4px 100%);
}

.live-birthday-photo-wrap {
    position: relative;
    width: min(100%, 340px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.live-birthday-photo,
.live-birthday-photo-fallback {
    width: 100%;
    height: 100%;
    border-radius: 1.3rem;
    object-fit: cover;
    border: 0.35rem solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.live-birthday-photo-fallback {
    background: linear-gradient(145deg, #d9e4d0 0%, #b9c8b0 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.live-birthday-photo-fallback .material-symbols-outlined {
    font-size: 7rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 48;
}

.live-birthday-photo-ring {
    position: absolute;
    inset: -0.28rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(92, 165, 36, 0.24);
    pointer-events: none;
    box-shadow: 0 0 0 6px rgba(242, 175, 26, 0.06);
}

.live-preview-layout {
    position: relative;
    width: min(1280px, 100%);
    min-height: min(72vh, 760px);
    overflow: hidden;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #f7fbff 0%, #e6eef8 100%);
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.16);
}

.live-layout-image {
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: 1rem;
}

.live-layout-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.22));
}

.live-layout-text {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1rem;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
    padding: 1rem 1.15rem;
}

.live-layout-text h2 {
    margin: 1rem 0 0.8rem;
    color: inherit;
    font-size: var(--slide-title-size, clamp(2.2rem, 3.5vw, 4.25rem));
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.live-layout-text p {
    margin: 0;
    color: inherit;
    font-size: var(--slide-body-size, clamp(1.35rem, 2vw, 2.2rem));
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.live-anim-fade {
    opacity: 0;
    animation: liveFadeIn var(--slide-anim-duration, 900ms) ease var(--slide-anim-delay, 0ms) forwards;
}

.live-anim-slide-up {
    opacity: 0;
    animation: liveSlideUp var(--slide-anim-duration, 900ms) ease var(--slide-anim-delay, 0ms) forwards;
}

.live-anim-zoom {
    opacity: 0;
    animation: liveZoomIn var(--slide-anim-duration, 900ms) ease var(--slide-anim-delay, 0ms) forwards;
}

.live-anim-typewriter h2,
.live-anim-typewriter p {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: liveTypewriter var(--slide-anim-duration, 1800ms) steps(30, end) var(--slide-anim-delay, 0ms) forwards;
}

@keyframes liveFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes liveSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 28px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes liveZoomIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes liveTypewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.live-preview-video-wrap {
    width: min(1260px, 100%);
}

.live-preview-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 0.7rem;
    box-shadow: 0 12px 24px rgba(2, 8, 23, 0.12);
    background: #000;
}

.live-preview-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 460px;
    border: 0;
    border-radius: 0.7rem;
    box-shadow: 0 12px 24px rgba(2, 8, 23, 0.12);
    background: #000;
}

.live-frame-video-title {
    margin: 0.8rem 0 0;
    color: #24324a;
    font-size: 1.4rem;
    font-weight: 700;
}

.live-preview-footer {
    background: #027a2d;
    color: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 2rem;
}

.live-preview-footer-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
}

.live-preview-progress {
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.live-preview-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #fff;
    transition: width 0.12s linear;
}

.live-preview-progress span.is-loop {
    animation: live-loop-progress 1.2s linear infinite;
}

@keyframes live-loop-progress {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

.live-preview-footer-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.live-preview-footer-title {
    font-weight: 700;
    font-size: 1rem;
}

.live-preview-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.live-control-btn {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 0.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.live-control-btn:hover,
.live-control-btn:focus {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.live-control-btn .material-symbols-outlined {
    font-size: 1.15rem;
}

.video-upload-modal {
    border-radius: 0.5rem;
    border: 1px solid #d9dbe1;
}

.video-upload-modal .modal-header {
    padding: 1.1rem 1.2rem;
}

.video-upload-modal .modal-title {
    font-size: 1.95rem;
    font-weight: 800;
    color: #151f2f;
}

.video-upload-modal .modal-body {
    padding: 1.15rem;
}

.video-dropzone {
    width: 100%;
    border: 1px dashed #f19c43;
    background: #f4ecdf;
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    cursor: pointer;
}

.video-dropzone input[type="file"] {
    /* table-specific tweaks to make borders and cells more visible */
    .roster-table .table {
        border-collapse: separate;
        border-spacing: 0;
    }
    .roster-table .table thead th {
        background: #fbfdff;
    }
    .roster-table .table tbody > tr {
        border-bottom: 1px solid #e6eef3;
    }
    .roster-table .table td,
    .roster-table .table th {
        padding: 0.65rem 0.9rem;
    }
    display: none;
}

.video-dropzone-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.6rem;
    background: #f28d1b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.video-dropzone strong {
    font-size: 1.06rem;
    font-weight: 600;
    color: #2d3442;
}

.video-dropzone small {
    color: #7d7b76;
    font-size: 0.95rem;
}

.video-dropzone-button {
    margin-top: 0.25rem;
    background: #f28d1b;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.62rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 5px 10px rgba(242, 141, 27, 0.28);
}

@media (max-width: 991.98px) {
    .sidebar-nav {
        position: static;
        width: 100%;
        height: auto;
        padding: 0.95rem 0.85rem;
        border-right: 0;
        border-bottom: 1px solid #d9ddd4;
        border-radius: 0 0 1rem 1rem;
    }
    .sidebar-brand {
        border-bottom: 0;
        padding-bottom: 0.4rem;
    }
    .sidebar-menu-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.45rem;
    }
    .sidebar-admin-section {
        margin-top: 1rem;
    }
    body > .container {
        margin-left: 0;
        width: 100%;
        padding: 1.25rem 0.75rem 2rem;
    }
    .protected-page-header {
        padding: 0.95rem 1rem;
    }
    .protected-page-title {
        font-size: 1.6rem;
    }

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

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .content-grid.two-col,
    .content-grid.three-col {
        grid-template-columns: 1fr;
    }

    .live-preview-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.15rem;
    }

    .live-preview-student-card {
        flex-direction: column;
        align-items: center;
        padding: 1.15rem;
        text-align: center;
    }

    .live-preview-enquete {
        grid-template-columns: 1fr;
        padding: 1.15rem;
        text-align: center;
        justify-items: center;
    }

    .live-preview-enquete-qr-wrap {
        width: min(220px, 62vw);
        margin: 0.15rem auto 0;
    }

    .live-preview-enquete-url {
        font-size: 0.74rem !important;
    }

    .live-preview-layout {
        width: 100%;
    }

    .live-birthday-message {
        max-width: none;
    }

    .live-layout-text {
        width: min(85%, 520px) !important;
        left: 50% !important;
        top: 70% !important;
    }

    .live-layout-image {
        width: min(70%, 420px) !important;
        left: 50% !important;
        top: 33% !important;
    }

    .live-preview-youtube {
        min-height: 260px;
    }

    .live-preview-brand h1 {
        font-size: 1.15rem;
    }

    .live-preview-brand p {
        font-size: 0.75rem;
    }

    .live-preview-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.85rem 0.9rem;
    }

    .live-preview-brand {
        min-width: 0;
    }

    .live-preview-header-meta {
        justify-content: space-between;
        gap: 0.7rem;
    }

    .live-preview-weather-inline,
    .live-preview-clock-inline {
        gap: 0.5rem;
    }

    .live-preview-weather-location {
        font-size: 0.64rem;
    }

    #live-weather-description {
        font-size: 1rem;
    }

    .live-preview-status {
        gap: 0.55rem;
    }

    .live-preview-countdown {
        padding-left: 0.55rem;
    }

    .live-preview-countdown-label {
        font-size: 0.7rem;
    }

    .live-preview-countdown-days {
        font-size: 0.62rem;
    }

    .live-preview-countdown-value {
        font-size: 1.7rem;
    }

    #live-clock-time {
        font-size: 1.35rem;
    }

    #live-clock-date {
        font-size: 0.64rem;
    }

    #live-topbar-countdown {
        font-size: 1.7rem;
    }

    #live-topbar-countdown-date {
        font-size: 0.7rem;
    }

    .live-preview-card-text p {
        font-size: 1rem;
    }

    .roster-screen {
        padding: 1.15rem;
        border-width: 4px;
    }

    .roster-screen-item {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0.55rem;
    }

    .roster-screen-type {
        justify-self: start;
    }

    .roster-table .text-end {
        text-align: left !important;
    }

    .roster-actions {
        margin-top: 0.25rem;
    }
    .live-birthday-content h2 {
        font-size: 2.1rem;
    }

    .live-birthday-message {
        font-size: 0.98rem;
    }

    .live-preview-footer {
        grid-template-columns: 1fr;
    }

    .live-preview-footer-right {
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .protected-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.user-management-page {
    --rowen-primary: #61a729;
    --rowen-accent: #f2891d;
    --rowen-neutral: #706758;
    --rowen-secondary: #00752d;
    --rowen-soft: #eef4e5;
    --rowen-border: #d8dfcc;

    display: flex;
    flex-direction: column;
    gap: 0;
}

.user-management-header {
    background:
        radial-gradient(circle at 90% 20%, rgba(242, 137, 29, 0.18) 0, transparent 42%),
        radial-gradient(circle at 8% 90%, rgba(0, 117, 45, 0.16) 0, transparent 40%), #ffffff;
    border-color: var(--rowen-border);
}

.user-management-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f7fbf0;
    color: var(--rowen-secondary);
    border: 1px solid #bed7a5;
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.user-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.user-card {
    background: #ffffff;
    border: 1px solid var(--rowen-border);
    border-radius: 0.82rem;
    padding: 1rem;
    box-shadow: 0 8px 18px rgba(24, 39, 15, 0.06);
}

.user-card-full {
    width: 100%;
}

.user-card h2 {
    margin: 0;
    font-size: 1.12rem;
    color: #23301d;
    font-weight: 700;
}

.user-card-subtitle {
    margin: 0.3rem 0 0.9rem;
    color: var(--rowen-neutral);
    font-size: 0.86rem;
}

.user-empty {
    margin: 0;
    color: var(--rowen-neutral);
}

.admin-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.58rem 0.68rem;
    border-radius: 0.6rem;
    background: linear-gradient(120deg, rgba(97, 167, 41, 0.14), rgba(0, 117, 45, 0.1));
    border: 1px solid #cbe0b6;
}

.admin-list strong {
    display: block;
    font-size: 0.9rem;
}

.admin-list small {
    color: var(--rowen-neutral);
    font-size: 0.73rem;
}

.permission-table-wrapper {
    overflow-x: auto;
    border: 1px solid #dde5d2;
    border-radius: 0.6rem;
}

.permission-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.permission-table th,
.permission-table td {
    padding: 0.7rem;
    border-bottom: 1px solid #e4eadb;
    vertical-align: middle;
    font-size: 0.85rem;
}

.permission-table thead th {
    background: var(--rowen-soft);
    color: #2c3a24;
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.permission-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.16rem 0.6rem;
}

.permission-yes {
    background: #dcefd0;
    color: var(--rowen-secondary);
}

.permission-no {
    background: #ebe8e3;
    color: var(--rowen-neutral);
}

.permission-summary {
    margin: 0.75rem 0 0;
    color: #2f3d27;
    font-size: 0.84rem;
}

.table-user-email {
    display: block;
    font-weight: 600;
    color: #263220;
}

.table-user-id {
    color: var(--rowen-neutral);
    font-size: 0.72rem;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.58rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.role-pill-admin {
    background: rgba(0, 117, 45, 0.14);
    color: var(--rowen-secondary);
}

.role-pill-reader {
    background: rgba(112, 103, 88, 0.14);
    color: #4f473c;
}

.role-form {
    margin: 0;
}

.role-select {
    min-width: 10rem;
    border-color: #cfd9c0;
    font-size: 0.82rem;
}

.role-save-btn {
    background: var(--rowen-accent);
    border: 1px solid var(--rowen-accent);
    color: #fff;
    font-weight: 700;
}

.role-save-btn:hover,
.role-save-btn:focus {
    background: #d9781a;
    border-color: #d9781a;
    color: #fff;
}

.role-save-btn:disabled,
.role-select:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

@media (max-width: 991.98px) {
    .user-management-grid {
        grid-template-columns: 1fr;
    }

    .permission-table {
        min-width: 530px;
    }
}

@media (max-width: 575.98px) {
    .user-card {
        padding: 0.85rem;
    }

    .user-management-header-badge {
        width: 100%;
        justify-content: center;
    }

    .permission-table {
        min-width: 460px;
    }
}

.forbidden-header {
    border-color: #f3d3ad;
    background: radial-gradient(circle at 88% 18%, rgba(242, 137, 29, 0.22) 0, transparent 42%), #fffdfa;
}

.forbidden-icon {
    font-size: 2rem;
    color: #c8610c;
}

.forbidden-text {
    color: #5f5649;
    max-width: 52ch;
}

.user-rights-page {
    --rights-green: #61a729;
    --rights-green-dark: #00752d;
    --rights-green-soft: #eef6e4;
    --rights-border: #d9e3cf;
    --rights-text: #2b2f2a;
    --rights-muted: #7b8378;

    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.user-rights-header {
    background: #f5f8f1;
    border: 1px solid var(--rights-border);
    border-radius: 0.78rem;
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.user-rights-title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--rights-text);
}

.user-rights-subtitle {
    margin: 0.18rem 0 0;
    font-size: 0.8rem;
    color: var(--rights-muted);
}

.add-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--rights-green);
    background: var(--rights-green);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.38rem 0.75rem;
    border-radius: 0.5rem;
}

.add-admin-btn .material-symbols-outlined {
    font-size: 1rem;
}

.rights-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.rights-stat-card {
    background: #fff;
    border: 1px solid #e4eadc;
    border-radius: 0.72rem;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.rights-stat-label {
    margin: 0;
    font-size: 0.74rem;
    color: #8a9386;
}

.rights-stat-value {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2f352e;
}

.rights-stat-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--rights-green-soft);
    color: var(--rights-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.rights-info {
    border: 1px solid #aacf8f;
    background: #f7fbf2;
    border-radius: 0.72rem;
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.rights-info .material-symbols-outlined {
    font-size: 1rem;
    color: var(--rights-green);
    margin-top: 0.08rem;
}

.rights-info h2 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: #2c3329;
}

.rights-info p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #6f786c;
}

.pending-users-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pending-users-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0 0.2rem;
}

.pending-users-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2f372d;
}

.pending-users-subtitle {
    margin: 0;
    font-size: 0.76rem;
    color: #7b8378;
}

.rights-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e3e8dd;
    border-radius: 0.72rem;
}

.rights-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.rights-table th,
.rights-table td {
    padding: 0.8rem 0.7rem;
    font-size: 0.8rem;
    border-bottom: 1px solid #edf1ea;
    color: #40473d;
    vertical-align: middle;
    white-space: nowrap;
}

.rights-table th {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #7b8578;
    background: #f9fbf7;
}

.rights-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: #2f372d;
}

.rights-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: #68ad2f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Geplande Content Styling */
.scheduled-content-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scheduled-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8faf5 0%, #f5f8f1 100%);
    border-radius: 0.6rem;
    border-left: 4px solid #61a729;
    transition: box-shadow 0.2s ease;
}

.scheduled-content-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scheduled-content-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 0 0 auto;
    min-width: 0;
}

.scheduled-content-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(97, 167, 41, 0.12);
    color: #61a729;
    flex-shrink: 0;
}

.scheduled-content-icon.dark-green {
    color: #00752d;
    background: rgba(0, 117, 45, 0.12);
}

.scheduled-content-icon.orange {
    color: #f2891d;
    background: rgba(242, 137, 29, 0.12);
}

.scheduled-content-row:has(.scheduled-content-icon.dark-green) {
    border-left-color: #00752d;
}

.scheduled-content-row:has(.scheduled-content-icon.orange) {
    border-left-color: #f2891d;
}

.scheduled-content-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}

.scheduled-content-type,
.scheduled-content-title {
    margin: 0;
    padding: 0;
}

.scheduled-content-type {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scheduled-content-title {
    font-size: 0.95rem;
    color: #263246;
    font-weight: 600;
    word-break: break-word;
}

.scheduled-content-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.scheduled-content-timeframe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.scheduled-content-separator {
    color: #cbd5e1;
    font-weight: 600;
}

.scheduled-content-dates {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scheduled-content-label {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== Mobile Responsive for Slides Page ===== */

@media (max-width: 767px) {
    /* Slides header and buttons */
    .protected-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .protected-page-header > div:first-child {
        width: 100%;
    }

    .protected-page-header .d-flex {
        width: 100%;
        gap: 0.5rem;
    }

    .protected-page-header .btn {
        flex: 1;
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    .protected-page-title {
        font-size: 1.75rem;
    }

    .protected-page-subtitle {
        font-size: 0.88rem;
    }

    /* Form layout on mobile */
    .row.g-3 > .col-md-2,
    .row.g-3 > .col-md-3,
    .row.g-3 > .col-md-4,
    .row.g-3 > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row.g-2 > .col-md-3,
    .row.g-2 > .col-md-4,
    .row.g-2 > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Slide quick start */
    .slide-quick-start {
        padding: 0.6rem 0.7rem;
        margin-bottom: 0.75rem;
    }

    .slide-quick-start h3 {
        font-size: 0.88rem;
    }

    .slide-quick-start p {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    /* Slide layout editor on mobile - make it visually hidden but keep functional */
    .slide-layout-editor {
        padding: 0.5rem;
        background: #f0f4fb;
        border: 1px dashed #bfcde2;
    }

    .slide-layout-help {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
        color: #7a8aa0;
    }

    .slide-layout-stage {
        aspect-ratio: 16 / 9;
        min-height: 150px;
        border-radius: 0.4rem;
    }

    .slide-layout-item {
        cursor: move;
        border: 1px solid rgba(14, 133, 55, 0.3);
    }

    .slide-layout-image {
        width: 40%;
        min-height: 60px;
        border-radius: 0.35rem;
        border: 1px dashed #a8b5c8;
        font-size: 0.7rem;
    }

    .slide-layout-text {
        width: 45%;
        border-radius: 0.35rem;
        border: 1px solid rgba(0, 117, 45, 0.25);
        padding: 0.35rem 0.45rem;
    }

    .slide-layout-text strong {
        font-size: calc(var(--slide-title-size) * 0.7);
        margin-bottom: 0.2em;
    }

    .slide-layout-text span {
        font-size: calc(var(--slide-body-size) * 0.8);
    }

    /* Content toolbar on mobile */
    .content-toolbar {
        flex-direction: column;
        gap: 0.6rem;
    }

    .search-box,
    .status-filter-wrap {
        flex: 1;
        width: 100%;
    }

    .search-box .form-control,
    .status-filter-wrap .form-select {
        font-size: 0.95rem;
        padding: 0.4rem 0.6rem;
    }

    /* Slides grid - single column on mobile */
    .content-grid.two-col {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .content-item {
        padding: 0.75rem;
        border-radius: 0.4rem;
    }

    .content-item-main {
        gap: 0.6rem;
    }

    .content-item-text h3 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .slide-card-preview {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .content-meta-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .status-pill {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .content-card-actions {
        gap: 0.4rem;
    }

    .content-icon-btn {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    /* Slide thumbnail on mobile */
    .slide-card-thumb-wrap {
        max-height: 120px;
        overflow: hidden;
    }

    .slide-card-thumb {
        max-height: 120px;
        object-fit: cover;
    }

    /* Advanced options panel on mobile */
    .slide-advanced-panel {
        padding: 0.5rem 0.6rem;
        margin-top: 0.75rem;
    }

    .slide-advanced-panel summary {
        font-size: 0.9rem;
    }

    .slide-advanced-panel summary::before {
        width: 1rem;
        margin-right: 0.2rem;
    }

    /* Form controls in editor */
    .content-item-editor {
        padding-top: 0.4rem;
        margin-top: 0.5rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .form-control,
    .form-select {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
        border-radius: 0.3rem;
    }

    .form-range {
        height: 0.35rem;
    }

    /* Button sizing on mobile */
    .btn-sm {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .btn-primary,
    .btn-warning,
    .btn-danger {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        width: auto;
    }

    .content-item-editor .col-12 button {
        width: 100%;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
}

.scheduled-content-value {
    font-size: 0.85rem;
    color: #263246;
    font-weight: 500;
    display: block;
    line-height: 1.3;
}

.scheduled-content-value small {
    font-size: 0.75rem;
    color: #7e8798;
    display: block;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .scheduled-content-row {
        flex-wrap: wrap;
    }

    .scheduled-content-right {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 3.3rem;
    }
}

@media (max-width: 768px) {
    .scheduled-content-row {
        padding: 0.8rem;
        gap: 0.6rem;
    }

    .scheduled-content-icon {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.4rem;
    }

    .scheduled-content-timeframe {
        gap: 0.5rem;
    }

    .scheduled-content-dates {
        gap: 0.1rem;
    }

    .scheduled-content-label,
    .scheduled-content-value {
        font-size: 0.8rem;
    }

    .live-preview-roster {
        padding: 1.2rem;
    }

    .live-roster-header h2 {
        font-size: 1.6rem;
    }

    .live-roster-table thead th {
        padding: 0.6rem 0.4rem;
        font-size: 0.95rem;
    }

    .live-roster-table tbody td {
        padding: 0.65rem 0.4rem;
        font-size: 1rem;
    }

    .live-preview-student-card {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.5rem;
    }

    .live-preview-student-avatar {
        width: 5.5rem;
        height: 5.5rem;
        min-width: 5.5rem;
        font-size: 1.8rem;
    }
}

/* ===== Layout Detect Module ===== */

.layout-detect-badge {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(18, 24, 15, 0.92);
    color: #f9fbf7;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    box-sizing: border-box;
    white-space: nowrap;
    min-width: 120px;
    justify-content: center;
}

.rights-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(18, 24, 15, 0.88);
    color: #f9fbf7;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    box-sizing: border-box;
}

.layout-detect-badge[data-layout="phone"] {
    background: rgba(76, 175, 80, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.layout-detect-badge[data-layout="desktop"] {
    background: rgba(33, 150, 243, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.layout-detect-badge[data-layout="tablet"] {
    background: rgba(255, 152, 0, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

body.layout-detect-blocked {
    overflow: hidden;
}

body.layout-detect-blocked > *:not(.layout-detect-overlay) {
    display: none !important;
}

.layout-detect-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(243, 244, 246, 0.94);
    color: #2f3a28;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.layout-detect-overlay-card {
    max-width: 34rem;
    width: 100%;
    padding: 1.6rem 1.5rem 1.45rem;
    border-radius: 1rem;
    border: 1px solid #e3e7df;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.layout-detect-overlay-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.35rem;
    background: var(--gradient-primary-accent);
}

.layout-detect-overlay-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(97, 167, 41, 0.12);
    color: var(--color-primary);
}

.layout-detect-overlay-icon .material-symbols-outlined {
    font-size: 1.55rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

.layout-detect-overlay-label {
    display: inline-flex;
    margin: 0 0 0.85rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(97, 167, 41, 0.12);
    color: var(--color-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.layout-detect-overlay-card h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.1;
    font-weight: 800;
    color: #2f3a28;
}

.layout-detect-overlay-card p {
    margin-left: 0;
    margin-right: 0;
}

.layout-detect-overlay-card p:last-child {
    margin: 0.85rem 0 0;
    color: #5f6758;
    font-size: 1rem;
    line-height: 1.5;
}

.layout-detect-overlay-note {
    margin: 0.75rem 0 0;
    color: #7c8273;
    font-size: 0.88rem;
    line-height: 1.45;
}

.layout-detect-overlay-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.95rem;
    padding: 0.6rem 1rem;
    border-radius: 0.65rem;
    background: #61a729;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(97, 167, 41, 0.32);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease;
}

.layout-detect-overlay-action:hover,
.layout-detect-overlay-action:focus-visible {
    background: #4f8d22;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(79, 141, 34, 0.38);
}

.layout-detect-overlay-action:focus-visible {
    outline: 2px solid rgba(47, 58, 40, 0.35);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .layout-detect-badge {
        right: 0.75rem;
        bottom: 0.75rem;
        font-size: 0.75rem;
        padding: 0.45rem 0.8rem;
        min-width: 100px;
    }

    .scheduled-content-value small {
        font-size: 0.7rem;
    }
}

.rights-avatar .material-symbols-outlined {
    font-size: 0.95rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 20;
}

.rights-role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #69b130;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.remove-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 1px solid #ef8f8f;
    background: #fff;
    color: #d14f4f;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
}

.remove-admin-form {
    margin: 0;
}

.activate-user-form {
    margin: 0;
}

.activate-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 1px solid #aacf8f;
    background: #f7fbf2;
    color: #2a7d35;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
}

.activate-user-btn .material-symbols-outlined {
    font-size: 0.82rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 20;
}

.activate-user-btn:hover {
    background: #eef6e4;
}

.activate-user-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.activate-user-confirm-btn {
    width: auto;
    min-width: 12rem;
}

.remove-admin-btn .material-symbols-outlined {
    font-size: 0.82rem;
    font-variation-settings:
        "FILL" 0,
        "wght" 500,
        "GRAD" 0,
        "opsz" 20;
}

.remove-admin-btn:hover {
    background: #fff5f5;
}

.add-admin-modal-content {
    border-radius: 0.72rem;
    border: 1px solid #dfe8d3;
    box-shadow: 0 18px 40px rgba(17, 31, 10, 0.18);
}

.add-admin-modal-header {
    padding: 0.85rem 0.9rem 0.55rem;
    border-bottom: 0;
}

.add-admin-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3429;
}

.add-admin-form {
    display: contents;
}

.add-admin-modal-body {
    padding: 0 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
}

.add-admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.26rem;
}

.add-admin-label {
    font-size: 0.79rem;
    font-weight: 700;
    color: #404a3e;
}

.add-admin-input {
    border: 1px solid #d9e2ce;
    background: #f8fbf5;
    font-size: 0.8rem;
    padding: 0.42rem 0.56rem;
    color: #2f372d;
}

.add-admin-input::placeholder {
    color: #9aa497;
}

.add-admin-input:focus {
    border-color: #8bc15f;
    box-shadow: 0 0 0 0.18rem rgba(97, 167, 41, 0.16);
    background: #fff;
}

.add-admin-info-box {
    border: 1px solid #cdddbb;
    background: #f7fbf2;
    border-radius: 0.58rem;
    padding: 0.58rem 0.65rem;
    font-size: 0.76rem;
    color: #5f6958;
}

.add-admin-info-title {
    margin: 0 0 0.3rem;
    font-weight: 700;
    color: #495445;
    font-size: 0.76rem;
}

.add-admin-info-box ul {
    margin: 0;
    padding-left: 1.1rem;
}

.add-admin-info-box li {
    margin: 0.13rem 0;
}

.add-admin-modal-footer {
    padding: 0 0.9rem 0.9rem;
    border-top: 0;
}

.add-admin-submit-btn {
    width: 100%;
    border: 1px solid var(--rights-green);
    background: var(--rights-green);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0.4rem;
    padding: 0.45rem 0.7rem;
    transition: background-color 0.2s ease;
}

.add-admin-submit-btn:hover,
.add-admin-submit-btn:focus {
    background: var(--rights-green-dark);
    border-color: var(--rights-green-dark);
    color: #fff;
}

.student-week-page {
    --student-week-green: #61a729;
    --student-week-green-soft: #eef6e4;
    --student-week-border: #d9e3cf;
    --student-week-text: #2f372d;
    --student-week-muted: #7b8378;

    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.student-week-header {
    background: #f5f8f1;
    border: 1px solid var(--student-week-border);
    border-radius: 0.78rem;
    padding: 0.95rem 1rem;
}

.student-week-title {
    font-size: 1.22rem;
    color: var(--student-week-text);
}

.student-week-subtitle {
    margin-top: 0.18rem;
    font-size: 0.8rem;
    color: var(--student-week-muted);
}

.student-week-action-btn {
    border-color: var(--student-week-green);
    background: var(--student-week-green);
}

.student-week-action-btn .material-symbols-outlined {
    font-size: 1rem;
}

.student-week-list-panel,
.student-week-preview-panel {
    border: 1px solid #e4eadc;
    border-radius: 0.72rem;
    box-shadow: none;
}

.student-week-panel-title {
    font-size: 0.98rem;
}

.student-week-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.student-week-card {
    background: #fff;
    border: 1px solid #e4eadc;
    border-radius: 0.72rem;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: 4.7rem minmax(0, 1fr);
    gap: 0.85rem;
}

.student-week-avatar,
.student-week-preview-avatar {
    background: var(--student-week-green-soft);
    border: 1px solid #cfe0bc;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--student-week-green);
    font-weight: 800;
    line-height: 1;
}

.student-week-avatar {
    width: 4.7rem;
    height: 4.7rem;
    font-size: 1rem;
}

.student-week-avatar span,
.student-week-preview-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.student-week-avatar img,
.student-week-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-week-card-body {
    min-width: 0;
}

.student-week-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.student-week-card-title {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--student-week-text);
}

.student-week-status {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #2a7d35;
    background: var(--student-week-green-soft);
    border: 1px solid #aacf8f;
}

.student-week-status .material-symbols-outlined {
    font-size: 0.82rem;
}

.student-week-status.archief {
    background: #6f7785;
}

.student-week-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
}

.student-week-icon-btn {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #d9e2ce;
    background: #f8fbf5;
    color: #5f6958;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.45rem;
}

.student-week-icon-btn .material-symbols-outlined {
    font-size: 0.92rem;
}

.student-week-card-description {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: #6f786c;
    line-height: 1.4;
}

.student-week-card-divider {
    margin-top: 0.9rem;
    border-top: 1px solid #edf1ea;
}

.student-week-period {
    margin: 0.65rem 0 0;
    font-size: 0.76rem;
    color: #7b8378;
}

.student-week-preview-screen {
    border: 1px solid #d9e3cf;
    border-radius: 0.72rem;
    background: #f7fbf2;
    min-height: 230px;
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.student-week-preview-avatar {
    width: 7rem;
    height: 7rem;
    font-size: 1.65rem;
}

.student-week-preview-content {
    min-width: 0;
}

.student-week-preview-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.student-week-preview-ribbon {
    font-size: 1.35rem;
    color: var(--student-week-green);
}

.student-week-preview-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--student-week-text);
    line-height: 1.1;
}

.student-week-preview-name {
    margin: 0.45rem 0 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--student-week-text);
}

.student-week-preview-description {
    margin: 0.55rem 0 0;
    max-width: 52ch;
    font-size: 0.84rem;
    color: #6f786c;
    line-height: 1.45;
}

.student-week-preview-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 0.35rem;
    margin-top: 0.6rem;
}

.student-week-preview-status-badge.actief {
    background-color: #d4edda;
    color: #155724;
}

.student-week-preview-status-badge.gepland {
    background-color: #fff3cd;
    color: #856404;
}

.student-week-preview-status-badge.afgelopen {
    background-color: #f8d7da;
    color: #721c24;
}

.student-week-preview-status-badge.leeg {
    background-color: #e2e3e5;
    color: #383d41;
}

.student-week-preview-status-badge .material-symbols-outlined {
    font-size: 0.85rem;
}

.student-week-preview-period {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #6f786c;
}

.student-week-preview-meta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-week-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    width: fit-content;
}

.student-week-preview-status.actief {
    background-color: #d4edda;
    color: #155724;
}

.student-week-preview-status.gepland {
    background-color: #fff3cd;
    color: #856404;
}

.student-week-preview-status.afgelopen {
    background-color: #f8d7da;
    color: #721c24;
}

.student-week-preview-status.leeg {
    background-color: #e2e3e5;
    color: #383d41;
}

.student-week-preview-status .material-symbols-outlined {
    font-size: 0.8rem;
}

/* Add Student Modal Styles */
.add-student-modal-content {
    border-radius: 0.72rem;
    border: 1px solid #dfe8d3;
    box-shadow: 0 18px 40px rgba(17, 31, 10, 0.18);
}

.add-student-modal-header {
    padding: 0.85rem 0.9rem 0.55rem;
    border-bottom: 0;
}

.add-student-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3429;
}

.add-student-form {
    display: contents;
}

.add-student-modal-body {
    padding: 0 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
}

.alert {
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    margin: 0 0 0.68rem;
    font-size: 0.79rem;
}

.alert-danger {
    background: #fef5f5;
    border: 1px solid #f0d0d0;
    color: #8b3a3a;
}

.alert-success {
    background: #f0f9f0;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}

.alert ul {
    margin: 0;
    padding-left: 1.2rem;
}

.alert li {
    margin: 0.2rem 0;
}

.student-week-alert {
    margin-bottom: 1.2rem;
    border-radius: 0.6rem;
    padding: 1rem;
    font-size: 0.85rem;
}

.student-week-alert p {
    font-size: 0.9rem;
}

.add-student-field {
    display: flex;
    flex-direction: column;
    gap: 0.26rem;
}

.add-student-label {
    font-size: 0.79rem;
    font-weight: 700;
    color: #404a3e;
}

.add-student-input {
    border: 1px solid #d9e2ce;
    background: #f8fbf5;
    font-size: 0.8rem;
    padding: 0.42rem 0.56rem;
    color: #2f372d;
}

.add-student-input::placeholder {
    color: #9aa497;
}

.add-student-input:focus {
    border-color: #61a729;
    box-shadow: 0 0 0 0.18rem rgba(97, 167, 41, 0.16);
    background: #fff;
}

.add-student-input.is-invalid {
    border-color: #d32f2f;
    box-shadow: 0 0 0 0.18rem rgba(211, 47, 47, 0.16);
}

.add-student-textarea {
    border: 1px solid #d9e2ce;
    background: #f8fbf5;
    font-size: 0.8rem;
    padding: 0.42rem 0.56rem;
    color: #2f372d;
    font-family: inherit;
    resize: vertical;
}

.add-student-textarea::placeholder {
    color: #9aa497;
}

.add-student-textarea:focus {
    border-color: #61a729;
    box-shadow: 0 0 0 0.18rem rgba(97, 167, 41, 0.16);
    background: #fff;
}

.add-student-textarea.is-invalid {
    border-color: #d32f2f;
    box-shadow: 0 0 0 0.18rem rgba(211, 47, 47, 0.16);
}

.add-student-date-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
}

.add-student-file-upload {
    position: relative;
}

.add-student-file-upload.has-error .add-student-upload-area {
    border-color: #d32f2f;
    background: #ffebee;
}

.add-student-file-input {
    display: none;
}

.add-student-upload-area {
    border: 2px dashed #d9e2ce;
    border-radius: 0.58rem;
    background: #f8fbf5;
    padding: 1.2rem 0.8rem;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.add-student-file-upload:hover .add-student-upload-area {
    border-color: #61a729;
    background: #f0f6ea;
}

.add-student-upload-icon {
    font-size: 2rem;
    color: #61a729;
    display: block;
    margin-bottom: 0.4rem;
}

.add-student-upload-text {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2f372d;
}

.add-student-upload-hint {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: #9aa497;
}

.add-student-modal-footer {
    padding: 0 0.9rem 0.9rem;
    border-top: 0;
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.add-student-cancel-btn {
    border: 1px solid #d9e2ce;
    background: #f8fbf5;
    color: #2f372d;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0.4rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.add-student-cancel-btn:hover,
.add-student-cancel-btn:focus {
    background: #f0f3ec;
    border-color: #c9d2bb;
}

.add-student-submit-btn {
    flex: 1;
    border: 1px solid #61a729;
    background: #61a729;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0.4rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-student-submit-btn:hover,
.add-student-submit-btn:focus {
    background: #529a21;
    border-color: #529a21;
    color: #fff;
}

@media (max-width: 991.98px) {
    .user-rights-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rights-stats {
        grid-template-columns: 1fr;
    }

    .student-week-list {
        grid-template-columns: 1fr;
    }

    .student-week-preview-screen {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .rights-table {
        min-width: 680px;
    }
}

@media (max-width: 767.98px) {
    .student-week-header {
        flex-direction: column;
    }

    .student-week-action-btn {
        width: 100%;
        justify-content: center;
    }

    .student-week-card {
        grid-template-columns: 1fr;
    }

    .student-week-card-top {
        flex-direction: column;
    }

    .student-week-preview-screen {
        padding: 0.9rem;
    }

    .student-week-preview-avatar {
        width: 5.5rem;
        height: 5.5rem;
        font-size: 1.45rem;
    }

    .student-week-preview-title {
        font-size: 1.28rem;
    }

    .student-week-preview-name {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .user-rights-page {
        gap: 0.7rem;
    }

    .user-rights-header,
    .rights-info,
    .rights-stat-card,
    .rights-table-wrap {
        border-radius: 0.62rem;
    }

    .rights-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .rights-table {
        min-width: 0;
        display: block;
    }

    .rights-table thead {
        display: none;
    }

    .rights-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .rights-table tr {
        display: block;
        background: #fff;
        border: 1px solid #e3e8dd;
        border-radius: 0.62rem;
        padding: 0.45rem 0.6rem;
    }

    .rights-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        border-bottom: 1px dashed #edf1ea;
        white-space: normal;
        padding: 0.5rem 0;
        text-align: right;
    }

    .rights-table td:last-child {
        border-bottom: 0;
        padding-bottom: 0.1rem;
    }

    .rights-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-weight: 700;
        color: #7b8578;
        text-align: left;
    }

    .rights-table-empty-row td {
        display: block;
        text-align: left;
        border-bottom: 0;
        padding: 0.1rem 0;
    }

    .rights-table-empty-row td::before {
        display: none;
    }

    .rights-user {
        justify-content: flex-end;
    }

    .rights-actions-cell {
        align-items: flex-start;
    }

    .rights-actions-cell .remove-admin-form {
        width: 100%;
    }

    .rights-actions-cell .activate-user-form {
        width: 100%;
    }

    .rights-actions-cell .remove-admin-btn {
        width: 100%;
        justify-content: center;
    }

    .rights-actions-cell .activate-user-btn {
        width: 100%;
        justify-content: center;
    }

    .add-admin-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .user-rights-title {
        font-size: 1.05rem;
    }

    .rights-table {
        min-width: 0;
    }

    .add-admin-btn {
        width: 100%;
        justify-content: center;
    }
}

.birthdays-page {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.1rem 0 0.4rem;
}

.birthdays-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #d8e2d0;
    border-radius: 0.92rem;
    background:
        radial-gradient(circle at top left, rgba(97, 167, 41, 0.08), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fbf4 100%);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

.birthdays-page-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: #1f2a1d;
    letter-spacing: -0.02em;
}

.birthdays-page-subtitle {
    margin: 0.25rem 0 0;
    color: #667062;
    font-size: 0.9rem;
}

.birthdays-page-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.birthdays-view-toggle .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.birthdays-view-toggle .btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 6px 14px rgba(97, 167, 41, 0.18);
}

.birthdays-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    background: var(--gradient-primary-secondary);
    border: 0;
    box-shadow: 0 10px 20px rgba(0, 117, 45, 0.16);
}

.birthdays-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #cfd8c7 18%, #d9e3cf 50%, #cfd8c7 82%, transparent);
}

.birthday-table-card {
    border: 1px solid #dbe4d3;
    border-radius: 0.92rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

.birthdays-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #30403c;
    background: #f8fafc;
    border-bottom: 1px solid #d9e3d0;
}

.birthdays-table td {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
    border-color: #e3e9de;
    color: #22302b;
}

.birthdays-person {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.birthdays-avatar {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(97, 167, 41, 0.28);
    background: #f4faee;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.birthdays-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.birthdays-avatar .material-symbols-outlined {
    font-size: 1rem;
}

.birthdays-person-name {
    font-weight: 600;
}

.birthdays-role-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #b9c6b0;
    background: #f8fbf4;
    color: #31412f;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.birthdays-role-badge.role-docent {
    border-color: #9fb0c3;
    color: #415168;
    background: #f3f7fb;
}

.birthdays-role-badge.role-medewerker {
    border-color: #cdb07a;
    color: #8a6420;
    background: #fdf8ef;
}

.birthdays-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.birthdays-icon-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid #c6d0c0;
    background: #fff;
    color: #364035;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.45rem;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.birthdays-icon-btn .material-symbols-outlined {
    font-size: 1rem;
}

.birthdays-icon-btn:hover {
    background: #f5f9f1;
    border-color: #a8c493;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.06);
}

.birthdays-icon-btn.danger {
    color: #9c4040;
}

.birthdays-calendar-card {
    border: 1px solid #dbe4d3;
    border-radius: 0.92rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

.birthdays-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: linear-gradient(135deg, #f8fbf4 0%, #f4f8ef 100%);
    border-bottom: 1px solid #dde7d7;
}

.birthdays-calendar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

@media (max-width: 991.98px) {
    .birthdays-page-header {
        flex-direction: column;
    }

    .birthdays-page-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .birthdays-table thead {
        display: none;
    }

    .birthdays-table,
    .birthdays-table tbody,
    .birthdays-table tr,
    .birthdays-table td {
        display: block;
        width: 100%;
    }

    .birthdays-table tr {
        border-bottom: 1px solid #d6dde7;
        padding: 0.55rem 0.75rem;
    }

    .birthdays-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        padding: 0.3rem 0;
        border: 0;
        text-align: right;
    }

    .birthdays-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        text-align: left;
    }

    .birthdays-table td[data-label="Naam"] {
        align-items: flex-start;
    }

    .birthdays-action-group,
    .birthdays-calendar-item {
        width: 100%;
    }

    .birthdays-calendar-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

#show.collapse-horizontal {
    height: 100% !important;
    overflow: hidden;
}

.btn {
    color: #000;
    background-color: #61a729 !important;
}
.btn:hover {
    background-color: #487c1e !important;
}