/* ******************************************** */
/*                   header                     */
/* ******************************************** */
.header {
	width: 100vw;
	height: 80px;
	position: fixed;
	border-bottom: 1px solid #e4e4e4;
	top: 0;
	display: flex;
	justify-content: space-between;
	z-index: 2000;
	background: var(--bg-white);
	min-width: 1151px;
}
.header__left {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
}
.header__logo-area {
	/*padding: 0 30px;*/
}
.header__tab-menu {
	display: flex;
	/*justify-content: center;*/
	/*align-items: center;*/
	height: 100%;
	margin-left: 30px;
}

.header__tabs {
	display: flex;
	gap: 40px;
	height: 100%;
}

.header__tab {
	position: relative;
	font-weight: 500;
	font-size: 18px;
	line-height: 80px;
	color: var(--gray-90);
	text-decoration: none;
}

.header__tab.active::after {
	content: "";
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-40);
}
.header__state-control {
	border: 1px solid #cecece;
	border-radius: 50px;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.header__switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 25px;
}
.header__switch-input {
	opacity: 0;
	width: 0;
	height: 0;
}
.header__switch-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--gray-40);
	transition: 0.4s;
	border-radius: 34px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 7px;
}
.header__switch-label-text {
	color: var(--text-white);
	font-size: 13px;
	font-weight: bold;
}
.header__switch-input:checked+.header__switch-slider {
	background-color: var(--bg-green);
	justify-content: flex-start;
}
.header__switch-slider::before {
	position: absolute;
	content: "";
	height: 19px;
	width: 19px;
	left: 3px;
	bottom: 3px;
	background-color: var(--bg-white);
	transition: 0.4s;
	border-radius: 50%;
}
.header__switch-input:checked+.header__switch-slider::before {
	transform: translateX(35px);
}
.header__state-buttons {
	display: flex;
	gap: 5px;
	font-size: 13px;
}
/* ========================================================
 * 소프트폰 버튼 공통 스타일
 * ======================================================== */
.header__state-btn {
	padding: 5px 8px;
	border-radius: 7px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--gray-40);
	background: var(--gray-10);
}
.header__state-btn:hover {
	opacity: 1 !important;
}

/* ========================================================
 * 버튼 내부 원(circle) 공통 스타일
 * ======================================================== */
.header__circle {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gray-40);
}

/* ========================================================
 * 상태: 대기 (ready)
 * ======================================================== */
 /* 활성화 상태 */
.header__state-btn--ready:not([disabled]) {
	background: var(--bg-white);
	border-color: var(--gray-50);
	color: var(--gray-90);
}
.header__state-btn--ready:not([disabled]) .header__circle--ready {
	background: var(--primary-40);
}

/* 선택된 상태 */
.header__state-btn--ready.active {
	border-color: var(--primary-50);
	background: var(--primary-40);
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--ready.active .header__circle--ready {
	background: var(--bg-white);
}

/* ========================================================
 * 상태: 종료 (hangup)
 * ======================================================== */
 /* 활성화 상태 */
.header__state-btn--hangup {
	border: 1px solid var(--danger-60);
	background: var(--danger-60);
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--hangup .header__circle--hangup {
	background: var(--bg-white);
}

/* ========================================================
 * 상태: 발신(dial)
 * ======================================================== */
/* 활성화 상태 */
.header__state-btn--dial:not([disabled]) {
	border-color: var(--gray-50);
	background: var(--bg-white);
}
.header__state-btn--dial:not([disabled]) .header__circle--dial{
	background: var(--primary-40);
}

/* 선택된 상태 */
.header__state-btn--dial.pressed {
	border: 1px solid #83307a;
	background: #a02b93;
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--dial.pressed .header__circle--dial {
	background: var(--bg-white);
}

/* ========================================================
 * 상태: 음소거(mute)
 * ======================================================== */
/* 활성화 상태 */
.header__state-btn--mute:not([disabled]) {
	background: var(--bg-white);
	border-color: var(--gray-50);
	color: var(--gray-90);
}
.header__state-btn--mute:not([disabled]) .header__circle--mute {
	background: var(--primary-40);
}

/* 선택된 상태 */
.header__state-btn--mute.active {
	border-color: var(--primary-50);
	background: var(--primary-40);
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--mute.active .header__circle--mute {
	background: var(--bg-white);
}

/* ========================================================
 * 상태: 보류(hold)
 * ======================================================== */
/* 활성화 상태 */
.header__state-btn--hold:not([disabled]) {
	background: var(--bg-white);
	border-color: var(--gray-50);
	color: var(--gray-90);
}
.header__state-btn--hold:not([disabled]) .header__circle--hold {
	background: var(--primary-40);
}

/* 선택된 상태 */
.header__state-btn--hold.active {
	border-color: var(--primary-50);
	background: var(--primary-40);
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--hold.active .header__circle--hold {
	background: var(--bg-white);
}

/* ========================================================
 * 상태: 전환(transfer)
 * ======================================================== */
/* 활성화 상태 */
.header__state-btn--transfer:not([disabled]) {
	background: var(--bg-white);
	border-color: var(--gray-50);
	color: var(--gray-90);
}
.header__state-btn--transfer:not([disabled]) .header__circle--transfer {
	background: #4ea72e;
}

/* 선택된 상태 */
.header__state-btn--transfer.pressed {
	background: #4ea72e;
	border-color: #4ea72e;
	color: var(--text-white);
	flex-direction: row-reverse;
}
.header__state-btn--transfer.pressed .header__circle--transfer {
	background: var(--bg-white);
}

/* ======================================================== */

.header__call-time {
	display: flex;
	gap: 10px;
	font-size: 13px;
}
.header__call-time-title {
	font-weight: 500;
}
.header__call-time-counter {
	color: #e97132;
}
.header__call-status-group {
	display: flex;
	justify-content: center;
	gap: 10px;
	min-width: 70px;
}
.header__call-status {
	color: var(--gray-50);
	font-weight: 500;
	font-size: 13px;
}
.header__call-status--none {
	color: var(--gray-50);
}
.header__call-status--ready {
	color: var(--primary-70);
}
.header__call-status--busy {
	color: var(--success-50);
}
.header__call-status--afterwork,
.header__call-status--monitoring {
	color: #e97132;
}
.header__right {
	display: flex;
	align-items: center;
	gap: 15px;
}
.header__alert {
	position: relative;
	margin-right: 5px;
}
.header__alert-image {
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.header__alert-count:not(:empty) {
	display: inline-flex;
	background: var(--danger-60);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 11px;
	font-weight: 500;
	color: var(--text-white);
	line-height: 18px;
	position: absolute;
	top: -5px;
	right: 0;
	cursor: pointer;
	justify-content: center;
	align-items: flex-end;
}
.header__user-info {
	font-size: 14px;
}
.header__logout {
	margin-right: 30px;
}
.header__logout-image {
	width: 20px;
	margin-top: 5px;
}

/* ******************************************** */
/*    layout(좌측 사이드 메뉴, 컨텐츠 영역 감싸는 div)   */
/* ******************************************** */
.layout {
	height: 100vh;
	padding-top: 80px;
	display: flex;
}

/* ******************************************** */
/*               aside(좌측 사이드 메뉴)            */
/* ******************************************** */
aside {
	position: fixed;
	top: 80px;
	height: calc(100vh - 80px);
	width: 60px;
	z-index: 2000;
	padding: 30px 10px;
	background-color: var(--bg-white);
	border-right: 1px solid var(--gray-20)
}
.aside__menu-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 18px;
}
.aside__menu-item {
	cursor: pointer;
	position: relative;
}
.aside__menu-item.active::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-40);
}
.aside__menu-item--tooltip {
	position: absolute;
	top: -5px;
	left: 35px;
	background: var(--gray-90);
	color: var(--text-white);
	padding: 8px 15px;
	font-size: 13px;
	border-radius: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	width: fit-content;
	display: none;
}
.aside__menu-item:hover .aside__menu-item--tooltip {
	display: flex;
}
.aside__menu-item--tooltip::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -5px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid var(--gray-90);
}
.aside__item-image {
	width: 27px;
}
.aisde__divider {
	width: 50%;
	border-top: 1px solid rgb(216, 216, 216);
}
.aside__menu-item .aside_item-new-badge {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--danger-60);
    border-radius: 50%;
    color: var(--text-white);
    font-size: 10px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    z-index: 10;
    line-height: 16px;
}

.aside__menu-item .aside_item-new-badge[data-badge-visible="true"] {
    display: inline-flex;
}

/* *************************************** */
/*     우측 추가 탭                          */
/* *************************************** */
.additional-aside {
    padding: 30px 10px;
    background-color: var(--primary-5);
    border-left: 1px solid var(--gray-20);
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}

.additional-aside .aside__menu-item--tooltip {
    left: auto;
    right: 35px;
}

.additional-aside .aside__menu-item--tooltip::before {
    left: auto;
    right: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: none;
    border-left: 5px solid var(--gray-90);
}
/* ******************************************** */
/*              main(우측 컨텐츠 영역)              */
/* ******************************************** */
.main {
	margin-left: 60px;
	flex: 1;
	padding: 20px;
	background: var(--bg-white);
	min-width: 1151px;
	min-height: 780px;
}
.admin-main {
	flex: 1;
	border-left: 1px solid var(--gray-20);
	min-height: calc(100vh - 80px);
	display: flex;
	padding: 20px;
	gap: 10px;
	background: var(--bg-white);
	min-width: 1151px;
}
.main.fit-to-screen {
	height: calc(100vh - 80px);
}

/* ******************************************** */
/*                 미디어 쿼리                     */
/* ******************************************** */
@media ( max-width : 1600px) {
	.header .header__left {
		gap: 0;
	}
	.header .header__state-control {
		gap: 10px;
		padding: 5px 10px;
		min-height: 38px;
	}
	.header .header__switch {
		width: 50px;
		height: 20px;
	}
	.header .header__switch-label-text {
		font-size: 12px;
	}
	.header .header__switch-slider::before {
		width: 14px;
		height: 14px;
	}
	.header .header__switch-input:checked+.header__switch-slider::before {
		transform: translateX(30px);
	}
	.header .header__state-buttons {
		font-size: 12px;
	}
	.header .header__circle {
		width: 12px;
		height: 12px;
		top: 7px;
	}
	.header .header__call-time, .header__call-state {
		font-size: 12px;
	}
}

@media ( max-width : 1250px) {
	.header .header__right {
		gap: 5px;
	}
}