/*
 * NIHB additions on top of Argon Dashboard 3. Keep this file small: anything the
 * template already provides must be used as-is, only project-specific bits live here.
 */

/* Branded hero strip behind the page header (replaces the template's flat bg-dark bar) */
.nihb-hero {
  background-image: url('../img/MSS-hero-20x9.jpg');
  background-position: top;
  background-size: cover;
}

/* Notifications dropdown */
.nihb-notif-menu {
  min-width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 24rem;
  overflow-y: auto;
}
.nihb-notif-menu .nihb-notif-item.unread { background: rgba(94, 114, 228, 0.08); }

/* Icon-only avatars / shapes using Nucleo icons inside the template's icon-shape */
.icon-shape.icon-lg { width: 64px; height: 64px; }

/* Long text should wrap inside table cells instead of stretching the card */
.table td, .table th { white-space: normal; }
.table td.text-nowrap, .table th.text-nowrap { white-space: nowrap; }

/* Chat-style bubbles (chatbot + chat history) */
.nihb-bubble { max-width: 85%; border-radius: 1rem; padding: .75rem 1rem; font-size: .875rem; word-break: break-word; }
.nihb-bubble.bot  { background: #f6f9fc; color: #344767; }
.nihb-bubble.user { background-image: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%); color: #fff; margin-left: auto; }

/* Notifications menu spans the viewport on phones */
@media (max-width: 575.98px) {
  .nihb-notif-menu { position: fixed !important; left: 1rem !important; right: 1rem !important; top: 4rem !important; transform: none !important; min-width: 0; }
}

/* Appointment booking: slot picker + date summary box + flatpickr tweaks */
.time-slot { display: inline-block; padding: .6rem 1.2rem; margin: .3rem; border: 2px solid #e9ecef; border-radius: .75rem; cursor: pointer; transition: all .2s ease; text-align: center; min-width: 120px; }
.time-slot:hover { border-color: #5e72e4; background-color: #f6f9fc; }
.time-slot.selected { background-color: #5e72e4; color: #fff; border-color: #5e72e4; }
.time-slot.selected .text-muted { color: rgba(255,255,255,.8) !important; }
.time-slot input[type="radio"] { display: none; }
.time-slot .time-icon { width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; }
.flatpickr-calendar { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1); border: 1px solid #e9ecef; max-width: 100%; }
.flatpickr-day.selected { background: #5e72e4; border-color: #5e72e4; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #adb5bd !important; opacity: .75 !important; }
.calendar-container { display: flex; align-items: stretch; gap: 1.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
#date.form-control { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); overflow: hidden; }
.selected-date-box { flex: 0 0 240px; border: 1px solid #e9ecef; border-radius: .75rem; background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem .75rem; text-align: center; }
.selected-date-box .selected-day { font-size: 3.5rem; line-height: 1; font-weight: 700; color: #344767; }
.selected-date-box .selected-month { margin-top: .4rem; font-size: 1.1rem; font-weight: 600; color: #67748e; }
.selected-date-box .selected-year { margin-top: .1rem; font-size: .875rem; color: #8392ab; }
@media (max-width: 575.98px) { .selected-date-box { flex: 1 1 100%; } }

/* Chatbot booking helpers */
.booking-type-card { border: 2px solid #e9ecef; border-radius: .75rem; padding: 1rem; margin-bottom: .5rem; cursor: pointer; transition: all .2s ease; }
.booking-type-card:hover { border-color: #5e72e4; background-color: #f6f9fc; }
.booking-type-card.selected { border-color: #5e72e4; background-color: #eef0fd; }
.selected-date-display { background: #f6f9fc; padding: 1rem; border-radius: .75rem; margin-bottom: 1rem; text-align: center; }

/* Tag input (x-form.tags) */
.tags-input { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem; border: 1px solid #d2d6da; border-radius: .5rem; background: #fff; }
.tags-input:focus-within { border-color: #5e72e4; box-shadow: 0 0 0 2px rgba(94, 114, 228, .25); }
.tags-input input { border: none; outline: none; flex: 1 1 120px; min-width: 120px; font-size: .875rem; background: transparent; }
.tag-chip { background: #5e72e4; color: #fff; border-radius: 1rem; padding: .15rem .6rem; font-size: .75rem; display: inline-flex; align-items: center; gap: .35rem; }
.tag-chip .tag-remove { cursor: pointer; font-weight: 700; }

/* Availability editor: read-only slot pills */
.time-slot-display { background-color: #f6f9fc; border: 1px solid #e9ecef; border-radius: .5rem; padding: .375rem .75rem; font-size: .875rem; color: #344767; }
.time-slot-display img { width: 14px; height: 14px; opacity: .8; }

/*
 * Nucleo icon font, cache-busted. The original files shipped corrupted and browsers kept the bad copy
 * (nginx sends no Cache-Control, so the old Last-Modified made it "fresh" for months). The ?v= query
 * forces a refetch of the fixed files; bump it if the font files ever change again.
 */
@font-face {
  font-family: 'NucleoIcons';
  src: url('../fonts/nucleo-icons.eot?v=2');
  src: url('../fonts/nucleo-icons.eot?v=2#iefix') format('embedded-opentype'),
       url('../fonts/nucleo-icons.woff2?v=2') format('woff2'),
       url('../fonts/nucleo-icons.woff?v=2') format('woff'),
       url('../fonts/nucleo-icons.ttf?v=2') format('truetype'),
       url('../fonts/nucleo-icons.svg?v=2#NucleoIcons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}