/* App Master Stylesheet - IEE & ToR Portal */

:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --primary: #10b981;
    --primary-hover: #059669;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --warning: #f59e0b;
    --danger: #ef4444;
    --border-color: #475569;
    --font-family: 'Mukta', 'Inter', -apple-system, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.6;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Save Toast Notification Popup */
.save-toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #10b981;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2000;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.save-toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Header & Top Bar */
.app-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.65rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-icon {
    font-size: 1.8rem;
    background: rgba(16, 185, 129, 0.15);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.brand-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.brand-title p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.template-switcher {
    display: flex;
    background: var(--bg-primary);
    padding: 3px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.template-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.template-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lang-dropdown {
    background: var(--bg-primary);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.role-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.role-badge.public {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.role-badge.admin {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}

.project-dropdown {
    background: var(--bg-primary);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 220px;
    cursor: pointer;
}

.admin-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Button UI Components */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sm {
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-accent {
    background: var(--accent);
    color: #ffffff;
}

.btn-accent:hover {
    background: var(--accent-hover);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted);
}

/* Layout & Independent Panel Scrollbars */
.app-layout {
    display: flex;
    flex: 1;
    height: calc(100vh - 120px);
    overflow: hidden;
}

/* Sidebar Navigation (Admin Mode - Independent Scroll) */
.sidebar {
    width: 320px;
    height: 100%;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
}

.progress-card {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    border: 1px solid var(--border-color);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.progress-bar-bg {
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
}

.wizard-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Draggable & Indented Step Item Styling (Levels 1 to 4) */
.step-item {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    cursor: grab;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
}

.step-item.level-2 {
    margin-left: 1.15rem;
    border-left: 3px solid var(--accent);
    background: rgba(30, 41, 59, 0.7);
    font-size: 0.82rem;
}

.step-item.level-2 .step-num {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    background: var(--bg-secondary);
}

.step-item.level-3 {
    margin-left: 2.15rem;
    border-left: 3px solid var(--warning);
    background: rgba(30, 41, 59, 0.5);
    font-size: 0.78rem;
}

.step-item.level-3 .step-num {
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    background: var(--bg-secondary);
}

.step-item.level-4 {
    margin-left: 3.15rem;
    border-left: 3px solid #a855f7;
    background: rgba(30, 41, 59, 0.35);
    font-size: 0.75rem;
}

.step-item.level-4 .step-num {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    background: var(--bg-secondary);
}

.step-item:active {
    cursor: grabbing;
}

.step-item.dragging {
    opacity: 0.35;
    border: 2px dashed var(--primary);
    background: rgba(16, 185, 129, 0.05);
}

.step-item.drag-over {
    border-top: 3px solid var(--primary) !important;
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.step-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    overflow: hidden;
}

.drag-handle {
    font-size: 1rem;
    color: var(--text-muted);
    cursor: grab;
    padding: 0 2px;
}

.step-item:hover {
    border-color: var(--primary);
}

.step-item.active {
    background: rgba(16, 185, 129, 0.12);
    border-color: var(--primary);
}

.step-item.completed .step-num {
    background: var(--primary);
    color: #ffffff;
}

.step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Sidebar Re-order Action Buttons */
.step-reorder-btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-reorder {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.65rem;
    cursor: pointer;
    line-height: 1;
}

.btn-reorder:hover {
    background: var(--primary);
    color: #ffffff;
}

/* Main Content Split Area */
.main-content {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Form Editor Panel (Independent Scroll) */
.form-editor-panel {
    width: 50%;
    height: 100%;
    padding: 1.25rem;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Preview Panel Container (Independent Scroll) */
.preview-panel {
    width: 50%;
    height: 100%;
    background: #334155;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-panel.full-public-view {
    width: 100% !important;
}

.preview-header {
    background: #1e293b;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Preview Formatting Toolbar */
.preview-format-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.format-tool-group {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
    position: relative;
}

.btn-tool {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 2px 7px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.btn-tool:hover {
    background: var(--bg-card);
}

.btn-tool-accent {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.format-val-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 4px;
    min-width: 36px;
    text-align: center;
}

.format-select {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 4px;
    cursor: pointer;
}

/* Cover Boxes Dropdown Menu */
.cover-boxes-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: 0 12px 35px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 240px;
    z-index: 1000;
}

.cover-boxes-dropdown.open {
    display: flex;
}

.box-toggle-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-main);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
}

.box-toggle-item:hover {
    background: var(--bg-primary);
}

.preview-body {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    /* Explicit (not left to the CSS spec's "other axis force-computes to auto" quirk,
       which is inconsistently obvious to users even where supported): a landscape page
       (297mm, flex-shrink:0 like every .a4-page) is routinely wider than this panel's
       own box in the 50/50 editor split view — .form-editor-panel takes the other half
       of the screen, so .preview-panel (and this, its child) never gets the ~1122px a
       landscape page needs at 100% zoom. Public/print-preview's full-width panel
       (.preview-panel.full-public-view) has room and never needed this, which is why
       the same page looks fine there but was silently clipped here without it. */
    overflow-x: auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    transition: transform 0.2s ease;
}

/* Direct Inline WYSIWYG Page Editing Cues */
.preview-body[data-admin="true"] [contenteditable="true"] {
    cursor: text;
    transition: background 0.15s ease, outline 0.15s ease;
    border-radius: 2px;
}

.preview-body[data-admin="true"] [contenteditable="true"]:hover {
    outline: 1px dashed var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

.preview-body[data-admin="true"] [contenteditable="true"]:focus {
    outline: 2px solid var(--primary);
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Live Preview Image Actions Overlay (Change / Delete Image) */
.cover-image-container {
    position: relative;
    text-align: center;
    margin: 1rem 0;
}

.image-actions-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 0.35rem;
    background: rgba(15, 23, 42, 0.85);
    padding: 4px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.cover-image-container:hover .image-actions-overlay {
    display: flex;
}

/* Dedicated Full-Page SaaS Project Resources Hub Panel */
.saas-resources-page-panel {
    flex: 1;
    height: 100%;
    background: var(--bg-primary);
    padding: 1.5rem 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.saas-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.saas-page-header h2 {
    font-size: 1.35rem;
    color: var(--text-main);
    line-height: 1.2;
}

.saas-page-header p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.saas-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Project Resources Repository Grid & Compliance Checklist */
.resource-tabs-bar {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.res-tab-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.res-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.res-checklist-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.res-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    font-size: 0.78rem;
}

.res-check-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-secondary);
}

.res-check-item.done {
    color: #34d399;
}

.res-check-item.pending {
    color: #fbbf24;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.res-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.res-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.res-card-type-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    align-self: flex-start;
}

.res-card-type-badge.letter { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.res-card-type-badge.map { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.res-card-type-badge.data_table { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.res-card-type-badge.public_comment { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.res-card-type-badge.photo { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.res-card-type-badge.general { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }

.res-card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.res-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.res-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
    max-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A4 Document Rendering Page.
   Flex column + footer `margin-top: auto` ("sticky footer" pattern) instead of the
   old absolute-positioned footer: when a single page's content is short, the extra
   flex space pushes the footer down to sit near the true bottom (same look as
   before); when content is TALLER than one A4 sheet (a long chapter with many
   split sub-sections can easily exceed 297mm now), the footer simply flows right
   after the content in normal order — flex children can never overlap each other,
   so this is structurally overlap-proof regardless of how tall the content grows,
   unlike position:absolute (which pins to a fixed offset from the page's own
   auto-computed bottom and can end up rendering into/near the content when this
   interacts with min-height + percentage-height edge cases). */
.a4-page {
    width: 210mm;
    min-height: 297mm;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    padding: 2.5cm 2cm 2.5cm 2.5cm; /* Binding margin on left */
    position: relative;
    box-sizing: border-box;
    font-size: 11pt;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    /* .a4-page is ITSELF a flex item inside .preview-body's column flex layout. Flex
       items default to flex-shrink:1, and — this is the actual bug this rule fixes —
       giving an element display:flex changes how ITS OWN explicit min-height interacts
       with its parent's shrink behavior: the content-based "automatic minimum size" flex
       items normally get for free stops applying once min-height is set explicitly, so
       the parent was free to shrink a whole chapter's page down to exactly 297mm and
       silently clip everything past that — confirmed by measurement (a chapter with 12
       split sub-sections rendered at exactly 1123px/297mm tall while its last two
       sub-sections sat at top offsets of 1143px/1216px, past the box's own bottom edge).
       flex-shrink:0 stops the page itself from ever being compressed by its parent. */
    flex-shrink: 0;
}

.a4-page-content {
    flex: 1 0 auto;
}

/* A single page forced into landscape (see wrapA4Page's `orientation` param) — e.g. a
   wide Gantt-chart table that would be unreadably cramped in portrait's 210mm width.
   On screen this just swaps the box's own footprint so the live preview genuinely
   looks rotated. In print, physical page geometry comes from the `@page landscape`
   rule below via the `page` CSS property (set in the @media print block), not from
   this width/min-height pair — `.a4-page { width:100% !important }` at print time
   already makes the div fill whatever the active page box is. */
.a4-page-landscape {
    width: 297mm;
    min-height: 210mm;
}

/* Named page for print — referenced via `page: landscape;` on .a4-page-landscape
   inside @media print below. Deliberately kept OUTSIDE @media print: @page rules only
   ever take effect in paged/print contexts on their own, and this is the standard,
   most broadly-supported placement (Chromium's print-to-PDF respects a named @page's
   `size: ... landscape` this way without affecting any other, unnamed page). */
@page landscape {
    size: A4 landscape;
}

.a4-page-footer {
    position: static;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #cbd5e1;
    padding-top: 0.4rem;
    font-size: 8.5pt;
    color: #64748b;
}

.a4-page-header {
    position: absolute;
    top: 1cm;
    left: 2.5cm;
    right: 2cm;
    padding-bottom: 0.3rem;
    font-size: 8.5pt;
    color: #64748b;
}

/* Brief highlight when jumping to a section via the 🔗 link */
.sec-jump-highlight {
    outline: 3px solid #10b981;
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline-color 0.3s ease;
    background: rgba(16, 185, 129, 0.06);
}

/* Official Nepal Government Double Border Frame */
.official-cover-frame {
    border: 3px double #000000;
    padding: 1.5rem;
    min-height: 24cm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cover-title-box {
    text-align: center;
    border-bottom: 2px solid #000000;
    padding-bottom: 1rem;
}

.cover-main-title {
    font-size: 16pt;
    font-weight: 800;
    color: #000000;
    text-transform: uppercase;
    line-height: 1.35;
}

.cover-sub-title {
    font-size: 11pt;
    font-weight: 600;
    color: #334155;
    margin-top: 0.4rem;
}

.cover-site-img {
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
    border: 1px solid #000000;
    border-radius: 4px;
}

.cover-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    font-size: 9.5pt;
}

.cover-item-box {
    border: none !important;
    padding: 0.5rem 0;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 0.8rem;
}

.cover-title-box {
    text-align: center;
    border: none !important;
    padding: 0.5rem 0;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0.8rem;
}

.cover-image-box {
    text-align: center;
    border: none !important;
    padding: 0.5rem 0;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0.8rem;
}

.cover-date-box {
    text-align: center;
    border: none !important;
    padding: 0.5rem 0;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0.8rem;
}

.cover-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
}

.cover-box-label {
    font-weight: 700;
    color: #334155;
}

.cover-box-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 3px;
}

.cover-box-toggle input[type="checkbox"] {
    cursor: pointer;
    accent-color: #10b981;
}

.cover-meta-box {
    border: none !important;
    padding: 0.4rem 0.5rem;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
}

.cover-meta-title {
    font-weight: 700;
    color: #0f172a;
}

.cover-date-stamp {
    text-align: center;
    font-size: 10.5pt;
    font-weight: 700;
}

/* Clean Cover Preview Mode Styles */
.official-cover-frame.cover-preview-mode .cover-box-header,
.official-cover-frame.cover-preview-mode .image-actions-overlay,
.official-cover-frame.cover-preview-mode .btn-reorder {
    display: none !important;
}

.official-cover-frame.cover-preview-mode .cover-item-box,
.official-cover-frame.cover-preview-mode .cover-title-box,
.official-cover-frame.cover-preview-mode .cover-image-box,
.official-cover-frame.cover-preview-mode .cover-meta-box,
.official-cover-frame.cover-preview-mode .cover-date-box {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media print {
    .cover-box-header {
        display: none !important;
    }
    .cover-item-box, .cover-title-box, .cover-image-box, .cover-date-box, .cover-meta-box {
        border-color: #000000 !important;
        background: none !important;
    }
    /* The cover frame's on-screen height is normally visually compressed by the preview
       zoom level (a CSS transform), which print deliberately removes (`.a4-page { transform:
       scale(1) !important }`) — that reveals the frame's TRUE, unscaled content height,
       which with every optional cover box enabled runs a few mm past one physical A4 sheet.
       Trim inter-box spacing AND each box's own internal padding for print only (screen
       appearance unaffected) to reclaim that margin rather than spill the last box onto a
       near-empty second page. This was previously tuned to land EXACTLY at 297mm with zero
       slack — measured directly (getComputedStyle + Playwright print capture) confirming it —
       which meant any content even fractionally longer than the exact test case (a longer
       proponent name wrapping an extra line, different font metrics on a real machine vs.
       headless Chromium, etc.) would push past budget and strand the date-stamp box alone on
       page 2, exactly reproducing a real user's report. Trimmed further here to build in
       genuine headroom (~8-10mm) instead of a razor's-edge fit. */
    .cover-item-box, .cover-title-box, .cover-image-box, .cover-date-box, .cover-meta-box {
        margin-bottom: 0.2rem !important;
    }
    .cover-item-box, .cover-title-box, .cover-image-box, .cover-date-box {
        padding: 0.25rem 0 !important;
    }
    .cover-meta-box {
        padding: 0.2rem 0.5rem !important;
    }
    .official-cover-frame {
        padding: 0.6rem !important;
    }
    .cover-meta-grid {
        gap: 0.4rem !important;
    }
}

/* Document Print Typography & Clean Official Multi-Level Indentation (Levels 1 to 4) */
.print-section {
    margin-bottom: 1.5rem;
}

.print-section h2 {
    font-size: 13pt;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: none;
}

/* `.print-subsection-levelN` is the WRAPPER div around a heading + its own paragraph/
   list/table content, not the heading itself. `font-weight`/`font-style` are inherited
   CSS properties — setting them on the wrapper (as a single combined selector with the
   heading tag below) used to cascade bold/italic onto the paragraph body text nested
   inside it too, not just the heading, which is why every narrative paragraph in the
   document rendered bold. Layout-only properties (margins/indent) stay on the wrapper;
   typography (size/weight/color/style) is scoped to the heading tag only via `> hN`. */
.print-subsection-level2 {
    margin-top: 0.85rem;
    margin-bottom: 0.35rem;
    margin-left: 1.0rem;
}
.print-section h3, .print-subsection-level2 > h3 {
    font-size: 11pt;
    font-weight: 700;
    color: #1e293b;
    border-left: none;
    padding-left: 0;
}

.print-subsection-level3 {
    margin-top: 0.65rem;
    margin-bottom: 0.25rem;
    margin-left: 2.0rem;
}
.print-section h4, .print-subsection-level3 > h4 {
    font-size: 10.5pt;
    font-weight: 600;
    color: #334155;
    border-left: none;
    padding-left: 0;
}

.print-subsection-level4 {
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
    margin-left: 3.0rem;
}
.print-section h5, .print-subsection-level4 > h5 {
    font-size: 10pt;
    font-weight: 600;
    font-style: italic;
    color: #475569;
    border-left: none;
    padding-left: 0;
}

/* `.print-section` only wraps generic/custom-chapter content — bespoke sub-step
   paragraphs (the vast majority of the document: every २.x/३.x/... field) sit under
   `.a4-page-content > .preview-sec > .print-subsection-levelN > p` instead, which this
   selector never matched, so justify silently never reached them. `.a4-page-content p`
   catches every paragraph anywhere in the printed content regardless of which wrapper
   it's nested under (custom chapter, bespoke sub-step, or a section-block text block) —
   justify has no visible effect on a paragraph that never wraps to a second line, so
   this is safe to apply uniformly. */
.print-section p, .a4-page-content p {
    margin-bottom: 0.6rem;
    text-align: justify;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 9.5pt;
}

.print-table th, .print-table td {
    border: 1px solid #000000;
    padding: 5px 8px;
    text-align: left;
}

.print-table th {
    background-color: #f1f5f9;
    font-weight: 700;
}

/* Form Controls */
.form-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.form-card h2 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.form-card .subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group input, .form-group select, .form-group textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    outline: none;
}

.form-group textarea {
    min-height: 90px;
    resize: vertical;
}

/* Table Editor */
.table-wrapper {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th, .data-table td {
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.6rem;
}

.data-table th {
    background: var(--bg-primary);
    color: var(--text-muted);
    font-weight: 600;
}

.data-table input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 0.8rem;
}

.table-cell-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    padding: 0;
    display: block;
    /* `.form-group textarea` (a generic rule for ordinary multi-line note fields) sets
       min-height:90px and has HIGHER specificity (class+tag) than a single-class
       selector here — list-item textareas sit inside a `.form-group` wrapper for layout
       only, not because they want that floor, so without !important every list item
       gets stuck at 90px regardless of what autoResizeTextarea computes (table cells
       escaped this because a <td> isn't a `.form-group`, which is why cells worked but
       list items didn't — same JS, different ancestor). min-height:0 lets the real
       content height (as small as one line) win; auto-grow still works via JS setting
       an explicit height, unaffected by the removed floor. */
    min-height: 0 !important;
}

/* Modals & Vault Drawer */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.vault-drawer {
    position: fixed;
    top: 0;
    right: -360px;
    width: 360px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    z-index: 900;
    padding: 1.25rem;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.vault-drawer.open {
    right: 0;
}

.vault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.vault-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vault-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vault-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--bg-card);
}

/* Print Overrides */
@media print {
    .app-header, .sidebar, .step-nav-controls, .preview-header, .vault-drawer, .modal-overlay, .role-badge, .template-switcher, .saas-resources-page-panel, .image-actions-overlay, .save-toast-notification, .admin-only-ui {
        display: none !important;
    }

    body, .app-layout, .main-content, .preview-panel, .preview-body {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Two print-only bugs fixed here, both caused by rules that were written before
       the on-screen flex "sticky footer" (styles.css ~L867) and the JS repagination
       system (app.js repaginateBodyPages) existed, and never reconciled with them:

       1) `.a4-page` is `display:flex` on screen so the footer's `margin-top:auto`
          can stick it to the bottom of a short page. Chromium's print engine does
          NOT fragment flex containers across page breaks reliably — a flex box that
          is even fractionally taller than one physical sheet gets its overflow
          pushed onto a whole SEPARATE page, and because the footer's position is
          computed by flex geometry (not normal in-flow placement), it frequently
          detaches onto that spillover page by itself. Combined with the unconditional
          `page-break-after: always` below, this produced a full "content page, then
          a near-empty page holding just the footer" pair for EVERY `.a4-page` in the
          document — roughly doubling the physical page count end to end. Fix: force
          plain block layout for print only; `.a4-page-footer` below switches to
          absolute positioning (the pre-flex approach) since real page breaks now
          handle overflow instead of a single tall scrolling box.

       2) The flat `padding: 2cm !important` below also applied to `.a4-cover-page`,
          which is intentionally zero-padding on screen (`applyMarginsToPages()`
          skips it) so its double-border frame is measured from the true page edge.
          Print silently added 2cm on all sides back in, shrinking the cover's
          available height by 4cm and pushing its bottom content onto a second,
          almost-empty page. Fixed by excluding `.a4-cover-page` from this rule and
          re-asserting zero padding for it explicitly. */
    .a4-page {
        display: block !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        page-break-after: always;
        transform: scale(1) !important;
    }

    .a4-page:not(.a4-cover-page) {
        padding: 2cm !important;
    }

    /* Routes this one page to the `@page landscape` box declared above — physical
       paper geometry for print comes from here, not from the screen-only
       width/min-height swap on .a4-page-landscape itself (that rule doesn't apply
       inside @media print, since `.a4-page { width:100% !important }` wins). */
    .a4-page-landscape {
        page: landscape;
    }

    .a4-cover-page {
        padding: 0 !important;
    }

    .a4-page-footer {
        position: absolute !important;
        left: 2cm !important;
        right: 2cm !important;
        bottom: 1cm !important;
        margin-top: 0 !important;
    }

    /* Reserve room for the now-absolutely-positioned footer so tail-end content on
       an already-full page (from JS repagination, so should be rare) doesn't render
       underneath it. Excludes the cover, which has no footer at all — that padding
       would be pure wasted height pushing the cover's own content over one page. */
    .a4-page:not(.a4-cover-page) > .a4-page-content {
        padding-bottom: 2rem;
    }

    .print-section h3, .print-subsection-level2 {
        margin-left: 1.25rem !important;
        border-left: 3px solid #64748b !important;
    }

    .print-section h4, .print-subsection-level3 {
        margin-left: 2.25rem !important;
        border-left: 2px dashed #94a3b8 !important;
    }

    .print-section h5, .print-subsection-level4 {
        margin-left: 3.25rem !important;
        border-left: 2px dotted #cbd5e1 !important;
    }

    /* Level-1 chapters ALREADY always start on a fresh page (page-break-after:always
       on .a4-page, one chapter per chunk). This is the separate concern within a
       chapter: a SUB-heading (२.७.२ etc, h2/h3/h4/h5) must not print orphaned alone
       at the very bottom of a physical page with its own content pushed to the next
       one — "keep heading with next", the same behavior word processors give
       headings by default. Deliberately NOT pairing this with break-inside:avoid on
       the whole subsection wrapper — several of these narrative-prose fields can run
       well over a page on their own (especially after AI-Optimize expansion), and
       forcing a too-long block to stay whole would just push it to a fresh page
       anyway and still have to split it, leaving a large blank gap on the page
       before it. Keeping only the heading pinned to its immediate next line avoids
       that failure mode while still solving the orphaned-heading problem. */
    .print-section h2, .print-section h3, .print-section h4, .print-section h5 {
        page-break-after: avoid;
        break-after: avoid-page;
    }
}

/* Inline "add section here" divider between wizard steps */
.step-insert-divider {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 1px 4px;
    margin: 1px 0;
    opacity: 0.3;
    transition: opacity 0.15s ease;
    user-select: none;
}
.step-insert-divider:hover { opacity: 1; }
.step-insert-line { flex: 1; height: 1px; background: var(--primary, #10b981); opacity: 0.55; }
.step-insert-plus {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--primary, #10b981);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* AI Optimizer — per-field button + per-section batch bar (see app.js injectAiOptimizeControls) */
.ai-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.ai-field-btn-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Standalone case (field has no <label>, e.g. bespoke sub-step textarea/list kinds) —
   the group sits directly above the field instead of inline beside a label. */
.form-group > .ai-field-btn-group {
    margin-bottom: 0.3rem;
}

.btn-ai-optimize-field, .btn-ai-generate-field, .btn-ai-undo-field, .btn-ai-history-field, .btn-ai-prompt-field {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-ai-optimize-field {
    border: 1px solid rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}
.btn-ai-optimize-field:hover:not(:disabled) {
    background: rgba(167, 139, 250, 0.28);
    transform: translateY(-1px);
}

.btn-ai-generate-field {
    border: 1px solid rgba(244, 114, 182, 0.4);
    background: rgba(244, 114, 182, 0.14);
    color: #f9a8d4;
}
.btn-ai-generate-field:hover:not(:disabled) {
    background: rgba(244, 114, 182, 0.28);
    transform: translateY(-1px);
}

.btn-ai-undo-field {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}
.btn-ai-undo-field:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.24);
    transform: translateY(-1px);
}

.btn-ai-history-field {
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.btn-ai-history-field:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.24);
    transform: translateY(-1px);
}

.btn-ai-prompt-field {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}
.btn-ai-prompt-field:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.24);
    transform: translateY(-1px);
}

.btn-ai-optimize-field:disabled, .btn-ai-generate-field:disabled, .btn-ai-undo-field:disabled, .btn-ai-history-field:disabled, .btn-ai-prompt-field:disabled {
    opacity: 0.6;
    cursor: wait;
}

@keyframes ai-btn-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
.ai-btn-shake {
    animation: ai-btn-shake 0.35s ease;
}

.ai-history-panel {
    margin-top: 0.4rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 260px;
    overflow-y: auto;
}

.ai-history-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.4rem 0;
}

.ai-history-entry {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.ai-history-entry.is-current {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

.ai-history-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ai-history-source {
    font-weight: 600;
}

.ai-history-preview {
    font-size: 0.78rem;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-history-current-tag {
    align-self: flex-end;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
}

.ai-history-restore-btn {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border: none;
}
.ai-history-restore-btn:hover {
    background: var(--accent-hover);
}

.ai-prompt-panel {
    margin-top: 0.4rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: var(--radius-sm);
}

.ai-prompt-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-prompt-field-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.ai-prompt-field-group textarea {
    min-height: 60px;
    font-size: 0.82rem;
    resize: vertical;
}

.ai-prompt-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.ai-list-generate-panel {
    margin-top: 0.6rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: var(--radius-sm);
}

.ai-list-generate-panel .ai-prompt-field-group textarea {
    min-height: 44px;
}

.ai-prompt-library-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ai-prompt-library-row select {
    flex: 1 1 auto;
    min-width: 140px;
    font-size: 0.78rem;
}

.ai-prompt-library-save {
    align-self: flex-start;
}

.ai-optimize-section-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: var(--radius-md);
}

.btn-ai-optimize-section {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-ai-optimize-section:hover:not(:disabled) {
    filter: brightness(1.08);
}

.btn-ai-optimize-section:disabled {
    opacity: 0.7;
    cursor: wait;
}

.ai-optimize-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Section Extra Blocks — "Insert: Text/Table/Image" (see app.js renderExtraBlocksEditor) */
.section-blocks-zone {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.section-block-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.section-block-controls {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.section-blocks-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.4);
    border-radius: var(--radius-md);
}

.section-blocks-toolbar-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 0.2rem;
}

/* Print output for extra blocks — plain, matches surrounding report typography */
.section-block-print {
    margin-top: 0.6rem;
}

.section-block-image-print img {
    display: inline-block;
}

.section-block-image-caption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.3rem;
    font-style: italic;
}

.section-block-table-title {
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

.section-block-table-source {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.25rem;
    font-style: italic;
}

.table-row-move-controls {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    justify-content: center;
}

.table-row-move-controls .btn {
    padding: 1px 5px;
    font-size: 0.72rem;
    line-height: 1.4;
}

.table-row-move-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0.3rem 0 0;
}

.list-block-item-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.4rem;
}

.list-block-item-textarea {
    flex: 1 1 auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
}

.list-block-item-row .table-row-move-controls {
    flex: 0 0 auto;
    flex-direction: column;
    margin-top: 0;
}

/* The uploaded source is already capped to LIST_BULLET_IMAGE_MAX_DIMENSION (64px), but
   the DISPLAY size is fixed here too regardless of the source's actual pixel dimensions
   — a marker must always read as a small icon inline with the text, never as an
   accidentally-oversized image breaking the list's layout. */
.list-bullet-image {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* A plain bold character at inherited body font-size reads as too small/faint next to
   the body text (reported: "black dot size is bit small") — bumped to a proper Word-
   style bullet size, matching the reference document's more prominent • markers. */
.list-bullet-marker {
    font-size: 1.4em;
    line-height: 1;
    vertical-align: middle;
}

.list-bullet-image-preview {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    padding: 2px;
}

/* Map Draw tool — the attribute list below the map (one row per drawn point, showing its
   exact lat/lng and a per-point remove button) and the on-map coordinate tooltip that
   accompanies each point's marker. */
.map-draw-point-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}

.map-draw-point-idx {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--accent);
    min-width: 1.8rem;
}

.map-draw-point-coord {
    flex: 1 1 auto;
    font-family: monospace;
    color: var(--text-main);
}

.map-draw-point-tooltip {
    font-family: monospace;
    font-size: 0.7rem;
    padding: 1px 5px;
}

/* Map Draw tool — ArcGIS-style layer list (left panel): one row per layer, active layer
   highlighted, with an inline visibility checkbox + delete button. */
.map-draw-layer-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
}

.map-draw-layer-row.is-active {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.12);
}

.map-draw-layer-icon {
    flex-shrink: 0;
}

.map-draw-layer-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}

.map-draw-layer-del {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.7;
    padding: 0 2px;
}

.map-draw-layer-del:hover {
    opacity: 1;
}

/* A layer's optional floating label, rendered as a plain divIcon (no marker chrome). */
.map-draw-layer-label {
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: max-content !important;
}

/* Point-layer symbol markers other than the default circle — Leaflet only draws circles
   natively, so square/triangle/star are approximated with a colored divIcon shape. */
.map-draw-symbol-icon span {
    display: block;
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}

.map-draw-symbol-square span {
    border-radius: 2px;
}

.map-draw-symbol-triangle span {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.map-draw-symbol-star span {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Cartography chrome — north arrow + legend Leaflet controls (the scale bar uses
   Leaflet's own built-in styling). Light background regardless of the app's dark theme,
   since these are meant to read as print-map chrome in the exported figure, not as
   in-app UI. */
.map-draw-north-arrow {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    padding: 4px 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
    color: #1e293b;
    line-height: 1.1;
}

.map-draw-north-arrow-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.map-draw-north-arrow-tri {
    font-size: 0.85rem;
}

.map-draw-north-arrow-inner span:last-child {
    font-size: 0.68rem;
    font-weight: 700;
}

.map-draw-legend {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    padding: 6px 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    font-size: 0.68rem;
    color: #1e293b;
    max-width: 170px;
}

.map-draw-legend-title {
    font-weight: 700;
    margin-bottom: 3px;
}

.map-draw-legend-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.map-draw-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ==================================================================================
   Mobile responsiveness — Public Reader View only. The admin/editor split-screen
   (`.form-editor-panel` + `.preview-panel` at 50/50) is intentionally left alone: it's
   a desktop editing tool, not meant to be used on a phone. This block only kicks in
   when `body.public-mode` is set (toggled by updateRoleUI() in app.js whenever
   `isAdminLoggedIn` is false — the default, logged-out state), which is also exactly
   the state anyone opening a shared report link lands in.

   Core idea: the whole app shell (`.app-layout`, `.preview-panel`, `.preview-body`) is
   built as a fixed-height box with independently-scrolling internal panels — a classic
   desktop-app pattern that doesn't survive a header wrapping to 2-3 lines on a narrow
   screen. On mobile we abandon that pattern for public view and let it become one
   normal, page-scrolls-as-a-whole webpage instead (`height:auto; overflow:visible`
   everywhere in the chain) — this sidesteps ever having to compute/guess the header's
   actual wrapped height (the `.app-layout { height: calc(100vh - 120px) }` desktop
   rule assumes a fixed single-row header).

   The `.a4-page` A4-page-simulation (210mm fixed width) is also dropped for public
   view on mobile: it becomes a normal fluid-width block at the SAME 11pt body
   font-size the desktop print preview already uses — 11pt (~14.7px) is already a
   comfortable mobile reading size on its own; the only reason it looked cramped was
   the fixed 210mm box forcing tiny effective zoom, not the type size itself. So no
   text-shrinking/JS-computed-scale trick is needed — just letting the box's width go
   fluid is sufficient. The one exception is a landscape-oriented page (e.g. the ५.३
   Gantt-chart schedule table, 297mm/12 columns) — that genuinely can't reflow into a
   narrow column sensibly, so it keeps its own horizontal scroll instead (the standard
   responsive-table pattern), rather than being crushed unreadably narrow.
   ================================================================================== */
@media (max-width: 768px) {
    /* Universal, low-risk header fix (safe for admin mode too): let action buttons
       and the project-picker wrap onto their own line instead of overflowing off
       the right edge of a narrow screen. */
    .header-actions {
        flex-wrap: wrap;
    }

    .project-dropdown {
        /* `<select>` elements have a known Chromium quirk where `min-width:0` alone
           doesn't fully override their content-based intrinsic width (tied to the
           longest <option> text) — an explicit `width` + `max-width` is needed to
           actually force it to shrink, `flex-basis` alone isn't enough. */
        min-width: 0;
        width: 160px;
        max-width: 60vw;
        flex: 0 1 auto;
    }

    body.public-mode {
        height: auto;
        overflow: visible auto;
    }

    body.public-mode .app-layout {
        height: auto;
        overflow: visible;
    }

    body.public-mode .preview-panel.full-public-view {
        height: auto;
        overflow: visible;
    }

    body.public-mode .preview-panel.full-public-view .preview-body {
        height: auto;
        overflow: visible;
        padding: 1rem 0.75rem;
        gap: 1rem;
        transform: none !important; /* the 70–150% zoom control is a desktop-only concern here */
    }

    body.public-mode .preview-panel.full-public-view .a4-page {
        width: 100%;
        min-height: 0;
        padding: 1.25rem 1rem;
        box-shadow: none;
        border-radius: 0;
    }

    body.public-mode .preview-panel.full-public-view .a4-page-header {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        margin-bottom: 0.75rem;
    }

    body.public-mode .preview-panel.full-public-view .official-cover-frame {
        min-height: 0;
    }

    /* Landscape pages (see the .a4-page-landscape comment above): keep their own
       horizontal scroll for the wide table rather than reflowing, same reasoning as
       the split-editor-view fix earlier this session — just narrower here since the
       page itself is also now fluid-width instead of a fixed 297mm box. */
    body.public-mode .preview-panel.full-public-view .a4-page-landscape {
        width: 100%;
        min-height: 0;
        overflow-x: auto;
    }
}