/* ألوان وهوية */
:root{
  --primary:#006c35;          /* الأخضر المعتمد */
  --primary-900:#00512a;
  --bg:#f5f6f7;
  --panel:#ffffff;
  --text:#2f2f33;
  --muted:#6b7280;
  --border:#e5e7eb;
  --ring:rgba(0,108,53,.18);
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --radius:16px;
  --gap:16px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:'Tajawal',system-ui,Segoe UI,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.7;
  direction:rtl; text-align:right;
}

/* تخطيط عام */
.layout{ padding-top:76px; }

.container{
  width:min(1200px,94vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  padding:20px;
}

.container--narrow{
  width:min(1100px,94vw);
  margin-inline:auto; padding:24px 20px;
}

/* مسار */
.breadcrumb{
  width:min(1100px,94vw);
  margin:90px auto 0; padding-inline:20px;
  color:var(--muted); font-size:14px;
}
.breadcrumb ol{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.breadcrumb a{ color:var(--primary); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* Navbar ثابت */
.navbar{
  position:fixed; inset-inline:0; top:0; z-index:50;
  background:var(--panel); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:10px 16px;
  display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:10px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; }
.brand__logo{
  width:36px; height:36px; border-radius:10px; display:inline-grid; place-items:center;
  background:var(--primary); color:#fff; font-weight:700;
}
.brand__name{ font-size:16px; }

.search{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.input{
  height:40px; border-radius:10px; border:1px solid var(--border);
  background:#fff; padding:0 12px; outline:none;
}
.input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); }

/* =========================
   الأزرار (سلوك موحّد)
   ========================= */
.btn{
  height:40px; border-radius:10px; padding:0 14px;
  border:1px solid transparent;
  display:inline-grid; place-items:center;
  cursor:pointer; user-select:none; transition:.2s ease;
  color:var(--primary);                    /* نص أخضر افتراضيًا */
  background:#fff;                         /* خلفية فاتحة افتراضيًا */
  border-color:var(--border);
}
.btn--primary{
  color:var(--primary);                    /* نص أخضر */
  background:#fff;                         /* بدون تعبئة */
  border-color:var(--primary);             /* إطار أخضر */
}
.btn--ghost{
  color:var(--primary);
  background:transparent;
  border-color:var(--primary);
}

/* عند المرور: الخلفية أخضر والنص أبيض للجميع */
.btn:hover,
.btn:focus-visible{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* أزرار الأيقونات تتبع نفس السلوك */
.icon-btn{
  height:40px; width:40px; display:inline-grid; place-items:center;
  border-radius:10px; border:1px solid var(--border);
  background:#fff; cursor:pointer; transition:.2s ease;
  color:var(--primary);                    /* نص/رمز أخضر */
}
.icon-btn:hover,
.icon-btn:focus-visible{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* روابط سريعة في النافبار (اختياري تركها كرابط عادي) */
.quick-links{ display:none; gap:10px; }
.quick-links .link{ color:var(--text); text-decoration:none; font-weight:500; }
.quick-links .link:hover{ color:var(--primary); }

/* بطاقات */
.card{
  grid-column:span 12;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 16px 12px;
}
.card__header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.card__title{ margin:0; font-size:18px; }
.card__actions{ display:flex; gap:8px; }

.list{ margin:8px 0 0; padding:0 14px; }
.list li{ margin:8px 0; }

.meta{ margin:10px 0 0; color:var(--muted); font-size:13px; }
.hint{ margin:8px 0 0; color:var(--muted); font-size:13px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pill{
  border:1px solid var(--border); border-radius:999px; padding:8px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff;
}

/* الطقس */
.weather{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; }
.weather__city{ display:grid; }
.weather__temp{ font-size:34px; font-weight:700; }

/* المباريات */
.matches{ list-style:none; padding:0; margin:6px 0 0; }
.match{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:10px; padding:8px 0; border-bottom:1px dashed var(--border);
}
.match:last-child{ border-bottom:0; }
.team{ text-align:center; }
.score{ font-weight:700; }
.when{ color:var(--muted); font-size:12px; }

/* الإجازة */
.holiday{
  display:flex; align-items:center; justify-content:space-between;
  border:1px dashed var(--border); padding:12px; border-radius:12px; background:#fff;
}

/* أدوات وحاسبات (تعاملها كأزرار) */
.tools-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.tool{
  display:block; text-decoration:none; text-align:center; padding:12px 10px;
  border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; transition:.2s ease;
  color:var(--primary);                    /* نص أخضر افتراضيًا */
}
.tool:hover,
.tool:focus-visible{
  background:var(--primary);               /* عند المرور: أخضر */
  color:#fff;                              /* والنص أبيض */
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}

/* footer */
.footer{ margin-top:28px; border-top:1px solid var(--border); color:var(--muted); background:#fafafa; }
.footer__nav{ display:flex; gap:14px; margin-top:6px; }
.footer__nav a{ color:var(--muted); text-decoration:none; }
.footer__nav a:hover{ color:var(--primary); }

/* تجاوب */
@media (min-width:700px){
  .quick-links{ display:flex; }
  #gold-card     { grid-column:span 6; }
  #fuel-card     { grid-column:span 6; }
  #weather-card  { grid-column:span 4; }
  #fx-card       { grid-column:span 4; }
  #crypto-card   { grid-column:span 4; }
  #matches-card  { grid-column:span 8; }
  #holidays-card { grid-column:span 4; }
  #trends-card   { grid-column:span 6; }
  #tools-card    { grid-column:span 6; }
  #news-card     { grid-column:span 12; }
}

/* وضوح حقول الإدخال والـselect */
input, select, textarea{ color:var(--text); }
select, input::placeholder{ color:#555; }

/* وضع ليلي بسيط */
.dark{
  --bg:#0f1115; --panel:#151922; --text:#e5e7eb; --muted:#9ca3af; --border:#232734;
  --shadow:0 10px 22px rgba(0,0,0,.35); --ring:rgba(0,108,53,.35);
}
.dark .input{ background:#0f1218; border-color:#293040; color:var(--text); }
.dark .btn{ background:#0f1218; border-color:#293040; color:var(--primary); }
.dark .btn--primary{ border-color:var(--primary); }
.dark .btn:hover,
.dark .btn:focus-visible,
.dark .icon-btn:hover,
.dark .icon-btn:focus-visible,
.dark .tool:hover,
.dark .tool:focus-visible{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.dark .btn--ghost{ border-color:var(--primary); color:#c9f0dd; }
.dark .pill{ background:#0f1218; }
.dark .footer{ background:#0d0f14; }