/* لوحة تحكم مستندات تلفزيون الفجر */
:root{
  --navy:#0b1d33; --navy-2:#123152; --gold:#d8b25c;
  --ink:#16202c; --muted:#6f7f8f; --bg:#f2f5f8;
  --line:#e2e8ef; --good:#0f7b52; --bad:#b3261e;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",Tahoma,system-ui,-apple-system,"Noto Naskh Arabic",sans-serif;
  font-size:14px; line-height:1.6;
}
h1,h2,h3{margin:0}
a{color:var(--navy-2)}

/* ————— صفحة الدخول / 404 / الهبوط ————— */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
}
.login-card{
  background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:360px;
  text-align:center; box-shadow:0 20px 50px rgba(6,20,36,.35);
}
.login-card.wide{max-width:460px}
.login-logo{height:86px; width:auto; margin-bottom:14px; }
.login-card h1{font-size:19px; margin-bottom:6px}
.hint{color:var(--muted); font-size:13px; margin:6px 0 18px}
.login-card input[type=password]{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; text-align:center; letter-spacing:2px; outline:none; font-family:inherit;
}
.login-card input[type=password]:focus{border-color:var(--navy-2)}
.login-card button{
  width:100%; margin-top:12px; padding:12px; border:0; border-radius:10px;
  background:var(--navy); color:#fff; font-size:15px; font-family:inherit; cursor:pointer;
}
.login-card button:hover{background:var(--navy-2)}
.btn-link{display:inline-block; margin-top:16px; font-size:13px; color:var(--muted); text-decoration:none}
.doc-links{list-style:none; padding:0; margin:14px 0; text-align:start}
.doc-links li{border-bottom:1px solid var(--line)}
.doc-links a{display:block; padding:11px 4px; text-decoration:none; font-weight:600}
.doc-links a:hover{color:var(--gold)}

/* ————— شريط اللوحة ————— */
.admin-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:linear-gradient(180deg,var(--navy-2),var(--navy)); color:#fff;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:44px; width:auto}
.brand strong{display:block; font-size:15px}
.brand span{font-size:12px; color:#9fb4c9}
.logout{
  color:#cddae6; text-decoration:none; font-size:13px;
  border:1px solid rgba(255,255,255,.2); padding:7px 16px; border-radius:8px;
}
.logout:hover{background:rgba(255,255,255,.12); color:#fff}

.wrap{max-width:900px; margin:0 auto; padding:22px 16px 60px}

.card{
  background:#fff; border-radius:var(--radius); padding:22px;
  margin-bottom:20px; box-shadow:0 1px 3px rgba(11,29,51,.07);
}
.card h2{font-size:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line)}

/* ————— التنبيهات ————— */
.alert{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:13.5px}
.alert.good{background:#e7f5ee; color:var(--good); border:1px solid #bfe3d2}
.alert.bad{background:#fdeceb; color:var(--bad); border:1px solid #f6cdc9}

/* ————— منطقة السحب ————— */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:30px 20px; border:2px dashed #c9d5e0; border-radius:12px;
  background:#fafbfd; cursor:pointer; text-align:center; margin-bottom:18px;
  transition:border-color .18s, background .18s;
}
.drop:hover,.drop.over{border-color:var(--navy-2); background:#f0f5fa}
.drop.has-file{border-color:var(--good); background:#f2fbf7}
.drop svg{width:34px; height:34px; fill:none; stroke:var(--navy-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.drop b{font-size:14px; font-weight:600}
.drop small{color:var(--muted); font-size:12px}

/* ————— الحقول ————— */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; margin-bottom:6px; font-weight:600}
.field label small{font-weight:400; color:var(--muted)}
.field input[type=text],.field input[type=file]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:14px; font-family:inherit; outline:none; background:#fff;
}
.field input[type=text]:focus{border-color:var(--navy-2)}
.slug-input{display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff}
.slug-input span{padding:0 10px; font-size:12.5px; color:var(--muted); background:#f4f7fa; align-self:stretch; display:flex; align-items:center; white-space:nowrap; direction:ltr}
.slug-input input{flex:1; border:0; padding:10px 12px; font-size:14px; outline:none; font-family:inherit; direction:ltr; text-align:left}
.checks{display:flex; gap:20px; flex-wrap:wrap; margin:6px 0 18px}
.checks label{display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer}
.checks input{width:16px; height:16px; accent-color:var(--navy-2)}

button.primary{
  padding:12px 30px; border:0; border-radius:10px; background:var(--navy);
  color:#fff; font-size:14.5px; font-family:inherit; cursor:pointer;
}
button.primary:hover{background:var(--navy-2)}
button.primary:disabled{opacity:.6; cursor:default}
button.primary.small{padding:9px 22px; font-size:13.5px}

.upbar[hidden]{display:none}
.upbar{margin-top:14px; display:flex; align-items:center; gap:10px}
.upbar i{flex:1; height:6px; background:var(--line); border-radius:4px; overflow:hidden; display:block; position:relative}
.upbar i::after{content:''; position:absolute; inset-inline-start:0; top:0; height:100%; width:var(--p,0%); background:var(--gold); transition:width .2s}
.upbar span{font-size:12.5px; color:var(--muted); min-width:38px; font-variant-numeric:tabular-nums}

/* ————— قائمة المستندات ————— */
.empty{color:var(--muted); text-align:center; padding:26px 0; font-size:13.5px}
.docs{display:flex; flex-direction:column; gap:14px}
.doc{
  border:1px solid var(--line); border-radius:12px; padding:16px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
}
.doc.hidden-doc{background:#fafafa; opacity:.75}
.doc-main{flex:1 1 320px; min-width:0}
.doc h3{font-size:15px; margin-bottom:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tag{font-size:11px; background:#eef1f5; color:var(--muted); padding:2px 9px; border-radius:20px; font-weight:400}
.doc-url{display:flex; gap:6px; margin-bottom:9px}
.doc-url input{
  flex:1; min-width:0; padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  background:#f7f9fb; font-size:12.5px; color:var(--navy-2); direction:ltr; text-align:left;
  font-family:ui-monospace,Menlo,Consolas,monospace; outline:none;
}
.copy{
  padding:8px 16px; border:1px solid var(--navy-2); background:#fff; color:var(--navy-2);
  border-radius:8px; font-size:12.5px; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.copy:hover{background:var(--navy-2); color:#fff}
.copy.done{background:var(--good); border-color:var(--good); color:#fff}
.meta{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted)}
.meta .on{color:var(--good)}
.doc-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start}
.inline{display:inline}
.btn{
  padding:7px 14px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; font-size:12.5px; cursor:pointer; text-decoration:none;
  display:inline-block; font-family:inherit;
}
.btn:hover{background:#f4f7fa; border-color:#cfd9e3}
.btn.danger{color:var(--bad); border-color:#f0cfcc}
.btn.danger:hover{background:#fdeceb}
.edit-form{flex:1 1 100%; border-top:1px solid var(--line); padding-top:16px; margin-top:4px}

/* ————— تنبيه عائم ————— */
.toast{
  position:fixed; inset-inline:0; bottom:26px; margin:auto; width:max-content; max-width:88vw;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:24px; font-size:13px;
  opacity:0; transform:translateY(10px); transition:.25s; pointer-events:none; z-index:70;
  box-shadow:0 8px 26px rgba(11,29,51,.35);
}
.toast.show{opacity:1; transform:translateY(0)}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .wrap{padding:16px 12px 40px}
  .card{padding:16px}
  .doc-actions{width:100%}
  .doc-actions .btn{flex:1; text-align:center}
}