/* ==================== CSS Reset ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* ==================== CSS Variables (UPDATED PRO) ==================== */
:root{
  /* Logo palette (from the store logo) */
  --logo-green:#8DD63F;
  --logo-red:#FF3B3B;
  --logo-blue:#5FB3FF;
  --logo-yellow:#FFD43B;

  /* Brand mapping */
  --primary:var(--logo-blue);
  --primary-light:#7CC4FF;
  --primary-dark:#2F7BFF;

  --secondary:#64748b;
  --success:var(--logo-green);
  --danger:var(--logo-red);
  --warning:var(--logo-yellow);
  --info:#06b6d4;

  /* Gradient combining logo colors */
  --primary-gradient:linear-gradient(
    135deg,
    var(--logo-blue) 0%,
    var(--logo-green) 33%,
    var(--logo-yellow) 66%,
    var(--logo-red) 100%
  );

  /* Text */
  --text-dark:#0f172a;
  --text-light:#475569;
  --text-muted:#94a3b8;
  --text-white:#ffffff;

  /* Backgrounds */
  --bg-white:#ffffff;
  --bg-light:#f8fafc;
  --bg-lighter:#f1f5f9;
  --bg-dark:#0b1220;

  /* Borders */
  --border-light:#e2e8f0;
  --border-medium:#cbd5e1;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 10px 20px rgba(15,23,42,.10);
  --shadow-lg:0 18px 30px rgba(15,23,42,.12);
  --shadow-xl:0 26px 55px rgba(15,23,42,.16);

  /* Radius */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-full:9999px;

  /* Motion */
  --transition:all .25s ease;

  /* Accent / Buttons */
  --accent:var(--logo-blue);
  --accent-contrast:#ffffff;

  --btn-bg:linear-gradient(90deg, var(--logo-blue), var(--logo-green));
  --btn-bg-hover:linear-gradient(90deg, var(--logo-blue), var(--logo-yellow));
  --btn-color:var(--accent-contrast);

  --border-accent:2px solid var(--accent);

  /* Focus ring */
  --focus-ring:0 0 0 4px rgba(95,179,255,.18);
}

/* Headings and important text */
h1,h2,h3,h4,h5,h6{color:var(--accent)}

/* ==================== Base Styles ==================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Tajawal',system-ui,-apple-system,sans-serif;
  color:var(--text-dark);

  /* Soft multi-color pastel background using logo colors */
  background-image:
    radial-gradient(circle at 10% 15%, rgba(141,214,63,0.08) 0%, rgba(141,214,63,0.08) 18%, transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(95,179,255,0.10) 0%, rgba(95,179,255,0.06) 20%, transparent 45%),
    radial-gradient(circle at 25% 80%, rgba(255,59,59,0.06) 0%, rgba(255,59,59,0.04) 18%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(255,212,59,0.10) 0%, rgba(255,212,59,0.06) 16%, transparent 35%),
    linear-gradient(180deg, var(--bg-light), var(--bg-lighter));
  background-color:var(--bg-light);
  background-attachment:fixed;
  background-size:cover;

  line-height:1.6;
  overflow-x:hidden;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ==================== Typography ==================== */
h1,h2,h3,h4,h5,h6{
  font-weight:800;
  line-height:1.25;
  margin-bottom:.5rem;
}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.1rem}
h6{font-size:1rem}

p{
  margin-bottom:1rem;
  color:var(--text-light);
}

a{
  color:var(--primary);
  text-decoration:none;
  transition:var(--transition);
}
a:hover{color:var(--primary-dark)}

/* ==================== Small accent utilities ==================== */
.accent-text{color:var(--accent)}
.accent-border{border:var(--border-accent)}

/* ==================== Sidebar Navigation ==================== */
.sidebar-nav{
  position:fixed;
  left:-300px;
  top:0;
  width:300px;
  height:100vh;
  background:var(--bg-white);
  box-shadow:var(--shadow-xl);
  z-index:1000;
  transition:var(--transition);
  overflow-y:auto;
  border-right:1px solid rgba(2,6,23,.06);
}
.sidebar-nav.active{left:0}

.sidebar-header{
  padding:1rem;
  display:flex;
  justify-content:flex-end;
  border-bottom:1px solid var(--border-light);
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.90));
}
.sidebar-close{
  background:none;
  border:none;
  font-size:1.5rem;
  color:var(--text-dark);
  cursor:pointer;
  display:none;
}

.sidebar-content{padding:2rem 1rem}

.sidebar-logo{
  text-align:center;
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--border-light);
}
.sidebar-logo img{width:60px;height:60px;margin-bottom:1rem}
.sidebar-logo h5{color:var(--primary);font-weight:900}

.sidebar-menu{list-style:none;margin-bottom:2rem}
.sidebar-menu li{margin-bottom:.5rem}

.sidebar-menu a{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  border-radius:var(--radius-md);
  color:var(--text-dark);
  transition:var(--transition);
  position:relative;
}
.sidebar-menu a:hover,
.sidebar-menu a.active{
  background:linear-gradient(90deg, rgba(95,179,255,.18), rgba(141,214,63,.14));
  color:var(--text-dark);
  border:1px solid rgba(95,179,255,.22);
}
.sidebar-menu i{font-size:1.25rem}

.sidebar-divider{
  margin:2rem 0;
  border:none;
  border-top:1px solid var(--border-light);
}

.sidebar-footer{margin-top:auto}
.btn-admin{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  padding:.8rem 1rem;
  background-image:var(--btn-bg);
  color:var(--btn-color);
  border-radius:var(--radius-md);
  font-weight:800;
  transition:var(--transition);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.btn-admin:hover{background-image:var(--btn-bg-hover);color:var(--btn-color)}

/* ==================== Sidebar Overlay ==================== */
.sidebar-overlay{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  z-index:999;
  transition:var(--transition);
  pointer-events:none;
}
.sidebar-overlay.active{
  background:rgba(2,6,23,.55);
  pointer-events:auto;
}

/* ==================== Header ==================== */
.main-header{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:100;
}

.header-container{
  max-width:1400px;
  margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.header-left{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1;
}

.nav-toggle{
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  display:none;
  flex-direction:column;
  gap:6px;
}
.nav-toggle span{
  width:25px;
  height:3px;
  background:var(--primary);
  border-radius:var(--radius-full);
  transition:var(--transition);
}

.header-logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--primary);
  font-weight:900;
  font-size:1.25rem;
}
.logo-img{width:45px;height:45px}
.logo-text{display:none}

.header-nav{
  display:flex;
  gap:2.5rem;
  flex:1;
}
.nav-link{
  color:var(--text-dark);
  font-weight:700;
  padding:.5rem 0;
  border-bottom:3px solid transparent;
  transition:var(--transition);
  position:relative;
}
.nav-link:hover,
.nav-link.active{
  color:var(--primary-dark);
  border-bottom-color:var(--primary);
}

.header-right{display:flex;gap:1rem}

.btn-admin-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1.15rem;
  background-image:var(--btn-bg);
  color:var(--btn-color);
  border-radius:var(--radius-md);
  font-weight:900;
  font-size:.95rem;
  transition:var(--transition);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.btn-admin-header:hover{background-image:var(--btn-bg-hover);color:var(--btn-color)}
.btn-admin-header span{display:inline}

/* ==================== Main Content ==================== */
.main-content{
  min-height:calc(100vh - 300px);
  margin-top:0;
}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.container-fluid{width:100%;padding:0 1.5rem}

/* ==================== Page Header ==================== */
.page-header{
  background-image:linear-gradient(rgba(2,6,23,0.18), rgba(2,6,23,0.18)), var(--primary-gradient);
  background-repeat:no-repeat;
  background-size:cover;
  color:var(--text-white);
  padding:3rem 1.5rem;
  text-align:center;
  margin-bottom:2rem;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  text-shadow:0 2px 10px rgba(2,6,23,.25);
}
.page-header h1{font-size:2.5rem;margin-bottom:.5rem}
.page-header p{color:rgba(255,255,255,.92);font-size:1.1rem;margin:0}

/* ==================== Cards ==================== */
.card{
  background:var(--bg-white);
  border:1px solid rgba(2,6,23,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:var(--transition);
}
.card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.card.accent,.stat-card,.category-card.active{border:var(--border-accent)}

.card-header{
  padding:1.5rem;
  background:linear-gradient(180deg, rgba(241,245,249,.95), rgba(248,250,252,.90));
  border-bottom:1px solid var(--border-light);
}
.card-body{padding:1.5rem}
.card-footer{
  padding:1rem 1.5rem;
  background:linear-gradient(180deg, rgba(241,245,249,.95), rgba(248,250,252,.90));
  border-top:1px solid var(--border-light);
}

/* ==================== Buttons ==================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border:none;
  border-radius:var(--radius-md);
  font-weight:900;
  cursor:pointer;
  transition:var(--transition);
  font-size:1rem;
  text-decoration:none;
}

.btn-primary,.btn-strong,.btn-hero.primary{
  background-image:var(--btn-bg);
  color:var(--btn-color) !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.btn-primary:hover,.btn-strong:hover,.btn-hero.primary:hover{
  background-image:var(--btn-bg-hover);
  transform:translateY(-1px);
}

.btn-secondary{background:var(--secondary);color:var(--text-white)}
.btn-secondary:hover{background:#475569}

.btn-success{background:var(--success);color:var(--text-white)}
.btn-success:hover{filter:brightness(.95)}

.btn-danger{background:var(--danger);color:var(--text-white)}
.btn-danger:hover{filter:brightness(.95)}

.btn-outline,.btn-outline-secondary,.btn-outline-accent{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
}
.btn-outline:hover,.btn-outline-secondary:hover,.btn-outline-accent:hover{
  background:rgba(95,179,255,.12);
}

.btn-sm{padding:.5rem 1rem;font-size:.9rem}
.btn-lg{padding:1rem 2rem;font-size:1.1rem}
.btn-block{width:100%}

/* Focus styles */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-md);
}

/* ==================== Forms ==================== */
.form-group{margin-bottom:1.5rem}
.form-label{
  display:block;
  margin-bottom:.5rem;
  font-weight:900;
  color:var(--text-dark);
}
.form-control{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
  font-family:inherit;
  font-size:1rem;
  color:var(--text-dark);
  transition:var(--transition);
  background:rgba(255,255,255,.9);
}
.form-control:focus{
  outline:none;
  border-color:rgba(95,179,255,.65);
  box-shadow:var(--focus-ring);
}
textarea.form-control{min-height:120px;resize:vertical}
select.form-control{cursor:pointer}

/* ==================== Grid ==================== */
.grid{display:grid;gap:2rem}
.grid-cols-1{grid-template-columns:1fr}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}

/* ==================== Alerts ==================== */
.alert{
  padding:1rem 1.5rem;
  border-radius:var(--radius-md);
  margin-bottom:1rem;
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.alert-success{background:#ecf5e9;color:#0b3b1b;border:1px solid #c6e9c9}
.alert-danger{background:#fde7ee;color:#9b1c1c;border:1px solid #f8bbd0}
.alert-warning{background:#fff6d6;color:#7a4419;border:1px solid #ffe08a}
.alert-info{background:#cffafe;color:#0c4a6e;border:1px solid #a5f3fc}

/* ==================== Footer ==================== */
.main-footer{
  background:linear-gradient(180deg, rgba(2,6,23,.96), rgba(2,6,23,.90));
  color:var(--text-white);
  margin-top:4rem;
}
.footer-top{
  padding:3rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.footer-container{max-width:1200px;margin:0 auto}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}

.footer-section h4{
  font-size:1.1rem;
  margin-bottom:1.5rem;
  color:var(--text-white);
}
.footer-desc{color:#d1d5db;margin-bottom:1.5rem;line-height:1.6}

.social-links{display:flex;gap:1rem}
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  background:rgba(255,255,255,.10);
  border-radius:var(--radius-full);
  color:var(--text-white);
  transition:var(--transition);
}
.social-icon:hover{background:rgba(95,179,255,.30)}

.footer-links{list-style:none}
.footer-links li{margin-bottom:.75rem}
.footer-links a{color:#d1d5db;transition:var(--transition)}
.footer-links a:hover{color:var(--logo-blue)}

.contact-info{display:flex;flex-direction:column;gap:1rem}
.contact-item{display:flex;align-items:center;gap:.75rem;color:#d1d5db}
.contact-item a{color:#d1d5db}
.contact-item a:hover{color:var(--logo-blue)}

.working-hours p{color:#d1d5db;margin-bottom:.25rem}
.working-hours p.time{font-weight:900;color:var(--logo-yellow);margin-bottom:.75rem}

.footer-bottom{
  padding:2rem 1.5rem;
  background:rgba(0,0,0,.22);
}
.footer-bottom-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d1d5db;
}
.footer-bottom-links{
  display:flex;
  gap:1rem;
  align-items:center;
}
.footer-bottom-links a{color:#d1d5db}
.footer-bottom-links a:hover{color:var(--logo-blue)}
.divider{color:#4b5563}

/* ==================== Scroll to Top ==================== */
.scroll-to-top{
  position:fixed;
  bottom:2rem;
  left:2rem;
  width:50px;height:50px;
  background-image:var(--btn-bg);
  color:var(--text-white);
  border:none;
  border-radius:var(--radius-full);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  opacity:0;
  visibility:hidden;
  transition:var(--transition);
  z-index:50;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
}
.scroll-to-top.visible{opacity:1;visibility:visible}
.scroll-to-top:hover{background-image:var(--btn-bg-hover);transform:translateY(-2px)}

/* ==================== Utility Classes ==================== */
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mb-4{margin-bottom:2rem}

.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}

.p-1{padding:.5rem}
.p-2{padding:1rem}
.p-3{padding:1.5rem}
.p-4{padding:2rem}

.text-center{text-align:center}
.text-end{text-align:end}
.text-start{text-align:start}

.text-white{color:var(--text-white)}
.text-dark{color:var(--text-dark)}
.text-muted{color:var(--text-muted)}
.text-primary{color:var(--primary)}

.bg-light{background:var(--bg-light)}
.bg-white{background:var(--bg-white)}
.bg-primary{background:var(--primary)}
.bg-dark{background:var(--text-dark)}

.fw-bold{font-weight:800}
.fw-normal{font-weight:400}

.d-flex{display:flex}
.d-grid{display:grid}
.d-none{display:none}

.align-items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

.gap-1{gap:.5rem}
.gap-2{gap:1rem}
.gap-3{gap:1.5rem}
.gap-4{gap:2rem}

/* ==================== Mobile Responsive ==================== */
@media (max-width:1024px){
  .header-nav{display:none}
  .nav-toggle{display:flex}
  .btn-admin-header span{display:none}
  .logo-text{display:inline}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  h1{font-size:2rem}
  h2{font-size:1.5rem}
  h3{font-size:1.25rem}
}

@media (max-width:768px){
  .header-container{padding:1rem;gap:1rem}
  .logo-img{width:35px;height:35px}
  .logo-text{font-size:1rem}

  .page-header{padding:2rem 1rem}
  .page-header h1{font-size:1.75rem}

  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
  .footer-bottom-content{flex-direction:column;gap:1rem;text-align:center}

  .scroll-to-top{
    width:45px;height:45px;
    bottom:1rem;left:1rem;
    font-size:1rem;
  }

  .sidebar-close{display:block}

  h1{font-size:1.5rem}
  h2{font-size:1.25rem}
  h3{font-size:1.1rem}

  .btn{padding:.65rem 1.25rem;font-size:.95rem}
}

@media (max-width:480px){
  .header-container{padding:.75rem}
  .logo-img{width:30px;height:30px}
  .sidebar-nav{width:250px;left:-250px}

  .card{margin-bottom:1rem}
  .card-body,.card-header,.card-footer{padding:1rem}

  .page-header{padding:1.5rem 1rem;margin-bottom:1.5rem}
  .page-header h1{font-size:1.5rem}

  /* اجعل الأزرار 100% فقط داخل الهواتف الصغيرة عند الحاجة */
  .btn.btn-block{width:100%}

  .form-control{padding:.65rem .75rem}

  h1{font-size:1.25rem}
  h2{font-size:1.1rem}
  h3{font-size:1rem}

  .container{padding:0 1rem}
  .footer-bottom-links{flex-wrap:wrap;gap:.5rem}
}