/*
 * Cases queue (Case Views tabs, SLA counts, Next Up, Response meter, groups) and the
 * Case SLA / Case Views admin pages. Colours are the Staff Hub palette already used in
 * catawesome.css; weights stay at 500/600.
 */

/* SLA state tones, shared by squares, meters and badges. */
[data-state="breaching"] { --cq-tone: var(--state-danger-text, #ad4846); --cq-ink: var(--state-danger-text, #ad4846); }
[data-state="dueToday"] { --cq-tone: var(--brand-warning, #e4a133); --cq-ink: #b88937; }
[data-state="scheduled"] { --cq-tone: #a4a4a4; --cq-ink: var(--text-gray-color); }
[data-state="paused"] { --cq-tone: #cfd4df; --cq-ink: var(--text-gray-color); }

.cq-sq { display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: var(--cq-tone); vertical-align: middle; }
.cq-sq-sm { width: 8px; height: 8px; }

/* Tab bar */
.cq-tabs-container { margin: var(--sh-page-y, 16px) 0 16px; }
.cq-tabs { display: flex; align-items: center; min-height: 48px; padding: 6px 8px; margin: 0; overflow: hidden; border-radius: 10px; }

/* Segmented control: grey track hugging the tabs, the selected one lifted out in white. */
.cq-tabs-track { display: inline-flex; flex: 0 1 auto; min-width: 0; gap: 2px; padding: 3px; overflow-x: auto; background: var(--select-item-bg); border-radius: 8px; }
.cq-ranking-button { flex: 0 0 auto; margin-left: auto; }
.cq-tab { flex: 0 0 auto; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-gray-color); font-size: 13px; font-weight: 400; white-space: nowrap; transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.cq-tab:hover { color: var(--text-color); }
.cq-tab.active { background: var(--panel-bg); color: var(--text-color); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Next Up */
.cq-next-up-container:empty { display: none; }
.cq-next-up { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 14px; margin-bottom: 16px; border: 1px solid var(--brand-warning, #e4a133); border-radius: 10px; }
.cq-next-up-label { flex: 0 0 128px; }
.cq-next-up-title { font-weight: 500; }
.cq-next-up-meta { font-size: 12px; color: var(--text-gray-color); }
.cq-next-up-body { flex: 1 1 320px; min-width: 0; }
.cq-next-up-head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cq-next-up-name { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cq-next-up-sub { font-size: 13px; color: var(--text-gray-color); }
.cq-next-up-badges { display: flex; gap: 6px; align-items: center; }
.cq-next-up-meter { flex: 0 0 120px; }
.cq-next-up-actions { display: flex; gap: 6px; align-items: center; }
.cq-number { font-weight: 500; }

/* Counts toolbar, joined to the list panel below it. */
.cq-list-panel { position: relative; border-radius: 10px; }
.cq-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 10px; background: var(--panel-bg); border: 1px solid var(--panel-default-border-color); border-bottom: 0; border-radius: 10px 10px 0 0; }
.cq-toolbar-counts, .cq-toolbar-right { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Plain strip on the panel; only the selected count gets a grey pill. */
.cq-toolbar-counts { gap: 2px; }
.cq-count { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 400; transition: background-color .15s ease-in-out; }
.cq-count:hover, .cq-count:focus { background: transparent; box-shadow: none; }
/* !important beats the theme's .btn-text.active underline. */
.cq-count.active, .cq-count.active:hover, .cq-count.active:focus { background: var(--select-item-bg); color: var(--text-color); box-shadow: none; border: 0 !important; }
.cq-count-n { font-size: 12px; font-weight: 400; color: var(--text-muted-color); }
.cq-range { font-size: 13px; }
.cq-range:empty { display: none; }

/* Flat lists: core's pagination moves up into the toolbar row (room is reserved on the right). */
.cq-list-panel.cq-has-pagination .cq-toolbar-right { margin-right: 200px; }
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container { position: absolute; top: 6px; right: 10px; display: flex; gap: 4px; align-items: center; min-height: 36px; margin: 0; }
/* The column-settings caret sits before the range, as in the design. */
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container > .actions { order: -2; }
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container > .settings-container { order: -1; float: none !important; }
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container .pagination { display: flex; align-items: center; }
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container .pagination-btn-middle { padding-left: 6px; padding-right: 6px; }
.cq-list-panel.cq-has-pagination > .list-container > .list-buttons-container .pagination-btn { min-width: 0; width: 28px; padding-left: 0; padding-right: 0; }

/* Refresh stands apart from Create, as in the design. */
#main > .page-header .header-buttons > [data-name="refreshQueue"] { min-width: 0; margin-right: 8px; padding-left: 10px; padding-right: 10px; border-radius: var(--border-radius) !important; }
#main > .page-header .header-buttons > [data-name="refreshQueue"] + .btn { border-top-left-radius: var(--border-radius) !important; border-bottom-left-radius: var(--border-radius) !important; }
.cq-list-panel .list-container > .list-container, .cq-list-panel .list-container .list { border-top-left-radius: 0; border-top-right-radius: 0; }
.cq-list-panel .list-container .list { border-bottom-left-radius: var(--panel-border-radius); border-bottom-right-radius: var(--panel-border-radius); }
.cq-group:not(:last-child) .cq-group-body > .list { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cq-scope-note { margin-top: 8px; font-size: 12px; color: var(--text-gray-color); }

.cq-shared-list-header { overflow-x: auto; }
.cq-shared-list-header > table { width: 100%; min-width: 0; margin: 0; table-layout: fixed; }
.cq-shared-list-header > table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: var(--6px) var(--8px);
	background: var(--panel-bg);
	font-size: var(--13px);
	border-top: 1px solid var(--default-border-color) !important;
}

/* The rank, Case # and Title columns stay fixed; remaining fields share the panel width. */
.cq-list-panel .list { overflow-x: auto; }
body[data-navbar="side"] #main .cq-list-panel .list > table { width: 100%; min-width: 0; table-layout: fixed; }

/* Rows */
.cq-list-panel .cell[data-name="slaRank"] { vertical-align: middle; }
.cq-rank { display: flex; gap: 6px; align-items: center; justify-content: center; }
.list-row { cursor: pointer; }
.cq-list-panel .cq-inline-select { height: 22px; max-width: 170px; padding: 0 6px; }
.cq-assigned-avatars { display: flex; align-items: center; gap: 1px; min-width: 0; white-space: nowrap; }
.cq-assigned-avatar { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.cq-assigned-avatar img { display: block; margin-right: 0 !important; border-radius: 50%; }
.cq-assigned-more { flex: 0 0 auto; color: var(--text-muted-color); font-size: 11px; line-height: 18px; }

/* Response cell */
.cq-response { font-size: 12px; line-height: 1.3; }
.cq-response-elapsed.is-over { color: var(--cq-ink); font-weight: 500; }
.cq-meter { height: 3px; margin-top: 3px; background: var(--default-border-color); border-radius: 2px; overflow: hidden; }
.cq-meter > span { display: block; height: 100%; background: var(--cq-tone); }
.cq-with-client { font-size: 12px; color: #a8670f; }
.cq-with-client .fas { font-size: 9px; }
html.dark .cq-with-client { color: #e4a133; }
.cq-response-since { font-size: 11px; }
.cq-response-stopped { font-size: 12px; }

/* State badge (tinted, never solid) */
.cq-state-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--cq-ink); background: var(--table-bg-accent); }
.cq-with-client-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #a8670f; background: rgba(228, 161, 51, .12); }

/* Groups */
.cq-group-header { display: flex; gap: 8px; align-items: baseline; padding: 8px 14px 8px 12px; background: var(--panel-bg); cursor: pointer; user-select: none; }
.cq-group-chevron { align-self: center; width: 10px; font-size: 10px; color: var(--text-muted-color); }
.cq-group-title { font-weight: 500; }
.cq-group-count { font-size: 12px; color: var(--text-gray-color); }
.cq-group-hint { font-size: 12px; color: var(--text-muted-color); }
.cq-group[data-group="waiting"] .cq-group-header { border-bottom: 1px solid var(--default-border-color); }
.cq-group[data-group="waiting"] .cq-group-body > .list > table > tbody > tr:first-child > td { border-top: 0; }
.cq-group[data-group="progress"] .cq-group-header { border-top: 1px solid var(--default-border-color); }
.cq-group .list > table > thead { visibility: collapse; }
.cq-group-body > .no-data { display: flex; align-items: center; min-height: 35px; padding: var(--6px) var(--8px); background: var(--table-bg); }
.cq-group:last-child .cq-group-body > .no-data { border-bottom-left-radius: var(--panel-border-radius); border-bottom-right-radius: var(--panel-border-radius); }

/* Case Details and ranking use the same centered modal treatment as Set Priority. */
.modal.cq-details-dialog .modal-dialog,
.modal.cq-ranking-dialog .modal-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100vh - 32px);
	margin: 0 !important;
	overflow: hidden;
	background-color: #fcfcfc;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	border-radius: var(--10px);
}
.modal.cq-details-dialog .modal-content,
.modal.cq-ranking-dialog .modal-content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
	overflow: hidden;
}
.modal.cq-details-dialog .modal-body,
.modal.cq-ranking-dialog .modal-body {
	min-height: 0;
	overflow-y: auto;
}
.modal.cq-details-dialog .modal-dialog { width: 620px; max-width: calc(100vw - 32px); }
.modal.cq-ranking-dialog .modal-dialog { width: 1100px; max-width: calc(100vw - 32px); }
.cq-details-brief { font-size: 21px; font-weight: 500; }
.cq-details-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--default-border-color); }
.cq-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.cq-details-label { font-size: 13px; color: var(--text-muted-color); }
.cq-details-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12px; color: var(--text-gray-color); }
.cq-ranking-heading { margin: 16px 0 2px; font-size: 15px; font-weight: 500; color: var(--text-gray-color); }
.cq-ranking-sub { margin-bottom: 6px; font-size: 12px; color: var(--text-gray-color); }
.cq-ranking-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--default-border-color); }
.cq-ranking-row.is-numbered { grid-template-columns: 24px 1fr; }
.cq-ranking-note { margin-top: 12px; font-size: 12px; color: var(--text-gray-color); }

/* Admin pages */
.cq-admin { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cq-admin-main { flex: 1 1 560px; max-width: 960px; min-width: 0; }
.cq-admin-side { flex: 0 1 360px; min-width: 280px; }
.cq-admin .panel { border-radius: 10px; }
.cq-note { margin-top: 8px; font-size: 12px; color: var(--text-gray-color); }
.cq-label { margin-bottom: 4px; font-size: 13px; color: var(--text-muted-color); }
.cq-target-grid { display: grid; grid-template-columns: 110px minmax(0, 160px) minmax(0, 200px); gap: 16px; align-items: center; }
.cq-target-grid > .cq-head { font-size: 12px; color: var(--text-muted-color); }
.cq-target-row { display: contents; }
.cq-check-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cq-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }
.cq-check { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; cursor: pointer; }
.cq-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.cq-holiday-row { display: grid; grid-template-columns: 120px 1fr; padding: 5px 0; border-top: 1px solid var(--default-border-color); }
.cq-holiday-row > :last-child { color: var(--text-gray-color); }
.cq-invalid { border-color: var(--state-danger-text, #ad4846) !important; }
.cq-views-grid .cq-views-row { display: grid; grid-template-columns: 64px minmax(180px, 1.4fr) 120px minmax(200px, 1.6fr) minmax(140px, 1fr) 76px 64px 64px; gap: 12px; align-items: center; min-width: 1040px; padding: 6px 14px; border-top: 1px solid var(--default-border-color); }
.cq-views-grid .cq-views-row.is-head { font-size: 12px; color: var(--text-muted-color); border-top: 0; }
.cq-views-grid { overflow-x: auto; }
.cq-views-shows, .cq-views-visible { font-size: 13px; }
.cq-preview-as { display: flex; gap: 8px; align-items: center; }
.cq-preview-as > select { width: auto; }
.cq-icon-btn { padding: 2px 4px; border: 0; background: none; font-size: 11px; color: var(--text-muted-color); }
.cq-icon-btn:hover:not(:disabled) { color: var(--text-color); }
.cq-icon-btn:disabled { opacity: .4; }
.cq-preview-tabs { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--default-border-color); }
.cq-preview-tabs > span { white-space: nowrap; color: var(--text-gray-color); }
.cq-preview-tabs > span:first-child { color: var(--text-color); font-weight: 500; }