/* =========================================================================
   Seamons Seeds Laboratory CRM — Portal UI
   Clean, light, soft-3D design. Vanilla CSS, no build step.
   ========================================================================= */

:root {
	--ss-bg: #eef2f8;
	--ss-bg-2: #e6ecf6;
	--ss-surface: #ffffff;
	--ss-surface-2: #f7f9fc;
	--ss-ink: #1f2a37;
	--ss-ink-soft: #5b6675;
	--ss-muted: #8a94a4;
	--ss-line: #e6eaf1;

	--ss-green: #16a34a;
	--ss-green-d: #15803d;
	--ss-green-l: #dcfce7;
	--ss-teal: #0e9aa7;
	--ss-blue: #2563eb;
	--ss-indigo: #6366f1;
	--ss-amber: #d97706;
	--ss-amber-l: #fef3c7;
	--ss-red: #dc2626;
	--ss-red-l: #fee2e2;
	--ss-sky-l: #e0f2fe;
	--ss-violet-l: #ede9fe;

	--ss-radius: 18px;
	--ss-radius-sm: 12px;
	--ss-radius-xs: 9px;

	/* Layered soft-3D shadows */
	--ss-shadow-sm: 0 1px 2px rgba(20,40,80,.06), 0 2px 6px rgba(20,40,80,.05);
	--ss-shadow: 0 2px 4px rgba(20,40,80,.05), 0 10px 24px rgba(20,40,80,.08);
	--ss-shadow-lg: 0 8px 18px rgba(20,40,80,.10), 0 24px 50px rgba(20,40,80,.16);
	--ss-shadow-inset: inset 0 1px 0 rgba(255,255,255,.7);

	--ss-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

.sscrm-portal {
	margin: 0;
	font-family: var(--ss-font);
	color: var(--ss-ink);
	background: radial-gradient(1200px 600px at 80% -10%, #ffffff 0%, var(--ss-bg) 45%, var(--ss-bg-2) 100%);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

/* ============================ LOGIN ===================================== */

.sscrm-login-body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background:
		radial-gradient(900px 500px at 15% 10%, rgba(22,163,74,.18), transparent 60%),
		radial-gradient(900px 600px at 90% 90%, rgba(37,99,235,.14), transparent 55%),
		linear-gradient(160deg, #f1f6ff 0%, #e7f4ec 100%);
}

.sscrm-login-stage { width: 100%; max-width: 420px; }

.sscrm-login-card {
	background: var(--ss-surface);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 24px;
	padding: 38px 34px 30px;
	box-shadow: var(--ss-shadow-lg);
	position: relative;
}
/*.sscrm-login-card::before {*/
/*	content: "";*/
/*	position: absolute; inset: 0;*/
/*	border-radius: 24px;*/
/*	background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));*/
/*	pointer-events: none;*/
/*}*/

.sscrm-login-brand { text-align: center; margin-bottom: 22px; }
.sscrm-login-logo { max-height: 60px; max-width: 180px; object-fit: contain; }
.sscrm-login-mark {
	width: 64px; height: 64px; margin: 0 auto 12px;
	display: grid; place-items: center;
	color: #fff;
	background: linear-gradient(145deg, var(--ss-green), var(--ss-green-d));
	border-radius: 20px;
	box-shadow: 0 10px 22px rgba(22,163,74,.4), var(--ss-shadow-inset);
}
.sscrm-login-brand h1 { font-size: 19px; margin: 8px 0 2px; font-weight: 800; }
.sscrm-login-sub { margin: 0; color: var(--ss-green-d); font-weight: 600; font-size: 13px; letter-spacing: .2px; }
.sscrm-login-addr { margin: 4px 0 0; color: var(--ss-muted); font-size: 12px; }

.sscrm-login-error {
	background: var(--ss-red-l); color: #991b1b;
	border: 1px solid #fecaca; border-radius: var(--ss-radius-sm);
	padding: 10px 14px; font-size: 13px; margin-bottom: 16px; text-align: center;
}

.sscrm-login-form { display: grid; gap: 14px; }

.sscrm-field {
	display: flex; align-items: center; gap: 10px;
	background: var(--ss-surface-2);
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	padding: 0 14px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.sscrm-field:focus-within {
	border-color: var(--ss-green);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}
.sscrm-field-icon { color: var(--ss-muted); display: flex; }
.sscrm-field input {
	flex: 1; border: none; background: transparent; outline: none;
	padding: 13px 0; font-size: 14.5px; color: var(--ss-ink); font-family: inherit;
}

.sscrm-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ss-ink-soft); cursor: pointer; }
.sscrm-remember input { accent-color: var(--ss-green); width: 15px; height: 15px; }

.sscrm-login-foot { text-align: center; color: var(--ss-muted); font-size: 12px; margin: 18px 0 0; }
.sscrm-login-copyright { text-align: center; color: var(--ss-muted); font-size: 12px; margin-top: 18px; }

/* ============================ BUTTONS =================================== */

.sscrm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-weight: 600; font-size: 14px;
	padding: 11px 18px; border-radius: var(--ss-radius-sm);
	border: 1px solid var(--ss-line); background: var(--ss-surface); color: var(--ss-ink);
	cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
	box-shadow: var(--ss-shadow-sm);
}
.sscrm-btn:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow); }
.sscrm-btn:active { transform: translateY(0); }
.sscrm-btn svg { width: 18px; height: 18px; }
.sscrm-btn-block { width: 100%; padding: 14px; font-size: 15px; }

.sscrm-btn-primary {
	background: linear-gradient(145deg, var(--ss-green), var(--ss-green-d));
	color: #fff; border: none;
	box-shadow: 0 8px 18px rgba(22,163,74,.35), var(--ss-shadow-inset);
}
.sscrm-btn-primary:hover { box-shadow: 0 12px 24px rgba(22,163,74,.45), var(--ss-shadow-inset); }

.sscrm-btn-ghost { background: transparent; box-shadow: none; }
.sscrm-btn-danger { color: var(--ss-red); border-color: #fecaca; background: #fff; box-shadow: none; }
.sscrm-btn-danger:hover { background: var(--ss-red-l); }
.sscrm-btn-sm { padding: 8px 12px; font-size: 13px; }

.sscrm-icon-btn {
	width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ss-line);
	background: var(--ss-surface); color: var(--ss-ink-soft); display: grid; place-items: center;
	cursor: pointer; text-decoration: none; box-shadow: var(--ss-shadow-sm);
	transition: transform .12s, color .12s, box-shadow .12s;
}
.sscrm-icon-btn:hover { transform: translateY(-1px); color: var(--ss-green-d); box-shadow: var(--ss-shadow); }
.sscrm-icon-btn svg { width: 19px; height: 19px; }

/* ============================ SHELL ===================================== */

.sscrm-shell { display: flex; min-height: 100vh; }

.sscrm-sidebar {
	width: 264px; flex-shrink: 0; padding: 20px 16px;
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(10px);
	border-right: 1px solid var(--ss-line);
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sscrm-side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; }
.sscrm-side-logo { max-height: 40px; max-width: 130px; object-fit: contain; }
.sscrm-side-mark {
	width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
	color: #fff; background: linear-gradient(145deg, var(--ss-green), var(--ss-green-d));
	box-shadow: 0 8px 16px rgba(22,163,74,.35), var(--ss-shadow-inset); flex-shrink: 0;
}
.sscrm-side-title strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.15; }
.sscrm-side-title small { color: var(--ss-muted); font-size: 11.5px; }

.sscrm-nav { display: flex; flex-direction: column; gap: 3px; }
.sscrm-nav-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
	color: var(--ss-muted); font-weight: 700; padding: 16px 12px 6px;
}
.sscrm-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 13px; border-radius: var(--ss-radius-sm);
	border: none; background: transparent; color: var(--ss-ink-soft);
	font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	text-align: left; width: 100%; text-decoration: none; transition: background .12s, color .12s, transform .12s;
}
.sscrm-nav-item i, .sscrm-nav-item svg { width: 19px; height: 19px; }
.sscrm-nav-item:hover { background: var(--ss-surface-2); color: var(--ss-ink); }
.sscrm-nav-item.is-active {
	background: linear-gradient(145deg, var(--ss-green-l), #eafff1);
	color: var(--ss-green-d);
	box-shadow: var(--ss-shadow-sm);
}
.sscrm-nav-item.is-active::before {
	content: ""; width: 4px; height: 18px; border-radius: 4px;
	background: var(--ss-green); margin: -2px 2px -2px -6px;
}

.sscrm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sscrm-topbar {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 26px;
	background: rgba(255,255,255,.6);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ss-line);
	position: sticky; top: 0; z-index: 20;
}
.sscrm-topbar-title { font-size: 18px; font-weight: 800; flex: 1; }
.sscrm-topbar-right { display: flex; align-items: center; gap: 12px; }
.sscrm-side-toggle { display: none; }

.sscrm-user-chip { display: flex; align-items: center; gap: 10px; }
.sscrm-avatar {
	width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
	color: #fff; font-weight: 700; font-size: 15px;
	background: linear-gradient(145deg, var(--ss-indigo), var(--ss-blue));
	box-shadow: 0 6px 14px rgba(99,102,241,.35), var(--ss-shadow-inset);
}
.sscrm-user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.sscrm-user-meta strong { font-size: 13.5px; }
.sscrm-user-meta small { color: var(--ss-muted); font-size: 11.5px; }

.sscrm-view { padding: 26px; flex: 1; }

/* ============================ HEADINGS / TOOLBAR ======================= */

.sscrm-page-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.sscrm-page-head h2 { font-size: 21px; margin: 0 0 4px; font-weight: 800; }
.sscrm-page-head p { margin: 0; color: var(--ss-ink-soft); font-size: 13.5px; }
.sscrm-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================ KPI CARDS ================================= */

.sscrm-kpi-grid {
	display: grid; gap: 16px; margin-bottom: 24px;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.sscrm-kpi {
	background: var(--ss-surface); border-radius: var(--ss-radius);
	padding: 18px; box-shadow: var(--ss-shadow); border: 1px solid rgba(255,255,255,.7);
	position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.sscrm-kpi:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow-lg); }
.sscrm-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sscrm-kpi-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; box-shadow: var(--ss-shadow-inset); }
.sscrm-kpi-ico svg { width: 22px; height: 22px; }
.sscrm-kpi-val { font-size: 27px; font-weight: 800; line-height: 1; }
.sscrm-kpi-label { color: var(--ss-ink-soft); font-size: 13px; margin-top: 5px; font-weight: 500; }

.t-green  { background: var(--ss-green-l); color: var(--ss-green-d); }
.t-blue   { background: var(--ss-sky-l);  color: var(--ss-blue); }
.t-amber  { background: var(--ss-amber-l); color: var(--ss-amber); }
.t-red    { background: var(--ss-red-l);  color: var(--ss-red); }
.t-violet { background: var(--ss-violet-l); color: var(--ss-indigo); }
.t-teal   { background: #ccfbf1; color: #0f766e; }

/* ============================ CHART CARDS ============================== */

.sscrm-grid-2 { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; margin-bottom: 24px; }
.sscrm-grid-2b { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 24px; }

.sscrm-card {
	background: var(--ss-surface); border-radius: var(--ss-radius);
	box-shadow: var(--ss-shadow); border: 1px solid rgba(255,255,255,.7);
	overflow: hidden;
}
.sscrm-card-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; border-bottom: 1px solid var(--ss-line);
}
.sscrm-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.sscrm-card-body { padding: 18px; }
.sscrm-chart-wrap { position: relative; height: 260px; }
.sscrm-chart-wrap.sm { height: 230px; }

/* ============================ TABLES ================================== */

.sscrm-table-wrap { overflow-x: auto; }
.sscrm-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sscrm-tbl thead th {
	text-align: left; padding: 12px 14px; color: var(--ss-muted);
	font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
	border-bottom: 1px solid var(--ss-line); white-space: nowrap;
}
.sscrm-tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--ss-line); vertical-align: middle; }
.sscrm-tbl tbody tr:last-child td { border-bottom: none; }
.sscrm-tbl tbody tr { transition: background .1s; }
.sscrm-tbl tbody tr:hover { background: var(--ss-surface-2); }
.sscrm-tbl .num { font-weight: 700; }
.sscrm-row-actions { display: flex; gap: 6px; }
.sscrm-act {
	width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--ss-line);
	background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ss-ink-soft);
	transition: background .12s, color .12s, transform .12s;
}
.sscrm-act svg { width: 16px; height: 16px; }
.sscrm-act:hover { transform: translateY(-1px); }
.sscrm-act.edit:hover { color: var(--ss-blue); background: var(--ss-sky-l); }
.sscrm-act.del:hover { color: var(--ss-red); background: var(--ss-red-l); }
.sscrm-act.ok:hover { color: var(--ss-green-d); background: var(--ss-green-l); }
.sscrm-act.up:hover { color: var(--ss-indigo); background: var(--ss-violet-l); }

.sscrm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sscrm-search {
	flex: 1; min-width: 200px; max-width: 320px;
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius-sm); padding: 0 12px;
	box-shadow: var(--ss-shadow-sm);
}
.sscrm-search input { border: none; outline: none; background: transparent; padding: 10px 0; flex: 1; font-family: inherit; font-size: 14px; }
.sscrm-search svg { width: 17px; height: 17px; color: var(--ss-muted); }

.sscrm-empty { text-align: center; padding: 50px 20px; color: var(--ss-muted); }
.sscrm-empty svg { width: 46px; height: 46px; margin-bottom: 12px; opacity: .5; }
.sscrm-empty p { margin: 0; font-size: 14px; }

/* ============================ BADGES ================================== */

.sscrm-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.sscrm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-active, .b-pass, .b-approved { background: var(--ss-green-l); color: var(--ss-green-d); }
.b-testing, .b-submitted, .b-pending { background: var(--ss-amber-l); color: var(--ss-amber); }
.b-verified { background: var(--ss-sky-l); color: var(--ss-blue); }
.b-rejected, .b-fail, .b-expired { background: var(--ss-red-l); color: var(--ss-red); }
.b-draft { background: #eef1f6; color: var(--ss-ink-soft); }
.b-grey { background: #eef1f6; color: var(--ss-ink-soft); }

/* ============================ MODAL ================================== */

.sscrm-modal-root { position: fixed; inset: 0; z-index: 1000; display: none; }
.sscrm-modal-root.open { display: flex; align-items: center; justify-content: center; padding: 20px; }
.sscrm-modal-back {
	position: absolute; inset: 0; background: rgba(20,30,55,.45);
	backdrop-filter: blur(3px); animation: ssfade .15s ease;
}
.sscrm-modal {
	position: relative; margin: 0; width: 100%; max-width: 720px;
	background: var(--ss-surface); border-radius: 22px; box-shadow: var(--ss-shadow-lg);
	max-height: 90vh; display: flex; flex-direction: column; animation: ssrise .2s ease;
}
.sscrm-modal.lg { max-width: 860px; }
@keyframes ssfade { from { opacity: 0; } }
@keyframes ssrise { from { opacity: 0; transform: translateY(14px); } }
.sscrm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--ss-line); }
.sscrm-modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.sscrm-modal-close { width: 36px; height: 36px; border: none; background: var(--ss-surface-2); border-radius: 10px; cursor: pointer; color: var(--ss-ink-soft); display: grid; place-items: center; }
.sscrm-modal-close:hover { background: var(--ss-red-l); color: var(--ss-red); }
.sscrm-modal-close svg { width: 18px; height: 18px; }
.sscrm-modal-body { padding: 22px 24px; overflow-y: auto; }
.sscrm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--ss-line); }

/* ============================ FORMS ================================== */

.sscrm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.sscrm-form-grid .col-2 { grid-column: 1 / -1; }
.sscrm-fg { display: flex; flex-direction: column; gap: 6px; }
.sscrm-fg label { font-size: 12.5px; font-weight: 700; color: var(--ss-ink-soft); }
.sscrm-fg input, .sscrm-fg select, .sscrm-fg textarea {
	border: 1px solid var(--ss-line); border-radius: var(--ss-radius-xs);
	padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--ss-surface-2);
	color: var(--ss-ink); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; width: 100%;
}
.sscrm-fg textarea { resize: vertical; min-height: 60px; }
.sscrm-fg input:focus, .sscrm-fg select:focus, .sscrm-fg textarea:focus {
	border-color: var(--ss-green); background: #fff; box-shadow: 0 0 0 4px rgba(22,163,74,.1);
}

.sscrm-calc-box {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
	gap: 14px; padding: 14px 18px; border-radius: var(--ss-radius-sm);
	background: linear-gradient(145deg, #f0f7ff, #eefcf3); border: 1px dashed #cfe6d8;
}
.sscrm-calc-box .big { font-size: 24px; font-weight: 800; }
.sscrm-calc-note { font-size: 12px; color: var(--ss-ink-soft); }
.sscrm-form-hint { font-size: 13px; color: var(--ss-ink-soft); margin: 0 0 12px; }

/* ============================ COMING SOON ============================ */

.sscrm-soon {
	display: grid; place-items: center; text-align: center; padding: 60px 24px;
}
.sscrm-soon-ico {
	width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center;
	margin-bottom: 18px; color: var(--ss-green-d);
	background: linear-gradient(145deg, var(--ss-green-l), #eafff1);
	box-shadow: var(--ss-shadow), var(--ss-shadow-inset);
}
.sscrm-soon-ico svg { width: 38px; height: 38px; }
.sscrm-soon h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.sscrm-soon p { margin: 0 auto; max-width: 440px; color: var(--ss-ink-soft); font-size: 14px; line-height: 1.6; }
.sscrm-soon-tag { margin-top: 16px; }

/* ============================ TOAST ================================== */

.sscrm-toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; }
.sscrm-toast {
	display: flex; align-items: center; gap: 10px; padding: 13px 16px;
	background: var(--ss-surface); border-radius: 13px; box-shadow: var(--ss-shadow-lg);
	border-left: 4px solid var(--ss-green); font-size: 14px; font-weight: 600;
	animation: ssrise .2s ease; max-width: 360px;
}
.sscrm-toast.err { border-left-color: var(--ss-red); }
.sscrm-toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.sscrm-toast.ok svg { color: var(--ss-green); }
.sscrm-toast.err svg { color: var(--ss-red); }

/* ============================ LOADING ================================= */

.sscrm-loading { display: grid; place-items: center; padding: 80px 0; }
.sscrm-spinner {
	width: 38px; height: 38px; border-radius: 50%;
	border: 3px solid var(--ss-line); border-top-color: var(--ss-green);
	animation: ssspin .8s linear infinite;
}
@keyframes ssspin { to { transform: rotate(360deg); } }

.sscrm-pill {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
	padding: 4px 10px; border-radius: 999px; background: var(--ss-surface-2); color: var(--ss-ink-soft);
}
.sscrm-pill.prod { background: var(--ss-green-l); color: var(--ss-green-d); }

/* ============================ RESPONSIVE ============================== */

@media (max-width: 920px) {
	.sscrm-grid-2, .sscrm-grid-2b { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
	.sscrm-sidebar {
		position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
		transition: transform .22s ease; box-shadow: var(--ss-shadow-lg);
	}
	.sscrm-shell.nav-open .sscrm-sidebar { transform: translateX(0); }
	.sscrm-shell.nav-open::after {
		content: ""; position: fixed; inset: 0; background: rgba(20,30,55,.4); z-index: 55;
	}
	.sscrm-side-toggle { display: grid; }
	.sscrm-form-grid { grid-template-columns: 1fr; }
	.sscrm-user-meta { display: none; }
	.sscrm-view { padding: 18px 14px; }
}