/* Sword Cricket — Purchase Orders — Dark Theme (matches Accounts Manager) */

.sc-po-wrap { max-width:1200px; margin:28px auto; font-family:'Outfit','Segoe UI',sans-serif; color:#e8f0fe; padding:0 24px 40px; -webkit-font-smoothing:antialiased; }

.sc-po-header { background:#111c35; border-bottom:1px solid #1e2d50; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; margin:-28px -24px 0; }
.sc-po-logo { display:flex; align-items:center; gap:12px; }
.sc-po-logo-icon { font-size:28px; color:#00e5ff; }
.sc-po-logo-title { font-family:'Bebas Neue','Outfit',sans-serif; font-size:20px; letter-spacing:2px; color:#00e5ff; }
.sc-po-logo-sub { font-size:11px; color:#6b7fa3; letter-spacing:1px; text-transform:uppercase; }
.sc-po-header-right { display:flex; align-items:center; gap:14px; }
.sc-po-date { font-size:13px; color:#6b7fa3; font-weight:500; }

.sc-po-tabs { display:flex; gap:4px; padding:16px 24px; background:#111c35; margin:0 -24px 24px; border-bottom:1px solid #1e2d50; flex-wrap:wrap; }
.sc-po-tab { background:transparent; border:1px solid transparent; color:#6b7fa3; padding:7px 14px; border-radius:6px; cursor:pointer; font-family:'Outfit','Segoe UI',sans-serif; font-size:13px; font-weight:500; transition:all .2s; letter-spacing:.5px; }
.sc-po-tab:hover { color:#e8f0fe; border-color:#1e2d50; }
.sc-po-tab.active { background:#00e5ff; color:#0b1120; font-weight:700; border-color:#00e5ff; }

.sc-po-btn { padding:10px 20px; border-radius:7px; font-family:'Outfit','Segoe UI',sans-serif; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .2s; letter-spacing:.5px; }
.sc-po-btn:disabled { opacity:.5; cursor:not-allowed; }
.sc-po-btn-primary { background:#00e5ff; color:#0b1120; }
.sc-po-btn-primary:hover { background:#33eeff; transform:translateY(-1px); }
.sc-po-btn-outline { background:transparent; border:1px solid #00e5ff; color:#00e5ff; }
.sc-po-btn-outline:hover { background:rgba(0,229,255,.1); }
.sc-po-btn-ghost { background:transparent; border:1px solid #1e2d50; color:#6b7fa3; }
.sc-po-btn-ghost:hover { color:#e8f0fe; border-color:#6b7fa3; }
.sc-po-btn-lg { padding:12px 36px; font-size:15px; }

.sc-po-btn-sm { padding:5px 12px; font-size:12px; font-weight:600; border-radius:6px; cursor:pointer; border:1px solid #1e2d50; background:transparent; color:#6b7fa3; transition:all .2s; font-family:'Outfit','Segoe UI',sans-serif; }
.sc-po-btn-sm:hover { border-color:#6b7fa3; color:#e8f0fe; }
.sc-po-btn-view { color:#00e5ff; border-color:rgba(0,229,255,.3); }
.sc-po-btn-view:hover { background:rgba(0,229,255,.1); }
.sc-po-btn-receive { color:#00e5a0; border-color:rgba(0,229,160,.3); }
.sc-po-btn-receive:hover { background:rgba(0,229,160,.1); }
.sc-po-btn-cancel { color:#ff5e7a; border-color:rgba(255,94,122,.3); }
.sc-po-btn-cancel:hover { background:rgba(255,94,122,.1); }
.sc-po-btn-icon { background:none; border:none; cursor:pointer; font-size:14px; color:#6b7fa3; padding:4px 8px; border-radius:4px; line-height:1; }
.sc-po-btn-icon:hover { color:#ff5e7a; background:rgba(255,94,122,.1); }

.sc-po-input { background:#182040; border:1px solid #1e2d50; color:#e8f0fe; border-radius:7px; padding:9px 12px; font-family:'Outfit','Segoe UI',sans-serif; font-size:14px; outline:none; transition:border-color .2s; width:100%; box-sizing:border-box; }
.sc-po-input:focus { border-color:#00e5ff; }
.sc-po-input::placeholder { color:#4a5f80; }
.sc-po-input option { background:#111c35; }
.sc-po-input-wide { width:100%; }

.sc-po-search { background:#182040; border:1px solid #1e2d50; color:#e8f0fe; border-radius:7px; padding:9px 14px; font-size:14px; min-width:240px; outline:none; font-family:'Outfit','Segoe UI',sans-serif; transition:border-color .2s; }
.sc-po-search:focus { border-color:#00e5ff; }
.sc-po-search::placeholder { color:#4a5f80; }

.sc-po-select { background:#182040; border:1px solid #1e2d50; color:#e8f0fe; border-radius:7px; padding:9px 12px; font-size:14px; cursor:pointer; outline:none; font-family:'Outfit','Segoe UI',sans-serif; }
.sc-po-select option { background:#111c35; }

.sc-po-num-input { width:90px; padding:7px 8px; background:#182040; border:1px solid #1e2d50; color:#e8f0fe; border-radius:6px; font-size:13px; text-align:right; font-weight:600; outline:none; font-family:'Space Mono',monospace; }
.sc-po-num-input:focus { border-color:#00e5ff; }

.sc-po-filters { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }

.sc-po-card { background:#111c35; border:1px solid #1e2d50; border-radius:10px; overflow:hidden; margin-bottom:20px; }
.sc-po-card-title { padding:14px 18px; font-size:14px; font-weight:700; color:#e8f0fe; border-bottom:1px solid #1e2d50; }
.sc-po-card-body { padding:18px; }

.sc-po-table { width:100%; border-collapse:collapse; font-size:13px; }
.sc-po-table th { text-align:left; padding:10px 12px; border-bottom:2px solid #1e2d50; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:#6b7fa3; }
.sc-po-table td { padding:10px 12px; border-bottom:1px solid #1e2d50; color:#e8f0fe; vertical-align:middle; }
.sc-po-table tbody tr:hover td { background:rgba(255,255,255,.02); }
.sc-po-table tbody tr:last-child td { border-bottom:none; }
.sc-po-table th.r, .sc-po-table td.r { text-align:right; }

.sc-po-sku { font-family:'Space Mono',monospace; font-size:11px; background:rgba(0,229,255,.1); padding:2px 7px; border-radius:4px; color:#00e5ff; }
.sc-po-price { font-weight:600; color:#00e5a0; font-family:'Space Mono',monospace; }
.sc-po-meta { font-size:12px; color:#6b7fa3; }
.sc-po-empty { text-align:center; color:#6b7fa3; padding:30px 12px !important; font-style:italic; }
.sc-po-empty-msg { text-align:center; color:#6b7fa3; padding:30px 14px; font-style:italic; font-size:13px; }
.sc-po-actions { display:flex; gap:6px; white-space:nowrap; }

.sc-po-status { display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px; }
.sc-po-status-ordered { background:rgba(0,229,255,.15); color:#00e5ff; }
.sc-po-status-partial { background:rgba(255,181,71,.15); color:#ffb547; }
.sc-po-status-received { background:rgba(0,229,160,.15); color:#00e5a0; }
.sc-po-status-cancelled { background:rgba(255,94,122,.15); color:#ff5e7a; }
.sc-po-pending { color:#ff5e7a; font-weight:600; }
.sc-po-done { color:#00e5a0; font-weight:600; }

.sc-po-product-search-row { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }

.sc-po-dropdown { position:relative; background:#111c35; border:1px solid #1e2d50; border-radius:8px; max-height:280px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.4); margin-bottom:16px; z-index:100; }
.sc-po-dd-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid #1e2d50; transition:background .1s; }
.sc-po-dd-item:last-child { border-bottom:none; }
.sc-po-dd-item:hover { background:rgba(0,229,255,.05); }
.sc-po-dd-incart { opacity:.4; }
.sc-po-dd-main { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
.sc-po-dd-sku { font-family:'Space Mono',monospace; font-size:11px; background:rgba(0,229,255,.1); padding:1px 6px; border-radius:3px; color:#00e5ff; }
.sc-po-dd-name { font-size:13px; font-weight:600; color:#e8f0fe; }
.sc-po-dd-meta { display:flex; justify-content:space-between; font-size:12px; color:#6b7fa3; }
.sc-po-dd-empty { padding:16px; text-align:center; color:#6b7fa3; font-size:13px; font-style:italic; }

.sc-po-charges-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media(max-width:640px){ .sc-po-charges-grid{grid-template-columns:1fr;} }
.sc-po-field label { display:block; font-size:12px; font-weight:600; color:#6b7fa3; margin-bottom:6px; text-transform:uppercase; letter-spacing:.8px; }
.sc-po-req { color:#ff5e7a; }

.sc-po-pay-modes { display:flex; gap:6px; flex-wrap:wrap; }
.sc-po-pay-mode { padding:8px 16px; border-radius:6px; border:1px solid #1e2d50; background:transparent; color:#6b7fa3; font-family:'Outfit','Segoe UI',sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all .2s; }
.sc-po-pay-mode:hover { border-color:#6b7fa3; color:#e8f0fe; }
.sc-po-pay-mode.active { background:#00e5ff; color:#0b1120; border-color:#00e5ff; font-weight:700; }
.sc-po-pay-ref-wrap { display:none; margin-top:10px; }
.sc-po-pay-ref-wrap.visible { display:block; }

.sc-po-totals-card { background:#111c35; }
.sc-po-totals { padding:18px 20px; }
.sc-po-total-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:#6b7fa3; }
.sc-po-grand-row { border-top:2px solid #1e2d50; margin-top:8px; padding-top:12px; font-size:16px; font-weight:800; color:#e8f0fe; }
.sc-po-grand-row span:last-child { font-family:'Space Mono',monospace; }
.sc-po-submit-row { padding:16px 20px; border-top:1px solid #1e2d50; display:flex; justify-content:flex-end; }

.sc-po-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:99999; display:flex; align-items:center; justify-content:center; }
.sc-po-modal-box { background:#111c35; border:1px solid #1e2d50; border-radius:12px; width:600px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.sc-po-modal-wide { width:900px; }
.sc-po-modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid #1e2d50; }
.sc-po-modal-header h2 { font-family:'Bebas Neue','Outfit',sans-serif; font-size:22px; letter-spacing:2px; color:#00e5ff; margin:0; }
.sc-po-modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:#6b7fa3; padding:4px 8px; border-radius:4px; line-height:1; }
.sc-po-modal-close:hover { color:#e8f0fe; }
.sc-po-modal-body { padding:20px 24px; }
.sc-po-modal-footer { padding:16px 24px; border-top:1px solid #1e2d50; display:flex; justify-content:flex-end; gap:10px; }
.sc-po-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:500px){ .sc-po-form-grid{grid-template-columns:1fr;} }

.sc-po-detail-header { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-bottom:20px; padding:14px 16px; background:#182040; border:1px solid #1e2d50; border-radius:8px; font-size:13px; color:#e8f0fe; }
.sc-po-detail-header strong { color:#6b7fa3; }
.sc-po-detail-totals { display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; padding:14px 16px; background:#182040; border:1px solid #1e2d50; border-radius:8px; font-size:13px; color:#6b7fa3; }
.sc-po-detail-grand { font-weight:800; color:#e8f0fe; font-size:15px; font-family:'Space Mono',monospace; }
.sc-po-row-done td { opacity:.4; }

.sc-po-toast { position:fixed; bottom:24px; right:24px; padding:12px 22px; border-radius:8px; font-size:13px; font-weight:600; z-index:100000; box-shadow:0 4px 16px rgba(0,0,0,.3); max-width:400px; font-family:'Outfit','Segoe UI',sans-serif; }
.sc-po-toast-success { background:rgba(0,229,160,.15); border:1px solid #00e5a0; color:#00e5a0; }
.sc-po-toast-error { background:rgba(255,94,122,.15); border:1px solid #ff5e7a; color:#ff5e7a; }
.sc-po-toast-warn { background:rgba(255,181,71,.15); border:1px solid #ffb547; color:#ffb547; }

@media(max-width:768px){
  .sc-po-header{flex-direction:column;align-items:flex-start;gap:10px;}
  .sc-po-filters{flex-direction:column;} .sc-po-search{min-width:100%;}
  .sc-po-table{font-size:12px;} .sc-po-table th,.sc-po-table td{padding:8px 10px;}
  .sc-po-detail-header{grid-template-columns:1fr;} .sc-po-modal-box{width:98vw;}
}