/* 로그 관리 페이지 전용 CSS입니다. 이 파일을 수정하면 로그 관리 화면에만 적용됩니다. */
/* 선택자 주석은 어느 화면 요소인지, 속성 주석은 어떤 값을 바꾸는지 설명합니다. */

/* 로그 관리: .log-table-wrap 선택자의 표에 적용됩니다. */
.log-table-wrap {
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
  /* 넘치는 내용 처리 방식을 auto로 설정합니다. */
  overflow: auto;
}

/* 로그 관리: .log-detail-dialog 선택자의 팝업창에 적용됩니다. */
.log-detail-dialog {
  /* 기본 너비를 min(980px, calc(100vw - 48px))로 지정합니다. */
  width: min(980px, calc(100vw - 48px));
}



/* 로그인 기록 및 보안 관리 */
.system-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #d7e2f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 55, 96, 0.06);
}

.system-log-toolbar p {
  margin: 0 6px 0 0;
  color: #65758a;
  font-size: 13px;
}

.system-log-tabs {
  display: flex;
  gap: 8px;
}

.system-log-tabs button {
  min-width: 132px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid #cbd9ea;
  border-radius: 9px;
  background: #f5f8fc;
  color: #33445b;
  font-weight: 800;
  cursor: pointer;
}

.system-log-tabs button.is-active {
  border-color: #0d57c8;
  background: #0d57c8;
  color: #fff;
  box-shadow: 0 6px 14px rgba(13, 87, 200, 0.22);
}

.system-log-card-head > div h3,
.system-log-card-head > div p {
  margin: 0;
}

.system-log-card-head > div p {
  margin-top: 4px;
  color: #77869a;
  font-size: 12px;
  font-weight: 500;
}

.system-log-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.system-activity-log-table {
  min-width: 1120px;
}

.system-login-log-table {
  min-width: 1380px;
}

.system-login-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 16px 2px;
}

.system-login-summary article {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 15px 16px;
  border: 1px solid #dce6f1;
  border-radius: 10px;
  background: #f8fbff;
}

.system-login-summary article span,
.system-login-summary article small {
  color: #708097;
  font-size: 12px;
}

.system-login-summary article strong {
  color: #12365f;
  font-size: 25px;
  line-height: 1;
}

.system-login-summary article.is-success { background: #f1fbf5; border-color: #ccebd8; }
.system-login-summary article.is-success strong { color: #18864b; }
.system-login-summary article.is-failure { background: #fff6f5; border-color: #f4d4d0; }
.system-login-summary article.is-failure strong { color: #c43f33; }
.system-login-summary article.is-locked { background: #fff9eb; border-color: #f2dfac; }
.system-login-summary article.is-locked strong { color: #b77900; }
.system-login-summary article.is-suspended { background: #fff1f1; border-color: #efc4c4; }
.system-login-summary article.is-suspended strong { color: #a92727; }

.system-login-policy-note {
  margin: 0 16px 14px;
  padding: 11px 14px;
  border: 1px solid #d8e5f4;
  border-radius: 8px;
  background: #eef6ff;
  color: #345578;
  font-size: 12px;
  font-weight: 700;
}

.login-result-pill,
.login-security-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.login-result-pill.is-success,
.login-security-pill.is-active {
  background: #ddf6e7;
  color: #167c45;
}

.login-result-pill.is-failure,
.login-security-pill.is-suspended,
.login-security-pill.is-disabled {
  background: #fde5e3;
  color: #b3322a;
}

.login-security-pill.is-locked,
.login-security-pill.is-warning {
  background: #fff0c9;
  color: #966400;
}

.login-security-pill.is-unknown {
  background: #edf1f6;
  color: #607086;
}

.system-login-unlock {
  border-color: #d99024;
  color: #9a5c00;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .system-login-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .system-log-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .system-log-toolbar p {
    margin: 0 4px 2px;
  }

  .system-log-tabs {
    width: 100%;
  }

  .system-log-tabs button {
    flex: 1;
    min-width: 0;
  }

  .system-login-summary {
    gap: 8px;
    padding: 12px 12px 2px;
  }

  .system-login-summary article {
    min-height: 82px;
    padding: 12px;
  }

  .system-login-summary article:last-child {
    grid-column: 1 / -1;
  }

  .system-login-policy-note {
    margin: 0 12px 12px;
    line-height: 1.55;
  }
}