/*
 * Telefonzugang and the phone dialogs. Layout and colours are Bootstrap 5.3
 * classes in the markup (card, input-group, rounded-pill, bg-*-subtle);
 * this file only adds what Bootstrap has no class for.
 */

/* Round symbol and initials: a fixed size. */
.kidsline-pbx-card-icon {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.35rem;
}

.kidsline-pbx-initials {
	width: 4rem;
	height: 4rem;
}

/* Logged in: the phone turns green with the pill. */
.kidsline-pbx-presence:has(.kidsline-pbx-status .bg-success-subtle) .kidsline-pbx-card-icon {
	color: var(--bs-success-text-emphasis) !important;
	background-color: var(--bs-success-bg-subtle) !important;
}

.kidsline-pbx-card .kidsline-pbx-title h5 {
	font-size: 1.35rem;
	font-weight: 600;
}

/* Divi pads every paragraph. */
.kidsline-pbx-card p,
.kidsline-pbx-existing p,
.kidsline-pbx-credentials p {
	padding-bottom: 0;
}

.kidsline-pbx-card .btn-sm {
	padding: .5rem 1.25rem;
	font-size: 1rem;
}

.kidsline-pbx-card .form-control-sm {
	height: auto;
	padding: .5rem .75rem;
	font-size: 1rem;
}

/* "Zugangsdaten anzeigen" as a plain link, top right — in every
   state, hover, focus and pressed included, where Bootstrap would paint
   the outline button blue. */
.kidsline-pbx-presence-aside .btn,
.kidsline-pbx-presence-aside .btn:hover,
.kidsline-pbx-presence-aside .btn:focus,
.kidsline-pbx-presence-aside .btn:active {
	padding: 0;
	color: var(--bs-link-color) !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
}

.kidsline-pbx-presence-aside .btn:hover {
	color: var(--bs-link-hover-color) !important;
}


/* Status pill: a dot in front of the label. */
.badge.kidsline-pbx-pill {
	display: inline-flex;
	gap: .45em;
	align-items: center;
	padding: .45em .9em;
	font-size: .85rem;
	font-weight: 500;
}

.badge.kidsline-pbx-pill::before {
	width: .55em;
	height: .55em;
	content: "";
	background: currentColor;
	border-radius: 50%;
}

/* Copy button: a tick for a moment after copying. */
.kidsline-pbx-copy .btn.is-copied {
	color: var(--bs-success);
	border-color: var(--bs-success);
}

.kidsline-pbx-copy .btn.is-copied i::before {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
}

/* Icons on the administration buttons (the button text is plain text). */
.kidsline-pbx-action-block::before,
.kidsline-pbx-action-unblock::before,
.kidsline-pbx-action-delete::before {
	margin-right: .5em;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
}

.kidsline-pbx-action-block::before { content: "\f04c"; }
.kidsline-pbx-action-unblock::before { content: "\f04b"; }
.kidsline-pbx-action-delete::before { content: "\f2ed"; }

/* The theme strips the field's inner spacing. */
.kidsline-pbx-copy .form-control {
	padding: .375rem .75rem;
}

/* Time field: wide enough for the time and the clock symbol. */
.kidsline-pbx-card input[type="time"] {
	min-width: 9rem;
}

/* Hospitation with nothing to do yet (not in service): greyed out, no box. */
.kidsline-pbx-hospitation:has([data-kidsline-pbx-inactive]) .card-body {
	opacity: .5;
}

.kidsline-pbx-hospitation:has([data-kidsline-pbx-inactive]) .kidsline-pbx-how {
	display: none !important;
}

/* Square like the breadcrumb bar above them. */
.kidsline-pbx-card,
.kidsline-pbx-card .kidsline-pbx-how {
	border-radius: 0 !important;
}

/* The box beside the hospitation card: the adviser's text by default, the
   listener's when the body says she only listens. */
.kidsline-pbx-how-listener {
	display: none;
}

.kidsline-pbx-hospitation:has([data-kidsline-pbx-listener]) .kidsline-pbx-how-adviser {
	display: none;
}

.kidsline-pbx-hospitation:has([data-kidsline-pbx-listener]) .kidsline-pbx-how-listener {
	display: block;
}