/* ── TicketFlow — Front-end Styles ─────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   SHARED NOTICES
═══════════════════════════════════════════════════════════════════════════════ */
.tf-notice {
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.6;
}
.tf-notice--success { background:#edfaef; border:1px solid #46b450; color:#1b5e20; }
.tf-notice--error   { background:#fdecea; border:1px solid #dc3232; color:#b71c1c; }
.tf-notice--info    { background:#e8f4fd; border:1px solid #1976d2; color:#0d47a1; }
.tf-notice--error ul { margin:8px 0 0 20px; padding:0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SHARED FIELD STYLES
═══════════════════════════════════════════════════════════════════════════════ */
.tf-form__field { margin-bottom: 20px; }
.tf-form__field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: #1d2327;
}
.tf-form__field input[type="text"],
.tf-form__field input[type="email"],
.tf-form__field input[type="url"],
.tf-form__field input[type="number"],
.tf-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
	color: #1d2327;
	background: #fff;
	transition: border-color 0.15s;
	-webkit-appearance: none;
	appearance: none;
}
.tf-form__field select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
	color: #1d2327;
	background-color: #fff;
	cursor: pointer;
}
.tf-form__field input:focus,
.tf-form__field select:focus,
.tf-form__field textarea:focus { outline:none; border-color:#0073aa; box-shadow:0 0 0 2px rgba(0,115,170,.15); }
.tf-form__field textarea { resize:vertical; min-height:120px; }
.tf-form__field input[type="file"] { width:100%; font-size:14px; padding:6px 0; }
.tf-req  { color:#dc3232; margin-left:2px; }
.tf-hint { font-size:13px; color:#646970; margin:6px 0 0; display:block; }

.tf-submit-btn {
	display: inline-block;
	padding: 12px 28px;
	background: #0073aa;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	font-family: inherit;
}
.tf-submit-btn:hover, .tf-submit-btn:focus { background:#005a87; outline:none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SUBMISSION FORM
═══════════════════════════════════════════════════════════════════════════════ */
.tf-form-wrap { max-width:720px; margin:0 auto; font-family:inherit; }
.tf-form {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 32px 36px;
}
@media (max-width:600px) { .tf-form { padding:20px 18px; } }

.tf-form__row--half { display:flex; gap:20px; }
@media (max-width:600px) { .tf-form__row--half { flex-direction:column; gap:0; } }
.tf-form__row--half .tf-form__field { flex:1; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PORTAL (tabbed wrapper)
═══════════════════════════════════════════════════════════════════════════════ */
.tf-portal { font-family:inherit; }

.tf-portal__success {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #edfaef;
	border: 1px solid #46b450;
	border-radius: 5px;
	padding: 14px 18px;
	margin-bottom: 16px;
	font-size: 15px;
	color: #1b5e20;
}
.tf-portal__success-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #2e7d32;
	padding: 0 4px;
	flex-shrink: 0;
}

.tf-portal__nav {
	display: flex;
	gap: 4px;
	border-bottom: 3px solid #0073aa;
	flex-wrap: wrap;
}
.tf-portal__tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 22px;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #50575e;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	font-family: inherit;
	position: relative;
	bottom: -1px;
}
.tf-portal__tab:hover { background:#dcdcde; color:#1d2327; }
.tf-portal__tab.is-active {
	background: #fff;
	color: #0073aa;
	border-color: #0073aa #dcdcde #fff;
	border-top-width: 3px;
}
.tf-portal__tab-icon { font-size:16px; line-height:1; }

.tf-portal__body {
	background: #fff;
	border: 1px solid #dcdcde;
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 28px 24px;
}
@media (max-width:540px) {
	.tf-portal__body { padding:18px 14px; }
	.tf-portal__tab  { padding:10px 14px; font-size:13px; }
}

.tf-portal__panel { display:none; }
.tf-portal__panel.is-active { display:block; }

.tf-portal__panel .tf-form-wrap { max-width:100%; }
.tf-portal__panel .tf-form { border:none; padding:0; background:transparent; }
.tf-portal__panel .tf-board { margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TICKET LOOKUP
═══════════════════════════════════════════════════════════════════════════════ */
.tf-lookup { max-width:480px; margin:0 auto; text-align:center; font-family:inherit; }
.tf-lookup__icon  { font-size:48px; margin-bottom:12px; line-height:1; }
.tf-lookup__title { font-size:22px; font-weight:700; margin:0 0 12px; }
.tf-lookup__intro { font-size:15px; color:#555; line-height:1.6; margin:0 0 10px; }
.tf-lookup__form  { text-align:left; margin-top:24px; background:#fff; border:1px solid #dcdcde; border-radius:6px; padding:28px 28px 20px; }
.tf-lookup__form .tf-submit-btn { width:100%; text-align:center; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TICKET VIEW (client-facing)
═══════════════════════════════════════════════════════════════════════════════ */
.tf-tv { max-width:760px; margin:0 auto; font-family:inherit; }

.tf-tv__back-bar { margin-bottom:12px; }
.tf-tv__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #0073aa;
	text-decoration: none;
	padding: 8px 14px;
	background: #f0f6fc;
	border: 1px solid #c2d9ef;
	border-radius: 4px;
}
.tf-tv__back-link:hover { background:#ddeaf7; color:#005a87; }

.tf-tv__header {
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px 6px 0 0;
	border-bottom: none;
}
.tf-tv__ref { font-size:22px; font-weight:700; color:#0073aa; letter-spacing:.5px; margin-bottom:10px; }
.tf-tv__badges { display:flex; gap:8px; flex-wrap:wrap; }
.tf-tv__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.tf-tv__info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: #f8f9fa;
	border: 1px solid #dcdcde;
	border-bottom: none;
}
.tf-tv__info-item { flex:1; min-width:140px; padding:14px 20px; border-right:1px solid #dcdcde; }
.tf-tv__info-item:last-child { border-right:none; }
.tf-tv__info-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#646970; margin-bottom:4px; }
.tf-tv__info-value { font-size:15px; font-weight:600; color:#1d2327; }

.tf-tv__section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-top: none;
	padding: 24px;
}
.tf-tv__section:last-child { border-radius:0 0 6px 6px; }
.tf-tv__section-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #646970;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f1;
}

.tf-tv__description { font-size:15px; line-height:1.7; white-space:pre-wrap; background:#fafafa; padding:14px 16px; border-radius:4px; border:1px solid #f0f0f1; }

.tf-tv__attachments { margin-top:16px; font-size:14px; }
.tf-tv__file-list   { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.tf-tv__img-link img { max-width:110px; max-height:80px; border:1px solid #dcdcde; border-radius:3px; display:block; }
.tf-tv__file-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #f0f0f1;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	color: #1d2327;
}
.tf-tv__file-link:hover { background:#dcdcde; }

.tf-tv__thread { display:flex; flex-direction:column; gap:14px; }
.tf-tv__msg { max-width:90%; border-radius:6px; padding:14px 18px; }
.tf-tv__msg--support { align-self:flex-start; background:#f0f6fc; border:1px solid #c2d9ef; border-left:4px solid #0073aa; }
.tf-tv__msg--client  { align-self:flex-end;   background:#f9fdf9; border:1px solid #c2e0c6; border-right:4px solid #46b450; }
.tf-tv__msg-header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; font-size:13px; color:#646970; }
.tf-tv__msg-header strong { color:#1d2327; }
.tf-tv__msg-body { font-size:15px; line-height:1.7; white-space:pre-wrap; }

.tf-tv__reply-section { background:#f8f9fa; }
.tf-tv__reply-form .tf-submit-btn { background:#46b450; }
.tf-tv__reply-form .tf-submit-btn:hover { background:#3a9e44; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TICKET BOARD
═══════════════════════════════════════════════════════════════════════════════ */
.tf-board { font-family:inherit; }

.tf-board__grid {
	display: grid;
	gap: 16px;
	align-items: start;
}
@media (max-width:960px) { .tf-board__grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:540px) { .tf-board__grid { grid-template-columns: 1fr !important; } }

.tf-board__col { background:#f5f6f7; border-radius:6px; overflow:hidden; }
.tf-board__col-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #fff;
}
.tf-board__col-label { flex:1; }
.tf-board__col-count {
	border-radius: 10px;
	font-size: 11px;
	padding: 1px 8px;
	font-weight: 700;
}
.tf-board__col-body { padding:10px; display:flex; flex-direction:column; gap:10px; }
.tf-board__empty { color:#9e9e9e; font-size:13px; text-align:center; padding:20px 0; }

.tf-board__card {
	background: #fff;
	border-radius: 5px;
	border: 1px solid #dcdcde;
	padding: 14px 16px;
	border-left: 4px solid #dcdcde;
	font-size: 14px;
	transition: box-shadow .15s;
}
.tf-board__card:hover { box-shadow:0 2px 8px rgba(0,0,0,.10); }
.tf-board__card-top     { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.tf-board__card-ref     { font-weight:700; font-size:13px; color:#0073aa; }
.tf-board__card-ref--link { text-decoration:none; }
.tf-board__card-ref--link:hover { text-decoration:underline; }
.tf-board__card-priority {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 2px 7px;
	border-radius: 3px;
}
.tf-board__card-name    { font-weight:600; color:#1d2327; margin-bottom:4px; }
.tf-board__card-preview { color:#646970; font-size:13px; line-height:1.5; margin-bottom:8px; }
.tf-board__card-meta    { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:#646970; }
.tf-board__card-date    { margin-left:auto; }

/* ═══════════════════════════════════════════════════════════════════════════════
   CLOSED TICKETS
═══════════════════════════════════════════════════════════════════════════════ */
.tf-closed__header { margin-bottom:20px; }
.tf-closed__title  { font-size:18px; font-weight:700; margin:0 0 6px; }
.tf-closed__intro  { font-size:14px; color:#555; margin:0; line-height:1.6; }
.tf-closed__empty  { text-align:center; padding:48px 20px; color:#888; font-size:15px; }
.tf-closed__empty-icon { font-size:40px; display:block; margin-bottom:10px; }
.tf-closed__list   { display:flex; flex-direction:column; gap:12px; }

.tf-closed__item {
	border: 1px solid #e0e0e0;
	border-left: 4px solid #9e9e9e;
	border-radius: 4px;
	background: #fafafa;
	padding: 16px 20px;
	transition: box-shadow .15s;
}
.tf-closed__item:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); background:#fff; }

.tf-closed__item-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.tf-closed__item-ref-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tf-closed__item-ref { font-size:15px; font-weight:700; color:#0073aa; text-decoration:none; }
.tf-closed__item-ref:hover { text-decoration:underline; }
.tf-closed__item-priority {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 2px 8px;
	border-radius: 3px;
}
.tf-closed__item-status { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:3px; background:#f0f0f1; color:#757575; }
.tf-closed__item-meta   { display:flex; gap:14px; font-size:13px; color:#646970; }
.tf-closed__item-body   { font-size:14px; }
.tf-closed__item-requester { font-weight:600; color:#1d2327; margin-bottom:4px; }
.tf-closed__item-preview   { color:#555; line-height:1.5; }
.tf-closed__item-footer { margin-top:12px; }
.tf-closed__view-btn { font-size:13px; font-weight:600; color:#0073aa; text-decoration:none; }
.tf-closed__view-btn:hover { text-decoration:underline; }