/* Import a Persian-friendly font for a more formal, administrative look */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css');

/* Custom styles to give the application a sleek, modern look */
body {
  background-color: #f5f7fa;
  font-family: "Vazir", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Print styles: align text right and use a clear Persian-friendly font */
@media print {
  html, body {
    /* Ensure all printed pages use right-to-left direction and right alignment.
       The !important flag forces these values to override any conflicting Bootstrap
       utilities such as .text-start or .text-end that might otherwise align text
       to the left. Without !important, some elements (e.g. table headers or
       dashboard cards) could remain left‑aligned in print. */
    direction: rtl !important;
    text-align: right !important;
    font-family: "Vazir", Tahoma, sans-serif;
    background-color: #fff;
  }
  /* Hide navigation bar and buttons during print */
  nav.navbar, .btn {
    display: none !important;
  }
  /* Ensure cards and content print right-aligned */
  .card-body {
    direction: rtl !important;
    text-align: right !important;
    font-family: Tahoma, sans-serif;
  }

  .card {
    direction: rtl !important;
    text-align: right !important;
  }

  /* Remove borders and box shadows from letters when printing to give a clean
     appearance without outer margins. */
  .letter-container {
    border: none !important;
    box-shadow: none !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* In print mode, show each dashboard card full-width sequentially to maximize readability. */
  .dashboard-card {
    display: block;
    width: 100% !important;
    margin: 0 0 1rem 0;
    page-break-inside: avoid;
  }
  .dashboard-card-full {
    display: block;
    width: 100% !important;
    margin: 0 0 1rem 0;
    page-break-inside: avoid;
  }

  /* Force table content to align right in print.  Without this, Bootstrap may
     default to left alignment on table cells. */
  table {
    direction: rtl !important;
    text-align: right !important;
  }

  /* Override Bootstrap text alignment helpers for print.  Many templates use
     .text-start, .text-end or .text-center to align elements for on‑screen
     display.  In print, right alignment is desired for Persian text, so
     reset the start/end classes to right while preserving center alignment. */
  .text-start {
    text-align: right !important;
  }
  .text-end {
    text-align: right !important;
  }
  .text-center {
    text-align: center !important;
  }
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.2rem;
}

.card {
  border-radius: 0.5rem;
}

.btn-success {
  background-color: #2ECC71;
  border-color: #27AE60;
}

.btn-success:hover {
  background-color: #27AE60;
  border-color: #239B56;
}

.btn-outline-primary {
  border-color: #3498DB;
  color: #3498DB;
}

.btn-outline-primary:hover {
  background-color: #3498DB;
  color: #fff;
}

/*---------------------------------------------------------------------
 * Custom button palette to complement the modern contract list design.
 * Override some of Bootstrap's default button colors for a cohesive look.
 */
.btn-primary {
  background-color: #3498db;
  border-color: #2980b9;
}
.btn-primary:hover {
  background-color: #2980b9;
  border-color: #2471a3;
}

.btn-dark {
  background-color: #34495e;
  border-color: #2c3e50;
  color: #fff;
}
.btn-dark:hover {
  background-color: #2c3e50;
  border-color: #233140;
}

.btn-secondary {
  background-color: #95a5a6;
  border-color: #7f8c8d;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #7f8c8d;
  border-color: #707b7c;
  color: #fff;
}

.btn-danger {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.btn-danger:hover {
  background-color: #c0392b;
  border-color: #962d22;
}

.badge {
  font-size: 0.85rem;
  padding: 0.5em 0.75em;
}

/* Custom gold background for permanent registration badges.  Use a warm
   golden hue and dark text to ensure readability. */
.bg-gold {
  background-color: #d4af37 !important;
  color: #000 !important;
}

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

.alert-info {
  border-radius: 0.5rem;
}

/*
 * Ensure the mobile menu toggler (hamburger icon) is visible on colored
 * navigation bars. Bootswatch Flatly sometimes renders a dark icon which
 * blends into the nav background; override it with a white SVG and light
 * border. These styles apply when the navbar uses the `.navbar-dark`
 * class (set in base.html).
 */
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='rgba(255,255,255,1)'%3E%3Cpath stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Improve spacing and readability of navigation links. By adding symmetric
   horizontal margins to each nav-link in a dark navbar, we prevent the
   items from appearing crowded and create a more polished look. */
.navbar-dark .navbar-nav .nav-link {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/*
 * Mobile offcanvas menu improvements.  These styles enhance the readability and
 * appearance of the navigation when viewed on small screens.  The links are
 * padded to improve touch targets, indented for submenus and given a subtle
 * hover background.  Additional spacing between items helps visually
 * separate entries in the accordion-style menu.
 */
.offcanvas-body .nav-link {
  padding: 0.5rem 1rem;
  color: #ffffff;
}
.offcanvas-body .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* Indent submenu links inside collapsed sections */
.offcanvas-body .collapse .nav-link {
  padding-right: 1.5rem;
}
/* Add vertical spacing between offcanvas nav items */
.offcanvas-body .nav-item + .nav-item {
  margin-top: 0.5rem;
}

/*
 * Contract template input styling: make input fields responsive on smaller screens.
 * Inputs inside the contract template use the .contract-input class. On mobile
 * (below 576px), they expand to fill the available width to prevent horizontal
 * scrolling. On larger screens, they shrink to fit their intrinsic width.
 */
.contract-input {
  width: 100% !important;
  max-width: 100%;
  display: inline-block;
}
@media (min-width: 576px) {
  .contract-input {
    width: auto !important;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
 * Modern styling for the contract list cards.  These styles give each
 * contract card a clean, elevated appearance with icons and subtle
 * shadows.  Cards lift on hover for a more interactive feel.
 */
.contract-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #ffffff;
}

.contract-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.contract-card .card-body {
  padding: 1rem 1rem 0.75rem 1rem;
}

.contract-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.contract-card .card-title i {
  margin-left: 0.5rem;
  color: #3498db;
}

.contract-card .detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.contract-card .detail-item i {
  margin-left: 0.4rem;
  color: #7f8c8d;
}

.contract-card .status-badge {
  font-size: 0.75rem;
  padding: 0.35em 0.6em;
  border-radius: 0.5rem;
}

/* Adjust checkbox positioning on contract cards */
.contract-card .form-check-input {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
}

/* Highlight approved contract cards with a colored border on the right (RTL layout) */
.contract-card[data-approved="true"] {
  border-right: 4px solid #2ecc71; /* Use a green accent for approved cards */
}

/* Change icon color for approved cards */
.contract-card[data-approved="true"] .card-title i {
  color: #2ecc71;
}

/* Override status badge colors for approved cards */
.contract-card[data-approved="true"] .status-badge {
  background-color: #2ecc71 !important;
  color: #fff !important;
}

/* Deleted contracts: highlight with a red accent and muted appearance.  Deleted
   contracts should remain visible but with actions disabled. */
.contract-card[data-deleted="true"] {
  border-right: 4px solid #e74c3c; /* Red accent for deleted cards */
  background-color: #f8d7da;      /* Light red background */
  opacity: 0.85;                  /* Slightly faded look */
}
.contract-card[data-deleted="true"] .card-title i {
  color: #e74c3c;                /* Red icon for deleted cards */
}
.contract-card[data-deleted="true"] .status-badge {
  background-color: #f8d7da !important;
  color: #c0392b !important;
  border: 1px solid #e74c3c;
}
.contract-card[data-deleted="true"] .btn {
  pointer-events: none;           /* Disable interactions on buttons */
  opacity: 0.6;                   /* Dimmed look */
}
.contract-card[data-deleted="true"] .form-check-input {
  pointer-events: none;          /* Disable interactions on checkbox */
  opacity: 0.6;
}

/*
 * Enhance button appearance: rounded corners, subtle elevation on hover, and
 * smooth transitions.  These styles apply to all buttons to unify the look
 * across the application.  The active state resets the transform to avoid
 * sticking when the button is pressed.
 */
.btn {
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}