/* =========================================================
   تخطيط التطبيق: Sidebar + Login + Dashboard + الاستجابة
   ========================================================= */

#app { min-height: 100%; }

/* ---------- تسجيل الدخول ---------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-olive-900);
  padding: var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}
.login-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--color-paper-raised); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-lg);
  text-align: center; overflow: hidden;
}
.login-emblem {
  width: 56px; height: 56px; margin: 0 auto var(--space-4);
  border-radius: 50%; background: var(--color-olive-900);
  display: flex; align-items: center; justify-content: center;
}
.login-title { font-family: var(--font-display); font-size: 22px; color: var(--color-olive-900); margin-bottom: var(--space-1); }
.login-sub { font-size: 13px; color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.login-form { text-align: right; }

/* ---------- تخطيط بعد الدخول ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px; flex-shrink: 0; background: var(--color-olive-900); color: var(--color-paper-raised);
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-3);
  position: sticky; top: 0; height: 100vh;
  padding-top: max(var(--space-5), env(safe-area-inset-top, 0px));
}
.sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-6); }
.sidebar-brand .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--color-gold-500); flex-shrink: 0; }
.sidebar-brand .name { font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.sidebar-nav { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.sidebar-nav li + li { margin-top: 2px; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px;
  border-radius: var(--radius-sm); color: #d9d3bf; font-size: 14px; cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(246,241,230,.08); color: #fff; }
.sidebar-link.active { background: var(--color-gold-500); color: var(--color-olive-900); font-weight: 500; }
.sidebar-footer { border-top: 1px solid rgba(246,241,230,.12); padding-top: var(--space-3); }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(23,33,31,.02);
  position: sticky; top: 0; background: var(--color-paper); z-index: 10;
  padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
}
.topbar h1 { font-size: 19px; margin: 0; }
.sidebar-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-ink); }
.page-content { padding: var(--space-6); flex: 1; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.search-input { position: relative; max-width: 320px; flex: 1; min-width: 200px; }
.search-input input { padding-right: 38px; }
.search-input svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-ink-soft); }

/* ---------- بطاقات على الهاتف بدل الجداول ---------- */
.row-card { display: none; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset-inline-start: 0; top: 0; z-index: 50; transform: translateX(105%);
    transition: transform .2s ease; width: 78vw; max-width: 300px;
  }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; }
  .page-content { padding: var(--space-4); }
  .table-wrap table { display: none; }
  .row-card { display: block; }
}

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--color-border);
  border-top-color: var(--color-olive-700); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

.icon-btn { background: none; border: none; cursor: pointer; color: var(--color-ink-soft); padding: 6px; border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--color-earth-100); color: var(--color-ink); }

/* ---------- النسخة المكتملة ---------- */
.modal-wide{max-width:720px}.modal-actions{display:flex;gap:10px;margin-top:14px}.order-line{display:grid;grid-template-columns:1fr 100px 38px;gap:8px;margin-bottom:8px}.order-card{margin-bottom:14px}.order-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.order-items{display:grid;gap:7px;margin-bottom:14px}.check-row{display:flex;align-items:center;gap:8px;padding:8px;background:var(--color-earth-100);border-radius:8px}.muted{color:var(--color-ink-soft);font-size:13px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:16px}.settings-grid div{display:flex;flex-direction:column;gap:5px}.toast-host{position:fixed;z-index:1000;left:18px;bottom:18px;display:grid;gap:8px}.toast{background:var(--color-olive-900);color:#fff;padding:11px 15px;border-radius:9px;box-shadow:var(--shadow-lg);font-size:13px}.toast-error{background:#8d3030}.toast-success{background:var(--color-olive-900)}
@media(max-width:600px){.order-line{grid-template-columns:1fr 75px 34px}.modal{width:calc(100vw - 24px)!important}.toolbar select{max-width:150px}}
@media print{.sidebar,.topbar,.toolbar,.btn,.icon-btn{display:none!important}.page-content{padding:0}.card{box-shadow:none!important;border:1px solid #ddd}}

/* ---------- منتقي الهدايا: تصنيفات ← هدايا ← سلة (بطاقات كبيرة شبه متجر) ---------- */
.picker-topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.picker-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--color-olive-900);font-family:var(--font-body);font-size:14px;cursor:pointer;padding:6px 4px}
:root[data-theme="dark"] .picker-back{color:var(--color-gold-100)}
.picker-steps{font-size:13px;color:var(--color-ink-soft)}

.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;padding-bottom:100px}

.picker-card{position:relative;background:var(--color-paper-raised);border:1px solid var(--color-border);border-radius:18px;cursor:pointer;transition:box-shadow .15s,transform .15s;overflow:hidden;display:flex;flex-direction:column}
.picker-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.picker-card .cat-image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--color-earth-100)}
.picker-card .cat-image-fallback{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--color-gold-100),var(--color-earth-100));color:var(--color-olive-900)}
.picker-card .cat-body{padding:14px 12px}
.picker-card .cat-name{font-weight:600;font-size:16px}
.picker-card .cat-count{font-size:12px;color:var(--color-ink-soft);margin-top:4px}

.item-card{background:var(--color-paper-raised);border:1px solid var(--color-border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.item-card .item-image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--color-earth-100)}
.item-card .item-image-fallback{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--color-gold-100),var(--color-earth-100));color:var(--color-olive-900)}
.item-card .item-body{padding:14px}
.item-card .item-name{font-weight:600;font-size:16px}
.item-card .item-stock{font-size:12px;color:var(--color-ink-soft);margin-top:2px}
.item-card .item-stock.out{color:var(--color-danger)}

.qty-stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.qty-stepper button{width:38px;height:38px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-paper-raised);font-size:19px;cursor:pointer;color:var(--color-olive-900)}
.qty-stepper button:hover{background:var(--color-earth-100)}
.qty-stepper button:disabled{opacity:.35;cursor:not-allowed}
.qty-stepper .qty-val{min-width:26px;text-align:center;font-weight:700;font-size:16px}

.cart-bar{position:sticky;bottom:0;margin:0 -24px -24px;background:var(--color-olive-900);color:var(--color-paper-raised);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -6px 20px rgba(0,0,0,.15)}
.cart-bar .cart-count{font-size:14px}
@media(max-width:860px){.cart-bar{margin:0 -16px -16px;padding:12px 16px}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}

.cart-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border);gap:10px}
.cart-list-item .name{font-size:14px}

/* ---------- شاشة الكاشير المبسطة (تابلت) ---------- */
.kiosk-shell{min-height:100vh;display:flex;flex-direction:column}
.kiosk-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--color-olive-900);color:var(--color-paper-raised);position:sticky;top:0;z-index:10;padding-top:max(16px,env(safe-area-inset-top,0px))}
.kiosk-topbar .kiosk-title{font-family:var(--font-display);font-size:18px}
.kiosk-topbar .icon-btn{color:var(--color-paper-raised)}
.kiosk-topbar .icon-btn:hover{background:rgba(246,241,230,.12)}
.kiosk-content{flex:1;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
@media(min-width:640px){.kiosk-content{padding:28px 32px}}

/* ---------- إدارة الفئات (لوحة الإدارة) ---------- */
.cat-manage-grid{display:grid;gap:10px}
.cat-manage-card{display:flex;align-items:center;gap:14px;padding:12px}
.cat-manage-thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--color-earth-100);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--color-olive-900)}
.cat-manage-thumb img{width:100%;height:100%;object-fit:cover}