:root {
    --container-width: 1200px;
}

.tickets {
    font-size: 1rem;
    line-height: 1.4rem;
}

button, a.btn, .btn { font-size: inherit; }

.tickets table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; 
}

th, td {
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

th {
    background-color: var(--table-th-bg);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    color: var(--table-th-color);
}

.col-title { 
    cursor: pointer; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th.col-title {
    cursor: default;
}


tr {
    /* cursor: pointer; */
}

tr:hover {
    background-color: var(--table-row-hover-bg);
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 12px;
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
}

p { margin-bottom: 1.2rem; }

.ticket-number {  }

.status-aus { color: #757e87; border: 1px dashed;}
.status-ast { background: #52595e; color: #f8f8f8; border: 1px solid #52595e;}
.status-ope { background: #dd403b; color: #ffe5e5; border: 1px solid #dd403b;}
.status-clo { color: #24a129; border: 1px dashed; }
.status-sch { color: #9948c1; border: 1px dashed; }
.status-unr { color: #c35454; border: 1px dashed; }

.badge-user { background: #52595e; color: white;}
.badge-staff { background: #24a129; color: white;}


.clickable-user, .clickable-status {
    cursor: pointer;
}

.clickable-user:hover, .clickable-status:hover {
    text-decoration: underline;
}


.filter-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
}

.filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
}

input[type=text], select {
    background-color: transparent;
}

.filter-input,
.filter-select,
.filter-button {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    /* border: 1px solid #ccc; */
    border-radius: 6px;
    /* color: #333; */
    line-height: 1;
    box-sizing: border-box;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: #999;
}

.filter-button {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    /* background-color: #eee; */
    /* border: 1px solid #eee;     */
} 





.ticket-author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.ticket-date {
    vertical-align: middle;
}

.ticket-description {
    font-size: 1em;
    line-height: 1.5;
}

.ticket-overlay-size {
    max-width: 900px;
}

.ticket-small-table {
    width: 100%;
    font-size: 0.75em;
    line-height: 1;
}
.ticket-small-table td {
    padding: 4px 4px;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: var(--input-border-radius);
    border-top-right-radius: var(--input-border-radius);
}
.ql-container.ql-snow {
    border-bottom-left-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}