:root {
    --via-blue: #315efb;
    --via-ink: #18202b;
    --via-muted: #6d7786;
    --via-line: #e5e9ef;
}

body {
    color: var(--via-ink);
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 13px;
}

.navbar { min-height: 45px; padding-block: .28rem; }
.navbar-brand { font-size: .93rem; letter-spacing: -.02em; }
.navbar .nav-link { font-size: .78rem; padding-block: .35rem; }
.navbar .btn-sm { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .48rem; --bs-btn-font-size: .72rem; }

.login-wrap { min-height: calc(100vh - 3rem); }
.login-card { width: min(100%, 430px); }
.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, #315efb, #7a4df4);
    border-radius: 18px;
    color: #fff;
    display: grid;
    font-weight: 800;
    height: 58px;
    letter-spacing: .04em;
    place-items: center;
    width: 58px;
}

.tickets-page-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; }
.stat-card {
    background: #fff;
    border-left: 3px solid #8b95a5;
    border-radius: .55rem;
    box-shadow: 0 .15rem .65rem rgba(24, 32, 43, .05);
    height: 100%;
    padding: .55rem .75rem;
}
.stat-card span { color: var(--via-muted); display: block; font-size: .68rem; font-weight: 600; }
.stat-card strong { display: block; font-size: 1.15rem; line-height: 1.1; margin-top: .12rem; }
.stat-primary { border-color: #315efb; }
.stat-warning { border-color: #f4a000; }
.stat-danger { border-color: #df3b57; }

.tickets-filter-card,
.tickets-list-card { border-radius: .55rem; }
.tickets-filter-card .card-body { padding: .6rem .75rem; }
.tickets-filter-card .form-label {
    color: #626d7b;
    font-size: .66rem;
    letter-spacing: .02em;
    margin-bottom: .18rem;
    text-transform: uppercase;
}
.tickets-filter-card .form-control,
.tickets-filter-card .form-select,
.tickets-filter-card .btn {
    font-size: .76rem;
    min-height: 31px;
    padding: .28rem .5rem;
}

.tickets-table { font-size: .74rem; table-layout: fixed; }
.tickets-table th {
    background: #f7f8fa;
    border-bottom-color: #dfe4eb;
    color: #727c89;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .035em;
    padding: .42rem .45rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.tickets-table td { border-color: #edf0f4; padding: .42rem .45rem; vertical-align: middle; }
.ticket-col-toggle { width: 30px; }
.ticket-col-id { width: 148px; }
.ticket-col-user { width: 220px; }
.ticket-col-preview { width: auto; }
.ticket-col-manager { width: 155px; }
.ticket-col-date { width: 145px; }
.ticket-col-count { width: 65px; }

.ticket-row { cursor: pointer; transition: background-color .12s ease; }
.ticket-row:hover > td,
.ticket-row:focus > td { background-color: #f4f7ff; }
.ticket-row:focus { outline: 0; }
.ticket-row-open > td { background-color: #edf3ff !important; border-bottom-color: #dce5f6; }
.ticket-outside { opacity: .66; }
.ticket-toggle-cell { color: #788394; text-align: center; }
.ticket-toggle-icon { display: inline-block; font-size: .68rem; transition: transform .15s ease; }
.ticket-row-open .ticket-toggle-icon { transform: rotate(90deg); }
.ticket-number,
.ticket-user-name { font-weight: 650; }
.ticket-subline { color: #89919d; font-size: .62rem; line-height: 1.25; margin-top: .08rem; }
.ticket-preview { overflow: hidden; }
.ticket-preview > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-sort-link { color: inherit; text-decoration: none; }
.ticket-sort-link:hover { color: var(--via-blue); }
.ticket-opened-at { font-variant-numeric: tabular-nums; }

.ticket-detail-row > td { background: #f8faff; padding: 0; }
.tickets-table.table-hover > tbody > tr.ticket-detail-row:hover > * {
    --bs-table-bg-state: transparent;
    --bs-table-color-state: var(--bs-table-color);
    background-color: #f8faff;
    box-shadow: none;
}
.ticket-detail-content { border-bottom: 1px solid #dfe5ee; padding: .75rem .85rem .9rem 2.3rem; }
.ticket-detail-loading { color: var(--via-muted); padding: .8rem; }
.inline-ticket { max-width: 1320px; }
.inline-ticket-header {
    align-items: center;
    border-bottom: 1px solid var(--via-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: .55rem;
}
.inline-ticket-header .btn-sm { --bs-btn-padding-y: .16rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .66rem; }
.inline-ticket-layout {
    display: grid;
    gap: .9rem;
    grid-template-columns: 215px minmax(0, 1fr);
    padding-top: .7rem;
}
.inline-ticket-meta {
    border-right: 1px solid var(--via-line);
    padding-right: .85rem;
}
.inline-ticket-meta dl { margin: 0; }
.inline-ticket-meta dt {
    color: #89919d;
    font-size: .59rem;
    letter-spacing: .035em;
    margin-top: .5rem;
    text-transform: uppercase;
}
.inline-ticket-meta dt:first-child { margin-top: 0; }
.inline-ticket-meta dd { font-size: .7rem; margin-bottom: 0; overflow-wrap: anywhere; }
.inline-timeline { max-width: 980px; min-width: 0; }

.ticket-sidebar { top: 1.5rem; }
.ticket-meta dt {
    color: var(--via-muted);
    font-size: .65rem;
    letter-spacing: .035em;
    margin-top: .7rem;
    text-transform: uppercase;
}
.ticket-meta dt:first-child { margin-top: 0; }
.ticket-meta dd { margin-bottom: 0; overflow-wrap: anywhere; }
.timeline { max-width: 980px; }
.message-card {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: .55rem;
    box-shadow: 0 .12rem .45rem rgba(24, 32, 43, .035);
    margin-bottom: .55rem;
    padding: .55rem .7rem;
}
.message-card header {
    align-items: baseline;
    display: flex;
    font-size: .68rem;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .28rem;
}
.message-card header time { color: #8a929e; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.message-student { border-left: 3px solid #315efb; }
.message-manager { background: #fbfcfe; border-left: 3px solid #8b95a5; }
.message-role {
    color: #8b94a1;
    font-size: .57rem;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.message-text { font-size: .72rem; line-height: 1.42; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-transport { color: #8a929e; font-size: .61rem; margin-top: .3rem; }
.timeline-event {
    align-items: center;
    color: #667181;
    display: flex;
    font-size: .66rem;
    gap: .55rem;
    margin: .42rem 0 .55rem .45rem;
}
.event-icon {
    background: #e9edf5;
    border-radius: 50%;
    color: #49566a;
    display: grid;
    flex: 0 0 1.45rem;
    height: 1.45rem;
    place-items: center;
    width: 1.45rem;
}
.attachments { display: flex; flex-wrap: wrap; gap: .3rem; }
.attachments .btn-sm { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .62rem; }

@media (max-width: 991.98px) {
    .tickets-table { min-width: 980px; }
    .inline-ticket-layout { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    main.container-fluid { padding-left: .65rem !important; padding-right: .65rem !important; }
    .ticket-detail-content { padding-left: .75rem; }
    .inline-ticket-header { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .inline-ticket-layout { grid-template-columns: 1fr; }
    .inline-ticket-meta { border-bottom: 1px solid var(--via-line); border-right: 0; padding-bottom: .65rem; padding-right: 0; }
}