/* ==========================================================================
   components.css: forms, buttons, tables, badges, cards, pipeline, FAQ,
   dialog, bar chart and the section menu
   ========================================================================== */

/* ---- forms ---- */
.field{margin-bottom:16px;}
.field-label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:var(--ink-soft);}
.input-box{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-soft);font-size:13px;transition:border-color .15s,box-shadow .15s;}
input.input-box,select.input-box,textarea.input-box{color:var(--ink);}
input.input-box:focus,select.input-box:focus,textarea.input-box:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.input-box::placeholder{color:var(--ink-faint);}
select.input-box{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;background:var(--surface) 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='%2364748B' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;}
textarea.input-box{display:block;min-height:96px;resize:vertical;}
.field-error{margin-bottom:12px;padding:10px 12px;border:1px solid #FECACA;border-radius:var(--radius-sm);background:var(--red-soft);color:var(--red);font-size:12.5px;font-weight:500;}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;padding:20px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-alt);color:var(--ink-soft);font-size:13px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.dropzone:hover{border-color:var(--blue);background:var(--brand-soft);}
.dropzone svg{opacity:.6;}
.mockup-frame{display:flex;align-items:center;justify-content:center;height:210px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-alt);color:var(--ink-faint);font-size:12.5px;}
.check-line{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #BBF7D0;border-radius:var(--radius-sm);background:var(--green-soft);color:var(--green);font-size:12.5px;font-weight:500;}
.check-line svg{flex-shrink:0;}
.quote-card{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#fff,var(--surface-alt));box-shadow:var(--shadow-sm);}
.quote-amount{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.quote-sub{margin-top:4px;font-size:12px;color:var(--ink-soft);}
.summary-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:13px;color:var(--ink-soft);}
.summary-box small{font-size:11.5px;color:var(--ink-faint);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,filter .15s;}
.btn:hover{background:var(--surface-alt);border-color:var(--ink-faint);}
.btn.primary{background:var(--role,var(--blue));border-color:var(--role,var(--blue));color:#fff;box-shadow:var(--shadow-sm);}
.btn.primary:hover{filter:brightness(.92);}
.btn.ghost{background:transparent;color:var(--ink-soft);}
.btn.sm{padding:5px 12px;font-size:12px;}
.btn.block{width:100%;justify-content:center;}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}
a.btn{text-decoration:none;}

/* ---- tables ---- */
.table-scroll{position:relative;overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:13px;}
.data th{padding:10px 14px;background:var(--surface-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.data td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink);}
.data tbody tr:hover td{background:var(--surface-alt);}
.data td.empty{padding:24px 14px;text-align:center;color:var(--ink-soft);}
.table-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.table-toolbar .input-box{flex:1 1 200px;min-width:0;}
.table-toolbar select.input-box{flex:0 0 190px;}

/* ---- status badges ---- */
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;}
.status.progress{background:var(--amber-soft);color:var(--amber);}
.status.qc{background:var(--blue-soft);color:var(--brand);}
.status.delivered,.status.active{background:var(--green-soft);color:var(--green);}
.status.low{background:var(--red-soft);color:var(--red);}
.status.queued{background:var(--surface-alt);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line-strong);}
.status.ready{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px currentColor;}
.status.cancelled{background:var(--red-soft);color:var(--red);}
.status.pending{background:var(--amber-soft);color:var(--amber);box-shadow:inset 0 0 0 1px currentColor;}

/* ---- stat cards ---- */
.stat-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:28px;}
.stat{flex:1;min-width:150px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);}
.stat .num{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--role,var(--ink));}
.stat .lbl{margin-top:4px;font-size:12.5px;color:var(--ink-soft);}

/* ---- stock bars ---- */
.stock-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:12.5px;}
.stock-name{width:84px;flex-shrink:0;color:var(--ink-soft);}
.stock-track{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;}
.stock-fill{height:100%;border-radius:99px;}
.stock-fill.ok{background:#22C55E;} .stock-fill.mid{background:#F59E0B;} .stock-fill.low{background:#EF4444;}
.stock-val{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:80px;font-size:12px;font-weight:500;}
.stock-val.warn{color:var(--red);font-weight:600;}

/* ---- job pipeline ---- */
.pipeline{display:flex;gap:12px;margin-top:14px;}
.pipe-col{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-alt);padding-bottom:4px;}
.pipe-head{padding:11px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.job-card{display:block;width:calc(100% - 20px);margin:0 10px 10px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--role,var(--blue));border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--ink);font-size:12.5px;text-align:left;transition:transform .15s,box-shadow .15s;}
button.job-card{cursor:pointer;}
button.job-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.job-id{display:block;margin-bottom:2px;font-size:11px;font-weight:600;color:var(--ink-faint);}

/* ---- FAQ accordion ---- */
.faq-item{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .15s;}
.faq-item:hover{border-color:var(--line-strong);}
.faq-q{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border:0;border-radius:var(--radius);background:none;color:var(--ink);font-size:13px;font-weight:500;text-align:left;cursor:pointer;}
.faq-q svg{flex-shrink:0;color:var(--ink-faint);}
.faq-q[aria-expanded="true"] .icon-v{display:none;}
.faq-answer{padding:0 16px 14px 40px;color:var(--ink-soft);font-size:12.5px;}

/* ---- dialog ---- */
.dialog{width:min(440px,92vw);padding:0;border:0;border-radius:var(--radius);box-shadow:0 24px 60px rgba(15,23,42,.3);color:var(--ink);}
.dialog::backdrop{background:rgba(15,23,42,.45);}
.dialog form{padding:24px;}
.dialog h3{margin-bottom:16px;font-size:17px;font-weight:650;}
.dialog .input-box{width:100%;}
.dialog-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;}
.dialog-row span{color:var(--ink-soft);}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

/* ---- bar chart ---- */
.bar-chart{display:flex;align-items:flex-end;gap:16px;height:210px;margin-bottom:24px;padding:0 8px;border-bottom:1px solid var(--line);}
.bar-chart .bar{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;color:var(--ink-soft);}
.bar-chart .bar span{font-weight:600;color:var(--ink);}
.bar-chart .bar i{display:block;width:100%;max-width:56px;border-radius:6px 6px 0 0;background:var(--role,var(--blue));}
.bar-chart .bar em{margin-bottom:-24px;font-style:normal;}

/* ---- section menu (portal header) ---- */
.menu{position:relative;margin-left:8px;}
.menu-btn{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;}
.menu-btn:hover{background:var(--surface-alt);}
.menu-btn svg{transition:transform .15s;}
.menu-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.menu-list{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:240px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-md);}
.menu-list a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;color:var(--ink-soft);text-decoration:none;}
.menu-list a:hover{background:var(--surface-alt);color:var(--ink);}
.menu-list a.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}