/* ===========================
   Global Base Styles
=========================== */

:root {
  --primary: #00256A;
  --secondary: #41B2C4;
  --accent: #D5D300;
  --light-bg: #F8F9FA;
  --text-dark: #222;
  --text-muted: #6C757D;
  --border-light: #E0E0E0;
  --radius: 8px;
}

body {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

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

a:hover {
  color: var(--secondary);
}

/* ===========================
   Layout Components
=========================== */

.navbar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 10px 20px;
}

.navbar a {
  color: #fff;
  font-weight: 500;
}

.navbar a:hover {
  opacity: 0.85;
}

.container {
  max-width: 1400px;
}

/* ===========================
   Cards & Tables
=========================== */

.card {
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-header {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  font-size: 15px;
}

.card-body {
  background-color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
}

.table th {
  font-weight: 600;
}

.table td,
.table th {
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table .btn {
  font-size: 13px;
  padding: 3px 8px;
}

/* ===========================
   Buttons
=========================== */

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: #021e59;
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: #2f9cb2;
}

.btn-outline-primary {
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  color: #fff;
}

/* ===========================
   Forms
=========================== */

.form-control,
.form-select {
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  font-size: 14px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 0.15rem rgba(65, 178, 196, 0.25);
}

.form-label {
  font-weight: 500;
}

/* ===========================
   Page Headings
=========================== */

h3.fw-bold {
  display: flex;
  align-items: center;
  gap: 8px;
}

h3.fw-bold::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: var(--accent);
  border-radius: 4px;
}

/* ===========================
   RTL Support
=========================== */

.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
}

.ltr {
  direction: ltr;
  text-align: left;
}

/* Adjust form alignment for RTL */
.rtl input,
.rtl select,
.rtl textarea {
  text-align: right;
}

/* Adjust button text */
.rtl .btn {
  font-family: 'Tajawal', sans-serif;
}

/* ===========================
   Footer
=========================== */

.footer {
  text-align: center;
  padding: 15px 0;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 40px;
}

/* ===========================
   Alerts & Messages
=========================== */

.alert {
  border-radius: var(--radius);
  padding: 10px 15px;
  font-size: 14px;
}

.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.alert-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===========================
   Print Styles for PDF
=========================== */

@media print {
  body {
    font-size: 12px;
    color: #000;
  }

  .navbar,
  .footer,
  .btn,
  .alert {
    display: none !important;
  }

  table {
    page-break-inside: avoid;
  }

  h3, h4 {
    color: #000;
  }
}


/* ===========================
   Evaluation Form Layout
=========================== */

/* Make evaluation form span full width */
#evaluation-form {
  width: 100%;
}

/* Expand form rows and tables */
.container-fluid,
#evaluation-form .row,
#evaluation-form table {
  width: 100%;
  max-width: 100%;
}

/* Improve input and textarea usability */
#evaluation-form .form-control,
#evaluation-form .form-select,
#evaluation-form textarea {
  width: 100% !important;
  min-height: 38px;
  resize: vertical;
}

/* Slightly increase row spacing for clarity */
#evaluation-form .row {
  margin-bottom: 0.75rem;
}

/* Behavioral table adjustments */
#evaluation-form table th,
#evaluation-form table td {
  text-align: center;
  vertical-align: middle;
  padding: 6px;
}

#evaluation-form table td input,
#evaluation-form table td textarea {
  width: 100%;
  font-size: 13px;
}

/* Ensure the card takes nearly full width */
.card {
  border-radius: var(--radius);
  margin: 0 15px;
}

/* Remove Bootstrap container width limits for this page */
.container,
.container-fluid {
  max-width: 100% !important;
  padding-right: 2rem;
  padding-left: 2rem;
}

/* Make headings align beautifully with full-width form */
#page-title,
#page-subtitle {
  margin-left: 0.5rem;
}

/* RTL fine-tuning */
.rtl #evaluation-form table th,
.rtl #evaluation-form table td {
  text-align: right;
}

.rtl #evaluation-form input,
.rtl #evaluation-form textarea {
  text-align: right;
}