/* =========================================
   city-hijri.css
   صفحة الشهر الهجري - نسخة مرتبطة بالهوية اللونية
========================================= */

/* =========================
   كرت العنوان
========================= */
.hijri-hero{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 10px 22px var(--color-shadow-strong);
  margin:18px auto 14px;
}

.hijri-title{
  margin:0 0 8px;
  text-align:center;
  font-size:38px;
  font-weight:900;
  line-height:1.35;
  color:var(--color-primary);
}

.hijri-subtitle{
  margin:0;
  color:var(--color-text-light);
  font-size:15px;
  line-height:1.6;
}

/* =========================
   التابات
========================= */
.hijri-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:14px 0 18px;
  flex-wrap:wrap;
}

.hijri-tabs .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-primary);
  font-weight:800;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hijri-tabs .tab:hover{
  transform:translateY(-1px);
}

.hijri-tabs .tab.active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}

/* =========================
   كرت الجدول
========================= */
.hijri-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 22px var(--color-shadow);
}

/* =========================
   جدول الشهر الهجري
========================= */
.hijri-table{
  width:100%;
  border-collapse:collapse;
}

.hijri-table thead{
  background:var(--color-surface-alt);
}

.hijri-table th,
.hijri-table td{
  padding:12px 10px;
  text-align:center;
  border-bottom:1px solid var(--color-border);
  font-size:14px;
}

.hijri-table th{
  font-weight:900;
  color:var(--color-primary-dark);
}

.hijri-table td{
  color:var(--color-text);
}

.hijri-table tr:hover{
  background:var(--color-surface-alt);
}

.hijri-table tr.today-row{
  background:color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
  font-weight:800;
}

/* =========================
   أزرار السابق / التالي
========================= */
.hijri-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px 0 10px;
  flex-wrap:wrap;
}

.hijri-nav .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:12px;
  border:1px solid var(--color-primary);
  background:var(--color-surface);
  color:var(--color-primary);
  font-weight:800;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}

.hijri-nav .nav-btn:hover{
  background:var(--color-primary);
  color:var(--color-white);
  transform:translateY(-1px);
}

.hijri-nav-bottom{
  margin-top:20px;
}

/* =========================
   موبايل
========================= */
@media (max-width: 768px){

  .hijri-hero{
    padding:16px 12px;
    border-radius:16px;
    margin:12px auto 12px;
  }

  .hijri-title{
    font-size:18px;
    line-height:1.4;
    margin:0 0 6px;
    word-break: keep-all;
  }

  .hijri-subtitle{
    font-size:13px;
    line-height:1.6;
  }

  .hijri-tabs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin:12px 0 16px;
  }

  .hijri-tabs .tab{
    width:100%;
    min-height:42px;
    padding:10px 8px;
    font-size:14px;
    text-align:center;
    white-space:nowrap;
  }

  .hijri-table{
    width:100%;
    table-layout:auto;
  }

  .hijri-table th,
  .hijri-table td{
    padding:6px 4px;
    font-size:11px;
    line-height:1.2;
    white-space:normal;
  }

  .hijri-table th{
    font-weight:800;
  }

  .hijri-table td{
    font-weight:600;
  }

  .hijri-table td:first-child,
  .hijri-table th:first-child{
    font-size:10px;
    line-height:1.25;
  }

  .hijri-nav{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:12px;
  }

  .hijri-nav .nav-btn{
    width:100%;
    min-height:42px;
    padding:10px 8px;
    font-size:14px;
    text-align:center;
    white-space:nowrap;
  }
}