/* ==========================================================
   مُوكِّل — styles.css
   النسخة 3 — Topbar + Drawer + Payments
   ========================================================== */

/* ============ 1) المتغيرات الأساسية ============ */
:root{
  --ink:#101b28; --ink-soft:#48586b; --paper:#f6f3ec; --raised:#fffdf9;
  --brass:#b6903f; --brass-deep:#7c611f; --line:#e3dcc8; --ok:#2f6b4f; --bad:#a13d2f; --wa:#25d366;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Tajawal',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* ============ 2) Topbar ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--ink);
  color: var(--raised);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.menu-btn {
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  transition: background 0.15s;
}
.menu-btn:hover { background: rgba(255,255,255,0.08); }
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--brass);
  border-radius: 2px;
  transition: all 0.2s;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-icon { font-size: 20px; }
.brand h1 {
  font-size: 17px;
  font-weight: 900;
  margin: 0;
  color: var(--brass);
}

.topbar-actions {
  display: flex;
  gap: 6px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--brass);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); }

/* ============ 3) Drawer ============ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,27,40,0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: var(--raised);
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.open { right: 0; }

.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: var(--raised);
}
.drawer-logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--raised);
  display: none;
}
.drawer-logo[src]:not([src=""]) { display: block; }
.drawer-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--brass);
  margin-bottom: 2px;
}
.drawer-subtitle {
  font-size: 11px;
  color: #a0a8b0;
}

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.drawer-section {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.drawer-section:last-child { border-bottom: none; }

.drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  font-family: 'Tajawal', sans-serif;
  transition: background 0.15s;
}
.drawer-item:hover { background: var(--paper); }
.drawer-item.active {
  background: var(--paper);
  color: var(--brass-deep);
  font-weight: 700;
  border-right: 3px solid var(--brass);
}

.drawer-item .icon { font-size: 16px; width: 22px; }
.drawer-item .label { flex: 1; }
.drawer-item .arrow {
  font-size: 11px;
  color: var(--ink-soft);
  transition: transform 0.2s;
}
.drawer-item.expanded .arrow { transform: rotate(90deg); }

.drawer-sub {
  display: none;
  background: var(--paper);
}
.drawer-sub.open { display: block; }

.drawer-sub-item {
  padding: 9px 18px 9px 42px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  font-family: 'Tajawal', sans-serif;
  transition: all 0.15s;
}
.drawer-sub-item:hover { background: var(--raised); color: var(--brass-deep); }
.drawer-sub-item.active { color: var(--brass-deep); font-weight: 700; }

.drawer-footer {
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.drawer-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.drawer-open { overflow: hidden; }

/* ============ 4) Main Layout ============ */
#app {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}
.app-top { margin-top: 0; }

/* ============ 5) Cards ============ */
.card{
  background:var(--raised); border:1px solid var(--line);
  border-radius:8px; padding:18px; margin-bottom:14px;
}
.card h3{
  font-size:15px; margin:0 0 12px;
  display:flex; justify-content:space-between; align-items:center;
}

/* ============ 6) Rows / Forms ============ */
.row{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.row>*{flex:1; min-width:140px;}

label{
  display:block; font-size:12px; color:var(--ink-soft);
  margin-bottom:4px; font-weight:500;
}
input,select,textarea{
  width:100%; padding:10px; border:1px solid var(--line); border-radius:4px;
  font-family:'Tajawal',sans-serif; font-size:14px;
  background:var(--paper); color:var(--ink);
}

/* ============ 7) Buttons ============ */
.btn{
  padding:12px 24px; border-radius:6px; font-weight:700; font-size:14px;
  cursor:pointer; font-family:'Tajawal',sans-serif; border:none;
  text-decoration:none; display:inline-block;
}
.btn-brass{background:var(--brass); color:var(--ink);}

button.primary{
  background:var(--ink); color:var(--raised);
  border:none; padding:11px 20px; border-radius:5px;
  font-weight:700; font-size:14px; cursor:pointer;
  font-family:'Tajawal',sans-serif;
}
button.primary:hover{background:var(--brass-deep);}

button.ghost{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;
}

button.wa{
  background:var(--wa); color:#fff; border:none;
  padding:6px 10px; border-radius:4px; font-size:12px;
  cursor:pointer; text-decoration:none; display:inline-block;
}

/* ============ 8) Status ============ */
.status.ok{color:var(--ok);}
.status.bad{color:var(--bad);}

/* ============ 9) Items ============ */
.item{
  border:1px solid var(--line); border-radius:6px;
  padding:12px 14px; margin-bottom:10px; background:var(--raised);
}
.item .top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;}
.item .name{font-weight:700; font-size:14.5px;}
.item .num{font-size:12px; color:var(--brass-deep);}
.item .meta{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.item .acts{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}

/* ============ 10) Empty ============ */
.empty{text-align:center; padding:30px 16px; color:var(--ink-soft); font-size:13.5px;}

/* ============ 11) Search / Answer ============ */
.answer{
  margin-top:14px; padding:16px; background:#f3efe2; border-radius:6px;
  font-size:14px; line-height:1.9; white-space:pre-wrap;
}
.sources{margin-top:10px; font-size:11.5px; color:var(--ink-soft);}
.sources div{padding:4px 0; border-top:1px dashed var(--line);}

/* ============ 12) Warning ============ */
.warn{
  background:#f6ede4; border-right:4px solid var(--brass);
  padding:10px 14px; font-size:12.5px; color:var(--brass-deep);
  border-radius:3px; margin-top:12px; line-height:1.7;
}

/* ============ 13) Stats ============ */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-bottom:14px;
}
.stat{
  background:var(--raised); border:1px solid var(--line);
  border-radius:8px; padding:14px; text-align:center;
}
.stat .n{
  font-size:22px; font-weight:900;
  font-family:'IBM Plex Mono',monospace; color:var(--brass-deep);
}
.stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

/* ============ 14) Badges ============ */
.badge-late{
  display:inline-block; font-size:10.5px; background:#f6e2dc; color:var(--bad);
  padding:2px 8px; border-radius:10px; font-weight:700;
}
.badge{
  display:inline-block; font-size:10.5px;
  padding:2px 8px; border-radius:10px; font-weight:700;
}
.badge.trial{background:#eee6d3; color:var(--brass-deep);}
.badge.active{background:#dcecdf; color:var(--ok);}
.badge.suspended{background:#f6e2dc; color:var(--bad);}

/* ============ 15) Logo upload ============ */
.logo-upload{display:flex; align-items:center; gap:12px;}
.logo-preview{
  width:56px; height:56px; border-radius:6px;
  border:1px dashed var(--line); object-fit:contain; background:var(--paper);
}

/* ============ 16) Footer ============ */
footer{text-align:center; font-size:11px; color:#9aa5b0; padding:24px;}

/* ============ 17) Reports ============ */
.report-row{
  display:flex; justify-content:space-between; padding:9px 0;
  border-bottom:1px dashed var(--line); font-size:14px;
}
.report-row.total{
  font-weight:900; border-bottom:none;
  border-top:2px solid var(--ink); margin-top:4px; padding-top:12px;
}

/* ============ 18) Blocker ============ */
.blocker{
  position:fixed; inset:0; background:rgba(16,27,40,.92);
  color:#fff; display:none; align-items:center; justify-content:center;
  z-index:999; text-align:center; padding:24px;
}
.blocker.show{display:flex;}
.blocker .box{max-width:360px;}
.blocker h2{font-size:20px;}

/* ============ 19) Hero ============ */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 80% -10%, #24344a, var(--ink) 60%);
  color:var(--raised);
  padding:calc(48px + env(safe-area-inset-top,0px)) 24px 56px;
  text-align:center;
}
.hero-logo{max-height:52px; margin-bottom:14px;}
.hero .kicker{
  font-size:12px; letter-spacing:3px; color:var(--brass);
  font-weight:700; text-transform:uppercase;
}
.hero h1{font-size:clamp(28px,7vw,44px); font-weight:900; margin:8px 0 10px; line-height:1.2;}
.hero p{font-size:15px; color:#c7cfda; max-width:520px; margin:0 auto 20px; line-height:1.8;}
.hero .cta{display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.hero-pattern{
  position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image: radial-gradient(circle, var(--brass) 1px, transparent 1px);
  background-size:26px 26px;
}

/* ============ 20) Trial badge ============ */
.trial{
  display:inline-block;
  background:#1d2d40; border:1px solid var(--brass); color:var(--brass);
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:20px;
  margin-bottom:16px;
}
.trial.expired{background:var(--bad); border-color:var(--bad); color:#fff;}

/* ============ 21) SA link ============ */
.sa-link{
  position:absolute; top:10px; left:14px;
  font-size:11px; color:#6b7a8c; cursor:pointer;
  text-decoration:underline; background:none; border:none;
}

/* ============ 22) Gear / cfg ============ */
.app-top{
  display:flex; align-items:center; justify-content:space-between;
  margin:30px 0 14px; gap:10px;
}
.app-top h2{font-size:19px; margin:0;}

.gear{
  background:none; border:1px solid var(--line);
  border-radius:6px; padding:8px 12px; font-size:12px;
  cursor:pointer; color:var(--ink-soft);
  font-family:'Tajawal',sans-serif; white-space:nowrap;
}

.cfg{
  background:var(--raised); border:1px solid var(--line);
  border-radius:6px; padding:14px; margin-bottom:16px; display:none;
}
.cfg.open{display:block;}
.cfg label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:6px;}
.cfg input{
  width:100%; padding:9px; border:1px solid var(--line); border-radius:4px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
}
.cfg .status{font-size:11px; margin-top:8px;}

/* ============ 23) nav.tabs (legacy) ============ */
nav.tabs{ display:none; }

/* ============ 24) Views ============ */
.view{display:none; margin-top:16px;}
.view.active{display:block;}

/* ============ 25) Print ============ */
@media print{
  .topbar, .drawer, .drawer-backdrop, .gear, .cfg, nav.tabs,
  .card form, #logo-upload-area, .no-print, footer { display: none !important; }
  #app { max-width: 100%; padding: 0; }
  .view { display: block !important; margin-top: 0; }
  body { background: #fff; }
}

/* ==========================================================
   إضافات النسخة 2 — Toast / Skeleton / Gate / Hidden
   ========================================================== */

[hidden] { display: none !important; }
.gate-card { max-width: 380px; margin: 40px auto; }

.toast-host {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 420px;
}
.toast {
  background: var(--ink);
  color: var(--raised);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  pointer-events: auto;
  animation: toast-in .2s ease-out;
  border-right: 4px solid var(--brass);
}
.toast.ok  { border-right-color: var(--ok); }
.toast.bad { border-right-color: var(--bad); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #e0dccb 37%, #eee 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
  border-radius: 4px;
  height: 14px;
  margin: 6px 0;
}
@keyframes sk {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================
   بوابات حكومية رسمية
   ========================================================== */
.gov-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.gov-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
  cursor: pointer;
}

.gov-link:hover {
  background: var(--raised);
  border-color: var(--brass);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gov-link-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.gov-link-body {
  flex: 1;
  min-width: 0;
}

.gov-link-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brass-deep);
  margin-bottom: 2px;
}

.gov-link-desc {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.gov-link-arrow {
  font-size: 14px;
  color: var(--ink-soft);
  flex-shrink: 0;
  opacity: 0.6;
}

.gov-link:hover .gov-link-arrow {
  opacity: 1;
  color: var(--brass);
}

/* ==========================================================
   Modal (احترافي)
   ========================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,27,40,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-backdrop.open { opacity: 1; }

.modal {
  background: var(--raised);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.2s;
}
.modal-backdrop.open .modal { transform: translateY(0); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--paper); }

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-body label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 4px;
  margin-top: 12px;
  font-weight: 500;
}
.modal-body label:first-child { margin-top: 0; }
.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--brass);
}

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.modal-footer button { min-width: 90px; }

/* ============ Info Grid ============ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.info-item {
  padding: 8px 10px;
  background: var(--paper);
  border-radius: 6px;
}

.info-label {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 3px;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.acts-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* ============ Section Header ============ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-header h3 {
  margin: 0;
  font-size: 15px;
}
.section-header button {
  padding: 6px 12px;
  font-size: 12px;
}

/* ==========================================================
   Progress Bar
   ========================================================== */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--ok));
  border-radius: 4px;
  transition: width 0.3s;
}

/* ==========================================================
   Filter Tabs
   ========================================================== */
.filter-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.filter-tabs button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  font-family: 'Tajawal', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-tabs button:hover { background: var(--raised); }
.filter-tabs button.active {
  background: var(--ink);
  color: var(--raised);
  border-color: var(--ink);
}

/* ============ موبايل ============ */
@media (max-width: 480px) {
  .drawer { width: 280px; }
  #app { padding: 12px; }
  .card { padding: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}