.ops-guide { margin:0 0 26px; border:1px solid rgba(11,106,176,.2); border-radius:18px; background:linear-gradient(135deg,rgba(237,246,252,.95),rgba(255,255,255,.88)); box-shadow:0 10px 30px rgba(4,44,113,.06); overflow:hidden; }
.ops-guide summary { display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; list-style:none; color:var(--brand-navy); }
.ops-guide summary::-webkit-details-marker { display:none; }.ops-guide summary>span:nth-child(2) { display:grid; }.ops-guide summary small { color:var(--muted); font-weight:400; }
.ops-guide-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:11px; color:white; background:linear-gradient(145deg,var(--brand-blue),var(--brand-navy)); font-weight:900; }
.ops-guide-body { padding:0 18px 18px 64px; }.ops-guide-body ol { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0; margin:0; list-style:none; counter-reset:guide; }
.ops-guide-body li { display:grid; gap:3px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); counter-increment:guide; }.ops-guide-body li strong:before { content:counter(guide) ". "; color:var(--brand-orange-deep); }.ops-guide-body li span,.ops-guide-body p { color:var(--muted); font-size:12px; }.ops-guide-body p { margin:12px 0 0; }
.message-stack .notice { display:flex; align-items:flex-start; gap:11px; border-width:1px; box-shadow:0 8px 24px rgba(4,44,113,.06); }.message-icon { width:9px; height:9px; margin-top:8px; flex:0 0 auto; border-radius:50%; background:var(--brand-blue); }
.message-success { color:#05603a!important; border-color:#a6f4c5!important; background:#ecfdf3!important; }.message-success .message-icon { background:#12b76a; }.message-error,.message-danger { color:#912018!important; border-color:#fecdca!important; background:#fef3f2!important; }.message-error .message-icon,.message-danger .message-icon { background:#f04438; }.message-warning { color:#7a2e0e!important; border-color:#fedf89!important; background:#fffaeb!important; }.message-warning .message-icon { background:#f79009; }
.ops-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }.ops-header .page-heading { margin-bottom:0; }.ops-status { margin-top:7px; }
.sales-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.flow-step { min-height:128px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.flow-step b { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-soft); color:var(--muted); }
.flow-step strong { font-size:1.05rem; }.flow-step small { color:var(--muted); line-height:1.7; }
.flow-step.is-done { border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),var(--surface)); }
.flow-step.is-done b { color:#fff; background:var(--brand); }
.status-draft { color:#475467; background:#f2f4f7; }.status-submitted,.status-in_transit,.status-dispatched { color:#175cd3; background:#eff8ff; }.status-approved,.status-posted,.status-completed,.status-reconciled,.status-delivered { color:#067647; background:#ecfdf3; }.status-partially_approved,.status-partial { color:#854a0e; background:#fffaeb; }.status-rejected,.status-cancelled,.status-failed,.status-reversed { color:#b42318; background:#fef3f2; }
.status-submitted:before,.status-in_transit:before,.status-dispatched:before { background:#2e90fa; }.status-approved:before,.status-posted:before,.status-completed:before,.status-reconciled:before,.status-delivered:before { background:#12b76a; }.status-partially_approved:before,.status-partial:before { background:#f79009; }.status-rejected:before,.status-cancelled:before,.status-failed:before,.status-reversed:before { background:#f04438; }
.ops-panel { position:relative; }.ops-panel>h2 { display:flex; align-items:center; gap:9px; padding-bottom:13px; border-bottom:1px solid var(--line); color:var(--brand-navy); font-size:19px; }.ops-panel>h2:before { content:""; width:5px; height:20px; border-radius:9px; background:var(--brand-orange); }
.ops-form form,.ops-form { --form-gap:18px; }.ops-form form>p,.ops-form>p { padding-bottom:14px; border-bottom:1px solid rgba(4,44,113,.06); }.ops-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }.ops-danger { border-color:rgba(180,35,24,.18); background:rgba(254,243,242,.68); }.ops-danger summary { color:#912018; cursor:pointer; }.ops-danger button { background:#b42318; }
.ops-table tbody td small { display:block; color:var(--muted); }.ops-empty { padding:34px!important; text-align:center!important; color:var(--muted); white-space:normal; }
.ops-kpi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 24px; }.ops-kpi>div { padding:15px 17px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.72); }.ops-kpi dt { color:var(--muted); font-size:12px; }.ops-kpi dd { margin:2px 0 0; color:var(--brand-navy); font-size:18px; font-weight:800; }
@media (max-width:900px) { .ops-guide-body { padding-left:18px; }.ops-guide-body ol { grid-template-columns:1fr; }.ops-header { flex-direction:column; }.ops-kpi { grid-template-columns:1fr 1fr; }.sales-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .sales-flow { grid-template-columns:1fr; }.flow-step { min-height:auto; } }
@media (max-width:680px) { .ops-table thead { display:none; }.ops-table,.ops-table tbody,.ops-table tr,.ops-table td { display:block; width:100%; }.ops-table tr { padding:10px 14px; border-bottom:1px solid var(--line); }.ops-table td { display:grid; grid-template-columns:minmax(94px,38%) 1fr; gap:12px; padding:8px 0; border:0; white-space:normal; text-align:left; }.ops-table td:before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:700; text-align:right; }.ops-table td[colspan] { display:block; }.ops-actions>.button,.ops-actions>button,.ops-actions>form { width:100%; }.ops-actions form button { width:100%; }.ops-kpi { grid-template-columns:1fr; }.ops-guide summary small { display:none; } }
@media (max-width:420px) { .ops-guide summary { padding:12px; }.ops-guide-body { padding:0 12px 12px; }.card { padding:19px; }.page-heading p { font-size:14px; }.ops-table tr { padding-inline:10px; } }