/* Theme variables - beige palette */
:root{
  --bg-1: #f5f1e6; /* light beige */
  --bg-2: #efe7d0; /* warm beige */
  --card: #ffffff;
  --muted: #6b6b5f;
  --text: #222222;
  --accent: #9966cc; /* violet subtle */
  --accent-2: #ff8c42; /* warm accent */
  --glass: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.08);
  --success: #0f9d58;
  --danger: #d9534f;
  --radius: 12px;
}
/* Global reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:2rem; font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; color:var(--text);
  background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
}
/* Make UI lighter */
.card{background:var(--card); color:var(--text)}
.navbar, .userbar .btn{background:transparent}
/* Adjust button palette for beige */
.btn-outline-light{color:var(--text); border-color:var(--border); background:transparent}
.btn-outline-light:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff}
.btn-light{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff}
.table-wrap, table{background:transparent}
.empty, .center{background:var(--card); color:var(--text)}
.container{max-width:1200px; margin:0 auto}
/* Header */
.page-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem}
.brand{display:flex; align-items:center; gap:1rem}
.brand h1{margin:0; font-size:1.4rem; color:var(--text); letter-spacing:0.3px}
.nav{display:flex; align-items:center}
.nav a, .nav-link{color:var(--text); margin-left:0.6rem; text-decoration:none; padding:0.4rem 0.8rem; border-radius:12px; font-weight:700; background:rgba(255,255,255,0.06); box-shadow:0 4px 12px rgba(0,0,0,0.04); transition:all .18s ease}
.nav a:hover, .nav a:focus, .nav-link:hover, .nav-link:focus{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.nav a.active, .nav a:hover, .nav-link.active, .nav-link:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 8px 24px rgba(153,102,204,0.14)}
.nav a:focus, .nav-link:focus{outline:2px solid rgba(153,102,204,0.18); outline-offset:3px}

/* Navbar container tweaks for contrast */
.navbar{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); padding:0.6rem 1rem; border-radius:14px; box-shadow:0 8px 30px rgba(2,6,23,0.06)}
.navbar-brand{color:var(--text); font-weight:800; padding:0.2rem 0.6rem; border-radius:10px}
.navbar .userbar .btn{font-weight:700}
.userbar{display:flex; align-items:center; gap:0.5rem}
.userbar button{padding:0.45rem 0.8rem; border-radius:8px; border:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; cursor:pointer; font-weight:600}
.userbar button.secondary{background:transparent; border:1px solid var(--glass); color:var(--text)}
.userbar .user-label{color:var(--muted); font-size:0.95rem}
/* Main layout & cards */
main{display:block}
.card{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:var(--radius); box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.grid{display:grid; gap:1rem; grid-template-columns: 1fr}
@media(min-width:900px){.grid{grid-template-columns: 2fr 1fr}}
.section-title{font-size:1rem; color:var(--muted); margin:0 0 0.75rem 0}
/* Table styles */
.table-wrap{overflow:auto; border-radius:10px}
table{width:100%; border-collapse:collapse; min-width:700px}
thead th{position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:0.75rem; text-align:left; color:var(--muted); font-weight:700}
tbody tr:hover{background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02))}
td{padding:0.6rem 0.8rem; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--text)}
.prod-cell{font-weight:700}
.size-cell{display:flex; align-items:center; gap:0.4rem}
.qty{background:rgba(255,255,255,0.02); padding:0.25rem 0.5rem; border-radius:8px; font-weight:700}
.edit-btn{background:transparent; border:1px solid var(--glass); padding:0.2rem 0.4rem; border-radius:6px; color:var(--muted); cursor:pointer}
.edit-btn:hover{border-color:var(--accent); color:var(--accent)}
/* Inventory grid specific */
.inventory-table th, .inventory-table td{white-space:nowrap}
/* Forms & inputs */
input, select, textarea{padding:0.5rem; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:var(--card); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);}
label{display:block; margin-bottom:0.6rem}
.button-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; padding:0.6rem 1rem; border-radius:8px; border:0; cursor:pointer; font-weight:700; box-shadow:0 6px 18px rgba(153,102,204,0.12)}
.button-ghost{background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--text); padding:0.45rem 0.8rem; border-radius:8px}
/* Sale item layout */
.sale-item{display:flex; gap:0.75rem; align-items:center; margin-bottom:0.6rem}
.sale-item .remove{background:transparent; color:var(--danger); border:0; cursor:pointer}
.sale-item .price[readonly]{background:transparent; color:var(--muted); border:1px dashed rgba(0,0,0,0.06)}
.line-total{font-weight:800; color:var(--accent); margin-left:0.6rem}
/* Empty / messages */
.empty{padding:2rem; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border-radius:8px; color:var(--muted)}
/* Small helpers */
.kv{display:flex; gap:1rem; align-items:center}
.kv .label{color:var(--muted)}
.kv .value{font-weight:700}
/* Footer */
.footer{margin-top:2rem; color:var(--muted); font-size:0.9rem; text-align:center}
/* Responsive */
@media (max-width:720px){
  body{padding:1rem}
  .nav a{margin-left:0.4rem; padding:0.3rem 0.5rem}
  .sale-item{flex-direction:column; align-items:stretch}
  .table-wrap{overflow:auto}
}
/* Accessibility tweaks */
button:focus, a:focus{outline:2px solid rgba(124,58,237,0.25); outline-offset:3px}

/* Bootstrap button tweaks for beige theme */
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none}
.btn-outline-primary{color:var(--text); border:1px solid rgba(0,0,0,0.08); background:transparent}
.btn-outline-primary:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff}

/* Improve placeholder contrast */
::placeholder{color:rgba(34,34,34,0.45)}