/* ===================================================================
   الهوية الملكية الذهبية #BB9860 — ملف التنسيقات المستقل (style.css)
   المطور: حسين محمد طة
   =================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  scroll-behavior: smooth;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:root{
  --gold-primary: #BB9860;
  --gold-dark: #9E7B47;
  --gold-light: #D4B47D;
  --gold-lighter: #f7f1e6;
  --bg: #fbf9f6;
  --card: #ffffff;
  --text: #1a1714;
  --muted: #6b635b;
  --danger: #ef4444;
  --success: #16a34a;
  --warning: #d97706;
  --border: rgba(187, 152, 96, 0.22);
  --border-strong: rgba(0, 0, 0, 0.08);
  --hover-bg: rgba(187, 152, 96, 0.08);
  --shadow: 0 2px 10px rgba(187, 152, 96, 0.08), 0 10px 24px rgba(0, 0, 0, 0.03);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 20px);
  --gradient-primary: linear-gradient(135deg, #BB9860 0%, #9E7B47 100%);
  --gradient-secondary: linear-gradient(135deg, #e3cfa8 0%, #BB9860 100%);
  --gradient-card: linear-gradient(135deg, #BB9860 0%, #d8ba84 35%, #9E7B47 70%, #b89357 100%);
}

[data-theme="dark"]{
  --bg: #11100e;
  --card: #1b1916;
  --text: #f5efe6;
  --muted: #9c9183;
  --border: rgba(187, 152, 96, 0.26);
  --border-strong: rgba(255, 255, 255, 0.07);
  --hover-bg: rgba(187, 152, 96, 0.12);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  --gradient-primary: linear-gradient(135deg, #c7a46c 0%, #8f6e3c 100%);
  --gradient-secondary: linear-gradient(135deg, #9E7B47 0%, #BB9860 100%);
}

body{
  font-family:'IBM Plex Sans Arabic',sans-serif;
  background:var(--bg);
  color:var(--text);
  width:100%;max-width:100%;
  margin:0;padding:0;
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;position:relative;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background 0.3s,color 0.3s;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
body::-webkit-scrollbar{display:none}
::selection{background:transparent;color:inherit}

/* ===================================================================
   صفحة تسجيل الدخول المستقلة (LOGIN SCREEN VIEW) — طبق الأصل من التصميم الفاخر
   =================================================================== */
#view-login{
  display:none;
  min-height:100vh;min-height:100dvh;
  width:100%;
  padding:calc(20px + var(--safe-t)) 16px calc(36px + var(--safe-b));
  align-items:center;justify-content:center;
  background:radial-gradient(circle at 15% 15%, rgba(187, 152, 96, 0.12) 0%, transparent 45%),
             radial-gradient(circle at 85% 85%, rgba(8, 84, 70, 0.08) 0%, transparent 45%),
             #f5f2eb;
  position:relative;
  overflow-x:hidden;
}
#view-login.active{display:flex;flex-direction:column}
#view-login.inactive{display:none !important}
html.logged-in #view-login{display:none !important}
html.logged-in #view-app{display:block !important}

/* بطاقة تسجيل الدخول الفاخرة المعتمدة طبق الأصل */
.login-card{
  width:100%;max-width:430px;
  background:#ffffff;
  border-radius:32px;
  padding:0 0 24px;
  box-shadow:0 16px 45px rgba(163, 130, 79, 0.12), 0 2px 10px rgba(0,0,0,0.03);
  border:1.5px solid #e8decb;
  position:relative;
  overflow:hidden;
  animation:slideUp 0.35s cubic-bezier(.4,0,.2,1);
  margin:0 auto;
}
[data-theme="dark"] .login-card{
  background:#1b1916;
  border-color:rgba(187, 152, 96, 0.3);
  box-shadow:0 16px 45px rgba(0,0,0,0.6);
}

/* الرأس الفني العلوي للبطاقة (Pharmacy Art Header) */
.login-art-header{
  position:relative;
  height:155px;
  width:100%;
  background:linear-gradient(180deg, #f4efe6 0%, #ffffff 100%);
  border-bottom:1px solid rgba(187, 152, 96, 0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px 16px;
}
[data-theme="dark"] .login-art-header{
  background:linear-gradient(180deg, #24211c 0%, #1b1916 100%);
}

.login-art-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* إطار الشعار المركزي في رأس الصفحة */
.login-logo-frame{
  position:relative;
  z-index:5;
  width:94px;
  height:94px;
  border-radius:26px;
  background:#ffffff;
  border:2px solid #a8854f;
  box-shadow:0 8px 24px rgba(168, 133, 79, 0.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px;
  overflow:hidden;
  transition:transform 0.25s ease;
}
.login-logo-frame:hover{transform:scale(1.03)}
.login-logo-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:18px;
}
.login-default-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#a8854f;
  text-align:center;
}
.login-default-logo i{font-size:1.8rem;margin-bottom:2px}
.login-default-logo .logo-sub-text{
  font-size:0.56rem;
  font-weight:800;
  letter-spacing:1px;
  color:#8c6a34;
}
.login-default-logo .logo-sub-ar{
  font-size:0.62rem;
  font-weight:800;
  color:#a8854f;
}

/* محتوى النموذج */
.login-body{
  padding:18px 22px 0;
}

.login-main-title{
  font-size:1.38rem;
  font-weight:900;
  color:#6e5432;
  text-align:center;
  margin-bottom:4px;
  letter-spacing:-0.3px;
}
[data-theme="dark"] .login-main-title{color:#d4b47d}

.login-main-sub{
  font-size:0.8rem;
  color:#7d756d;
  text-align:center;
  margin-bottom:20px;
  font-weight:600;
}
[data-theme="dark"] .login-main-sub{color:#a3988b}

/* حقول الإدخال */
.login-field-wrap{margin-bottom:14px}
.login-field-lbl{
  display:block;
  font-size:0.82rem;
  font-weight:700;
  color:#2c2723;
  margin-bottom:6px;
  text-align:right;
}
[data-theme="dark"] .login-field-lbl{color:#ede5da}
.login-field-lbl .req{color:#ef4444;margin-inline-start:2px}

.login-input-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fdfbf7;
  border:1.5px solid #e7ded0;
  border-radius:18px;
  padding:6px 10px 6px 14px;
  height:52px;
  transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
  box-sizing:border-box;
}
[data-theme="dark"] .login-input-box{
  background:#23201c;
  border-color:rgba(187, 152, 96, 0.25);
}
.login-input-box:focus-within{
  border-color:#a8854f;
  box-shadow:0 0 0 3px rgba(168, 133, 79, 0.18);
  background:#ffffff;
}
[data-theme="dark"] .login-input-box:focus-within{background:#28241f}

.login-input-box input{
  border:none;
  background:transparent;
  width:100%;
  font-size:0.95rem;
  font-weight:600;
  color:#1a1714;
  outline:none;
  padding-inline-start:10px;
  font-family:inherit;
  text-align:right;
}
[data-theme="dark"] .login-input-box input{color:#f5efe6}
.login-input-box input::placeholder{color:#9c9183;opacity:0.75}

.login-input-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:#f2ebd9;
  color:#8c6a34;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.95rem;
  flex-shrink:0;
}
[data-theme="dark"] .login-input-icon{
  background:rgba(187, 152, 96, 0.2);
  color:#d4b47d;
}

/* زر تسجيل الدخول */
.login-submit-btn{
  width:100%;
  height:52px;
  border-radius:18px;
  background:linear-gradient(135deg, #a8854f 0%, #8c6a34 100%);
  color:#ffffff;
  border:none;
  font-size:1.05rem;
  font-weight:800;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(168, 133, 79, 0.35);
  margin-top:18px;
  transition:transform 0.15s cubic-bezier(.4,0,.2,1),box-shadow 0.2s,opacity 0.2s;
}
.login-submit-btn:active{transform:scale(0.97)}
.login-submit-btn:disabled{opacity:0.65;cursor:not-allowed}

/* شارة الحماية والتقييد */
.login-security-box{
  background:#f7f4ed;
  border:1px solid #e8decb;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:0.76rem;
  color:#584f46;
  font-weight:600;
  margin-top:16px;
  text-align:center;
}
[data-theme="dark"] .login-security-box{
  background:#23201c;
  border-color:rgba(187, 152, 96, 0.22);
  color:#c4b9aa;
}
.login-security-box i{
  color:#a8854f;
  font-size:1.05rem;
  flex-shrink:0;
}

/* بطاقة واتساب / المطور الفاخرة */
/* بطاقة حقوق المطور الرسمية المطابقة للتصميم 100% */
.developer-rights-card, .login-whatsapp-card {
  background:#ffffff;
  border:1.5px solid #eae2d5;
  border-radius:24px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
  transition:transform 0.2s cubic-bezier(.4,0,.2,1),box-shadow 0.2s;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  direction:rtl;
  box-sizing:border-box;
  width:100%;
}
[data-theme="dark"] .developer-rights-card, [data-theme="dark"] .login-whatsapp-card {
  background:#1e1b18;
  border-color:rgba(187, 152, 96, 0.28);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.developer-rights-card:hover, .login-whatsapp-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(187, 152, 96, 0.15);
}
.developer-rights-card:active, .login-whatsapp-card:active {
  transform:scale(0.98);
}

.dev-card-arrow, .login-wa-action {
  width:48px;
  height:48px;
  border-radius:16px;
  background:#9E7B47;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  flex-shrink:0;
  box-shadow:0 3px 10px rgba(158, 123, 71, 0.3);
  text-decoration:none;
  border:none;
}

.dev-card-info, .login-wa-info {
  flex:1;
  min-width:0;
  text-align:center;
  padding:0 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.dev-card-title, .login-wa-title {
  font-size:0.95rem;
  font-weight:800;
  color:#1a1714;
  line-height:1.3;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
[data-theme="dark"] .dev-card-title, [data-theme="dark"] .login-wa-title {
  color:#f3ece2;
}

.dev-card-brand, .login-wa-brand {
  color:#9E7B47;
  font-weight:900;
  margin-inline-start:4px;
}
[data-theme="dark"] .dev-card-brand, [data-theme="dark"] .login-wa-brand {
  color:#d4b47d;
}

.dev-card-sub, .login-wa-sub {
  font-size:0.74rem;
  color:#6b7280;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1.2;
}
[data-theme="dark"] .dev-card-sub, [data-theme="dark"] .login-wa-sub {
  color:#9ca3af;
}
.dev-card-sub i, .login-wa-sub i {
  color:#9E7B47;
  font-size:0.8rem;
}

.dev-card-wa, .login-wa-badge {
  width:48px;
  height:48px;
  border-radius:16px;
  background:#25D366;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.65rem;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(37, 211, 102, 0.35);
}

/* فاصل النبض في الأسفل (صحتك تهمنا) */
.login-pulse-footer{
  margin-top:18px;
  text-align:center;
}
.login-pulse-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:5px;
}
.login-pulse-line{
  height:1px;
  width:55px;
  background:#dcd3c5;
}
[data-theme="dark"] .login-pulse-line{background:rgba(187, 152, 96, 0.3)}
.login-pulse-icon{
  color:#a8854f;
  font-size:1.15rem;
}
.login-pulse-text{
  font-size:0.78rem;
  font-weight:700;
  color:#8e857b;
}
[data-theme="dark"] .login-pulse-text{color:#a3988b}

/* ===================================================================
   واجهة التطبيق الرئيسية (APP VIEW)
   =================================================================== */
#view-app{
  display:none;
  padding-bottom:calc(90px + var(--safe-b));
}
#view-app.active{display:block}

/* ===== HEADER ===== */
.app-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251, 249, 246, 0.94);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background 0.3s,border 0.3s;
}
[data-theme="dark"] .app-header{background:rgba(17, 16, 14, 0.94)}

.header-wrap{
  max-width:550px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;cursor:pointer}
.brand-logo-img{
  width:42px;height:42px;border-radius:14px;object-fit:cover;
  box-shadow:0 4px 14px rgba(187,152,96,0.35);border:1px solid var(--border);
}
.brand-logo{
  width:42px;height:42px;border-radius:14px;
  background:var(--gradient-primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;flex-shrink:0;
  box-shadow:0 4px 14px rgba(187,152,96,0.35);
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{
  font-size:0.95rem;font-weight:800;letter-spacing:-0.2px;line-height:1.2;
  color:var(--gold-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sub{font-size:0.65rem;color:var(--muted);font-weight:600;margin-top:2px}
.header-actions{display:flex;align-items:center;gap:8px}

.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);font-size:0.9rem;
  box-shadow:var(--shadow);
  transition:transform 0.15s cubic-bezier(.4,0,.2,1),box-shadow 0.2s;
  flex-shrink:0;position:relative;
}
.icon-btn:active{transform:scale(0.88) rotate(-6deg)}
.icon-btn .sun{display:none}
.icon-btn .moon{display:inline}
[data-theme="dark"] .icon-btn .sun{display:inline;color:var(--gold-light)}
[data-theme="dark"] .icon-btn .moon{display:none}

.user-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--hover-bg);color:var(--gold-dark);
  border:1px solid var(--border);padding:6px 10px;
  border-radius:20px;font-size:0.7rem;font-weight:700;cursor:pointer;
}
[data-theme="dark"] .user-badge{color:var(--gold-light)}

.container{max-width:550px;margin:0 auto;padding:16px}

/* ===== SECTIONS ===== */
.section{display:none}
.section.active{display:block;animation:fadeIn 0.22s cubic-bezier(.4,0,.2,1)}

/* ===== CARDS ===== */
.card{
  background:var(--card);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
  transition:background 0.3s,box-shadow 0.3s,border-color 0.3s;
  border:1px solid var(--border);
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:10px;
}
.card-head h3{
  font-size:0.95rem;font-weight:800;
  display:flex;align-items:center;gap:8px;
}
.card-head h3 i{
  width:32px;height:32px;border-radius:10px;
  background:var(--hover-bg);color:var(--gold-primary);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.9rem;flex-shrink:0;border:1px solid var(--border);
}
.card-head .sub{font-size:0.7rem;color:var(--muted);font-weight:600}

/* ===== بطاقة الإحصائيات الملكية المعتمدة (HERO BALANCE CARD) ===== */
.hero-balance {
  background: #085446;
  border-radius: 24px;
  padding: 16px 14px 12px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(8, 84, 70, 0.25);
  margin-bottom: 16px;
}
.hb-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hb-main-val {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  letter-spacing: -0.3px;
}
.hb-main-val small {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
}
.hb-top-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}
.hb-top-badge i {
  font-size: 0.85rem;
}
.hb-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.hb-stat-cell {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 74px;
  transition: transform 0.2s, background 0.2s;
  box-sizing: border-box;
}
.hb-cell-lbl {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.hb-cell-lbl i {
  font-size: 0.85rem;
}
.hb-cell-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.hb-cell-num small {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}
.hb-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
  font-size: 0.75rem;
}
.hb-footer-right {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}
.hb-footer-left {
  color: #fde047;
  font-weight: 800;
  white-space: nowrap;
}


/* ===================================================================
   بطاقة الصيدلية اللامعة الخاصة (SHINY PHARMACY VIP CARD)
   =================================================================== */
.shiny-card-container{perspective:1000px;margin-bottom:16px}
.shiny-vip-card{
  background:var(--gradient-card);
  border-radius:22px;
  padding:24px 22px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(187,152,96,0.38), inset 0 1px 2px rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.35);
  transition:transform 0.3s cubic-bezier(.4,0,.2,1);
}
.shiny-vip-card:hover{transform:translateY(-3px)}

.shiny-vip-card::before{
  content:'';position:absolute;
  top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(60deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform:rotate(25deg);
  animation:cardShine 4.5s infinite ease-in-out;
  pointer-events:none;
}
@keyframes cardShine{
  0%{transform:translateX(-100%) rotate(25deg);}
  30%,100%{transform:translateX(100%) rotate(25deg);}
}

.card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;position:relative;z-index:2;
}
.card-pharmacy-brand{display:flex;align-items:center;gap:12px}
.card-pharmacy-logo-box{
  width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.45);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;overflow:hidden;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.card-pharmacy-logo-box img{width:100%;height:100%;object-fit:cover}

.card-pharmacy-name{
  font-size:1.2rem;font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,0.25);
  letter-spacing:-0.3px;line-height:1.2;
}
.card-pharmacy-sub{font-size:0.68rem;opacity:0.95;font-weight:600;margin-top:2px}
.card-badge-vip{
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.4);
  padding:4px 10px;border-radius:20px;
  font-size:0.65rem;font-weight:800;letter-spacing:1px;
  backdrop-filter:blur(6px);
}

.card-mid{margin:18px 0;position:relative;z-index:2}
.card-chip{
  width:38px;height:28px;border-radius:6px;
  background:linear-gradient(135deg, #ffe082, #ffb300);
  border:1px solid #d4a017;position:relative;display:inline-block;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.25);margin-bottom:12px;
}
.card-chip::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#b28704}
.card-chip::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#b28704}

.card-slogan-box{
  background:rgba(0, 0, 0, 0.2);
  border:1px solid rgba(255, 255, 255, 0.3);
  border-radius:12px;padding:10px 14px;
  backdrop-filter:blur(6px);
}
.card-slogan-text{
  font-size:0.85rem;font-weight:800;line-height:1.6;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  display:flex;align-items:center;gap:8px;
}
.card-slogan-text i{color:#ffe082;flex-shrink:0}

.card-bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.75rem;position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,0.25);
  padding-top:12px;margin-top:12px;
}
.card-location-disp{display:flex;align-items:center;gap:6px;font-weight:700}
.card-phone-disp{direction:ltr;font-weight:800;font-family:monospace;letter-spacing:0.5px}

/* ===== FORMS & AUTO BADGE ===== */
.inv-agent-auto-badge{
  background:var(--hover-bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.78rem;font-weight:700;
}
.inv-agent-auto-badge .agent-meta{display:flex;align-items:center;gap:8px}
.inv-agent-auto-badge .agent-meta strong{color:var(--gold-dark)}
[data-theme="dark"] .inv-agent-auto-badge .agent-meta strong{color:var(--gold-light)}

.field{margin-bottom:12px}
.field-label{display:block;font-size:0.75rem;font-weight:700;color:var(--text);margin-bottom:6px}
.field-label .req{color:var(--danger);margin-inline-start:3px}
.field-label .opt{color:var(--muted);font-weight:500;font-size:0.65rem}
.input,
.textarea,
select.input{
  width:100%;padding:12px 14px;
  border-radius:14px;
  border:1.5px solid var(--border-strong);
  background:var(--card);color:var(--text);
  font-size:0.9rem;font-family:inherit;
  outline:none;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
  -webkit-appearance:none;appearance:none;
}
.input:focus,
.textarea:focus,
select.input:focus{
  border-color:var(--gold-primary);
  box-shadow:0 0 0 3px rgba(187,152,96,0.18);
}
.input:disabled,
.textarea:disabled{
  background:var(--hover-bg);color:var(--muted);
  cursor:not-allowed;opacity:0.85;
}
.input::placeholder,
.textarea::placeholder{color:var(--muted);opacity:0.7}
.textarea{min-height:80px;resize:vertical;line-height:1.6}
.input[dir="ltr"]{text-align:right;padding-inline-start:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-hint{font-size:0.65rem;color:var(--muted);margin-top:4px;font-weight:500}

/* ===== CALC BOX ===== */
.calc-box{
  background:var(--hover-bg);
  border-radius:16px;padding:14px;margin:14px 0;
  border:1.5px dashed var(--border);
}
.calc-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;font-size:0.82rem;font-weight:600;
}
.calc-row.highlight{
  padding:10px 12px;margin-top:6px;
  background:var(--card);border-radius:12px;
  font-size:0.9rem;font-weight:800;
  border:1.5px solid var(--border);
}
.calc-row .val{direction:ltr;text-align:left;font-weight:800;font-variant-numeric:tabular-nums}
.calc-row.highlight .val{color:var(--gold-dark);font-size:1rem}
[data-theme="dark"] .calc-row.highlight .val{color:var(--gold-light)}
.calc-row.danger .val{color:var(--danger)}
.calc-row.success .val{color:var(--success)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 20px;
  border-radius:14px;border:none;cursor:pointer;
  font-family:inherit;font-size:0.85rem;font-weight:800;
  transition:transform 0.15s cubic-bezier(.4,0,.2,1),box-shadow 0.2s,opacity 0.2s;
  text-decoration:none;line-height:1;
}
.btn:active{transform:scale(0.96)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-primary{
  background:var(--gradient-primary);color:#fff;
  box-shadow:0 4px 14px rgba(187,152,96,0.35);width:100%;
}
.btn-secondary{background:var(--hover-bg);color:var(--text);border:1.5px solid var(--border)}
.btn-whatsapp{
  background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(37,211,102,0.3);width:100%;
}
.btn-danger{background:rgba(239,68,68,0.12);color:var(--danger);border:1.5px solid rgba(239,68,68,0.25)}
.btn-gold{
  background:var(--gradient-primary);color:#fff;
  box-shadow:0 4px 14px rgba(187,152,96,0.3);
}
.btn-settle{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.3);width:100%;
}
.btn-download-img{
  background:linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color:#fff;box-shadow:0 4px 14px rgba(99,102,241,0.3);width:100%;
}
.btn-download-pdf{
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color:#fff;box-shadow:0 4px 14px rgba(239,68,68,0.3);width:100%;
}
.btn-sm{padding:8px 12px;font-size:0.75rem;border-radius:10px}
.btn-icon{
  width:34px;height:34px;padding:0;border-radius:10px;
  background:var(--hover-bg);color:var(--text);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform 0.15s;flex-shrink:0;
}
.btn-icon:active{transform:scale(0.9)}
.btn-icon.edit{color:var(--gold-dark);background:rgba(187,152,96,0.12)}
.btn-icon.del{color:var(--danger);background:rgba(239,68,68,0.1)}
.btn-icon.wa{color:#25D366;background:rgba(37,211,102,0.12)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.btn-row .btn{width:100%}

/* ===== SEARCH & FILTER PILLS ===== */
.search-wrap, .search-box {
  position: relative;
  margin-bottom: 12px;
}
.search-wrap i, .search-box i, .search-box .search-icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 0.9rem;
}
.search-wrap .input, .search-box .search-input {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-wrap .input:focus, .search-box .search-input:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(187, 152, 96, 0.15);
}
.filter-pills{
  display:flex;gap:5px;margin-bottom:12px;
  background:var(--hover-bg);padding:4px;
  border-radius:14px;border:1px solid var(--border);
}
.filter-pill{
  flex:1;padding:7px 6px;border-radius:10px;
  border:none;background:transparent;
  color:var(--muted);font-family:inherit;
  font-size:0.72rem;font-weight:700;
  cursor:pointer;transition:all 0.2s;text-align:center;
  white-space:nowrap;
}
.filter-pill.active{
  background:var(--card);color:var(--gold-dark);
  box-shadow:0 2px 6px rgba(0,0,0,0.08);font-weight:800;
}
[data-theme="dark"] .filter-pill.active{color:var(--gold-light)}

/* ===== INVOICE LIST ===== */
.invoice{
  background:var(--card);
  border-radius:16px;padding:15px;margin-bottom:12px;
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform 0.15s cubic-bezier(.4,0,.2,1),opacity 0.3s;
  position:relative;overflow:hidden;
}
.invoice.editing{border:2px solid var(--gold-primary);box-shadow:0 0 0 4px rgba(187,152,96,0.18)}
.inv-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:10px;flex-wrap:wrap;
}
.inv-customer{
  display:flex;align-items:center;gap:8px;
  font-size:0.92rem;font-weight:800;min-width:0;flex:1;
}
.inv-customer .avatar{
  width:36px;height:36px;border-radius:12px;
  background:var(--gradient-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.9rem;flex-shrink:0;
  box-shadow:0 2px 8px rgba(187,152,96,0.3);
}
.inv-customer .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-badge-status{
  font-size:0.62rem;font-weight:700;padding:3px 8px;border-radius:12px;
  display:inline-flex;align-items:center;gap:4px;
}
.inv-badge-pending{background:rgba(217,119,6,0.12);color:var(--warning);border:1px solid rgba(217,119,6,0.3)}
.inv-badge-sent{background:rgba(22,163,74,0.12);color:var(--success);border:1px solid rgba(22,163,74,0.3)}
.inv-date{font-size:0.65rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px;flex-shrink:0}
.inv-agent-info{
  font-size:0.68rem;color:var(--muted);
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
  background:var(--hover-bg);padding:4px 8px;border-radius:8px;width:fit-content;
}
.inv-details{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
  padding:10px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);
  margin-bottom:10px;
}
.inv-detail{text-align:center}
.inv-detail .v{font-size:0.85rem;font-weight:800;direction:ltr;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-detail .l{font-size:0.6rem;color:var(--muted);font-weight:600;margin-top:2px;display:block}
.inv-detail.d-gold .v{color:var(--gold-dark)}
[data-theme="dark"] .inv-detail.d-gold .v{color:var(--gold-light)}
.inv-detail.d-green .v{color:var(--success)}
.inv-detail.d-red .v{color:var(--danger)}
.inv-note{
  font-size:0.72rem;color:var(--muted);
  background:var(--hover-bg);padding:8px 10px;
  border-radius:10px;margin-bottom:10px;
  line-height:1.6;display:flex;gap:6px;border:1px solid var(--border);
}
.inv-note i{color:var(--gold-primary);flex-shrink:0;margin-top:2px}
.inv-actions{display:flex;align-items:center;gap:6px;margin-top:6px}
.inv-actions .btn-wa-action{
  flex:1;min-width:0;
  background:#25D366;color:#fff;
  border:none;border-radius:10px;
  font-size:0.73rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;padding:8px 8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.inv-actions .btn-wa-action:active{transform:scale(0.96)}
.inv-actions .btn-icon{width:34px;height:34px;flex-shrink:0}

/* ===== MULTI-CUSTOMER BATCH STYLES ===== */
.invoice.selected{
  border:1.5px solid var(--gold-primary);
  background:rgba(187, 152, 96, 0.06);
  box-shadow:0 0 0 3px rgba(187, 152, 96, 0.2);
}
.inv-select-box{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;flex-shrink:0;
  padding:2px;
}
.inv-select-box input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--gold-primary);
  cursor:pointer;margin:0;
}
.batch-toolbar{
  background:var(--hover-bg);
  border:1.5px solid var(--border);
  border-radius:14px;padding:10px 12px;
  margin-bottom:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.batch-toolbar-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;font-size:0.78rem;font-weight:700;
}
.batch-toolbar-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}

/* ===== EMPTY STATE ===== */
.empty{text-align:center;padding:36px 18px;color:var(--muted)}
.empty i{font-size:3rem;opacity:0.3;margin-bottom:12px;display:block;color:var(--gold-primary)}
.empty h4{font-size:0.95rem;font-weight:800;color:var(--text);margin-bottom:6px}
.empty p{font-size:0.78rem;line-height:1.6}

/* ===== BOTTOM NAV ===== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(251, 249, 246, 0.95);
  border-top:1px solid var(--border);
  padding:8px 12px calc(8px + var(--safe-b));
  display:flex;justify-content:space-around;align-items:center;
  max-width:550px;margin:0 auto;
  box-shadow:0 -4px 20px rgba(0,0,0,0.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background 0.3s,border 0.3s;
}
[data-theme="dark"] .bottom-nav{background:rgba(17, 16, 14, 0.95);box-shadow:0 -4px 20px rgba(0,0,0,0.4)}
.nav-items{display:flex;width:100%;align-items:center;justify-content:space-around}
.nav-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  padding:6px 4px;border-radius:12px;
  font-family:inherit;color:var(--muted);
  font-size:0.62rem;font-weight:700;
  transition:color 0.2s,transform 0.15s;
}
.nav-item i{font-size:1.1rem}
.nav-item.active{color:var(--gold-primary);transform:translateY(-2px)}
.nav-item.active i{transform:scale(1.15)}

/* ===== MODAL & TOAST ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center;
  padding:0;
}
.modal-overlay.open,
.modal-overlay.active{display:flex !important;animation:fadeIn 0.2s}

[id^="adminSubModal_"]{
  z-index:10000 !important;
}

#editAgentModal,
#changeAgentPasswordModal,
#confirmModal,
#sendReportOptionsModal,
#sendBatchReportOptionsModal {
  z-index:11000 !important;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:26px 26px 0 0;
  width:100%;max-width:550px;
  max-height:92vh;overflow-y:auto;
  padding:20px 20px calc(24px + var(--safe-b));
  animation:slideUp 0.3s cubic-bezier(.4,0,.2,1);
  border-top:1px solid var(--border);
  scrollbar-width:none;-ms-overflow-style:none;
}
.modal::-webkit-scrollbar{display:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:44px;height:5px;border-radius:5px;background:var(--border-strong);margin:0 auto 16px}
.modal-title{
  font-size:1.05rem;font-weight:800;margin-bottom:16px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.modal-title i{color:var(--gold-primary)}
.modal p{font-size:0.82rem;color:var(--muted);line-height:1.7;text-align:center;margin-bottom:16px}

.toast{
  position:fixed;
  top:calc(12px + var(--safe-t, 0px));
  left:50%;
  transform:translateX(-50%) translateY(-30px);
  width:calc(100% - 24px);
  max-width:460px;
  background:var(--card, #ffffff);
  color:var(--text, #1a1714);
  padding:12px 16px;
  border-radius:14px;
  font-size:0.86rem;
  font-weight:700;
  box-shadow:0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
  z-index:25000;
  opacity:0;
  pointer-events:none;
  transition:transform 0.28s cubic-bezier(.4,0,.2,1),opacity 0.25s ease;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  border:1.5px solid var(--border);
  text-align:right;
  direction:rtl;
  box-sizing:border-box;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast i{font-size:1.2rem;flex-shrink:0}
.toast span{flex:1;text-align:right;line-height:1.45;word-break:break-word}
.toast.success{border-inline-start:5px solid var(--success);background:var(--card)}
.toast.success i{color:var(--success)}
.toast.error{border-inline-start:5px solid var(--danger);background:var(--card)}
.toast.error i{color:var(--danger)}
.toast.info{border-inline-start:5px solid var(--gold-dark);background:var(--card)}
.toast.info i{color:var(--gold-dark)}
.toast.warning{border-inline-start:5px solid #d97706;background:var(--card)}
.toast.warning i{color:#d97706}

/* ===== SECTIONS ===== */
.section{display:none}
.section.active{display:block;animation:fadeUp 0.3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== SEARCH & TABS ===== */
.search-wrap{position:relative;margin-bottom:14px}
.search-wrap i{
  position:absolute;inset-inline-start:14px;top:50%;
  transform:translateY(-50%);color:var(--muted);
  font-size:0.85rem;pointer-events:none;
}
.search-wrap .input{padding-inline-start:40px}

.filter-pills{
  display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;
}
.filter-pill{
  padding:6px 14px;border-radius:20px;
  background:var(--card);border:1px solid var(--border);
  color:var(--muted);font-size:0.75rem;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:all 0.2s;
}
.filter-pill.active{background:var(--gold-primary);color:#fff;border-color:var(--gold-primary)}

.agent-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-radius:14px;
  background:var(--hover-bg);border:1px solid var(--border);
  margin-bottom:8px;
}
.agent-item .info h5{font-size:0.85rem;font-weight:800;margin-bottom:2px}
.agent-item .info p{font-size:0.7rem;color:var(--muted);font-family:monospace}

/* ===== FOOTER DEVELOPER (بطاقة المطور المصغرة - طبق الأصل) ===== */
.dev-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 440px;
  margin: 18px auto 0;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.25s;
}
.dev-mini-card:active { transform: scale(0.98); }

.dev-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(187, 152, 96, 0.35);
}

.dev-mini-info {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.dev-mini-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dev-mini-brand {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.dev-mini-role {
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dev-mini-role i {
  color: var(--gold-primary);
  font-size: 0.6rem;
}

.dev-mini-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: transform 0.15s cubic-bezier(.4,0,.2,1), box-shadow 0.2s;
}
.dev-mini-btn:active {
  transform: scale(0.88);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
}

/* ===================================================================
   ورقة التقرير والمحضر الرسمية (DOCUMENT SHEETS FOR IMAGE & PDF)
   =================================================================== */
.doc-sheet, .settlement-sheet-wrap {
  background: #ffffff !important;
  color: #1a1714 !important;
  border-radius: 18px;
  padding: 24px;
  border: 2px solid #BB9860 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  margin-bottom: 16px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  position: relative;
  text-align: right;
  direction: rtl;
}
.sheet-brand, .doc-sheet-header {
  text-align: center;
  border-bottom: 2px dashed #BB9860;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.sheet-title, .doc-sheet-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #9E7B47 !important;
  margin-bottom: 4px;
}
.sheet-subtitle, .doc-sheet-sub {
  font-size: 0.85rem;
  color: #555555 !important;
  font-weight: 700;
}
.sheet-date {
  font-size: 0.78rem;
  color: #666666 !important;
  margin-top: 4px;
  font-weight: 600;
}

.sheet-meta-grid, .doc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #fdfbf7 !important;
  border: 1.5px solid #d8c5a2 !important;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.82rem;
}
.sheet-meta-item, .doc-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444444 !important;
  font-weight: 600;
}
.sheet-meta-item strong, .doc-meta-item strong {
  color: #1a1714 !important;
  font-weight: 800;
}

.sheet-table, .doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.82rem;
  border: 1.5px solid #d8c5a2 !important;
  border-radius: 10px;
  overflow: hidden;
}
.sheet-table th, .doc-table th {
  background: #f4ecdc !important;
  color: #7a5c29 !important;
  padding: 10px 8px;
  border: 1px solid #d8c5a2 !important;
  font-weight: 800;
  text-align: center;
}
.sheet-table td, .doc-table td {
  padding: 9px 8px;
  border: 1px solid #d8c5a2 !important;
  text-align: center;
  background: #ffffff !important;
  color: #1a1714 !important;
  font-weight: 600;
}

.sheet-summary-box, .doc-totals-box {
  background: #fdfbf7 !important;
  border: 1.5px solid #d8c5a2 !important;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}
.sheet-sum-row, .doc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed #e5d8c0;
  font-size: 0.85rem;
  color: #333333 !important;
  font-weight: 600;
}
.sheet-sum-row strong, .doc-total-row strong {
  color: #1a1714 !important;
  font-weight: 800;
}
.sheet-sum-row.main-due, .doc-total-row.main {
  background: #f5e9d3 !important;
  border: 1.5px solid #9E7B47 !important;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  font-weight: 900;
  font-size: 1rem;
  color: #82602d !important;
  border-bottom: none;
}
.sheet-sum-row.main-due strong, .doc-total-row.main strong {
  color: #82602d !important;
}

.sheet-signatures {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #d8c5a2;
}
.sig-box {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #555555 !important;
}
.sig-line {
  margin-top: 28px;
  border-bottom: 1.5px dashed #9E7B47;
}
.doc-stamp{
  display:inline-block;border:2px solid var(--success);color:var(--success);
  padding:4px 14px;border-radius:10px;font-weight:900;font-size:0.75rem;transform:rotate(-4deg);
}

/* ===== SYNC STATUS BADGES ===== */
.inv-sync-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sync-pending-created {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
[data-theme="dark"] .sync-pending-created {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
}
.sync-pending-updated {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.45);
}
[data-theme="dark"] .sync-pending-updated {
  background: rgba(59, 130, 246, 0.22);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.5);
}
.sync-synced {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.45);
}
[data-theme="dark"] .sync-synced {
  background: rgba(34, 197, 94, 0.22);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.5);
}

/* ===== NETWORK STATUS BANNER ===== */
.network-status-banner {
  position: sticky;
  top: 0;
  z-index: 990;
  width: 100%;
  padding: 8px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.network-status-banner.banner-offline {
  background: #c2410c; /* برتقالي / أحمر داكن واضح */
  color: #ffffff;
  border-bottom: 2px solid #9a3412;
}
.network-status-banner.banner-online {
  background: #15803d; /* أخضر هادئ */
  color: #ffffff;
  border-bottom: 2px solid #166534;
}
.network-status-banner.banner-syncing {
  background: #0284c7; /* أزرق أثناء المزامنة */
  color: #ffffff;
  border-bottom: 2px solid #0369a1;
}
.network-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  gap: 8px;
}
.network-status-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.network-status-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}
.network-status-text {
  line-height: 1.35;
  white-space: normal;
  font-size: 0.74rem;
}
.network-pending-badge {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.network-sync-btn {
  background: #ffffff;
  color: #15803d;
  border: none;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.network-sync-btn:active {
  transform: scale(0.95);
}

/* ===== VIP CARD PREVIEW (بطاقة الصيدلية اللامعة في الإعدادات) ===== */
.vip-card {
  width: 100%;
  background: var(--gradient-card);
  border-radius: 20px;
  padding: 18px;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(187, 152, 96, 0.35);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 8px;
}
.vip-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.12) 50%, transparent 55%);
  transform: rotate(30deg);
  pointer-events: none;
}
.vip-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vip-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vip-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  flex-shrink: 0;
}
.vip-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vip-title-box {
  display: flex;
  flex-direction: column;
}
.vip-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}
.vip-sub {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.vip-chip {
  font-size: 1.4rem;
  color: #fde047;
  opacity: 0.9;
}
.vip-slogan-box {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
}
.vip-slogan {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}
.vip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
  font-size: 0.72rem;
}
.vip-meta .l {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.8);
}
.vip-meta .v {
  font-weight: 800;
  color: #ffffff;
}

@media (max-width:360px){
  .container{padding:12px}
  .field-row{grid-template-columns:1fr}
  .hero-balance .hb-value{font-size:1.7rem}
  .inv-details{grid-template-columns:1fr 1fr}
}

/* ===================================================================
   أزرار لوحة تحكم وإدارات مدير النظام
   =================================================================== */
.admin-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  text-align: right;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(187,152,96,0.06);
  font-family: inherit;
  width: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(187,152,96,0.2);
  user-select: none;
  -webkit-user-select: none;
}
.admin-menu-btn * {
  pointer-events: none;
}
.admin-menu-btn:hover, .admin-menu-btn:active {
  border-color: var(--gold-primary);
  background: var(--hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(187,152,96,0.15);
}
.admin-menu-btn .icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(187,152,96,0.15), rgba(158,123,71,0.25));
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.admin-menu-btn .btn-text {
  flex: 1;
}
.admin-menu-btn .btn-text .title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
}
.admin-menu-btn .btn-text .desc {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.admin-menu-btn .arrow {
  color: var(--gold-dark);
  font-size: 0.85rem;
  opacity: 0.7;
}