html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.my-selectbar .rz-button {
    --rz-selectbar-selected-background-color: var(--rz-warning);
    --rz-selectbar-selected-color: var(--rz-on-warning);
}

.timeline-msg-content {
    flex: 1;
    padding-right: .25rem;
    overflow-wrap: anywhere;
}

    .timeline-msg-content img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .timeline-msg-content img {
        max-height: 60vh;
        object-fit: contain;
    }

    .timeline-msg-content table {
        max-width: 100%;
    }

    .timeline-msg-content pre,
    .timeline-msg-content code {
        overflow: auto;
        max-width: 100%;
        display: block;
    }

.timeline-msg-content--grid {
    display: grid;
}

.expandable-content {
    position: relative;
}

.expandable-content--collapsed .expandable-content__body {
    max-height: var(--expandable-max-height, 10rem);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.expandable-content__toggle {
    margin-top: 0.15rem;
}

.timeline-msg-skeleton {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 1rem 0;
}

.hd-att-row-card {
    overflow: hidden;
    animation: att-item-in 0.2s ease-out;
}

.hd-att-row {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.hd-att-middle {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.hd-att-right {
    flex: 0 0 auto;
}

.hd-att-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: white;
    overflow: hidden;
}

.hd-att-thumb-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

.hd-att-thumb--sm {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 6px;
    overflow: hidden;
    border: none;
    background: transparent;
}

    .hd-att-thumb--sm .hd-att-thumb-img {
        width: 32px;
        height: 32px;
    }

.hd-att-name {
    display: block;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.hd-att-panel-card {
    padding: 0.65rem 0.9rem;
}

.hd-att-root {
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 4px; /* prevent last card's box-shadow from being clipped */
}


.hd-att-mid {
    min-width: 0;
    overflow: hidden;
}

.hd-att-line {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* === Upload zone === */
/* Background uses a translucent text-color overlay so it stays visible against
   either light or dark dialog backgrounds without theme-specific overrides. */
.hd-att-upload-zone {
    border: 2px dashed color-mix(in srgb, var(--rz-text-color) 30%, transparent);
    border-radius: var(--rz-border-radius);
    background-color: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.hd-att-upload-zone:hover {
    border-color: var(--rz-primary);
    background-color: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.hd-att-upload-zone-icon {
    font-size: 2.25rem;
    color: var(--rz-primary);
    display: block;
    transition: color 0.2s ease;
    margin-bottom: 0.25rem;
}

.hd-att-upload-zone:hover .hd-att-upload-zone-icon {
    color: var(--rz-primary-darker);
}

/* Strip RadzenUpload's own gray background + border inside the zone, and stack below text */
.hd-att-upload-zone .rz-fileupload,
.hd-att-upload-zone .rz-fileupload-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
}

/* File extension label pill */
.hd-att-ext-label {
    background: var(--rz-base-200);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Remove button — danger on hover */
.hd-att-remove-btn:hover {
    color: var(--rz-danger) !important;
    border-color: color-mix(in srgb, var(--rz-danger) 35%, transparent) !important;
}

/* === File item state accents (left border) === */
.hd-att-row-card--done {
    border-left: 2px solid var(--rz-success) !important;
}

.hd-att-row-card--error {
    border-left: 2px solid var(--rz-danger) !important;
}

.hd-att-row-card--uploading {
    border-left: 2px solid var(--rz-info) !important;
}

/* === Entry animation for file rows === */
@keyframes att-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Drop zone — wraps the hidden InputFile overlay */
.hd-att-drop-zone {
    position: relative; /* required for the absolute InputFile overlay */
}

/* Active drag-over state (toggled by JS) */
.hd-att-drop-zone--active {
    border-color: var(--rz-primary) !important;
    background-color: color-mix(in srgb, var(--rz-primary) 10%, transparent) !important;
}

.hd-att-drop-zone--active .hd-att-upload-zone-icon {
    color: var(--rz-primary-darker);
}

/* Invisible InputFile that fills the entire drop zone (click + native drop) */
.hd-att-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* =============================================
   ASSET COMPONENTS  (hd-asset- prefix)
   ============================================= */

/* Picker dialog — scrollable list area; flexes to fill dialog body, scrolls when content overflows */
.hd-asset-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px;
}

.hd-asset-picker-list > .hd-asset-picker-item + .hd-asset-picker-item {
    margin-top: 0.5rem;
}

/* Picker dialog — selectable asset row wrapper */
.hd-asset-picker-item {
    cursor: pointer;
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-primary);
    background-color: var(--rz-base-background-color);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.hd-asset-picker-item:hover {
    border-color: var(--rz-primary);
    background-color: color-mix(in srgb, var(--rz-primary) 18%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Strip RadzenCard's own border/shadow inside the picker row — wrapper owns them */
.hd-asset-picker-item .rz-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.hd-asset-card--linked > .rz-card {
    background-color: var(--rz-surface) !important;
}

/* TicketAttachmentsPanel container */
.hd-att-panel-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =============================================
   LIST PAGE LAYOUT
   Standard flex-column shell so the grid fills
   remaining viewport height even when filter/search
   cards are above it. Pair with GridStyle="height:100%"
   on the inner grid component.
   ============================================= */
.list-page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow: hidden;
}

.list-grid-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}