/*
 * ============================================================
 * NOTE COMPILER STYLES
 * ============================================================
 * - CSS Variables
 * - Base styles and resets
 * - Banner styles and animations
 * - Prose styling for contentEditable
 * - Preview pane (Word document appearance)
 * - UI animations
 */

/* CSS Variables */
:root {
    --purple-deep: #4A3F6B;
    --purple-mid: #6B5B95;
    --purple-light: #9B8DC2;
    --teal: #2A9D8F;
    --teal-light: #40B9A9;
    --orange-pdf: #E76F51;
    --blue-doc: #5DA9E9;
    --green-file: #52B788;
    --cream: #FAF9F6;
    --dark: #1A1A2E;
    --gradient-primary: linear-gradient(135deg, #4A3F6B 0%, #2A9D8F 100%);
}

/* Base */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#root { height: 100vh; overflow: hidden; }

/* Print page margins */
@page {
    margin-top: 1in;
    margin-bottom: 1in;
}

/* ============================================================
 * BANNER STYLES
 * ============================================================ */

/* Main Banner Container */
.app-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--gradient-primary);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: 0 4px 20px rgba(74, 63, 107, 0.3);
    animation: bannerSlideIn 0.5s ease-out;
}

@keyframes bannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Banner Shimmer Effect */
.app-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmer 10s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Disable heavy animations on mobile for battery performance */
@media (max-width: 768px) {
    .app-banner::before {
        animation: none;
    }
    .floating-doc {
        animation: none;
    }
    .floating-doc.docx {
        animation: none;
    }
    .security-shield {
        animation: none;
    }
    .orbit-mini {
        animation: none;
    }
}

/* Also respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .app-banner::before,
    .floating-doc,
    .security-shield,
    .orbit-mini,
    .orbit-mini-1,
    .orbit-mini-2 {
        animation: none;
    }
}

/* Logo Section */
.banner-logo {
    display: flex;
    flex-direction: column;
    color: white;
    z-index: 1;
}

.banner-logo h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.banner-logo p {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

/* Floating Documents Animation */
.banner-documents {
    position: relative;
    width: 400px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.floating-doc {
    position: absolute;
    width: 80px;
    height: 100px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Scale all documents together when hovering the container */
.banner-documents:hover .floating-doc {
    transform: scale(1.1) translateY(-5px);
    z-index: 10;
}

.banner-documents:hover .floating-doc.docx {
    transform: scale(1.1) translateX(-50%) translateY(-5px);
}

.floating-doc.pdf {
    left: 20%;
    border-left: 4px solid var(--orange-pdf);
    animation: floatDoc1 6s ease-in-out infinite;
}

.floating-doc.docx {
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid var(--blue-doc);
    animation: floatDoc2 5s ease-in-out infinite;
    z-index: 2;
}

.floating-doc.txt {
    right: 20%;
    border-left: 4px solid var(--green-file);
    animation: floatDoc3 7s ease-in-out infinite;
}

@keyframes floatDoc1 {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes floatDoc2 {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(2deg); }
    50% { transform: translateX(-50%) translateY(-12px) rotate(2deg); }
}

@keyframes floatDoc3 {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-18px) rotate(-2deg); }
}

.doc-type-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.doc-type-badge.pdf { 
    background: rgba(231, 111, 81, 0.15); 
    color: var(--orange-pdf); 
}

.doc-type-badge.docx { 
    background: rgba(93, 169, 233, 0.15); 
    color: var(--blue-doc); 
}

.doc-type-badge.txt { 
    background: rgba(82, 183, 136, 0.15); 
    color: var(--green-file); 
}

.doc-mini-lines {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.doc-mini-line {
    height: 4px;
    background: #eee;
    border-radius: 2px;
}

.doc-mini-line:nth-child(1) { width: 100%; }
.doc-mini-line:nth-child(2) { width: 80%; }
.doc-mini-line:nth-child(3) { width: 60%; }

/* Security Shield */
.banner-security {
    position: relative;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.shield-container-mini {
    position: relative;
    width: 70px;
    height: 80px;
}

.security-shield {
    width: 100%;
    height: 100%;
    background: white;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shieldPulse 3s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.shield-container-mini:hover .security-shield {
    transform: scale(1.1);
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.shield-icon {
    font-size: 2rem;
}

.orbit-mini {
    position: absolute;
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.orbit-mini-1 {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbitSpin 8s linear infinite;
}

.orbit-mini-2 {
    width: 130px;
    height: 130px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbitSpin 12s linear infinite reverse;
}

@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Tooltips */
.banner-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    color: var(--dark);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    line-height: 1.4;
    width: 320px;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s ease-out;
    z-index: 2000;
}

.banner-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: white;
}

.floating-doc:hover .banner-tooltip,
.shield-container-mini:hover .security-tooltip,
.banner-documents:hover > .banner-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Position adjustment for security tooltip */
.security-tooltip {
    top: calc(100% + 5px);
}

/* SEO-friendly screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tooltip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--purple-deep);
}

.tooltip-text {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.3;
}

/* Adjust main content for banner */
.main-content-with-banner {
    padding-top: 100px;
    height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Prose - Editor content styling */
.prose { color: #374151; line-height: 1.75; }
.prose p { margin: 1em 0; }
.prose h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
.prose h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
.prose h3 { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; }
.prose ul { padding-left: 2em; margin: 1em 0; list-style-type: disc; }
.prose ol { padding-left: 2em; margin: 1em 0; list-style-type: decimal; }
.prose li { display: list-item; }
/* Quill 2.x outputs all lists as <ol> with data-list attribute on <li> */
.prose li[data-list="bullet"] { list-style-type: disc; }
.prose li[data-list="ordered"] { list-style-type: decimal; }
/* Quill 2.x nested list indentation (for raw Quill HTML) */
.prose li.ql-indent-1 { padding-left: 2em; }
.prose li.ql-indent-2 { padding-left: 4em; }
.prose li.ql-indent-3 { padding-left: 6em; }
.prose li.ql-indent-4 { padding-left: 8em; }
.prose li.ql-indent-5 { padding-left: 10em; }
/* Nested list style variations (for raw Quill HTML) */
.prose li.ql-indent-1[data-list="ordered"] { list-style-type: lower-alpha; }
.prose li.ql-indent-2[data-list="ordered"] { list-style-type: lower-roman; }
.prose li.ql-indent-3[data-list="ordered"] { list-style-type: decimal; }
.prose li.ql-indent-1[data-list="bullet"] { list-style-type: circle; }
.prose li.ql-indent-2[data-list="bullet"] { list-style-type: square; }
.prose li.ql-indent-3[data-list="bullet"] { list-style-type: disc; }
/* Nested list styles for converted/standard HTML */
.prose ol ol, .prose ul ol { list-style-type: lower-alpha; }
.prose ol ol ol, .prose ul ol ol, .prose ul ul ol { list-style-type: lower-roman; }
.prose ol ol ol ol, .prose ul ol ol ol { list-style-type: decimal; }
.prose ol ul, .prose ul ul { list-style-type: circle; }
.prose ol ul ul, .prose ul ul ul, .prose ol ol ul { list-style-type: square; }
.prose ol ul ul ul, .prose ul ul ul ul { list-style-type: disc; }
.prose strong { font-weight: bold; }
.prose em { font-style: italic; }
.prose u { text-decoration: underline; }

[contenteditable]:focus { outline: none; }
[contenteditable]:empty:before { content: attr(data-placeholder); color: #9ca3af; }

/* Preview Pane - Mimics Word document */
.preview-document {
    /* Fallback font - inline styles from editor will override */
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
    background-color: #ffffff;
    padding: 1in;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-height: 11in;
    width: 8.5in;
    margin: 0 auto;
}
/* Headings - keep structure, let inline styles override font-size */
.preview-document h1 { font-weight: bold; text-align: center; margin: 24pt 0 12pt 0; }
.preview-document h2 { font-weight: bold; margin: 18pt 0 12pt 0; }
.preview-document h3 { font-weight: bold; margin: 14pt 0 12pt 0; }
.preview-document p { margin: 12pt 0; }
.preview-document ul { margin: 12pt 0; padding-left: 40pt; list-style-type: disc; }
.preview-document ol { margin: 12pt 0; padding-left: 40pt; list-style-type: decimal; }
.preview-document li { margin: 6pt 0; display: list-item; }
/* Quill 2.x outputs all lists as <ol> with data-list attribute on <li> */
.preview-document li[data-list="bullet"] { list-style-type: disc; }
.preview-document li[data-list="ordered"] { list-style-type: decimal; }
/* Quill 2.x nested list indentation (for raw Quill HTML) */
.preview-document li.ql-indent-1 { padding-left: 40pt; }
.preview-document li.ql-indent-2 { padding-left: 80pt; }
.preview-document li.ql-indent-3 { padding-left: 120pt; }
.preview-document li.ql-indent-4 { padding-left: 160pt; }
.preview-document li.ql-indent-5 { padding-left: 200pt; }
/* Nested list style variations (for raw Quill HTML) */
.preview-document li.ql-indent-1[data-list="ordered"] { list-style-type: lower-alpha; }
.preview-document li.ql-indent-2[data-list="ordered"] { list-style-type: lower-roman; }
.preview-document li.ql-indent-3[data-list="ordered"] { list-style-type: decimal; }
.preview-document li.ql-indent-1[data-list="bullet"] { list-style-type: circle; }
.preview-document li.ql-indent-2[data-list="bullet"] { list-style-type: square; }
.preview-document li.ql-indent-3[data-list="bullet"] { list-style-type: disc; }
/* Nested list styles for converted/standard HTML */
.preview-document ol ol, .preview-document ul ol { list-style-type: lower-alpha; }
.preview-document ol ol ol, .preview-document ul ol ol, .preview-document ul ul ol { list-style-type: lower-roman; }
.preview-document ol ol ol ol, .preview-document ul ol ol ol { list-style-type: decimal; }
.preview-document ol ul, .preview-document ul ul { list-style-type: circle; }
.preview-document ol ul ul, .preview-document ul ul ul, .preview-document ol ol ul { list-style-type: square; }
.preview-document ol ul ul ul, .preview-document ul ul ul ul { list-style-type: disc; }
.preview-document strong { font-weight: bold; }
.preview-document em { font-style: italic; }
.preview-document u { text-decoration: underline; }

/* ============================================================
 * SEAMLESS PREVIEW - paginated document view
 * ============================================================ */
.seamless-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
}

.seamless-preview-page {
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
    background-color: #ffffff;
    padding: 1in;
    width: 8.5in;
    min-height: 11in;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Inherit all preview-document typography into seamless pages */
.seamless-preview-page h1 { font-weight: bold; text-align: center; margin: 24pt 0 12pt 0; }
.seamless-preview-page h2 { font-weight: bold; margin: 18pt 0 12pt 0; }
.seamless-preview-page h3 { font-weight: bold; margin: 14pt 0 12pt 0; }
.seamless-preview-page p { margin: 12pt 0; }
.seamless-preview-page ul { margin: 12pt 0; padding-left: 40pt; list-style-type: disc; }
.seamless-preview-page ol { margin: 12pt 0; padding-left: 40pt; list-style-type: decimal; }
.seamless-preview-page li { margin: 6pt 0; display: list-item; }
.seamless-preview-page li[data-list="bullet"] { list-style-type: disc; }
.seamless-preview-page li[data-list="ordered"] { list-style-type: decimal; }
.seamless-preview-page li.ql-indent-1 { padding-left: 40pt; }
.seamless-preview-page li.ql-indent-2 { padding-left: 80pt; }
.seamless-preview-page li.ql-indent-3 { padding-left: 120pt; }
.seamless-preview-page li.ql-indent-4 { padding-left: 160pt; }
.seamless-preview-page li.ql-indent-5 { padding-left: 200pt; }
.seamless-preview-page li.ql-indent-1[data-list="ordered"] { list-style-type: lower-alpha; }
.seamless-preview-page li.ql-indent-2[data-list="ordered"] { list-style-type: lower-roman; }
.seamless-preview-page li.ql-indent-3[data-list="ordered"] { list-style-type: decimal; }
.seamless-preview-page li.ql-indent-1[data-list="bullet"] { list-style-type: circle; }
.seamless-preview-page li.ql-indent-2[data-list="bullet"] { list-style-type: square; }
.seamless-preview-page li.ql-indent-3[data-list="bullet"] { list-style-type: disc; }
.seamless-preview-page ol ol, .seamless-preview-page ul ol { list-style-type: lower-alpha; }
.seamless-preview-page ol ol ol, .seamless-preview-page ul ol ol, .seamless-preview-page ul ul ol { list-style-type: lower-roman; }
.seamless-preview-page ol ol ol ol, .seamless-preview-page ul ol ol ol { list-style-type: decimal; }
.seamless-preview-page ol ul, .seamless-preview-page ul ul { list-style-type: circle; }
.seamless-preview-page ol ul ul, .seamless-preview-page ul ul ul, .seamless-preview-page ol ol ul { list-style-type: square; }
.seamless-preview-page ol ul ul ul, .seamless-preview-page ul ul ul ul { list-style-type: disc; }
.seamless-preview-page strong { font-weight: bold; }
.seamless-preview-page em { font-style: italic; }
.seamless-preview-page u { text-decoration: underline; }

/* Inline PDF pages in seamless preview */
.seamless-pdf-page {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.seamless-pdf-page canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* Inline images in seamless preview */
.seamless-preview-page .seamless-inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12pt auto;
}

/* Linked image+text layout in seamless preview */
.seamless-linked-pair {
    display: flex;
    gap: 16px;
    margin: 12pt 0;
}

.seamless-linked-pair.vertical {
    flex-direction: column;
}

.seamless-linked-pair .seamless-linked-image {
    flex-shrink: 0;
}

.seamless-linked-pair .seamless-linked-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.seamless-linked-pair .seamless-linked-text {
    flex-grow: 1;
    min-width: 0;
}

/* PDF Section Styles */
.pdf-section-card {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    overflow: hidden;
}
.pdf-section-card.editing {
    border-color: #3b82f6;
    background: #eff6ff;
}
.pdf-page-canvas {
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.pdf-viewer-container {
    max-height: 500px;
    overflow-y: auto;
    background: #525659;
    padding: 16px;
}
.pdf-viewer-container canvas {
    display: block;
    margin: 0 auto 16px auto;
    background: white;
}
.pdf-viewer-container canvas:last-child {
    margin-bottom: 0;
}

/* Action menu slide-in animation */
.action-menu { animation: slideIn 0.15s ease-out; }
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Merge connector styling */
.merge-connector {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.section-wrapper:hover + .merge-connector,
.merge-connector:hover {
    opacity: 1;
}

/* Drag and drop page styling */
.page-thumbnail {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-thumbnail.dragging {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Banner Actions */
.banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Module status indicators */
.module-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.module-status-dot.loaded { background-color: #22c55e; }
.module-status-dot.disabled { background-color: #9ca3af; }
.module-status-dot.error { background-color: #ef4444; }

/* Module loading animation */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideIn {
    animation: slideInFromRight 0.3s ease-out;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Module error banner offset for main content */
.main-content-with-error-banner {
    padding-top: 148px; /* 100px banner + 48px error banner */
}

/* ============================================================
 * IMAGE SECTION STYLES
 * ============================================================ */

/* Image canvas area */
.image-canvas {
    position: relative;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    min-height: 300px;
    overflow: hidden;
}

.image-canvas-item {
    position: absolute;
    cursor: move;
    transition: box-shadow 0.2s ease;
}

.image-canvas-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-canvas-item.selected {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Linked section styles */
.linked-section-container {
    border: 2px solid var(--purple-mid);
    border-radius: 8px;
    overflow: hidden;
}

.linked-section-header {
    background: linear-gradient(135deg, rgba(107, 91, 149, 0.1) 0%, rgba(42, 157, 143, 0.1) 100%);
    border-bottom: 1px solid var(--purple-light);
}

/* Linked section layouts */
.linked-layout-vertical {
    display: flex;
    flex-direction: column;
}

.linked-layout-horizontal {
    display: flex;
    flex-direction: row;
}

.linked-layout-horizontal > .linked-image-section,
.linked-layout-horizontal > .linked-text-section {
    flex: 1;
    min-width: 0;
}

/* Image reorder dialog thumbnails */
.image-reorder-thumbnail {
    aspect-ratio: 1;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 4px;
}

/* Image section card in list */
.image-section-card {
    border-left: 4px solid var(--teal);
}

/* Z-index layer indicator */
.z-index-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    background: #374151;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page break styles for print/export */
.page-break-before {
    page-break-before: always;
    break-before: page;
}

.page-break-after {
    page-break-after: always;
    break-after: page;
}

/* Page break display: visible spacing on screen, invisible when printing */
@media screen {
    [data-page-break] {
        margin: 20px 0;
    }
}

@media print {
    [data-page-break] {
        margin: 0;
        padding: 0;
        height: 0;
        overflow: hidden;
        page-break-before: always;
        break-before: page;
    }
}

/* Linked section overflow handling */
.linked-section-container .image-editor,
.linked-section-container .text-editor {
    overflow: hidden;
}

/* Ensure toolbars don't overflow in linked sections */
.linked-section-container .bg-gray-50,
.linked-section-container .bg-purple-50 {
    overflow: hidden;
}

/* ============================================================
 * RESIZABLE CANVAS STYLES
 * ============================================================ */

/* Canvas container */
.resizable-canvas {
    position: relative;
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    overflow: visible;
}

/* Canvas resize handles */
.canvas-resize-handle {
    position: absolute;
    background: #8b5cf6;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 50;
}

.resizable-canvas:hover .canvas-resize-handle {
    opacity: 1;
}

.canvas-resize-handle:hover {
    background: #7c3aed;
}

/* Image resize handle */
.image-resize-handle {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border-radius: 3px;
    cursor: se-resize;
    transition: background-color 0.2s ease;
}

.image-resize-handle:hover {
    background: #2563eb;
}

/* Selected image styling */
.image-canvas-item.selected {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Dimension labels */
.canvas-dimension-label {
    position: absolute;
    bottom: -24px;
    right: 0;
    font-size: 11px;
    color: #6b7280;
    font-family: monospace;
}

/* Canvas area background */
.canvas-area {
    background: #e5e7eb;
    padding: 16px;
    overflow: auto;
}

/* Linked section horizontal layout */
.linked-horizontal-layout {
    display: flex;
    align-items: stretch;
}

.linked-horizontal-layout > .image-section-panel {
    flex-shrink: 0;
}

.linked-horizontal-layout > .text-section-panel {
    flex-grow: 1;
    min-width: 200px;
}

/* ============================================================
 * MOBILE VIEW STYLES
 * ============================================================ */

/* Mobile Banner - 44px single row */
.mobile-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--gradient-primary);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(74, 63, 107, 0.3);
    overflow: hidden;
}

/* iOS Safari: Remove tap highlight color for cleaner UI */
.mobile-view * {
    -webkit-tap-highlight-color: transparent;
}

.mobile-banner .banner-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.mobile-banner .banner-logo-icon {
    font-size: 20px;
}

.mobile-banner .banner-logo-text {
    font-weight: 600;
    font-size: 16px;
}

.mobile-banner .privacy-indicator {
    font-size: 14px;
    opacity: 0.9;
    margin-left: 8px;
}

.mobile-banner .banner-actions {
    display: flex;
    gap: 8px;
}

.mobile-banner .banner-actions button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-banner .banner-actions button:active {
    background: rgba(255, 255, 255, 0.3);
}

.mobile-banner .banner-actions .export-btn {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Main Content Area */
.mobile-main-content {
    position: fixed;
    top: calc(44px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    /* Fix for Safari's dynamic toolbar - use dvh with fallback */
    height: calc(100vh - 44px - env(safe-area-inset-top, 0px));
    height: calc(100dvh - 44px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f9fafb;
}

/* Mobile Sticky Toolbar */
.mobile-sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}

.mobile-add-section-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-add-section-btn:active {
    background: #2563eb;
}

/* Mobile Add Section Dropdown */
.mobile-add-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    min-width: 200px;
    z-index: 101;
}

.mobile-add-dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: white;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mobile-add-dropdown button:active {
    background: #f3f4f6;
}

.mobile-add-dropdown button:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

/* Mobile Section Cards */
.mobile-section-card {
    background: white;
    border-radius: 12px;
    margin: 12px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
}

.mobile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-section-header .section-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mobile-section-header .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Section Action Buttons - 44px touch targets */
.mobile-section-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.mobile-section-actions button {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #6b7280;
}

.mobile-section-actions button:active {
    background: #f3f4f6;
}

.mobile-section-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mobile-section-actions button.delete-btn {
    color: #ef4444;
    border-color: #fecaca;
}

.mobile-section-actions button.delete-btn:active {
    background: #fef2f2;
}

/* Mobile Quill Toolbar - Two Row Layout */
.mobile-quill-container .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.mobile-quill-container .ql-toolbar .ql-formats {
    margin: 2px 4px;
    display: flex;
    align-items: center;
}

.mobile-quill-container .ql-toolbar button {
    width: 36px;
    height: 36px;
    padding: 6px;
}

.mobile-quill-container .ql-toolbar .ql-picker {
    height: 36px;
}

.mobile-quill-container .ql-toolbar .ql-picker-label {
    padding: 6px 8px;
    border-radius: 6px;
}

.mobile-quill-container .ql-editor {
    padding: 16px;
    min-height: 200px;
    /* Font size matches desktop (11pt) since editor is scaled */
}

/* Mobile Image Canvas - Larger Touch Targets */
.mobile-view .image-resize-handle {
    width: 44px;
    height: 44px;
    bottom: -22px;
    right: -22px;
}

.mobile-view .canvas-resize-handle {
    /* Larger handles for touch */
}

.mobile-view .canvas-resize-handle.handle-e {
    width: 16px;
    height: 60px;
}

.mobile-view .canvas-resize-handle.handle-s {
    width: 60px;
    height: 16px;
}

.mobile-view .canvas-resize-handle.handle-se {
    width: 24px;
    height: 24px;
}

/* Mobile Merge Connector */
.mobile-merge-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}

.mobile-merge-connector button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f3e8ff;
    color: #7c3aed;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.mobile-merge-connector button:active {
    background: #e9d5ff;
}

/* Safe area bottom padding for scrollable content */
.mobile-sections-container {
    padding: 12px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    /* Cross-browser compatible overflow handling */
    overflow-x: hidden;
    overflow-y: visible;
}

/* Mobile Scaled Editor - Cross-browser centering wrapper */
.mobile-scaled-editor-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mobile Scaled Editor - Safari-compatible centering */
.mobile-scaled-editor {
    /* Centering handled by wrapper flexbox */
    flex-shrink: 0;
    /* Ensure proper box sizing */
    box-sizing: border-box;
}

/* Mobile Scaled Editor - WYSIWYG matching export */
.mobile-scaled-editor {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    /* Safari fix: use flex-shrink to prevent squishing */
    flex-shrink: 0;
}

/* Hide desktop elements on mobile */
.mobile-view .desktop-only {
    display: none !important;
}

/* Show mobile elements only on mobile */
.mobile-only {
    display: none;
}

.mobile-view .mobile-only {
    display: flex;
}

/* Mobile Export Dialog adjustments */
.mobile-view .export-dialog {
    width: calc(100vw - 32px);
    max-width: 400px;
    margin: 16px;
}

/* Prevent body scroll when dragging on mobile - only applied during active drag */
.mobile-dragging {
    touch-action: none;
}

/* Ensure html and body allow scrolling normally */
html, body {
    overflow-x: hidden;
}

.mobile-view {
    overflow-y: auto;
    height: 100%;
}

/* Mobile DOCX Preview - Scale down for mobile viewport */
.mobile-view .docx-preview-wrapper {
    max-height: 400px;
}

.mobile-view .docx-preview-container {
    padding: 8px;
}

.mobile-view .docx-preview-container .docx-wrapper {
    max-width: 100%;
    padding: 16px;
    font-size: 14px;
    transform-origin: top left;
}

/* ============================================================
 * QUILL EDITOR - NOTE COMPILER THEME
 * ============================================================
 * Customizes Quill's Snow theme to match Note Compiler's
 * purple/teal aesthetic with clean, modern styling.
 */

/* Container */
.nc-quill-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
}

/* Toolbar Styling */
.nc-quill-container .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.nc-quill-container .ql-toolbar .ql-formats {
    margin-right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Add separator line between format groups */
.nc-quill-container .ql-toolbar .ql-formats:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 24px;
    background: #d1d5db;
    margin-left: 8px;
}

/* Buttons */
.nc-quill-container .ql-toolbar button {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.nc-quill-container .ql-toolbar button:hover {
    background: #e5e7eb;
}

.nc-quill-container .ql-toolbar button.ql-active {
    background: #6B5B95;
    color: white;
}

.nc-quill-container .ql-toolbar button.ql-active .ql-stroke {
    stroke: white;
}

.nc-quill-container .ql-toolbar button.ql-active .ql-fill {
    fill: white;
}

/* Alignment picker SVG icons - ensure they're visible */
.nc-quill-container .ql-toolbar .ql-align .ql-picker-label svg,
.nc-quill-container .ql-toolbar .ql-align .ql-picker-item svg {
    width: 18px;
    height: 18px;
}

.nc-quill-container .ql-toolbar .ql-align .ql-stroke {
    stroke: #444;
}

.nc-quill-container .ql-toolbar .ql-align .ql-picker-item:hover .ql-stroke,
.nc-quill-container .ql-toolbar .ql-align .ql-picker-item.ql-selected .ql-stroke {
    stroke: #6B5B95;
}

/* Dropdowns */
.nc-quill-container .ql-toolbar .ql-picker {
    height: 32px;
}

.nc-quill-container .ql-toolbar .ql-picker-label {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
    background: white;
    transition: all 0.15s ease;
}

.nc-quill-container .ql-toolbar .ql-picker-label:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.nc-quill-container .ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
    border-color: #6B5B95;
    background: #f5f3ff;
}

.nc-quill-container .ql-toolbar .ql-picker-options {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    position: fixed;
    z-index: 9999;
}

.nc-quill-container .ql-toolbar .ql-picker-item {
    padding: 6px 12px;
    border-radius: 4px;
}

.nc-quill-container .ql-toolbar .ql-picker-item:hover {
    background: #f3f4f6;
}

.nc-quill-container .ql-toolbar .ql-picker-item.ql-selected {
    background: #6B5B95;
    color: white;
}

/* Font size picker - wider */
.nc-quill-container .ql-snow .ql-picker.ql-size {
    width: 70px;
}

/* Font family picker - wider */
.nc-quill-container .ql-snow .ql-picker.ql-font {
    width: 130px;
}

/* Color pickers */
.nc-quill-container .ql-toolbar .ql-color-picker .ql-picker-label,
.nc-quill-container .ql-toolbar .ql-background .ql-picker-label {
    padding: 2px;
}

.nc-quill-container .ql-toolbar .ql-color-picker .ql-picker-options,
.nc-quill-container .ql-toolbar .ql-background .ql-picker-options {
    padding: 8px;
    width: auto;
}

/* Editor Area */
.nc-quill-container .ql-container.ql-snow {
    border: none;
    font-size: 11pt;
    flex: 1;
    overflow: hidden;
}

.nc-quill-container .ql-editor {
    padding: 16px 0.25in;
    min-height: 200px;
    line-height: 1.6;
    overflow-y: auto;
    /* Default font - matches Times New Roman as first font option */
    font-family: 'Times New Roman', Times, serif;
    font-size: 11pt;
    /* Prevent mobile browsers from auto-adjusting font sizes */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.nc-quill-container .ql-editor p {
    margin: 12pt 0;
}

/* Desktop: width controlled by parent 7in container */
@media (min-width: 768px) {
    .nc-quill-container .ql-editor {
        /* Content width = 7in container - 0.5in padding = 6.5in */
    }
}

.nc-quill-container .ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: normal;
    left: 0.25in;
}

/* Focus state */
.nc-quill-container .ql-container.ql-snow:focus-within {
    outline: none;
}

/* Custom Font Sizes */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '11pt';  /* Default size - must match .ql-editor font-size */
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=""]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=""]::before { content: '11pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8pt"]::before { content: '8pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9pt"]::before { content: '9pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10pt"]::before { content: '10pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11pt"]::before { content: '11pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12pt"]::before { content: '12pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"]::before { content: '14pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before { content: '18pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"]::before { content: '24pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36pt"]::before { content: '36pt'; }

/* Apply actual font sizes */
.ql-editor .ql-size-8pt { font-size: 8pt; }
.ql-editor .ql-size-9pt { font-size: 9pt; }
.ql-editor .ql-size-10pt { font-size: 10pt; }
.ql-editor .ql-size-11pt { font-size: 11pt; }
.ql-editor .ql-size-12pt { font-size: 12pt; }
.ql-editor .ql-size-14pt { font-size: 14pt; }
.ql-editor .ql-size-18pt { font-size: 18pt; }
.ql-editor .ql-size-24pt { font-size: 24pt; }
.ql-editor .ql-size-36pt { font-size: 36pt; }

/* Custom Fonts - PDF-compatible set only */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Times New Roman';  /* Default font */
    font-family: 'Times New Roman', Times, serif;
}

/* Override Quill's default "Sans Serif" for empty/unset font value */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=""]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=""]::before {
    content: 'Times New Roman' !important;
    font-family: 'Times New Roman', Times, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before { content: 'Times New Roman'; font-family: 'Times New Roman', Times, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before { content: 'Courier New'; font-family: 'Courier New', monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica"]::before { content: 'Helvetica'; font-family: 'Helvetica', Arial, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before { content: 'Roboto'; font-family: 'Roboto', sans-serif; }

/* Apply actual fonts */
.ql-editor .ql-font-times { font-family: 'Times New Roman', Times, serif; }
.ql-editor .ql-font-courier { font-family: 'Courier New', monospace; }
.ql-editor .ql-font-helvetica { font-family: 'Helvetica', Arial, sans-serif; }
.ql-editor .ql-font-roboto { font-family: 'Roboto', sans-serif; }

/* Linked section compact toolbar */
.nc-quill-compact .ql-toolbar.ql-snow {
    padding: 4px 8px;
}

.nc-quill-compact .ql-toolbar button {
    width: 26px;
    height: 26px;
    padding: 4px;
}

.nc-quill-compact .ql-editor {
    padding: 12px;
    min-height: 150px;
}