/* ====================================================================
   logical-theme.css — Enterprise CSS Logical Properties System
   Ensures 100% Code Reuse Across LTR and RTL Directions
   Uses margin-inline, padding-inline, inset-inline, border-inline
   ==================================================================== */

:root {
  --sidebar-width: 260px;
  --header-height: 70px;

  --font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Document Root Reset & Direction Sync ─── */
html {
  font-size: 16px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--gradient-bg, var(--bg-base));
  color: var(--text-primary);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  text-align: start; /* Logical text alignment */
}

/* ─── Logical Layout Components ─── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar with Logical Positioning */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-inline-end: 1px solid var(--glass-border); /* Logical border instead of border-left/right */
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  inset-inline-start: 0; /* Logical left in LTR, right in RTL */
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition-base);
}

/* Main Content with Logical Margin */
.main-content {
  flex: 1;
  margin-inline-start: var(--sidebar-width); /* Logical start margin */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header Logical Flex & Padding */
.top-header {
  height: var(--header-height);
  background: var(--bg-surface);
  border-block-end: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 28px; /* Logical horizontal padding */
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}

/* Page Content Padding */
.page-content {
  padding-inline: 28px;
  padding-block: 28px;
  flex: 1;
}

/* Navigation Items Logical Indentation */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 14px;
  padding-block: 11px;
  border-radius: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  margin-block-end: 2px;
  text-align: start;
}

.nav-item:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: hsla(220, 85%, 57%, 0.15);
  color: var(--primary-light);
  border-inline-start: 4px solid var(--primary); /* Logical active indicator */
}

/* ─── Logical Forms & Inputs ─── */
.form-group {
  margin-block-end: 18px;
}

.form-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-block-end: 6px;
  text-align: start;
}

.form-control {
  width: 100%;
  padding-inline: 16px;
  padding-block: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-family);
  transition: all var(--transition-fast);
  outline: none;
  text-align: start;
}

/* Logical positioning for select arrow icon */
select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center; /* Logical alignment for select arrow */
  padding-inline-end: 40px;
}

html[dir="rtl"] select.form-control {
  background-position: 14px center;
}

/* ─── Logical Tables ─── */
th, td {
  text-align: start; /* Logical table cell alignment */
  padding-inline: 16px;
  padding-block: 14px;
}

/* ─── Directional Icon Flip Effect ─── */
.flip-on-rtl {
  transition: transform var(--transition-base);
}

html[dir="rtl"] .flip-on-rtl {
  transform: scaleX(-1); /* Flips directional arrow icons automatically in RTL */
}

/* ─── Responsive Logical Mobile Adaptations ─── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(100%);
  }
  html[dir="ltr"] .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .main-content {
    margin-inline-start: 0;
  }
}