.home-container { padding: 16px; }
.home-actions { display:flex; align-items:center; gap:12px; margin: 16px 0; }
.open-menu { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; }
.open-services { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border: none; color:#0b1220; padding:8px 12px; border-radius:10px; cursor:pointer; box-shadow: 0 4px 15px rgba(79,172,254,0.4); }
.cards-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.card { background: rgba(17,20,50,0.75); border: 1px solid rgba(79,172,254,0.25); border-radius: 16px; padding: 16px; box-shadow: 0 8px 32px rgba(31,38,135,0.35); }
.card h3 { margin:0 0 8px 0; }
.activity { color:#94a3b8; font-size:0.9rem; }
.top-nav { position: sticky; top:0; z-index:45; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background: rgba(11,14,43,0.7); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.top-left { display:flex; align-items:center; gap:12px; }
.top-left img {
  width: 95px;
  height: auto;
  object-fit: contain;
  object-position: right center;
  background: transparent;
  clip-path: none;
  margin-inline: 0;
  mix-blend-mode: normal;
  filter: none;
}
.division-name { font-weight:600; }
.division-note { color:#94a3b8; font-size:0.8rem; }
.top-links { display:flex; align-items:center; gap:10px; }
.nav-link { color:#e5e7eb; text-decoration:none; padding:8px 10px; border-radius:8px; }
.nav-link { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.1); }
.lang-btn-mini {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  font-weight:700;
  letter-spacing:.02em;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.26);
  color:#fff;
  padding:6px 12px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
}
.lang-btn-mini:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.38);
}
.user-slot { display:flex; align-items:center; gap:8px; margin-inline-start:8px; position: relative; }

/* User Badge Visibility Enhancement */
.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 12px 4px 4px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  appearance: none;
}
.user-badge:focus,
.user-badge:focus-visible {
  outline: none;
  box-shadow: none;
}
.user-badge:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #6366f1;
}
#user-badge-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* User Menu Dropdown */
.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(17, 20, 50, 0.95);
  border: 1px solid rgba(79, 172, 254, 0.25);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  z-index: 100;
  margin-top: 8px;
}
[dir="rtl"] .user-menu {
  right: auto;
  left: 0;
}
.user-menu.open {
  display: flex;
}
.user-menu a, .user-menu button {
  display: block;
  width: 100%;
  text-align: inherit;
  padding: 10px 12px;
  color: #e5e7eb;
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.user-menu a:hover, .user-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* تحسين شريط الروابط ليكون أنيق وقابل للتمرير */
.top-links { position: relative; gap:8px; overflow-x: auto; scrollbar-width: none; }
.top-links::-webkit-scrollbar { display: none; }
.nav-slider { position: absolute; bottom: 0; height: 2px; background: linear-gradient(90deg,#0ea5e9,#22d3ee,#60a5fa); border-radius: 999px; box-shadow: 0 0 10px rgba(56,189,248,0.7); transition: left .25s ease, width .25s ease; }
@media (max-width: 900px) {
  .top-left .division-name { font-size: 0.95rem; }
  .hero-title { font-size: 1.6rem; }
  .qa-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpis-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .top-nav { padding:8px 10px; }
  .top-left { gap: 8px; }
  .top-left img {
    width: 78px;
    height: auto;
  }
  .division-note { display: none; }
  .top-links { gap:6px; }
  .lang-btn-mini { min-width: 40px; padding: 6px 10px; }
  .nav-link { padding:6px 8px; }
  .nav-link { padding:6px 8px; }
  .qa-grid { grid-template-columns: 1fr; }
  .kpis-grid { grid-template-columns: 1fr; }
}
.hero-section { padding: 40px 16px 20px; text-align:center; }
.hero-title { font-size: clamp(1.4rem, 2vw + 0.8rem, 2.2rem); font-weight: 700; }
.hero-tagline { color:#94a3b8; margin-top: 8px; display:inline-flex; align-items:center; gap:8px; }
.hero-tagline .dot { color:#fbbf24; font-size: 1.2rem; }
.hero-divider { width: 180px; height: 2px; background: linear-gradient(90deg,#0ea5e9,#22d3ee,#60a5fa); margin: 20px auto; border-radius: 999px; box-shadow: 0 0 15px rgba(56,189,248,0.6); }
.top-banner { max-width:1200px; margin: 0 auto 16px; background: rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:#a7f3d0; padding:12px 16px; border-radius:12px; text-align:center; font-weight:600; }
.line-clamp-2 { display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; line-clamp:3; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.quick-access { padding: 10px 16px 0; }
.qa-title { color:#e5e7eb; font-weight:600; margin-bottom:10px; text-align:center; }
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 12px;
}
.qa-card { background: rgba(17,20,50,0.8); border: 1px solid rgba(79,172,254,0.25); border-radius: 16px; padding: 16px; text-decoration:none; color:#e5e7eb; box-shadow: 0 8px 32px rgba(31,38,135,0.35); transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.qa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 38px rgba(31,38,135,0.45); }
.qa-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;
  flex: 0 0 36px;
  clip-path: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.qa-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0FAE9B;
  -webkit-mask: var(--nav-icon) no-repeat center / contain;
  mask: var(--nav-icon) no-repeat center / contain;
  opacity: 1;
}
.qa-head { font-weight:600; text-align:center; }
.qa-sub { color:#94a3b8; font-size:0.85rem; text-align:center; }
.exec-kpis { padding: 20px 16px 30px; }
.kpis-title { font-weight:600; margin-bottom:12px; text-align:center; }
.kpis-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.icon-badge { padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); box-shadow:0 6px 22px rgba(31,38,135,0.35), inset 0 0 0 1px rgba(255,255,255,0.06); transform-origin:center; transition: transform .2s ease, box-shadow .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.icon-badge:hover { transform: scale(1.06); box-shadow:0 10px 30px rgba(31,38,135,0.5); }
.icon-badge.indigo { background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(168,85,247,0.18)); color:#c7d2fe; text-shadow:0 1px 0 rgba(0,0,0,0.2); }
.icon-badge.emerald { background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(20,184,166,0.18)); color:#bbf7d0; text-shadow:0 1px 0 rgba(0,0,0,0.2); }
body.cq-light .icon-badge {
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
body.cq-light .icon-badge:hover {
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}
body.cq-light .icon-badge.indigo {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08));
  color: #4f46e5;
  text-shadow: none;
}
body.cq-light .icon-badge.emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(20, 184, 166, 0.08));
  color: #0f766e;
  text-shadow: none;
}
@keyframes kpiBorderGlow {
  0% { box-shadow: 0 0 6px rgba(79,172,254,0.5); border-color: rgba(79,172,254,0.35); }
  50% { box-shadow: 0 0 16px rgba(79,172,254,0.9); border-color: rgba(79,172,254,0.8); }
  100% { box-shadow: 0 0 6px rgba(79,172,254,0.5); border-color: rgba(79,172,254,0.35); }
}
@keyframes kpiMovingLine {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
.kpi-card {
  --accent: #4facfe;
  background: rgba(17,20,50,0.75);
  border: none;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(31,38,135,0.35);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 42px rgba(31,38,135,0.5); }
.kpi-card::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(22, 33, 62, 0.85);
  border-radius: 13px;
  z-index: -1;
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 300%; height: 300%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 70%, #2d6cdf, #00d4ff);
  animation: rotate-border 4s linear infinite;
  opacity: 1;
  z-index: -2;
}
.kpi-card:hover::after { animation: rotate-border 4s linear infinite; }
@keyframes rotate-border {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.kpi-label { color:#94a3b8; font-size: clamp(0.78rem, 1.2vw, 0.9rem); margin-bottom:6px; font-weight:600; letter-spacing:0.3px; }
.kpi-value { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; color:#fff; text-shadow: 0 0 10px rgba(79,172,254,0.45); direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.kpi-copy { min-width: 0; flex: 1; }
.kpi-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  clip-path: polygon(25% 6%, 75% 6%, 94% 50%, 75% 94%, 25% 94%, 6% 50%);
  background: #E6F7F4;
  border: 1px solid #BDEDE6;
  box-shadow: 0 6px 16px rgba(15,174,155,0.08);
  transform-origin: center;
  will-change: transform, filter, box-shadow;
}
.kpi-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: #0FAE9B;
  -webkit-mask: var(--nav-icon) no-repeat center / contain;
  mask: var(--nav-icon) no-repeat center / contain;
  z-index: 2;
}
.kpi-card .kpi-icon{
  animation: cqKpiFloat 2.9s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(15,174,155,0.12));
}
.kpi-card:nth-child(2) .kpi-icon { animation-delay: -0.72s; }
.kpi-card:nth-child(3) .kpi-icon { animation-delay: -1.44s; }
.kpi-card:nth-child(4) .kpi-icon { animation-delay: -2.16s; }
.kpi-card .kpi-icon::after{
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.62) 50%, transparent 58%);
  transform: translateX(-60%);
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
  animation: cqKpiSheen 3.8s ease-in-out infinite;
}
.kpi-card:nth-child(2) .kpi-icon::after { animation-delay: -0.95s; }
.kpi-card:nth-child(3) .kpi-icon::after { animation-delay: -1.9s; }
.kpi-card:nth-child(4) .kpi-icon::after { animation-delay: -2.85s; }
@keyframes cqKpiFloat{
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 10px 18px rgba(15,174,155,0.12)); }
  50% { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 14px 22px rgba(15,174,155,0.2)); }
}
@keyframes cqKpiSheen{
  0% { transform: translateX(-60%); }
  55% { transform: translateX(60%); }
  100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce){
  .kpi-card .kpi-icon,
  .kpi-card .kpi-icon::after{
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}
.icon-shield-check { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 18.5 6.8v4.6c0 4.4-2.8 7.1-6.5 8.8-3.7-1.7-6.5-4.4-6.5-8.8V6.8L12 3.8Z'/%3E%3Cpath d='m9.5 12.2 1.8 1.8 3.7-3.7'/%3E%3C/svg%3E"); }
.icon-fines { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5h8l3 3v12a1.6 1.6 0 0 1-1.6 1.6H7.6A1.6 1.6 0 0 1 6 19.5V6.1A1.6 1.6 0 0 1 7.6 4.5Z'/%3E%3Cpath d='M15 4.5v3.4h3.4'/%3E%3Cpath d='M9.2 15.2c.6.6 1.5 1 2.6 1 1.3 0 2.4-.7 2.4-1.8 0-2.5-4.9-1.2-4.9-3.7 0-1 .9-1.7 2.2-1.7 1 0 1.9.3 2.4.8'/%3E%3Cpath d='M11.8 8.6v8'/%3E%3C/svg%3E"); }
.kpi-card:nth-child(1) { --accent: #4facfe; }
.kpi-card:nth-child(2) { --accent: #f87171; }
.kpi-card:nth-child(3) { --accent: #34d399; }
.kpi-card:nth-child(4) { --accent: #fbbf24; }

/* Center sections; footer spans full width at viewport bottom */
.hero-section, .quick-access, .exec-kpis { max-width: 1200px; margin-inline: auto; }
.site-footer { position: fixed; left:0; right:0; bottom:0; width: 100%; text-align:center; color:#ffffff; font-size:0.95rem; font-weight:600; text-shadow: 0 1px 0 rgba(0,0,0,0.25); padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.12); background: rgba(11,14,43,0.85); backdrop-filter: blur(8px); border-radius: 0; z-index: 60; }
body { padding-bottom: 72px; }
.dashboard-container { display:grid; grid-template-columns: 350px 1fr; gap:20px; }
@media (max-width: 1000px) { .dashboard-container { grid-template-columns: 1fr; } }
.sidebar, .main-content { display:flex; flex-direction:column; gap:20px; }
.data-card { background: rgba(17, 20, 50, 0.75); border: 1px solid rgba(79, 172, 254, 0.25); border-radius: 12px; padding: 12px; box-shadow: 0 8px 32px rgba(31,38,135,0.35); }
.card-header { background: rgba(11,14,43,0.8); color:#fff; padding:8px; text-align:center; margin:-12px -12px 10px -12px; border-radius: 12px 12px 0 0; }
.compact-table { width:100%; border-collapse: collapse; font-size:0.85rem; }
.compact-table th, .compact-table td { border: 1px solid rgba(79, 172, 254, 0.25); padding: 6px 8px; text-align: left; }
.charts-row { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.chart-container { height:300px; display:flex; align-items:flex-end; justify-content: space-around; padding: 20px 10px 40px 10px; position: relative; background: rgba(0,0,0,0.1); }
.bar-group { display:flex; flex-direction:column; align-items:center; width:100%; margin:0 2px; position: relative; height:100%; justify-content:flex-end; }
.bar { width:60%; transition: height 0.5s ease; position: relative; border-radius: 6px 6px 0 0; }
.bar-label { position:absolute; bottom:-35px; font-size:0.7rem; text-align:center; width:100%; transform: rotate(-45deg); white-space:nowrap; color:#fff; }
.bar-value-top { position:absolute; bottom:100%; left:50%; transform: translateX(-50%); color:#fff; font-weight:700; font-size:0.9rem; margin-bottom:2px; pointer-events:none; }
body.cq-light .user-badge {
  background: rgba(255,255,255,0.92);
  border-color: rgba(148,163,184,0.26);
  box-shadow: 0 10px 28px rgba(2,6,23,0.08);
}
body.cq-light .user-badge:hover {
  background: #ffffff;
  border-color: rgba(20,184,166,0.3);
  box-shadow: 0 14px 30px rgba(20,184,166,0.12);
}
body.cq-light .user-avatar {
  border-color: rgba(20,184,166,0.26);
  box-shadow: 0 8px 18px rgba(20,184,166,0.18);
}
body.cq-light #user-badge-name {
  color: #0f172a;
  text-shadow: none;
}
body.cq-light .user-menu {
  background: rgba(255,255,255,0.96);
  border-color: rgba(148,163,184,0.24);
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
}
body.cq-light .user-menu a,
body.cq-light .user-menu button {
  color: #334155;
}
body.cq-light .user-menu a:hover,
body.cq-light .user-menu button:hover {
  background: rgba(20,184,166,0.1);
  color: #0f766e;
}
body.cq-light .qa-title,
body.cq-light .kpis-title {
  color: #0f172a;
}
body.cq-light .qa-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(148,163,184,0.22);
  color: #0f172a;
  box-shadow: 0 14px 34px rgba(2,6,23,0.08);
}
body.cq-light .qa-card:hover {
  box-shadow: 0 18px 40px rgba(20,184,166,0.12);
  border-color: rgba(20,184,166,0.24);
}
body.cq-light .qa-sub {
  color: #64748b;
}
body.cq-light .kpi-card {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 16px 38px rgba(2,6,23,0.08);
}
body.cq-light .kpi-card::before {
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
}
body.cq-light .kpi-card::after {
  content: none;
  animation: none;
  opacity: 0;
}
body.cq-light .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(20,184,166,0.1);
}
body.cq-light .kpi-card:hover::after {
  content: none;
}
body.cq-light .kpi-label {
  color: #64748b;
}
body.cq-light .kpi-value {
  color: #0f172a;
  text-shadow: none;
}
body.cq-light .site-footer {
  color: #334155;
  text-shadow: none;
  border-top-color: rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 -10px 32px rgba(2,6,23,0.08);
}

/* Final responsive overrides: keep these at the end so earlier base rules don't override mobile layout. */
@media (max-width: 900px) {
  .hero-section {
    padding-top: 28px;
  }
  .top-nav {
    flex-wrap: wrap;
    gap: 10px;
  }
  .top-left,
  .top-links {
    width: 100%;
    min-width: 0;
  }
  .top-links {
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }
  .user-slot {
    margin-inline-start: 0;
    margin-inline-end: auto;
    max-width: 100%;
  }
  .user-badge {
    min-width: 0;
    max-width: 100%;
  }
  #user-badge-name {
    max-width: 120px;
  }
  .qa-grid,
  .kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .top-left {
    justify-content: space-between;
  }
  .top-links {
    align-items: center;
    gap: 8px;
  }
  .user-slot {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .user-menu {
    inset-inline: 0 auto;
    min-width: min(220px, calc(100vw - 24px));
  }
  .hero-title {
    font-size: 1.35rem;
    line-height: 1.45;
  }
  .qa-grid,
  .kpis-grid {
    grid-template-columns: 1fr;
  }
  .quick-access,
  .exec-kpis {
    padding-inline: 12px;
  }
}