/* ITSM Helpdesk: customer portal. Uses CSS variables so themes can override. */
.itsm-portal {
	--itsm-ink: #1d2327;
	--itsm-muted: #646970;
	--itsm-line: #dcdcde;
	--itsm-bg: #f6f7f7;
	--itsm-accent: #2b5fd9;
	--itsm-accent-ink: #fff;
	--itsm-radius: 8px;
	color: var(--itsm-ink);
	max-width: 880px;
	margin: 0 auto;
}
.itsm-portal * { box-sizing: border-box; }
.itsm-muted { color: var(--itsm-muted); font-size: .875em; }

.itsm-nav { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--itsm-line); }
.itsm-nav a { padding: .6rem 1rem; text-decoration: none; border-bottom: 2px solid transparent; color: var(--itsm-muted); }
.itsm-nav a.is-active { color: var(--itsm-ink); border-bottom-color: var(--itsm-accent); font-weight: 600; }

.itsm-tabs { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; gap: .5rem; }
.itsm-tabs a { display: inline-block; padding: .3rem .8rem; border-radius: 999px; text-decoration: none; background: var(--itsm-bg); color: var(--itsm-muted); }
.itsm-tabs a.is-active { background: var(--itsm-accent); color: var(--itsm-accent-ink); }

.itsm-form p { margin: 0 0 1rem; }
.itsm-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.itsm-form input[type="text"], .itsm-form input[type="email"], .itsm-form input[type="tel"], .itsm-form select, .itsm-form textarea {
	width: 100%; padding: .6rem .7rem; border: 1px solid var(--itsm-line); border-radius: 6px; font: inherit; background: #fff;
}
.itsm-form input:focus, .itsm-form select:focus, .itsm-form textarea:focus { outline: 2px solid var(--itsm-accent); outline-offset: 1px; }
.itsm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .itsm-row { grid-template-columns: 1fr; } }

/* Honeypot: off-screen rather than display:none so naive bots still fill it. */
.itsm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.itsm-btn {
	display: inline-block; padding: .65rem 1.2rem; border: 0; border-radius: 6px; cursor: pointer;
	background: var(--itsm-accent); color: var(--itsm-accent-ink); font: inherit; font-weight: 600; text-decoration: none;
}
.itsm-btn:hover { filter: brightness(1.08); }
.itsm-btn-secondary { background: var(--itsm-bg); color: var(--itsm-ink); border: 1px solid var(--itsm-line); }
.itsm-inline { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }

.itsm-notice { padding: .7rem 1rem; border-radius: 6px; margin: 0 0 1rem; border-left: 4px solid; }
.itsm-notice p { margin: 0; }
.itsm-notice-success { background: #edfaef; border-color: #1a7f37; }
.itsm-notice-error { background: #fcf0f1; border-color: #b32d2e; }

.itsm-table-wrap { overflow-x: auto; }
.itsm-table { width: 100%; border-collapse: collapse; }
.itsm-table th, .itsm-table td { padding: .7rem .6rem; text-align: left; border-bottom: 1px solid var(--itsm-line); vertical-align: top; }
.itsm-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--itsm-muted); }
@media (max-width: 640px) {
	.itsm-table thead { display: none; }
	.itsm-table tr { display: block; border-bottom: 1px solid var(--itsm-line); padding: .5rem 0; }
	.itsm-table td { display: flex; justify-content: space-between; border: 0; padding: .25rem 0; }
	.itsm-table td::before { content: attr(data-label); color: var(--itsm-muted); margin-right: 1rem; }
}
.itsm-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

.itsm-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--itsm-bg); border: 1px solid var(--itsm-line); white-space: nowrap; }
.itsm-status-new, .itsm-status-reopened { background: #e8f0fe; border-color: #b6ccf7; color: #1a4aa6; }
.itsm-status-assigned, .itsm-status-triaged, .itsm-status-in_progress { background: #fff8e1; border-color: #f0dc9a; color: #7a5a00; }
.itsm-status-pending_customer { background: #fdeee1; border-color: #f3c7a2; color: #8a4200; }
.itsm-status-resolved { background: #edfaef; border-color: #b5e1bd; color: #1a6b2f; }
.itsm-status-closed { background: #f0f0f1; border-color: #dcdcde; color: #50575e; }
.itsm-prio-p1 { background: #fcf0f1; border-color: #f0b8bb; color: #a1161b; }
.itsm-prio-p2 { background: #fdeee1; border-color: #f3c7a2; color: #8a4200; }
.itsm-prio-p3 { background: #fff8e1; border-color: #f0dc9a; color: #7a5a00; }
.itsm-prio-p4 { background: #f0f0f1; border-color: #dcdcde; color: #50575e; }

.itsm-ticket-head h2 { margin-bottom: .5rem; }
.itsm-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: var(--itsm-muted); font-size: .9rem; margin: 0 0 1.5rem; }

.itsm-callout { background: var(--itsm-bg); border: 1px solid var(--itsm-line); border-radius: var(--itsm-radius); padding: 1rem; margin: 1rem 0; }
.itsm-callout p { margin: 0 0 .5rem; }

.itsm-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.itsm-msg { border: 1px solid var(--itsm-line); border-radius: var(--itsm-radius); padding: .9rem 1rem; background: #fff; }
.itsm-msg.is-agent { background: #f4f7ff; border-color: #cddbf7; }
.itsm-msg header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .4rem; }
.itsm-msg time { margin-left: auto; color: var(--itsm-muted); font-size: .8rem; }
.itsm-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 4px; background: var(--itsm-accent); color: var(--itsm-accent-ink); }
.itsm-body p { margin: 0 0 .6rem; }
.itsm-body p:last-child { margin: 0; }
.itsm-files { margin: .6rem 0 0; padding-left: 1.2rem; }

/* Phase 2: SLA, knowledge base, suggestions, CSAT */
.itsm-suggest { background: #f4f7ff; border: 1px solid #cddbf7; border-radius: var(--itsm-radius); padding: .75rem 1rem; margin: -.25rem 0 1rem; }
.itsm-suggest[hidden] { display: none; }
.itsm-suggest ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.itsm-suggest li { margin: .25rem 0; }

.itsm-kb-search { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.itsm-kb-search input[type="search"] { flex: 1 1 14rem; }
.itsm-kb-list { list-style: none; margin: 0; padding: 0; }
.itsm-kb-list li { border-bottom: 1px solid var(--itsm-line); padding: .75rem 0; }
.itsm-kb-list p { margin: .2rem 0 0; }
.itsm-kb-article { margin-bottom: 1.5rem; }

.itsm-rating { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.itsm-rating legend { width: 100%; font-weight: 600; margin-bottom: .5rem; padding: 0; }
.itsm-rating label { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 1px solid var(--itsm-line); border-radius: var(--itsm-radius); padding: .5rem .75rem; cursor: pointer; min-width: 5.5rem; text-align: center; background: #fff; }
.itsm-rating label:has(input:checked) { border-color: var(--itsm-accent); box-shadow: 0 0 0 2px var(--itsm-accent); }
.itsm-rating-num { font-size: 1.25rem; font-weight: 700; }
.itsm-rating-label { font-size: .75rem; color: var(--itsm-muted); }

/* ---- Phase 3: ticket types and details ---- */
.itsm-types { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.itsm-types legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.itsm-type-opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; border: 1px solid var(--itsm-line); border-radius: var(--itsm-radius); padding: .6rem .75rem; cursor: pointer; background: #fff; }
.itsm-type-opt:has(input:checked) { border-color: var(--itsm-accent); box-shadow: 0 0 0 2px var(--itsm-accent); }
.itsm-type-opt .itsm-muted { flex-basis: 100%; margin-left: 1.5rem; }
.itsm-type-fields[hidden], #itsm-impact-row[hidden] { display: none; }
.itsm-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 600; background: #e5e7eb; color: #1d2327; }
.itsm-type-incident { background: #fde8e8; color: #8a1f1f; }
.itsm-type-request { background: #e0f0ff; color: #0a4b78; }
.itsm-details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--itsm-line); border-radius: var(--itsm-radius); background: #fff; }
.itsm-details dt { font-weight: 600; }
.itsm-details dd { margin: 0; }
.itsm-details dd p { margin: 0; }
@media (max-width: 600px) { .itsm-details { grid-template-columns: 1fr; } }

/* Client onboarding and document review */
.itsm-portal{--itsm-ink:#17354b;--itsm-accent:#12628a}.itsm-intro{padding:32px 0 24px;max-width:720px}.itsm-intro h2{font-size:clamp(28px,4vw,42px);line-height:1.12;margin:14px 0;color:var(--itsm-ink)}.itsm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--itsm-accent)}.itsm-entry-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:start}.itsm-entry-card{border:1px solid #dce4e9;border-radius:16px;padding:24px;background:#fff;margin-bottom:20px;box-shadow:0 8px 28px #17354b08}.itsm-entry-card summary{cursor:pointer;line-height:1.6}.itsm-document-body{background:#f7f9fa;padding:20px;margin:16px 0;border-left:3px solid #12628a;line-height:1.7;overflow-wrap:anywhere}.itsm-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.itsm-form select,.itsm-form textarea{max-width:100%;box-sizing:border-box}.itsm-portal a:focus-visible,.itsm-portal button:focus-visible,.itsm-portal input:focus-visible{outline:3px solid #d39548;outline-offset:3px}@media(max-width:720px){.itsm-entry-grid{grid-template-columns:1fr}.itsm-entry-card{padding:18px}.itsm-nav{flex-wrap:wrap}}

.itsm-form .itsm-consent{font-weight:400;line-height:1.55}.itsm-form .itsm-consent input{margin-right:6px}

.itsm-portal .itsm-service-form { border:1px solid #cbd5e1; border-radius:12px; padding:18px 20px; margin:20px 0; min-width:0; background:#fff; }
.itsm-portal .itsm-service-form legend { font-weight:700; padding:0 8px; }
.itsm-portal .itsm-progress dl { display:grid; grid-template-columns:minmax(110px,1fr) 3fr; gap:12px 20px; }
.itsm-portal .itsm-progress dt { font-weight:600; }
.itsm-portal .itsm-progress dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:600px) { .itsm-portal .itsm-progress dl { grid-template-columns:1fr; gap:6px; } .itsm-portal .itsm-progress dd { margin-bottom:12px; } }

.itsm-entry-card #loginform label{display:block;margin-bottom:6px}.itsm-entry-card #loginform input[type=text],.itsm-entry-card #loginform input[type=password]{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #9eafb9;border-radius:6px;font:inherit;min-height:44px}.itsm-entry-card #wp-submit{appearance:none;background:var(--itsm-accent,#12628a);color:#fff;border:1px solid var(--itsm-accent,#12628a);border-radius:6px;padding:12px 20px;font:600 16px/1.4 system-ui;min-height:44px;cursor:pointer}.itsm-entry-card .login-remember label{display:flex!important;align-items:center;gap:8px}

.itsm-portal a.itsm-btn:not(.itsm-btn-secondary){color:#fff;text-decoration:none}.itsm-portal a.itsm-btn-secondary{color:var(--itsm-ink);text-decoration:none}