/* Print styles */
@media print {
  .non-printable {
      display: none; /* Hide non-printable elements */
  }

  .printable {
      display: block; /* Ensure the printable area is shown */
  }
}


.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Add your spinner or loading message styles here */
}

/* google autocomplete for address */
.illum-required {
  color: red;
}

#illum-editor-container.ql-snow p {
  margin-top: 0;
  margin-bottom: 0px;
}

.editor-paragraph {
  margin-top: 0;
  margin-bottom: 0px;
}

/* Jodit ships a "Powered by Jodit" link in its status bar. Jodit is MIT licensed, so
   there is no attribution requirement in the UI - the copyright notice stays in the
   vendored source, which is what the licence actually asks for.

   Hidden with CSS rather than statusbar:false, because the status bar also carries the
   resize handle and the character/word counters, which are worth keeping. */
.jodit-status-bar-link {
  display: none !important;
}

/* google autocomplete for address */
.pac-container {
  z-index: 10000;
}

/* Default font size for larger screens */
.app_subtext {
  font-size: 0.75rem;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .app_subtext {
    font-size: 0.5rem; /* Adjust the font size for smaller screens */
  }
}



.illum-badge-dark {
  background-color: #66666625 !important;
  color: #666666 !important;
  font-size:0.9rem;
}

.illum-badge-green {
  background-color: #00796b25 !important;
  color: #00796b !important;
  font-size:0.9rem;
}

.illum-badge-yellow {
  background-color: #fbc02d25 !important;
  color: #fbc02d !important;
  font-size:0.9rem;
}

.illum-badge-pink {
  background-color: #ec407a25 !important;
  color: #ec407a !important;
  font-size:0.9rem;
}

.illum-badge-blue {
  background-color: #0a72e825 !important;
  color: #0a72e8 !important;
  font-size:0.9rem;
}

.illum-badge-red {
  background-color: #ff213325 !important;
  color: #ff2133 !important;
  font-size:0.9rem;
}

.illum-badge-teal {
  background-color: #0097a725 !important;
  color: #0097a7 !important;
  font-size:0.9rem;
}

.illum-badge-purple {
  background-color: #671fa225 !important;
  color: #671fa2 !important;
  font-size:0.9rem;
}

.illum-badge-grey {
  background-color: #46464625 !important;
  color: #464646 !important;
  font-size:0.9rem;
}

.illum-badge-orange {
  background-color: #d9690025 !important;
  color: #d96900 !important;
  font-size:0.9rem;
}

.illum-search-operator {
  background:#d3d3d3;
  border-radius: 10px;
  padding:4px;
  margin-right:4px;
  margin-left:4px;
}


.illum-stop-unassigned {
  background-color: #0a73e825 !important;
  color: #0a73e8 !important;
  font-size:0.9rem;
}
.illum-stop-unassigned-solid {
  background-color: #0a73e8 !important;
  color: #0a73e8 !important;
}
.card.card-border-shadow-stop-unassigned::after {
  border-bottom-color: #0a73e825;
}
.card.card-border-shadow-stop-unassigned:hover::after {
  border-bottom-color: #0a73e8;
}


.illum-stop-ready {
  background-color: #00796b25 !important;
  color: #00796b !important;
  font-size:0.9rem;
}
.illum-stop-ready-solid {
  background-color: #00796b !important;
  color: #00796b !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-ready::after {
  border-bottom-color: #00796b25;
}
.card.card-border-shadow-stop-ready:hover::after {
  border-bottom-color: #00796b;
}


.illum-stop-dispatched {
  background-color: #ba69c825 !important;
  color: #ba69c8 !important;
  font-size:0.9rem;
}
.illum-stop-dispatched-solid {
  background-color: #ba69c8 !important;
  color: #ba69c8 !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-dispatched::after {
  border-bottom-color: #ba69c825;
}
.card.card-border-shadow-stop-dispatched:hover::after {
  border-bottom-color: #ba69c8;
}




.illum-stop-enroute {
  background-color: #fcc12c25 !important;
  color: #fcc12c !important;
  font-size:0.9rem;
}
.illum-stop-enroute-solid {
  background-color: #fcc12c !important;
  color: #fcc12c !important;
  font-size:0.9rem;
}

.card.card-border-shadow-stop-enroute::after {
  border-bottom-color: #fcc12c25;
}
.card.card-border-shadow-stop-enroute:hover::after {
  border-bottom-color: #fcc12c;
}


.illum-stop-arrived {
  background-color: #00b6d625 !important;
  color: #00b6d6 !important;
  font-size:0.9rem;
}
.illum-stop-arrived-solid {
  background-color: #00b6d6 !important;
  color: #00b6d6 !important;
  font-size:0.9rem;
}


.card.card-border-shadow-stop-arrived::after {
  border-bottom-color: #00b6d625;
}
.card.card-border-shadow-stop-arrived:hover::after {
  border-bottom-color: #00b6d6;
}


.illum-stop-completed {
  background-color: #0db36625 !important;
  color: #0db366 !important;
  font-size:0.9rem;
}
.illum-stop-completed-solid {
  background-color: #0db366 !important;
  color: #0db366 !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-completed::after {
  border-bottom-color: #0db36625;
}
.card.card-border-shadow-stop-completed:hover::after {
  border-bottom-color: #0db366;
}



.illum-stop-rescheduled {
  background-color: #ec407a25 !important;
  color: #ec407a !important;
  font-size:0.9rem;
}
.illum-stop-rescheduled-solid {
  background-color: #ec407a !important;
  color: #ec407a !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-rescheduled::after {
  border-bottom-color: #ec407a25;
}
.card.card-border-shadow-stop-rescheduled:hover::after {
  border-bottom-color: #ec407a;
}



.illum-stop-exception {
  background-color: #ff6f0025 !important;
  color: #ff6f00 !important;
  font-size:0.9rem;
}
.illum-stop-exception-solid {
  background-color: #ff6f00 !important;
  color: #ff6f00 !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-exception::after {
  border-bottom-color: #ff6f0025;
}
.card.card-border-shadow-stop-exception:hover::after {
  border-bottom-color: #ff6f00;
}



.illum-stop-cancelled {
  background-color: #ff213325 !important;
  color: #ff2133 !important;
  font-size:0.9rem;
}
.illum-stop-cancelled-solid {
  background-color: #ff213325 !important;
  color: #ff2133 !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-cancelled::after {
  border-bottom-color: #ff213325;
}
.card.card-border-shadow-stop-cancelled:hover::after {
  border-bottom-color: #ff2133;
}


.illum-stop-pending_pickup {
  background-color: #55555525 !important;
  color: #555555 !important;
  font-size:0.9rem;
}
.illum-stop-pending_pickup-solid {
  background-color: #555555 !important;
  color: #555555 !important;
}
.card.card-border-shadow-stop-pending_pickup::after {
  border-bottom-color: #55555525;
}
.card.card-border-shadow-stop-pending_pickup:hover::after {
  border-bottom-color: #555555;
}


.illum-stop-shipment-count {
  background-color: #1da1f225 !important;
  color: #1da1f2 !important;
  font-size:0.9rem;
}
.card.card-border-shadow-stop-shipment-count::after {
  border-bottom-color: #1da1f225;
}
.card.card-border-shadow-stop-shipment-count:hover::after {
  border-bottom-color: #1da1f2;
}


.illum-bg-transparent {
  background:transparent !important;
}



.illum-ci-note {
  color:#0a73e8 !important;
}
.timeline .timeline-item-ci-note .timeline-event {
  background-color: #0a73e810;
}
.timeline .timeline-item-ci-note .timeline-event:before {
  border-left-color: #0a73e810 !important;
  border-right-color: #0a73e810 !important;
}



.illum-ci-email {
  color:#6a1b9a !important;
}
.timeline .timeline-item-ci-email .timeline-event {
  background-color: #6a1b9a10;
}
.timeline .timeline-item-ci-email .timeline-event:before {
  border-left-color: #6a1b9a10 !important;
  border-right-color: #6a1b9a10 !important;
}


.illum-ci-todo {
  color:#9d1196 !important;
}
.timeline .timeline-item-ci-todo .timeline-event {
  background-color: #9d119610;
}
.timeline .timeline-item-ci-todo .timeline-event:before {
  border-left-color: #9d119610 !important;
  border-right-color: #9d119610 !important;
}


.illum-ci-ticket {
  color:#c24e00 !important;
}
.illum-ci-ticket-bg {
  background-color: #c24e00 !important;
  box-shadow: 0 0 0 0.1875rem rgba(40, 199, 111, 0.16);
}
.timeline .timeline-item-ci-ticket .timeline-event {
  background-color: #c24e0010;
}
.timeline .timeline-item-ci-ticket .timeline-event:before {
  border-left-color: #c24e0010 !important;
  border-right-color: #c24e0010 !important;
}


.illum-ci-service_order {
  color:#9e00c2 !important;
}
.illum-ci-service_order-bg {
  background-color: #9e00c2 !important;
  box-shadow: 0 0 0 0.1875rem rgba(40, 199, 111, 0.16);
}
.timeline .timeline-item-ci-service_order .timeline-event {
  background-color: #9e00c210;
}
.timeline .timeline-item-ci-service_order .timeline-event:before {
  border-left-color: #9e00c210 !important;
  border-right-color: #9e00c210 !important;
}

.illum-ci-order {
  color:#9e00c2 !important;
}
.illum-ci-order-bg {
  background-color: #9e00c2 !important;
  box-shadow: 0 0 0 0.1875rem rgba(40, 199, 111, 0.16);
}
.timeline .timeline-item-ci-order .timeline-event {
  background-color: #9e00c210;
}
.timeline .timeline-item-ci-order .timeline-event:before {
  border-left-color: #9e00c210 !important;
  border-right-color: #9e00c210 !important;
}


.illum-ci-shipment {
  color:#c29200 !important;
}
.illum-ci-shipment-bg {
  background-color: #c29200 !important;
  box-shadow: 0 0 0 0.1875rem rgba(40, 199, 111, 0.16);
}
.timeline .timeline-item-ci-shipment .timeline-event {
  background-color: #c2920010;
}
.timeline .timeline-item-ci-shipment .timeline-event:before {
  border-left-color: #c2920010 !important;
  border-right-color: #c2920010 !important;
}



.illum-ci-enrollment {
  color:#0d7c5f !important;
}
.timeline .timeline-item-ci-enrollment .timeline-event {
  background-color: #0d7c5f20;
}
.timeline .timeline-item-ci-enrollment .timeline-event:before {
  border-left-color: #0d7c5f20 !important;
  border-right-color: #0d7c5f20 !important;
}


/* Progression - promoted, not promoted, moved to alumni.
   Deliberately distinct from enrollment green: a progression decision is a
   yearly milestone, not a course sign-up, and with no grades data in the system
   these entries are the only record of why a student advanced or repeated. */
.illum-ci-progression {
  color:#b45309 !important;
}
.timeline .timeline-item-ci-progression .timeline-event {
  background-color: #b4530920;
}
.timeline .timeline-item-ci-progression .timeline-event:before {
  border-left-color: #b4530920 !important;
  border-right-color: #b4530920 !important;
}


.custom-marker {
  background-color: rgba(0, 123, 255, 0.7); /* Adjust alpha channel for transparency */
  color: #FFFFFF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}


.illum-date-button {
  background-color: #7367f0 !important;
  color: #fff !important;;
}

.illum-date-button:hover {
  color: #fff !important;
  background-color: #685dd8 !important;
  border-color: #685dd8 !important;
}


/* Default styles for stacking a table */
.illum-responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.illum-responsive-table th,
.illum-responsive-table td {
  padding: 8px;
}

/* Responsive styles */
@media screen and (max-width: 600px) {
  /* Stack table cells vertically on screens smaller than 600px */
  .illum-responsive-table th,
  .illum-responsive-table td {
    display: block;
    width: 100%;
  }

  /* Hide table header cells on small screens */
  .illum-responsive-table th {
    display: none;
  }
  
}

.illum-text-decoration-underline {
  text-decoration: underline dotted #cccccc !important;
  cursor: pointer;
}

.min-vh-50 {
  min-height: 50vh !important;
}


.illum-underline {
  text-decoration: none;
  position: relative;
}
.illum-underline:after {
  content: '';
  color: #7367f0;

  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;

  border-width: 0 0 1px;
  border-style: dotted;
  margin-bottom: 2px;
}


@media
only screen 
and (max-width: 1024px) {
  /* Force table to not be like tables anymore */
  #illum-responsive-table table, 
  #illum-responsive-table thead, 
  #illum-responsive-table tbody, 
  #illum-responsive-table th, 
  #illum-responsive-table td, 
  #illum-responsive-table tr { 
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #illum-responsive-table thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #illum-responsive-table tr { 
    border: 1px solid #e8e8e8; 
    border-radius: 5px;
  }

  #illum-responsive-table td { 
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 35%; 
    white-space: normal;
    text-align:left;
  }

  #illum-responsive-table td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 25%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  #illum-responsive-table td:before { 
    content: attr(data-title); 
    color: #5d596c;
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: normal;
    text-align: right;
    width:30%;
    top: 33%;
  }
}

.dashed-line-dots {
  display: inline-block;
  width: 10px; /* Adjust the width as needed */
  height: 1px;
  border-bottom: 1px dashed #ccc;
  position: relative;
  vertical-align: middle;
  margin: 0 5px; /* Spacing between badges */
}

.dashed-line-dots::before,
.dashed-line-dots::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #6f6b7d;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.dashed-line-dots::before {
    left: -8px; /* Adjust spacing for the left dot */
}

.dashed-line-dots::after {
    right: -8px; /* Adjust spacing for the right dot */
}

.zone_highlight {
  border: 1px solid green;
  border-radius: 5px;
}


.illum-underline-dotted {
    text-decoration: underline none;
    text-underline-offset: 4px;
}

.illum-underline-dotted:hover {
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    color: #0a17d3;
}

/* Conversation item: account_update — a record-level change (address, details).
   Slate, so it reads as administrative rather than competing with the coloured
   types that represent things people did (notes, enrolments, progressions). */
.illum-ci-account_update {
  color:#4b5563 !important;
}
.timeline .timeline-item-ci-account_update .timeline-event {
  background-color: #4b556320;
}
.timeline .timeline-item-ci-account_update .timeline-event:before {
  border-left-color: #4b556320 !important;
  border-right-color: #4b556320 !important;
}

/* Conversation item: notification - something the school SENT to this family.
   Indigo, matching the bell in the navbar, and distinct from the slate used for
   administrative edits: this is an outgoing communication, not a record change. */
.illum-ci-notification {
  color:#5a4fcf !important;
}
.timeline .timeline-item-ci-notification .timeline-event {
  background-color: #5a4fcf20;
}
.timeline .timeline-item-ci-notification .timeline-event:before {
  border-left-color: #5a4fcf20 !important;
  border-right-color: #5a4fcf20 !important;
}

/* ── Dashboard column roles ──────────────────────────────────────────────────
   Ported from basket-v2-students, where the parent dashboard proved the shape: two
   columns with different jobs. The left is a work queue ("needs attention"), the right
   is reference ("at a glance"). The styling makes that legible rather than leaving a
   row of equal cards with no hierarchy.
   ───────────────────────────────────────────────────────────────────────── */
.illum-col-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b93a3;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.illum-col-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(47, 51, 73, .1);
}

/* Reference cards sit back: no shadow, a hairline instead, so the work column reads as
   the foreground. */
.illum-col-reference .card {
  box-shadow: none;
  border: 1px solid rgba(47, 51, 73, .1);
  background: transparent;
}

/* A placeholder card for a widget whose backend does not exist yet. Muted and clearly
   inert, so it reads as "coming" rather than "broken" or, worse, as real data. */
.illum-widget-placeholder {
  border-style: dashed !important;
  background: transparent;
}
.illum-widget-placeholder .card-body {
  opacity: .7;
}

/* ── Date chip ───────────────────────────────────────────────────────────────
   A small calendar tile, ported from basket-v2-students. Used on the dashboard's
   pending-leave cards so a date is scannable at a glance rather than read as prose.
   ───────────────────────────────────────────────────────────────────────── */
/* Each request is its own bordered card, so one is clearly distinct from the next. */
/* Dashboard row-card: pending leave, upcoming events, sent notifications.

   The white fill is load-bearing. These sit inside `.illum-col-reference .card`, which is
   deliberately transparent so the reference column reads quieter than the action one - so a
   row with no background of its own shows the grey page through it, and muted text on grey
   is what made the card look washed out. */
.illum-leave-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(47, 51, 73, .12);
  border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
.illum-leave-row:hover {
  border-color: rgba(47, 51, 73, .28);
  background: #fcfcfd;
}

/* The supporting lines inside the card. Bootstrap's .text-muted is tuned for white cards on
   a grey page; here it lands on white inside a transparent card and reads too faint. */
.illum-leave-row .text-muted {
  color: #6b7280 !important;
}

/* A dashboard card title that navigates to its section, replacing the "All" button that
   used to sit opposite it. Needs a hover cue: a heading that happens to be a link is an
   invisible affordance otherwise. */
.illum-card-title { width: fit-content; }
.illum-card-title h5 { transition: color .15s ease; }
.illum-card-title:hover h5,
.illum-card-title:focus-visible h5 { color: var(--bs-primary, #7367f0); }

/* A notification title that opens the message in full. Same cue as the card title above -
   the row around it is no longer a link, so this needs to look like the one thing that is. */
.illum-notification-title { transition: color .15s ease; }
.illum-notification-title:hover,
.illum-notification-title:focus-visible { color: var(--bs-primary, #7367f0) !important; }

/* Notification rows on the dashboard. PORTED from .portal-notice in basket-v2-students -
   the parent portal's version reads better, and one notification should not look like two
   different things depending on which app you are in.

   The severity lives in the TINTED ICON rather than a separate badge line above the title,
   which is what buys back the vertical space the badge was costing. */
.illum-notification-row {
  display: flex; gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f7f9fc;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.illum-notification-row:hover { background: #f1f4f9; }

/* Anything above routine gets the left edge, so an Urgent notice is findable at a glance
   without reading a word. */
.illum-notification-row.is-warning  { border-left-color: var(--bs-warning, #ffab00); }
.illum-notification-row.is-danger   { border-left-color: var(--bs-danger,  #ff3e1d); }

.illum-notification-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; flex: none; font-size: 1.05rem;
}

.illum-date-chip {
  width: 50px; flex: none;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(47, 51, 73, .12);
}
.illum-date-chip .m {
  background: #fbc02d;
  color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 0;
}
.illum-date-chip .d {
  background: #fff;
  font-size: 1.15rem; font-weight: 700; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Vuexy has no purple label tone, and the portal tints Gurdwara events purple - without
   this a Gurdwara badge renders unstyled. Same shape as .bg-label-info in core.css. */
.bg-label-purple { background-color: #ede9fe !important; color: #8b5cf6 !important; }

/* Tinted by event kind, MIRRORING .portal-date-chip in basket-v2-students - the same
   event should not be purple for a parent and amber for the office. Values copied from the
   portal's tone variables rather than referenced, since this app has no equivalent set. */
.illum-date-chip.is-primary .m { background: #0a73e8; }
.illum-date-chip.is-info .m    { background: #00b6d6; }
.illum-date-chip.is-purple .m  { background: #8b5cf6; }
.illum-date-chip.is-success .m { background: #0db366; }
.illum-date-chip.is-warning .m { background: #f59e0b; }
.illum-date-chip.is-danger .m  { background: #ff2133; }

.illum-date-arrow { color: #a8aaae; font-size: 1rem; flex: none; }

/* Material rows: one tile size for every kind, so rows are the same height.
   An image fills it; an icon centres inside it. MIRRORED as .portal-material-tile
   in basket-v2-students - the two screens show the same files. */
.illum-material-tile {
  width: 3.25rem; height: 3.25rem;
  border: 1px solid var(--bs-border-color, #e6e8ee);
  border-radius: 8px;
  overflow: hidden;
  display: grid; place-items: center;
  flex: none;
  background: #fff;
}
.illum-material-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.illum-material-tile i { font-size: 1.5rem; color: #8a8f9c; }