/* Support tickets: the round button and popup of index.jsp (scripts/cv_tickets.js, tickets.jsp)
   and the admin page mng_site_tickets.jsp. Site palette tokens only (coursevo.css :root). */

/* --- the button: rightmost in the bottom-right row. While it shows (body.cv-tk-on, set by
   cvTickets.sync), the online-users and AI buttons move one place left of their cechat.css
   places (8px / 60px); without it (guests) the row stays as it was. --- */
.cv-ticket-btn {
    right: 8px;
    background: var(--cv-mid, #2d5a8e);
}
body.cv-tk-on #ce-presence { right: 60px; }
body.cv-tk-on #ce-aibot { right: 112px; }
.cv-ticket-btn:hover, .cv-ticket-btn:focus-visible { background: var(--cv-dark, #1a3558); outline: none; box-shadow: 0 4px 12px rgba(20, 40, 70, .4); }
.cv-ticket-btn .presence-badge { background: var(--c-danger, #dc2626); }

/* the hidden attribute must win over Bootstrap's input[type=file]{display:block} and .cv-ui-btn's flex
   (file picker input, «Λήψη οθόνης» without getDisplayMedia, «Κλείσιμο αιτήματος» on a closed ticket) */
.cv-tk [hidden], .cv-tk-comp [hidden] { display: none !important; }

/* --- popup --- */
.cv-tk-panel {
    position: fixed;
    right: 8px;
    bottom: 60px;
    width: 440px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    display: none;
    flex-direction: column;
    background: var(--c-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(20, 40, 70, .28);
    overflow: hidden;
    z-index: 1052;
    font-size: 14px;
}
.cv-tk-panel.is-open { display: flex; }
.cv-tk { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cv-tk-head {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--cv-dark, #1a3558) 0%, var(--cv-mid, #2d5a8e) 100%);
    color: #fff;
}
.cv-tk-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-admin, .cv-tk-x {
    border: 0; background: rgba(255, 255, 255, .14); color: #fff; border-radius: var(--radius-pill, 999px);
    padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cv-tk-x { padding: 4px 9px; font-size: 14px; }
.cv-tk-admin:hover, .cv-tk-x:hover, .cv-tk-admin:focus-visible, .cv-tk-x:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.cv-tk-n:empty { display: none; }
.cv-tk-n {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
    border-radius: 9px; background: var(--c-danger, #dc2626); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center;
}
.cv-tk-tabs { display: flex; gap: 2px; padding: 0 8px; flex-shrink: 0; border-bottom: 2px solid var(--cv-panel-border, #c8daf0); background: var(--c-surface-2, #f8fafc); }
.cv-tk-tab {
    border: 0; background: none; padding: 8px 10px; margin-bottom: -2px;
    border-bottom: 2px solid transparent; color: #475569; font-weight: 600; font-size: 13px; cursor: pointer;
}
.cv-tk-tab:hover, .cv-tk-tab:focus-visible { color: var(--cv-dark, #1a3558); background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tk-tab.is-active { color: var(--cv-dark, #1a3558); border-bottom-color: var(--cv-mid, #2d5a8e); }
.cv-tk-tab .cv-tk-n { background: var(--cv-mid, #2d5a8e); }
.cv-tk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.cv-tk-view { display: none; }
.cv-tk-view.is-active { display: block; }
.cv-tk .cv-ui-field { margin-bottom: 10px; }
.cv-tk-cats { flex-wrap: wrap; border-radius: 12px; }
.cv-tk-cats .cv-ui-seg-opt > span { padding: 4px 10px; font-size: 12px; }
.cv-tk-ctx { font-size: 12px; margin: 4px 0 10px; }
.cv-tk-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* --- composer (popup and admin page) --- */
.cv-tk-comp .tox-tinymce { border-radius: var(--radius-md, 8px); }
.cv-tk-drop {
    margin-top: 8px; padding: 8px 10px;
    border: 1px dashed var(--cv-panel-border, #c8daf0); border-radius: var(--radius-md, 8px);
    background: var(--c-surface-2, #f8fafc); color: var(--c-muted, #6b7280); font-size: 12px;
}
.cv-tk-drop:focus-visible { outline: 2px solid var(--c-brand, #3C84BD); outline-offset: 2px; }
.cv-tk-drop.is-over { border-color: var(--cv-mid, #2d5a8e); background: var(--c-brand-softer, #f3f9fd); color: var(--cv-dark, #1a3558); }
.cv-tk-drop-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cv-tk-drop-acts .cv-ui-btn { margin: 0; }
.cv-tk-drop-hint { margin-left: auto; font-size: 11px; }
.cv-tk-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-tk-files:empty { display: none; }
.cv-tk-file {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px;
    border: 1px solid var(--c-border-soft, #f1f5f9); border-radius: var(--radius, 6px); background: #fff; font-size: 12px;
}
.cv-tk-file img { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cv-tk-file > .fa { width: 40px; text-align: center; color: var(--c-muted, #6b7280); flex-shrink: 0; }
.cv-tk-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-file small { color: var(--c-muted, #6b7280); flex-shrink: 0; }
.cv-tk-frm { border: 0; background: none; color: var(--c-muted, #6b7280); padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.cv-tk-frm:hover, .cv-tk-frm:focus-visible { color: var(--c-danger, #dc2626); background: var(--c-danger-soft, #fef2f2); outline: none; }

/* --- lists --- */
.cv-tk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-tk-item {
    display: block; width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-md, 8px); background: #fff;
}
.cv-tk-item:hover, .cv-tk-item:focus-visible { background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tk-item.is-unread { border-left: 3px solid var(--c-danger, #dc2626); }
.cv-tk-item-top { display: block; color: var(--cv-dark, #1a3558); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-item-meta { display: block; margin-top: 4px; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-dot, .cv-tkm-dot {
    display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
    background: var(--c-danger, #dc2626); vertical-align: middle;
}
.cv-tk-empty { list-style: none; padding: 18px 8px; text-align: center; color: var(--c-muted, #6b7280); }

/* --- one ticket --- */
.cv-tk-back { border: 0; background: none; padding: 0 0 8px; color: var(--cv-mid, #2d5a8e); font-weight: 600; cursor: pointer; }
.cv-tk-back:hover, .cv-tk-back:focus-visible { color: var(--cv-dark, #1a3558); outline: none; text-decoration: underline; }
.cv-tk-thead { margin-bottom: 8px; }
.cv-tk-tsubj { color: var(--cv-dark, #1a3558); font-weight: 600; word-break: break-word; }
.cv-tk-tmeta { margin-top: 4px; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk .cv-tk-thread { max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.cv-tk-thread { display: flex; flex-direction: column; gap: 8px; }
.cv-tk-msg {
    padding: 8px 10px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--c-border-soft, #f1f5f9); background: var(--c-surface-2, #f8fafc);
}
.cv-tk-msg.is-staff { background: var(--c-brand-softer, #f3f9fd); border-color: var(--cv-panel-border, #c8daf0); }
.cv-tk-msg.is-internal { background: var(--c-warning-soft, #fffbeb); border-color: #fde68a; }
.cv-tk-msg header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; font-size: 13px; }
.cv-tk-msg header strong { color: var(--cv-dark, #1a3558); }
.cv-tk-msg header time { margin-left: auto; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-msgbody { word-break: break-word; }
.cv-tk-msgbody p { margin: 0 0 6px; }
.cv-tk-msgbody p:last-child { margin-bottom: 0; }
.cv-tk-msgbody ul, .cv-tk-msgbody ol { margin: 0 0 6px; padding-left: 20px; }
.cv-tk-att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cv-tk-thumb { display: block; border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: 6px; overflow: hidden; background: #fff; }
.cv-tk-thumb img { display: block; width: 120px; height: 80px; object-fit: cover; }
.cv-tk-thumb:hover, .cv-tk-thumb:focus-visible { border-color: var(--cv-mid, #2d5a8e); outline: none; }
.cv-tk-filelink {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; max-width: 100%;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px); background: #fff; font-size: 12px;
}
.cv-tk-filelink span { color: var(--c-muted, #6b7280); }
.cv-tk-event { text-align: center; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-event span { margin-left: 4px; }
.cv-tk-reply { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cv-panel-border, #c8daf0); }
.cv-tk-reply .cv-tk-actions { margin-top: 8px; }
.cv-tk-closednote { margin: 0 0 8px; }

@media (max-width: 600px) {
    .cv-tk-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: none; border-radius: 0; }
    .cv-tk .cv-tk-thread { max-height: none; }
}

/* --- admin page (mng_site_tickets.jsp) --- */
.cv-tkm-search { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.cv-tkm-search .cv-ui-input { width: 240px; max-width: 50vw; }
.cv-tkm-table td { vertical-align: top; }
.cv-tkm-row { cursor: pointer; }
.cv-tkm-row:hover, .cv-tkm-row:focus-visible { background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tkm-row.is-unread .cv-tkm-subj strong { color: var(--cv-dark, #1a3558); }
.cv-tkm-row:not(.is-unread) .cv-tkm-subj strong { font-weight: 600; }
.cv-tkm-id { white-space: nowrap; color: var(--c-muted, #6b7280); }
.cv-tkm-clip, .cv-tkm-assignee, .cv-tkm-mail { color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tkm-clip { margin-left: 6px; white-space: nowrap; }
.cv-tkm-date { white-space: nowrap; }
.cv-tkm-prio--1 { color: var(--c-muted, #6b7280); }
.cv-tkm-prio--3 { color: var(--c-danger, #dc2626); font-weight: 700; }
.cv-tkm-foot { padding: 8px 16px; }
.cv-tkm-hid { color: var(--c-muted, #6b7280); }
.cv-tkm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cv-tkm-side .cv-ui-card { margin-bottom: 16px; }
.cv-tkm-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
.cv-tkm-facts dt { color: var(--c-muted, #6b7280); font-weight: 600; }
.cv-tkm-facts dd { margin: 0; word-break: break-word; }
.cv-tkm-code { font-family: Consolas, Menlo, monospace; font-size: 12px; }
.cv-tkm-muted { color: var(--c-muted, #6b7280); }
.cv-tkm-replyopts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cv-tkm-after { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; }
.cv-tkm-after .cv-ui-select { width: auto; }
@media (max-width: 900px) {
    .cv-tkm-grid { grid-template-columns: minmax(0, 1fr); }
    .cv-tkm-search { margin-left: 0; width: 100%; }
    .cv-tkm-search .cv-ui-input { flex: 1; width: auto; max-width: none; }
}