@import url('/pdf-tools-design.css');
/* ===== Meta Wrap — LEFT = empty ad slot, RIGHT = compact tool column ===== */
.meta-wrap {
max-width: 1100px;
margin: 0 auto;
}
.meta-layout {
display: grid;
/* left = flexible empty space (AdSense), right = capped narrow tool column */
grid-template-columns: minmax(0, 1fr) minmax(330px, 480px);
gap: 28px;
align-items: start;
}
.meta-left {
/* intentionally empty — reserved for future ad unit */
min-height: 100%;
}
.meta-right {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ===== Compact shared card ===== */
.meta-form-card {
background: var(--surface, #fff);
border: 1.5px solid var(--border, #e5e8f0);
border-radius: 14px;
padding: 18px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .meta-form-card {
background: #1a2235;
border-color: #1e2a40;
}
/* common CSS hides .file-row-card by default → id selector forces Export card visible */
#fileRowCard { display: block; }
.meta-form-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border, #e5e8f0);
position: relative;
}
[data-theme="dark"] .meta-form-head { border-color: #1e2a40; }
.meta-form-icon { font-size: 1.2rem; line-height: 1; }
.meta-form-head h3 {
font-size: 0.9rem;
font-weight: 700;
color: var(--text, #0b0f1c);
margin: 0 0 3px;
}
.meta-form-head p {
font-size: 0.72rem;
color: var(--dim, #6b7280);
margin: 0;
line-height: 1.45;
}
[data-theme="dark"] .meta-form-head h3 { color: #e2e8f0; }
.meta-head-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* ===== File Info grid (compact) ===== */
.meta-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 10px;
}
.meta-info-item { display: flex; flex-direction: column; gap: 2px; }
.meta-info-item span:last-child {
font-size: 0.8rem;
font-weight: 700;
color: var(--text, #0b0f1c);
}
[data-theme="dark"] .meta-info-item span:last-child { color: #e2e8f0; }
.meta-info-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--dim, #9ca3af);
}
/* ===== Editable fields (compact) ===== */
.meta-field { margin-bottom: 12px; }
.meta-field:last-child { margin-bottom: 0; }
.meta-field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.meta-field label {
display: block;
font-size: 0.76rem;
font-weight: 700;
color: var(--text, #0b0f1c);
}
[data-theme="dark"] .meta-field label { color: #cbd5e1; }
.meta-field-hint { font-weight: 500; color: var(--dim, #6b7280); font-size: 0.7rem; }
.meta-field input[type="text"] {
width: 100%;
padding: 9px 12px;
border-radius: 8px;
border: 1.5px solid var(--border, #e5e8f0);
font-size: 0.84rem;
background: var(--surface2, #f7f8fc);
color: var(--text, #0b0f1c);
}
.meta-field input[type="text"]:focus {
outline: none;
border-color: var(--primary, #cc0000);
}
[data-theme="dark"] .meta-field input[type="text"] {
background: #111a2b; border-color: #1e2a40; color: #e2e8f0;
}
.meta-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* ===== Export card pieces ===== */
.meta-export-card .file-row { margin-bottom: 12px; }
.meta-edited-bar {
margin: 0 0 12px;
font-size: 0.72rem;
font-weight: 700;
color: var(--dim, #6b7280);
}
.meta-edited-bar .has-changes { color: var(--primary); }
.meta-saveas { margin: 0 0 12px; }
.meta-saveas label {
display: block;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--dim, #9ca3af);
margin-bottom: 5px;
}
.meta-saveas input[type="text"] {
width: 100%;
padding: 8px 12px;
border-radius: 8px;
border: 1.5px solid var(--border, #e5e8f0);
font-size: 0.82rem;
background: var(--surface2, #f7f8fc);
color: var(--text, #0b0f1c);
}
.meta-saveas input[type="text"]:focus { outline: none; border-color: var(--primary); }
[data-theme="dark"] .meta-saveas input[type="text"] {
background: #111a2b; border-color: #1e2a40; color: #e2e8f0;
}
#progressWrap { margin: 0 0 12px; }
#resultInfo {
margin: 0 0 12px;
padding: 9px 12px;
border-radius: 9px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.export-actions {
display: flex;
flex-direction: column;   /* stacked: big Save on top, Change file below */
gap: 8px;
}
.export-actions .add-more-btn {
width: 100%;
justify-content: center;
white-space: nowrap;
}
/* ===== THE SAVE BUTTON — dedicated class, can NEVER be hidden by common CSS ===== */
.meta-save-btn,
#btn.meta-save-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
width: 100%;
padding: 12px 14px !important;
border: none !important;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary, #cc0000), var(--primary-dark, #990000)) !important;
color: #fff !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(204, 0, 0, 0.25);
transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.meta-save-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(204, 0, 0, 0.32); }
.meta-save-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
/* ===== Field / head action buttons ===== */
.meta-clear-btn {
border: none;
background: transparent;
color: var(--dim, #9ca3af);
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
padding: 2px 4px;
}
.meta-clear-btn:hover { color: #ef4444; }
.meta-restore-btn {
padding: 6px 10px;
border-radius: 7px;
border: 1.5px solid var(--border, #e5e8f0);
background: var(--surface2, #f7f8fc);
color: var(--text, #0b0f1c);
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.meta-restore-btn:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .meta-restore-btn { background: #111a2b; color: #cbd5e1; }
.meta-remove-all-btn {
padding: 6px 10px;
border-radius: 7px;
border: 1.5px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.08);
color: #ef4444;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.meta-remove-all-btn:hover { background: rgba(239, 68, 68, 0.14); }
/* ===== Drag & drop state ===== */
.upload.drag-over {
border-color: var(--primary, #cc0000);
background: rgba(204, 0, 0, 0.04);
}
/* ===== Responsive ===== */
@media (max-width: 860px) {
/* single column + hide the empty ad slot so the tool uses full width */
.meta-layout { grid-template-columns: 1fr; gap: 0; }
.meta-left { display: none; }
}
@media (max-width: 560px) {
.meta-row-2col { grid-template-columns: 1fr; }
.meta-info-grid { grid-template-columns: repeat(2, 1fr); }
.meta-form-head { flex-wrap: wrap; }
.meta-head-actions { margin-left: 0; width: 100%; }
}