/* ─── LogiSysteem Portal CSS ─── */
.logi-portal { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 1100px; margin: 0 auto; }
.logi-portal-header { display: flex; justify-content: space-between; align-items: center; background: #185FA5; color: #fff; padding: 12px 20px; border-radius: 8px 8px 0 0; }
.logi-portal-logo { font-size: 18px; font-weight: 600; }
.logi-portal-user { font-size: 13px; display: flex; align-items: center; gap: 12px; }

/* Login */
.logi-login-box { max-width: 400px; margin: 40px auto; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 32px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.logi-login-logo { font-size: 24px; text-align: center; margin-bottom: 8px; }
.logi-login-box h2 { text-align: center; margin: 0 0 20px; font-size: 18px; }
.logi-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid #e0e0e0; }
.logi-tab { flex: 1; background: none; border: none; padding: 8px; font-size: 13px; cursor: pointer; color: #666; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.logi-tab.active { color: #185FA5; border-bottom-color: #185FA5; font-weight: 600; }
.logi-field { margin-bottom: 14px; }
.logi-field label { display: block; font-size: 13px; margin-bottom: 4px; color: #444; font-weight: 500; }
.logi-field input, .logi-field textarea { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.logi-field input:focus, .logi-field textarea:focus { border-color: #185FA5; outline: none; box-shadow: 0 0 0 2px #e6f1fb; }

/* Buttons */
.logi-btn-primary { width: 100%; padding: 10px; background: #185FA5; color: #fff; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.logi-btn-primary:hover { background: #13508a; }
.logi-btn-logout { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
.logi-btn-logout:hover { background: rgba(255,255,255,.25); }

/* Tabs portal */
.logi-portal-tabs { display: flex; background: #f6f7f7; border-bottom: 1px solid #e0e0e0; }
.logi-ptab { background: none; border: none; padding: 12px 20px; font-size: 14px; cursor: pointer; color: #555; border-bottom: 3px solid transparent; font-weight: 500; }
.logi-ptab.active { color: #185FA5; border-bottom-color: #185FA5; background: #fff; }
.logi-ptab-content { padding: 20px; background: #fff; }
.logi-ptab-content h2 { margin: 0 0 16px; font-size: 17px; }

/* Producten grid */
.logi-producten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.logi-product-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: box-shadow .2s; }
.logi-product-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.logi-product-card img { width: 100%; height: 130px; object-fit: cover; }
.logi-product-no-img { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: #f6f7f7; }
.logi-product-info { padding: 10px 12px; }
.logi-product-naam { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.logi-product-barcode, .logi-product-stelling { font-size: 11px; color: #888; margin-bottom: 2px; }
.logi-product-voorraad { font-size: 12px; color: #3B6D11; margin-bottom: 8px; }
.logi-product-voorraad.logi-danger { color: #A32D2D; }
.logi-product-bestellen { display: flex; align-items: center; gap: 6px; }
.logi-qty { width: 60px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }

/* Bestelling footer */
.logi-bestelling-footer { border-top: 1px solid #e0e0e0; padding-top: 16px; }
#logi-winkelwagen-samenvatting { background: #f6f7f7; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; min-height: 36px; }

/* Order cards portal */
.logi-order-card { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.logi-order-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f6f7f7; border-bottom: 1px solid #e0e0e0; font-size: 13px; }
.logi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.logi-table th { text-align: left; padding: 7px 14px; background: #f6f7f7; border-bottom: 1px solid #e0e0e0; }
.logi-table td { padding: 7px 14px; border-bottom: 1px solid #f0f0f0; }

/* Badges */
.logi-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px; }
.logi-badge--ok     { background: #EAF3DE; color: #3B6D11; }
.logi-badge--warn   { background: #FFF0CC; color: #7a4f00; }
.logi-badge--info   { background: #E6F1FB; color: #185FA5; }
.logi-badge--danger { background: #FCEBEB; color: #A32D2D; }

/* Feedback */
.logi-error   { background: #FCEBEB; color: #A32D2D; border: 1px solid #f5c6c6; border-radius: 5px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.logi-success { background: #EAF3DE; color: #3B6D11; border: 1px solid #c3e6cb; border-radius: 5px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.logi-muted   { color: #888; font-size: 13px; }