/* =========================================================
   ديوانية حفاوة — التصميم العام
   ========================================================= */
:root{
  --teal:        #2f6d61;
  --teal-dark:   #234f46;
  --teal-light:  #4f9384;
  --gold:        #b8935a;
  --gold-light:  #d4b483;
  --charcoal:    #4a4a4a;
  --charcoal-dark:#333333;
  --bg:          #faf8f5;
  --bg-soft:     #f1ede6;
  --card:        #ffffff;
  --line:        #e6e0d6;
  --text:        #33322f;
  --text-soft:   #726f68;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 8px 30px rgba(43,40,30,.10);
  --shadow-sm:   0 3px 10px rgba(43,40,30,.08);
  --sidebar-w:   270px;
  --topbar-h:    68px;
  --app-gradient: radial-gradient(circle at 50% 30%, #2c655a 0%, #1f4c43 55%, #16362f 100%);
  --ink-light:   #fbf7f0;
  --ink-muted:   rgba(251,247,240,.68);
  --ink-faint:   rgba(251,247,240,.42);
  --glass:       rgba(255,255,255,.07);
  --glass-strong:rgba(255,255,255,.13);
  --glass-border:rgba(255,255,255,.16);
  --sidebar-bg:  rgba(15,42,37,.8);
  --topbar-bg:   rgba(15,42,37,.5);
  color-scheme: light;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  margin:0; padding:0; height:100%; width:100%;
  overscroll-behavior:none;
  overflow:hidden;
}
body{
  font-family:'Tajawal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--gold-light);}

/* ===================== شاشة الترحيب ===================== */
.splash{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 30%, #2c655a 0%, #1f4c43 55%, #16362f 100%);
  overflow:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
.splash.fade-out{opacity:0; visibility:hidden; pointer-events:none;}
.splash-bg{
  position:absolute; inset:-10%;
  background-image:
    radial-gradient(circle, rgba(212,180,131,.18) 0 2px, transparent 3px);
  background-size:46px 46px;
  animation:drift 40s linear infinite;
  opacity:.5;
}
@keyframes drift{ from{transform:translate(0,0);} to{transform:translate(-46px,-46px);} }

.splash-inner{position:relative; text-align:center; padding:0 24px;}
.splash-logo-wrap{
  width:150px; height:150px; margin:0 auto 28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95);
  border-radius:34px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation: logoZoom 1.1s cubic-bezier(.2,.9,.25,1.15) both;
}
.splash-logo{width:78%; height:78%; object-fit:contain;}
@keyframes logoZoom{
  0%{ transform:scale(.15) rotate(-8deg); opacity:0; }
  60%{ transform:scale(1.12) rotate(2deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.splash-title{
  color:#fbf7f0;
  font-weight:800;
  font-size:clamp(20px,4.4vw,34px);
  letter-spacing:.2px;
  opacity:0;
  animation: fadeUp .9s ease .55s forwards;
  text-shadow:0 4px 20px rgba(0,0,0,.25);
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.splash-loader{margin-top:28px; display:flex; gap:8px; justify-content:center; opacity:0; animation:fadeUp .8s ease 1s forwards;}
.splash-loader span{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-light);
  animation:bounce 1s ease-in-out infinite;
}
.splash-loader span:nth-child(2){animation-delay:.15s;}
.splash-loader span:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5;}40%{transform:translateY(-8px);opacity:1;}}

/* ===================== إطار التطبيق ===================== */
.app{
  height:100vh; height:100dvh; height:var(--app-vh, 100dvh);
  width:100%;
  display:flex; flex-direction:column;
  background:var(--app-gradient);
  position:relative; overflow:hidden;
}
/* طبقة النقاط الزخرفية الثابتة خلف كل شاشات التطبيق دون استثناء */
.app-bg{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(212,180,131,.16) 0 2px, transparent 3px);
  background-size:46px 46px;
  animation:drift 40s linear infinite;
  opacity:.5;
}

/* ---- الشريط العلوي ---- */
.topbar{
  height:var(--topbar-h); flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:transparent;
  position:relative;
}
.topbar-brand{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar-logo{width:40px; height:40px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));}
.topbar-titles{display:flex; flex-direction:column; min-width:0;}
.topbar-title{font-weight:800; font-size:16px; color:var(--ink-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 10px rgba(0,0,0,.3);}
.topbar-sub{font-size:11px; color:var(--gold-light); font-weight:700; letter-spacing:.3px; text-shadow:0 2px 8px rgba(0,0,0,.3);}
.topbar-actions{display:flex; align-items:center; gap:8px;}

.icon-btn{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--glass-border); background:var(--glass);
  color:var(--ink-light);
  border-radius:999px; padding:9px 12px;
  cursor:pointer; transition:.2s;
  font-size:13px; font-weight:700;
}
.icon-btn svg{width:19px; height:19px; flex:0 0 auto;}
.icon-btn:hover{background:var(--teal-light); color:#fff; border-color:var(--teal-light);}
.install-btn span, .fullscreen-btn span{display:none;}
@media(min-width:560px){.install-btn span, .fullscreen-btn span{display:inline;}}
.eye-btn{padding:9px; width:40px; height:40px; justify-content:center;}
.admin-btn{padding:9px; width:40px; height:40px; justify-content:center; text-decoration:none;}

/* ---- التخطيط الرئيسي ---- */
.main-wrap{flex:1 1 auto; display:flex; min-height:0; position:relative;}

/* ---- منطقة العرض ---- */
.viewer{flex:1 1 auto; min-width:0; position:relative; overflow:auto; background:transparent;}


.home-screen{
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  padding:24px 24px calc(24px + var(--topbar-h));
  background:transparent;
  color:var(--ink-light);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
}
.home-screen.active{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.home-logo-wrap{
  position:relative;
  width:118px; height:118px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.96);
  border-radius:28px;
  box-shadow:0 18px 46px rgba(0,0,0,.32);
}
.home-logo{width:76%; height:76%; object-fit:contain;}
.home-screen h2{position:relative; font-size:clamp(20px,3vw,30px); color:#fbf7f0; font-weight:800; text-shadow:0 4px 18px rgba(0,0,0,.25);}
.home-screen p{position:relative; font-size:15px; color:rgba(255,255,255,.72);}

.back-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:999px;
  padding:8px 14px; cursor:pointer; font-weight:700; font-size:13px; color:var(--ink-light);
  transition:.2s;
}
.back-btn svg{width:16px; height:16px; transform:scaleX(-1);}
.back-btn:hover{background:var(--teal-light); color:#fff; border-color:var(--teal-light);}

/* ---- عرض الوسائط بملء الشاشة بالكامل (بدون حاوية) ---- */
.media-view{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column;
  background:#000; padding:0;
  opacity:0; transform:scale(.97);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.media-view.active{opacity:1; transform:scale(1); pointer-events:auto;}
.media-header{
  position:absolute; top:0; inset-inline:0; z-index:2;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.media-header h2{font-size:clamp(16px,2.4vw,21px); font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5);}
.media-header .back-btn{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff;
}
.media-header .back-btn:hover{background:var(--teal-light); border-color:var(--teal-light); color:#fff;}

/* ---- القوائم الفرعية المنسدلة تحت كل قسم (أكورديون) ---- */
.sub-list{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease;
}
.sub-item{
  padding-inline-start:58px; padding-inline-end:14px;
  padding-block:10px;
  font-size:13.5px; font-weight:600; color:var(--ink-muted); cursor:pointer;
  border-radius:10px; transition:.15s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sub-item:hover{background:var(--glass); color:var(--ink-light);}
.sub-empty{
  padding-inline-start:58px; padding-inline-end:14px; padding-block:8px;
  font-size:12.5px; color:var(--ink-faint);
}

/* ---- مشغل الوسائط ---- */
.media-stage{
  flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center;
  background:#000; overflow:hidden; position:relative;
}
.media-stage video, .media-stage img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.media-stage iframe{width:100%; height:100%; border:0; background:#fff;}
.media-stage.doc-mode, .media-stage.web-mode{background:var(--teal-dark);}

.live-badge{
  position:absolute; top:16px; right:16px; z-index:5;
  display:flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.55); color:#fff; padding:8px 16px; border-radius:999px;
  font-size:13px; font-weight:800; letter-spacing:.3px;
}
.live-dot{width:9px; height:9px; border-radius:50%; background:#e05656; flex:0 0 auto; animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---- بث الكاميرا المباشر من شاشة التحكم نفسها ---- */
.live-cam-box{
  width:min(560px,92%); background:linear-gradient(160deg,var(--teal),var(--teal-dark));
  border-radius:22px; padding:26px; text-align:center; color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.live-cam-video-wrap{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#000; margin-bottom:16px;
}
.live-cam-video-wrap video{width:100%; height:100%; object-fit:cover; display:block;}
.cam-status-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.55); padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff;
}
.cam-status-dot{width:8px; height:8px; border-radius:50%; background:#888; flex:0 0 auto;}
.cam-status-dot.connecting{background:var(--gold-light); animation:pulse 1.4s ease-in-out infinite;}
.cam-status-dot.ok{background:var(--teal-light);}
.live-cam-error{color:#ffb4b4; font-size:12.5px; min-height:16px; margin-bottom:6px;}
.live-cam-actions{display:flex; gap:10px;}
.live-cam-actions button{
  flex:1 1 auto; padding:13px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:14.5px; transition:.15s;
}
.live-cam-actions button:disabled{opacity:.5; cursor:default;}
.cam-start-btn{background:linear-gradient(90deg,#d4b483,#b8935a); color:#2c2110;}
.cam-start-btn:hover{opacity:.92;}
.cam-switch-btn{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25) !important;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.cam-switch-btn svg{width:17px; height:17px; flex:0 0 auto;}
.cam-switch-btn:hover{background:rgba(255,255,255,.2);}
.cam-stop-btn{background:rgba(224,86,86,.18); color:#ffb4b4; border:1px solid rgba(224,86,86,.35) !important;}
.cam-stop-btn:hover{background:rgba(224,86,86,.3);}
.live-cam-note{margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.65); line-height:1.7;}

.audio-player-box{
  width:min(560px,92%); background:linear-gradient(160deg,var(--teal),var(--teal-dark));
  border-radius:22px; padding:34px 26px; text-align:center; color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.audio-art{
  width:110px; height:110px; margin:0 auto 20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, #93763f 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  animation:spin 9s linear infinite paused;
}
.audio-art.playing{animation-play-state:running;}
.audio-art svg{width:44px; height:44px; color:#2c2110;}
@keyframes spin{to{transform:rotate(360deg);}}
.audio-title{font-weight:800; font-size:17px; margin-bottom:18px;}
.audio-player-box audio{width:100%;}

.download-fallback{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:#2c2110; padding:10px 18px; border-radius:999px;
  font-weight:700; font-size:13.5px; text-decoration:none;
}
.doc-fallback-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; height:100%; padding:30px; text-align:center; color:var(--ink-light);
}

.link-modal-note{
  position:absolute; bottom:0; inset-inline:0; background:rgba(20,20,20,.82); color:#fff;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:13px;
}
.link-modal-note a{color:#fff; background:var(--teal); padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:700; white-space:nowrap;}

/* تنبيه: المعاينة في شاشة التحكم بدون صوت عمدًا (الصوت الفعلي
   يعمل من شاشة الجمهور فقط، لتفادي سماع المقطع مرتين متداخلتين) */
.local-mute-note{
  position:absolute; bottom:0; inset-inline:0; background:rgba(20,20,20,.75); color:#fff;
  padding:9px 14px; font-size:12.5px; text-align:center;
}
.audio-player-box .local-mute-note{
  position:static; background:transparent; padding:10px 0 0; margin:0; color:rgba(255,255,255,.7);
}

/* ===================== القائمة الجانبية ===================== */
.sidebar{
  width:var(--sidebar-w); max-width:86vw; flex:0 0 auto;
  background:transparent; border-left:1px solid var(--glass-border);
  display:flex; flex-direction:column; min-height:0;
  position:absolute; top:0; bottom:0; right:0;
  transform:translateX(0); transition:transform .4s cubic-bezier(.4,0,.2,1);
  z-index:30;
}
.sidebar.hidden{transform:translateX(110%);}

.sidebar-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 12px; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.sidebar-scroll::-webkit-scrollbar{display:none; width:0; height:0;}
.sidebar-head{font-size:12px; font-weight:800; color:var(--ink-faint); letter-spacing:.5px; margin:2px 8px 12px; text-transform:uppercase;}
.sidebar-nav{display:flex; flex-direction:column; gap:6px; min-width:0;}
.sidebar-nav-pinned{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--glass-border);}

.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:14px; cursor:pointer;
  color:var(--ink-light); font-weight:700; font-size:14px;
  transition:.18s; border:1px solid transparent;
  min-width:0; max-width:100%;
}
.nav-item:hover{background:var(--glass);}
.nav-item.active{background:linear-gradient(90deg, rgba(212,180,131,.18), rgba(212,180,131,.06)); border-color:var(--gold-light); color:var(--ink-light);}
.nav-item .nav-icon{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass); color:var(--gold-light);
}
.nav-item.active .nav-icon{background:var(--gold); color:#2c2110;}
.nav-item .nav-icon svg{width:18px; height:18px;}
.nav-item .nav-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto;
}
.nav-item .nav-count{
  margin-inline-start:auto; flex:0 0 auto; background:var(--glass-strong); color:var(--ink-muted);
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
}
.nav-item.active .nav-count{background:var(--gold); color:#2c2110;}
.nav-item .nav-chevron{
  width:16px; height:16px; flex:0 0 auto; color:var(--ink-faint);
  transition:transform .3s ease, color .2s ease;
}
.cat-toggle.expanded .nav-chevron{transform:rotate(90deg); color:var(--gold-light);}


.sidebar-backdrop{
  position:absolute; inset:0; background:rgba(10,26,22,.86); z-index:25;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* شاشات كبيرة: القائمة ثابتة ضمن التخطيط بدل التعويم فوق المحتوى */
@media(min-width:900px){
  .sidebar{position:relative; max-width:none; box-shadow:none; order:-1;}
  .sidebar.hidden{display:none;}
  .sidebar-backdrop{display:none !important;}
}

/* ---- زر تسجيل الدخول لإدارة العرض (شاشة الجمهور فقط) ----
   عنصر مستقل بموضع ثابت في أعلى منتصف الشاشة، وz-index أعلى
   من نافذة الوسائط (200) حتى يبقى ظاهرًا وقابلًا للنقر دائمًا
   مهما كان المعروض حاليًا (حتى أثناء عرض فيديو بملء الشاشة).
   بموضع فعلي (left/top) لا منطقي، بعيدًا عن الشعار (يمين) وأزرار
   الشاشة الكاملة/التثبيت (يسار) حتى لا يتداخل معهما. */
.gate-link{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:300;
  border:1px solid var(--glass-border); background:var(--glass);
  color:var(--ink-light); border-radius:999px; padding:8px 18px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:.2s;
}
.gate-link:hover, .gate-link:focus-visible{background:var(--teal-light); color:#fff; border-color:var(--teal-light); outline:none;}

.gate-modal{
  position:fixed; inset:0; z-index:500;
  background:rgba(8,20,17,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .25s ease;
}
.gate-modal.active{opacity:1;}
.gate-modal-box{
  background:rgba(255,255,255,.07); border:1px solid var(--glass-border);
  border-radius:22px; padding:32px 28px; width:100%; max-width:340px; text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
  transform:translateY(10px); transition:transform .25s ease;
}
.gate-modal.active .gate-modal-box{transform:translateY(0);}
.gate-modal-box p{color:var(--ink-light); font-size:14px; font-weight:700; margin-bottom:18px;}
.gate-modal-box input[type=tel]{
  width:100%; padding:13px 14px; border-radius:14px; border:1.5px solid var(--glass-border);
  font-family:inherit; font-size:20px; letter-spacing:7px; text-align:center; font-weight:700;
  background:rgba(0,0,0,.22); color:var(--ink-light); margin-bottom:10px;
}
.gate-modal-box input[type=tel]::placeholder{color:var(--ink-faint); letter-spacing:normal; font-size:13px; font-weight:400;}
.gate-modal-box input[type=tel]:focus{outline:none; border-color:var(--gold-light);}
.gate-modal-box .gate-error{
  color:#ffb4b4; font-size:12.5px; min-height:16px; margin-bottom:8px;
}
.gate-modal-actions{display:flex; gap:10px; margin-top:6px;}
.gate-modal-actions button{
  flex:1 1 auto; padding:12px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:14px; transition:.15s;
}
.gate-modal-actions .gate-submit{background:linear-gradient(90deg,#d4b483,#b8935a); color:#2c2110;}
.gate-modal-actions .gate-submit:hover{opacity:.92;}
.gate-modal-actions .gate-cancel{background:var(--glass); color:var(--ink-light); border:1px solid var(--glass-border);}
.gate-modal-actions .gate-cancel:hover{background:var(--glass-strong);}

/* ===================== استجابة الجوال ===================== */
@media(max-width:599px){
  :root{--topbar-h:60px;}
  .topbar{padding:0 12px;}
  .topbar-logo{width:34px; height:34px;}
  .topbar-title{font-size:14.5px;}
  .sidebar{width:88vw;}
}