/* ── ZWP PORTAL CSS ─────────────────────────────────── */
:root {
  --zwp-forest:  #243d18;
  --zwp-leaf:    #3e6b26;
  --zwp-gold:    #c89212;
  --zwp-cream:   #f5f0e5;
  --zwp-white:   #ffffff;
  --zwp-earth:   #2c1f14;
  --zwp-red:     #c0392b;
  --zwp-border:  #e0ddd5;
  --zwp-radius:  10px;
  --zwp-shadow:  0 4px 20px rgba(0,0,0,0.10);
  --zwp-header-h: 56px;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── LOGIN ───────────────────────────────────────────── */
.zwp-login-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--zwp-forest) 0%,#1a3010 100%); padding:40px 20px; }
.zwp-login-card { background:var(--zwp-white); border-radius:16px; padding:48px 40px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; }
.zwp-login-logo img { height:80px; margin:0 auto 16px; }
.zwp-logo-text { font-size:1.6rem; font-weight:700; color:var(--zwp-forest); margin-bottom:16px; }
.zwp-login-card h2 { font-size:1.5rem; font-weight:700; color:var(--zwp-earth); margin:0 0 6px; }
.zwp-login-sub { color:#888; font-size:.9rem; margin-bottom:28px; }

/* ── FIELDS ──────────────────────────────────────────── */
.zwp-field { margin-bottom:16px; text-align:left; }
.zwp-field label { display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#555; margin-bottom:6px; }
.zwp-field input, .zwp-input { width:100%; padding:11px 14px; border:2px solid var(--zwp-border); border-radius:8px; font-size:.96rem; color:var(--zwp-earth); transition:border-color .2s; background:var(--zwp-white); }
.zwp-field input:focus, .zwp-input:focus { outline:none; border-color:var(--zwp-leaf); }
.zwp-input--sm { padding:7px 10px; font-size:.86rem; }
.zwp-input-row { display:flex; gap:8px; }
.zwp-field-hint { font-size:.75rem; color:#999; margin-top:4px; display:block; }
.zwp-req { color:var(--zwp-red); }
.zwp-checkbox-group { display:flex; gap:16px; }
.zwp-checkbox-group label { font-weight:400; text-transform:none; font-size:.9rem; display:flex; align-items:center; gap:6px; }
.zwp-password-display { background:#f6f6f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:.9rem; margin-top:6px; word-break:break-all; }
.zwp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.zwp-form-card { background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); padding:28px; }
.zwp-form-card h3 { margin:0 0 20px; font-size:1rem; color:var(--zwp-forest); }
.zwp-form-actions { display:flex; gap:10px; margin-top:24px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.zwp-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; font-size:.9rem; font-weight:700; border-radius:50px; border:2px solid transparent; cursor:pointer; transition:all .2s; text-decoration:none; white-space:nowrap; font-family:inherit; }
.zwp-btn--primary { background:var(--zwp-leaf); color:var(--zwp-white); border-color:var(--zwp-leaf); }
.zwp-btn--primary:hover { background:var(--zwp-forest); border-color:var(--zwp-forest); }
.zwp-btn--gold { background:var(--zwp-gold); color:var(--zwp-white); border-color:var(--zwp-gold); }
.zwp-btn--gold:hover { background:#a07a0e; border-color:#a07a0e; }
.zwp-btn--ghost { background:transparent; color:var(--zwp-leaf); border-color:var(--zwp-leaf); }
.zwp-btn--ghost:hover { background:var(--zwp-leaf); color:var(--zwp-white); }
.zwp-btn--full { width:100%; justify-content:center; }
.zwp-btn--lg { padding:15px 28px; font-size:1.05rem; }
.zwp-btn--sm { padding:6px 14px; font-size:.8rem; }
.zwp-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── ALERTS ──────────────────────────────────────────── */
.zwp-alert { padding:12px 16px; border-radius:8px; font-size:.88rem; margin-bottom:16px; }
.zwp-alert--error   { background:#fdecea; color:var(--zwp-red); border:1px solid #f5c6c4; }
.zwp-alert--success { background:#e9f6ec; color:var(--zwp-leaf); border:1px solid #b5dbbf; }

/* ── HEADER ──────────────────────────────────────────── */
.zwp-header { display:flex; align-items:center; gap:12px; background:var(--zwp-forest); padding:0 20px; height:var(--zwp-header-h); color:var(--zwp-white); position:sticky; top:0; z-index:100; flex-shrink:0; }
.zwp-header--admin { gap:0; }
.zwp-header__logo { height:36px; }
.zwp-header__brand-text { font-size:1.1rem; font-weight:700; color:var(--zwp-white); white-space:nowrap; }
.zwp-header__brand { flex-shrink:0; margin-right:16px; }
.zwp-header__user { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.zwp-header__greeting { font-size:.82rem; color:rgba(255,255,255,.65); white-space:nowrap; }
.zwp-header .zwp-btn--ghost { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.3); }
.zwp-header .zwp-btn--ghost:hover { background:rgba(255,255,255,.12); color:var(--zwp-white); }

/* ── ADMIN NAV ───────────────────────────────────────── */
.zwp-admin-nav { display:flex; overflow-x:auto; flex:1; scrollbar-width:none; }
.zwp-admin-nav::-webkit-scrollbar { display:none; }
.zwp-anav { background:transparent; border:none; color:rgba(255,255,255,.65); font-size:.82rem; font-weight:600; padding:0 14px; height:var(--zwp-header-h); cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; transition:all .2s; font-family:inherit; }
.zwp-anav:hover  { color:var(--zwp-white); background:rgba(255,255,255,.06); }
.zwp-anav.active { color:var(--zwp-white); border-bottom-color:var(--zwp-gold); }

/* ── ADMIN PORTAL ────────────────────────────────────── */
.zwp-admin-portal { background:var(--zwp-cream); min-height:calc(100vh - var(--zwp-header-h)); }
.zwp-ap-panel { display:none; }
.zwp-ap-panel.active { display:block; }
.zwp-ap-inner { max-width:1140px; margin:0 auto; padding:28px 24px; }
.zwp-ap-title { font-size:1.4rem; font-weight:700; color:var(--zwp-forest); margin:0 0 20px; }
.zwp-ap-subtitle { font-size:1rem; font-weight:700; color:var(--zwp-forest); margin:28px 0 14px; }

/* Admin sub-tabs */
.zwp-ap-tabs { display:flex; gap:0; border-bottom:2px solid var(--zwp-border); margin-bottom:20px; flex-wrap:wrap; background:var(--zwp-white); border-radius:var(--zwp-radius) var(--zwp-radius) 0 0; overflow:hidden; }
.zwp-ap-tab { padding:10px 16px; border:none; background:transparent; cursor:pointer; font-size:.82rem; font-weight:600; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; font-family:inherit; white-space:nowrap; }
.zwp-ap-tab.active, .zwp-ap-tab:hover { color:var(--zwp-forest); border-bottom-color:var(--zwp-forest); background:var(--zwp-cream); }
.zwp-ap-tab-panel { display:none; }
.zwp-ap-tab-panel.active { display:block; }

/* Filter bar */
.zwp-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); margin-bottom:16px; }
.zwp-filter-bar label { font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.zwp-muted { color:#888; font-size:.88rem; }

/* ── DASHBOARD STATS ─────────────────────────────────── */
.zwp-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.zwp-stat { background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.zwp-stat__icon { font-size:1.6rem; }
.zwp-stat__val { font-size:1.15rem; font-weight:700; color:var(--zwp-forest); }
.zwp-stat__lbl { font-size:.75rem; color:#888; text-transform:uppercase; letter-spacing:.04em; }

/* ── TABLES ──────────────────────────────────────────── */
.zwp-table-wrap { overflow-x:auto; margin-top:16px; }
.zwp-table { width:100%; border-collapse:collapse; background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); overflow:hidden; font-size:.88rem; }
.zwp-table th { background:var(--zwp-forest); color:var(--zwp-white); padding:10px 14px; text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.zwp-table td { padding:10px 14px; border-bottom:1px solid #f0ebe0; vertical-align:middle; }
.zwp-table tr:last-child td { border-bottom:none; }
.zwp-table tr:hover td { background:#fafaf7; }
.zwp-row-active td { background:#edf6ea !important; font-weight:600; }

/* Badges + tags */
.zwp-badge { display:inline-block; padding:2px 8px; border-radius:50px; font-size:.72rem; font-weight:700; background:#e8f0e2; color:var(--zwp-forest); vertical-align:middle; }
.zwp-badge--green { background:#d0ead7; color:#1a5c2a; }
.zwp-badge--admin { background:#f5e8c7; color:#7a5a00; }
.zwp-badge--staff { background:#e8f0e2; color:var(--zwp-forest); }
.zwp-tag-row { display:flex; gap:4px; flex-wrap:wrap; }

/* ── ITEMS TABLE ─────────────────────────────────────── */
.zwp-items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:16px; }
.zwp-item-card { background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); overflow:hidden; }
.zwp-item-card__img { width:100%; aspect-ratio:1; object-fit:cover; background:#f0ebe0; display:block; }
.zwp-item-card__body { padding:12px; }
.zwp-item-card__name { font-weight:700; font-size:.9rem; color:var(--zwp-earth); margin-bottom:4px; }
.zwp-item-card__meta { font-size:.76rem; color:#888; margin-bottom:8px; }
.zwp-item-card__prices { font-size:.82rem; color:var(--zwp-leaf); font-weight:600; }
.zwp-item-card__actions { display:flex; gap:6px; margin-top:10px; }

/* ── EMPLOYEES TABLE ─────────────────────────────────── */
.zwp-staff-table { width:100%; border-collapse:collapse; background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); overflow:hidden; font-size:.88rem; }
.zwp-staff-table th { background:var(--zwp-forest); color:var(--zwp-white); padding:10px 14px; text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.zwp-staff-table td { padding:10px 14px; border-bottom:1px solid #f0ebe0; vertical-align:middle; }
.zwp-staff-table tr:last-child td { border-bottom:none; }
.zwp-staff-table tr:hover td { background:#fafaf7; }

/* ── INFO CARD ───────────────────────────────────────── */
.zwp-info-card { background:#f0f6ec; border-left:4px solid var(--zwp-leaf); border-radius:6px; padding:20px 24px; max-width:680px; }
.zwp-info-card h3 { margin:0 0 12px; color:var(--zwp-forest); font-size:.95rem; }
.zwp-info-card ul { margin:0; padding-left:20px; }
.zwp-info-card li { margin-bottom:8px; font-size:.9rem; color:#444; }

/* ── PROFIT FIRST ────────────────────────────────────── */
.zwp-pf-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
.zwp-pf-card { background:var(--zwp-white); border:1px solid var(--zwp-border); border-radius:var(--zwp-radius); padding:18px 20px; }
.zwp-pf-card--tier { background:var(--zwp-forest); color:var(--zwp-white); }
.zwp-pf-card__lbl { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:#888; margin-bottom:6px; }
.zwp-pf-card--tier .zwp-pf-card__lbl { color:rgba(255,255,255,.6); }
.zwp-pf-card__val { font-size:1.2rem; font-weight:700; color:var(--zwp-forest); }
.zwp-pf-card__sub { font-size:.75rem; color:#999; margin-top:2px; }
.zwp-pf-card__tier { font-size:3rem; font-weight:700; color:var(--zwp-gold); line-height:1; }
.zwp-alloc-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.zwp-alloc { border-radius:var(--zwp-radius); padding:18px 14px; text-align:center; color:var(--zwp-white); }
.zwp-alloc--profit { background:linear-gradient(135deg,#2d6a2d,#3e8c3e); }
.zwp-alloc--owner  { background:linear-gradient(135deg,#7a5500,#c89212); }
.zwp-alloc--tax    { background:linear-gradient(135deg,#8b1a1a,#c0392b); }
.zwp-alloc--opex   { background:linear-gradient(135deg,#1a3a5c,#2980b9); }
.zwp-alloc__pct  { font-size:2rem; font-weight:700; line-height:1; }
.zwp-alloc__lbl  { font-size:.75rem; opacity:.85; margin:6px 0; }
.zwp-alloc__amt  { font-size:.85rem; font-weight:600; }

/* ── COMING SOON ─────────────────────────────────────── */
.zwp-coming-soon { text-align:center; padding:60px 20px; color:#aaa; }
.zwp-cs-icon { font-size:2.5rem; display:block; margin-bottom:12px; }

/* ── HOME SCREEN (staff) ─────────────────────────────── */
.zwp-screen { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.zwp-home-wrap { min-height:calc(100vh - var(--zwp-header-h)); display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--zwp-cream); padding:40px 20px; }
.zwp-home-title { font-size:1.5rem; font-weight:700; color:var(--zwp-forest); margin-bottom:36px; text-align:center; }
.zwp-channel-grid { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.zwp-channel-grid--sm .zwp-channel-card { min-width:160px; padding:24px 20px; }
.zwp-channel-card { background:var(--zwp-white); border:3px solid transparent; border-radius:20px; padding:36px 32px; text-align:center; cursor:pointer; transition:all .25s; box-shadow:var(--zwp-shadow); min-width:200px; font-family:inherit; }
.zwp-channel-card:hover { border-color:var(--zwp-leaf); transform:translateY(-5px); box-shadow:0 12px 36px rgba(36,61,24,.18); }
.zwp-channel-icon  { font-size:3rem; margin-bottom:12px; }
.zwp-channel-label { font-size:1.2rem; font-weight:700; color:var(--zwp-forest); margin-bottom:4px; }
.zwp-channel-sub   { font-size:.78rem; color:#888; }

/* ── POS BAR ─────────────────────────────────────────── */
.zwp-pos-bar { display:flex; align-items:center; gap:16px; background:var(--zwp-forest); padding:10px 20px; color:var(--zwp-white); }
.zwp-pos-bar__title { font-size:1rem; font-weight:700; flex:1; }
.zwp-pos-bar__date  { font-size:.78rem; color:rgba(255,255,255,.55); }

/* ── POS LAYOUT ──────────────────────────────────────── */
.zwp-pos-layout { display:grid; grid-template-columns:1fr 340px; height:calc(100vh - var(--zwp-header-h) - 44px); }
.zwp-pos-left  { display:flex; flex-direction:column; overflow:hidden; }
.zwp-pos-right { background:var(--zwp-white); border-left:1px solid var(--zwp-border); display:flex; flex-direction:column; overflow:hidden; }
.zwp-pos-filters { padding:12px 14px; background:var(--zwp-white); border-bottom:1px solid #e8e4d8; }
.zwp-search-input { width:100%; padding:9px 14px; border:2px solid var(--zwp-border); border-radius:50px; font-size:.9rem; margin-bottom:8px; }
.zwp-search-input:focus { outline:none; border-color:var(--zwp-leaf); }
.zwp-category-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.zwp-cat-tab { padding:4px 12px; border-radius:50px; border:1.5px solid #ccc; font-size:.76rem; font-weight:600; cursor:pointer; background:transparent; transition:all .2s; font-family:inherit; }
.zwp-cat-tab.active, .zwp-cat-tab:hover { background:var(--zwp-leaf); color:var(--zwp-white); border-color:var(--zwp-leaf); }
.zwp-product-grid { flex:1; overflow-y:auto; padding:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; align-content:start; }
.zwp-product-card { background:var(--zwp-white); border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; transition:all .2s; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.zwp-product-card:hover { border-color:var(--zwp-leaf); transform:translateY(-3px); box-shadow:0 6px 20px rgba(36,61,24,.14); }
.zwp-product-card:active { transform:scale(.97); }
.zwp-product-img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f0ebe0; }
.zwp-product-info { padding:9px; }
.zwp-product-name  { font-size:.78rem; font-weight:700; color:var(--zwp-earth); margin-bottom:3px; line-height:1.3; }
.zwp-product-price { font-size:.84rem; color:var(--zwp-leaf); font-weight:700; }
.zwp-product-unit  { font-size:.7rem; color:#999; }

/* ── CART ────────────────────────────────────────────── */
.zwp-cart-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--zwp-border); }
.zwp-cart-header h3 { font-size:.95rem; font-weight:700; color:var(--zwp-forest); margin:0; }
.zwp-cart-items { flex:1; overflow-y:auto; padding:10px 14px; }
.zwp-cart-empty { text-align:center; color:#bbb; font-size:.86rem; padding:28px 0; }
.zwp-cart-item { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f0ebe0; }
.zwp-cart-item:last-child { border-bottom:none; }
.zwp-ci-name  { flex:1; font-size:.82rem; font-weight:600; color:var(--zwp-earth); line-height:1.3; }
.zwp-ci-unit  { font-size:.7rem; color:#999; }
.zwp-ci-qty-ctrl { display:flex; align-items:center; gap:4px; }
.zwp-ci-qty-btn { width:24px; height:24px; border-radius:50%; border:1.5px solid #ccc; background:transparent; font-size:.95rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; }
.zwp-ci-qty-btn:hover { background:var(--zwp-leaf); color:var(--zwp-white); border-color:var(--zwp-leaf); }
.zwp-ci-qty { min-width:24px; text-align:center; font-weight:700; font-size:.86rem; }
.zwp-ci-price { font-size:.86rem; font-weight:700; color:var(--zwp-leaf); min-width:64px; text-align:right; }
.zwp-ci-remove { background:transparent; border:none; color:#ccc; font-size:1rem; cursor:pointer; padding:0 3px; }
.zwp-ci-remove:hover { color:var(--zwp-red); }
.zwp-cart-totals { padding:10px 14px; border-top:1px solid var(--zwp-border); }
.zwp-totals-row { display:flex; justify-content:space-between; font-size:.84rem; padding:3px 0; color:#555; }
.zwp-totals-row--total { font-weight:700; font-size:1rem; color:var(--zwp-forest); border-top:2px solid var(--zwp-cream); margin-top:6px; padding-top:8px; }
.zwp-payment-section { padding:12px 14px; border-top:1px solid var(--zwp-border); }
.zwp-payment-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#888; margin-bottom:8px; }
.zwp-payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.zwp-payment-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 8px; border:2px solid var(--zwp-border); border-radius:8px; background:transparent; cursor:pointer; font-size:.78rem; font-weight:600; transition:all .2s; font-family:inherit; }
.zwp-payment-btn.active { border-color:var(--zwp-leaf); background:#e9f6ec; color:var(--zwp-forest); }
.zwp-payment-icon { font-size:1.3rem; }
.zwp-mpesa-ref-wrap { margin-bottom:12px; }
.zwp-mpesa-ref-wrap label { display:block; font-size:.78rem; font-weight:700; margin-bottom:4px; }

/* ── RECEIPT MODAL ───────────────────────────────────── */
.zwp-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:9999; }
.zwp-modal { background:var(--zwp-white); border-radius:16px; padding:36px; text-align:center; max-width:340px; width:90%; }
.zwp-receipt-success { width:60px; height:60px; border-radius:50%; background:var(--zwp-leaf); color:var(--zwp-white); font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.zwp-modal h3 { font-size:1.2rem; font-weight:700; color:var(--zwp-forest); margin-bottom:8px; }
.zwp-modal p  { color:#666; margin-bottom:20px; font-size:.9rem; }
.zwp-modal-actions { display:flex; gap:10px; justify-content:center; }

/* ── MISC ────────────────────────────────────────────── */
.zwp-loading { grid-column:1/-1; text-align:center; padding:36px; color:#aaa; }
.zwp-no-access { text-align:center; padding:40px; color:#888; background:var(--zwp-white); border-radius:12px; }
@keyframes zwp-spin { to { transform:rotate(360deg); } }
.zwp-spinner { display:inline-block; animation:zwp-spin .8s linear infinite; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:900px) {
  .zwp-pos-layout { grid-template-columns:1fr; grid-template-rows:1fr auto; height:auto; }
  .zwp-pos-right { border-left:none; border-top:1px solid var(--zwp-border); max-height:50vh; }
  .zwp-pos-left  { min-height:50vh; }
  .zwp-alloc-row { grid-template-columns:1fr 1fr; }
  .zwp-form-row  { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .zwp-header--admin { flex-wrap:wrap; height:auto; padding:8px 12px; }
  .zwp-admin-nav { order:3; width:100%; height:40px; }
  .zwp-anav { padding:0 10px; font-size:.76rem; height:40px; }
  .zwp-alloc-row { grid-template-columns:1fr 1fr; }
  .zwp-pf-cards  { grid-template-columns:1fr; }
  .zwp-stat-row  { grid-template-columns:1fr 1fr; }
}