/* الصفحة الرئيسية (Sectors) — شكل عصري. بيتحمّل بعد الـ CSS الأساسي وبيغيّر
   الشكل بس، من غير ما يلمس أي منطق أو صفحة تانية. */

.dashboard-container {
  background:
    radial-gradient(900px 340px at 85% -10%, rgba(0, 224, 255, .07), transparent 60%),
    radial-gradient(700px 300px at 0% 0%, rgba(168, 85, 247, .06), transparent 60%),
    #070d1b;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.dashboard-top-bar {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 12px 16px;
  backdrop-filter: blur(6px);
}
.dashboard-brand-row h1 {
  font-size: 1.5rem;
  letter-spacing: .14em;
  font-weight: 800;
}
.user-info {
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .82rem;
  margin-right: 0;
}
.logout-btn {
  border-radius: 999px;
  padding: 8px 16px;
}

.dashboard-header {
  text-align: start;
  border-bottom: 0;
  margin: 26px 4px 18px;
  padding-bottom: 0;
}
.dashboard-header h2 {
  display: inline-block;
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #ffffff, #7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dashboard-header h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #00e0ff, #6366f1);
}

.grid-categories {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.category-card {
  --c: #2f6fed;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.category-card[style*="display: none"] { display: none !important; }
.category-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .55;
}
.category-card:has(.text-green)  { --c: #4ade80; }
.category-card:has(.text-blue)   { --c: #60a5fa; }
.category-card:has(.text-red)    { --c: #f87171; }
.category-card:has(.text-teal)   { --c: #2dd4bf; }
.category-card:has(.text-orange) { --c: #fb923c; }
.category-card:has(.text-purple) { --c: #c084fc; }

.category-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255, 255, 255, .02));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--c) 22%, transparent);
}

.category-card .icon-style {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  font-size: 1.55rem;
  border-radius: 18px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.category-card h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.category-card p {
  margin: 0;
  font-size: .82rem;
  color: #94a3b8;
}

@media (max-width: 560px) {
  .dashboard-container { padding: 14px; border-radius: 16px; }
  .grid-categories { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { padding: 18px 10px 16px; }
  .category-card .icon-style { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 14px; }
}

/* ── صفحات القطاعات: أزرار الشيفتات والهيدر ── */
.shifts-container { gap: 14px; }
.shift-btn {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.shift-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, .5) !important;
  box-shadow: 0 12px 30px rgba(56, 189, 248, .16);
}
.content-header .btn-primary,
.content-header button { border-radius: 999px; }
.form-card { border-radius: 18px; }

/* ── هيدر الصفحة الرئيسية: لوجو أكبر وعنوان Internal Security Sector ── */
.dashboard-top-bar {
  padding: 18px 22px;
  border-radius: 20px;
  background:
    radial-gradient(500px 160px at 0% 0%, rgba(56, 189, 248, .10), transparent 70%),
    rgba(255, 255, 255, .03);
}
.dashboard-brand-row { gap: 18px; }
/* FIX: اللوجو نسبته طولية (مش مربع) — لما كان متحط جوه صندوق مربع بخلفية
   ملوّنة وحشو كبير، object-fit:contain كان بيصغّره جوه المساحة المتاحة
   أفقيًا فيبان تايه وسط فريم كبير فاضي حواليه. دلوقتي بيتعرض بعرضه
   الطبيعي من غير أي صندوق أو خلفية تنافسه، بس أكبر وبظل خفيف. */
.dashboard-brand-row .nav-logo {
  height: 72px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(47, 111, 237, .22));
}
.dashboard-brand-row .brand-text { display: flex; flex-direction: column; gap: 6px; }
.dashboard-brand-row h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  background: linear-gradient(90deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dashboard-brand-row .brand-sub {
  align-self: flex-start;
  padding: 2px 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .28em;
  color: #0891b2;
  background: rgba(6, 182, 212, .12);
  border: 1px solid rgba(6, 182, 212, .28);
  border-radius: 999px;
}
.dashboard-logo {
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 18px;
}
@media (max-width: 560px) {
  .dashboard-brand-row .nav-logo { height: 52px; width: auto; }
  .dashboard-logo { width: 48px; height: 48px; }
}