/* Admin & page readability fixes: left-align content and tidy tiles/cards */

/* Make main containers left-aligned for readability */
.container, main, header, footer, .receipt-container, .card, .tile, .tile .label, .tile .value {
  text-align: left !important;
}

/* Improve tile layout */
.tile-grid { display:flex; flex-wrap:wrap; gap:16px; }
.tile { flex: 1 1 240px; min-width:220px; }
.tile .label { font-weight:600; color: #333; margin-bottom:6px; }
.tile .value { font-size:1.1rem; color:#111; }

/* Ensure cards have padding and readable line-height */
.card { padding:16px; line-height:1.4; }

/* Tables: left align text for readability */
.table th, .table td { text-align: left; }

/* Navigation: keep links inline and readable */
.header .nav { display:flex; gap:12px; align-items:center; }
.header .nav a { text-decoration:none; }

/* Slightly reduce wide margins on large screens */
@media(min-width:1024px) {
  .container { max-width:1100px; margin:0 auto; }
}

/* Small helper for centered logos but left content */
.brand { display:flex; gap:12px; align-items:center; }
.brand .logo { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#333; color:#fff; border-radius:6px; }

/* Ensure container keeps the same horizontal padding as the main stylesheet */
.container { padding-left:15px; padding-right:15px; }

/* Remove unexpected side offsets on cards used as main content blocks */
.card { margin-left:0 !important; margin-right:0 !important; }

/* Small cart/bag badge styles used in header nav */
.bag { display:inline-flex; align-items:center; gap:8px; }
.bag small { background:#c79a5a; color:#fff; padding:3px 7px; border-radius:14px; font-weight:600; font-size:0.9rem; }

/* Category filter dropdown styling */
#categoryFilter {
  color: #333;
  background-color: #fff;
}

#categoryFilter option {
  color: #333;
  background-color: #fff;
}

#categoryFilter option:checked,
#categoryFilter option:selected {
  color: #333;
  background-color: #f8f9fa;
}

#categoryFilter:focus {
  border-color: #c79a5a;
  box-shadow: 0 0 0 0.2rem rgba(199, 154, 90, 0.25);
}

/* Ensure muted/pending/cart text is readable across admin/pos pages */
.p-muted { color: #666 !important; }
.pos .card, .product-card, .cart-item { color: #222 !important; }
.pos .p-muted { color: #666 !important; }

/* Make sure buttons in POS pending list are visible */
.btn { color: inherit; }

/* Strong overrides for cart and pending lists (force readable text even if other utilities apply white) */
#cartArea, #cartArea * { color: #222 !important; }
#cartList, #cartList * { color: #222 !important; }
#pendingList, #pendingList * { color: #222 !important; }
#pendingList .p-muted { color: #666 !important; }

/* Also ensure any small badge text remains readable */
.bag small { color: #fff !important; }

/* Ensure headings, labels and form text inside cards are readable (POS, Cart, Pending panels) */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card p, .card label, .card .p-muted, .card small,
.card input, .card select, .card textarea { color: #222 !important; }

/* POS-specific: ensure right-column titles and cart list are visible */
.pos .card h3, .pos .card .p-muted, .pos .card label { color: #222 !important; }

/* Keep button text color intact (avoid overriding colored buttons) by excluding .btn-primary/.btn-danger etc. */
.card .btn { color: inherit; }