.container {
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, system-ui, sans-serif;
    background: #f5f5f7;
    margin: 0; padding: 0;
    color: #333;
}

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

ul { list-style: none; padding: 0; margin: 0; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */

#topbar {
    position: sticky; top: 0; z-index: 100;
    background: #fff; border-bottom: 1px solid #ddd;
    padding: 10px 20px;
}
#topbar-inner { display: flex; align-items: center; gap: 12px; }
#topbar img { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; }
#topbar h1 { font-size: 1em; margin: 0; flex: 1; color: #333; }
#topbar .logout { font-size: 0.85em; color: #888; text-decoration: none; white-space: nowrap; }
#topbar .logout:hover { color: #c00; }

/* ── Main ─────────────────────────────────────────────────────────────────── */

#main { padding-top: 24px; padding-bottom: 60px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card { background: #fff; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #f0f0f5; border-bottom: 1px solid #ddd;
    font-weight: 600; font-size: 0.95em;
}
.card-body { padding: 14px 16px; }

/* ── Lists ────────────────────────────────────────────────────────────────── */

li { padding: 6px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f0f0; }
li:last-child { border-bottom: none; }

.empty { color: #999; font-style: italic; margin: 0; }

.user-group-label {
    font-size: 0.75em; color: #999; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 10px 0 2px;
}
.user-group-label:first-child { padding-top: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.edit-btn {
    font-size: 0.8em; padding: 2px 10px; border: 1px solid #0066cc;
    border-radius: 4px; color: #0066cc; text-decoration: none; white-space: nowrap;
}
.edit-btn:hover { background: #0066cc; color: #fff; text-decoration: none; }

.copy-btn {
    font-size: 0.8em; padding: 2px 10px; border: 1px solid #888;
    border-radius: 4px; color: #555; background: none; cursor: pointer; white-space: nowrap;
}
.copy-btn:hover { background: #888; color: #fff; }

.delete-btn {
    font-size: 0.8em; padding: 2px 10px; border: 1px solid #c00;
    border-radius: 4px; color: #c00; background: none; cursor: pointer; white-space: nowrap;
}
.delete-btn:hover { background: #c00; color: #fff; }

.action-btn {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: #0066cc; color: #fff; font-size: 0.9em; cursor: pointer; white-space: nowrap;
}
.action-btn:hover { background: #0055aa; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.form-row input[type=text], .form-row input[type=password] {
    padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 0.9em; font-family: inherit; min-width: 0;
}

.error-msg { color: #c00; font-size: 0.85em; margin-top: 6px; }

/* ── User list ────────────────────────────────────────────────────────────── */

#users-list .user-row { padding: 6px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f0f0; }
#users-list .user-row:last-child { border-bottom: none; }
#users-list .username { flex: 1; }

.role-badge {
    font-size: 0.7em; padding: 1px 6px; border-radius: 10px;
    background: #e8f0fe; color: #1a56c4;
}
.role-badge.admin { background: #fef3c7; color: #92400e; }

/* ── QR ───────────────────────────────────────────────────────────────────── */

#qr-section p { font-size: 0.9em; color: #555; margin: 0 0 10px; }
#qr-container { display: none; margin-top: 16px; }
#qrcode { width: 200px; height: 200px; }
#qr-url { font-size: 0.75em; color: #888; word-break: break-all; margin-top: 6px; max-width: 300px; }

/* ── Editor: Save button ──────────────────────────────────────────────────── */

#save-btn {
    padding: 7px 18px; border: none; border-radius: 6px;
    background: #34c759; color: #fff; font-size: 0.9em;
    cursor: pointer; font-weight: 600;
}
#save-btn.dirty { background: #ff9500; }
#save-btn:disabled { background: #aaa; cursor: default; }

/* ── Editor: Field row ────────────────────────────────────────────────────── */

.field-row { margin-bottom: 20px; }
.field-row label { display: block; font-size: 0.8em; color: #888; margin-bottom: 4px; }
.field-row input[type=text] {
    width: 100%; padding: 8px 10px; border: 1px solid #ccc;
    border-radius: 6px; font-size: 1em; font-family: inherit;
}

/* ── Editor: Category section ─────────────────────────────────────────────── */

.cat-section {
    background: #fff; border: 1px solid #ddd; border-radius: 10px;
    margin-bottom: 16px; overflow: hidden;
}
.cat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #f0f0f5; border-bottom: 1px solid #ddd;
}
.cat-name { flex: 1; font-weight: 600; font-size: 0.95em; }
.cat-actions { display: flex; gap: 4px; }

button.icon-btn {
    background: none; border: 1px solid #ccc; border-radius: 5px;
    padding: 3px 7px; cursor: pointer; font-size: 0.85em; color: #555;
}
button.icon-btn:hover { background: #eee; }
button.icon-btn.danger:hover { background: #fdecea; border-color: #f44; color: #c00; }

/* ── Editor: Product table ────────────────────────────────────────────────── */

.prod-table { width: 100%; border-collapse: collapse; }
.prod-table th {
    text-align: left; font-size: 0.75em; color: #888;
    padding: 6px 10px; border-bottom: 1px solid #eee; font-weight: 500;
}
.prod-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.prod-table tr:last-child td { border-bottom: none; }
.prod-table input[type=text], .prod-table input[type=number] {
    border: 1px solid transparent; border-radius: 4px; padding: 4px 6px;
    font-size: 0.9em; font-family: inherit; width: 100%; background: transparent;
}
.prod-table input[type=text]:hover, .prod-table input[type=number]:hover { border-color: #ccc; }
.prod-table input[type=text]:focus, .prod-table input[type=number]:focus {
    border-color: #0066cc; outline: none; background: #fff;
}
.prod-table select {
    border: 1px solid transparent; border-radius: 4px; padding: 4px 6px;
    font-size: 0.9em; font-family: inherit; width: 100%; background: transparent; cursor: pointer;
}
.prod-table select:hover { border-color: #ccc; }
.prod-table select:focus { border-color: #0066cc; outline: none; background: #fff; }
.col-name { width: 40%; }
.col-price { width: 90px; }
.col-cat { width: 30%; }
.col-actions { width: 100px; text-align: right; white-space: nowrap; }
.add-prod-row td { padding: 6px 10px; }
.add-prod-btn {
    background: none; border: none; color: #0066cc; font-size: 0.85em;
    cursor: pointer; padding: 0;
}
.add-prod-btn:hover { text-decoration: underline; }

/* ── Editor: Add category bar ─────────────────────────────────────────────── */

#add-cat-bar { display: flex; gap: 8px; margin-top: 8px; }
#add-cat-bar button {
    padding: 8px 16px; border: none; border-radius: 6px;
    background: #0066cc; color: #fff; font-size: 0.9em; cursor: pointer;
}
#add-cat-bar button:hover { background: #0055aa; }

/* ── Editor: Toast ────────────────────────────────────────────────────────── */

#toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 10px 20px; border-radius: 8px;
    font-size: 0.9em; opacity: 0; transition: opacity 0.3s; pointer-events: none;
    z-index: 200;
}
#toast.show { opacity: 1; }
#toast.error { background: #c00; }

/* ── Editor: Dialog ───────────────────────────────────────────────────────── */

dialog {
    border: none; border-radius: 10px; padding: 24px; max-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
dialog::backdrop { background: rgba(0,0,0,0.4); }
dialog h3 { margin: 0 0 10px; font-size: 1em; }
dialog p { font-size: 0.9em; color: #555; margin: 0 0 20px; }
.dialog-btns { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-btns button { padding: 7px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9em; }
.btn-cancel { background: #eee; color: #333; }
.btn-cancel:hover { background: #ddd; }
.btn-danger { background: #c00; color: #fff; }
.btn-danger:hover { background: #a00; }

.loading { color: #888; font-style: italic; padding: 40px 0; text-align: center; }