/* Felix CMS — portal (GuestDen) theme.
   Ported from the standalone Felix CMS. Colours are bound to the portal's MudBlazor palette
   variables, so every CMS screen automatically matches the GuestDen theme (and any brand override
   of --mud-palette-primary) instead of carrying the standalone CMS look. */

:root {
    --cms-primary: var(--mud-palette-primary, #594AE2);
    --cms-primary-soft: color-mix(in srgb, var(--cms-primary) 12%, transparent);
    --cms-line: var(--mud-palette-lines-default, #e0e0e0);
    --cms-surface: var(--mud-palette-surface, #fff);
    --cms-text-secondary: var(--mud-palette-text-secondary, #6b6b6b);
}

.cms-page {
    padding: 8px 4px 40px;
}

.cms-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cms-page-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -.02em;
}

.cms-page-sub {
    color: var(--cms-text-secondary);
    font-size: .92rem;
    margin-top: 4px;
    max-width: 720px;
}

.cms-card {
    background: var(--cms-surface);
    border: 1px solid var(--cms-line);
    border-radius: 16px;
}

.cms-card-hover {
    transition: box-shadow .18s ease, transform .18s ease;
}

.cms-card-hover:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

.cms-tile-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--cms-primary-soft);
    color: var(--cms-primary);
}

/* status pill (published / draft / hidden) */
.cms-status {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: capitalize;
    background: #eceff3;
    color: #55606e;
}

.cms-status.published {
    background: rgba(16, 185, 129, .14);
    color: #0a7d55;
}

.cms-status.draft {
    background: rgba(245, 158, 11, .16);
    color: #b0710a;
}

.cms-status.hidden {
    background: rgba(107, 114, 128, .16);
    color: #55606e;
}

/* soft primary chip */
.cms-chip-soft {
    background: var(--cms-primary-soft) !important;
    color: var(--cms-primary) !important;
    font-weight: 600;
}

/* list rows (Pages / Tags) */
.cms-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--cms-line);
}

.cms-setting-row:last-child {
    border-bottom: 0;
}

.cms-setting-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cms-setting-ico {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cms-primary-soft);
}

/* code preview block (tag snippet on the Tags list) */
.cms-code {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #cbd5e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow: auto;
}

/* monospace styling for the Head/Body script textareas in the page dialog */
.cms-code-input textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: .8rem !important;
    line-height: 1.5 !important;
}

/* CMS edit dialogs — keep tall content (rich editor, script boxes) scrollable and responsive
   so nothing is cut off and the Save/Cancel bar stays visible. */
.cms-dialog-body {
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

@media (max-width: 900px) {
    .cms-dialog-body {
        max-height: 68vh;
    }
}

/* Blog rich-text editor (Blazorise RichTextEdit / Quill) — give it a comfortable writing height */
.cms-rte .ql-container {
    min-height: 300px;
    font-size: .95rem;
}

.cms-rte .ql-editor {
    min-height: 300px;
}

.cms-rte .ql-toolbar,
.cms-rte .ql-container {
    border-color: var(--cms-line) !important;
}

.cms-rte .ql-toolbar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.cms-rte .ql-container {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Property-photo carousel + thumbnail strip (gallery dialog) */
.cms-carousel {
    border: 1px solid var(--cms-line);
}

.cms-thumb-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.cms-thumb {
    width: 64px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: .55;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

.cms-thumb:hover {
    opacity: 1;
}

.cms-thumb.active {
    opacity: 1;
    border-color: var(--cms-primary);
}