@charset "UTF-8";
/*
    대시보드 (/dashboard/dash)

    탭 둘.
      금일 현황 : 금일 휴가 · 금일 미팅 / AI 재학습 · SSL 갱신 (각각 반반)
      감시 상태 : 서버 → 소프트웨어 (카드가 가로로 흐르고 넘치면 줄바꿈)

    고객사 · 체크리스트는 고객사대시보드(dashboard_customer.css)로 옮겼다.

    .content 가 height:calc(100vh - 64px) 로 잘려 있어서, 안쪽 영역마다
    높이 상한을 주고 각자 스크롤하게 만든다 (안 그러면 넘친 부분이 안 보인다).
*/

.od-page{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ── 공통 조각 ─────────────────────────────────────────── */

.od-page h2{ font-size:17px; font-weight:700; color:#1b2b46; margin:0; }
.od-page h3{ font-size:15px; font-weight:700; color:#1b2b46; margin:0; }
.od-page h4{ font-size:14px; font-weight:700; color:#1b2b46; margin:0; }

.od-cnt{
    display:inline-block; min-width:24px; margin-left:6px; padding:0 7px;
    background:#eef3fa; color:#0a529d; border-radius:11px;
    font-size:13px; font-weight:700; text-align:center;
}

.od-empty{
    padding:24px 10px; color:#8a94a6; font-size:14px; text-align:center; line-height:1.6;
}

.od-hint{ color:#8a94a6; font-size:12px; }
.od-chkdt{ color:#6b7688; font-size:12px; }

.od-badge{
    display:inline-flex; align-items:center; gap:4px;
    height:26px; padding:0 10px; border-radius:13px;
    font-size:12px; font-weight:600;
}
.od-badge--off{ background:#fdecee; color:#c9313d; }
.od-badge--off b{ font-size:13px; }

/* 항목 종류 배지 — AI 재학습 기산일이 되는 항목 */
.od-kind{
    display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px;
    font-size:11px; font-weight:700; white-space:nowrap;
}
.od-kind--ai{    background:#e8f1ff; color:#1359c0; }
.od-kind--route{ background:#fff3e0; color:#b06a00; }

/* 금일 휴가 — 연차(하루 종일)와 반차는 자리 비우는 정도가 달라 색을 나눈다 */
.od-kind--vac{     background:#fdecee; color:#c9313d; }
.od-kind--vachalf{ background:#fff1e3; color:#b3600f; }
/* 금일 업무 — 업무일정 달력의 내부 청록 · 외부 보라 · 업무 남색과 맞춘다.
   연한 바탕은 흰 카드 위에서 안 보여 진한 바탕 + 흰 글씨로 둔다 */
.od-kind--int{  background:#1f6f66; color:#fff; }
.od-kind--ext{  background:#5b34a0; color:#fff; }
.od-kind--work{ background:#3a5772; color:#fff; }

/* ── 탭 ────────────────────────────────────────────────── */

.od-tabs{
    display:flex; align-items:center; gap:6px;
    border-bottom:1px solid #e3e8f0; padding-bottom:10px;
}
.od-tabs__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.od-tab{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 16px; border:1px solid #dfe5ee; border-radius:20px;
    background:#fff; color:#41506a; font-size:13px; cursor:pointer;
}
.od-tab:hover{ border-color:#9dc0ee; color:#0a529d; }
.od-tab.is-on{ background:#0a529d; border-color:#0a529d; color:#fff; font-weight:700; }

/* 다른 탭을 보고 있어도 장애를 놓치지 않게 OFF 건수를 띄운다 */
.od-tab__off{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:#d93a45; color:#fff; font-size:11px; font-weight:700;
}
.od-tab.is-on .od-tab__off{ background:#fff; color:#c9313d; }

/* 탭 내용. 감춘 쪽은 그리지 않는다 (SimpleBar 가 높이를 잘못 재지 않게 전환 후 recalc) */
.od-pane{ display:none; flex-direction:column; gap:16px; }
.od-pane.is-on{ display:flex; }

/* ── 감시 상태 탭 : 서버 · 소프트웨어 ──────────────────── */

.od-status{ display:flex; flex-direction:column; gap:12px; }

.od-sec{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:14px 16px;
}

.od-sec__head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:10px;
}
.od-sec__right{ display:flex; align-items:center; gap:10px; }

.od-cards{
    display:flex; flex-wrap:wrap; gap:10px;
    max-height:196px; overflow-y:auto;
}
.od-cards .od-empty{ flex:1 1 100%; padding:16px 10px; }

.od-card{
    flex:0 0 auto; width:250px;
    border:1px solid #e3e8f0; border-left-width:4px; border-radius:8px;
    padding:10px 12px; background:#fbfcfe;
}
.od-card__top{ display:flex; align-items:center; gap:6px; }
.od-card__nm{
    flex:1 1 auto; min-width:0; font-size:14px; color:#1b2b46;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-card__st{ font-size:12px; font-weight:700; }
.od-card__sub{
    margin-top:4px; font-size:12px; color:#6b7688;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-card__sub--url{ direction:ltr; }
.od-card__meta{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:6px; font-size:11px; color:#8a94a6;
}

.od-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }

/* 상태색 : ON 초록 · OFF 빨강 · 대기(미점검) 회색 */
.od-card.is-on{    border-left-color:#1f9d55; }
.od-card.is-on .od-dot{ background:#1f9d55; }
.od-card.is-on .od-card__st{ color:#1f9d55; }

.od-card.is-off{   border-left-color:#d93a45; background:#fff7f8; }
.od-card.is-off .od-dot{ background:#d93a45; }
.od-card.is-off .od-card__st{ color:#d93a45; }

.od-card.is-wait{  border-left-color:#b9c2d0; }
.od-card.is-wait .od-dot{ background:#b9c2d0; }
.od-card.is-wait .od-card__st{ color:#8a94a6; }

/* ── 하단 : AI 재학습 · SSL 갱신 ───────────────────────── */

.od-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.od-panel{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px;
    padding:14px 16px; min-width:0;
}
.od-panel__head{
    display:flex; align-items:baseline; gap:8px;
    padding-bottom:8px; border-bottom:1px solid #e6eaf1; margin-bottom:8px;
}
.od-panel__head i{ font-style:normal; font-size:12px; color:#8a94a6; }
.od-panel__body{ max-height:210px; overflow-y:auto; }

.od-row{
    display:grid; grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"main left" "sub left";
    align-items:center; gap:2px 10px;
    padding:8px 10px; border:1px solid #eef1f6; border-left-width:4px;
    border-radius:6px; margin-bottom:6px;
}
.od-row__main{ grid-area:main; display:flex; align-items:center; min-width:0; }
.od-row__main b{
    font-size:14px; color:#1b2b46;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-row__sub{
    grid-area:sub; font-size:12px; color:#6b7688;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-left{
    grid-area:left; flex:0 0 auto;
    padding:3px 10px; border-radius:12px;
    font-size:12px; font-weight:700; white-space:nowrap;
}

/* 금일 휴가 · 미팅 줄. 남은일자와 달리 '급한 정도' 가 없어 왼쪽 띠를 중립으로 둔다 */
.od-row.is-plain{ border-left-color:#c9d3e2; }
.od-row.is-plain .od-left{ background:#eef3fa; color:#41506a; }
.od-row__sub i{ font-style:normal; color:#5b34a0; }

/* 남은일자 : 넉넉 초록 · 임박 주황 · 지남 빨강 */
.od-row.is-ok{   border-left-color:#1f9d55; }
.od-row.is-ok   .od-left{ background:#eaf6ee; color:#1f7a45; }
.od-row.is-warn{ border-left-color:#e5920a; background:#fffdf6; }
.od-row.is-warn .od-left{ background:#fdf1dc; color:#a3670a; }
.od-row.is-over{ border-left-color:#d93a45; background:#fff7f8; }
.od-row.is-over .od-left{ background:#fdecee; color:#c9313d; }

/* ── 좁은 화면 ─────────────────────────────────────────── */

@media (max-width: 1400px){
    .od-card{ width:220px; }
}

@media (max-width: 1100px){
    .od-bottom{ grid-template-columns:1fr; }
}