@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Tajawal:wght@300;400;500;700&display=swap');

:root{
  --color-bg:#F6F4EE;
  --color-ink:#16261F;
  --color-ink-soft:#5C6A63;
  --color-primary:#0F6B5C;
  --color-primary-dark:#0A4F44;
  --color-primary-tint:#E5F1ED;
  --color-gold:#E2A33D;
  --color-card:#fff;
  --color-line:#E4DECF;
  --color-danger:#B65338;
  --radius-lg:20px;
  --radius-md:12px;
  --font-display:'Cairo', sans-serif;
  --font-body:'Tajawal', sans-serif;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-body); background:var(--color-bg); color:var(--color-ink);
  direction:rtl;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.admin-shell{ min-height:100vh; display:flex; flex-direction:column;}
.admin-topbar{
  background:var(--color-primary-dark); color:#fff; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.admin-topbar .brand{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; display:flex; align-items:center; gap:10px;}
.admin-topbar .brand .dot{ width:9px;height:9px;border-radius:50%; background:var(--color-gold);}
.admin-topbar nav{ display:flex; gap:10px; align-items:center;}
.topbar-link{ font-size:.88rem; font-weight:600; color:#cfe6df; padding:8px 14px; border-radius:8px;}
.topbar-link:hover{ background:rgba(255,255,255,.1); color:#fff;}

.admin-main{ flex:1; padding:32px 28px 60px; max-width:1100px; margin:0 auto; width:100%;}

.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-head h1{ font-family:var(--font-display); font-size:1.5rem; margin:0;}
.page-head p{ margin:4px 0 0; color:var(--color-ink-soft); font-size:.9rem;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:10px;
  font-weight:700; font-size:.88rem; border:1px solid transparent; cursor:pointer;
  transition:.18s; min-height:42px;
}
.btn-primary{ background:var(--color-primary); color:#fff;}
.btn-primary:hover{ background:var(--color-primary-dark);}
.btn-ghost{ background:#fff; color:var(--color-primary-dark); border-color:var(--color-line);}
.btn-ghost:hover{ border-color:var(--color-primary);}
.btn-danger{ background:#fff; color:var(--color-danger); border-color:rgba(182,83,56,.4);}
.btn-danger:hover{ background:var(--color-danger); color:#fff;}
.btn-gold{ background:var(--color-gold); color:#3A2705;}
.btn-gold:hover{ filter:brightness(.94);}
.btn-sm{ padding:7px 14px; font-size:.8rem; border-radius:8px; min-height:38px;}
.btn-block{ width:100%; justify-content:center;}

/* Login */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 18% 20%, rgba(226,163,61,.18), transparent 45%),
    radial-gradient(circle at 84% 78%, rgba(15,107,92,.18), transparent 50%), var(--color-bg);
  padding:20px;
}
.login-card{
  background:#fff; border:1px solid var(--color-line); border-radius:var(--radius-lg);
  padding:40px 36px; width:100%; max-width:380px; box-shadow:0 20px 50px -20px rgba(15,107,92,.25);
  text-align:center;
}
.login-card .icon{
  width:64px; height:64px; border-radius:50%; background:var(--color-primary-tint);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  color:var(--color-primary-dark); font-size:1.6rem;
}
.login-card h1{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 6px;}
.login-card p{ color:var(--color-ink-soft); font-size:.88rem; margin:0 0 24px;}
.login-card input[type=password]{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--color-line);
  font-size:1.4rem; text-align:center; letter-spacing:6px; margin-bottom:16px; font-family:var(--font-display);
}
.login-card input[type=password]:focus{ outline:2px solid var(--color-primary); border-color:transparent;}
.error-msg{ background:#fbe9e3; color:var(--color-danger); padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:16px;}

/* Table */
.cases-table-wrap{
  background:#fff; border:1px solid var(--color-line); border-radius:var(--radius-lg); overflow:hidden;
}
table{ width:100%; border-collapse:collapse;}
thead th{
  text-align:right; font-size:.78rem; color:var(--color-ink-soft); text-transform:uppercase; letter-spacing:.03em;
  padding:14px 18px; border-bottom:1px solid var(--color-line); background:#FAF8F2;
}
tbody td{ padding:14px 18px; border-bottom:1px solid var(--color-line); font-size:.9rem; vertical-align:middle;}
tbody tr:last-child td{ border-bottom:none;}
.thumb-cell{ width:54px; height:54px; border-radius:10px; overflow:hidden; background:var(--color-primary-tint);}
.thumb-cell img{ width:100%; height:100%; object-fit:contain;}
.status-pill{ font-size:.75rem; font-weight:700; padding:5px 12px; border-radius:999px; display:inline-block;}
.status-pill.open{ background:var(--color-primary-tint); color:var(--color-primary-dark);}
.status-pill.closed{ background:#fbe9e3; color:var(--color-danger);}
.row-actions{ display:flex; gap:8px; flex-wrap:wrap;}

.empty-row td{ text-align:center; padding:50px 20px; color:var(--color-ink-soft);}

/* Form */
.form-card{ background:#fff; border:1px solid var(--color-line); border-radius:var(--radius-lg); padding:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){ .form-grid{grid-template-columns:1fr;} }
.field{ margin-bottom:20px;}
.field.full{ grid-column:1/-1;}
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:8px; color:var(--color-ink);}
.field .hint{ font-size:.76rem; color:var(--color-ink-soft); margin-top:6px;}
.field input[type=text], .field input[type=number], .field input[type=date], .field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--color-line);
  font-family:var(--font-body); font-size:.92rem; background:#FCFBF7;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--color-primary); border-color:transparent; background:#fff;}
.field textarea{ min-height:130px; resize:vertical;}
.amount-input{ position:relative; direction:ltr;}
.amount-input span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--color-ink-soft); font-size:.95rem; font-weight:700; pointer-events:none;}
.field .amount-input input{ padding-left:32px; padding-right:14px; text-align:left; direction:ltr;}

/* Text field + copy button row (used in settings.php for the donation code) */
.code-input-row{ display:flex; gap:10px; align-items:stretch;}
.code-input-row input[type=text]{ flex:1; direction:ltr; text-align:left; font-family:var(--font-display); font-weight:700;}
.code-input-row .btn{ flex-shrink:0;}

.upload-box{
  border:2px dashed var(--color-line); border-radius:14px; padding:24px; text-align:center; background:#FCFBF7;
  cursor:pointer; transition:.2s;
}
.upload-box:hover{ border-color:var(--color-primary); background:var(--color-primary-tint);}
.upload-box .icon{ font-size:1.6rem; margin-bottom:6px;}
.upload-box small{ display:block; color:var(--color-ink-soft); margin-top:4px;}
.preview-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.preview-item{ position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid var(--color-line);}
.preview-item img{ width:100%; height:100%; object-fit:cover;}
.preview-item .rm{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.55);
  color:#fff; border:none; font-size:.7rem; display:flex; align-items:center; justify-content:center;
}
.existing-images{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; background:#FCFBF7; border:1px solid var(--color-line);
  border-radius:12px; padding:14px 16px; margin-bottom:20px; gap:14px;
}
.toggle-row strong{ font-size:.88rem;}
.toggle-row p{ margin:2px 0 0; font-size:.78rem; color:var(--color-ink-soft);}
.toggle-row .switch{ flex-shrink:0; white-space:nowrap; font-size:.85rem; font-weight:600;}

.form-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap;}

.alert{ padding:12px 16px; border-radius:10px; font-size:.88rem; margin-bottom:20px;}
.alert-success{ background:var(--color-primary-tint); color:var(--color-primary-dark);}
.alert-error{ background:#fbe9e3; color:var(--color-danger);}

/* ==========================================================
   Mobile responsiveness
   ========================================================== */
@media (max-width: 780px){
  .admin-topbar{
    padding:14px 16px;
    flex-wrap:wrap;
    gap:10px;
  }
  .admin-topbar .brand{ font-size:1rem; }
  .admin-topbar nav{ width:100%; justify-content:flex-start; flex-wrap:wrap; gap:6px; }
  .topbar-link{ padding:8px 10px; font-size:.8rem; }

  .admin-main{ padding:18px 14px 50px; }

  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head .btn{ width:100%; }

  .form-card{ padding:18px 16px; }
  .form-actions{ flex-direction:column-reverse; }
  .form-actions .btn{ width:100%; }

  .toggle-row{ flex-direction:column; align-items:flex-start; }
  .toggle-row .switch{ align-self:flex-start; }

  .code-input-row{ flex-direction:column; }
  .code-input-row .btn{ width:100%; }

  .login-card{ padding:30px 22px; }

  /* Responsive table -> stacked cards */
  .cases-table-wrap{ border:none; background:transparent; overflow:visible; }
  table, thead, tbody, th, td, tr{ display:block; width:100%; }
  thead{ display:none; }
  table tbody tr{
    background:#fff; border:1px solid var(--color-line); border-radius:14px;
    margin-bottom:14px; padding:6px 14px; box-shadow:0 2px 10px -6px rgba(22,38,31,.15);
  }
  table tbody tr.empty-row{ background:transparent; border:none; box-shadow:none; padding:0; }
  table tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border-bottom:1px dashed var(--color-line); padding:12px 0; text-align:left;
  }
  table tbody td:last-child{ border-bottom:none; }
  table tbody td::before{
    content: attr(data-label);
    font-weight:700; color:var(--color-ink-soft); font-size:.78rem; flex-shrink:0;
  }
  table tbody td.thumb-td{ justify-content:flex-start; }
  table tbody td.thumb-td::before{ margin-inline-end:10px; }
  .thumb-cell{ margin-inline-start:auto; }
  .row-actions{ justify-content:flex-end; width:100%; }
}

@media (max-width:420px){
  .login-card{ padding:26px 18px; }
  .login-card input[type=password]{ font-size:1.15rem; letter-spacing:4px; }
  .btn{ padding:9px 16px; font-size:.84rem; }
  .page-head h1{ font-size:1.3rem; }
}