/* 
 * Premium Redesign for Easy Post Submission - SCOPED EDITION
 */

:root {
    --rbsm-primary: var(--primary-color, #3f51b5);
    --rbsm-btn-text: #fff;
    --rbsm-radius-flat: 0px !important;
    --rbsm-shadow: none !important;
    --rbsm-glass-bg: transparent !important;
    --rbsm-glass-border: #e0e0e0;
    --rbsm-field-height: 56px;
}

/* 0. RESET ROW BORDERS */
.rbsm-container .row,
.rbsm-container .col,
.rbsm-container div[class*="row"],
.rbsm-container div[class*="col"] {
    border: none !important;
    box-shadow: none !important;
}

/* 1. CONTAINER RESET */
.rbsm-container {
    width: 100%;
    max-width: 100%;
    position: relative !important;
    display: block !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 20px !important;
}

/* Scope strict reset to container children */
.rbsm-container * {
    border-radius: 0 !important;
    box-sizing: border-box !important;
    /* Force reset any inherited red borders */
    outline-color: transparent !important;
}

/* 2. FORM LAYOUT & VISIBILITY */
.rbsm-container form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 5px !important;
    /* Precise control over the gap between all 5 rows */
    width: 100% !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Hide helper elements inside container only */
.rbsm-container p.rbsm-input-hind,
.rbsm-container .rbsm-form-helper,
.rbsm-container .v-messages,
.rbsm-container .v-counter,
.rbsm-container .v-input__details,
.rbsm-container .v-field__details,
.rbsm-container legend {
    display: none !important;
}

/* 3. INPUTS & FIELD STYLING */
.rbsm-container .rbsm-form-group input,
.rbsm-container .rbsm-input,
.rbsm-container #richEditorContainer {
    background: transparent !important;
    border: 2px solid var(--rbsm-glass-border) !important;
    padding: 15px 10px !important;
    /* 10px left/right */
    font-size: 16px !important;
    color: inherit !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 4. TITLE BOX */
.rbsm-container .rbsm-form-group:has(input[name="title"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    position: relative !important;
}

/* Force Override Error Colors for Title */
.rbsm-container .rbsm-form-group:has(input[name="title"]) * {
    border-color: var(--rbsm-glass-border) !important;
    color: inherit !important;
    --v-theme-error: var(--rbsm-glass-border) !important;
    /* RESET ERROR COLOR TO GREY */
}

/* Ensure the outline specifically is targeted */
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field__outline {
    border-color: var(--rbsm-glass-border) !important;
    color: var(--rbsm-glass-border) !important;
}

/* 5. GHOST BUSTERS (Hidden Fields) */
/* Hide raw textareas inside our container */
.rbsm-container textarea,
.rbsm-container .rbsm-form-group textarea,
.rbsm-container .rbsm-input-content,
.rbsm-container [id*="content-html"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Hide Excerpt strictly */
.rbsm-container [id*="excerpt"],
.rbsm-container [class*="excerpt"] {
    display: none !important;
}

/* Hide Tags strictly by targeting 'tag' specific IDs/Names */
.rbsm-container .rbsm-form-group:has([id*="tags"]),
.rbsm-container .rbsm-form-group:has([name*="tags"]),
.rbsm-container .v-autocomplete:has([id*="tags"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5a. CATEGORY (FORCE VISIBILITY) */
/* Force Category to stay visible regardless of Vuetify type */
.rbsm-container .rbsm-form-group:has([id*="category"]),
.rbsm-container .rbsm-form-group:has([name*="category"]),
.rbsm-container .rbsm-form-group:has(.v-select) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* 6. LABELS & PLACEHOLDERS (Scoped) */

/* First: Hide ALL labels globally as requested */
.rbsm-container .v-label,
.rbsm-container .v-field__label,
.rbsm-container .v-field-label,
.rbsm-container label {
    display: none !important;
}

/* Second: Specifically RESTORE the Title placeholder label */
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-label,
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field-label,
.rbsm-container .rbsm-form-group:has(input[name="title"]) label:not(.v-field-label--floating) {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    color: var(--rbsm-placeholder, #888) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: absolute !important;
    top: 28px !important;
    transform: translateY(-50%) !important;
    left: 10px !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
    z-index: 20 !important;
    transition: none !important;
}

/* Third: Ensure it stays hidden when focused or has text */
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field--focused .v-label,
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field--dirty .v-label,
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field--active .v-label,
.rbsm-container .rbsm-form-group:has(input[name="title"]) .v-field-label--floating,
.rbsm-container .rbsm-form-group:has(input[name="title"]) input:focus~label {
    display: none !important;
    opacity: 0 !important;
}

/* 6a. EDITOR PLACEHOLDERS */
/* 6a. EDITOR PLACEHOLDERS */
/* 6a. EDITOR PLACEHOLDERS */
.rbsm-container .ql-editor.ql-blank::before {
    font-style: normal !important;
    /* Not italics */
    color: var(--rbsm-placeholder, #888) !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    /* Match text line height */
    opacity: 0.5 !important;
    /* Match label styles */
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    /* Match the user input position */
    top: 2px !important;
    /* Adjusted for 2px top padding */
    left: 10px !important;
    /* Aligned to 10px padding */
    right: 15px !important;
}

/* 6b. HIDE STATIC LABELS */
/* Hide the 'Prompt Title' text that appears above the box */
.rbsm-container h2.rbsm-input-title,
.rbsm-container label:not(.v-label) {
    display: none !important;
}

/* 7. EDITOR STYLING (Scoped) */
.rbsm-container .ql-editor {
    padding: 2px 10px !important;
    /* Extremely high content */
    text-align: left !important;
}

/* 7b. CONTENT HEADER CLEANUP */
/* Hide the icon/tools next to "Content" label */
.rbsm-container .rbsm-form-group:has(#richEditorContainer) i,
.rbsm-container .rbsm-form-group:has(#richEditorContainer) span.dashicons,
.rbsm-container .rbsm-form-group:has(#richEditorContainer) .dashicons-admin-tools,
.rbsm-container .rbsm-form-group:has(#richEditorContainer) .fa-tools,
/* Target the specific area above the editor */
.rbsm-container .rbsm-input-title i,
.rbsm-container .rbsm-input-title span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* REMOVE TOP BORDER from Editor Container - REVERTED */
/* .rbsm-container .ql-container.ql-snow,
.rbsm-container #richEditorContainer,
.rbsm-container .ql-container {
    border-top: none !important;
} */
.rbsm-container .ql-editor p {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    /* Start VERY top */
    text-indent: 0 !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
}

.rbsm-container .ql-toolbar,
.rbsm-container .ql-toolbar .ql-formats button,
.rbsm-container .ql-container svg,
.rbsm-container .ql-stroke,
.rbsm-container .ql-fill {
    display: none !important;
    border: none !important;
    height: 0 !important;
    padding: 0 !important;
}

/* 8. CATEGORY & BUTTON ROW (Scoped) */
/* Cleanup any borders or lines around editor/category */
.rbsm-container .ql-toolbar,
.rbsm-container .ql-container {
    border-top: none !important;
}

/* Add spacing above content box */
.rbsm-container #richEditorContainer {
    margin-top: 5px !important;
    /* Match grid gap */
    margin-bottom: 0px !important;
}

/* Category Row Styling */
.rbsm-container .rbsm-form-group:has(select),
.rbsm-container .rbsm-form-group:has(.v-select),
.rbsm-container .rbsm-form-group:has([id*="category"]),
.rbsm-container div[class*="category"] {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Post Button (Row 5) */
.rbsm-container .rbsm-form-submit-wrap,
.rbsm-container .rbsm-from-submit,
.rbsm-container .rbsm-form-footer {
    width: 100% !important;
    margin-top: 0 !important;
    /* Sitting tight against the row above */
    display: flex !important;
    justify-content: flex-end !important;
}

.rbsm-container .rbsm-btn {
    height: var(--rbsm-field-height) !important;
    padding: 0 40px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Razer Green Glow and Scale Effect */
.rbsm-container .rbsm-btn:hover {
    box-shadow: 0 0 15px 2px rgba(68, 214, 44, 0.8) !important;
    /* Razer Green Glow */
    color: #ffffff !important;
    /* Keep text white */
    transform: scale(1.05) !important;
    /* Scales button up by 5% */
    transition: all 0.05s ease-in-out !important;
    filter: none !important;
    text-shadow: none !important;
    /* Removes text effects */
}

/* Razer Green Click (Depressed) Effect */
.rbsm-container .rbsm-btn:active {
    transform: scale(0.95) !important;
    /* Sinks the button */
    box-shadow: 0 0 5px 1px rgba(68, 214, 44, 0.4) !important;
    /* Dims the glow */
    filter: brightness(0.7) !important;
    /* Darkens the button and text color */
    transition: all 0.02s !important;
    /* Instant response */
}

/* 9. GLOBAL POPOVERS (Cannot fully scope, but restrict to Vuetify components) */
/* These must remain global as Vuetify mounts them to body */
.v-overlay__content .v-list,
.v-menu__content .v-list,
.v-list-item,
.v-list {
    background-color: var(--rbsm-dropdown-bg, #1E1E1E) !important;
    /* Default to dark if var missing */
    color: var(--rbsm-dropdown-text, #fff) !important;
    border-radius: 0 !important;
}

/* Fix checkbox/icon colors in the menu */
.v-overlay__content .v-icon,
.v-menu__content .v-icon,
.v-list .v-icon,
.v-checkbox .v-selection-control__wrapper {
    color: var(--rbsm-dropdown-text, #fff) !important;
}

/* Hover/Active states */
.v-list-item--active,
.v-list-item[aria-selected="true"],
.v-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* Subtle highlight */
}

/* Fix Post Button Colors */
.rbsm-container .rbsm-btn-primary,
.rbsm-container .rbsm-btn,
.rbsm-container .rbsm-button {
    background-color: var(--rbsm-primary, #3f51b5) !important;
    color: var(--rbsm-btn-text, #fff) !important;
    border-radius: 5px !important;
    border-color: transparent !important;
}

/* 10. CLEANUP LINES (Scoped) */
/* Specific targets for the requested line and icon removal */
.rbsm-container .rbsm-form-group:has(#richEditorContainer)+div,
.rbsm-container .rbsm-form-group:has(#richEditorContainer)~div:has(.rbsm-section-divider),
.rbsm-container .rbsm-form-group:has(#richEditorContainer)+.rbsm-section-divider,
.rbsm-container .rbsm-form-group:has([id*="category"]):before,
.rbsm-container .rbsm-form-group:has([id*="category"])~div[class*="divider"],
/* Hide ANY divider class or HR */
.rbsm-container hr,
.rbsm-container .v-divider,
.rbsm-container .rbsm-section-divider,
.rbsm-container .rbsm-divider,
.rbsm-container [class*="divider"],
.rbsm-container form>div[style*="border-top"],
.rbsm-container .rbsm-form-group:has(select):before,
.rbsm-container .rbsm-form-group:has(.v-select):before,
.rbsm-container .rbsm-form-group:has(select):after,
.rbsm-container .rbsm-form-group:has(.v-select):after,
.rbsm-container .dashicons,
.rbsm-container .dashicons-admin-tools,
.rbsm-container .rbsm-input-title+span,
.rbsm-container i[class*="tool"] {
    display: none !important;
    border: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 11. TOOLBAR EXTERMINATION */
/* Hide the toolbar container using ID and class */
.rbsm-container .ql-toolbar,
.rbsm-container .ql-toolbar.ql-snow,
#richEditorContainer .ql-toolbar,
div[class*="toolbar"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    /* Ensure it takes no width */
    opacity: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* 12. SCROLLBARS (Dropdown & Container) */
.rbsm-container *::-webkit-scrollbar,
.v-overlay__content::-webkit-scrollbar,
.v-list::-webkit-scrollbar {
    width: 8px !important;
}

.rbsm-container *::-webkit-scrollbar-track,
.v-overlay__content::-webkit-scrollbar-track,
.v-list::-webkit-scrollbar-track {
    background: var(--rbsm-scroll-bg, rgba(0, 0, 0, 0.05)) !important;
}

.rbsm-container *::-webkit-scrollbar-thumb,
.v-overlay__content::-webkit-scrollbar-thumb,
.v-list::-webkit-scrollbar-thumb {
    background: var(--rbsm-scroll-thumb, rgba(0, 0, 0, 0.2)) !important;
}