/* ============================================
   School Dashboard - Main Stylesheet
   ============================================ */

/* Import Design System */
@import url('design-system.css');
@import url('layout.css');
@import url('components.css');

/* ========== Reset & Base Styles ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  position: relative;
  min-height: 100%;
  direction: rtl;
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family-arabic);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  padding-top: var(--navbar-height);
  padding-inline-end: var(--sidebar-width);
  transition: padding-inline-end var(--animation-normal) var(--easing-default);
}

body.sidebar-collapsed {
  padding-inline-end: var(--sidebar-collapsed-width);
}

@media (max-width: 1024px) {
  body {
    padding-inline-end: 0;
  }
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-block-end: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-block-end: var(--spacing-md);
  color: var(--color-text-primary);
}

a {
  color: var(--color-primary-main);
  text-decoration: none;
  transition: color var(--animation-normal) var(--easing-default);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ========== Main Content Area ========== */
.main-content {
  padding: var(--spacing-lg);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  body {
    padding-inline-end: 0;
  }
  
  .sidebar {
    transform: translateX(100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  html {
    font-size: var(--font-size-sm);
  }
  
  .main-content {
    padding: var(--spacing-md);
  }
  
  .navbar {
    padding: 0 var(--spacing-md);
  }
}

/* ========== Utilities ========== */
.text-muted {
  color: var(--color-text-secondary);
}

.text-danger {
  color: var(--color-status-error);
}

.text-success {
  color: var(--color-status-success);
}

.text-warning {
  color: var(--color-status-warning);
}

.text-info {
  color: var(--color-status-info);
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-medium {
  font-weight: var(--font-weight-medium);
}

.fw-regular {
  font-weight: var(--font-weight-regular);
}

/* ========== Form Check (Radio/Checkbox) ========== */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-block-end: var(--spacing-sm);
}

.form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary-main);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ========== Row & Column Utilities ========== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: calc(var(--spacing-md) * -1);
  margin-inline-end: calc(var(--spacing-md) * -1);
}

.col,
[class*="col-"] {
  padding-inline-start: var(--spacing-md);
  padding-inline-end: var(--spacing-md);
}

.col-12 {
  width: 100%;
}

.col-6 {
  width: 50%;
}

.col-4 {
  width: 33.333333%;
}

.col-3 {
  width: 25%;
}

@media (max-width: 768px) {
  .col-md-6 {
    width: 100%;
  }
  
  .col-md-3 {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .col-md-6 {
    width: 50%;
  }
  
  .col-md-3 {
    width: 25%;
  }
}

/* ========== Image Preview ========== */
.img-thumbnail {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-md);
  border: 1px solid #E5E7EB;
}

/* ========== List Group ========== */
.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: var(--spacing-md);
  border-block-end: 1px solid #E5E7EB;
  background: var(--color-bg-card);
  transition: background-color var(--animation-normal) var(--easing-default);
}

.list-group-item:hover {
  background: var(--color-bg-hover);
}

.list-group-item:last-child {
  border-block-end: none;
}

/* ========== Spinner ========== */
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.125em solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 0.1em;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}