@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { direction: rtl; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--uk-font);
  font-size: var(--uk-text-base);
  line-height: var(--uk-leading-normal);
  color: var(--uk-gray-800);
  background: var(--uk-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { max-width: 100%; height: auto; display: block; }

/* Layout helpers */
.uk-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--uk-sp-4); }
.uk-container-fluid { width: 100%; padding: 0 var(--uk-sp-4); }

.uk-flex { display: flex; }
.uk-flex-col { flex-direction: column; }
.uk-flex-wrap { flex-wrap: wrap; }
.uk-items-center { align-items: center; }
.uk-justify-between { justify-content: space-between; }
.uk-justify-center { justify-content: center; }
.uk-gap-2 { gap: var(--uk-sp-2); }
.uk-gap-3 { gap: var(--uk-sp-3); }
.uk-gap-4 { gap: var(--uk-sp-4); }
.uk-gap-6 { gap: var(--uk-sp-6); }

.uk-grid { display: grid; gap: var(--uk-sp-4); }
.uk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.uk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.uk-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .uk-grid-2, .uk-grid-3, .uk-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .uk-grid-3, .uk-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* App layout */
.uk-app { display: flex; min-height: 100vh; }
.uk-sidebar {
  width: 260px; background: var(--uk-white); border-left: 1px solid var(--uk-gray-200);
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--uk-z-sticky);
  overflow-y: auto; transition: transform var(--uk-duration) var(--uk-ease);
}
.uk-main { flex: 1; margin-right: 260px; min-height: 100vh; }
.uk-topbar {
  height: 60px; background: var(--uk-white); border-bottom: 1px solid var(--uk-gray-200);
  display: flex; align-items: center; padding: 0 var(--uk-sp-6);
  position: sticky; top: 0; z-index: var(--uk-z-sticky); box-shadow: var(--uk-shadow-xs);
}
.uk-page-body { padding: var(--uk-sp-6); }

@media (max-width: 768px) {
  .uk-sidebar { transform: translateX(100%); }
  .uk-sidebar.uk-open { transform: translateX(0); }
  .uk-main { margin-right: 0; padding-bottom: 70px; }
}

/* Utility */
.uk-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.uk-text-center { text-align: center; }
.uk-text-muted { color: var(--uk-gray-400); }
.uk-text-sm { font-size: var(--uk-text-sm); }
.uk-mt-4 { margin-top: var(--uk-sp-4); }
.uk-mb-4 { margin-bottom: var(--uk-sp-4); }
.uk-mb-6 { margin-bottom: var(--uk-sp-6); }
.uk-p-4 { padding: var(--uk-sp-4); }
.uk-p-6 { padding: var(--uk-sp-6); }
.uk-hidden { display: none !important; }
@media (max-width: 768px) { .uk-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .uk-hide-desktop { display: none !important; } }