/* Brighton Fibre - Customer Account UI styles */

.page-account {
	--account-ui-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.page-account #interface,
.page-account #account-menu,
.page-account #account-actions,
.page-account #interface *,
.page-account #account-menu *,
.page-account #account-actions * {
	font-family: var(--account-ui-font);
	font-weight: 400;
	letter-spacing: 0;
}

.page-account #interface .fa,
.page-account #interface .fa-classic,
.page-account #interface .fa-duotone,
.page-account #interface .fa-light,
.page-account #interface .fa-regular,
.page-account #interface .fa-solid,
.page-account #interface .fa-brands,
.page-account #account-menu .fa,
.page-account #account-menu .fa-classic,
.page-account #account-menu .fa-duotone,
.page-account #account-menu .fa-light,
.page-account #account-menu .fa-regular,
.page-account #account-menu .fa-solid,
.page-account #account-menu .fa-brands,
.page-account #account-actions .fa,
.page-account #account-actions .fa-classic,
.page-account #account-actions .fa-duotone,
.page-account #account-actions .fa-light,
.page-account #account-actions .fa-regular,
.page-account #account-actions .fa-solid,
.page-account #account-actions .fa-brands {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
	font-weight: inherit;
}

.page-account #account-menu .btn,
.page-account #account-actions .btn,
.page-account #interface .btn,
.page-account #interface .card-header,
.page-account #account-actions .card-header,
.page-account #interface .fw-semibold,
.page-account #account-actions .fw-semibold,
.page-account #interface strong,
.page-account #account-actions strong {
	font-weight: 500;
}

.page-account #account-menu .account-nav-btn {
	font-size: 0.94rem;
	font-weight: 400;
	padding: 0.5rem 0.85rem;
}

.page-account #account-menu .account-nav-btn.btn-lime {
	font-weight: 500;
}

.page-account #account-menu .account-logout-btn {
	font-size: 1rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
}

/* -------------------------------------------------
 * Top-level nav buttons
 * ------------------------------------------------- */

#account-actions{
    /** margin-top: 24px; **/

}

#account-menu .btn-lime {
	background-color: #b5e200;
	border-color: #b5e200;
	color: #000;
}

#account-menu .btn-invertedlime {
	background-color: #ffffff;
	color: #000;
	border-color: #b5e200;
}

#account-menu .btn-invertedlime:hover {
	background-color: #b5e200;
	color: #000;
}

/* -------------------------------------------------
 * Layout helpers
 * ------------------------------------------------- */

#ticket-detail-pane,
#service-detail-pane {
	margin-top: 40px;
}

/* Bar above lists/detail panes (e.g. "Add new service") */
.account-inline-actions {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

/* Make sure the card sits directly under the actions bar */
.account-inline-actions + .card {
	margin-top: 0;
}

.account-login-card {
	max-width: 60rem;
	width: min(100%, 60%);
}

@media (max-width: 991.98px) {
	.account-login-card {
		width: 100%;
		max-width: none;
	}
}

.btn-inline-pill {
	border-radius: 999px;
	padding-inline: 1.25rem;
}

.account-switch-action-btn-compact {
	padding: 0.15rem 0.6rem;
	font-size: 0.72rem;
	line-height: 1.2;
}

.account-switch-badge {
	font-size: 0.72rem;
	font-weight: 500;
	padding: 0.32rem 0.55rem;
	border: 1px solid transparent;
}

.account-switch-badge-neutral {
	background-color: #f1f3f5;
	border-color: #dde2e6;
	color: #4b5563;
}

.account-switch-badge-info {
	background-color: #e8f1ff;
	border-color: #cfe0ff;
	color: #274c77;
}

.account-switch-badge-warn {
	background-color: #fff4dd;
	border-color: #f3dfae;
	color: #7a5a00;
}

.account-switch-badge-danger {
	background-color: #fdebec;
	border-color: #f5cfd3;
	color: #8a2d3b;
}

.account-switch-badge-success {
	background-color: #e8f6ec;
	border-color: #cae7d2;
	color: #23603a;
}

/* -------------------------------------------------
 * Services list (left column)
 * ------------------------------------------------- */

.account-services-list {
	border-radius: 0 0 0.75rem 0.75rem;
	overflow: hidden;
}

/* Base row */
.account-services-list .account-service-row {
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	background-color: #ffffff;
	color: #333;
	padding: 0.9rem 1rem;
	text-align: left;
}

.account-service-row:last-child {
	border-bottom: none;
}

.account-service-row .service-label {
	font-weight: 600;
	font-size: 0.95rem;
}

.account-service-row .service-address {
	font-size: 0.85rem;
	color: #777;
}

/* Selected row: lighter background, stronger text */
.account-services-list .account-service-row.account-service-row-selected {
	background-color: #f5f7fb;
	color: #111;
}

.account-services-list .account-service-row.account-service-row-selected .service-label {
	font-weight: 600;
	color: #111;
}

.account-services-list .account-service-row.account-service-row-selected .service-address {
	color: #444;
}

/* Muted rows for cancelled/on-hold/stopped – keep white background */
.account-services-list .account-service-row.account-service-row-muted {
	color: #666;
}

.account-services-list .account-service-row.account-service-row-muted .service-address {
	color: #999;
}

/* Hover (keeps some feedback even for muted rows) */
.account-services-list .account-service-row:hover {
	background-color: #eef2f7;
}

/* Status badge next to service name */
.account-services-list .service-label .badge {
	font-size: 0.7rem;
	vertical-align: middle;
}

/* -------------------------------------------------
 * Ticket list (Support view)
 * ------------------------------------------------- */

.account-ticket-list {
	border-radius: 0 0 0.75rem 0.75rem;
	overflow: hidden;
}

.account-ticket-row {
	border: 0;
	border-bottom: 1px solid #eee;
	padding: 0.9rem 1rem;
	background-color: #fff;
	text-align: left;
}

.account-ticket-row:last-child {
	border-bottom: none;
}

.account-ticket-row .ticket-label {
	font-weight: 600;
	font-size: 0.95rem;
}

.account-ticket-row .ticket-status {
	font-size: 0.8rem;
}

.account-ticket-row-selected {
	background-color: #fff7e0;
}

.account-ticket-row-muted {
	color: #999;
	background-color: #f7f7f7;
}

.account-ticket-row-muted .ticket-status {
	color: #aaa;
}

/* -------------------------------------------------
 * Device cards (Service details)
 * ------------------------------------------------- */

.account-device-card {
	border-radius: 0.75rem;
	border: 1px solid #e0e0e0;
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	background-color: #ffffff;
	position: relative;
}

.account-device-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 0.75rem 0 0 0.75rem;
}

/* Stronger left border by device class */
.account-device-card.device-cpe::before {
	background-color: #8cb6ff;
}

.account-device-card.device-wap::before {
	background-color: #8fded0;
}

.account-device-card.device-onu::before {
	background-color: #f8c88c;
}

.account-device-card.device-other::before {
	background-color: #c4ccd6;
}

.device-status-badge {
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.45rem 0.8rem;
}

.account-device-type-badge {
	font-size: 0.82rem;
	font-weight: 400;
	padding: 0.4rem 0.75rem;
}

.account-device-type-badge.device-cpe {
	background-color: #e8f0ff;
	color: #2957b8;
}

.account-device-type-badge.device-wap {
	background-color: #e6f7f2;
	color: #1f7f70;
}

.account-device-type-badge.device-onu {
	background-color: #fff1df;
	color: #a85a16;
}

.account-device-type-badge.device-other {
	background-color: #eef1f4;
	color: #556170;
}

.account-device-meta {
	color: #6b7280;
	line-height: 1.5;
}

.account-device-meta strong {
	color: #2f2f2f;
	font-weight: 500;
}

.account-device-metrics {
	margin-top: 0.35rem;
	color: #4b5563;
}

.account-ip-role-badge.account-ip-role-primary {
	background-color: #e8f0ff;
	color: #2957b8;
}

.account-ip-role-badge.account-ip-role-additional {
	background-color: #fff1df;
	color: #a85a16;
}

.account-ip-type-badge {
	background-color: #eef1f4;
	color: #556170;
	font-weight: 400;
}

.account-ip-role-badge {
	font-weight: 400;
}

/* -------------------------------------------------
 * Ordering styles (Add new service)
 * ------------------------------------------------- */

/* Address list items (search results) */
.ordering-address-item {
	text-align: left;
}

.ordering-address-selected {
	background-color: #e8f6ff;
}

#service-detail-pane .account-ordering-body {
	min-height: 500px;
}

/* New service product cards
   Use element+class selector so we beat Bootstrap's .card rules */
button.account-order-service {
	display: block;
	width: 100%;
	text-align: left;
	border-radius: 0.75rem;
	border: 1px solid #e0e0e0;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
	padding: 0;                /* let .card-body control inner padding */
	cursor: pointer;
	color: inherit;
}

button.account-order-service:hover {
	border-color: #00a4ff;
	box-shadow: 0 3px 6px rgba(0,0,0,0.06);
	background-color: #f8fcff;
}

button.account-order-service.account-order-service-selected {
	border-color: #00a4ff;
	box-shadow: 0 0 0 2px rgba(0,164,255,0.2);
	background-color: #f5fbff;
}

/* Make sure inner body is compact and tidy */
button.account-order-service .card-body {
	padding: 0.75rem 1rem;
}

/* -------------------------------------------------
 * Report problem button
 * ------------------------------------------------- */

.btn-report-problem {
	border-radius: 999px;
	border: 1px solid #ffe58a;
	background-color: #ffdd55;
	color: #000;
	font-weight: 500;
	padding: 0.25rem 0.9rem;
}

.btn-report-problem:hover,
.btn-report-problem:focus {
	background-color: #ffffff;
	color: #000;
	border-color: #ffffff;
}

/* -------------------------------------------------
 * Notifications
 * ------------------------------------------------- */

.account-notification-item {
	font-size: 0.85rem;
}

/* -------------------------------------------------
 * Support ticket thread
 * ------------------------------------------------- */

.ticket-original-request {
	border-left: 4px solid #cfd8e3;
	background: linear-gradient(180deg, #fafbfd 0%, #f4f7fa 100%);
	border-radius: 0.75rem;
	padding: 0.9rem 1rem;
}

.ticket-comment-card {
	border: 1px solid #d9e2ec;
	border-radius: 0.9rem;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ticket-comment-card .card-header {
	background-color: #f8fafc;
	border-bottom: 1px solid #d9e2ec;
}

.ticket-comment-card .ticket-comment-author i {
	opacity: 0.8;
}

.ticket-comment-body {
	background-color: #fff;
}

.ticket-comment-body-inner {
	font-size: 1rem;
	line-height: 1.65;
	color: #1f2937;
}

.ticket-message-support {
	border-left: 5px solid #00a4ff;
}

.ticket-message-support .card-header {
	background: linear-gradient(180deg, #eef9ff 0%, #e3f5ff 100%);
}

.ticket-message-customer {
	border-left: 5px solid #f3c969;
}

.ticket-message-customer .card-header {
	background: linear-gradient(180deg, #fff9ea 0%, #fff3d2 100%);
}

.ticket-comment-card-latest {
	border-color: #9fd64d;
	box-shadow: 0 0 0 3px rgba(159, 214, 77, 0.18), 0 10px 24px rgba(159, 214, 77, 0.14);
}

.ticket-comment-card-latest .card-header {
	background: linear-gradient(90deg, #f3fbdc 0%, #fbffe8 100%);
}

.ticket-reply-panel {
	margin-top: 1.25rem;
	padding: 1rem 1rem 1.1rem;
	border: 1px solid #bfe6ff;
	border-radius: 0.9rem;
	background: linear-gradient(180deg, #f5fbff 0%, #edf8ff 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.ticket-reply-panel textarea.form-control {
	border-color: #9ed8ff;
	background-color: #fff;
}

.ticket-reply-panel textarea.form-control:focus {
	border-color: #00a4ff;
	box-shadow: 0 0 0 0.2rem rgba(0, 164, 255, 0.16);
}

/* -------------------------------------------------
 * Misc
 * ------------------------------------------------- */

.white-space-prewrap {
	white-space: pre-wrap;
}