:root{--primary:#0ea5e9;--header-bg:#f8fafc;--link:#0ea5e9}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;padding:0;background:#fafafa;color:#111}
.container{max-width:960px;margin:0 auto;padding:1rem}
.header{background:var(--header-bg)}
.nav{display:flex;gap:1rem;align-items:center}
.nav .brand{font-weight:700}
.nav .spacer{flex:1}
.badge{font-size:.75rem;background:#e5e7eb;color:#111;padding:.2rem .5rem;border-radius:999px}
.btn{display:inline-block;padding:.5rem .75rem;background:var(--primary);color:#fff;text-decoration:none;border-radius:6px;border:0;cursor:pointer}
.btn:hover{filter:brightness(.9)}
.alert{background:#fef3c7;padding:.5rem .75rem;border-radius:6px;margin:.5rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:1rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}
.row{display:grid;grid-template-columns:2fr 1fr 2fr 2fr;gap:.5rem;margin-bottom:.5rem}
.small{font-size:.875rem}
.muted{color:#6b7280}

/* Role themes */
body.role-owner{--primary:#16a34a;--header-bg:#f0fdf4;--link:#16a34a}
body.role-employee{--primary:#0ea5e9;--header-bg:#f0f9ff;--link:#0ea5e9}
body.role-admin{--primary:#a855f7;--header-bg:#faf5ff;--link:#a855f7}
body.role-customer{--primary:#f59e0b;--header-bg:#fffbeb;--link:#f59e0b}

a{color:var(--link)}

/* Dashboard */
.dashboard-container { display: flex; }
.sidebar { width: 200px; background-color: #f8f9fa; padding: 1rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-nav .nav-item { color: #333; text-decoration: none; padding: .5rem; border-radius: 4px; }
.sidebar-nav .nav-item.active, .sidebar-nav .nav-item:hover { background-color: var(--primary); color: #fff; }
.dashboard-main { flex: 1; padding: 1rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.shop-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; flex-direction: column; }
.shop-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
.shop-card-header h3 { margin: 0; }
.shop-card-body { display: flex; justify-content: space-around; padding: 1rem; }
.metric { text-align: center; }
.metric-value { font-size: 1.5rem; font-weight: 700; }
.metric-label { font-size: .875rem; color: #6b7280; }
.shop-card-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem; border-top: 1px solid #e5e7eb; }
.btn-primary { background-color: var(--primary); color: #fff; border: 0; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }
.btn-secondary { background-color: #e5e7eb; color: #333; border: 0; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }
.btn-view-live { font-size: .875rem; }

/* Orders */
.order-list { display: flex; flex-direction: column; gap: 1rem; }
.order-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; cursor: pointer; }
.order-info { display: flex; flex-direction: column; }
.order-id { font-weight: 700; }
.order-customer { font-size: .875rem; color: #6b7280; }
.order-status-total { display: flex; align-items: center; gap: 1rem; }
.order-status { padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.status-pending { background-color: #fef3c7; color: #92400e; }
.status-shipped { background-color: #dbeafe; color: #1e40af; }
.status-delivered { background-color: #dcfce7; color: #166534; }
.status-cancelled { background-color: #fee2e2; color: #991b1b; }
.order-total { font-weight: 700; }
.order-card-body { padding: 1rem; border-top: 1px solid #e5e7eb; }

/* Products */
.main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.product-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; flex-direction: column; }
.product-image { width: 100%; height: 150px; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.product-info { padding: 1rem; }
.product-name { margin: 0; font-size: 1rem; }
.product-price { margin: .25rem 0 0; font-size: .875rem; color: #6b7280; }
.product-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 1rem 1rem; }
.btn-danger { background-color: #fee2e2; color: #991b1b; border: 0; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; }
.form-control { width: 100%; padding: .5rem; border: 1px solid #e5e7eb; border-radius: 4px; }

@media (max-width: 768px) {
  .dashboard-container { flex-direction: column; }
  .sidebar { width: 100%; border-bottom: 1px solid #e5e7eb; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; }
}