/* Core Layout */
:root {
  --bg: #0f1115;
  --bg-alt: #1b1f27;
  --panel: #212734;
  --panel-border: #2e3442;
  --text: #f5f7fa;
  --text-dim: #9aa4b1;
  --primary: #3d7dff;
  --primary-hover: #2f6ce6;
  --danger: #db3552;
  --danger-hover: #c02a44;
  --radius: 10px;
  --mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --trans: 140ms ease;
}

* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0; padding:0 0 60px; font-family: system-ui, Arial, sans-serif; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { font-weight:600; letter-spacing:.5px; margin:.2em 0 .6em; }

.app-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:16px 28px; background:linear-gradient(135deg,#18202b,#101419); border-bottom:1px solid #1e2530; position:sticky; top:0; z-index:20; }
.app-header h1 { font-size:1.3rem; margin:0; }

.toolbar { display:flex; gap:10px; flex-wrap:wrap; }

.layout { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap:24px; padding:24px 28px; }
.panel { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:18px 20px 22px; display:flex; flex-direction:column; gap:14px; box-shadow:0 4px 16px -6px rgba(0,0,0,.55); position:relative; overflow:hidden; }
.panel.full-width { grid-column:1 / -1; }
.panel-header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.panel-header h2 { font-size:1.05rem; margin:0; }
.hint { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }
.note { font-size:.75rem; color:var(--text-dim); }

/* Buttons */
.btn { background:#2a313d; border:1px solid #363f4c; color:var(--text); padding:8px 16px; border-radius:6px; cursor:pointer; font-size:.85rem; line-height:1; font-weight:500; letter-spacing:.3px; display:inline-flex; align-items:center; gap:6px; transition:var(--trans); position:relative; }
.btn:hover { background:#313a48; }
.btn.primary { background:var(--primary); border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-hover); }
.btn.danger { background:var(--danger); border-color:var(--danger); }
.btn.danger:hover { background:var(--danger-hover); }
.btn.small { padding:6px 12px; font-size:.7rem; }
.btn:active { transform:translateY(1px); }

/* Tables */
.table-wrapper { overflow:auto; border-radius:6px; border:1px solid #303744; }
.data-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.data-table th, .data-table td { padding:8px 10px; text-align:left; border-bottom:1px solid #2c333f; white-space:nowrap; }
.data-table th { background:#2a313d; font-weight:600; font-size:.7rem; color:var(--text-dim); letter-spacing:.5px; text-transform:uppercase; }
.data-table tbody tr:hover { background:#28303b; }
.data-table tbody tr:last-child td { border-bottom:none; }

/* Code blocks */
.code-block { background:#12161d; border:1px solid #232a35; padding:12px 14px; border-radius:8px; font-family: var(--mono); font-size:.7rem; line-height:1.35; overflow:auto; max-height:300px; color: var(--text); }
.code-block.placeholder { color:#7a8694; font-style:italic; }
.code-block.small { max-height:160px; }

/* Dialog/Modal */
.modal { width: min(580px, 92%); border:none; padding:0; background:transparent; }
.modal.modal-large { width: min(800px, 95%); max-height: 90vh; }
.modal.modal-xlarge { width: min(1100px, 96%); max-height: 92vh; }
.modal::backdrop { background:rgba(8,11,16,.72); backdrop-filter: blur(4px); }
.modal-form { background:linear-gradient(145deg,#1e2530,#161b23); border:1px solid #2e3743; border-radius:14px; padding:26px 30px 30px; display:flex; flex-direction:column; gap:14px; position:relative; box-shadow:0 16px 40px -10px rgba(0,0,0,.65); max-height: 85vh; overflow-y: auto; }
.modal-header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-header-section h3 { margin: 0; }
.btn-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; line-height: 1; transition: var(--trans); }
.btn-close:hover { color: var(--danger); transform: scale(1.1); }
.modal-form h3 { margin:0 0 4px; font-size:1.05rem; letter-spacing:.4px; }
.modal-form h4 { margin: 0 0 10px; font-size: 0.9rem; letter-spacing: 0.3px; color: var(--primary); }
.modal-form label { display:flex; flex-direction:column; gap:6px; font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim); font-weight:600; }
.modal-form input, .modal-form textarea, .modal-form select { background:#12161c; border:1px solid #2d3541; border-radius:6px; padding:10px 12px; color:var(--text); font-size:.8rem; font-family:inherit; outline:none; transition:var(--trans); }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(61,125,255,.25); }
.modal-form textarea { font-family: var(--mono); font-size: .75rem; line-height: 1.4; resize: vertical; min-height: 80px; }
.modal-form .actions { margin-top:6px; display:flex; gap:10px; justify-content:flex-end; flex-wrap: wrap; }
.form-section { background: rgba(30, 37, 48, 0.5); border: 1px solid #2a313d; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.product-card, .category-card { background: #1a1f2b; border: 1px solid #2e3442; border-radius: 6px; padding: 14px; margin-bottom: 12px; position: relative; }
.product-card-header, .category-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.product-card-header h5, .category-card-header h5 { margin: 0; font-size: 0.85rem; color: var(--text); }
.btn-remove { background: var(--danger); border: 1px solid var(--danger); color: white; padding: 4px 10px; font-size: 0.7rem; border-radius: 4px; cursor: pointer; transition: var(--trans); }
.btn-remove:hover { background: var(--danger-hover); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-group-full { grid-column: 1 / -1; }

/* Footer */
.app-footer { position:fixed; bottom:0; left:0; right:0; padding:10px 20px; background:#13171d; border-top:1px solid #1d242d; font-size:.65rem; letter-spacing:.7px; text-transform:uppercase; color:#576170; display:flex; justify-content:center; gap:8px; }

/* Scrollbars (Webkit) */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#13171d; }
::-webkit-scrollbar-thumb { background:#2d3642; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#384351; }

/* JSON Collapsible */
.json-tree { font-family: var(--mono); font-size: .7rem; line-height: 1.4; }
.json-object, .json-array { margin: 0; }
.json-toggle { cursor: pointer; user-select: none; color: var(--text-dim); margin-right: 4px; display: inline-block; width: 12px; }
.json-toggle:hover { color: var(--primary); }
.json-toggle.expanded:before { content: '▼'; }
.json-toggle.collapsed:before { content: '▶'; }
.json-key { color: #7dd3fc; font-weight: 500; }
.json-string { color: #86efac; }
.json-number { color: #fbbf24; }
.json-boolean { color: #fb7185; }
.json-null { color: #9ca3af; }
.json-bracket { color: var(--text-dim); font-weight: bold; }
.json-content { margin-left: 16px; overflow: hidden; transition: all 0.2s ease; }
.json-content.collapsed { display: none; }
.json-item { margin: 2px 0; }
.json-comma { color: var(--text-dim); }

/* Utility */
.hidden { display:none !important; }
.fade-in { animation:fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* Responsive adjustments */
@media (max-width: 840px) {
  .layout { grid-template-columns: 1fr; padding:18px 18px 90px; }
  .panel { padding:16px 16px 20px; }
  .modal.modal-xlarge { width: 98%; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Products Page Specific */
.placeholder-message { padding: 40px 20px; text-align: center; color: var(--text-dim); }
.placeholder-message p { margin-bottom: 20px; font-size: 1rem; }
.loading { padding: 40px 20px; text-align: center; color: var(--text-dim); }
.error-message { padding: 20px; background: rgba(219, 53, 82, 0.1); border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); }

.products-summary { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; align-items: stretch; }
.summary-card { background: var(--bg-alt); border: 1px solid var(--panel-border); border-radius: 8px; padding: 16px 20px; flex: 1; min-width: 140px; }
.summary-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 8px; }
.summary-value { font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.summary-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

.products-section { margin-bottom: 32px; }
.products-section h3 { font-size: 1.1rem; margin-bottom: 16px; color: var(--primary); }

.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.category-item { background: var(--bg-alt); border: 1px solid var(--panel-border); border-radius: 6px; padding: 14px 16px; }
.category-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.category-id { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 6px; }
.category-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.3; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.product-item { background: var(--bg-alt); border: 1px solid var(--panel-border); border-radius: 6px; padding: 14px 16px; }
.product-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 10px; }
.product-name { font-size: 0.95rem; font-weight: 600; flex: 1; }
.product-type-badge { font-size: 0.65rem; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.product-type-badge.type-1 { background: rgba(61, 125, 255, 0.2); color: #7da8ff; }
.product-type-badge.type-2 { background: rgba(134, 239, 172, 0.2); color: #86efac; }
.product-type-badge.type-3 { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

.product-detail-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.75rem; }
.detail-label { color: var(--text-dim); }
.detail-value { color: var(--text); font-weight: 500; }
.product-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.3; margin: 8px 0; padding: 8px; background: rgba(0,0,0,0.2); border-radius: 4px; }
.product-status { font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; margin-top: 10px; display: inline-block; }
.product-status.status-visible { background: rgba(134, 239, 172, 0.2); color: #86efac; }
.product-status.status-hidden { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }