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

html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  padding:0;
  font-family: "Cairo", sans-serif;
  background:#ffffff;
  color:#0f172a;
  overflow-x:hidden;
}

/* منع أي عناصر وهمية تسبب Scroll */
body::before,
body::after{
  content:none !important;
  display:none !important;
}

/* ===================== CONTAINER ===================== */
.container{
  max-width:1200px;
  padding-left:16px;
  padding-right:16px;
}

/* ===================== NAVBAR ===================== */
.navbar{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  padding:12px 0;
}

/* ====== SITE TITLE (BRAND COLOR) ====== */
.navbar .site-title{
  font-size:1.25rem;
  font-weight:900;
  white-space:nowrap;
  background:linear-gradient(90deg,#1976D2,#2E7D32);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===================== LOGO ===================== */
.brand-logo{
  width:130px;
  height:130px;
  min-width:130px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.brand-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* ===================== MAIN ===================== */
main{
  width:100%;
  padding:40px 0;
}

/* ===================== CARDS ===================== */
.glass,
.info-card,
.kpi{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:24px;
  margin-bottom:24px;
}

.glass{
  text-align:center;
}

.info-card{
  text-align:center;
  height:100%;
}

.info-card i{
  font-size:2rem;
  color:#2563eb;
  margin-bottom:8px;
}

/* ===================== FORMS ===================== */
.form-label{
  font-weight:700;
}

.form-control,
.form-select{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
}

.form-control:focus,
.form-select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

/* ===================== FILE INPUT CUSTOM ===================== */
.file-box{
  border:2px dashed #c7d2fe;
  border-radius:16px;
  padding:18px;
  text-align:center;
  position:relative;
  background:#f8fafc;
}

.file-box.selected{
  border-color:#2563eb;
  background:#eef2ff;
}

.file-box .file-label{
  display:block;
  margin-bottom:10px;
  font-size:0.95rem;
  color:#475569;
}

.file-box .file-btn{
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 22px;
  font-weight:800;
  cursor:pointer;
}

.file-box .file-input{
  display:none;
}

/* ===================== IMAGE PREVIEW ===================== */
.img-preview{
  width:100%;
  max-height:160px;
  object-fit:cover;
  margin-top:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#ffffff;
}

/* ===================== BUTTONS ===================== */
.btn-blue{
  background:#2563eb;
  color:#ffffff !important;
  border:none;
  border-radius:12px;
  padding:12px 26px;
  font-weight:800;
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}

.btn-blue:hover{
  background:#1d4ed8;
  transform: translateY(-2px);
}

.btn-soft{
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 22px;
  font-weight:700;
}

.btn-soft:hover{
  background:#e2e8f0;
}

/* ===================== FOOTER ===================== */
.site-footer{
  width:100%;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  padding:20px 0;
  text-align:center;
}

.site-footer strong{
  display:block;
  font-weight:700;
  margin-bottom:4px;
}

.site-footer small{
  color:#64748b;
  font-size:0.9rem;
}

/* ===== Footer Designer Names (المطلوب) ===== */
.designer-name{
  color:#198754;
  font-weight:700;
  text-decoration:none;
  transition:color .25s ease;
}

.designer-name:hover{
  color:#146c43;
  text-decoration:underline;
}

/* ===================== ALERTS ===================== */
.alert{
  border-radius:14px;
}

/* ===================== ADMIN LAYOUT ===================== */
.admin-layout{
  display:flex;
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.admin-sidebar{
  width:260px;
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:20px 16px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:576px){
  .navbar .site-title{
    font-size:1.05rem;
  }

  .brand-logo{
    width:56px;
    height:56px;
    min-width:56px;
  }

  main{
    padding:24px 0;
  }
}