/*
 * rdfa-editor.css - the RDFa editor's UI contract: annotation overlay, edit
 * dialogs, toolbar, block chrome and drag-and-drop marks, ToC drawer,
 * breadcrumb bar, lint markers, RDFa highlighting and the output modal.
 *
 * Host page requirements: include this stylesheet and give the editable
 * container (.rdfa-editor-content) enough left padding (>= 2.5em) for the block drag
 * handles, which render in the gutter outside each block's box.
 */

/* RDFa Visual Styling - Subtle dashed borders */
            .rdfa-editor-content *[property] {
                border: 1px dashed #4caf50;
                padding: 1px 2px;
                cursor: pointer;
                transition: background-color 0.2s, border-color 0.2s;
            }

.rdfa-editor-content *[property]:hover {
                background-color: rgba(76, 175, 80, 0.1);
                border-color: #2e7d32;
            }

.rdfa-editor-content *[typeof] {
                border: 1px dashed #9c27b0;
                padding: 1px 2px;
                cursor: pointer;
                transition: background-color 0.2s, border-color 0.2s;
            }

.rdfa-editor-content *[typeof]:hover {
                background-color: rgba(156, 39, 176, 0.1);
                border-color: #7b1fa2;
            }

.rdfa-editor-content *[about] {
                border: 1px dashed #2196f3;
                padding: 1px 2px;
                cursor: pointer;
                transition: background-color 0.2s, border-color 0.2s;
            }

.rdfa-editor-content *[about]:hover {
                background-color: rgba(33, 150, 243, 0.1);
                border-color: #1976d2;
            }

.rdfa-editor-content *[resource] {
                border: 1px dashed #ff9800;
                padding: 1px 2px;
                cursor: pointer;
                transition: background-color 0.2s, border-color 0.2s;
            }

.rdfa-editor-content *[resource]:hover {
                background-color: rgba(255, 152, 0, 0.1);
                border-color: #f57c00;
            }

/* Invalid selection flash animation */
            @keyframes selection-flash {
                0% { background-color: transparent; }
                25% { background-color: rgba(244, 67, 54, 0.4); }
                50% { background-color: rgba(244, 67, 54, 0.6); }
                75% { background-color: rgba(244, 67, 54, 0.4); }
                100% { background-color: transparent; }
            }

.invalid-selection-flash {
                animation: selection-flash 0.6s ease-in-out 2;
            }

.rdfa-editor-content > * {
                position: relative;
            }

/* invisible gutter strip: keeps the block hovered while the pointer
               travels to the drag handle, which sits outside the block box */
            .rdfa-editor-content > *::before {
                content: '';
                position: absolute;
                left: -2.25em;
                top: 0;
                bottom: 0;
                width: 2.25em;
            }

/* the editing-DOM run wrapper (mixed flow content, e.g. <li>text<ul>...) renders
   like the bare inline run it stands for; unwrapped again at canonicalization */
            .rdfa-editor-content p.rdfa-editor-run {
                margin: 0;
            }

.rdfa-editor-content figure {
                margin: 16px 0;
            }

.rdfa-editor-content figure img {
                display: block;
                max-width: 400px;
            }

/* Table blocks: cell borders make empty cells clickable while editing.
   Class-free, so canonical output (stored content) keeps host-page styling */
            .rdfa-editor-content table {
                border-collapse: collapse;
                margin: 16px 0;
            }

.rdfa-editor-content th,
            .rdfa-editor-content td {
                border: 1px solid #e0e0e0;
                padding: 4px 8px;
                min-width: 2em;
                vertical-align: top;
            }

.rdfa-editor-content th {
                background: #fafafa;
            }

.rdfa-editor-content caption {
                caption-side: top;
                text-align: left;
                padding: 4px 0;
                color: #757575;
            }

#edit-toolbar button:disabled {
                opacity: 0.4;
                cursor: default;
            }

.rdfa-editor-content [contenteditable="true"]:focus {
                outline: 2px solid rgba(33, 150, 243, 0.35);
                outline-offset: 2px;
            }

/* A block image can't hold a caret; when focused it is the selected navigation
   target, so it gets a stronger outline than the (caret-bearing) editable hosts */
            .rdfa-editor-content img:focus {
                outline: 2px solid rgba(33, 150, 243, 0.7);
                outline-offset: 2px;
            }

/* Block chrome (drag handle) - ephemeral, data-role stripped on serialization */
            [data-role="chrome"] {
                visibility: hidden;
                position: absolute;
                top: 2px;
                left: -1.5em;
                color: #9e9e9e;
                font-size: 14px;
                cursor: grab;
                user-select: none;
                border: none;
            }

.rdfa-editor-content > *:hover > [data-role="chrome"] {
                visibility: visible;
            }

/* Drag-and-drop feedback (v6 conventions) */
            .rdfa-editor-content > .dragging {
                opacity: 0.4;
            }

.rdfa-editor-content > .drop-before {
                box-shadow: 0 -3px 0 0 #2196f3;
            }

.rdfa-editor-content > .drop-after {
                box-shadow: 0 3px 0 0 #2196f3;
            }

/* Editor toolbar (injected into the navbar) */
            #edit-toolbar {
                order: -1;
                margin-right: auto;
                display: flex;
                gap: 6px;
                align-items: center;
            }

#edit-toolbar select,
            #edit-toolbar button {
                padding: 6px 10px;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                background: white;
                font-size: 13px;
                font-family: "Roboto", sans-serif;
                cursor: pointer;
            }

#edit-toolbar button:hover {
                background: #f5f5f5;
            }

/* Caret-contextual toggle state (aria-pressed toggle buttons) */
            #edit-toolbar button[aria-pressed="true"] {
                background: #e3f0ff;
                border-color: #6aa3e0;
                color: #1a5fb4;
            }

/* Functional groups: thin dividers between clusters, no labels */
            #edit-toolbar .tb-group {
                display: flex;
                gap: 6px;
                align-items: center;
            }

#edit-toolbar .tb-group + .tb-group {
                border-left: 1px solid #e0e0e0;
                padding-left: 6px;
            }

/* Table-ops cluster switches on when the caret is in a table */
            #edit-toolbar .tb-group.table-ops.active {
                background: #e3f0ff;
                border-radius: 4px;
            }

/* Link / figure dialogs */
            .edit-dialog {
                background: white;
                border: 2px solid #2196f3;
                border-radius: 8px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                padding: 16px;
                min-width: 320px;
                z-index: 10000;
            }

.edit-dialog label {
                display: block;
                font-size: 13px;
                font-weight: 500;
                color: #424242;
                margin: 8px 0 4px 0;
            }

.edit-dialog input[type="text"] {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 14px;
                box-sizing: border-box;
            }

.edit-dialog .rdfa-editor-ui .action-buttons {
                margin-top: 14px;
            }

/* ToC jumps land below the fixed navbar */
            .rdfa-editor-content > * {
                scroll-margin-top: 76px;
                scroll-margin-bottom: 48px;
            }

/* ToC drawer (Fonto-style outline view) */
            #toc-drawer {
                position: fixed;
                top: 64px;
                left: 0;
                bottom: 44px;
                width: 260px;
                overflow-y: auto;
                background: white;
                border-right: 1px solid #e0e0e0;
                box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
                padding: 12px 16px;
                z-index: 900;
            }

#toc-drawer h2 {
                font-size: 14px;
                color: #555;
                margin: 0 0 8px 0;
                padding-right: 20px;
            }

#toc-drawer .toc-close {
                position: absolute;
                right: 8px;
                top: 6px;
                background: none;
                border: none;
                padding: 0 4px;
                font-size: 22px;
                line-height: 1;
                color: #999;
                cursor: pointer;
            }

#toc-drawer .toc-close:hover {
                color: #333;
            }

#toc-drawer ul {
                list-style: none;
                padding-left: 0;
                margin: 4px 0;
            }

#toc-drawer ul ul {
                padding-left: 14px;
            }

.rdfa-editor-ui .toc-item {
                padding: 2px 0;
            }

.rdfa-editor-ui .toc-label {
                cursor: pointer;
                display: block;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 13px;
            }

.rdfa-editor-ui .toc-label:hover {
                background: #e3f2fd;
            }

#toc-drawer .drop-before {
                box-shadow: 0 -3px 0 0 #2196f3;
            }

#toc-drawer .drop-after {
                box-shadow: 0 3px 0 0 #2196f3;
            }

#toc-drawer .dragging {
                opacity: 0.4;
            }

/* Subject inspector drawer (read-only RDFa property sheet) */
            #inspector-drawer {
                position: fixed;
                top: 64px;
                right: 0;
                bottom: 44px;
                width: 300px;
                overflow-y: auto;
                background: white;
                border-left: 1px solid #e0e0e0;
                box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
                padding: 12px 16px;
                z-index: 900;
            }

#inspector-drawer h2 {
                font-size: 14px;
                color: #555;
                margin: 0 0 8px 0;
                padding-right: 20px;
            }

#inspector-drawer .inspector-close {
                position: absolute;
                right: 8px;
                top: 6px;
                background: none;
                border: none;
                padding: 0 4px;
                font-size: 22px;
                line-height: 1;
                color: #999;
                cursor: pointer;
            }

#inspector-drawer .inspector-close:hover {
                color: #333;
            }

#inspector-subject {
                margin-bottom: 12px;
                padding-bottom: 8px;
                border-bottom: 1px solid #e0e0e0;
            }

.rdfa-editor-ui .inspector-subject-iri {
                display: block;
                font-family: 'Courier New', monospace;
                font-size: 13px;
                color: #1565c0;
                word-break: break-all;
                margin-bottom: 6px;
            }

.rdfa-editor-ui .inspector-type {
                display: inline-block;
                background: #f3e5f5;
                color: #7b1fa2;
                border-radius: 10px;
                padding: 1px 8px;
                font-size: 11px;
                margin-right: 4px;
            }

.rdfa-editor-ui .inspector-row {
                padding: 5px 0;
                border-bottom: 1px solid #f0f0f0;
                font-size: 13px;
            }

.rdfa-editor-ui .inspector-pred {
                display: block;
                font-family: 'Courier New', monospace;
                color: #2e7d32;
            }

.rdfa-editor-ui .inspector-obj {
                display: block;
                color: #333;
                margin-top: 2px;
                word-break: break-word;
            }

.rdfa-editor-ui .inspector-obj-iri {
                font-family: 'Courier New', monospace;
                color: #1976d2;
            }

.rdfa-editor-ui .inspector-obj-dt,
            .rdfa-editor-ui .inspector-obj-lang {
                color: #9e9e9e;
                font-size: 11px;
                margin-left: 6px;
            }

/* Breadcrumb bar (Fonto-style element path + RDFa subject) */
            #breadcrumb {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                background: white;
                border-top: 1px solid #e0e0e0;
                padding: 8px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 13px;
                z-index: 1000;
            }

.rdfa-editor-ui .crumb {
                cursor: pointer;
                color: #1976d2;
            }

.rdfa-editor-ui .crumb:hover {
                text-decoration: underline;
            }

.rdfa-editor-ui .crumb-sep {
                color: #9e9e9e;
                margin: 0 4px;
            }

#breadcrumb-subject {
                font-family: 'Courier New', monospace;
                font-size: 12px;
                color: #1565c0;
            }

.lint-badge {
                border: none;
                font-family: "Roboto", sans-serif;
                background: #f44336;
                color: white;
                border-radius: 10px;
                padding: 2px 10px;
                font-size: 12px;
                cursor: pointer;
                margin-left: 12px;
            }

/* RDFa validation markers (class only - stripped by canonicalization) */
            .rdfa-editor-content .rdfa-invalid {
                text-decoration: underline wavy #f44336;
                text-decoration-skip-ink: none;
            }

.edit-dialog .rdfa-editor-ui .checkbox-label {
                display: inline-flex;
                gap: 6px;
                align-items: center;
                font-weight: 400;
                margin-top: 8px;
            }

/* Modern Overlay Styling */
            #overlay {
                background: linear-gradient(to bottom, #f8f9fa, #ffffff);
                border: 2px solid #2196f3;
                border-radius: 8px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                font-family: "Roboto", sans-serif;
                min-width: 450px;
                max-width: 500px;
                z-index: 10000;
            }

.rdfa-editor-ui .overlay-header {
                background: linear-gradient(135deg, #2196f3, #1976d2);
                color: white;
                padding: 16px 20px;
                border-radius: 6px 6px 0 0;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

.rdfa-editor-ui .overlay-header h3 {
                margin: 0 0 8px 0;
                font-size: 18px;
                font-weight: 500;
            }

#overlay form {
                padding: 20px;
            }

/* Statement (S / P / O) framing */
            .rdfa-editor-ui .statement {
                display: grid;
                grid-template-columns: 26px 1fr;
                gap: 10px 12px;
                align-items: center;
                background: #e3f2fd;
                border-radius: 6px;
                padding: 14px 16px;
                margin-bottom: 16px;
            }

.rdfa-editor-ui .stmt-role {
                font-family: 'Courier New', monospace;
                font-weight: bold;
                font-size: 12px;
                color: white;
                background: #2196f3;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

#stmt-subject {
                font-family: 'Courier New', monospace;
                font-size: 12px;
                color: #1565c0;
                word-break: break-all;
            }

/* Advanced fields disclosure */
            #overlay details {
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                padding: 8px 16px;
                margin-bottom: 16px;
                background: white;
            }

#overlay summary {
                cursor: pointer;
                font-size: 13px;
                font-weight: 500;
                color: #757575;
                padding: 4px 0;
            }

#overlay details fieldset {
                margin-top: 12px;
            }

/* Fieldsets */
            #overlay fieldset {
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                padding: 12px 16px;
                margin-bottom: 16px;
                background: white;
            }

#overlay label {
                display: block;
                font-weight: 500;
                color: #424242;
                margin-bottom: 8px;
                font-size: 14px;
            }

#overlay input[type="text"],
            #overlay select {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 14px;
                font-family: "Roboto", sans-serif;
                transition: border-color 0.2s;
                box-sizing: border-box;
            }

#overlay input[type="text"]:focus,
            #overlay select:focus {
                outline: none;
                border-color: #2196f3;
                box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
            }

#overlay input[type="text"]:disabled {
                background-color: #f5f5f5;
                color: #999;
            }

.rdfa-editor-ui .helper-text {
                display: block;
                font-size: 12px;
                color: #757575;
                margin-top: 6px;
                font-style: italic;
            }

/* Action Buttons */
            .rdfa-editor-ui .action-buttons {
                display: flex;
                gap: 12px;
                margin-top: 20px;
                justify-content: flex-end;
            }

.rdfa-editor-ui .btn-primary,
            .rdfa-editor-ui .btn-secondary,
            .rdfa-editor-ui .btn-danger {
                padding: 10px 24px;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s;
                font-family: "Roboto", sans-serif;
            }

.rdfa-editor-ui .btn-primary {
                background: #4caf50;
                color: white;
            }

.rdfa-editor-ui .btn-primary:hover {
                background: #45a049;
                box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
            }

.rdfa-editor-ui .btn-secondary {
                background: #f5f5f5;
                color: #424242;
                border: 1px solid #e0e0e0;
            }

.rdfa-editor-ui .btn-secondary:hover {
                background: #e0e0e0;
            }

.rdfa-editor-ui .btn-danger {
                background: #f44336;
                color: white;
                margin-right: auto;
            }

.rdfa-editor-ui .btn-danger:hover {
                background: #d32f2f;
                box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
            }

#overlay input[name="custom-property"],
            #overlay input[name="custom-type"] {
                margin-top: 8px;
            }

/* Modal Dialog */
#output-modal {
                position: fixed;
                z-index: 10001;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
            }

.rdfa-editor-ui .modal-content {
                background-color: white;
                padding: 30px;
                border-radius: 8px;
                width: 90%;
                max-width: 900px;
                max-height: 80vh;
                overflow-y: auto;
                position: relative;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

.rdfa-editor-ui .modal-close {
                position: absolute;
                right: 20px;
                top: 15px;
                font-size: 32px;
                font-weight: bold;
                color: #999;
                cursor: pointer;
                line-height: 1;
                transition: color 0.2s;
            }

.rdfa-editor-ui .modal-close:hover {
                color: #333;
            }

.rdfa-editor-ui .modal-content h3 {
                margin-top: 0;
                color: #333;
                padding-right: 40px;
            }

.rdfa-editor-ui .modal-content pre {
                margin: 15px 0 0 0;
                padding: 15px;
                background-color: #f5f5f5;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                font-family: 'Courier New', monospace;
                font-size: 12px;
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow-x: auto;
            }

/* links are editable text: a plain click places the caret (I-beam, not a pointer that
   would falsely promise navigation); Ctrl/Cmd+Click opens the href */
.rdfa-editor-content a[href] {
    cursor: text;
}

/* the annotated selection stays visible while the overlay form has focus */
.rdfa-editor-selection-hint {
    position: absolute;
    background: rgba(11, 87, 208, 0.22);
    pointer-events: none;
    z-index: 999;
}