/* ============================================
   Form to PDF Converter - Stylesheet
   Advanced version with customization features
   ============================================ */

:root {
    --fp-primary: #FF8C00;
    --fp-primary-hover: #E67E00;
    --fp-white: #ffffff;
    --fp-gray-50: #f8fafc;
    --fp-gray-100: #f1f5f9;
    --fp-gray-200: #e2e8f0;
    --fp-gray-300: #cbd5e1;
    --fp-gray-400: #94a3b8;
    --fp-gray-500: #64748b;
    --fp-gray-600: #475569;
    --fp-gray-700: #334155;
    --fp-gray-800: #1e293b;
    --fp-gray-900: #0f172a;
    --fp-success: #22c55e;
    --fp-danger: #ef4444;
    --fp-info: #3b82f6;
    --fp-radius: 16px;
    --fp-radius-sm: 8px;
    --fp-radius-xs: 6px;
    --fp-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --fp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.tool-main-card { background: var(--fp-white); border-radius: var(--fp-radius); box-shadow: var(--fp-shadow); overflow: hidden; }

/* Options Bar */
.options-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: var(--fp-gray-50); border-bottom: 2px solid var(--fp-gray-200); flex-wrap: wrap; }
.options-bar-left, .options-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.option-inline { display: flex; align-items: center; gap: 6px; }
.option-inline-label { font-size: 11px; font-weight: 700; color: var(--fp-gray-500); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.select-inline { padding: 6px 28px 6px 10px; border: 2px solid var(--fp-gray-200); border-radius: var(--fp-radius-xs); font-size: 12px; font-weight: 600; color: var(--fp-gray-700); background: var(--fp-white); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.select-inline:focus { border-color: var(--fp-primary); }

/* Real-time Badge */
.realtime-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: rgba(34,197,94,0.1); border-radius: 20px; font-size: 10px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.realtime-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: realtimePulse 2s ease-in-out infinite; }
@keyframes realtimePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* Converter Grid */
.converter-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }
.converter-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.converter-panel + .converter-panel { border-left: 2px solid var(--fp-gray-200); }

/* Panel Header */
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--fp-gray-50); border-bottom: 1px solid var(--fp-gray-200); gap: 8px; }
.panel-header-left, .panel-header-right { display: flex; align-items: center; gap: 8px; }
.panel-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fp-gray-700); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; white-space: nowrap; }
.panel-label iconify-icon { font-size: 15px; color: var(--fp-primary); }

/* Panel Action Buttons */
.panel-action-btn { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border: 2px solid var(--fp-gray-200); border-radius: var(--fp-radius-xs); background: var(--fp-white); font-size: 11px; font-weight: 600; color: var(--fp-gray-600); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.panel-action-btn:hover { border-color: var(--fp-gray-300); color: var(--fp-gray-800); background: var(--fp-gray-50); }
.panel-action-btn.primary { background: var(--fp-primary); border-color: var(--fp-primary); color: var(--fp-white); }
.panel-action-btn.primary:hover { background: var(--fp-primary-hover); border-color: var(--fp-primary-hover); }
.panel-action-btn iconify-icon { font-size: 13px; }

/* Panel Body */
.panel-body { flex: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; }

/* Form Scroll Area */
.form-scroll-area { flex: 1; overflow-y: auto; }

/* ==========================================
   Customize PDF Section
   ========================================== */
.customize-section { border-bottom: 2px solid var(--fp-gray-200); }
.customize-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; cursor: pointer; user-select: none; background: var(--fp-gray-50); transition: background 0.15s ease; }
.customize-header:hover { background: var(--fp-gray-100); }
.customize-header .form-section-title { margin: 0; }
.customize-toggle-icon { font-size: 16px; color: var(--fp-gray-400); transition: transform 0.25s ease; }
.customize-section.collapsed .customize-toggle-icon { transform: rotate(-90deg); }
.customize-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.customize-section.collapsed .customize-body { display: none; }

/* Logo Upload */
.logo-upload-area { border: 2px dashed var(--fp-gray-300); border-radius: var(--fp-radius-xs); cursor: pointer; transition: all 0.15s ease; overflow: hidden; }
.logo-upload-area:hover, .logo-upload-area.dragover { border-color: var(--fp-primary); background: rgba(255,140,0,0.03); }
.logo-placeholder { display: flex; align-items: center; gap: 8px; padding: 14px 16px; }
.logo-placeholder iconify-icon { font-size: 22px; color: var(--fp-gray-400); }
.logo-placeholder span { font-size: 12px; color: var(--fp-gray-400); font-weight: 500; }
.logo-preview { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--fp-gray-50); }
.logo-preview img { max-height: 50px; max-width: 180px; object-fit: contain; border-radius: 4px; }
.logo-preview-info { flex: 1; min-width: 0; }
.logo-preview-name { font-size: 11px; font-weight: 600; color: var(--fp-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-preview-size { font-size: 10px; color: var(--fp-gray-400); }
.remove-logo-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; background: var(--fp-gray-200); color: var(--fp-gray-500); cursor: pointer; border-radius: 50%; padding: 0; transition: all 0.15s ease; flex-shrink: 0; }
.remove-logo-btn:hover { background: var(--fp-danger); color: white; }
.remove-logo-btn iconify-icon { font-size: 14px; }

/* Customize Row */
.customize-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.color-option { display: flex; flex-direction: column; gap: 4px; }
.color-input-wrapper { display: flex; align-items: center; gap: 6px; }
.color-input-wrapper input[type="color"] { width: 32px; height: 32px; border: 2px solid var(--fp-gray-200); border-radius: 6px; cursor: pointer; padding: 2px; background: transparent; }
.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.color-input-wrapper input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
.color-hex { font-size: 10px; font-weight: 700; color: var(--fp-gray-500); font-family: 'Courier New', monospace; text-transform: uppercase; }
.font-option { display: flex; flex-direction: column; gap: 4px; }
.font-option .field-select { min-width: 130px; padding: 6px 28px 6px 10px; font-size: 12px; }

/* Color Presets */
.color-presets { display: flex; align-items: center; gap: 6px; }
.color-presets-label { font-size: 10px; font-weight: 600; color: var(--fp-gray-400); text-transform: uppercase; white-space: nowrap; }
.color-preset { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fp-gray-200); cursor: pointer; transition: all 0.15s ease; padding: 0; }
.color-preset:hover { transform: scale(1.15); border-color: var(--fp-gray-400); }
.color-preset.active { border-color: var(--fp-gray-800); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--fp-gray-800); }

/* Footer Input */
.customize-footer-group { display: flex; flex-direction: column; gap: 4px; }

/* ==========================================
   Form Container
   ========================================== */
.form-container { padding: 16px 20px; }
.form-section { margin-bottom: 20px; }
.form-section:last-child { margin-bottom: 0; }
.form-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.form-section-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fp-gray-700); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px 0; }
.form-section-header .form-section-title { margin-bottom: 0; }
.form-section-title iconify-icon { font-size: 13px; color: var(--fp-primary); }

/* Form Fields */
.form-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.field-full { width: 100%; }
.field-half { width: calc(50% - 5px); }
.field-third { width: calc(33.333% - 7px); }
.field-label { font-size: 11px; font-weight: 600; color: var(--fp-gray-500); text-transform: uppercase; letter-spacing: 0.3px; }
.field-input, .field-textarea, .field-select { width: 100%; padding: 8px 10px; border: 2px solid var(--fp-gray-200); border-radius: var(--fp-radius-xs); font-size: 13px; color: var(--fp-gray-800); background: var(--fp-white); outline: none; transition: border-color 0.15s ease; font-family: inherit; box-sizing: border-box; }
.field-input:focus, .field-textarea:focus, .field-select:focus { border-color: var(--fp-primary); }
.field-input::placeholder, .field-textarea::placeholder { color: var(--fp-gray-400); }
.field-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.field-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; }

/* ==========================================
   Items Table
   ========================================== */
.items-table-wrapper { overflow-x: auto; }
.items-table { border: 2px solid var(--fp-gray-200); border-radius: var(--fp-radius-xs); overflow: hidden; min-width: 100%; }
.items-header { display: flex; align-items: center; padding: 8px 10px; background: var(--fp-gray-800); gap: 8px; min-width: fit-content; }
.items-header span { font-size: 10px; font-weight: 700; color: var(--fp-white); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.item-col-desc { flex: 1; min-width: 120px; }
.item-col-qty { width: 55px; text-align: center; }
.item-col-rate { width: 75px; text-align: center; }
.item-col-amount { width: 75px; text-align: right; }
.item-col-action { width: 30px; }
.item-col-extra { width: 90px; display: flex; align-items: center; gap: 2px; }
.extra-col-name { background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; color: var(--fp-white); font-size: 10px; font-weight: 700; padding: 2px 4px; width: 60px; outline: none; text-transform: uppercase; }
.extra-col-name:focus { border-color: var(--fp-primary); }
.extra-col-name::placeholder { color: rgba(255,255,255,0.4); }
.remove-col-btn { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); cursor: pointer; border-radius: 3px; padding: 0; font-size: 10px; transition: all 0.15s ease; }
.remove-col-btn:hover { background: var(--fp-danger); color: white; }
.item-row { display: flex; align-items: center; padding: 6px 10px; gap: 8px; border-bottom: 1px solid var(--fp-gray-100); min-width: fit-content; }
.item-row:last-child { border-bottom: none; }
.item-input { padding: 6px 8px; border: 1.5px solid var(--fp-gray-200); border-radius: 4px; font-size: 12px; color: var(--fp-gray-800); background: var(--fp-white); outline: none; font-family: inherit; box-sizing: border-box; }
.item-input:focus { border-color: var(--fp-primary); }
.item-desc { flex: 1; min-width: 120px; }
.item-qty { width: 55px; text-align: center; }
.item-rate { width: 75px; text-align: center; }
.item-extra { width: 90px; }
.item-amount { width: 75px; text-align: right; font-size: 12px; font-weight: 600; color: var(--fp-gray-700); font-family: 'Courier New', monospace; white-space: nowrap; }
.remove-item-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fp-gray-400); cursor: pointer; border-radius: 4px; padding: 0; transition: all 0.15s ease; flex-shrink: 0; }
.remove-item-btn:hover { color: var(--fp-danger); background: rgba(239,68,68,0.1); }
.remove-item-btn iconify-icon { font-size: 14px; }
.items-actions { display: flex; gap: 8px; }
.add-item-btn, .add-col-btn { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border: 2px dashed var(--fp-gray-300); border-radius: var(--fp-radius-xs); background: transparent; font-size: 11px; font-weight: 600; color: var(--fp-gray-500); cursor: pointer; transition: all 0.15s ease; }
.add-item-btn:hover, .add-col-btn:hover { border-color: var(--fp-primary); color: var(--fp-primary); background: rgba(255,140,0,0.04); }
.add-item-btn iconify-icon, .add-col-btn iconify-icon { font-size: 13px; }
.add-col-btn { border-style: dotted; }

/* ==========================================
   PDF Preview
   ========================================== */
.pdf-preview-frame { flex: 1; width: 100%; border: none; background: var(--fp-gray-100); }
.empty-preview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; }
.empty-preview iconify-icon { font-size: 48px; color: var(--fp-gray-300); }
.empty-preview .empty-title { font-size: 14px; font-weight: 600; color: var(--fp-gray-500); margin: 0; }
.empty-preview .empty-desc { font-size: 12px; color: var(--fp-gray-400); margin: 0; max-width: 250px; line-height: 1.5; }

/* ==========================================
   Toast
   ========================================== */
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast { background: var(--fp-gray-900); color: var(--fp-white); padding: 14px 20px; border-radius: var(--fp-radius-sm); box-shadow: var(--fp-shadow-lg); display: flex; align-items: center; gap: 12px; min-width: 280px; pointer-events: auto; animation: toastSlideIn 0.3s ease forwards; }
.toast iconify-icon { font-size: 18px; flex-shrink: 0; }
.toast-message { flex: 1; font-size: 14px; font-weight: 500; }
.toast.success { background: var(--fp-success); }
.toast.error { background: var(--fp-danger); }
.toast.info { background: var(--fp-primary); }
.toast.hiding { opacity: 0; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.4s ease; }
@keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1024px) {
    .converter-grid { grid-template-columns: 1fr; min-height: auto; }
    .converter-panel + .converter-panel { border-left: none; border-top: 2px solid var(--fp-gray-200); }
    .panel-body { min-height: 350px; }
    .pdf-preview-frame { min-height: 500px; }
}
@media (max-width: 768px) {
    .options-bar { padding: 12px 16px; gap: 10px; }
    .options-bar-left, .options-bar-right { gap: 10px; }
    .panel-header { padding: 10px 14px; flex-wrap: wrap; }
    .form-container { padding: 12px 14px; }
    .customize-body { padding: 12px 14px; }
    .field-half, .field-third { width: 100%; }
    .customize-row { flex-direction: column; gap: 10px; }
    .color-presets { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .options-bar { flex-direction: column; align-items: flex-start; }
    .panel-action-btn span { display: none; }
    .realtime-badge { display: none; }
    .item-col-extra, .item-extra { width: 70px; }
    .extra-col-name { width: 45px; }
}