/* Omega QCO register — approved layout (option 06). */

.qco-register {
	--qco-card:#FFFFFF; --qco-ink:#131C26; --qco-muted:#6B7785;
	--qco-rule:#DDE1E4; --qco-rule-soft:#ECEEF0; --qco-seal:#304ddb; --qco-band:#F4F6F7;
	--qco-ok:#1F6B45; --qco-ok-bg:#E6F2EB; --qco-amend:#1B4E8F; --qco-amend-bg:#E7EEF7;
	--qco-warn:#8A5A11; --qco-warn-bg:#FAF0DE; --qco-dead:#6B7785; --qco-dead-bg:#ECEEF0;
	--qco-soon:#6D3A86; --qco-soon-bg:#F1E9F5;
	--qco-trefc:#0F6B66; --qco-trefc-bg:#E3F2F0;
	--qco-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--qco-header-offset: 75px;

	color: var(--qco-ink);
	font-size: 15px;
	line-height: 1.5;
	padding-top: var(--qco-header-offset);
}

.qco-register .qco-scroller { scroll-margin-top: calc(var(--qco-header-offset) + 12px); }
.qco-register *, .qco-register *::before, .qco-register *::after { box-sizing: border-box; }

/* Heading */
.qco-register .qco-heading { text-align: center; margin-bottom: 24px; }
.qco-register .qco-heading-title {
	font-size: 30px; font-weight: 800; color: #000000; margin: 0 0 10px;
	position: relative; display: inline-block; padding-bottom: 12px;
}
.qco-register .qco-heading-title::after {
	content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 60px; height: 3px; background: #000000; border-radius: 10px;
}
.qco-register .qco-heading-sub { font-size: 15px; color: var(--qco-muted); max-width: 620px; margin: 0 auto; }

/* controls */
.qco-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 24px; }
.qco-search { position: relative; width: 100%; max-width: 520px; }
.qco-search input {
	width: 100%; font: inherit; font-size: 15px; color: var(--qco-ink); background: var(--qco-card);
	border: 1px solid var(--qco-rule); border-radius: 30px; padding: 13px 18px 13px 42px;
}
.qco-search input:focus-visible { outline: none; border-color: var(--qco-seal); }
.qco-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--qco-muted); }
.qco-count { font-size: 13px; color: var(--qco-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }

/* status chips / filters */
.qco-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-bottom: 16px; }
.qco-filterlabel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--qco-muted); }
.qco-legend { display: flex; flex-wrap: wrap; gap: 7px; }

.qco-chip {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 3px;
	white-space: nowrap; line-height: 1.5;
}
.qco-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.qco-chip.c-force { color: var(--qco-ok);    background: var(--qco-ok-bg); }
.qco-chip.c-amend { color: var(--qco-amend); background: var(--qco-amend-bg); }
.qco-chip.c-susp  { color: var(--qco-warn);  background: var(--qco-warn-bg); }
.qco-chip.c-resc  { color: var(--qco-dead);  background: var(--qco-dead-bg); }
.qco-chip.c-soon  { color: var(--qco-soon);  background: var(--qco-soon-bg); }
.qco-chip.c-trefc { color: var(--qco-trefc); background: var(--qco-trefc-bg); }

button.qco-chip { border: 1px solid transparent; cursor: pointer; font-family: inherit; padding: 4px 9px; }
button.qco-chip:hover { border-color: currentColor; }
button.qco-chip:focus-visible { outline: 2px solid var(--qco-seal); outline-offset: 2px; }
button.qco-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; border-color: currentColor; }
button.qco-chip .n { font-variant-numeric: tabular-nums; opacity: .65; }
button.qco-chip[disabled] { opacity: .38; cursor: default; }
button.qco-chip[disabled]:hover { border-color: transparent; }

.qco-clear {
	background: none; border: 0; cursor: pointer; color: var(--qco-seal);
	font-size: 11.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; padding: 3px 4px;
}
.qco-clear:focus-visible { outline: 2px solid var(--qco-seal); outline-offset: 2px; border-radius: 3px; }

/* table */
.qco-scroller { overflow-x: auto; border: 1px solid var(--qco-rule); border-radius: 5px; background: var(--qco-card); }
.qco-table { width: 100%; border-collapse: collapse; min-width: 1000px; margin: 0; table-layout: fixed; }
.qco-table thead th {
	text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
	color: var(--qco-muted); padding: 12px 20px; background: var(--qco-band);
	border-bottom: 1px solid var(--qco-rule); white-space: nowrap;
}
.qco-table .col-sno { width: 56px; }
.qco-table .col-product { width: auto; }
.qco-table .col-is { width: 220px; }
.qco-table .col-date { width: 128px; }
.qco-table .col-status { width: 132px; }
.qco-table .col-dl { width: 300px; }

.qco-table tbody { border-bottom: 1px solid var(--qco-rule); }
.qco-table tbody:last-of-type { border-bottom: 0; }
.qco-table tbody[hidden] { display: none; }

.qco-register .qco-table tbody tr,
.qco-register .qco-table tbody td { background-color: transparent; background-image: none; }

.qco-table td { padding: 0 15px; vertical-align: top; font-size: 14.5px; border: 0; }
.qco-table td.sno {
	font-family: var(--qco-mono); font-variant-numeric: tabular-nums;
	color: var(--qco-muted); font-size: 13px; border-left: 3px solid transparent;
	padding: 13px 15px;
}
.qco-table tbody:hover td.sno { border-left-color: var(--qco-seal); }
/* .qco-table td.date { font-family: var(--qco-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qco-table td.status { white-space: nowrap; } */
.qco-table tbody tr:first-child td { border-top: 0; }

.qco-table td.dl a {
	color: var(--qco-seal); text-decoration: none; font-weight: 550;
	display: inline-flex; gap: 7px; align-items: flex-start; line-height: 1.4; box-shadow: none;
}
.qco-table td.dl a:hover { text-decoration: underline; text-underline-offset: 2px; }
.qco-table td.dl a:focus-visible { outline: 2px solid var(--qco-seal); outline-offset: 2px; border-radius: 2px; }
.qco-table td.dl svg { flex: none; margin-top: 2px; }
.qco-table td.dl .kind {
	display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--qco-muted); font-weight: 700; margin-bottom: 3px;
}
.qco-table td.dl .missing { color: var(--qco-muted); font-style: italic; }

.qco-empty { padding: 44px 16px; text-align: center; color: var(--qco-muted); font-size: 14.5px; margin: 0; }
.qco-empty[hidden] { display: none; }

/* Category header row */
.qco-table tbody.qco-category-head td {
	background: #eef2ff; border-top: 1px solid var(--qco-rule); border-bottom: 1px solid var(--qco-rule);
	padding: 12px 15px; font-size: 14px;
}
.qco-table tbody.qco-category-head tr:first-child td { border-top: 0; }
.qco-cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--qco-seal); margin-right: 10px; vertical-align: middle; }
.qco-cat-name { font-weight: 700; color: var(--qco-seal); }
.qco-cat-count {
	float: right; font-size: 12px; font-weight: 700; color: var(--qco-seal);
	background: #fff; border: 1px solid #dbe4ff; padding: 3px 12px; border-radius: 20px;
}



/* Combined Product Name + IS Number — paired rows, always aligned */
.qco-table td.product-is { padding: 0; }
.pi-list { display: flex; flex-direction: column; }
.pi-row {
	display: grid; grid-template-columns: 1fr 220px; gap: 48px; align-items: start; padding: 13px 20px;
}

/* Combined Date + Status + Download — single grid row per notification, always in sync */
.qco-table td.notif-cols { padding: 0; }

.notif-list { display: flex; flex-direction: column; }

.notif-row {
	display: grid;
	grid-template-columns: 128px 132px 300px;
	align-items: start;
	padding: 13px 0;
}

.notif-row:not(:last-child) { border-bottom: 1px dashed var(--qco-rule-soft); }

.nf-date {
	font-family: var(--qco-mono); font-size: 13.5px; font-variant-numeric: tabular-nums;
	white-space: nowrap; padding: 0 15px;
}

.nf-status { white-space: nowrap; padding: 0 15px; }

.nf-dl { padding: 0 15px; }

.nf-dl a {
	color: var(--qco-seal); text-decoration: none; font-weight: 550;
	display: inline-flex; gap: 7px; align-items: flex-start; line-height: 1.4; box-shadow: none;
}
.nf-dl a:hover { text-decoration: underline; text-underline-offset: 2px; }
.nf-dl a:focus-visible { outline: 2px solid var(--qco-seal); outline-offset: 2px; border-radius: 2px; }
.nf-dl svg { flex: none; margin-top: 2px; }
.nf-dl .kind {
	display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--qco-muted); font-weight: 700; margin-bottom: 3px;
}
.nf-dl .missing { color: var(--qco-muted); font-style: italic; }

.pi-row:not(:last-child) { border-bottom: 1px dashed var(--qco-rule-soft); }
.pi-name {
	font-weight: 600; font-size: 14.5px; color: var(--qco-ink); line-height: 1.4;
	position: relative;
	padding-left: 16px;
}
.pi-name::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--qco-seal);
	font-weight: 700;
}
.pi-is { font-family: var(--qco-mono); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.4; color: var(--qco-ink); }
.qco-table td.product-is .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--qco-muted); margin-top: 3px; padding: 0 20px 13px; }



/* pager */
.qco-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 20px; }
.qco-pager button {
	min-width: 36px; height: 36px; padding: 0 11px; background: var(--qco-card); color: var(--qco-ink);
	border: 1px solid var(--qco-rule); border-radius: 4px; font-size: 13.5px; font-weight: 600;
	font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit;
}
.qco-pager button:hover:not(:disabled) { border-color: var(--qco-seal); color: var(--qco-seal); }
.qco-pager button[aria-current="page"] { background: var(--qco-seal); border-color: var(--qco-seal); color: #fff; }
.qco-pager button:disabled { opacity: .4; cursor: default; }
.qco-pager button:focus-visible { outline: 2px solid var(--qco-seal); outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.qco-table .col-is { width: 160px; }
	.pi-row { grid-template-columns: 1fr 160px; gap: 24px; padding: 13px 16px; }
	.qco-table thead th { padding: 12px 16px; }
	.qco-table .col-dl { width: 240px; }
	.notif-row { grid-template-columns: 110px 110px 1fr; }
}

@media (max-width: 900px) {
	.pi-row { grid-template-columns: 1fr; gap: 4px; }
	.pi-is { font-size: 12.5px; color: var(--qco-muted); }
}

@media (max-width: 760px) {
	.qco-scroller { border: 0; background: transparent; overflow-x: visible; }
	.qco-table, .qco-table tbody, .qco-table tr, .qco-table td { display: block; width: 100%; }
	.qco-table { min-width: 0; table-layout: auto; }
	.qco-table thead { display: none; }

	.qco-register .qco-table tbody {
		background-color: var(--qco-card); border: 1px solid var(--qco-rule);
		border-radius: 5px; margin-bottom: 13px; padding: 4px 0;
	}

	.qco-table td { padding: 7px 15px; border-top: 0 !important; }
	.qco-table td.sno { border-left: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 0; }
	.qco-table td.sno::before { content: "Entry "; }
	

	.qco-table td.product-is { padding: 7px 15px; }
	.pi-row { padding: 8px 0; grid-template-columns: 1fr; gap: 4px; }
	.pi-name { font-size: 16.5px; }
	.pi-is { font-size: 12.5px; }

	.qco-table td.notif-cols { padding: 7px 15px; }
	.notif-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 10px 0;
	}
	.nf-date, .nf-status, .nf-dl { padding: 0; }

	.nf-date::before, .nf-status::before, .nf-dl::before {
		display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
		color: var(--qco-muted); font-weight: 700; margin-bottom: 3px;
	}
	.nf-date::before { content: "Issue date"; }
	.nf-status::before { content: "Status"; }
	.nf-dl::before { content: "Download"; }
}

@media (max-width: 420px) {
	.qco-table td { padding: 6px 12px; }
	.qco-table td.product-is { padding: 6px 12px; }
	.pi-name { font-size: 15px; }
	.qco-register .qco-heading-title { font-size: 24px; }
}