:root{
  --bg:#1a1f2e;
  --panel:#242b3d;
  --muted:#b4c1d4;
  --text:#f1f5f9;
  --accent:#4ade80;
  --danger:#f87171;
  --warning:#fbbf24;
  --success:#34d399;
  --glass: rgba(255,255,255,0.08);
  --card-shadow: 0 8px 25px rgba(0,0,0,0.3);
  --radius:12px;
  --border: rgba(255,255,255,0.12);
  --hover-bg: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:28px; font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:linear-gradient(180deg,var(--bg), #0f172a); color:var(--text); line-height:1.6;
}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
header h1{font-size:1.25rem;margin:0}
nav a{color:var(--muted);text-decoration:none;margin-left:10px}
a:hover{color:var(--text)}
.container{max-width:1100px;margin:0 auto}
.card{background:linear-gradient(180deg,var(--panel), rgba(255,255,255,0.04));padding:20px;border-radius:var(--radius);box-shadow:var(--card-shadow);border:1px solid var(--border);}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
input[type="text"], input[type="number"], input[type="password"], select{
  background:linear-gradient(135deg, var(--glass), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  transition:all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
}

input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(74,222,128,0.2), 0 4px 16px rgba(74,222,128,0.1);
  background:linear-gradient(135deg, rgba(74,222,128,0.05), rgba(255,255,255,0.08));
  transform: translateY(-1px);
}

input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, select:hover{
  border-color:rgba(255,255,255,0.3);
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

/* Custom select styling */
select {
  appearance: none;
  cursor: pointer;
}

/* Option styling */
select option {
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px;
  border: none;
}

/* Input placeholders */
input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Small input variant */
input.small {
  padding: 8px 12px;
  font-size: 13px;
}
button{background:var(--glass);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:500;transition:all 0.2s ease;}
button:hover{background:var(--hover-bg);border-color:rgba(255,255,255,0.2);transform:translateY(-1px);}
.accent{background:linear-gradient(90deg,var(--accent), var(--success));color:#0f172a;border:none;font-weight:600;}
.accent:hover{background:linear-gradient(90deg,#22c55e, #10b981);}
.danger{background:linear-gradient(90deg,var(--danger), #fca5a5);color:#0f172a;border:none;font-weight:600;}
.danger:hover{background:linear-gradient(90deg,#ef4444, #f87171);}
table{width:100%;border-collapse:collapse;margin-top:16px;color:var(--text);background:rgba(255,255,255,0.02);border-radius:8px;overflow:hidden;}
th,td{padding:16px 12px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-size:0.9rem;font-weight:600;background:rgba(255,255,255,0.03);text-transform:uppercase;letter-spacing:0.5px;}
tr:hover td{background:var(--hover-bg);transition:background 0.2s ease;}
td{font-size:14px;}
.item-name{font-weight:500;color:var(--text);}
.type-name{color:var(--muted);}
.quantity{font-weight:600;color:var(--accent);}
.small{width:90px}
.quantity-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quantity-controls input{margin:0}
.history table{margin-top:8px}

/* History specific styles */
#historyPanel .filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 150px auto;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}

#historyDateFilter {
  min-width: 150px;
}

/* Empty state styling */
tbody tr td[colspan] {
  font-style: italic;
  background: rgba(255,255,255,0.02) !important;
}

tbody tr:has(td[colspan]):hover {
  background: rgba(255,255,255,0.02) !important;
}

/* Responsive history filters */
@media (max-width: 1200px) {
  #historyPanel .filters {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  #historyPanel .filters {
    grid-template-columns: 1fr;
  }
}
.muted{color:var(--muted)}
.kbd{background:rgba(255,255,255,0.03);padding:4px 8px;border-radius:6px;font-size:0.85rem}

/* Tabs */
.tabs{display:flex;gap:8px;margin-bottom:16px;background:var(--glass);padding:4px;border-radius:10px;border:1px solid var(--border);}
.tab{padding:10px 16px;border-radius:8px;background:transparent;color:var(--muted);border:none;cursor:pointer;transition:all 0.2s ease;font-weight:500;}
.tab:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.tab.active{background:linear-gradient(90deg,var(--accent), var(--success));color:#0f172a;font-weight:600;}

.row-controls{display:flex;gap:6px;align-items:center}
.row-controls input{width:68px}

/* Configuration page enhancements */
.config-header{text-align:center;margin-bottom:24px}
.config-header h1{font-size:2rem;margin-bottom:8px;background:linear-gradient(90deg,var(--accent), #34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.auth-section{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}
.input-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:320px;
}

.input-group label{
  color:var(--text);
  font-size:0.9rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
}

/* Enhanced controls section */
.controls{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:end;
  margin-bottom:20px;
  padding:20px;
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
}

.controls .input-group{
  min-width:200px;
}

/* Filters styling */
.filters{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:24px;
  padding:20px;
  background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}

.filters input, .filters select{
  min-width:220px;
  flex:1;
}

.section{margin-bottom:32px;padding:20px;background:rgba(255,255,255,0.02);border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.section h2{font-size:1.4rem;margin:0 0 16px 0;display:flex;align-items:center;gap:8px}

.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px;margin:8px 0;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.05)}
.list-item:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}

.item-info{display:flex;flex-direction:column;gap:4px}
.item-name{font-weight:500;color:var(--text)}
.item-meta{font-size:0.85rem;color:var(--muted)}

.types-list, .items-list{margin-top:16px;max-height:300px;overflow-y:auto}
.types-list:empty::after, .items-list:empty::after{content:"Aucun élément pour le moment";color:var(--muted);font-style:italic;display:block;text-align:center;padding:20px}

button.small{padding:6px 12px;font-size:0.85rem}

/* Toast notifications */
.toast{position:fixed;top:20px;right:20px;padding:14px 24px;border-radius:10px;color:#0f172a;font-weight:600;z-index:1000;animation:slideIn 0.3s ease;box-shadow:0 10px 30px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);}
.toast.success{background:linear-gradient(90deg,var(--success), #22d3ee);color:#0f172a;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Filters */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
.filters input, .filters select{min-width:200px;}
.refresh{background:var(--glass) !important;color:var(--text) !important;border:1px solid var(--border) !important;}

/* Special Items Container */
.special-items-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Special Item Cards Base */
.special-item-card {
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

/* Argent Sale Card */
.argent-card {
  border: 2px solid #fbbf24;
  box-shadow: 0 12px 40px rgba(251, 191, 36, 0.15);
}

/* WekNote Card */
.weknote-card {
  border: 2px solid #3b82f6;
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}



.special-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.special-header h2 {
  font-size: 1.8rem;
  margin: 0;
  font-weight: 700;
}

.argent-card .special-header h2 {
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.weknote-card .special-header h2 {
  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.argent-amount, .weknote-amount {
  font-size: 2.5rem;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  font-family: 'Courier New', monospace;
}

.argent-amount {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.weknote-amount {
  color: #3b82f6;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.argent-controls, .weknote-controls {
  margin-bottom: 24px;
}

.argent-controls .input-group, .weknote-controls .input-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.argent-input {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
  border: 2px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.argent-input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
}

.weknote-input {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.05));
  border: 2px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.weknote-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.08));
}

/* Chart Styling */
.chart-container {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.argent-card .chart-container {
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.weknote-card .chart-container {
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.chart-container h3 {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
}

.argent-card .chart-container h3 {
  color: #fbbf24;
}

.weknote-card .chart-container h3 {
  color: #3b82f6;
}

.chart {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-bars {
  display: flex;
  justify-content: space-between;
  align-items: end;
  height: 80px;
  gap: 4px;
  padding: 0 8px;
}

.chart-bar {
  flex: 1;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.chart-bar.positive {
  background: linear-gradient(180deg, #34d399, #10b981);
  box-shadow: 0 -2px 8px rgba(52, 211, 153, 0.3);
}

.chart-bar.negative {
  background: linear-gradient(180deg, #f87171, #ef4444);
  box-shadow: 0 -2px 8px rgba(248, 113, 113, 0.3);
}

.chart-bar:hover {
  transform: scaleY(1.1);
  filter: brightness(1.2);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 8px;
}

.chart-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  flex: 1;
}

/* Type grouping styles */
.type-header {
  background: none !important;
}

.type-header:hover {
  background: none !important;
}

.type-divider {
  background: linear-gradient(135deg, var(--accent), rgba(74,222,128,0.7));
  padding: 12px 16px !important;
  border-radius: 8px;
  border: none !important;
  position: relative;
  box-shadow: 0 2px 8px rgba(74,222,128,0.2);
}

.type-section-title {
  color: #0f172a;
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-row {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.item-row:hover {
  border-left-color: var(--accent);
  background: var(--hover-bg);
}

.type-spacer {
  height: 12px;
  background: none !important;
}

.type-spacer:hover {
  background: none !important;
}

.type-spacer td {
  border-bottom: none !important;
  padding: 0 !important;
}

/* Market Styles */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.market-item-card {
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.04));
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.market-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border-color: var(--accent);
}

.market-item-image {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  font-size: 3rem;
  color: var(--muted);
}

.market-item-info h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  color: var(--text);
}

.item-type {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 8px 0;
}

.item-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px 0;
}

.item-stock {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 16px 0;
}

.market-item-actions button {
  width: 100%;
  padding: 12px;
  font-weight: 600;
}

.market-item-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-market {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
  font-style: italic;
}

/* Orders Styles */
.order-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.order-status.pending {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.order-status.accepted {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.order-status.refused {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.order-status.delivered {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.order-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.order-actions button {
  font-size: 0.75rem;
  padding: 4px 8px;
}

/* Responsive */
@media (max-width:700px){
  .controls{flex-direction:column;align-items:stretch}
  .list-item{flex-direction:column;align-items:flex-start;gap:12px}
  .list-item button{align-self:flex-end}
  th,td{padding:10px}

  .special-items-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .special-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .argent-controls .input-group, .weknote-controls .input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-bars {
    padding: 0 4px;
    gap: 2px;
  }
}

/* Header and Config Link Styling */
header {
  background: var(--panel);
  padding: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.header-buttons {
  display: flex;
  gap: 12px;
}

.config-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.config-link:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(74,222,128,0.1);
}

.config-link.accent {
  background: var(--accent);
  color: #1a1f2e;
  border-color: var(--accent);
}

.config-link.accent:hover {
  background: #22c55e;
  color: #1a1f2e;
}