/*# sourceMappingURL=custom.min.css.map */

.help-inline {color: red !important;}

/* Velzon's light-theme default is --vz-link-color:#B78628 (brown) -- every plain,
   unstyled link (incl. inactive nav-tabs, which only get the theme's blue via a
   separate .active-only override) inherits it. Overriding the variable itself here
   fixes every current and future occurrence app-wide instead of patching classes
   one template at a time. */
:root{--vz-link-color:var(--vz-primary);--vz-link-hover-color:var(--vz-primary)}

/* Velzon's default auth-page overlay is a brown-to-yellow gradient at 70% opacity,
   which would nearly hide the real office photo now used as the login background.
   Keep the yellow (--vz-warning, no brown) but at lower opacity so the photo stays
   clearly visible underneath. */
.auth-one-bg .bg-overlay{background:rgba(var(--vz-warning-rgb),.45)!important;opacity:1!important}

.bg-primary-subtle{background-color:rgba(var(--vz-primary-rgb),.15)!important}
.bg-secondary-subtle{background-color:rgba(var(--vz-secondary-rgb),.15)!important}
.bg-success-subtle{background-color:rgba(var(--vz-success-rgb),.15)!important}
.bg-info-subtle{background-color:rgba(var(--vz-info-rgb),.15)!important}
.bg-warning-subtle{background-color:rgba(var(--vz-warning-rgb),.15)!important}
.bg-danger-subtle{background-color:rgba(var(--vz-danger-rgb),.15)!important}
.bg-dark-subtle{background-color:rgba(var(--vz-dark-rgb),.15)!important}
.bg-light-subtle{background-color:rgba(var(--vz-light-rgb),.5)!important}

.btn-sm-badge{font-size:.7109375rem;padding:.25rem .5rem;line-height:1.5;border:1px solid transparent;display:inline-flex;align-items:center;box-sizing:border-box;height:1.755rem;}

.quick-edit-display{cursor:pointer;display:inline-flex;align-items:center;gap:2px;border-radius:.25rem;padding:.15rem .3rem;margin:-.15rem -.3rem;}
.quick-edit-display:hover{background-color:rgba(var(--vz-secondary-rgb),.1);}
.quick-edit-display.quick-edit-disabled{cursor:default;}
.quick-edit-display.quick-edit-disabled:hover{background-color:transparent;}
.quick-edit-display.quick-edit-disabled i{display:none;}

#ticket-sidebar-tabs .nav-link .tab-label{display:none;}
#ticket-sidebar-tabs .nav-link.active .tab-label{display:inline;margin-left:.35rem;}

.sla-ring{display:inline-block;width:1.5rem;height:1.5rem;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--sla-color) calc(var(--sla-pct)*1%),rgba(var(--vz-secondary-rgb),.15) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));}

#ticketsTable .subject{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
#ticketsTable td.reporter,#ticketsTable td.assigned_to{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
#customersTable td.company a{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
#customersTable td.email{max-width:220px;overflow:hidden;text-overflow:ellipsis;}
#contactsTable td.customer a{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
#contactsTable td.email{max-width:180px;overflow:hidden;text-overflow:ellipsis;}
#ticketsTable th.sort::before,#customersTable th.sort::before,#contactsTable th.sort::before,#usersTable th.sort::before{top:calc(50% + 3px);transform:translateY(-50%);}
#ticketsTable th.sort::after,#customersTable th.sort::after,#contactsTable th.sort::after,#usersTable th.sort::after{top:calc(50% - 3px);transform:translateY(-50%);}
#customersTable td,#contactsTable td,#ticketsTable td,#usersTable td,.followup-table td,#projectsTable td,#opportunitiesTable td,#poTable td,#tasksTable td,#materiaalTable td{height:2.75rem;}

#ticketsTable .dropdown-menu,#customersTable .dropdown-menu,#contactsTable .dropdown-menu,#usersTable .dropdown-menu{z-index:1056;}

.table-responsive.dropdown-open{overflow:visible;}

/* SimpleBar (vertical-menu scrollbar) wraps #navbar-nav's children in its own div
   structure at runtime, so a direct-child chain here never matches the real DOM --
   this has to be a descendant selector to survive that. */
#navbar-nav .nav-link.menu-link{font-size:.8125rem;}

.task-column-body{min-height:80px;}
.task-card{cursor:grab;}
.task-card.sortable-ghost{opacity:.4;}
.task-card.sortable-drag{cursor:grabbing;}
.task-row{cursor:grab;}
.task-row.sortable-ghost{opacity:.4;}
.task-row.sortable-drag{cursor:grabbing;}
.task-column-body.task-column-drag-over{background-color:rgba(var(--vz-primary-rgb),.06);border-radius:.25rem;}

/* Drag handle for subtask/task reorder lists (onboarding template editor,
   task detail's subtask list) -- the ri-draggable glyph alone is only ~8px
   wide, too small a target to reliably grab. A large negative margin here
   (like .quick-edit-display's small one above) would overlap the very next
   flex sibling (the complete/edit button sitting right next to it with only
   an 8px gap) and silently steal its clicks, so this only pads outward
   without a compensating negative margin -- costs a few px of extra row
   height instead of risking that overlap. */
.drag-handle{cursor:grab;display:inline-flex;align-items:center;padding:.4rem;}
.drag-handle:active{cursor:grabbing;}

/* Drag-ghost feedback for the other Sortable lists in the app (onboarding
   template editor weeks/tasks/subtasks, task detail's subtask list) --
   same opacity/cursor treatment as the task board's cards/rows above. */
.task-subtask-row.sortable-ghost,.template-task-row.sortable-ghost,.template-subtask-row.sortable-ghost{opacity:.4;}
.task-subtask-row.sortable-drag,.template-task-row.sortable-drag,.template-subtask-row.sortable-drag{cursor:grabbing;}

.blink{animation:timer-blink 1.5s ease-in-out infinite;}
@keyframes timer-blink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* Slimmer topbar -- Velzon's own default header is already 70px (same as this app's
   previous height), but that still read as too tall. Shrinking it to 60px means every
   size tied to it (search input, topbar icon buttons, page-content's top padding) has
   to scale down with it or they'd look uncentered/cramped inside the smaller bar. */
.navbar-header{height:60px;}
.header-item{height:60px;}
.app-search{padding:13px 0;}
.app-search .form-control{height:34px;}
.app-search span.search-widget-icon{font-size:16px;line-height:34px;}
.navbar-header .btn-topbar{height:36px;width:36px;}
.page-content{padding-top:calc(60px + 1.5rem);padding-bottom:48px;}

/* Footer, same treatment as the topbar above -- 60px default shrunk to 48px, padding
   scaled down to match so the single line of text stays vertically centered. */
.footer{height:48px;padding-top:14px;padding-bottom:14px;}

/* Sidebar (vertical menu) a bit narrower than Velzon's 250px default. The shipped
   app.min.css hardcodes 250px directly in these selectors instead of referencing
   --vz-vertical-menu-width (diverged from the var-based rules in the unminified
   app.css source), so overriding the variable alone has no effect -- these have to be
   overridden directly, mirroring the same media query app.min.css uses for each. */
.navbar-menu{width:220px;}
.footer{left:220px;}
@media (min-width:768px){
    #page-topbar{left:220px;}
    .main-content{margin-left:220px;}
}

/* Choices.js sizes its live "type here" text input to (placeholder/typed-text length + 1)
   ch via an inline min-width it sets/updates itself in JS -- e.g. "Tags" (4 chars) gets
   5ch. Bootstrap's global box-sizing:border-box means that width has to fit the text AND
   this element's own padding, and for short values like "Tags" there isn't enough slack,
   clipping the last character. Switching to content-box keeps Choices' own ch-based width
   as pure content width, giving the padding room outside it instead of eating into it --
   fixes this for any tag/multi-select input's placeholder or typed value, not just "Tags".
   The extra padding-right is slack on top of that: "ch" is a snapshot of the *current*
   font's glyph metrics, and if this runs before the Inter webfont finishes loading, Choices
   sizes against the wider fallback font's "0" -- once Inter swaps in, nothing re-triggers
   that sizing, so a few extra px of headroom keeps the last character from clipping either way. */
.choices__input--cloned{box-sizing:content-box;padding-right:5px;}

/* Velzon's compiled CSS gives every Choices.js dropdown's inner list a
   margin-left:-16px that happens to exactly cancel each item's own
   padding-left:16px (and pulls it slightly past the dropdown's own left
   border besides) -- net effect: option text renders flush against the
   dropdown edge with no visible indent, on every single/multi-select Choices
   dropdown app-wide, not just one instance. Bumping the item's own padding
   past that offset restores real, visible left spacing without touching the
   underlying margin (which likely also governs the dropdown's scrollbar
   gutter, so better left alone). */
.choices__list--dropdown .choices__item--choice{padding-left:32px;}

.dashboard-calendar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}
/* Velzon's compiled CSS draws its own prev/next icon via .fc-prev/next-button::before
   (a centered remixicon glyph, positioned absolutely over the whole button) -- it wasn't
   written expecting FullCalendar to also render its own native icon <span> inside that
   same button, so both paint on top of each other, offset by a few px: a doubled-looking
   arrow. Hiding FullCalendar's own span leaves just Velzon's intended icon. */
.fc-prev-button .fc-icon,.fc-next-button .fc-icon{display:none;}
/* app.min.css itself has two conflicting rules for these buttons at equal specificity
   (.fc-button{height:auto} vs .fc-prev-button,.fc-next-button{height:37.5px}) -- source
   order picks height:auto, which was harmless while the (now-hidden) icon span's own
   content drove the auto height to roughly the right size, but collapses to almost
   nothing without it. Pin it to the same height as the "today" button next to it.
   !important because this specific fight resists plain cascade order/specificity even
   from a later, more-specific #dashboard-calendar-scoped rule -- verified empirically. */
.fc-prev-button,.fc-next-button{height:31.5px!important;}
#dashboard-calendar .fc-toolbar-title{font-size:1rem;}
#dashboard-calendar .fc-daygrid-day-number{font-size:.8125rem;}
/* Smaller event text so more of a long task/ticket title is readable before the
   ellipsis cuts it off -- left-aligned instead of the theme's default centered text,
   since centering wastes the extra width this frees up rather than showing more title. */
#dashboard-calendar .fc-event{font-size:.6875rem;padding:3px 4px;margin:3px 5px;text-align:left;}

/* Velzon's compiled CSS hardcodes a flat .fc-event{background-color:#3577f1} that ignores
   FullCalendar's own per-event backgroundColor/--fc-event-bg-color mechanism entirely, so
   every event rendered the same blue regardless of the color set in the events JSON.
   Forcing it back open here via explicit classNames (set server-side per event type). */
.fc-event.dashboard-cal-task,.fc-event.dashboard-cal-task .fc-event-dot{background-color:#405189!important;}
.fc-event.dashboard-cal-ticket,.fc-event.dashboard-cal-ticket .fc-event-dot{background-color:#299cdb!important;}
.fc-event.dashboard-cal-domain,.fc-event.dashboard-cal-domain .fc-event-dot{background-color:#f7b84b!important;}
.fc-event.dashboard-cal-license,.fc-event.dashboard-cal-license .fc-event-dot{background-color:#f06548!important;}

/* Per-type "+N tickets"/"+N taken" count badges (dashboard-calendar.js) -- the day grid
   only ever shows these, never individual event pills; hovering previews the titles. */
.dashboard-calendar-overflow{display:flex;flex-wrap:wrap;gap:2px;padding:2px;}
.dashboard-calendar-overflow-badge{border:none;font-size:.6875rem;line-height:1.4;padding:.15rem .45rem;cursor:default;}

/* Hover popover listing each matching event's title (dashboard-calendar.js) -- wider
   than Bootstrap's ~276px popover default. Each title is its own line (never wraps to a
   second line); one that's too long to fit is truncated with an ellipsis instead. */
.popover.dashboard-calendar-popover{max-width:320px;}
.popover.dashboard-calendar-popover .popover-body{font-size:.8125rem;}
.dashboard-calendar-popover-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.attachment-dropzone{border:2px dashed var(--vz-border-color);border-radius:.5rem;cursor:pointer;transition:background-color .15s,border-color .15s;}
.attachment-dropzone:hover,.attachment-dropzone.attachment-dropzone-active{background-color:rgba(var(--vz-primary-rgb),.05);border-color:var(--vz-primary);}