/* Stock Utility Card - Kobble.ng inspired theme
   Palette: cream #EFEEE7 · surface #F5F4F0 · leaf green #6F9C3E ·
   ink #1A202C / #2D3748 / #4A5568 · warm gray #6B6B60 / #9A9A8E · burnt orange #DA5A2A */

.suc-scope {
	--suc-bg: #EFEEE7;
	--suc-surface: #F5F4F0;
	--suc-white: #ffffff;
	--suc-primary: #557A30;   /* WCAG AA on white (was #6F9C3E, 3.2:1) */
	--suc-primary-dark: #46652A;
	--suc-primary-soft: #E9F0DE;
	--suc-ink: #1A202C;
	--suc-ink-2: #2D3748;
	--suc-ink-3: #4A5568;
	--suc-muted: #6B6B60;
	--suc-muted-2: #9A9A8E;
	--suc-border: #E3E1D8;
	--suc-accent: #DA5A2A;
	--suc-accent-soft: #FBEAE1;
	--suc-warn: #F59E0B;
	--suc-warn-soft: #FEF3C7;
	--suc-danger: #EF4444;
	--suc-danger-soft: #FDE8E8;
	--suc-radius: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
	color: var(--suc-ink-2);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.suc-scope *, .suc-scope *::before, .suc-scope *::after { box-sizing: border-box; }
.suc-scope h1,.suc-scope h2,.suc-scope h3,.suc-scope h4 { color: var(--suc-ink); margin: 0 0 .4em; line-height:1.25; }
.suc-scope a { color: var(--suc-primary-dark); text-decoration: none; }
.suc-scope a.suc-btn { color:#fff !important; } /* button labels always win over theme/link colors */
.suc-scope a.suc-btn.ghost { color: var(--suc-ink-2) !important; }
.suc-scope img { max-width: 100%; }

/* ---------- Layout ---------- */
#suc-app { background: var(--suc-bg); border-radius: var(--suc-radius); min-height: 640px; }
.suc-shell { display: flex; min-height: 640px; border-radius: var(--suc-radius); overflow: hidden; border: 1px solid var(--suc-border); background: var(--suc-bg); }
.suc-side {
	width: 224px; flex-shrink: 0; background: var(--suc-ink); color: #cbd2dc;
	display: flex; flex-direction: column; padding: 18px 12px;
}
.suc-side .suc-brand { display:flex; align-items:center; gap:10px; padding: 6px 10px 18px; color:#fff; font-weight:700; font-size:16px; }
.suc-side .suc-brand .suc-logo { width:34px;height:34px;border-radius:9px;background:var(--suc-primary);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;overflow:hidden; }
.suc-side .suc-brand img{width:100%;height:100%;object-fit:cover;border-radius:9px;}
.suc-nav-item {
	display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px 0;
	border-radius:9px; color:#aeb6c2; cursor:pointer; font-weight:500; font-size:14px;
	border:none; background:none; width:100%; text-align:left; transition: background .15s,color .15s;
}
.suc-nav-item:hover { background:#252c3a; color:#fff; }
.suc-nav-item.active { background: var(--suc-primary); color:#fff; }
.suc-nav-item .ico { width:20px; text-align:center; }
.suc-side .suc-side-foot { margin-top:auto; padding:12px 10px 4px; font-size:12px; color:#7d8594; }
.suc-side .suc-side-foot a { color:#aeb6c2; }
.suc-plan-chip { display:inline-block; background:#2b3345; color:#c6e3a0; font-size:11px; padding:2px 10px; border-radius:99px; margin-bottom:8px; }

.suc-main { flex:1; min-width:0; padding: 22px 26px; }
.suc-topbar { display:flex; align-items:center; gap:14px; margin-bottom: 20px; flex-wrap: wrap; }
.suc-topbar h1 { font-size:22px; margin:0; flex:1; }
.suc-search { position: relative; width: 300px; max-width: 100%; }
.suc-search input {
	width:100%; padding:10px 14px 10px 38px; border-radius: 99px; border:1px solid var(--suc-border);
	background: var(--suc-white); font-size:14px; outline:none;
}
.suc-search input:focus { border-color: var(--suc-primary); box-shadow: 0 0 0 3px var(--suc-primary-soft); }
.suc-search .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--suc-muted-2); }
.suc-search-results {
	position:absolute; top: calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--suc-border);
	border-radius:12px; box-shadow: 0 12px 32px rgba(26,32,44,.12); z-index: 60; overflow:hidden; max-height:340px; overflow-y:auto;
}
.suc-search-results .sr { padding:10px 14px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.suc-search-results .sr:hover { background: var(--suc-surface); }
.suc-search-results .sr small { color: var(--suc-muted); }

/* ---------- Cards / stats ---------- */
.suc-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.suc-stat { background: var(--suc-white); border:1px solid var(--suc-border); border-radius: var(--suc-radius); padding:16px 18px; }
.suc-stat .n { font-size:24px; font-weight:700; color:var(--suc-ink); }
.suc-stat .l { font-size:12px; color:var(--suc-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.suc-stat.green .n { color: var(--suc-primary-dark); }
.suc-stat.orange .n { color: var(--suc-accent); }
.suc-card { background: var(--suc-white); border:1px solid var(--suc-border); border-radius: var(--suc-radius); padding: 18px 20px; margin-bottom: 18px; }
.suc-card h2, .suc-card h3 { font-size: 15px; margin-bottom: 12px; display:flex; align-items:center; gap:8px; color: var(--suc-ink); }
.suc-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Tables ---------- */
.suc-table-wrap { overflow-x:auto; }
.suc-table { width:100%; border-collapse: collapse; font-size: 13.5px; }
.suc-table th {
	text-align:left; padding: 9px 12px; color: var(--suc-muted); font-size:11px; text-transform:uppercase;
	letter-spacing:.5px; border-bottom: 1px solid var(--suc-border); white-space:nowrap;
}
.suc-table td { padding: 10px 12px; border-bottom: 1px solid #edece5; vertical-align: middle; }
.suc-table tr:hover td { background: var(--suc-surface); }
.suc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.suc-table .clickable { cursor:pointer; }
.suc-empty { text-align:center; color:var(--suc-muted-2); padding: 34px 10px; }
.suc-empty .big { font-size: 34px; margin-bottom: 6px; }

/* ---------- Badges ---------- */
.suc-badge { display:inline-block; padding:3px 11px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.suc-badge.receive, .suc-badge.active, .suc-badge.success { background: var(--suc-primary-soft); color: var(--suc-primary-dark); }
.suc-badge.issue { background: var(--suc-accent-soft); color: var(--suc-accent); }
.suc-badge.transfer { background: #E4EDF7; color: #2B6CB0; }
.suc-badge.adjustment, .suc-badge.trial, .suc-badge.pending, .suc-badge.grace { background: var(--suc-warn-soft); color: #92400E; }
.suc-badge.low, .suc-badge.failed, .suc-badge.suspended, .suc-badge.expired, .suc-badge.negative { background: var(--suc-danger-soft); color: #B91C1C; }
.suc-badge.role { background:#EAEAF2; color:#4A5568; }

/* ---------- Buttons ---------- */
.suc-btn {
	display:inline-flex; align-items:center; gap:8px; padding: 10px 18px; border-radius: 9px; border: none;
	background: var(--suc-primary); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
	transition: background .15s, transform .05s; text-decoration:none;
}
.suc-btn:hover { background: var(--suc-primary-dark); color:#fff; }
.suc-btn:active { transform: translateY(1px); }
.suc-btn.ghost { background: transparent; color: var(--suc-ink-2); border:1px solid var(--suc-border); }
.suc-btn.ghost:hover { background: var(--suc-surface); }
.suc-btn.dark { background: var(--suc-ink); }
.suc-btn.dark:hover { background:#2D3748; }
.suc-btn.orange { background: var(--suc-accent); }
.suc-btn.orange:hover { background:#B8481F; }
.suc-btn.danger { background: var(--suc-danger); }
.suc-btn.sm { padding: 6px 12px; font-size: 12.5px; border-radius:7px; }
.suc-btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ---------- Forms ---------- */
.suc-field { margin-bottom: 13px; }
.suc-field label { display:block; font-size: 12.5px; font-weight:600; color: var(--suc-ink-3); margin-bottom: 5px; }
.suc-field label .req { color: var(--suc-accent); }
.suc-input, .suc-select, .suc-textarea {
	width:100%; padding: 10px 12px; border:1px solid var(--suc-border); border-radius: 9px;
	background: var(--suc-white); font-size: 14px; outline: none; color: var(--suc-ink-2); font-family: inherit;
}
.suc-input:focus, .suc-select:focus, .suc-textarea:focus { border-color: var(--suc-primary); box-shadow: 0 0 0 3px var(--suc-primary-soft); }
.suc-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.suc-form-grid .full { grid-column: 1 / -1; }
.suc-hint { font-size: 12px; color: var(--suc-muted-2); margin-top: 3px; }

/* ---------- Modal ---------- */
.suc-modal-overlay {
	position: fixed; inset: 0; background: rgba(26,32,44,.5); z-index: 99990;
	display:flex; align-items:flex-start; justify-content:center; padding: 4vh 16px; overflow-y:auto;
}
.suc-modal {
	background:#fff; border-radius: 16px; width: 620px; max-width: 100%;
	box-shadow: 0 24px 64px rgba(26,32,44,.25); animation: sucPop .18s ease-out;
}
@keyframes sucPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.suc-modal .m-head { display:flex; align-items:center; justify-content:space-between; padding: 18px 22px 0; }
.suc-modal .m-head h2, .suc-modal .m-head h3 { margin:0; font-size: 17px; }
.suc-modal .m-body { padding: 16px 22px 22px; }
.suc-modal .m-close { background:none;border:none;font-size:22px;color:var(--suc-muted-2);cursor:pointer;line-height:1; }
.suc-modal .m-foot { display:flex; justify-content:flex-end; gap:10px; padding: 0 22px 22px; }

/* ---------- Toast (high contrast - never blends with the page) ---------- */
.suc-toast {
	position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 99999;
	background: #1A202C; color: #ffffff !important; padding: 13px 24px; border-radius: 12px;
	font-size: 14.5px; font-weight: 600; line-height: 1.4; max-width: min(92vw, 480px); text-align: center;
	box-shadow: 0 12px 34px rgba(26,32,44,.45); border: 2px solid rgba(255,255,255,.25);
	animation: sucPop .18s ease-out;
}
.suc-toast.err { background: #B91C1C; border-color: #FCA5A5; }
.suc-toast.ok { background: #3F6023; border-color: #C6E3A0; }

/* ---------- Misc ---------- */
.suc-boot { display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 90px 20px; color: var(--suc-muted); }
.suc-spinner { width: 34px; height: 34px; border: 3px solid var(--suc-border); border-top-color: var(--suc-primary); border-radius: 50%; animation: sucSpin .8s linear infinite; }
@keyframes sucSpin { to { transform: rotate(360deg); } }
.suc-tabs { display:flex; gap: 4px; background: var(--suc-surface); padding: 4px; border-radius: 10px; width: max-content; max-width:100%; margin-bottom: 16px; }
.suc-tab { border:none; background:none; padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--suc-muted); cursor:pointer; }
.suc-tab.active { background:#fff; color: var(--suc-ink); box-shadow: 0 1px 4px rgba(26,32,44,.08); }
.suc-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px; align-items:flex-end; }
.suc-filters .suc-field { margin-bottom: 0; min-width: 140px; }
.suc-story { border-left: 3px solid var(--suc-primary); padding-left: 18px; }
.suc-story .ev { margin-bottom: 14px; position:relative; }
.suc-story .ev::before { content:""; position:absolute; left:-24.5px; top:5px; width:10px;height:10px; border-radius:50%; background: var(--suc-primary); }
.suc-story .ev.out::before { background: var(--suc-accent); }
.suc-story .ev .d { font-size: 12px; color: var(--suc-muted); }
.suc-avatar { width:34px;height:34px;border-radius:50%;background:var(--suc-primary-soft);color:var(--suc-primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px; }
.suc-prod-img { width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--suc-surface);border:1px solid var(--suc-border); }
.suc-bal-big { font-size: 34px; font-weight: 800; color: var(--suc-primary-dark); line-height:1.1; }
.suc-notif-dot { width:8px;height:8px;background:var(--suc-accent);border-radius:50%;display:inline-block;margin-left:4px; }
.suc-banner { border-radius: 12px; padding: 13px 18px; margin-bottom: 16px; font-size: 14px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.suc-banner.warn { background:#FFF3D6; color:#7A3E00; border:2px solid #E9B44C; font-weight:600; box-shadow: 0 4px 14px rgba(26,32,44,.10); }
.suc-banner.danger { background:#FDE2E2; color:#991B1B; border:2px solid #F08080; font-weight:600; box-shadow: 0 4px 14px rgba(26,32,44,.10); }
.suc-pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top: 12px; font-size: 13px; color: var(--suc-muted); }

/* ---------- Auth ---------- */
.suc-auth { max-width: 420px; margin: 0 auto; }
.suc-auth-card { background:#fff; border:1px solid var(--suc-border); border-radius: 18px; padding: 32px; }
.suc-auth-card h2 { text-align:center; font-size: 22px; }
.suc-auth-card .sub { text-align:center; color: var(--suc-muted); margin-bottom: 22px; font-size: 14px; }
.suc-auth-switch { text-align:center; margin-top: 16px; font-size: 14px; color: var(--suc-muted); }

/* ---------- Pricing ---------- */
.suc-pricing-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.suc-price-card { background:#fff; border:1px solid var(--suc-border); border-radius: 18px; padding: 26px 24px; display:flex; flex-direction:column; position:relative; }
.suc-price-card.featured { border: 2px solid var(--suc-primary); box-shadow: 0 12px 36px rgba(111,156,62,.18); }
.suc-price-card .tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: var(--suc-primary); color:#fff; font-size:11px; font-weight:700; padding: 3px 14px; border-radius: 99px; }
.suc-price-card .pname { font-size: 16px; font-weight: 700; color: var(--suc-ink); }
.suc-price-card .pdesc { font-size: 13px; color: var(--suc-muted); min-height: 36px; }
.suc-price-card .amount { font-size: 30px; font-weight: 800; color: var(--suc-ink); margin: 10px 0 2px; }
.suc-price-card .amount small { font-size: 13px; color: var(--suc-muted); font-weight: 500; }
.suc-price-card ul { list-style:none; padding: 0; margin: 14px 0 20px; flex:1; }
.suc-price-card ul li { padding: 5px 0 5px 26px; position: relative; font-size: 13.5px; color: var(--suc-ink-3); }
.suc-price-card ul li::before { content:"✓"; position:absolute; left:2px; color: var(--suc-primary); font-weight: 800; }
.suc-cycle-toggle { display:flex; justify-content:center; margin-bottom: 22px; }

/* ---------- Print ---------- */
@media print {
	body * { visibility: hidden !important; }
	#suc-print-area, #suc-print-area * { visibility: visible !important; }
	#suc-print-area { position: absolute; top:0; left:0; width:100%; }
}
#suc-print-area { display:none; }
#suc-print-area.printing { display:block; }
.suc-print-doc { font-family: Georgia, "Times New Roman", serif; color:#111; padding: 24px; }
.suc-print-doc .ph { display:flex; justify-content:space-between; border-bottom: 3px solid #1A202C; padding-bottom: 12px; margin-bottom: 14px; }
.suc-print-doc table { width:100%; border-collapse: collapse; font-size: 12px; }
.suc-print-doc th, .suc-print-doc td { border: 1px solid #999; padding: 5px 8px; text-align:left; }
.suc-print-doc th { background:#eee; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	#suc-app { border-radius: 0; }
	.suc-shell { flex-direction: column; border-radius: 12px; }

	/* Sidebar becomes a sleek app bar: brand row + scrollable pill nav */
	.suc-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 6px; }
	/* App bar brand: a clean logo tile only - the cramped company name
	   is hidden on small screens (it still shows on desktop). */
	.suc-side .suc-brand { padding: 0 8px 0 0; flex: 0 0 auto; margin-right: 2px; }
	.suc-side .suc-brand > span { display: none; }
	.suc-side .suc-brand .suc-logo { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; flex-shrink: 0; }
	/* The plan chip has no room in the app bar; billing status lives in Billing. */
	.suc-side .suc-plan-chip { display: none; }
	.suc-side::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
	.suc-nav-item { order: 4; width: auto; flex-direction: column; gap: 2px; padding: 7px 11px; font-size: 10.5px; border-radius: 10px; text-align: center; }
	.suc-nav-item .ico { width: auto; font-size: 17px; }
	.suc-nav-item .lbl { display: block; }
	.suc-side { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; }
	.suc-side::-webkit-scrollbar { display: none; }
	.suc-side::after { display: none; }
	.suc-side .suc-side-foot { display: none; }

	.suc-main { padding: 14px 12px 28px; }
	.suc-topbar { gap: 10px; margin-bottom: 14px; }
	.suc-topbar h1 { font-size: 19px; flex-basis: 100%; }
	.suc-topbar .suc-btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: 13.5px; }
	.suc-search { width: 100%; order: 5; }
	.suc-search input { padding: 12px 14px 12px 38px; border-radius: 12px; }

	.suc-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.suc-stat { padding: 13px 14px; border-radius: 12px; }
	.suc-stat .n { font-size: 19px; }
	.suc-stat .l { font-size: 10.5px; }

	.suc-grid-2, .suc-form-grid, .suc-pricing-grid { grid-template-columns: 1fr; }
	.suc-card { padding: 15px 14px; border-radius: 12px; margin-bottom: 12px; }
	.suc-table { font-size: 12.5px; }
	.suc-table th { padding: 8px 8px; font-size: 10px; }
	.suc-table td { padding: 9px 8px; }
	.suc-filters { gap: 8px; }
	.suc-filters .suc-field { min-width: calc(50% - 6px); flex: 1; }
	.suc-filters .suc-btn { flex-basis: 100%; justify-content: center; }
	.suc-tabs { width: 100%; }
	.suc-tab { flex: 1; padding: 9px 8px; font-size: 12.5px; }
	.suc-bal-big { font-size: 27px; }
	.suc-banner { padding: 12px 14px; font-size: 13px; border-radius: 10px; }
	.suc-banner .suc-btn { flex-basis: 100%; justify-content: center; }

	.suc-modal-overlay { padding: 0; align-items: flex-end; }
	.suc-modal { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; animation: sucUp .22s ease-out; }
	.suc-modal .m-body { padding: 14px 16px 18px; }
	.suc-modal .m-head { padding: 16px 16px 0; }
	.suc-modal .m-foot { padding: 0 16px 18px; }
	.suc-modal .m-foot .suc-btn { flex: 1; justify-content: center; }
	.suc-input, .suc-select, .suc-textarea { font-size: 16px; } /* prevents iOS zoom */

	.suc-auth-card { padding: 24px 18px; border-radius: 14px; }
	.suc-pager { justify-content: center; }
}
@keyframes sucUp { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Batch lines with per-batch dates (v2.6.0) ---------- */
.suc-scope .suc-batchrow { display: grid; grid-template-columns: 1.2fr .7fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }
.suc-scope .suc-mini-label { display: block; font-size: 10.5px; color: var(--suc-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 700px) {
	.suc-scope .suc-batchrow { grid-template-columns: 1fr 1fr; }
}

/* ---------- Brand mark (v2.7.0) ---------- */
.suc-scope .suc-mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 5px; }
.suc-scope .suc-mark svg { width: 100%; height: 100%; display: block; }
.suc-scope .suc-auth-mark { width: 54px; height: 54px; margin: 0 auto 12px; }
.suc-scope .suc-auth-mark svg, .suc-scope .suc-auth-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ---------- v2.9.0: auth extras + PO receiving rows ---------- */
.suc-scope .suc-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; line-height: 1; }
.suc-scope .suc-batchrow.po { grid-template-columns: 1fr .6fr .85fr .85fr .6fr 1fr auto; }
@media (max-width: 700px) {
	.suc-scope .suc-batchrow.po { grid-template-columns: 1fr 1fr; }
}

/* ---------- v3.0.0: accessibility ---------- */
.suc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.suc-scope .suc-skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: #1A202C; color: #fff; padding: 10px 18px; border-radius: 8px; }
.suc-scope .suc-skip:focus { left: 8px; }
.suc-scope .suc-btn:focus-visible, .suc-scope .suc-input:focus-visible, .suc-scope .suc-select:focus-visible,
.suc-scope .suc-textarea:focus-visible, .suc-scope .suc-nav-item:focus-visible, .suc-scope a:focus-visible,
.suc-scope .suc-tab:focus-visible {
	outline: 3px solid #1A202C; outline-offset: 2px;
}