:root {
    --pos-cream: #FDF6EC;
    --pos-cream-dark: #F5EBD8;
    --pos-charcoal: #2D3436;
    --pos-charcoal-light: #3D4648;
    --pos-terracotta: #C1694F;
    --pos-terracotta-dark: #A8563E;
    --pos-terracotta-light: #E8A48E;
    --pos-green: #6B9B7B;
    --pos-green-light: #D4E8DA;
    --pos-amber: #D4A843;
    --pos-amber-light: #FFF3CD;
    --pos-red: #C0392B;
    --pos-red-light: #F8D7DA;
    --pos-blue: #5B8CB5;
    --pos-text: #2D3436;
    --pos-text-muted: #636E72;
    --pos-border: #DFD3C1;
    --pos-sidebar-width: 220px;
}

* { box-sizing: border-box; }

body {
    background-color: var(--pos-cream);
    color: var(--pos-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 60px;
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

/* Navbar */
.pos-navbar {
    background-color: var(--pos-charcoal) !important;
    padding: 0.5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.pos-navbar .navbar-brand {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Sidebar */
.pos-sidebar {
    width: var(--pos-sidebar-width);
    min-height: calc(100vh - 56px);
    background-color: var(--pos-charcoal);
    flex-direction: column;
    padding-top: 0.5rem;
    position: sticky;
    top: 56px;
    overflow-y: auto;
}
.pos-sidebar .nav-link {
    color: #B2BEC3;
    padding: 0.65rem 1.2rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.pos-sidebar .nav-link:hover {
    color: #FFF;
    background-color: var(--pos-charcoal-light);
}
.pos-sidebar .nav-link.active {
    color: #FFF;
    background-color: var(--pos-charcoal-light);
    border-left-color: var(--pos-terracotta);
}
.pos-sidebar .nav-link i { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.pos-sidebar .nav-divider {
    border-top: 1px solid var(--pos-charcoal-light);
    margin: 0.5rem 0;
}

/* Main content */
.pos-main {
    padding: 1.2rem;
    max-width: 100%;
    overflow-x: hidden;
}

/* Messages */
.pos-messages { margin-bottom: 0.5rem; }

/* Cards */
.pos-card {
    background: #FFF;
    border: 1px solid var(--pos-border);
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pos-card-header {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pos-border);
}

/* Buttons */
.btn-pos-primary {
    background-color: var(--pos-terracotta);
    border-color: var(--pos-terracotta);
    color: #FFF;
    font-weight: 500;
}
.btn-pos-primary:hover, .btn-pos-primary:focus {
    background-color: var(--pos-terracotta-dark);
    border-color: var(--pos-terracotta-dark);
    color: #FFF;
}
.btn-pos-success {
    background-color: var(--pos-green);
    border-color: var(--pos-green);
    color: #FFF;
}
.btn-pos-success:hover { background-color: #5A8A6A; color: #FFF; }
.btn-pos-warning {
    background-color: var(--pos-amber);
    border-color: var(--pos-amber);
    color: #FFF;
}
.btn-pos-danger {
    background-color: var(--pos-red);
    border-color: var(--pos-red);
    color: #FFF;
}
.btn-pos-danger:hover { background-color: #A93226; color: #FFF; }

/* Touch-friendly targets */
.btn-touch {
    min-height: 48px;
    min-width: 48px;
    font-size: 1rem;
    padding: 0.6rem 1rem;
}

/* Table map */
.table-card {
    background: #FFF;
    border: 2px solid var(--pos-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.table-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
.table-card.available {
    border-color: var(--pos-green);
    background: var(--pos-green-light);
}
.table-card.occupied {
    border-color: var(--pos-terracotta);
    background: var(--pos-terracotta-light);
}
.table-card.reserved {
    border-color: var(--pos-amber);
    background: var(--pos-amber-light);
}
.table-card .table-number { font-size: 1.5rem; font-weight: 700; }
.table-card .table-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.table-card .table-info { font-size: 0.8rem; color: var(--pos-text-muted); }

/* Kitchen display */
.kitchen-card {
    background: #FFF;
    border: 2px solid var(--pos-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.kitchen-card.status-sent { border-color: var(--pos-blue); }
.kitchen-card.status-preparing { border-color: var(--pos-amber); }
.kitchen-card.status-ready { border-color: var(--pos-green); }
.kitchen-card-header {
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}
.kitchen-card.status-sent .kitchen-card-header { background: #EBF3FA; }
.kitchen-card.status-preparing .kitchen-card-header { background: var(--pos-amber-light); }
.kitchen-card.status-ready .kitchen-card-header { background: var(--pos-green-light); }
.kitchen-card-body { padding: 0.8rem 1rem; }
.kitchen-item { padding: 0.4rem 0; border-bottom: 1px solid #F0E8D8; }
.kitchen-item:last-child { border-bottom: none; }
.kitchen-item-name { font-weight: 600; }
.kitchen-item-mods { color: var(--pos-text-muted); font-size: 0.85rem; padding-left: 1rem; }
.kitchen-item-notes {
    background: var(--pos-amber-light);
    border-left: 3px solid var(--pos-amber);
    padding: 0.3rem 0.6rem;
    margin: 0.3rem 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.kitchen-item.new-round { background: #FFF8E1; }
.kitchen-timer {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.kitchen-timer.warning { background: var(--pos-amber-light); color: #856404; }
.kitchen-timer.danger { background: var(--pos-red-light); color: var(--pos-red); }

/* Order detail */
.order-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #F0E8D8;
}
.order-item-row:last-child { border-bottom: none; }
.item-status-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
}
.item-status-badge.pending { background: #E8E8E8; }
.item-status-badge.sent { background: #D6EAF8; color: #2980B9; }
.item-status-badge.preparing { background: var(--pos-amber-light); color: #856404; }
.item-status-badge.ready { background: var(--pos-green-light); color: #2E7D32; }
.item-status-badge.served { background: #E8F5E9; color: #1B5E20; }
.item-status-badge.cancelled { background: var(--pos-red-light); color: var(--pos-red); text-decoration: line-through; }

/* Menu grid for order entry */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
}
.menu-item-btn {
    background: #FFF;
    border: 1px solid var(--pos-border);
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.menu-item-btn:hover {
    border-color: var(--pos-terracotta);
    background: #FFF8F5;
}
.menu-item-btn.sold-out {
    opacity: 0.5;
    cursor: not-allowed;
}
.menu-item-btn .item-name { font-weight: 600; font-size: 0.9rem; }
.menu-item-btn .item-price { color: var(--pos-terracotta); font-weight: 500; font-size: 0.85rem; }

/* Category tabs */
.category-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}
.category-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--pos-border);
    border-radius: 20px;
    background: #FFF;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
    text-decoration: none;
    color: var(--pos-charcoal);
}
.category-tab:hover {
    background: var(--pos-cream-dark);
    color: var(--pos-charcoal);
    border-color: var(--pos-border);
    text-decoration: none;
}
.category-tab.active {
    background: var(--pos-terracotta);
    color: #FFF;
    border-color: var(--pos-terracotta);
    text-decoration: none;
}

/* Bill summary */
.bill-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}
.bill-summary-row.total {
    font-weight: 700;
    font-size: 1.2rem;
    border-top: 2px solid var(--pos-charcoal);
    padding-top: 0.5rem;
    margin-top: 0.3rem;
}

/* Status badges */
.badge-status {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-draft { background: #E8E8E8; color: #555; }
.badge-sent { background: #D6EAF8; color: #2980B9; }
.badge-preparing { background: var(--pos-amber-light); color: #856404; }
.badge-ready { background: var(--pos-green-light); color: #2E7D32; }
.badge-served { background: #E8F5E9; color: #1B5E20; }
.badge-billed { background: #E8D5F5; color: #6C3483; }
.badge-closed { background: #D5DBDB; color: #2D3436; }
.badge-cancelled { background: var(--pos-red-light); color: var(--pos-red); }

/* Connection status */
#connection-status.disconnected {
    background-color: var(--pos-red) !important;
    animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Bottom mobile nav */
.pos-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pos-charcoal);
    display: flex;
    justify-content: space-around;
    padding: 0.3rem 0;
    z-index: 1030;
    border-top: 1px solid var(--pos-charcoal-light);
}
.pos-bottom-nav-item {
    color: #B2BEC3;
    text-decoration: none;
    text-align: center;
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.pos-bottom-nav-item i { font-size: 1.3rem; }
.pos-bottom-nav-item.active { color: var(--pos-terracotta-light); }

/* Responsive table */
.table-responsive { overflow-x: auto; }

/* Receipt preview */
.receipt-preview {
    background: #FFF;
    border: 1px dashed #CCC;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 1.5rem;
    max-width: 350px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Dialog overlay */
.pos-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pos-dialog {
    background: #FFF;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Shift badge */
.shift-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}
.shift-badge.open { background: var(--pos-green-light); color: #2E7D32; }
.shift-badge.closed { background: #E8E8E8; color: #555; }

/* Utility */
.text-muted { color: var(--pos-text-muted) !important; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

/* Print styles */
@media print {
    .pos-navbar, .pos-sidebar, .pos-bottom-nav, .pos-messages,
    .btn, .no-print { display: none !important; }
    body { background: #FFF; padding: 0; }
    .pos-main { padding: 0; }
}