/* Brand palette sampled from the CiS shield logo. Loaded after assets/css/style.css. */
:root,
[data-bs-theme='light'] {
  --bs-primary: #1e93c6;
  --bs-primary-rgb: 30, 147, 198;
  --bs-primary-text-emphasis: #0c3b4f;
  --bs-primary-bg-subtle: #def0f7;
  --bs-primary-border-subtle: #9ed0e3;

  --bs-warning: #fcc64c;
  --bs-warning-rgb: 252, 198, 76;
  --bs-warning-text-emphasis: #654f1e;
  --bs-warning-bg-subtle: #fff3dd;
  --bs-warning-border-subtle: #fde0a3;

  --bs-danger: #d9272a;
  --bs-danger-rgb: 217, 39, 42;
  --bs-danger-text-emphasis: #571011;
  --bs-danger-bg-subtle: #f9dcdc;
  --bs-danger-border-subtle: #ed9e9f;

  --bs-link-color: #1e93c6;

  --brand-orange: #f2843d;
  --brand-orange-rgb: 242, 132, 61;
}

/* style.css's .btn-outline-secondary hardcodes near-black text/border (#2C2C2C) with no
   [data-theme-version=dark] override anywhere in the theme -- on a dark background that's
   effectively invisible (Calendar's Today/prev/next/Day/Month buttons, PersonProfile's case
   picker, SidebarMenu's "Switch back to Free"). Give it real dark-mode colors. */
[data-theme-version=dark] .btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Same visual as style.css's #preloader -- the route-change flash and the auth gate's hold
   in Layout.tsx -- under different ids so neither collides with index.html's own one-time
   #preloader node. */
#route-preloader,
#auth-preloader {
  background-color: #fff;
  padding: 0;
  margin: 0;
  height: 100%;
  position: fixed;
  z-index: 99999;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#route-preloader .lds-ripple,
#auth-preloader .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#route-preloader .lds-ripple div,
#auth-preloader .lds-ripple div {
  position: absolute;
  border: 4px solid var(--bs-primary);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#route-preloader .lds-ripple div:nth-child(2),
#auth-preloader .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

/* ---- Calendar (src/pages/Calendar.tsx): real month grid + time grid ---- */
.cw-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-card-bg, #fff);
}
.cw-month-dow {
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  color: var(--bs-secondary-color, #8a94a6);
  background: var(--bs-tertiary-bg, #fafbfc);
  border-bottom: 1px solid var(--bs-border-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cw-month-cell {
  all: unset;
  box-sizing: border-box;
  min-height: 92px;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}
.cw-month-cell:hover {
  background: var(--bs-tertiary-bg, #fafbfc);
}
.cw-month-cell:nth-child(7n) {
  border-right: none;
}
.cw-month-cell.cw-outmonth {
  color: var(--bs-secondary-color, #b9bfca);
  background: var(--bs-tertiary-bg, #fcfcfd);
}
.cw-month-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 600;
  font-size: 12px;
}
.cw-month-cell.cw-today .cw-month-num {
  background: var(--bs-primary);
  color: #fff;
  border-radius: 50%;
}
.cw-month-dots {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.cw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.cw-time-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(90px, 1fr));
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-card-bg, #fff);
}
.cw-time-grid.cw-single {
  grid-template-columns: 52px 1fr;
}
.cw-head-cell {
  padding: 8px 4px;
  text-align: center;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg, #fafbfc);
}
.cw-head-cell:first-child {
  border-left: none;
}
.cw-head-day {
  font-size: 10.5px;
  color: var(--bs-secondary-color, #8a94a6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cw-head-date {
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}
.cw-head-cell.cw-today .cw-head-date {
  color: var(--bs-primary);
}
.cw-time-col {
  display: flex;
  flex-direction: column;
}
.cw-time-cell {
  height: 52px;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 10px;
  color: var(--bs-secondary-color, #8a94a6);
  text-align: right;
  padding: 3px 6px 0 0;
}
.cw-day-col {
  position: relative;
  border-left: 1px solid var(--bs-border-color);
}
.cw-slot {
  height: 52px;
  border-bottom: 1px solid var(--bs-border-color);
}
.cw-event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10.5px;
  line-height: 1.3;
  overflow: hidden;
  border-left: 3px solid;
  cursor: pointer;
  text-align: left;
}
.cw-event b {
  display: block;
  font-size: 11px;
  /* style.css's global `b, strong { color: var(--bs-heading-color); }` (#fff in dark mode)
     otherwise overrides the inline per-event text color set in Calendar.tsx's EventBlock,
     turning the time label white-on-light-pastel -- unreadable regardless of theme. */
  color: inherit;
}

/* All-day strip: sits above the hourly grid (between the day headers and the time column) for
   events whose "All day" toggle is on -- they don't occupy a time slot, so they never fit the
   absolutely-positioned .cw-event layout below. */
.cw-allday-label {
  padding: 6px 6px;
  font-size: 9.5px;
  color: var(--bs-secondary-color, #8a94a6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: right;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cw-allday-cell {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 28px;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
}
.cw-allday-chip {
  display: block;
  width: 100%;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  border-left: 3px solid;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* style.css's global `.card { height: calc(100% - 24px); }` (meant for equal-height dashboard
   widget cards in a row) also applies to any element carrying the .card class -- including the
   small case-preview links inside Dashboard.tsx's Pipeline board, which stretched each one to
   match the whole column's height instead of just wrapping its own content. Two classes beats
   the theme rule's specificity without needing !important. */
.pipeline-card.card {
  height: auto;
}

.brand-title-text {
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* style.css's `.nav-header .brand-title` rule is a leftover from the
   original inline-SVG logo (font-size: 2.375rem, sized for a single glyph)
   and, via the .brand-title class we also apply for its responsive
   hide-below-1024px behavior, silently overrides our own font-size above
   whenever the wordmark renders inside .nav-header (i.e. on desktop). */
.nav-header .brand-title {
  font-size: 2rem;
}

.auth-info .brand-title-text {
  color: var(--bs-heading-color, #2c2c2c);
}

.auth-info .brand-logo {
  justify-content: center;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* bootstrap-select's generated toggle button is a fixed ~49px tall, shorter
   than the sibling icon buttons (~54px) in the topbar's header-right list,
   so it sits top-aligned with empty space below it instead of centered. */
.header-right > li.nav-item:has(.bootstrap-select) {
  display: flex;
  align-items: center;
}

/* .header-profile-dropdown > a.nav-link is stretched to the row's full
   height by the header-right flex row, but its padding is top/bottom
   symmetric on the anchor's *content box*, not on the stretched box -- so
   the profile-head block just sits under the top padding and the leftover
   height collects as empty space below it. Making the anchor itself a flex
   container centers profile-head within the full stretched height. */
.header-profile-dropdown > a.nav-link {
  display: flex;
  align-items: center;
}

/* Same stretch-vs-center issue as above: the bell icon's <li> wraps its
   button in an extra `.dropdown` div (for the Bootstrap dropdown toggle)
   that the chatbox/fullscreen buttons don't have. That div stretches to the
   row's full height, but the button inside it doesn't re-center, so the
   bell sits ~3px higher than its siblings. */
.header-right > li.notification_dropdown > .dropdown {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Below the same breakpoint where style.css already narrows .nav-header to
   an icon-only rail (max-width: 63.9375rem), move the logo mark inside the
   floating header-content pill instead: .nav-header sits outside the pill
   with its own (transparent, at this width) background, so on narrow
   screens it read as a separate, disconnected element. A second icon-only
   Logo instance lives in Topbar.tsx's header-content for this range only. */
.mobile-only-logo {
  display: none;
}
@media only screen and (max-width: 63.9375rem) {
  .mobile-only-logo {
    display: inline-flex;
    width: 3.5rem;
    height: 2.75rem;
  }
  /* Sized as percentages of the (now wider-than-tall) link box above, with
     object-fit: contain so the square source image scales proportionally
     into that box instead of stretching to fill it. */
  .mobile-only-logo .logo-abbr {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .nav-header {
    display: none;
  }
  [data-sidebar-style=overlay] .header {
    padding-left: 0;
  }
}

/* Calendar workspace */
.calendar-page-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem 1rem; }
.calendar-page-header h1 { margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.15rem); }
.calendar-page-header p { margin: .35rem 0 0; color: var(--bs-secondary-color); }
.calendar-eyebrow { margin: 0 0 .25rem !important; color: var(--bs-primary) !important; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.calendar-status { min-height: 1.4rem; margin: 0 1.75rem; color: var(--bs-danger); font-size: .8rem; }
.calendar-layout { display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 1rem; padding: 0 1.75rem; align-items: start; }
.calendar-sidebar { display: grid; gap: 1rem; }
.calendar-panel, .calendar-board { background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: .75rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.calendar-panel { padding: 1rem; }
.calendar-panel h2 { margin: 0; font-size: .95rem; }
.calendar-panel p { margin: .3rem 0 .9rem; color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.5; }
.calendar-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.calendar-panel-heading > i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #4285f4; background: var(--bs-tertiary-bg); }
.quick-add-list { display: grid; gap: .45rem; }
.quick-add { display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; padding: .55rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: transparent; color: var(--bs-body-color); text-align: start; transition-property: background-color, border-color, transform; transition-duration: 140ms; }
.quick-add:hover { background: var(--bs-tertiary-bg); border-color: var(--quick-color); }
.quick-add:active, .calendar-toolbar button:active { transform: scale(.96); }
.quick-add > span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--quick-color); flex: none; }
.quick-add-blue { --quick-color: #3e6fd9; } .quick-add-amber { --quick-color: #b9770e; } .quick-add-green { --quick-color: #2e9e5b; } .quick-add-red { --quick-color: #cc4b4b; }
.connection-on, .connection-off { display: inline-flex; align-items: center; gap: .35rem; margin: .2rem 0 0 !important; }
.connection-on::before, .connection-off::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #2e9e5b; }
.connection-off::before { background: var(--bs-secondary-color); }
.google-panel small { display: block; margin-top: .65rem; color: var(--bs-secondary-color); font-size: .68rem; }
.automation-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--bs-border-color); font-size: .75rem; }
.automation-row:first-of-type { margin-top: .7rem; }
.calendar-board { min-width: 0; padding: 1rem; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.calendar-navigation { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.calendar-navigation h2 { margin: 0; font-size: 1rem; white-space: nowrap; }
.calendar-nav-buttons, .calendar-view-switcher { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; flex: none; }
.calendar-toolbar button { min-width: 2.35rem; min-height: 2.35rem; padding: .4rem .65rem; border: 0; border-inline-end: 1px solid var(--bs-border-color); background: var(--bs-card-bg, #fff); color: var(--bs-body-color); font-size: .75rem; transition-property: background-color, color, transform; transition-duration: 140ms; }
.calendar-toolbar button:last-child { border-inline-end: 0; }
.calendar-toolbar button:hover { background: var(--bs-tertiary-bg); }
.calendar-view-switcher button { text-transform: capitalize; }
.calendar-view-switcher button.active { background: var(--bs-primary); color: #fff; }
.calendar-scroll { overflow-x: auto; border-radius: .6rem; scrollbar-gutter: stable; }
.calendar-scroll:focus-visible, .calendar-page button:focus-visible, .calendar-page input:focus-visible, .calendar-page select:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.calendar-page .cw-time-grid { min-width: 690px; grid-template-columns: 54px repeat(7, minmax(90px, 1fr)); border-radius: .6rem; }
.calendar-page .cw-time-grid.cw-single { min-width: 0; grid-template-columns: 64px 1fr; }
.calendar-page .cw-head-cell { min-height: 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.calendar-page .cw-head-day, .calendar-page .cw-head-date { display: block; }
.calendar-page .cw-head-cell.cw-today .cw-head-date { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--bs-primary); color: #fff; }
.calendar-page .cw-time-cell, .calendar-page .cw-slot { height: 56px; }
.cw-current-day { background: rgba(var(--bs-primary-rgb), .025); }
.calendar-page .cw-event { left: 4px; right: 4px; padding: .3rem .4rem; border: 1px solid var(--event-border); border-inline-start-width: 3px; border-radius: .4rem; background: var(--event-bg); color: var(--event-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); transition-property: filter, transform, box-shadow; transition-duration: 140ms; }
.calendar-page .cw-event:hover { filter: saturate(1.12); box-shadow: 0 3px 8px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.cw-event-time, .cw-event-title, .cw-event-source { display: block; }
.cw-event-time { font-size: .64rem; font-weight: 700; }
.cw-event-title { font-size: .68rem; font-weight: 600; line-height: 1.25; }
.cw-event-source { margin-top: .15rem; font-size: .58rem; opacity: .72; }
.calendar-page .cw-month-cell { min-height: 104px; transition-property: background-color, box-shadow; transition-duration: 140ms; }
.cw-month-events { display: grid; gap: .2rem; min-width: 0; }
.cw-month-event { overflow: hidden; padding: .22rem .35rem; border-inline-start: 2px solid currentColor; border-radius: .2rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: .62rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.cw-month-event-blue { border-color: #3e6fd9; } .cw-month-event-amber { border-color: #b9770e; } .cw-month-event-green { border-color: #2e9e5b; } .cw-month-event-red { border-color: #cc4b4b; } .cw-month-event-violet { border-color: #6e56c4; }
.cw-month-events small { color: var(--bs-secondary-color); font-size: .62rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .85rem; color: var(--bs-secondary-color); font-size: .7rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.calendar-legend i { width: .5rem; height: .5rem; border-radius: 50%; background: #3e6fd9; }
.calendar-legend .legend-google { background: #4285f4; box-shadow: inset 0 0 0 2px #fff; outline: 1px solid #4285f4; }
.calendar-legend .legend-ai { background: #6e56c4; }
.calendar-modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1rem; background: rgba(10, 18, 30, .55); overflow-y: auto; }
.calendar-modal { width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: .75rem; background: var(--bs-card-bg, #fff); box-shadow: 0 20px 60px rgba(10, 18, 30, .3); }
.calendar-modal > header, .calendar-modal > footer { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; }
.calendar-modal > header { justify-content: space-between; border-bottom: 1px solid var(--bs-border-color); }
.calendar-modal > header h2 { margin: 0; font-size: 1.15rem; }
.calendar-modal > footer { justify-content: flex-end; border-top: 1px solid var(--bs-border-color); }
.calendar-modal-body { padding: 1.25rem; }
.calendar-modal-body label { display: block; margin: 0 0 .35rem; font-size: .75rem; font-weight: 600; }
.calendar-modal-body .form-control, .calendar-modal-body .form-select { margin-bottom: 1rem; }
.calendar-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.calendar-error { margin: .25rem 0 0; color: var(--bs-danger); font-size: .75rem; }
@media (max-width: 1199px) { .calendar-layout { grid-template-columns: 1fr; } .calendar-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 2; } .calendar-board { order: 1; } }
@media (max-width: 767px) { .calendar-page-header { align-items: stretch; flex-direction: column; padding: 1rem; } .calendar-page-header .btn { width: 100%; } .calendar-status { margin-inline: 1rem; } .calendar-layout { padding-inline: 1rem; } .calendar-sidebar { grid-template-columns: 1fr; } .calendar-board { padding: .75rem; } .calendar-toolbar, .calendar-navigation { align-items: stretch; flex-direction: column; } .calendar-navigation h2 { white-space: normal; } .calendar-nav-buttons, .calendar-view-switcher { width: 100%; } .calendar-toolbar button { flex: 1; } .calendar-page .cw-month-cell { min-height: 74px; padding: .3rem; } .cw-month-event { font-size: .56rem; } .calendar-form-grid { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .calendar-page *, .calendar-page *::before, .calendar-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }