:root{
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #6b7280;
  --electric: #008cff;
  --electric-dark: #006ad1;
  --card: #f5f9ff;
  --border: rgba(0,0,0,.08);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{
  box-sizing: border-box;
}

body{
  margin:0;
  min-height:100vh;
  background: linear-gradient(180deg,#ffffff,#f0f6ff);
  font-family: var(--font);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  direction: rtl;
}

/* Container */
.container{
  background: var(--bg);
  width:100%;
  max-width:420px;
  padding:40px 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align:center;
}

/* Header */
.header{
  margin-bottom:30px;
}

.logo{
  font-size:34px;
  font-weight:800;
  color: var(--electric);
  letter-spacing:1px;
}

.subtitle{
  margin-top:6px;
  color:var(--muted);
  font-size:15px;
}

/* Form */
form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

input{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:16px;
  outline:none;
  transition:.25s;
}

input:focus{
  border-color:var(--electric);
  box-shadow: 0 0 0 3px rgba(0,140,255,.15);
}

.btn{
  background: linear-gradient(135deg,var(--electric),var(--electric-dark));
  color:#fff;
  border:none;
  padding:14px;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
  text-decoration:none;
  display:inline-block;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,140,255,.35);
}

/* Footer */
.footer{
  margin-top:25px;
  text-align:center;
}

.social-icons{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:10px;
}

.social-icons a{
  color:var(--electric);
  font-size:18px;
  transition:.25s;
}

.social-icons a:hover{
  color:var(--electric-dark);
}

.copy{
  color:var(--muted);
  font-size:13px;
}

/* ====== TABLE STYLE (MODERN ELECTRIC BLUE) ====== */

.table-container{
  margin-top:25px;
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg);
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

thead{
  background:linear-gradient(135deg,var(--electric),var(--electric-dark));
  color:#fff;
}

th, td{
  padding:14px 12px;
  text-align:center;
  font-size:15px;
}

tbody tr{
  border-bottom:1px solid var(--border);
  transition:.2s;
}

tbody tr:hover{
  background:var(--card);
}

td a{
  color:var(--electric);
  font-size:13px;
  word-break: break-all;
}

td a:hover{
  text-decoration:underline;
}
/* ====== FULL RESPONSIVE SYSTEM ====== */

/* أساسيات العرض */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* الكونتينر الرئيسي */
.container,
.dashboard-wrap,
.add-box,
.table-wrap,
.admin-login-box {
  width: 100%;
  max-width: 100%;
}

/* الشاشات الكبيرة (لاب توب فما فوق) */
@media (min-width: 1024px) {
  .container {
    max-width: 420px;
  }

  .dashboard-wrap {
    max-width: 1100px;
  }
}

/* التابلت */
@media (max-width: 1023px) and (min-width: 600px) {
  .dashboard-wrap {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .add-box form {
    grid-template-columns: 1fr 2fr auto;
  }
}

/* الجوال */
@media (max-width: 599px) {

  body {
    padding: 12px;
  }

  .container {
    padding: 25px 18px;
  }

  .logo {
    font-size: 26px;
  }

  .subtitle {
    font-size: 13px;
  }

  input,
  .btn,
  button {
    font-size: 15px;
    padding: 12px;
  }

  /* الداشبورد */
  .dashboard-header {
    flex-direction: column;
    gap: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .add-box form {
    grid-template-columns: 1fr;
  }

  .table-wrap table {
    font-size: 13px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 10px 6px;
  }

  .logout-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================= */
/* Disable modern-electric-blue  */
/* effect on ADS (FINAL FIX)     */
/* ============================= */

/* صف الإعلانات */
.ads-row{
  display:flex !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
}

/* كل إعلان */
.ads-row .ad-box{
  flex:1 1 50% !important;
  max-width:50% !important;
}

/* صورة الإعلان */
.ads-row .ad-box img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:60px !important;      /* الطول الثابت */
  object-fit:cover !important;
  border-radius:8px;
}