/* 폭 유틸 */

.w-36 {
    width: 9rem;
}

.w-40 {
    width: 10rem;
}

.w-44 {
    width: 11rem;
}

.w-48 {
    width: 12rem;
}

.w-52 {
    width: 13rem;
}

/* 데스크탑(폭 960px 이상)에서만 예지/예방 보전 컬럼 폭 고정 */
@media (min-width: 960px) {
    /* 헤더(th) */
    .mud-table-root th.sc-col-progress {
        width: 230px;
        max-width: 240px;
    }

    /* 바디(td 안의 div 같은 데 쓰는 용도라면 이것도 데스크탑 전용 */
    .sc-col-progress {
        width: 230px;
        max-width: 240px;
    }
}

/* 부품 툴팁 표현 길이 */
.ellipsis-text {
    /*display: block;*/
    max-width: 200px; /* 필요하면 숫자 조절 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-box {
    max-width: 200px; /* 원하는 너비 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* 핵심 */
    margin-top: 0px;
    margin-bottom: -4px;
}

/* 중앙 카드: 앱바 아래에서 상하좌우 22px 여백 + 가운데 정렬 */
.sc-card {
    max-width: calc(100% - 44px); /* 좌우 22px 남기기 */
    margin: 22px auto; /* 위·아래 22, 좌우 가운데 정렬 */
    padding: 0px; /* 카드 안쪽 여백도 22 */
    border-radius: 5px;
    box-shadow: none !important;
    border: none !important;
}

.sc-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sc-status-width);
    min-height: 26px;
    padding: 2px 8px;
    border-radius: 2px !important;
    font-weight: 500;
    font-size: 0.875rem !important;
    line-height: 1;
    width: 45px;
    box-sizing: border-box;
    box-shadow: none;
}

/* 모바일 요약칩 레이아웃 */
.sc-mobile-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-right: 6px;
}

/* 데스크톱(≥md): 메뉴 버튼 숨김 */
@media (min-width: 960px) {
    .appbar .menu-button {
        display: none !important;
    }
}

/* 헤더 전체 행 높이 고정 */
.sc-table .mud-table-head tr {
    height: 45px !important; /* 원하는 높이 */
}

/* 헤더 구분선 */
/* 상단 필터 영역 (갱신시간 + 필터줄 전체) */
.sc-header {
    padding: 0;
    margin: 0; /* margin-bottom:55 제거 */
    min-height: 64px; /* 영역 높이 64px */
    border-bottom: 2px solid var(--mud-palette-lines-default, rgba(0,0,0,.08));
    box-sizing: border-box;
}

/* 아래 범례 구분선 */
.sc-table .sc-no-topline,
.sc-table .sc-no-topline * {
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.sc-table .sc-pager-topline {
    border-top: 2px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
    min-height: 55px; /* 원하는 55px 높이 */
    display: flex;
    align-items: center; /* 내용 수직 가운데 정렬 */
    background: transparent;
    box-sizing: border-box;
}

.sc-no-topline * {
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}



.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}


/* 테이블 위/아래 여백 */
.sc-table {
    margin-top: 0px;
    margin-bottom: 0px;
}

    .sc-table .mud-table-cell {
        padding-left: 6px !important;
        padding-right: 6px !important; /* 기본이 16px 정도라서 많이 줄어듦 */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

/* MudTable: 정렬 아이콘 영역 통일 */
.mud-table th .mud-table-sort-label {
    position: relative;
    padding-left: 22px;  /*정렬 아이콘이 들어가는 영역 확보 */
}

/*.time-life-bar {
    --bar-color: #cfd8dc;*/ /* 기본 회색 */
/*}*/

/* 전체 트랙(뒤 배경) */
.time-life-bar.mud-progress-linear {
    background-color: var(--track-color, #EBEBEB) !important; /* 기본값 회색 */
}

/* 채워지는 바 */
.time-life-bar .mud-progress-linear-bar {
    background-color: var(--bar-color, #787878) !important; /* 기본값 파랑 */
}

/* 드롭다운 리스트 아이템 높이 */
.mud-popover .mud-list-item {
    min-height: 20px;
    min-width: 20px;
}


    /* 정렬 비활성 상태에서는 빈 공간(가짜 아이콘) 넣기 */
    /*.mud-table th .mud-table-sort-label:not(.mud-table-sort-label-active)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0px;*/ /* 정렬 아이콘 크기 */
        /*height: 12px;
    }*/

/*.sc-table .mud-table-footer,
.sc-table .mud-table-pagination {
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}*/

/*.sc-title .mud-typography {
    line-height: 1.2;
}*/

/* 요약 칩 스크롤 */
/*.sc-table .sc-legend-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
}*/









/* 선택된 값(1라인, 2라인) 텍스트만 줄이기 */
.sc-select-small .mud-select-input,
.sc-select-small .mud-input-root {
    font-size: 0.85rem !important;
    font-weight:500;
    /*padding: 0px;*/ /*정렬 아이콘이 들어가는 영역 확보 */
    /*padding-bottom: 0px;*/ /*정렬 아이콘이 들어가는 영역 확보 */
}

/* 라벨(위에 작은 "라인" 글자)도 같이 줄이고 싶으면 */
.sc-select-small .mud-input-label {
    font-size: 0.85rem !important;
    font-weight: 500;
}

/* 모바일 (가로 960px 이하)에서만 한 로봇과 다음 로봇 사이 선을 두껍게 */
@media (max-width: 960px) {

    /* 기본 테이블 보더는 그대로 두고, 우선 전체 셀의 보더 두께를 0으로 */
    .sc-table .mud-table-body .mud-table-row > td {
        border-bottom-width: 0 !important;
    }

        /* 각 행의 마지막 셀에만 두꺼운 보더 => 로봇과 로봇 사이 구분선 1줄 */
        .sc-table .mud-table-body .mud-table-row > td:last-child {
            border-bottom-width: 3px !important;
        }
}







/*로그인*/

/* 로그인 페이지 레이아웃 */
.login-page-root {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a, #111827);
    color: #fff;
}

/* 왼쪽: 브랜드/슬로건 */
.login-hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.login-hero-inner {
    max-width: 420px;
}

.login-slogan {
    font-style: italic;
}

.login-hero-text {
    opacity: 0.9;
}

/* 오른쪽: 로그인 카드 영역 */
.login-card-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(15, 23, 42, 0.7);
}

.login-card {
    width: 100%;
    max-width: 380px;
    border-radius: 16px;
    padding: 28px 28px 24px 28px;
}

/* 작은 화면(모바일/태블릿)에서는 위아래로 배치 */
@media (max-width: 960px) {
    .login-page-root {
        flex-direction: column;
        padding: 16px;
    }

    .login-hero {
        padding: 24px 16px 8px 16px;
        text-align: center;
    }

    .login-card-wrapper {
        padding: 16px;
        background: transparent;
    }

    .login-card {
        max-width: 100%;
    }
}











/* ##############Chip########### */

/*.mud-chip.sc-legend-chip {
    border-radius: 2px !important;
}*/

/* 범례 칩 공통 스타일 */
.sc-legend-chip {
    border-radius: 2px !important;
    border: none;
    padding: 4px 12px;
    font-size: 0.875rem !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

/* ===== 색상 예시 (원하는 코드로 교체 가능) ===== */

/* 에러 정지 */
.sc-legend-error {
    color: #BA374E; /* 글자색 (진한 빨강) */
    background-color: #FFD2DB; /* 연한 빨강 배경 */
    border-left: 2px solid #FB617F;
}

/* 예지 보전 */
.sc-legend-ai {
    color: #105AF0; /* 파랑 글자 */
    background-color: #DBE7FF; /* 연파랑 배경 */
    border-left: 2px solid #4983FB;
}

/* 예방 보전 */
.sc-legend-pm {
    color: #0A7A60; /* 초록 글자 */
    background-color: #E9F8F5; /* 연초록 배경 */
    border-left: 2px solid #30D8B1;
}

/* 알람 빈발 */
.sc-legend-alarm {
    color: #6C2B93; /* 보라 글자 */
    background-color: #FCDDFF; /* 연보라 배경 */
    border-left: 2px solid #C274F2;
}

/* 효율 저하 */
.sc-legend-eff {
    color: #D05101; /* 회색 글자 */
    background-color: #FFF4E6; /* 연회색 배경 */
    border-left: 2px solid #FFAE7B;
}

/* 혹시 매핑 안 된 기본값 */
.sc-legend-default {
    color: #455a64;
    background-color: #eceff1;
    border-left: 2px solid #90a4ae;
}

/* ##############Chip########### */

.diag-row {
    display: flex;
    flex-wrap: nowrap; /* 줄 바꿈 안 되게 */
    justify-content: flex-start;
    align-items: center;
}

.diag-more {
    color: #757575;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

    .diag-more .mud-typography-caption {
        font-weight: 500 !important;
    }










   /*앱바*/
.sc-title-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sc-title-block {
    display: flex;
    flex-direction: column;
}

.appbar-tabs {
    display: flex;
    gap: 0px;
    align-items: flex-end;
}

.appbar-tab {
    position: relative;
    background: transparent;
    border: none;
    padding: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #575656;
    cursor: pointer;
}

    .appbar-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5px;
        border-radius: 999px;
        background-color: #f0f0f0;
    }

    .appbar-tab.active::after {
        background-color: #1A73E8;
    }

.mud-toolbar-appbar .appbar-bottom {
    align-self: flex-end !important; /* 이 블럭만 아래 정렬 */
}





/*라벨*/
.sc-label-15-m {
    font-size: 0.9375rem; /* ≒ 15px (15 / 16) */
    font-weight: 500; /* Medium */
}

.sc-label-14-m {
    font-size: 0.875rem; /* ≒ 15px (15 / 16) */
    font-weight: 500; /* Medium */
}

.sc-label-28-sb {
    font-size: 1.75rem; /* ≒ 15px (15 / 16) */
    font-weight: 600; /* Medium */
}

.sc-label-20-sb {
    font-size: 1.25rem; /* ≒ 15px (15 / 16) */
    font-weight: 500; /* Medium */
}

.sc-label-gray {
    color: #808080 !important;
}

.sc-label-basic {
    color: #292D32 !important;
}

.sc-label-logo {
    color: #575656 !important;
}

    .sc-label-logo .mud-icon-root {
        height: 1.35em;
        width: 1.2em;
        margin-top: 2px;
    }