/* ═══════════════════════════════════════════════
   OCR AutoInput — Style
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --ocr-primary:   #2563eb;
    --ocr-success:   #16a34a;
    --ocr-warning:   #d97706;
    --ocr-danger:    #dc2626;
    --ocr-bg:        #f8fafc;
    --ocr-card:      #ffffff;
    --ocr-border:    #e2e8f0;
    --ocr-text:      #1e293b;
    --ocr-muted:     #64748b;
    --ocr-radius:    10px;
    --ocr-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
}

/* ── Wrap ── */
.ocr-app {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 860px;
    margin: 0 auto;
    color: var(--ocr-text);
}

.ocr-wrap {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ocr-section {
    background: var(--ocr-card);
    border: 1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--ocr-shadow);
}

.ocr-section-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ocr-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 14px;
}

/* ── Type Tabs ── */
.ocr-type-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ocr-type-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 2px solid var(--ocr-border);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--ocr-muted);
}
.ocr-type-btn:hover { border-color: var(--ocr-primary); color: var(--ocr-primary); }
.ocr-type-btn.active {
    background: var(--ocr-primary);
    border-color: var(--ocr-primary);
    color: #fff;
}

/* ── Dropzone ── */
.ocr-dropzone {
    border: 2px dashed var(--ocr-border);
    border-radius: var(--ocr-radius);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.ocr-dropzone:hover, .ocr-dropzone.dragging {
    border-color: var(--ocr-primary);
    background: #eff6ff;
}
.ocr-dropzone-inner { text-align: center; padding: 20px; }
.ocr-upload-icon { font-size: 40px; margin-bottom: 8px; }
.ocr-dropzone-inner p { margin: 4px 0; color: var(--ocr-muted); font-size: 14px; }
.ocr-hint { font-size: 12px !important; color: #94a3b8 !important; }

#ocr-preview {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 8px;
}

/* ── Buttons ── */
.ocr-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.ocr-btn:disabled { opacity: .5; cursor: not-allowed; }
.ocr-btn-primary { background: var(--ocr-primary); color: #fff; }
.ocr-btn-primary:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); }
.ocr-btn-success { background: var(--ocr-success); color: #fff; }
.ocr-btn-success:hover:not(:disabled) { background: #15803d; }
.ocr-btn-ghost { background: transparent; border: 2px solid var(--ocr-border); color: var(--ocr-muted); }
.ocr-btn-ghost:hover { border-color: #94a3b8; color: var(--ocr-text); }

.ocr-actions-top, .ocr-actions-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Status ── */
.ocr-status { font-size: 14px; font-weight: 600; }
.ocr-status-success { color: var(--ocr-success); }
.ocr-status-error   { color: var(--ocr-danger); }
.ocr-status-warn    { color: var(--ocr-warning); }
.ocr-status-loading { color: var(--ocr-primary); }

/* ── Fields ── */
.ocr-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .ocr-fields-grid { grid-template-columns: 1fr; } }

.ocr-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ocr-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ocr-field-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--ocr-border);
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ocr-text);
    transition: border .15s;
    box-sizing: border-box;
}
.ocr-field-input:focus { outline: none; border-color: var(--ocr-primary); }
.ocr-field-input.filled { border-color: var(--ocr-success); color: var(--ocr-success); }

/* ── History ── */
.ocr-history-item {
    padding: 10px 14px;
    border: 1px solid var(--ocr-border);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    background: var(--ocr-bg);
}

/* ── Alert ── */
.ocr-alert {
    padding: 14px 18px;
    border-radius: var(--ocr-radius);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.ocr-alert-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }

/* ── Admin ─────────────────────────────────────── */
.ocr-card {
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--ocr-shadow);
}
.ocr-card h2 { margin-top: 0; font-size: 17px; }
.ocr-card-info { background: #f0f9ff; border-color: #bae6fd; }
.ocr-desc { color: var(--ocr-muted); font-size: 14px; margin-bottom: 16px; }

.ocr-input-wrap { display: flex; gap: 8px; align-items: center; }
.ocr-api-input { font-family: monospace !important; font-size: 13px !important; flex: 1; }
.ocr-toggle-key { white-space: nowrap; }
.ocr-shortcode { background: #f1f5f9; padding: 6px 12px; border-radius: 6px; font-size: 15px; }

.ocr-steps { padding-left: 20px; }
.ocr-steps li { margin-bottom: 8px; font-size: 14px; line-height: 1.6; }

.ocr-stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ocr-stat {
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: 8px;
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    box-shadow: var(--ocr-shadow);
}
.ocr-stat-label { font-size: 12px; color: var(--ocr-muted); font-weight: 600; }
.ocr-stat-num { font-size: 24px; font-weight: 700; color: var(--ocr-primary); }

.ocr-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}
.ocr-select { border-radius: 6px !important; }

.ocr-table { border-radius: var(--ocr-radius); overflow: hidden; }
.ocr-field-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ocr-field-item { font-size: 12px; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; }
.ocr-delete-link { color: var(--ocr-danger) !important; font-size: 12px; }
.ocr-delete-link:hover { text-decoration: underline; }

.ocr-empty {
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    padding: 40px;
    text-align: center;
    color: var(--ocr-muted);
}

/* Badges */
.ocr-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.ocr-badge-green { background: #dcfce7; color: #15803d; }
.ocr-badge-red   { background: #fee2e2; color: #dc2626; }
.ocr-type-invoice { background: #fef3c7; color: #b45309; }
.ocr-type-ktp     { background: #dbeafe; color: #1d4ed8; }
.ocr-type-nota    { background: #dcfce7; color: #15803d; }
.ocr-type-surat   { background: #f3e8ff; color: #7c3aed; }
.ocr-edit-hint { font-weight: 400; font-size: 11px; color: #94a3b8; text-transform: none; letter-spacing: 0; }

.ocr-form-table th { vertical-align: top; padding-top: 14px; }
.ocr-btn-save { padding: 10px 24px !important; font-size: 14px !important; }

/* ── Free vs Premium ── */
.ocr-plan-badge {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ocr-plan-free    { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.ocr-plan-premium { background:#fefce8; border:1px solid #fde68a; color:#92400e; }

.ocr-alert-limit {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: var(--ocr-radius);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.ocr-upsell {
    background: linear-gradient(135deg, #fefce8, #fff7ed);
    border: 1px solid #fde68a;
    border-radius: var(--ocr-radius);
    padding: 16px 20px;
    font-size: 14px;
    color: #92400e;
    margin-top: 8px;
    text-align: center;
}

/* ── History table ── */
.ocr-history-table-wrap { overflow-x: auto; }
.ocr-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ocr-history-table th {
    background: var(--ocr-bg);
    padding: 9px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--ocr-muted);
    border-bottom: 2px solid var(--ocr-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ocr-history-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ocr-border);
    color: var(--ocr-text);
    vertical-align: middle;
}
.ocr-history-table tr:last-child td { border-bottom: none; }

/* ── Export buttons ── */
.ocr-btn-export {
    padding: 7px 14px !important;
    font-size: 12px !important;
    background: var(--ocr-bg);
    border: 1px solid var(--ocr-border);
    border-radius: 7px;
    color: var(--ocr-text);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all .15s;
}
.ocr-btn-export:hover { border-color: var(--ocr-primary); color: var(--ocr-primary); }
.ocr-btn-excel { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.ocr-btn-excel:hover { background: #dcfce7; }