/* ============================================================
   Hayat Unified CSS (MERGED)
   - Combines: hayat-theme.css + theme.css
   - Goal: one file, no variable conflicts, preserve existing styles
   - Notes:
     * Keeps Hayat tokens as the "source of truth"
     * Adds backward-compatible variable aliases (brand/bg/card/text...)
   ============================================================ */

/* ====== Design Tokens (Single Source of Truth) ====== */
:root{
  /* Hayat tokens */
  --primary:#007ACD;
  --primary-light:#E0F2FE;
  --secondary:#0F172A;

  --success-bg:#ECFDF5; --success-text:#047857;
  --warning-bg:#FEF9C3; --warning-text:#92400E;
  --danger-bg:#FEF2F2;  --danger-text:#B91C1C;
  --info-bg:#DBEAFE;    --info-text:#1D4ED8;

  --bg-body:#F1F5F9;
  --bg-card:#FFFFFF;
  --text-main:#0F172A;
  --text-muted:#94A3B8;

  --radius-xl:20px;
  --radius-md:12px;
  --shadow-soft:0 10px 25px -5px rgba(15,23,42,.12);

  /* ===== Backward-compatible aliases (from legacy theme.css) ===== */
  --brand:var(--primary);
  --brand-700:#005c8f;     /* kept as-is from legacy */
  --accent:var(--primary);
  --bg:var(--bg-body);
  --card:var(--bg-card);
  --text:var(--text-main);
  --muted:var(--text-muted);
  --success:var(--success-text);
  --danger:var(--danger-text);
  --warning:var(--warning-text);
}

*{box-sizing:border-box;}

html[dir="rtl"] body,
body{
  font-family:'Tajawal', sans-serif !important;
  background-color:var(--bg-body);
  color:var(--text-main);
  margin:0;
  direction:rtl;
  line-height:1.6;
}

a{ text-decoration:none; transition:0.2s; color:var(--accent); }
a:hover{ opacity:.9; }

/* ============================================================
   Dashboard / App Theme (from hayat-theme.css)
   (Kept to preserve donor/admin/student/teacher dashboards)
   ============================================================ */

/* ====== Hayat Unified Theme (donor + admin + student + teacher) ====== */

:root {
    --primary: #007ACD;
    --primary-light: #E0F2FE;
    --secondary: #0F172A;

    --success-bg: #ECFDF5; --success-text: #047857;
    --warning-bg: #FEF9C3; --warning-text: #92400E;
    --danger-bg: #FEF2F2;  --danger-text: #B91C1C;
    --info-bg: #DBEAFE;    --info-text: #1D4ED8;

    --bg-body: #F1F5F9;
    --bg-card: #FFFFFF;
    --text-main: #0F172A;
    --text-muted: #94A3B8;

    --radius-xl: 20px;
    --radius-md: 12px;
    --shadow-soft: 0 10px 25px -5px rgba(15, 23, 42, 0.12);
}

/* ====== Global ====== */

body {
    font-family: 'Tajawal', sans-serif !important;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    direction: rtl;
    line-height: 1.5;
}

a { text-decoration: none; transition: 0.2s; }

/* ====== Layout ====== */

.dashboard-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px;
}

/* جعل card-box عامة في كل الأماكن */
.card-box {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    padding: 24px 28px;
    margin-bottom: 24px;
    border: none;
}

/* ====== Header & Nav Pills ====== */

.header-section {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    flex-wrap:wrap;
    gap:20px;
}

.page-title h1 {
    font-weight:800;
    font-size:28px;
    margin:0;
    letter-spacing:-0.5px;
}

.page-title small {
    color:var(--secondary);
    font-size:14px;
    font-weight:500;
}

.nav-pills-container {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    background:#fff;
    padding:6px;
    border-radius:50px;
    box-shadow:var(--shadow-soft);
}

.nav-pill {
    color:var(--secondary);
    padding:8px 16px;
    border-radius:40px;
    font-size:13px;
    font-weight:600;
}
.nav-pill:hover,
.nav-pill.active {
    background:var(--primary-light);
    color:var(--primary);
}
.nav-pill.btn-logout:hover {
    background:var(--danger-bg);
    color:var(--danger-text);
}

/* ====== Stat Cards ====== */

.action-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-bottom:20px;
}

.stat-card {
    background:var(--bg-card);
    border-radius:var(--radius-xl);
    padding:20px;
    box-shadow:var(--shadow-soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform:translateY(-3px);
    box-shadow:0 20px 25px -5px rgba(0,0,0,0.06);
}

.stat-info p {
    margin:0;
    color:var(--secondary);
    font-size:13px;
    font-weight:600;
}
.stat-info h3 {
    margin:6px 0 0;
    font-size:26px;
    font-weight:800;
}
.stat-info small {
    font-size:12px;
    color:var(--text-muted);
}

.stat-icon-soft {
    width:52px;
    height:52px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.stat-card.orange .stat-icon-soft { background:var(--primary-light); color:var(--primary); }
.stat-card.green  .stat-icon-soft { background:var(--success-bg); color:var(--success-text); }
.stat-card.blue   .stat-icon-soft { background:var(--info-bg);    color:var(--info-text); }
.stat-card.gray   .stat-icon-soft { background:var(--bg-body);    color:var(--secondary); }

/* ====== Workflow Strip ====== */

.workflow-strip {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px;
    margin-bottom:24px;
}

.workflow-step {
    border-radius:16px;
    padding:10px 14px;
    background:linear-gradient(90deg,#60a5fa,#dbeafe);
    box-shadow:var(--shadow-soft);
    color:#0f172a;
}
.workflow-step.green { background:linear-gradient(90deg,#22c55e,#bbf7d0); }
.workflow-step.gray  { background:linear-gradient(90deg,#e5e7eb,#f9fafb); }

/* للوحة الأدمن – الشريط الأصفر */
.workflow-step.yellow {
    background:linear-gradient(90deg,#facc15,#fef9c3);
}

.workflow-title { font-size:11px; font-weight:700; margin-bottom:4px; }
.workflow-value { font-size:18px; font-weight:800; }
.workflow-caption { font-size:11px; }

/* ====== Section Header ====== */

.section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.section-header h3 {
    margin:0;
    font-size:18px;
    font-weight:800;
}

/* ====== Tables ====== */

.hf-table-wrap { width:100%; overflow:auto; }

.hf-table {
    width:100%;
    border-collapse:collapse;
    background:#fff;
}
.hf-table thead th {
    text-align:right;
    padding:10px 12px;
    background:#f3f4f6;
    border-bottom:1px solid #e5e7eb;
    font-size:13px;
    color:var(--secondary);
}
.hf-table tbody td {
    padding:10px 12px;
    border-bottom:1px solid #f1f5f9;
    font-size:13px;
}
.hf-table tbody tr:hover {
    background:#f9fafb;
}

/* ====== Badges ====== */

.badge {
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
}

/* لحالات الوثائق وغيرها */
.status-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}
.status-badge::before {
    content:'';
    display:block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

/* ====== Form Styles ====== */

.donor-form-grid {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.donor-form-grid label {
    display:grid;
    gap:6px;
    font-size:13px;
}

.donor-input,
.donor-select,
.donor-textarea {
    padding:8px 10px;
    border-radius:10px;
    border:1px solid #d1d5db;
    background:#f9fafb;
    font-family:'Tajawal',sans-serif;
    font-size:13px;
}

.donor-input:focus,
.donor-select:focus,
.donor-textarea:focus {
    outline:none;
    border-color:var(--primary);
    background:#fff;
}

.donor-textarea {
    resize:vertical;
    min-height:80px;
}

/* ====== Buttons ====== */

.btn-primary-orange {
    background:var(--primary);
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    border:none;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.btn-primary-orange:hover {
    opacity:.9;
}

.btn-ghost-grey {
    background:#f9fafb;
    color:var(--secondary);
    padding:6px 12px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    font-size:13px;
    cursor:pointer;
}
.btn-ghost-grey:hover {
    background:#e5e7eb;
}

/* أزرار DataTables الشفافة في لوحة الأدمن */
.btn-ghost {
    background: transparent;
    color: var(--secondary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--bg-body);
    cursor:pointer;
}
.btn-ghost:hover {
    border-color: var(--primary-light);
    background: var(--primary-light);
    color: var(--primary);
}

/* ====== Alerts ====== */

.alert {
    border-radius:var(--radius-md);
    padding:10px 12px;
    font-size:13px;
    margin-top:10px;
}

.alert-success {
    background:var(--success-bg);
    color:var(--success-text);
    border:1px solid #6ee7b7;
}

.alert-error {
    background:var(--danger-bg);
    color:var(--danger-text);
    border:1px solid #fecaca;
}

.alert-warn {
    background:var(--warning-bg);
    color:var(--warning-text);
    border:1px solid #fde68a;
}

/* ==========================================================
   PUBLIC SKIN – LANDING ONLY
   - Applies ONLY when <body class="public-skin">
   - Restores the old index/campaigns/login look
   ========================================================== */

body.public-skin{
  background:#F1F5F9;
  color:#0F172A;
}

/* Container */
body.public-skin .container{
  width:min(1180px,92%);
  margin:0 auto;
}

/* ===== Header ===== */
body.public-skin .site-header{
  background:#005c8f;
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
body.public-skin .site-header .brand{ color:#fff; }

body.public-skin .site-header .actions a{
  color:#fff !important;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
body.public-skin .site-header .actions a:hover{ background:rgba(255,255,255,.16); }
body.public-skin .site-header .actions a:not(.ghost){
  background:#007ACD;
  border-color:transparent;
}

/* ===== Hero ===== */
body.public-skin .hero{
  margin:28px auto 16px;
  background:linear-gradient(135deg,#eaf6ff 0%,#fff 55%);
  border-radius:18px;
  padding:32px;
  border:1px solid #eef2f7;
}
body.public-skin .hero h1{
  margin:0 0 8px;
  font-size:38px;
  font-weight:800;
  color:#0f172a;
}
body.public-skin .hero p{
  margin:0;
  color:#64748b;
  font-size:16px;
}

/* ===== Grid ===== */
body.public-skin .grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:22px 0;
}

/* ===== Cards ===== */
body.public-skin .card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 30px rgba(11,74,111,.06);
  border:1px solid #eef2f7;
}
body.public-skin .card h3{ margin:0 0 8px; font-weight:800; color:#0f172a; }
body.public-skin .card p{ margin:0; color:#475569; }

/* ===== Buttons ===== */
body.public-skin .btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  background:#007ACD;
  color:#fff !important;
  font-weight:800;
}
body.public-skin .btn.secondary{ background:#007ACD; }
body.public-skin .btn.ghost{
  background:#fff;
  color:#007ACD !important;
  border:1px solid #dbe3ea;
}

/* Mobile */
@media(max-width:640px){
  body.public-skin .hero{ padding:16px 12px; border-radius:12px; }
  body.public-skin .hero h1{ font-size:28px; }
}