@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&display=swap');

:root {
--bg: #ffffff;
--surface: #f4f4f4;
--surface-2: #efefef;
--text: #111111;
--muted: #666666;
--border: #d9d9d9;
--accent: #7ab929;
--accent-dark: #5f9320;
--danger: #1f1f1f;
--danger-soft: #000000;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
--radius: 20px;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
min-height: 100vh;
font-family: 'Barlow Condensed', sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(122, 185, 41, 0.09), transparent 32%),
linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

button,
input,
select {
font: inherit;
}

.app-shell {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
}

.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 0 20px;
margin-bottom: 18px;
backdrop-filter: blur(10px);
}

.brand {
flex: 1;
min-width: 0;
}

.brand h1 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 3rem);
line-height: 0.95;
font-weight: 700;
letter-spacing: 0.02em;
text-wrap: balance;
}

.brand p {
margin: 10px 0 0;
color: var(--muted);
font-size: 1.05rem;
letter-spacing: 0.03em;
}

.login-btn {
flex: 0 0 auto;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.95);
color: var(--text);
padding: 14px 18px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.login-btn:hover,
.login-btn:focus-visible {
transform: translateY(-1px);
border-color: var(--accent);
outline: none;
}

.panel {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
}

.table-shell {
margin-top: 18px;
overflow: visible;
border-radius: var(--radius);
border: 1px solid var(--border);
background: #fff;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.stock,
.history-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding-bottom: 4px;
}

.top-controls {
	display: grid;
	gap: 16px;
	margin-bottom: 18px;
}

.auth-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.admin-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.import-info {
	color: var(--muted);
	font-size: 0.95rem;
}

.btn {
	border: 1px solid rgba(0,0,0,0.08);
	padding: 12px 18px;
	border-radius: 14px;
	cursor: pointer;
	background: #fff;
	color: var(--text);
	box-shadow: 0 10px 24px rgba(0,0,0,0.06);
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
	outline: none;
}

.btn.green {
	background: var(--accent);
	color: #fff;
	border-color: transparent;
}

.btn.dark {
	background: #1f1f1f;
	color: #fff;
	border-color: transparent;
}

.btn.primary {
	background: var(--accent);
	color: #fff;
	border-color: transparent;
}

.btn.ghost-btn {
	background: #fff;
	color: var(--text);
}

.login-btn {
	min-width: 140px;
}
@keyframes loginGlow {
0% {
box-shadow:
0 0 0 0 rgba(122, 185, 41, 0.0),
0 0 0 rgba(122, 185, 41, 0.0);
}
100% {
box-shadow:
0 0 0 1px rgba(122, 185, 41, 0.28),
0 0 24px rgba(122, 185, 41, 0.14),
0 18px 50px rgba(0, 0, 0, 0.08);
}
}

.controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: start;
}

.controls-left {
display: grid;
gap: 14px;
}

.search-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}

.search-row input {
flex: 1 1 320px;
min-width: 220px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
padding: 14px 16px;
border-radius: 14px;
min-height: 52px;
}

.search-row select {
flex: 0 1 260px;
min-width: 220px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
padding: 14px 16px;
border-radius: 14px;
min-height: 52px;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 38px;
}

.search-row select:focus,
.search-row input:focus {
outline: 2px solid rgba(122, 185, 41, 0.22);
border-color: var(--accent);
}

.table-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
gap: 10px;
flex-wrap: wrap;
}

.add-product-btn {
border-color: rgba(122, 185, 41, 0.5);
background: rgba(122, 185, 41, 0.12);
font-weight: 700;
border-radius: 14px;
padding: 12px 18px;
}

.add-product-btn:hover,
.add-product-btn:focus-visible {
background: rgba(122, 185, 41, 0.18);
}

table {
width: 100%;
border-collapse: collapse;
min-width: 980px;
}

thead th {
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(180deg, #fafafa, #f2f2f2);
text-align: left;
font-size: 1.05rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
padding: 16px 14px;
}

tbody td {
border-bottom: 1px solid #ededed;
padding: 14px;
vertical-align: middle;
font-size: 1.05rem;
}

tbody tr:nth-child(even) {
background: #fcfcfc;
}

tbody tr:hover {
background: rgba(122, 185, 41, 0.05);
}

.category-cell {
text-transform: capitalize;
color: var(--muted);
font-weight: 600;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(122, 185, 41, 0.14);
  border: 1px solid rgba(122, 185, 41, 0.24);
  font-weight: 700;
  color: var(--accent-dark);
}

.badge-zero {
  background: #f8d7da;
  border-color: #f5c2c7;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.14);
}

.action-group {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}

.action-group .move-qty {
width: 72px;
padding: 12px;
border: 0;
outline: none;
background: #fff;
text-align: center;
}

.action-group .btn {
border-radius: 0;
border: 0;
padding: 12px 14px;
margin: 0;
font-weight: 700;
}

.action-group .btn.green {
background: var(--accent);
color: #fff;
}

.action-group .btn.dark {
background: #1f1f1f;
color: #fff;
}

.action-group .btn.warn {
background: #b91c1c;
color: #fff;
}

.action-group .icons {
display: flex;
align-items: center;
padding: 0 10px;
color: var(--muted);
}

.icons span {
cursor: pointer;
padding: 6px;
border-radius: 8px;
}

.icons span:hover {
background: rgba(0, 0, 0, 0.04);
}

.btn {
border: 0;
padding: 10px 16px;
border-radius: 14px;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
transform: translateY(-1px);
outline: none;
}

.btn.green {
background: var(--accent);
color: #fff;
box-shadow: 0 12px 28px rgba(122, 185, 41, 0.16);
}

.btn.dark {
background: #1f1f1f;
color: #fff;
}

.btn.primary {
background: var(--accent);
color: #fff;
}

.btn.ghost-btn {
background: #fff;
color: var(--text);
}

.btn.warn {
background: #b91c1c;
color: #fff;
}

.stock {
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.stock table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

.history {
  margin-top: 28px;
  display: none;
}

.section-title {
margin: 0 0 12px;
font-size: 1.7rem;
letter-spacing: 0.03em;
}

.history-tools {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}

.category-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}

.category-buttons .category-btn {
min-height: 48px;
background: #fff;
color: var(--text);
border: 1px solid var(--border);
padding: 12px 18px;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.category-buttons .category-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

.history-wrap {
overflow-x: auto;
border-radius: 18px;
border: 1px solid var(--border);
background: #fff;
}

.history-wrap table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}

.history-wrap thead th,
.history-wrap tbody td {
padding: 14px 12px;
}

.history-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}

.page-info {
min-width: 110px;
text-align: center;
color: var(--muted);
font-size: 1.02rem;
}

.ghost-btn:disabled,
.confirm-btn:disabled,
.login-btn:disabled,
.delete-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.ghost-btn,
.confirm-btn,
.login-btn,
.delete-btn,
.edit-btn {
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.history-wrap thead th,
.history-wrap tbody td {
padding: 14px 12px;
}

.status-line {
margin-top: 12px;
color: var(--muted);
min-height: 1.4em;
}

.empty-row td {
text-align: center;
padding: 28px;
color: var(--muted);
}

.modal-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(10, 10, 10, 0.55);
padding: 20px;
z-index: 100;
}

.modal-backdrop.open {
display: flex;
}

.modal {
width: min(500px, 100%);
background: #fff;
border-radius: 28px;
border: 1px solid rgba(200, 200, 200, 0.18);
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);
padding: 24px;
}

.modal-content {
display: grid;
gap: 18px;
}

.modal h4 {
margin: 0;
font-size: 1.65rem;
}

.modal p {
margin: 0 0 18px;
color: var(--muted);
}

.modal input {
width: 100%;
border: 1px solid var(--border);
border-radius: 14px;
min-height: 54px;
padding: 12px 14px;
margin-bottom: 16px;
}

.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}

.ghost-btn,
.confirm-btn {
min-height: 50px;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
border: 1px solid var(--border);
}

.confirm-btn {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

.ghost-btn {
background: #fff;
color: var(--text);
}

.helper-note {
font-size: 0.98rem;
color: var(--muted);
}

.stack-form {
display: grid;
gap: 12px;
}

.stack-form label {
display: grid;
gap: 6px;
font-size: 1rem;
color: var(--text);
}

.stack-form label[hidden] {
display: none;
}

.stack-form label span {
font-weight: 700;
letter-spacing: 0.02em;
}

.stack-form input {
margin-bottom: 0;
}

@media (max-width: 1100px) {
.controls {
grid-template-columns: 1fr;
}

.legend {
justify-content: flex-start;
}

.action-panel {
grid-template-columns: 1fr 1fr auto auto;
}

.action-panel input {
grid-column: 1 / -1;
}

.action-btn.primary {
grid-column: 1 / -1;
}

.delete-btn {
justify-self: end;
}
}

@media (max-width: 700px) {
.app-shell {
padding: 16px;
}

.topbar {
position: static;
flex-direction: column;
align-items: stretch;
}

.login-btn {
width: 100%;
}

.brand h1 {
font-size: clamp(2rem, 11vw, 3.1rem);
}

.search-row input {
min-width: 100%;
}

.search-row select {
width: 100%;
flex: 1 1 100%;
min-width: 100%;
}

.category-buttons {
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
}

.category-buttons .category-btn {
white-space: nowrap;
flex-shrink: 0;
padding: 10px 14px;
font-size: 0.95rem;
}

table {
min-width: 860px;
width: max-content;
font-size: 0.95rem;
}

thead th {
padding: 12px 8px;
font-size: 0.9rem;
}

tbody td {
padding: 10px 8px;
font-size: 0.95rem;
}

.action-group {
flex-direction: column;
gap: 4px;
}

.action-group .move-qty {
width: 100%;
}

.action-group .btn {
padding: 8px 10px;
font-size: 0.9rem;
}

.action-group .icons {
padding: 0 4px;
font-size: 1.2rem;
}

.category-strip button,
.action-chip,
.confirm-btn,
.ghost-btn,
.action-btn,
.login-btn {
min-height: 52px;
}

.panel {
padding: 14px;
}

.action-panel {
grid-template-columns: 1fr;
}

.action-panel input,
.action-btn.primary,
.action-btn.out1,
.action-btn.out2,
.action-btn.danger,
.edit-btn,
.delete-btn {
grid-column: auto;
}

.action-btn.out1,
.action-btn.out2 {
min-height: 50px;
}

.delete-cell {
text-align: left;
}
}