/* PDF Fill & Sign — Echoterra Communications */

:root {
    --bg-dark: #0f1117;
    --bg-surface: #1a1d27;
    --bg-elevated: #232734;
    --bg-input: #2a2e3d;
    --border: #333849;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0b0;
    --text-muted: #6b7280;
    --accent: #4a7cff;
    --accent-hover: #5d8cff;
    --accent-glow: rgba(74, 124, 255, 0.25);
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --tech-color: #22c55e;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
    --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.5; }
#app { display: flex; flex-direction: column; height: 100vh; }

/* === Login === */
#loginScreen { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,#0f1117,#1a1d27,#0f1117); }
.login-card { width:100%; max-width:380px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; box-shadow:var(--shadow); }
.login-logo { font-size:40px; margin-bottom:12px; }
.login-card h1 { font-size:22px; font-weight:700; margin-bottom:2px; }
.login-sub { color:var(--text-secondary); font-size:13px; margin-bottom:24px; }

.form-group { margin-bottom:16px; text-align:left; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px; }
.form-group input, .form-group select, .form-select { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-size:14px; outline:none; transition:border-color var(--transition); }
.form-group input:focus { border-color:var(--accent); }
.form-group small { display:block; margin-top:4px; font-size:11px; color:var(--text-muted); }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elevated); color:var(--text-primary); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); white-space:nowrap; }
.btn:hover { background:var(--bg-input); border-color:var(--text-muted); }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-lg { padding:12px 28px; font-size:15px; }
.btn-block { display:flex; width:100%; justify-content:center; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-outline { background:transparent; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }

/* === Toolbar === */
#toolbar { display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 12px; background:var(--bg-surface); border-bottom:1px solid var(--border); z-index:100; flex-shrink:0; }
.toolbar-left,.toolbar-center,.toolbar-right { display:flex; align-items:center; gap:8px; }
.toolbar-center { position:absolute; left:50%; transform:translateX(-50%); }
.logo { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; white-space:nowrap; }
.logo-icon { font-size:18px; }

.tool-btn { display:flex; align-items:center; justify-content:center; gap:3px; min-width:36px; height:36px; padding:0 8px; border:1px solid transparent; border-radius:var(--radius); background:transparent; color:var(--text-secondary); cursor:pointer; transition:all var(--transition); font-size:12px; font-weight:500; }
.tool-btn:hover { background:var(--bg-elevated); color:var(--text-primary); }
.tool-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.tool-btn-tech { color:var(--tech-color); border:1px solid rgba(34,197,94,0.3); }
.tool-btn-tech:hover { background:rgba(34,197,94,0.1); color:var(--tech-color); }
.tool-btn-tech.active { background:var(--tech-color); color:#fff; border-color:var(--tech-color); }
.tool-label { font-size:11px; }
.tool-divider { width:1px; height:24px; background:var(--border); margin:0 2px; }
.page-nav,.zoom-controls { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-secondary); }

/* === Document List === */
#listScreen { flex:1; overflow:auto; padding:24px; }
.list-container { max-width:900px; margin:0 auto; }
.list-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.list-header h2 { font-size:20px; margin-bottom:2px; }
.list-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.user-info { font-size:12px; color:var(--text-muted); }

.doc-list { display:flex; flex-direction:column; gap:6px; }
.doc-item { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all var(--transition); }
.doc-item:hover { border-color:var(--accent); background:var(--bg-elevated); }
.doc-item-info { flex:1; }
.doc-item-title { font-weight:600; font-size:14px; }
.doc-item-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.doc-item-status { padding:2px 10px; border-radius:12px; font-size:10px; font-weight:700; text-transform:uppercase; }
.status-draft { background:var(--bg-input); color:var(--text-secondary); }
.status-signed { background:rgba(245,158,11,0.15); color:var(--warning); }
.status-completed { background:rgba(34,197,94,0.15); color:var(--success); }
.doc-empty { text-align:center; padding:60px; color:var(--text-muted); font-size:14px; }

/* === Upload === */
#uploadScreen { flex:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.upload-area { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:500px; padding:50px 40px; border:2px dashed var(--border); border-radius:var(--radius-lg); background:var(--bg-surface); text-align:center; cursor:pointer; transition:all .3s; }
.upload-area:hover,.upload-area.dragover { border-color:var(--accent); background:rgba(74,124,255,0.04); }
.upload-icon { font-size:48px; }
.upload-area h2 { font-size:20px; }
.upload-area p { color:var(--text-secondary); font-size:13px; }
.upload-hint { font-size:11px !important; color:var(--text-muted) !important; }

/* === Editor === */
#editorScreen { flex:1; display:flex; overflow:hidden; }
#pdfViewport { flex:1; overflow:auto; padding:20px; background:var(--bg-dark); display:flex; justify-content:center; }
#pdfContainer { position:relative; display:flex; flex-direction:column; gap:10px; align-items:center; }

.pdf-page-wrapper { position:relative; background:#fff; box-shadow:0 2px 16px rgba(0,0,0,0.4); border-radius:2px; }
.pdf-page-wrapper canvas { display:block; }
.annotation-layer { position:absolute; top:0; left:0; width:100%; height:100%; cursor:crosshair; z-index:10; }
.annotation-layer.tool-select { cursor:default; }

/* === Annotations === */
.annotation { position:absolute; cursor:move; user-select:none; z-index:20; transition:box-shadow .15s; }
.annotation:hover,.annotation.selected { box-shadow:0 0 0 2px var(--accent); }
.annotation.selected { z-index:30; }

.annotation-text input,.annotation-date input { width:100%; height:100%; border:none; background:rgba(74,124,255,0.08); color:#000; font-size:14px; padding:2px 6px; outline:none; }
.annotation-text input:focus,.annotation-date input:focus { background:rgba(74,124,255,0.15); }
.annotation-checkbox { width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.annotation-checkbox input[type="checkbox"] { width:18px; height:18px; cursor:pointer; }
.annotation-signature img,.annotation-initials img { width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* Tech annotations get a green accent */
.annotation.tech-field { border-left:3px solid var(--tech-color); }
.annotation.tech-field .tech-label { position:absolute; top:-16px; left:0; font-size:9px; font-weight:700; color:var(--tech-color); text-transform:uppercase; white-space:nowrap; }

.draw-canvas { position:absolute; top:0; left:0; z-index:15; cursor:crosshair; }

.resize-handle { position:absolute; width:10px; height:10px; background:var(--accent); border:1px solid #fff; border-radius:2px; z-index:40; }
.resize-handle.se { bottom:-5px; right:-5px; cursor:nwse-resize; }
.resize-handle.sw { bottom:-5px; left:-5px; cursor:nesw-resize; }
.resize-handle.ne { top:-5px; right:-5px; cursor:nesw-resize; }
.resize-handle.nw { top:-5px; left:-5px; cursor:nwse-resize; }

.annotation-delete { position:absolute; top:-12px; right:-12px; width:22px; height:22px; background:var(--danger); color:#fff; border:2px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; z-index:50; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,0.3); }

/* === Modals === */
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-content { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); width:95%; max-width:540px; box-shadow:var(--shadow); overflow:hidden; }
.modal-sm { max-width:420px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:15px; font-weight:600; }
.modal-close { background:none; border:none; color:var(--text-secondary); font-size:24px; cursor:pointer; padding:0 4px; line-height:1; }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }

/* Signature modal */
.sig-tabs { display:flex; gap:4px; margin-bottom:14px; padding:4px; background:var(--bg-dark); border-radius:var(--radius); }
.sig-tab { flex:1; padding:8px; background:transparent; border:none; border-radius:6px; color:var(--text-secondary); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); }
.sig-tab:hover { color:var(--text-primary); }
.sig-tab.active { background:var(--accent); color:#fff; }
.sig-panel { display:none; }
.sig-panel.active { display:block; }
#sigCanvas { width:100%; height:200px; background:#fff; border-radius:var(--radius); cursor:crosshair; touch-action:none; }
.sig-draw-opts { display:flex; align-items:center; gap:12px; margin-top:10px; font-size:12px; color:var(--text-secondary); }
.sig-draw-opts input[type="color"] { width:30px; height:26px; border:1px solid var(--border); border-radius:4px; background:var(--bg-input); cursor:pointer; padding:0; }
.sig-draw-opts input[type="range"] { width:70px; }
.sig-type-input { width:100%; padding:12px; background:#fff; color:#000; border:1px solid var(--border); border-radius:var(--radius); font-size:24px; outline:none; margin-bottom:12px; }
.sig-font-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.sig-font-option { padding:12px; background:#fff; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; text-align:center; color:#001a66; font-size:22px; transition:all var(--transition); }
.sig-font-option:hover { border-color:var(--accent); }
.sig-font-option.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.sig-upload-zone { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px; border:2px dashed var(--border); border-radius:var(--radius); text-align:center; color:var(--text-secondary); }
.sig-save-check { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.sig-save-check input { width:16px; height:16px; }

/* Manage signature modal */
.manage-sig-section { margin-bottom:20px; }
.manage-sig-section h4 { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.manage-sig-preview { min-height:80px; background:#fff; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.manage-sig-preview img { max-width:100%; max-height:80px; object-fit:contain; }
.manage-sig-preview .empty { color:#999; font-size:13px; }
.manage-sig-actions { display:flex; gap:6px; }
.manage-sig-hint { font-size:11px; color:var(--text-muted); line-height:1.5; margin-top:8px; }

/* === Loading & Toast === */
.overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,17,23,0.85); backdrop-filter:blur(4px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:2000; }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.toast-container { position:fixed; bottom:20px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:6px; }
.toast { padding:10px 18px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); font-size:13px; max-width:340px; animation:toastIn .3s ease; }
.toast-success { border-left:3px solid var(--success); }
.toast-error { border-left:3px solid var(--danger); }
.toast-info { border-left:3px solid var(--accent); }
@keyframes toastIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* === Responsive === */
@media(max-width:1000px) {
    .toolbar-center { position:static; transform:none; }
    #toolbar { flex-wrap:wrap; height:auto; padding:8px; gap:6px; }
}
@media(max-width:600px) {
    .tool-btn { min-width:32px; height:32px; padding:0 4px; }
    .tool-label { display:none; }
    .btn { padding:5px 10px; font-size:12px; }
    #pdfViewport { padding:8px; }
    .upload-area { padding:30px 20px; }
}