/* =========================================================
 * SWeeper Lite 데모 전용 보조 스타일
 * - design(common.css)의 변수/컴포넌트 위에 얹는 최소 오버라이드
 * ========================================================= */

/* 로고: 원본은 배경이미지 + 텍스트 숨김 → 데모는 텍스트 로고로 교체 */
.admin_header .logo,
.admin_header .logo.admin {
    display: flex;
    align-items: center;
    background: none;
    aspect-ratio: auto;
    padding-right: .5rem;
}
.admin_header .logo p {
    overflow: visible;
    text-indent: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-key);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.admin_header .logo.admin::after { content: none; }

/* 헤더 업체 선택(통합관리자) / 업체 표시(서브관리자) */
.admin_header .company-scope {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border: 1px solid var(--color-bd2, #ddd);
    border-radius: 2rem;
    background: var(--color-bg0, #fff);
}
.admin_header .company-scope .mso {
    font-size: 1.125rem;
    color: var(--color-key);
}
.admin_header .company-scope select {
    border: none;
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.admin_header .company-scope.fixed p {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--color-txt2, #333);
}

/* ---------- 대시보드 스탯 카드 ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--gap, 1rem);
    width: 100%;
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: var(--color-bg1, #fff);
    box-shadow: 0 0 .5rem #0001;
    border-top: 3px solid var(--color-key);
}
/* 'alert'/'warn'은 디자인 CSS의 알림 컴포넌트와 클래스 충돌 → is- 접두사 사용 */
.stat-card.is-alert { border-top-color: var(--color-alert, #e5484d); }
.stat-card.is-warn  { border-top-color: var(--color-warning, #f5a524); }
.stat-card .label {
    font-size: .75rem;
    color: var(--color-txt5, #888);
    display: flex;
    align-items: center;
    gap: .25rem;
}
.stat-card .label .mso { font-size: 1rem; }
.stat-card .value {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.1;
}
.stat-card .value small {
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-txt5, #888);
    margin-left: .25rem;
}
.stat-card .detail {
    font-size: .75rem;
    color: var(--color-txt4, #666);
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

/* ---------- 준수율 바 ---------- */
.compliance-bar {
    display: flex;
    width: 100%;
    height: .875rem;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--color-bg2, #eee);
}
.compliance-bar .seg { height: 100%; }
.compliance-bar .seg.legal   { background: var(--color-posi2, #38b26a); }
.compliance-bar .seg.temp    { background: var(--color-warning, #f5a524); }
.compliance-bar .seg.illegal { background: var(--color-alert, #e5484d); }
.compliance-legend {
    display: flex;
    gap: 1rem;
    font-size: .75rem;
    color: var(--color-txt4, #666);
    margin-top: .5rem;
}
.compliance-legend i {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    margin-right: .25rem;
    vertical-align: -1px;
    font-style: normal;
}
.compliance-legend .legal i   { background: var(--color-posi2, #38b26a); }
.compliance-legend .temp i    { background: var(--color-warning, #f5a524); }
.compliance-legend .illegal i { background: var(--color-alert, #e5484d); }

/* ---------- 데모 패널 (widget을 서브페이지에서도 쓰기 위한 최소 정의) ---------- */
.demo-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: var(--color-bg1, #fff);
    box-shadow: 0 0 .5rem #0001;
}
.demo-panel > .panel-title {
    font-size: .9375rem;
    font-weight: 700;
}
.demo-panel .empty {
    padding: 1.5rem 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--color-txt5, #999);
}
.dashboard-row.demo,
.sub .demo-row {
    display: flex;
    gap: var(--gap, 1rem);
    align-items: stretch;
    width: 100%;
}
.sub .demo-row > * { flex: 1 1 0; min-width: 0; }

/* ---------- 장비 상세 속성창(슬라이드 패널) ---------- */
.side-detail {
    position: fixed;
    top: var(--grid-top, 3.125rem);
    right: 0;
    bottom: 0;
    width: 26rem;
    max-width: 90vw;
    background: var(--color-bg1, #fff);
    box-shadow: -0.25rem 0 1rem #0002;
    transform: translateX(100%);
    transition: transform .25s;
    z-index: 90;
    display: flex;
    flex-direction: column;
}
.side-detail.open { transform: translateX(0); }
.side-detail > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--color-bd2, #eee);
}
.side-detail > header p { font-weight: 700; }
.side-detail > header .close {
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-txt5, #888);
}
.side-detail > main {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.side-detail dl.props {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .375rem .5rem;
    font-size: .8125rem;
}
.side-detail dl.props dt { color: var(--color-txt5, #888); }
.side-detail dl.props dd { font-weight: 600; word-break: break-all; }
.side-detail .section-title {
    font-size: .8125rem;
    font-weight: 700;
    padding-top: .5rem;
    border-top: 1px dashed var(--color-bd2, #eee);
}

/* ---------- 로그인: 텍스트 로고/워터마크 정리 ---------- */
/* 원본은 AI Cloud Manager 이미지 로고 + 하단 client(DEMO) 워터마크 → 데모 브랜딩으로 교체 */
.admin_login .row::after { content: none !important; }
.admin_login .row > .head > .logo {
    background: none;
    height: auto;
}
.admin_login .row > .head > .logo p {
    overflow: visible;
    text-indent: 0;
    width: auto;
    height: auto;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-key);
}

/* ---------- 로그인: 역할별 페이지 ---------- */
.admin_login .login-role-title {
    margin-top: .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-txt3, #444);
}
.admin_login .login-role-title.super { color: var(--color-key); }
.cross-login-link {
    color: var(--color-key);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- 로그인: 역할 선택 ---------- */
.role-pick {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}
.role-pick button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--color-bd2, #ddd);
    border-radius: .5rem;
    background: var(--color-bg0, #fff);
    cursor: pointer;
    font-size: .875rem;
    transition: border-color .2s, background .2s;
    text-align: left;
}
.role-pick button:hover { border-color: var(--color-key); }
.role-pick button.selected {
    border-color: var(--color-key);
    background: color-mix(in srgb, var(--color-key) 8%, #fff);
}
.role-pick button strong { font-weight: 700; }
.role-pick button span {
    font-size: .75rem;
    color: var(--color-txt5, #888);
}

/* ---------- 대시보드 차트 (순수 SVG) ---------- */
.chart-panel .chart-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 12rem;
}
.chart-box svg { width: 100%; max-height: 13rem; }
.chart-donut { max-width: 12rem; }
.donut-center {
    font-size: 1.5rem;
    font-weight: 800;
    fill: var(--color-txt7, #222);
}
.donut-sub {
    font-size: .7rem;
    fill: var(--color-txt5, #888);
}
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem 1rem;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--color-txt4, #666);
}
.chart-legend i {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: -1px;
}
.bar-value {
    font-size: .7rem;
    font-weight: 700;
    fill: var(--color-txt6, #444);
}
.bar-label, .bar-sublabel, .axis-label {
    font-size: .65rem;
    fill: var(--color-txt5, #888);
}

/* ---------- 통합관리자: 특정 업체(서브관리자) 범위 조회 배너 ---------- */
.scope-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .625rem 1rem;
    margin-bottom: var(--gap, 1rem);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--color-key) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-key) 35%, #fff);
    font-size: .8125rem;
}
.scope-banner .mso { color: var(--color-key); font-size: 1.125rem; }
.scope-banner p { flex: 1; }
.scope-banner .sub-info { color: var(--color-txt5, #888); }
.scope-banner button {
    padding: .3rem .75rem;
    border-radius: .3rem;
    border: 1px solid var(--color-key);
    color: var(--color-key);
    background: var(--color-bg0, #fff);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}
.scope-banner button:hover { background: var(--color-key); color: #fff; }

/* ---------- 목록 상단 버튼 그룹 간격 ---------- */
.board-utility fieldset.cta {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---------- 반응형 보강 ---------- */
.board-list {
    width: 100%;
    overflow-x: auto;
}
.board-list table { min-width: 46rem; }
@media (max-width: 1100px) {
    .dashboard .demo-row,
    .sub .demo-row { flex-wrap: wrap; }
    .side-detail { width: 100vw; max-width: 100vw; }
}

/* ---------- 컬럼 정렬 ---------- */
.board-list th.sortable {
    cursor: pointer;
    user-select: none;
}
.board-list th.sortable:hover {
    color: var(--color-key);
}

/* ---------- 기타 ---------- */
.board-list td.num, .board-list th.num { text-align: right; }
.board-list tbody tr.clickable { cursor: pointer; }
.board-list tbody tr.clickable:hover td { background: color-mix(in srgb, var(--color-key) 6%, transparent); }
.text-muted { color: var(--color-txt5, #999); font-size: .75rem; }
.mini-actions { display: flex; gap: .375rem; justify-content: center; padding: .375rem .25rem; }
/* 디자인 CSS가 버튼 있는 td에 padding:0 + button margin:-.625rem(단일 버튼 전제)을 줘서
   다중 버튼이 겹침 → mini-actions 내부에서는 해제 */
.mini-actions button { margin: 0 !important; }
.mini-actions button {
    padding: .25rem .625rem;
    font-size: .75rem;
    border-radius: .25rem;
    cursor: pointer;
    border: 1px solid var(--color-bd2, #ccc);
    background: var(--color-bg0, #fff);
}
.mini-actions button.ok { border-color: var(--color-posi2, #38b26a); color: var(--color-posi2, #38b26a); }
.mini-actions button.no { border-color: var(--color-alert, #e5484d); color: var(--color-alert, #e5484d); }
.mini-actions button:disabled { opacity: .4; cursor: default; }