/* ====[ reCAPTCHA Badge Positioning ]======================================================== */
/* Reposition the reCAPTCHA badge to not overlap footer */
.grecaptcha-badge {
    bottom: 80px !important; /* Move it above the footer */
    z-index: 1000 !important;
}

@media (max-width: 767px) {
    /* Adjust badge position on mobile */
    .grecaptcha-badge {
        bottom: 100px !important;
    }
}

/* ====[ Themes ]=============================================================================== */
/* All Themes */
:root {
    --gf-fallback-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --rz-text-font-family: "Nunito", var(--gf-fallback-font-family);
    /* Primary Color Channel: #0387CD */
    --gf-primary-r: 3;
    --gf-primary-g: 135;
    --gf-primary-b: 205;
    /* Primary color scale */
    --rz-primary: rgb(var(--gf-primary-r), var(--gf-primary-g), var(--gf-primary-b));
    --rz-primary-light: #2B9ADF; /* ~10% lighter */
    --rz-primary-lighter: #67BFF2; /* ~30% lighter */
    --rz-primary-dark: #0270A3; /* ~15% darker */
    --rz-primary-darker: #015177; /* ~35% darker */
    /* Secondary (complementary) purple color scale */
    --rz-secondary: #7B3CCD; /* medium purple complementary to primary */
    --rz-secondary-light: #935FE0;
    --rz-secondary-lighter: #C8B0F5;
    --rz-secondary-dark: #5A2EA0;
    --rz-secondary-darker: #3F2072;
    /* Info (complementary) green color scale */
    --rz-info: #2EA84F; /* medium green */
    --rz-info-light: #65D377;
    --rz-info-lighter: #A7F1B3;
    --rz-info-dark: #24893F;
    --rz-info-darker: #185F2A;
    /* Responsive Font Sizing for Radzen Components */
    --rz-body-font-size: clamp(14px, 2vw, 18px);
    --rz-font-size-h1: clamp(24px, 5vw, 48px);
    --rz-font-size-h2: clamp(20px, 4vw, 36px);
    --rz-font-size-h3: clamp(18px, 3vw, 28px);
    --rz-font-size-h4: clamp(16px, 2.5vw, 24px);
    --rz-font-size-h5: clamp(14px, 2vw, 20px);
    --rz-font-size-h6: clamp(13px, 1.8vw, 18px);
    --rz-font-size-small: clamp(12px, 1.5vw, 14px);
    --rz-font-size-xs: clamp(10px, 1.2vw, 12px);
    /* Top Menu */
    --rz-header-background-color: var(--rz-primary);
    --rz-menu-top-item-background-color: var(--rz-primary);
    --rz-menu-top-item-hover-background-color: var(--rz-primary);
    --rz-menu-top-item-color: var(--rz-on-primary);
    --rz-menu-top-item-selected-color: var(--rz-on-primary);
    --rz-menu-top-item-hover-color: var(--rz-base-800);
    --rz-menu-top-item-icon-hover-color: var(--rz-base-800);
    /* Popup Menu */
    --rz-menu-background-color: rgba(var(--gf-primary-r), var(--gf-primary-g), var(--gf-primary-b), 0.7);
    --gf-menu-backdrop-filter: blur(8px);
    /* Grid Tables */
    --rz-grid-header-font-size: 18px;
    --rz-grid-header-font-weight: 900;
    --rz-grid-header-background-color: var(--rz-info-light);
    --rz-grid-header-color: var(--rz-on-secondary);
}

    /* Dark theme overrides */
    :root[data-theme="dark"] {
        --rz-selectbar-selected-color: var(--rz-base-200);
        --rz-dropdown-item-selected-hover-color: var(--rz-base-200);
        --rz-dropdown-item-selected-color: var(--rz-base-200);
        --rz-grid-selected-background-color: var(--rz-primary-dark);
        --rz-grid-header-background-color: var(--rz-info-dark);
    }


/* ====[ Base Styles ]========================================================================== */
/* Inline icon styling for SVG icons used inline with text */
.inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* Fine-tune vertical alignment with text */
    margin-right: 0.25rem;
    
    svg {
        width: 100%;
        height: 100%;
        display: block;
    }
}

html {
    height: 100%;
}

body {
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-body-font-size);
    line-height: clamp(1.4, 2.5vw, 1.6);
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: var(--rz-base-background-color);
    color: var(--rz-text-color);
    transition: background-color 0.3s, color 0.3s;
    /* Prevent cursor from appearing on body-level clicks */
    cursor: default;
}

/* Prevent text cursor on non-editable elements */
h1, h2, h3, h4, h5, h6, p, span, section, article, header, footer, nav, aside, main, .rz-card, .rz-panel, .rz-stack {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}



/* Allow text selection ONLY for specific content areas that should be copyable */
/* Code blocks and technical content */
pre, code,
.json-output-box, .json-output-box *,
.markdown-preview-box pre, .markdown-preview-box code,
    /* Documentation and blog content */
    .markdown-preview-box p, .markdown-preview-box li, .markdown-preview-box td, .markdown-preview-box th, .markdown-preview-box blockquote {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Ensure form controls maintain proper cursor and selection behavior */
input, textarea, select,
.rz-textbox, .rz-textarea, .rz-dropdown, .rz-listbox, .rz-numeric, .rz-datepicker {
    cursor: auto;
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
}

/* Buttons and clickable elements should show pointer cursor */
button, button *, a, a *, .rz-button, .rz-button *, .rz-menu-item, .character-item, .copied-item, .color-swatch,
.rz-tabview-nav li, .rz-tabview-nav li *, .rz-tabview-nav a, .rz-navigation-item, .rz-selectbar-item,
[role="button"], [role="button"] *, [onclick] {
    cursor: pointer !important;
}

/* Links specifically */
a {
    color: var(--rz-info);
    text-decoration: underline;
    cursor: pointer;
}

h1, h2 {
    font-family: "Orbitron", var(--gf-fallback-font-family);
}

h3, h4, h5, h6 {
    font-family: "Michroma", var(--gf-header-font-family);
}

/* Vertically center content inside all h1 headings */
h1 {
    font-size: var(--rz-font-size-h1);
    margin-top: 0;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    /* Icon sizing for h1 - matches heading size */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h1) !important; /* Match h1 font size */
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        color: var(--rz-primary) !important;
        margin: 0 !important;
        vertical-align: middle;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

h2 {
    font-size: var(--rz-font-size-h2);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;

    /* Icon sizing for h2 - matches heading size */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h2) !important; /* Match h2 font size */
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        color: var(--rz-primary) !important;
        margin: 0 !important;
        vertical-align: middle;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Legacy SVG/IMG support - can be removed if not needed */
    svg, img {
        color: var(--rz-primary);
        display: inline-flex;
        max-width: 32px;
        max-height: 32px;
        width: 32px;
        height: 32px;
        transform: translateY(-4px);
        flex-shrink: 0;
    }
}

h3 {
    font-size: var(--rz-font-size-h3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;

    /* Icon sizing for h3 */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h3) !important; /* Match h3 font size */
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        color: var(--rz-primary) !important;
        margin: 0 !important;
        vertical-align: middle;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

h4 {
    font-size: var(--rz-font-size-h4);

    /* Icon sizing for h4 */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h4) !important;
        width: 1em !important;
        height: 1em !important;
        color: var(--rz-primary) !important;
        vertical-align: middle;
    }
}

h5 {
    font-size: var(--rz-font-size-h5);

    /* Icon sizing for h5 */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h5) !important;
        width: 1em !important;
        height: 1em !important;
        color: var(--rz-primary) !important;
        vertical-align: middle;
    }
}

h6 {
    font-size: var(--rz-font-size-h6);

    /* Icon sizing for h6 */
    .rz-icon, i.rz-icon, i {
        font-size: var(--rz-font-size-h6) !important;
        width: 1em !important;
        height: 1em !important;
        color: var(--rz-primary) !important;
        vertical-align: middle;
    }
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

/* ====[ Top Navigation ]======================================================================= */
/* Main menu styling - preserve horizontal layout on desktop, allow responsive behavior on mobile */
.main-menu {
    display: flex;
    align-items: center;
    width: auto;

    /* Allow Radzen's default responsive behavior to work on mobile */
    @media (max-width: 768px) {
        display: block;
        width: auto;
        vertical-align: top;
    }
}

/* Minimal rules to center the icon inside the toggle button */
.menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem !important; /* small, adjustable padding */
    color: var(--rz-on-primary) !important;

    .rz-button-icon, i.material-icons, i {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 1.25rem !important; /* adjust if needed */
    }
}

.rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item {
    @media (max-width: 768px) {
        display: inline;
    }
}

.menu-header {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.rz-menu-toggle-item {
    vertical-align: middle !important;
}

/* Apply backdrop blur to Radzen menu popups */
.rz-menu .rz-navigation-menu {
    backdrop-filter: var(--gf-menu-backdrop-filter);
    -webkit-backdrop-filter: var(--gf-menu-backdrop-filter);
}

/* ====[ Profile Menu ]========================================================================= */
.profile-menu-container {
    position: relative;
    display: inline-block;
}

.profile-menu-button {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: auto !important;
}

.profile-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.profile-photo-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rz-on-primary);
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
        transform: scale(1.05);
    }
}

.profile-photo-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--rz-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.15rem);
    right: 0;
    min-width: 320px;
    background-color: var(--rz-menu-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    /* Add backdrop blur for better readability with transparency */
    backdrop-filter: var(--gf-menu-backdrop-filter);
    -webkit-backdrop-filter: var(--gf-menu-backdrop-filter);

    [data-theme="dark"] & {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

.profile-menu-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.profile-photo-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rz-primary);
}

.profile-photo-placeholder-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--rz-base-200);
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;

    [data-theme="dark"] & {
        background-color: var(--rz-base-600);
    }
}

.profile-info {
    font-size: var(--rz-font-size-h5)
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    width: 100%;

    strong {
        font-size: 1rem;
        color: var(--rz-text-color);
        word-break: break-word;
        max-width: 100%;
    }
}

.profile-email {
    font-size: var(--rz-font-size-h6);
    color: var(--rz-secondary-darker);
    word-break: break-word;
    max-width: 100%;
}

.profile-tenant {
    font-size: var(--rz-font-size-small);
    color: var(--rz-info-light);
    word-break: break-word;
    max-width: 100%;
}

.profile-menu-items {
    padding: 0.5rem 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
    white-space: nowrap;
    color: var(--rz-menu-item-color) !important;

    &:hover {
        background-color: var(--rz-base-200);
        color: inherit;

        [data-theme="dark"] & {
            background-color: var(--rz-dropdown-item-selected-hover-color);
        }
    }

    span {
        user-select: none;
    }
}

.profile-menu-separator {
    height: 1px;
    background-color: var(--rz-border-color);
    margin: 0.5rem 0;
}

/* ====[ Radzen Enhancements ]================================================================== */
/* Adjustments for nested card usage */
.card-level2 {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;

    [data-theme="light"] & {
        background-color: var(--rz-base-200);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-700);
    }
}

.rz-footer {
    padding-top: 0;
    padding-bottom: 0;

    [data-theme="light"] & {
        background-color: var(--rz-base-300);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-600);
    }
}

.rz-tabview-nav li:not(.rz-tabview-selected):not(.rz-state-focused) {
    [data-theme="light"] & {
        background-color: var(--rz-base-300);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-700);
    }
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    [data-theme="light"] & {
        background-color: var(--rz-base-400);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-600);
    }
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels {
    [data-theme="light"] & {
        border: var(--rz-border-base-300);
    }

    [data-theme="dark"] & {
        border: var(--rz-border-base-600);
    }
}

.rz-navigation-item-text {
    cursor: pointer;
}

.rz-text-caption {
    font-size: var(--rz-font-size-small);
    color: var(--rz-secondary-dark);
}

/* ====[ GitHub ]=============================================================================== */
.repo-description {
    color: var(--rz-secondary-light);
    font-size: var(--rz-font-size-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2rem;
}

.repo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;

    /* Responsive tweak: on very small screens stack badges under title */
    @media (max-width:520px) {
        flex-direction: column;
        align-items: stretch;
    }
}

.repo-title {
    flex: 1 1 auto;
    min-width: 0; /* allow truncation */

    h4 {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.repo-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    flex-wrap: wrap; /* allow wrapping */
    max-width: 40%; /* limit badges area so title keeps space */

    .rz-badge {
        white-space: nowrap;
    }

    @media (max-width:520px) {
        justify-content: flex-start;
        max-width: 100%;
        margin-left: 0;
    }
}

/* ====[ Posts ]================================================================================ */
.post-author {
    color: var(--rz-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-date {
    font-size: var(--rz-font-size-small);
    color: var(--rz-secondary-dark);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.post-content {
    color: var(--rz-secondary);
    min-height: 1.2rem;
}

.post-content-text {
    color: var(--rz-secondary-light);
    font-size: var(--rz-font-size-h6);
}

.post-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.post-image-area {
    float: right;
    margin-left: 1rem;
    max-width: 40%;
}

.masonry {
    column-gap: 1rem; /* horizontal gap between columns */
    /* responsive column counts */
    column-count: 1;

    /* at medium sizes show 2 columns */
    @media (min-width:720px) {
        column-count: 2;
    }

    /* at larger sizes show 3 columns */
    @media (min-width:1024px) {
        column-count: 3;
    }
}

/* Each item should avoid breaking across columns */
.masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    display: inline-block; /* make items shrink to content width inside column */
    width: 100%;
    margin-bottom: 1rem; /* vertical gap between items */

    /* Ensure RadzenCard inside masonry-item stretches width */
    .card-level2 {
        display: block;
    }

    /* Add bottom margin to each Masonry item except the last one in the column */
    &:not(:last-child) {
        margin-bottom: 1rem;
    }
}

/* ====[ RSS Feed ]============================================================================= */
.rss-item-source {
    font-weight: 600;
    color: var(--rz-primary);
}

.rss-item-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.rss-item-author {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--rz-text-secondary-color);
}

/* RSS content HTML styling */
.rss-content-html {
    display: block;

    /* Constrain images in RSS content */
    img {
        max-width: 40%;
        height: auto;
        float: right;
        margin-left: 1rem;
        margin-bottom: 0.5rem;
        border-radius: 4px;
        display: block;
    }

    /* Style lists in RSS content */
    ul, ol {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
    }

    li {
        margin-bottom: 0.25rem;
    }

    /* Style paragraphs in RSS content */
    p {
        margin: 0.5rem 0;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    /* Clear floats */
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* ====[ Blazor Engine ]======================================================================== */
#blazor-error-ui {
    background: #ffebe9;
    color: #d32f2f;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    .dismiss {
        cursor: pointer;
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .reload {
        color: #d32f2f;
        text-decoration: underline;
    }

    &.show {
        display: flex; /* Ensure it uses flexbox when visible */
    }
}

.rgba-inputs, .rgb-inputs, .cmyk-inputs {
    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ====[ Character Tool ]====================================================================== */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;

    @media (max-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    @media (max-width: 480px) {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

.character-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px solid var(--rz-border-base);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--rz-base-background-color);
    min-height: 120px;

    &:hover {
        border-color: var(--rz-primary);
        background-color: var(--rz-primary);
        color: var(--rz-primary-light-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    @media (max-width: 480px) {
        min-height: 80px;
        padding: 0.75rem;
    }
}

.character-display {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.5rem;

    @media (max-width: 768px) {
        font-size: 2rem;
    }

    @media (max-width: 480px) {
        font-size: 1.5rem;
    }
}

.character-info {
    text-align: center;
    width: 100%;
    min-width: 0;
}

.character-name {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.character-code {
    font-size: 0.65rem;
    opacity: 0.7;
    font-family: monospace;
}

.recently-copied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.copied-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--rz-border-base);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--rz-base-background-color);
    min-width: 50px;
    min-height: 50px;

    &:hover {
        border-color: var(--rz-primary);
        background-color: var(--rz-primary);
        color: var(--rz-primary-light-hover);
        transform: scale(1.1);
    }
}

.copied-character {
    font-size: 1.5rem;
}

/* ====[ JSON Tool ]============================================================================ */
.json-tool-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    /* Responsive - stack vertically on smaller screens */
    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.json-tool-section {
    min-width: 0; /* Prevent overflow */
}

.json-output-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 2px dashed var(--rz-border-color);
    border-radius: 4px;
    padding: 2rem;
}

.json-output-box {
    background-color: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;

    pre {
        margin: 0;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.875rem;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    [data-theme="light"] & {
        background-color: var(--rz-base-100);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-800);
    }
}

.jwt-output {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.jwt-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Fullscreen mode */
.json-tool-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: var(--rz-base_BACKGROUND_COLOR);
    padding: 2rem;
    overflow: auto;

    .json-output-box {
        max-height: none;
        height: calc(100vh - 200px);
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-900);
    }
}

/* ====[ Markdown HTML Tool ]=================================================================== */
.markdown-html-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    /* Responsive - stack vertically on smaller screens */
    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.markdown-html-section {
    min-width: 0; /* Prevent overflow */
}

/* Fullscreen mode for text areas */
.markdown-html-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background-color: var(--rz-base-background-color) !important;
    padding: 2rem !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;

    .rz-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .rz-stack {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .rz-textarea, textarea {
        flex: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }
}

/* Fullscreen preview content */
.preview-fullscreen-content {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
}

.stats-badge {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.markdown-preview-box {
    background-color: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    padding: 1.5rem;
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
    line-height: 1.6;

    /* Markdown preview styling */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
        line-height: 1.25;
    }

    h1 {
        font-size: 2rem;
        border-bottom: 2px solid var(--rz-border-color);
        padding-bottom: 0.5rem;
    }

    h2 {
        font-size: 1.75rem;
        border-bottom: 1px solid var(--rz-border-color);
        padding-bottom: 0.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
        opacity: 0.8;
    }

    p {
        margin-bottom: 1rem;
    }

    ul, ol {
        margin-bottom: 1rem;
        padding-left: 2rem;
    }

    li {
        margin-bottom: 0.5rem;
    }

    code {
        background-color: var(--rz-base-200);
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.875rem;
    }

    pre {
        background-color: var(--rz-base-200);
        padding: 1rem;
        border-radius: 4px;
        overflow-x: auto;
        margin-bottom: 1rem;

        code {
            background-color: transparent;
            padding: 0;
        }
    }

    blockquote {
        border-left: 4px solid var(--rz-primary);
        padding-left: 1rem;
        margin-left: 0;
        margin-bottom: 1rem;
        font-style: italic;
        opacity: 0.9;
    }

    a {
        color: var(--rz-primary);
        text-decoration: underline;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1rem 0;
        border-radius: 4px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;

        th, td {
            padding: 0.75rem;
            border: 1px solid var(--rz-border-color);
            text-align: left;
        }

        th {
            background-color: var(--rz-base-200);
            font-weight: 600;
        }
    }

    hr {
        border: none;
        border-top: 2px solid var(--rz-border-color);
        margin: 2rem 0;
    }

    /* Theme-specific styles */
    [data-theme="light"] & {
        background-color: var(--rz-base-100);

        code, pre {
            background-color: var(--rz-base-200);
        }
    }

    [data-theme="dark"] & {
        background-color: var(--rz-base-800);

        code, pre {
            background-color: var(--rz-base-700);
        }
    }
}

/* ====[ Contact Form ]========================================================================= */
.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

    .full-width {
        grid-column: 1 / -1;
    }

    /* Tablet and smaller - single column */
    @media (max-width: 767px) {
        grid-template-columns: 1fr;

        .full-width {
            grid-column: 1;
        }
    }

    /* Medium tablets - 2 columns */
    @media (min-width: 768px) and (max-width: 991px) {
        grid-template-columns: repeat(2, 1fr);

        /* Company field spans both columns on tablets */
        > div:nth-child(3) {
            grid-column: 1 / -1;
        }

        /* Ensure full-width fields span both columns */
        .full-width {
            grid-column: 1 / -1;
        }
    }
}

/* ====[ Footer ]=============================================================================== */
/* Footer button styling for dark mode */
.footer-button {
    [data-theme="dark"] &:hover,
    [data-theme="dark"] &:hover * {
        color: white !important;
    }
}

/* Responsive footer text and buttons for mobile */
@media (max-width: 768px) {
    .rz-footer {
        .rz-text {
            font-size: var(--rz-font-size-small) !important;
        }

        .footer-button {
            font-size: var(--rz-font-size-small) !important;
            padding: 0.25rem 0.5rem !important;

            .rz-button-icon {
                font-size: var(--rz-font-size-small) !important;
            }
        }
    }
}

/* ====[ Admin RSS Feed Detail Blade ]========================================================== */
/* Detail blade panel styling with theme support */
#rss-blade-container {
    background-color: var(--rz-base-200);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    
    [data-theme="dark"] & {
        background-color: var(--rz-base-700);
        border-color: var(--rz-border-color);
    }
    
    /* Content area styling (this was cuasing Categories to be spaced oddly - very far apart from each other) */
    /*
    .rz-stack {
        gap: 1.5rem;
    }
    */
    
    /* Section labels */
    .rz-text-overline {
        color: var(--rz-secondary-dark);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
        
        [data-theme="dark"] & {
            color: var(--rz-secondary-light);
        }
    }
    
    /* HTML content display area */
    > .rz-stack > .rz-stack:last-child > div {
        background-color: var(--rz-base-background-color);
        border: 1px solid var(--rz-border-color);
        border-radius: 4px;
        padding: 1.5rem;
        overflow-x: auto;
        line-height: 1.6;
        
        [data-theme="dark"] & {
            background-color: var(--rz-base-800);
        }
        
        /* HTML content styling - similar to markdown-preview-box */
        h1, h2, h3, h4, h5, h6 {
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
            line-height: 1.25;
            color: var(--rz-text-color);
            
            &:first-child {
                margin-top: 0;
            }
        }
        
        h1 {
            font-size: 2rem;
            border-bottom: 2px solid var(--rz-border-color);
            padding-bottom: 0.5rem;
        }
        
        h2 {
            font-size: 1.75rem;
            border-bottom: 1px solid var(--rz-border-color);
            padding-bottom: 0.5rem;
        }
        
        h3 {
            font-size: 1.5rem;
        }
        
        h4 {
            font-size: 1.25rem;
        }
        
        h5 {
            font-size: 1.1rem;
        }
        
        h6 {
            font-size: 1rem;
            opacity: 0.8;
        }
        
        p {
            margin-bottom: 1rem;
            color: var(--rz-text-color);
            
            &:last-child {
                margin-bottom: 0;
            }
        }
        
        a {
            color: var(--rz-primary);
            text-decoration: underline;
            
            &:hover {
                color: var(--rz-primary-light);
            }
            
            [data-theme="dark"] & {
                color: var(--rz-primary-lighter);
                
                &:hover {
                    color: var(--rz-primary-light);
                }
            }
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1rem 0;
            border-radius: 4px;
            border: 1px solid var(--rz-border-color);
        }
        
        ul, ol {
            margin: 1rem 0;
            padding-left: 2rem;
            color: var(--rz-text-color);
        }
        
        li {
            margin-bottom: 0.5rem;
        }
        
        blockquote {
            border-left: 4px solid var(--rz-primary);
            padding-left: 1rem;
            margin: 1rem 0;
            font-style: italic;
            opacity: 0.9;
            color: var(--rz-text-color);
            
            [data-theme="dark"] & {
                opacity: 0.8;
            }
        }
        
        code {
            background-color: var(--rz-base-200);
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.875rem;
            color: var(--rz-text-color);
            
            [data-theme="dark"] & {
                background-color: var(--rz-base-600);
            }
        }
        
        pre {
            background-color: var(--rz-base-200);
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            margin: 1rem 0;
            
            [data-theme="dark"] & {
                background-color: var(--rz-base-600);
            }
            
            code {
                background-color: transparent;
                padding: 0;
            }
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            
            th, td {
                padding: 0.75rem;
                border: 1px solid var(--rz-border-color);
                text-align: left;
            }
            
            th {
                background-color: var(--rz-base-200);
                font-weight: 600;
                
                [data-theme="dark"] & {
                    background-color: var(--rz-base-600);
                }
            }
            
            tr:nth-child(even) {
                background-color: var(--rz-base-100);
                
                [data-theme="dark"] & {
                    background-color: var(--rz-base-750);
                }
            }
        }
        
        hr {
            border: none;
            border-top: 2px solid var(--rz-border-color);
            margin: 2rem 0;
        }
        
        /* Handle embedded videos/iframes */
        iframe {
            max-width: 100%;
            border: 1px solid var(--rz-border-color);
            border-radius: 4px;
            margin: 1rem 0;
        }
        
        /* Strong and emphasis */
        strong {
            font-weight: 700;
            color: var(--rz-text-color);
        }
        
        em {
            font-style: italic;
            color: var(--rz-text-color);
        }
    }
}

/* Resizer handle styling */
#rss-resizer {
    transition: background-color 0.2s, opacity 0.2s;
    
    > div {
        transition: background-color 0.2s, box-shadow 0.2s;
    }
    
    &:hover {
        background-color: var(--rz-primary) !important;
        opacity: 0.7 !important;
        
        > div {
            background-color: var(--rz-on-primary);
            box-shadow: 0 0 8px rgba(3, 135, 205, 0.5);
        }
    }
}

/* Grid container adjustments for better theme support */
#rss-grid-container {
    [data-theme="dark"] & {
        .rz-datatable {
            border-color: var(--rz-border-color);
        }
    }
}

/* ====[ Utilities ]==================================================================== */
/* Sensible wrapping without mid-character breaks */
.wrap-anywhere {
    overflow-wrap: anywhere; /* allows breaks at any character boundary when necessary */
    word-break: normal;      /* avoid aggressive breaking */
    white-space: normal;     /* allow wrapping */
}

/* Single-line truncation with ellipsis for fixed-width cells */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aggressive breaking if absolutely necessary (use sparingly) */
.break-all {
    word-break: break-all;
}

/* Multiline ellipsis: limits to a few lines and then truncates (webkit-based) */
.multiline-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small utility for showing pointer to indicate copy/tooltip availability */
.copyable {
    cursor: pointer;
}

/* Claim sub-value (resolved group display name) */
.claim-subvalue {
    color: var(--rz-info-light);
    margin-top: 0.25rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* End Utilities */