{% extends 'base.html' %}

{% block title %}FinDrive - FinBot Vendor Portal{% endblock %}

{% block meta_description %}Store and manage your files in FinDrive — documents, invoices, and more.{% endblock %}

{% block nav_findrive %}active{% endblock %}

{% block page_title %}FinDrive{% endblock %}
{% block page_subtitle %}Your files, stored securely{% endblock %}

{% block header_actions %}
<div class="relative inline-block">
    <button id="new-file-btn" class="vendor-btn quantum-accent">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
        New
    </button>
    <div id="new-file-menu" class="new-file-menu hidden">
        <button class="new-file-menu-item" onclick="newFileOfType('doc')">
            <span class="nfm-icon nfm-icon-doc">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </span>
            Document
        </button>
        <button class="new-file-menu-item" onclick="newFileOfType('pdf')">
            <span class="nfm-icon nfm-icon-pdf">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            </span>
            Invoice PDF
        </button>
    </div>
</div>
<a href="/vendor/assistant" class="vendor-btn quantum-primary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
    </svg>
    AI Assistant
</a>
{% endblock %}

{% block content %}
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
            </svg>
        </div>
        <div id="stat-file-count" class="metric-value">0</div>
        <div class="metric-label">Files</div>
    </div>
    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
            </svg>
        </div>
        <div id="stat-storage-provider" class="metric-value text-lg">FinDrive</div>
        <div class="metric-label">Storage Provider</div>
    </div>
    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
        </div>
        <div id="stat-drive-status" class="metric-value text-lg">Connected</div>
        <div class="metric-label">Status</div>
    </div>
</div>

<!-- Drive File Explorer -->
<div class="drive-container">
    <div class="drive-main">
        <div class="drive-toolbar">
            <h2 class="text-sm font-semibold text-text-bright">My Drive</h2>
        </div>
        <div id="drive-grid" class="drive-grid">
            <div class="col-span-full flex items-center justify-center py-12">
                <svg class="animate-spin h-5 w-5 text-vendor-primary" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-3 text-text-secondary">Loading files...</span>
            </div>
        </div>
        <div id="files-empty-state" class="hidden text-center py-16">
            <svg class="w-20 h-20 mx-auto text-text-secondary/40 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
            </svg>
            <h3 class="text-lg font-medium text-text-bright mb-2">No files yet</h3>
            <p class="text-text-secondary mb-4">Click <strong>+ New</strong> to create your first file</p>
        </div>
    </div>
    <div id="drive-sidecar" class="drive-sidecar hidden"></div>
</div>

<!-- ================================================================ -->
<!-- FILE EDITOR MODAL (generic)                                      -->
<!-- ================================================================ -->
<div id="file-editor-modal" class="fixed inset-0 z-50 hidden flex flex-col bg-portal-bg-primary">
    <div class="fd-toolbar">
        <div class="flex items-center gap-3">
            <button id="close-editor-btn" class="fd-toolbar-icon" title="Close">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
            <span id="editor-title" class="text-sm font-semibold text-white">New File</span>
        </div>
        <div class="flex items-center gap-3">
            <div class="fd-filename-wrap">
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                <input type="text" id="editor-filename" class="fd-filename-input" placeholder="filename" value="">
            </div>
            <button id="cancel-editor-btn" class="fd-toolbar-btn fd-toolbar-btn-secondary">Cancel</button>
            <button id="save-file-btn" class="fd-toolbar-btn fd-toolbar-btn-primary">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                <span id="save-file-label">Save</span>
            </button>
        </div>
    </div>
    <div class="fd-viewport">
        <div id="editor-paper" class="fd-paper"></div>
    </div>
</div>

<!-- ================================================================ -->
<!-- FILE VIEWER MODAL (generic)                                      -->
<!-- ================================================================ -->
<div id="file-viewer-modal" class="fixed inset-0 z-50 hidden flex flex-col bg-portal-bg-primary">
    <div class="fd-toolbar">
        <div class="flex items-center gap-3">
            <button id="close-viewer-btn" class="fd-toolbar-icon" title="Close">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
            <span id="viewer-title" class="text-sm font-semibold text-white">file</span>
        </div>
        <div class="flex items-center gap-3">
            <button id="viewer-edit-btn" class="fd-toolbar-btn fd-toolbar-btn-secondary" data-file-id="" data-file-type="" onclick="editFromViewer()">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Edit
            </button>
        </div>
    </div>
    <div class="fd-viewport">
        <div id="viewer-paper" class="fd-paper"></div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Header z-index so dropdown paints above content area */
#main-content > header { position: relative; z-index: 20; }

/* ================================================================
   NEW FILE MENU
   ================================================================ */
.new-file-menu {
    position: absolute;
    right: 0; top: 100%;
    margin-top: 6px;
    min-width: 200px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    overflow: hidden;
    z-index: 30;
}
.new-file-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; width: 100%;
    font-size: 13px; font-weight: 500; color: #e2e8f0;
    cursor: pointer; border: none; background: none;
    transition: background 0.12s;
    text-align: left;
}
.new-file-menu-item:hover { background: rgba(255,255,255,0.07); }
.nfm-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nfm-icon-doc { background: rgba(66,133,244,0.15); color: #60a5fa; }
.nfm-icon-pdf { background: rgba(239,68,68,0.15); color: #f87171; }

/* ================================================================
   DRIVE FILE EXPLORER
   ================================================================ */
.drive-container {
    display: flex;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
}
.drive-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drive-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.drive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 4px; padding: 12px;
    flex: 1; align-content: start;
}

/* File card */
.drive-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 10px 14px;
    border-radius: 10px; border: 2px solid transparent;
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.drive-card:hover { background: rgba(0,212,255,0.04); border-color: rgba(0,212,255,0.1); }
.drive-card-selected { background: rgba(0,212,255,0.08) !important; border-color: rgba(0,212,255,0.3) !important; }
.drive-card-icon { margin-bottom: 10px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); }
.drive-card-name {
    font-size: 12px; color: #e2e8f0; text-align: center;
    word-break: break-word; line-height: 1.4;
    max-height: 2.8em; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.drive-card-date { font-size: 10px; color: #64748b; margin-top: 4px; }

/* ================================================================
   SIDECAR
   ================================================================ */
.drive-sidecar {
    width: 280px; flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    overflow-y: auto;
}
.sc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sc-header-title { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.sc-close-btn { padding: 4px; border-radius: 6px; border: none; background: none; color: #64748b; cursor: pointer; transition: all 0.15s; }
.sc-close-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.08); }
.sc-icon { display: flex; justify-content: center; padding: 24px 16px 8px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); }
.sc-filename { font-size: 13px; font-weight: 600; color: #e2e8f0; text-align: center; padding: 0 16px 16px; word-break: break-word; line-height: 1.4; }
.sc-meta { padding: 0 16px 16px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; }
.sc-meta-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.sc-meta-row > span:first-child { color: #64748b; }
.sc-meta-row > span:last-child { color: #cbd5e1; }
.sc-actions { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.sc-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: #cbd5e1; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.sc-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.sc-btn-primary { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.25); color: #00d4ff; }
.sc-btn-primary:hover { background: rgba(0,212,255,0.18); }
.sc-btn-danger:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* ================================================================
   EDITOR / VIEWER TOOLBAR
   ================================================================ */
.fd-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; background: #1e293b;
    border-bottom: 1px solid #334155; flex-shrink: 0; z-index: 10;
}
.fd-toolbar-icon { padding: 6px; border-radius: 6px; border: none; background: none; color: #94a3b8; cursor: pointer; transition: all 0.15s; }
.fd-toolbar-icon:hover { color: #fff; background: rgba(255,255,255,0.1); }
.fd-toolbar-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 6px; border: none;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.fd-toolbar-btn-secondary { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.fd-toolbar-btn-secondary:hover { background: rgba(255,255,255,0.15); }
.fd-toolbar-btn-primary { background: #06ffa5; color: #0a0a0f; }
.fd-toolbar-btn-primary:hover { background: #00e694; }
.fd-filename-wrap {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid #334155;
    border-radius: 6px; padding: 4px 10px;
}
.fd-filename-input {
    background: none; border: none; outline: none;
    color: #e2e8f0; font-size: 13px; width: 200px;
    font-family: ui-monospace, monospace;
}

/* ================================================================
   PAPER VIEWPORT + PAPER
   ================================================================ */
.fd-viewport { flex: 1; overflow: auto; background: #374151; padding: 32px 16px; }
.fd-paper {
    background: #ffffff; color: #1e293b;
    max-width: 816px; margin: 0 auto;
    padding: 56px 64px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08);
    border-radius: 2px; min-height: 900px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px; line-height: 1.5;
}
.paper-footer-line { border-top: 1px solid #e2e8f0; margin-top: 32px; margin-bottom: 8px; }
.paper-footer-text { text-align: center; font-size: 10px; color: #94a3b8; letter-spacing: 0.3px; }

/* ================================================================
   INVOICE PDF STYLES
   ================================================================ */
.inv-header { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.inv-from-block { flex: 1; }
.inv-meta-block { flex: 0 0 260px; text-align: right; }
.inv-doc-title { font-size: 38px; font-weight: 800; color: #1e293b; letter-spacing: -1px; margin-bottom: 16px; line-height: 1; }
.inv-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; }
.inv-meta-grid label { font-size: 11px; font-weight: 600; color: #64748b; padding: 4px 0; white-space: nowrap; }
.inv-input {
    background: transparent; border: none; border-bottom: 1.5px solid transparent;
    outline: none; font-family: inherit; font-size: inherit;
    color: #1e293b; padding: 3px 4px; width: 100%;
    transition: border-color 0.15s, background 0.15s; border-radius: 2px;
}
.inv-input:hover { border-bottom-color: #e2e8f0; }
.inv-input:focus { border-bottom-color: #3b82f6; background: #f1f5f9; }
.inv-input::placeholder { color: #cbd5e1; font-style: italic; }
.inv-input-company { font-size: 15px; font-weight: 600; }
.inv-input-meta { text-align: right; }
.inv-input-tax { width: 52px; text-align: center; display: inline-block; border-bottom-color: #e2e8f0; font-size: 12px; }
.inv-input-notes { min-height: 72px; resize: vertical; border: 1.5px solid #e2e8f0; border-radius: 6px; padding: 10px 12px; line-height: 1.6; }
.inv-input-notes:focus { border-color: #3b82f6; }
.inv-billto { margin-bottom: 28px; }
.inv-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #64748b; margin-bottom: 6px; text-transform: uppercase; }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.inv-table thead { background: #1e293b; color: #fff; }
.inv-table th { padding: 9px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-align: left; }
.inv-th-num { text-align: right; width: 90px; }
.inv-th-act { width: 32px; }
.inv-row td { padding: 6px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.inv-item-desc { font-size: 13px; }
.inv-item-qty, .inv-item-rate { text-align: right; width: 70px; }
.inv-item-amt { text-align: right; font-weight: 500; color: #1e293b; padding: 6px 12px; }
.inv-remove-btn { background: none; border: none; color: #cbd5e1; cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.15s, background 0.15s; }
.inv-remove-btn:hover { color: #ef4444; background: #fef2f2; }
.inv-table-view td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; font-size: 13px; color: #334155; }
.inv-table-view tr:last-child td { border-bottom: none; }
.inv-add-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; margin-top: 6px; margin-bottom: 24px;
    background: none; border: 1.5px dashed #d1d5db; border-radius: 6px;
    color: #64748b; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.inv-add-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
.inv-totals-block { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 28px; }
.inv-totals-row { display: flex; justify-content: space-between; width: 260px; padding: 5px 0; font-size: 13px; color: #475569; }
.inv-totals-total { border-top: 2px solid #1e293b; margin-top: 6px; padding-top: 10px; font-size: 18px; font-weight: 700; color: #1e293b; }
.inv-notes-block { margin-bottom: 24px; }
.inv-view-company { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 2px; }
.inv-view-line { font-size: 13px; color: #475569; line-height: 1.6; }
.inv-view-empty { color: #cbd5e1; font-style: italic; }
.inv-view-meta { margin-top: 16px; }
.inv-view-meta > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.inv-view-meta > div > span:first-child { color: #64748b; font-weight: 600; }
.inv-view-meta > div > span:last-child { color: #1e293b; }
.inv-view-notes { font-size: 13px; color: #475569; line-height: 1.6; white-space: pre-wrap; }
.inv-view-totals .inv-totals-total { color: #1e293b; }

/* ================================================================
   DOCUMENT STYLES
   ================================================================ */
.doc-title-input {
    font-size: 28px; font-weight: 400; color: #1e293b;
    border: none; outline: none; width: 100%; padding: 0;
    font-family: inherit; line-height: 1.3;
}
.doc-title-input::placeholder { color: #d1d5db; }
.doc-divider { border-bottom: 1px solid #e2e8f0; margin: 16px 0 24px; }
.doc-body-input {
    width: 100%; border: none; outline: none;
    font-family: inherit; font-size: 15px; line-height: 1.8;
    color: #334155; min-height: 560px; resize: none; padding: 0;
}
.doc-body-input::placeholder { color: #d1d5db; }
.doc-view-title { font-size: 28px; font-weight: 400; color: #1e293b; line-height: 1.3; margin: 0; }
.doc-view-body { font-size: 15px; line-height: 1.8; color: #334155; }
.doc-paragraph { margin-bottom: 0; }

/* ================================================================
   RICH TEXT FORMATTING TOOLBAR
   ================================================================ */
.fmt-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.fmt-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 4px;
    background: none; cursor: pointer;
    font-size: 14px; color: #475569;
    transition: all 0.12s;
}
.fmt-btn:hover { background: #e2e8f0; color: #1e293b; }
.fmt-btn-italic { font-family: Georgia, serif; }
.fmt-sep { width: 1px; height: 20px; background: #e2e8f0; margin: 0 2px; flex-shrink: 0; }
.fmt-select {
    height: 28px; padding: 0 4px;
    border: 1px solid #e2e8f0; border-radius: 4px;
    background: #fff; font-size: 12px; color: #475569;
    cursor: pointer; outline: none;
}
.fmt-select:focus { border-color: #93c5fd; }
.fmt-swatches { display: flex; align-items: center; gap: 3px; }
.fmt-swatch {
    width: 18px; height: 18px;
    border-radius: 3px; border: 1.5px solid transparent;
    cursor: pointer; transition: transform 0.1s;
    padding: 0;
}
.fmt-swatch:hover { transform: scale(1.2); }
.fmt-swatch-light { border-color: #d1d5db; }
.fmt-color-input {
    width: 28px; height: 24px;
    border: 1px solid #e2e8f0; border-radius: 4px;
    padding: 1px; cursor: pointer; background: #fff;
}
.doc-body-editable, .inv-notes-editable {
    outline: none;
    font-family: inherit; line-height: 1.8;
    color: #334155;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.doc-body-editable { font-size: 15px; min-height: 560px; }
.inv-notes-editable {
    font-size: 13px; min-height: 72px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
}
.inv-notes-editable:focus { border-color: #3b82f6; }
.doc-body-editable:empty::before,
.inv-notes-editable:empty::before {
    content: attr(data-placeholder);
    color: #d1d5db;
    font-style: italic;
    pointer-events: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .inv-header { flex-direction: column; gap: 16px; }
    .inv-meta-block { flex: auto; text-align: left; }
    .inv-doc-title { text-align: left; font-size: 28px; }
    .inv-input-meta { text-align: left; }
    .fd-paper { padding: 32px 24px; }
    .inv-totals-row { width: 100%; }
    .fd-filename-input { width: 140px; }
    .drive-sidecar { display: none; }
    .drive-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
</style>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', path='js/vendor/findrive.js') }}"></script>
{% endblock %}