body {
    background-color: #e8eef2;
    background-image: url('/images/img_bg_classcloud.png');
    background-repeat: repeat;
    background-attachment: fixed;
    min-height: 100vh;
    background-size: 50%;
}

/* Site-breed patroon; Mud-panels/grids houden eigen achtergrond voor leesbaarheid */
.cc-site-shell,
.cc-site-shell .mud-main-content {
    background: transparent !important;
}

.cls_table td {
    border: solid 1px #000000;
}

/* TinyMCE (CCField ft14): dropdowns en dialogen boven MudBlazor / stacking contexts */
.tox-tinymce-aux,
.tox-dialog-wrap,
.tox-dialog,
.tox-silver-sink {
    z-index: 300000 !important;
}

/* Mediaselector vanuit TinyMCE image-dialog: MudBlazor tijdelijk boven TinyMCE */
body.cc-ft14-mud-dialog-open .mud-overlay.mud-overlay-dialog {
    z-index: 300050 !important;
}

body.cc-ft14-mud-dialog-open .mud-dialog-container,
body.cc-ft14-mud-dialog-open .mud-dialog {
    z-index: 300052 !important;
}

/* Editor-host: niet door parent overflow afsnijden (toolbar-menus) */
.ccfield-ft14-host {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.ccframes-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ccframes-appbar {
    flex: 0 0 auto;
}

.ccframes-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: scroll;
    display: flex;
}

.ccframes-content > * {
    flex: 1 1 auto;
    min-height: 0;
}

.ccframes-footer {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-top: 1px solid rgba(0,0,0,.12);
}

.ccgrid-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.ccgrid-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ccgrid-grid {
    margin-top: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ccgrid-grid smart-grid {
    width: 100% !important;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
}

/* Compact search bar so it doesn't steal vertical space */
.ccgrid-search .mud-input-control,
.ccgrid-search .mud-input-control-input-container,
.ccgrid-search .mud-input-root {
    margin-top: 0;
    margin-bottom: 0;
}

/* Keep adornment icon fully visible in compact mode */
.ccgrid-search .mud-input-root {
    min-height: 36px;
    align-items: center;
}

.ccgrid-search .mud-input-adornment {
    align-self: center;
    line-height: 1;
}

/* Compacte MudSimpleTable */
.cc-simple-table-tight table tr > th,
.cc-simple-table-tight table tr > td {
    padding: 2px 4px !important;
    line-height: 1.1;
}

.cc-simple-table-tight .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.ccfield-ft14-size {
    font-size: 0.75rem;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
}

.ccfield-ft14-size--ok {
    color: #666;
    background: #f5f5f5;
}

.ccfield-ft14-size--warn {
    color: #5d4037;
    background: #fff3e0;
}

.ccfield-ft14-size--block {
    color: #b71c1c;
    background: #ffebee;
    font-weight: 600;
}

/* Image via Mediano */
/* TinyMCE image dialog: extra ruimte voor mediaknop */
.ccfield-ft14-media-info {
    font-size: 13px;
    color: #555;
    margin: 4px 0;
}
body.cc-ft14-mud-dialog-open .mud-overlay.mud-overlay-dialog,
body.cc-ft14-mud-dialog-open .mud-dialog-container {
    z-index: 300050 !important;
}

.cc-dialog-tabs .mud-tabs-panels {
    min-height: 450px;
    overflow-y: auto;
}

.ccfield-ft24-host {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.mud-input-filled {
    background-color: #e1f0f5 !important;
}

.ccgrid-file-actions-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.ccgrid-file-action-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ccgrid-file-action-label {
    font-size: 0.75rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccgrid-file-open,
.ccgrid-file-extract {
    font-size: 0.75rem;
    padding: 2px 8px;
    cursor: pointer;
}

.ccgrid-file-action-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ccgrid-file-action-label {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccgrid-file-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    /*font-size: 1rem;*/
    line-height: 1.2;
}

    .ccgrid-file-action-btn:hover {
        background: #e8e8e8;
    }

    .ccgrid-file-action-btn:hover {
        background: #e8e8e8;
    }

.ccgrid-file-action-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.ccgrid-file-action-text {
    white-space: nowrap;
    color: #000;
}

.la-click-card {
    cursor: pointer;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

    .la-click-card:hover {
        background-color: var(--mud-palette-action-default-hover);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .la-click-card:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }



/* CCField zonder intern label: padding weg + mask weg */
/*.ccfield-input-nolabel .mud-input-filled input.mud-input-slot,
.ccfield-input-nolabel .mud-input-filled textarea.mud-input-slot,
.ccfield-input-nolabel .mud-input-text input.mud-input-slot,
.ccfield-input-nolabel .mud-input-text textarea.mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}*/
/* CCField zonder intern label: padding weg + mask weg */
.ccfield-input-nolabel .mud-input-filled input.mud-input-slot,
.ccfield-input-nolabel .mud-input-filled textarea.mud-input-slot,
.ccfield-input-nolabel .mud-input-filled div.mud-input-slot,
.ccfield-input-nolabel .mud-input-text input.mud-input-slot,
.ccfield-input-nolabel .mud-input-text textarea.mud-input-slot,
.ccfield-input-nolabel .mud-input-text div.mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* evt vervangen

*/
.ccgrid-file-cell {
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.ccgrid-file-cell-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ccgrid-file-preview-wrap {
    display: inline-flex;
    align-items: center;
}

.ccgrid-file-preview,
.ccgrid-file-action-icon.ccgrid-file-preview {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background-color: #fafafa;
}

/* zebrapatroon in codemirror */
/*.cm-editor .cm-line:nth-child(odd) {
    background-color: #fafafa;
}

.cm-editor .cm-line:nth-child(even) {
    background-color: #f3f6f8;
}*/

.cm-editor .cm-line:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.cm-editor .cm-line:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* CCMenu hamburger-drawer boven pagina-inhoud */
/*.ccframes-appbar {
    overflow: visible;
    z-index: 1300;
}

.ccframes-content {
    position: relative;
    z-index: 1;
}

.cc-menu-host {
    position: relative;
    z-index: 300011;
    overflow: visible;
}*/

a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* Classic lightbox look (dark scrim + max image + caption) */
.mud-overlay.mud-overlay-dialog.cc-lightbox-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.cc-lightbox-dialog.mud-dialog,
.cc-lightbox-dialog .mud-dialog {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 96vw !important;
    max-height: 96vh !important;
}

.cc-lightbox-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: visible !important;
}

.cc-lightbox-stage {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-lightbox-frame {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 96vw;
    max-height: 96vh;
}

.cc-lightbox-figure {
    margin: 0;
    text-align: center;
    max-width: calc(96vw - 3rem - 10px);
    max-height: 96vh;
}

.cc-lightbox-img {
    display: block;
    max-width: calc(96vw - 3rem - 10px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.cc-lightbox-caption {
    margin-top: 0.75rem;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cc-lightbox-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

/* In-app FlipBook dialog (core) */
.mud-overlay.mud-overlay-dialog.cc-flipbook-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.cc-flipbook-dialog.mud-dialog,
.cc-flipbook-dialog .mud-dialog {
    width: min(96vw, 1400px) !important;
    max-width: 96vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
}

.cc-flipbook-dialog .mud-dialog-content {
    padding: 0 !important;
    height: calc(92vh - 8rem);
    overflow: hidden !important;
}

.cc-flipbook-stage {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    background: #111;
}

.cc-flipbook-frame {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    display: block;
    background: #111;
}