/*
 * PhonixPBX branding on top of Tabler 1.6.1.
 * Colours come from the legacy usr/www/gui.css:
 *   #435370 header/primary   #687BA4 accent   #D9DEE8 light info
 *   #9D9D9D navigation grey  #A12A2A / #FFD9D1 errors   #0000CC links   #777777 muted
 */
:root,
[data-bs-theme="light"] {
  --phonix-primary: #435370;
  --phonix-primary-rgb: 67, 83, 112;
  --phonix-accent: #687ba4;
  --phonix-accent-rgb: 104, 123, 164;
  --phonix-light: #d9dee8;
  --phonix-nav-grey: #9d9d9d;
  --phonix-error: #a12a2a;
  --phonix-error-bg: #ffd9d1;
  --phonix-link: #0000cc;
  --phonix-muted: #777777;

  --tblr-primary: var(--phonix-primary);
  --tblr-primary-rgb: var(--phonix-primary-rgb);
  --tblr-primary-text-emphasis: #2b3549;
  --tblr-primary-bg-subtle: var(--phonix-light);
  --tblr-primary-border-subtle: #b3bdd1;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-lt: var(--phonix-light);
  --tblr-primary-lt-rgb: 217, 222, 232;
  --tblr-primary-darken: #39465f;
  --tblr-info: var(--phonix-accent);
  --tblr-info-rgb: var(--phonix-accent-rgb);
  --tblr-danger: var(--phonix-error);
  --tblr-danger-rgb: 161, 42, 42;
  --tblr-link-color: var(--phonix-link);
  --tblr-link-color-rgb: 0, 0, 204;
  --tblr-link-hover-color: #000099;
  --tblr-secondary-color: var(--phonix-muted);

  /* stronger contrast than Tabler's defaults (gray-700 text, gray-500 muted, 12% borders);
     light-dark() keeps the dark theme on Tabler's own values */
  --tblr-body-color: light-dark(#1c2433, var(--tblr-gray-200));
  --tblr-secondary: light-dark(#4f5a6b, var(--tblr-gray-400));
  --tblr-body-bg: light-dark(#d3d9e3, var(--tblr-gray-900));
  --tblr-border-color: light-dark(#c9d0db, var(--tblr-gray-700));
  --tblr-border-color-translucent: light-dark(#c3cad6, var(--tblr-dark-mode-border-color-translucent));
}

/* placeholders clearly fainter than entered values (Tabler: gray-500 / gray-400) */
.form-control,
.form-control-plaintext,
.form-select,
.ts-control {
  --tblr-control-placeholder-color: light-dark(var(--tblr-gray-400), var(--tblr-gray-600));
}

[data-bs-theme="dark"] {
  --tblr-primary: #6d82ab;
  --tblr-primary-rgb: 109, 130, 171;
  --tblr-primary-lt: rgba(104, 123, 164, 0.18);
  --tblr-link-color: #8fa6ff;
  --tblr-link-color-rgb: 143, 166, 255;
  --tblr-link-hover-color: #b7c6ff;
  --tblr-danger: #e05d5d;
  --tblr-danger-rgb: 224, 93, 93;
}

/* buttons/badges use the primary token but Tabler precomputes a few variants */
.btn-primary {
  --tblr-btn-bg: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-bg: var(--tblr-primary-darken, #39465f);
  --tblr-btn-hover-border-color: var(--tblr-primary-darken, #39465f);
  --tblr-btn-active-bg: #2f3a4f;
  --tblr-btn-color: #fff;
  --tblr-btn-hover-color: #fff;
}

/* sidebar: legacy header slate */
.phonix-sidebar {
  --tblr-navbar-bg: var(--phonix-primary);
  --tblr-navbar-border-width: 0;
  background: var(--phonix-primary) !important;
}
.phonix-sidebar .nav-link,
.phonix-sidebar .dropdown-item {
  color: rgba(255, 255, 255, 0.86);
}
.phonix-sidebar .nav-item.active > .nav-link,
.phonix-sidebar .nav-link:hover {
  color: #fff;
}
.phonix-sidebar .dropdown-menu {
  background: transparent;
}
/* the section of the open page; the next rules are as specific as Tabler's and win because they come later */
.phonix-sidebar[class*="navbar-expand"] .navbar-nav .nav-item.active > .nav-link {
  font-weight: var(--tblr-font-weight-semibold);
}
.phonix-sidebar .dropdown-item:hover {
  background: rgba(var(--phonix-accent-rgb), 0.4);
  color: #fff;
}
/* the open page: solid accent, bold and a white bar on the left, so it stands out from hover */
.phonix-sidebar[class*="navbar-expand"] .navbar-collapse .dropdown-menu .dropdown-item.active {
  background: var(--phonix-accent);
  box-shadow: inset 3px 0 0 #fff;
  color: #fff;
  font-weight: var(--tblr-font-weight-semibold);
}
.phonix-brand {
  background: transparent;
  padding: 0.35rem 0;
  margin: 0.75rem 0 0.25rem;
}
.phonix-brand img {
  display: block;
  height: 46px;
  width: auto;
}
/*
 * Tabler sizes icons through the .icon class (SVG); our icon-font glyphs (<i class="ti">)
 * would otherwise just inherit the surrounding text size and look tiny.
 */
.ti {
  font-size: 1.25em;
  vertical-align: -0.15em;
}
/* same spacing as Tabler's .btn .icon; write {{ icon(...) }}{{ _("Label") }} without me-* or a space */
.btn .ti {
  font-size: 1.25rem;
  vertical-align: middle;
  margin: 0 calc(var(--tblr-btn-padding-x) / 2) 0 calc(var(--tblr-btn-padding-x) / -4);
}
.btn .ti.icon-end {
  margin: 0 calc(var(--tblr-btn-padding-x) / -4) 0 calc(var(--tblr-btn-padding-x) / 2);
}
.btn-icon .ti {
  margin: 0;
}
/* help button in the page header */
.page-help .ti {
  font-size: 1.75rem;
}
.nav-link-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link-icon .ti {
  font-size: 1.4rem;
  vertical-align: 0;
}
.empty {
  --tblr-empty-icon-size: 5rem;
}
.empty-icon .ti {
  font-size: var(--tblr-empty-icon-size);
  vertical-align: 0;
}
.dropdown-item .ti {
  font-size: 1.15rem;
}
/* cards: visible edge, tinted header and darker titles so boxes stand off the page */
.card {
  --tblr-card-box-shadow: 0 1px 3px rgba(28, 36, 51, 0.08);
}
.card-header {
  --tblr-card-header-bg: light-dark(#f2f4f8, transparent);
}
.card-title {
  color: light-dark(var(--phonix-primary), inherit);
  font-weight: 600;
}
.form-label {
  color: light-dark(#1c2433, inherit);
}
.table thead th {
  color: light-dark(#3d4757, var(--tblr-secondary));
}

/* progress bars tall enough for a percentage label inside the bar, whatever size modifier */
.progress,
.progress-sm,
.progress-lg,
.progress-xl {
  --tblr-progress-height: 1.25rem;
  --tblr-progress-font-size: 0.75rem;
  line-height: normal;
}
.progress-bar {
  font-weight: var(--tblr-font-weight-medium);
}

/* top bar matches the sidebar: legacy header slate */
.phonix-topbar {
  --tblr-navbar-border-width: 0;
  background: var(--phonix-primary) !important;
  border: 0;
}
.phonix-topbar > .container-fluid > .navbar-nav > .nav-link,
.phonix-topbar > .container-fluid > .navbar-nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
}
.phonix-topbar > .container-fluid > .navbar-nav > .nav-link:hover,
.phonix-topbar > .container-fluid > .navbar-nav > .nav-item > .nav-link:hover {
  color: #fff !important;
}
.phonix-topbar > .container-fluid > .navbar-nav .nav-link .text-secondary,
.phonix-topbar .navbar-collapse .text-secondary {
  color: rgba(255, 255, 255, 0.65) !important;
}
.phonix-avatar {
  background: var(--phonix-accent);
  color: #fff;
}
.phonix-apply .btn .htmx-indicator { display: none; }
.phonix-apply .htmx-request .htmx-indicator,
.phonix-apply.htmx-request .htmx-indicator { display: inline-block; }
/* "Apply changes" (btn-warning): a darker amber than the banner, white text at 5:1 contrast */
.btn-apply {
  --tblr-btn-variant: oklch(55% 0.15 68);
  --tblr-btn-variant-fg: #fff;
  --tblr-btn-variant-darken: oklch(50% 0.14 68);
}

/* content links use the legacy link blue; navigation, buttons, cards and page links keep theirs */
.page-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.card-btn):not(.list-group-item):not(.page-link) {
  color: var(--tblr-link-color);
}

.alert-danger {
  --tblr-alert-color: var(--phonix-error);
}
[data-bs-theme="light"] .invalid-feedback,
:root .invalid-feedback {
  color: var(--phonix-error);
}
[data-bs-theme="light"] .form-control.is-invalid,
[data-bs-theme="light"] .form-select.is-invalid {
  background-color: var(--phonix-error-bg);
}

.phonix-login {
  background: #ffffff;
  border-top: 6px solid var(--phonix-primary);
}
[data-bs-theme="dark"] .phonix-login {
  background: var(--tblr-body-bg);
}
.phonix-login-logo {
  max-width: 320px;
  width: 80%;
  height: auto;
}
[data-bs-theme="dark"] .phonix-login-logo,
[data-bs-theme="dark"] .phonix-brand img {
  filter: none;
}

.table-actions {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}
.dyn-row + .dyn-row {
  margin-top: 0.5rem;
}
.log-view {
  font-family: var(--tblr-font-monospace);
  font-size: 0.8rem;
  max-height: 65vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--tblr-bg-surface-secondary);
  padding: 0.75rem;
  border-radius: var(--tblr-border-radius);
}
.mail-preview {
  font-family: inherit;
  font-size: 0.875rem;
  white-space: pre-wrap;
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface-secondary);
  padding: 0.75rem;
  border-radius: var(--tblr-border-radius);
}
.chart-lg {
  height: auto; /* Tabler fixes it; the uPlot legend sits below the plot */
  min-height: 16rem;
}
/* uPlot charts (phonix.js chartOptions draws the canvas in the theme colours) */
.uplot {
  font-family: inherit;
}
.uplot .u-legend {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}
.uplot .u-legend th {
  font-weight: var(--tblr-font-weight-medium);
}
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in 150ms;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* keys as on a phone keypad (IVR menus) */
.kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  margin-right: 0.25rem;
  border: 1px solid var(--tblr-border-color);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--tblr-bg-surface);
  font-family: var(--tblr-font-monospace);
  font-weight: 700;
  font-size: 0.8rem;
}

/* IVR key options: drag handle, key, label, destination, move, remove */
.ivr-option {
  display: grid;
  grid-template-columns: 2rem 5rem minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
  grid-template-areas: "handle key label dest move remove" ". err err err err err";
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
.ivr-option.is-invalid { border-color: var(--tblr-danger); }
.ivr-option.sortable-ghost { opacity: 0.4; box-shadow: 0 0 0 2px var(--tblr-primary); }
.ivr-handle {
  grid-area: handle;
  display: flex;
  justify-content: center;
  color: var(--tblr-secondary);
  cursor: grab;
  touch-action: none;
}
.ivr-key { grid-area: key; font-family: var(--tblr-font-monospace); font-weight: 700; padding-right: 1.75rem; }
.ivr-label { grid-area: label; }
.ivr-dest { grid-area: dest; min-width: 0; }
.ivr-move { grid-area: move; display: flex; }
.ivr-remove { grid-area: remove; }
.ivr-error { grid-area: err; }
@media (max-width: 767.98px) {
  .ivr-option {
    grid-template-columns: 1.5rem 5rem minmax(0, 1fr) auto;
    grid-template-areas: "handle key label remove" ". dest dest move" ". err err err";
  }
}
.ivr-flow-row { padding: 0.2rem 0; }
.ivr-depth-1 { padding-left: 1.75rem; }
.ivr-depth-2 { padding-left: 3.5rem; }
.ivr-depth-3 { padding-left: 5.25rem; }

/* business hours */
.hours-day {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
}
.hours-day:last-child { border-bottom: 0; }
.hours-day-name { font-weight: 600; padding-top: 0.45rem; }
.hours-day.is-today .hours-day-name { color: var(--tblr-primary); }
.hours-range { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.hours-range input[type="time"] { width: 8.5rem; }
.hours-closed { display: none; padding-top: 0.45rem; }
.hours-ranges:not(:has(.hours-range)) + .hours-closed { display: block; }
.hours-holiday {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}
/* special periods: handle, name, destination, move, remove; switch, days, yearly and code below */
.hours-specials { display: flex; flex-direction: column; gap: 0.5rem; }
.hours-special {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
  grid-template-areas: "handle name dest move remove" ". opts opts opts opts" ". err err err err";
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
.hours-special.is-invalid { border-color: var(--tblr-danger); }
.hours-special.sortable-ghost { opacity: 0.4; box-shadow: 0 0 0 2px var(--tblr-primary); }
.hours-special-handle { grid-area: handle; }
.hours-special-name { grid-area: name; }
.hours-special-dest { grid-area: dest; min-width: 0; }
.hours-special-move { grid-area: move; }
.hours-special-remove { grid-area: remove; }
.hours-special-opts { grid-area: opts; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.hours-special-date { width: 10rem; }
.hours-special-code { width: 13rem;font-family: var(--tblr-font-monospace); }
.hours-special-error { grid-area: err; }
@media (max-width: 767.98px) {
  .hours-special {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    grid-template-areas: "handle name remove" ". dest move" ". opts opts" ". err err";
  }
}
.hours-week-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}
.hours-week-row.is-today { font-weight: 700; color: var(--tblr-primary); }
.hours-track {
  position: relative;
  height: 0.9rem;
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: 3px;
  overflow: hidden;
}
.hours-bar { position: absolute; top: 0; bottom: 0; background: var(--tblr-green); }
.hours-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tblr-body-color); }
.hours-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem 1.5rem; }
.hours-cal { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-size: 0.75rem; }
.hours-cal caption { caption-side: top; padding: 0 0 0.25rem; font-weight: 600; color: var(--tblr-body-color); }
.hours-cal th { text-align: center; font-weight: 400; color: var(--tblr-secondary); }
.hours-cal td { text-align: center; padding: 0.15rem 0; border-radius: 3px; }
.hours-cal td.is-today { outline: 2px solid var(--tblr-body-color); outline-offset: -1px; font-weight: 700; }
.hours-cal-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; }
.hours-cal-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hours-cal-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--tblr-border-color); }
.hours-cal-open { background: rgba(var(--tblr-green-rgb), 0.25); }
.hours-cal-closed { background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); }
.hours-cal-holiday { background: rgba(var(--tblr-orange-rgb), 0.45); }
.hours-cal-sp0 { background: rgba(var(--tblr-purple-rgb), 0.45); }
.hours-cal-sp1 { background: rgba(var(--tblr-blue-rgb), 0.45); }
.hours-cal-sp2 { background: rgba(var(--tblr-pink-rgb), 0.45); }
.hours-cal-sp3 { background: rgba(var(--tblr-cyan-rgb), 0.45); }
.hours-cal-sp4 { background: rgba(var(--tblr-yellow-rgb), 0.55); }
.hours-cal-sp5 { background: rgba(var(--tblr-teal-rgb), 0.45); }
.hours-ticks div { display: flex; justify-content: space-between; color: var(--tblr-secondary); }
@media (max-width: 575.98px) {
  .hours-day { grid-template-columns: minmax(0, 1fr); }
  .hours-holiday { grid-template-columns: minmax(0, 1fr) auto; }
  .hours-holiday-name { grid-column: 1 / -1; grid-row: 2; }
}

/* uploads with data-uploading show their progress in the result area (dropzone.css is not vendored) */
.dropzone[data-uploading] .dz-preview { display: none; }

@media print {
  .phonix-sidebar, .phonix-sticky, .footer { display: none !important; }
  .page-wrapper { margin: 0 !important; }
}

/* Tom Select with data-tom-sortable: the chosen items are dragged into order (SortableJS) */
select[data-tom-sortable] + .ts-wrapper .ts-control > .item { cursor: grab; }
select[data-tom-sortable] + .ts-wrapper .ts-control > .item.sortable-ghost { opacity: 0.4; }

/* list views (macros/lists.html): search field and count on the left, page size on the right */
.list-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; width: 100%; }
.list-search { flex: 0 1 20rem; }
.list-per-page { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.list-per-page .form-select { width: auto; }
/* search matches without Tabler's padding, so highlighting does not shift the text */
.table mark { padding: 0; }