/* QRLens — ERP-Style Stylesheet
   IBM Plex Sans (text), JetBrains Mono (numbers)
   Black/white/gray. Status: green #1b8a2a, amber #c77d00, red #c62828 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{font-family:'IBM Plex Sans',-apple-system,sans-serif;background:#f5f5f5;color:#1a1a1a;line-height:1.5;min-height:100vh}
a{color:#1a1a1a;text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:'JetBrains Mono',monospace}

/* ── Top Bar ── */
.top-bar{background:#1a1a1a;color:#fff;height:48px;position:sticky;top:0;z-index:100;border-bottom:1px solid #333}
.top-bar-inner{max-width:1400px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:32px}
.logo{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:1px}
.logo span{font-weight:400;color:#888}
.top-bar-nav{display:flex;gap:4px;flex:1}
.top-bar-nav a{color:#aaa;font-size:13px;font-weight:500;padding:6px 14px;border-radius:2px;transition:all 0.15s;text-decoration:none}
.top-bar-nav a:hover{color:#fff;background:#333;text-decoration:none}
.top-bar-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.user-label{font-size:12px;color:#888}

/* ── Main ── */
.main-content{max-width:1400px;margin:0 auto;padding:24px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px}
.page-header h1{font-size:22px;font-weight:700;line-height:1.2}
.page-subtitle{font-size:13px;color:#888;margin-top:4px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;padding:8px 18px;border:2px solid transparent;cursor:pointer;transition:all 0.15s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.btn-primary:hover:not(:disabled){background:#333;border-color:#333}
.btn-secondary{background:#fff;color:#1a1a1a;border-color:#1a1a1a}
.btn-secondary:hover:not(:disabled){background:#f5f5f5}
.btn-danger{background:#fff;color:#c62828;border-color:#c62828}
.btn-danger:hover:not(:disabled){background:#c62828;color:#fff}
.btn-sm{font-size:12px;padding:4px 10px}
.btn-lg{font-size:14px;padding:10px 28px}
.btn-full{width:100%}

/* ── Badges ── */
.badge{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border:1px solid}
.badge-green{color:#1b8a2a;border-color:#1b8a2a;background:#f0faf1}
.badge-amber{color:#c77d00;border-color:#c77d00;background:#fefaf0}
.badge-red{color:#c62828;border-color:#c62828;background:#fef0f0}

/* ── Tables ── */
.table-wrapper{overflow-x:auto;background:#fff;border:1px solid #e0e0e0}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table thead{background:#1a1a1a;color:#fff}
.data-table th{padding:10px 14px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.data-table td{padding:8px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.data-table tbody tr:nth-child(even){background:#fafafa}
.data-table tbody tr:hover{background:#f0f0f0}
.col-num,.data-table th.col-num,.data-table td.col-num{text-align:right;font-family:'JetBrains Mono',monospace}
.col-id,.data-table th.col-id,.data-table td.col-id{width:50px;text-align:center}
.col-actions,.data-table th.col-actions,.data-table td.col-actions{width:80px;text-align:right}
.col-actions .btn{margin-left:4px}
.link-dark{color:#1a1a1a;font-weight:600;text-decoration:none}
.link-dark:hover{text-decoration:underline}
.link-mono{font-family:'JetBrains Mono',monospace;font-size:12px;color:#1a1a1a}

/* ── Forms ── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#666;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;font-family:'IBM Plex Sans',sans-serif;font-size:14px;padding:8px 12px;border:2px solid #ddd;background:#fff;color:#1a1a1a;transition:border-color 0.15s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#1a1a1a}
.form-group input::placeholder{color:#bbb}
.form-help{display:block;font-size:12px;color:#999;margin-top:4px}
.req{color:#c62828}
.form-row{display:flex;gap:16px}
.form-row .flex-1{flex:1}
.form-row .flex-2{flex:2}
.form-section{border-top:1px solid #e0e0e0;padding-top:20px;margin-top:20px}
.form-section-header{margin-bottom:16px}
.form-section-header h3,.form-section h3{font-size:14px;font-weight:700}
.form-actions{margin-top:24px;padding-top:20px;border-top:1px solid #e0e0e0}

/* ── Field cards ── */
.field-card{border:1px solid #e0e0e0;margin-bottom:12px;background:#fff}
.field-card-top{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#fafafa;border-bottom:1px solid #e0e0e0}
.field-card-num{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#1a1a1a}
.field-remove-link{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:600;color:#c62828;background:none;border:none;cursor:pointer;padding:2px 0;letter-spacing:0.3px}
.field-remove-link:hover{text-decoration:underline}
.field-card-inputs{display:flex;gap:16px;padding:16px}
.field-card-inputs .form-group{margin-bottom:0}
.fci-label{flex:1}
.fci-value{flex:1}

/* ── Cards ── */
.card{background:#fff;border:1px solid #e0e0e0;padding:24px}

/* ── Action Grid ── */
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.action-card{background:#fff;border:1px solid #e0e0e0;padding:20px;display:flex;flex-direction:column}
.action-card h3{font-size:13px;font-weight:700;margin-bottom:6px}
.action-card p{font-size:12px;color:#888;margin-bottom:14px;line-height:1.4}
.action-card>.btn,.action-card>a.btn{width:100%;margin-top:auto}

/* ── Section Header ── */
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;margin-top:8px}
.section-header h2{font-size:15px;font-weight:700}

/* ── Field Tags ── */
.field-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.field-tag{font-size:12px;font-weight:600;padding:4px 12px;background:#fff;border:1px solid #ddd;color:#555}

/* ── Alert ── */
.alert{padding:10px 16px;margin-bottom:16px;font-size:13px;font-weight:500;border:1px solid}
.alert-success{color:#1b8a2a;border-color:#1b8a2a;background:#f0faf1}
.alert-error{color:#c62828;border-color:#c62828;background:#fef0f0}

/* ── Empty State ── */
.empty-state{text-align:center;padding:60px 20px;background:#fff;border:1px solid #e0e0e0}
.empty-state-icon{font-size:48px;color:#ddd;margin-bottom:16px}
.empty-state h3{font-size:16px;font-weight:700;margin-bottom:8px}
.empty-state p{font-size:13px;color:#888;margin-bottom:20px}

/* ── Overlay / Progress ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.overlay-box{background:#fff;border:2px solid #1a1a1a;padding:32px 40px;width:400px;max-width:90vw;text-align:center}
.overlay-box h3{font-size:16px;font-weight:700;margin-bottom:20px}
.progress-bar{height:8px;background:#e0e0e0;margin-bottom:12px;overflow:hidden}
.progress-bar-fill{height:100%;background:#1a1a1a;width:0%;transition:width 0.2s}
.inline-form{display:inline}

/* ── Login ── */
.page-login{background:#1a1a1a;display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-container{width:100%;max-width:380px;padding:20px}
.login-box{background:#fff;padding:36px 32px;border:2px solid #fff}
.login-header{text-align:center;margin-bottom:28px}
.login-header .logo{font-size:28px;color:#1a1a1a}
.login-header .logo span{color:#999}
.login-subtitle{font-size:13px;color:#999;margin-top:4px}

/* ── Responsive ── */
@media(max-width:900px){
    .action-grid{grid-template-columns:1fr}
    .form-row{flex-direction:column}
}
@media(max-width:640px){
    .main-content{padding:16px}
    .page-header{flex-direction:column}
    .top-bar-inner{padding:0 12px;gap:12px}
    .top-bar-nav a{padding:6px 8px;font-size:12px}
    .field-card-inputs{flex-direction:column;gap:0}
    .field-card-inputs .form-group{margin-bottom:12px}
}