/*
  Custom CRM stylesheet (2025 refresh)

  This stylesheet implements a modern, pastel‐inspired look and feel for
  the CRM. It draws on current UI/UX trends including soft colour
  palettes, generous white space and accessible typography. The
  colour palette leans on pastel blues with complementary greens,
  yellows and reds【314778339685504†L269-L279】. Shadows and rounded
  corners provide depth without harsh contrast. Form controls and
  buttons are restyled to be more inviting and offer clear affordance.

  All variables are defined at the root level so they can be easily
  tweaked to adjust the theme in one place.
*/

:root {
  /* Primary brand colours (refreshed palette).
     The original pastel tones looked too washed‑out on mobile, making
     interactive elements appear disabled. To improve contrast and
     affordance, the palette has been updated to more saturated yet
     harmonious hues. These values draw inspiration from modern UI
     kits and Tailwind CSS colour scales. */
  --brand-blue: #6C5CE7;      /* rich indigo */
  --brand-blue-2: #8E79FF;    /* lighter purple for gradients */
  --brand-green: #27AE60;     /* emerald */
  --brand-yellow: #F1C40F;    /* golden yellow */
  --brand-red: #E74C3C;       /* vibrant red */

  /* Neutral colours */
  --text-color: #1F2937;
  --background-color: #F9FAFC;
  --card-bg: #FFFFFF;
  --card-border: rgba(134, 187, 216, 0.2);
  --shadow-color: rgba(134, 187, 216, 0.2);
  --table-head-bg: #F0F4F8;
  --table-row-alt: #F8FBFD;
}

/* Base typography and global styles */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Navbar styling */
.navbar {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.navbar-brand,
.navbar-nav .nav-link,
.navbar-text {
  color: var(--text-color) !important;
  font-weight: 600;
}

.navbar .btn {
  margin-left: 0.5rem;
}

/* Card styling */
.card {
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px var(--shadow-color);
  border: 1px solid var(--card-border);
  background-color: var(--card-bg);
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #ffffff;
}

/* On hover/focus, slightly darken the primary button by decreasing brightness */
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.95);
  color: #ffffff;
}

.btn-success {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #ffffff;
}

.btn-warning {
  background-color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--text-color);
}

.btn-danger {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
}

.btn-outline-primary {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-blue);
  color: #ffffff;
}

.btn-outline-secondary {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--brand-blue);
  color: #ffffff;
}

/* Links and pagination */
a,
.page-link {
  color: var(--brand-blue);
}

.page-link {
  border-radius: 0.5rem;
}

.page-item.active .page-link {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #ffffff;
}

/* Table styling */
.table thead th {
  background-color: var(--table-head-bg);
  border-bottom: none;
}

.table tbody tr:nth-of-type(odd) {
  background-color: var(--table-row-alt);
}

.table tbody tr {
  border-bottom: 1px solid var(--card-border);
}

.tickets-table {
  font-size: 0.9rem;
}

/* Form controls */
.form-control,
.form-select {
  border-radius: 0.5rem;
  border-color: var(--card-border);
  background-color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.25rem rgba(134, 187, 216, 0.25);
}

/* Thumbnails and photos */
.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--card-border);
  cursor: pointer;
  margin-right: 0.5rem;
}

.main-photo {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 0.75rem;
  border: 1px solid var(--card-border);
  background: #fff;
}

/* Footer */
.footer {
  color: #6B7280;
  font-size: 0.9rem;
}

/* Status badges */
.badge-status {
  font-size: 0.85rem;
}

/*---------------------------------------------------------------------*/
/*  Mobile navigation and card layout

    The CRM now includes a fixed bottom navigation bar on small screens.
    Each icon is paired with a label, and the active link is coloured
    using the primary brand colour. The body gets extra bottom padding
    to accommodate the nav height.

    Ticket lists on small screens are presented as cards instead of
    dense tables. Cards improve readability and afford tapping on touch
    devices. Status badges shrink slightly on mobile to save space.
*/

/* Hide the top navbar on phones – the bottom nav replaces it */
@media (max-width: 767.98px) {
  .navbar {
    display: none !important;
  }
  body {
    padding-bottom: 70px; /* space for bottom nav */
  }
}

/* Mobile bottom nav container */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1030;
  display: none;
  border-top: 1px solid var(--card-border);
}

/* Reveal bottom nav only on small screens */
@media (max-width: 767.98px) {
  .mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

/* Nav links */
.mobile-nav a {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-color);
  text-decoration: none;
  padding-top: 0.25rem;
}
.mobile-nav a .icon {
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.1rem;
}
.mobile-nav a.active {
  color: var(--brand-blue);
}

/* Ticket card for mobile list */
@media (max-width: 767.98px) {
  .ticket-card {
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    padding: 0.75rem;
  }
  .ticket-card + .ticket-card {
    margin-top: 0.75rem;
  }
  .ticket-card h6 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
  }
  .ticket-card .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
  }
  .ticket-card .small {
    font-size: 0.75rem;
  }
  /* Thumbnail images inside mobile ticket cards */
  .mobile-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
  }

  /* Photos in the mobile ticket detail view */
  .mobile-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
  }
}

/* Required field indicator */
.form-required::after {
  content: " *";
  color: var(--brand-red);
}

/* Cost pill styling */
.cost-pill {
  background: #eef6ff;
  border: 1px dashed var(--brand-blue);
  color: var(--text-color);
  font-weight: 600;
  border-radius: 0.75rem;
  padding: 0.4rem 0.6rem;
}

/* Utility classes for responsive spacing and clickable rows */
.clickable-row {
  cursor: pointer;
}

.clickable-row::selection,
.clickable-row *::selection {
  background: rgba(0, 0, 0, 0.05);
}

/*
  Responsive adjustments

  On narrow screens we stack button groups vertically, make the navigation
  pills scrollable, and reduce padding around containers. Tables remain
  horizontally scrollable via the existing .table-responsive wrapper; the
  additional rules below ensure buttons don’t overflow and that nav items
  are still accessible on mobile.
*/
@media (max-width: 768px) {
  /* Stack buttons in button groups */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-group > .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .btn-group > .btn:last-child {
    margin-bottom: 0;
  }

  /* Make nav pills horizontally scrollable */
  .nav.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.nav-pills .nav-item {
    flex: 0 0 auto;
  }
  .nav.nav-pills .nav-link {
    white-space: nowrap;
    margin-right: 0.5rem;
  }

  /* Reduce container padding on small screens */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Description box for mobile and desktop */
.desc-box{
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  padding: .5rem .75rem;
  background-color: #fff;
  white-space: pre-wrap; /* preserve line breaks */
}