/* ============================================
   FIM Console - 스타일시트
   ============================================ */

/* ── 1. 페이지 전체 기본 설정 ── */
body {
    font-family: Arial, sans-serif;   /* 글꼴을 깔끔한 고딕체로 */
    max-width: 900px;                 /* 페이지 최대 너비 900px */
    margin: 0 auto;                   /* 페이지를 화면 가운데 정렬 */
    padding: 20px;                    /* 페이지 가장자리에 여백 */
    background-color: #f5f5f5;        /* 배경색 연한 회색 */
}

/* ── 2. 제목 스타일 ── */
h1 {
    text-align: center;               /* 큰 제목 가운데 정렬 */
    color: #333;                      /* 글자색 진한 회색 */
}

h2 {
    color: #555;                      /* 소제목 색상 */
    border-bottom: 2px solid #ddd;    /* 소제목 아래 밑줄 */
    padding-bottom: 5px;              /* 밑줄과 글자 사이 간격 */
    margin-top: 30px;                 /* 소제목 위쪽 간격 */
}

/* ── 3. 표(테이블) 공통 스타일 ── */
table {
    width: 100%;                      /* 표 너비를 페이지 꽉 채우기 */
    border-collapse: collapse;        /* 테두리 겹침 제거 */
    background-color: white;          /* 표 배경색 흰색 */
}

th, td {
    border: 1px solid #ddd;           /* 셀 테두리 연한 회색 */
    padding: 10px 15px;               /* 셀 안쪽 여백 */
    text-align: center;               /* 텍스트 가운데 정렬 */
}

th {
    background-color: #f0f0f0;        /* 제목 행 배경색 */
    font-weight: bold;                /* 제목 행 굵은 글씨 */
}

/* 마우스를 올린 행 하이라이트 */
tbody tr:hover {
    background-color: #f9f9f9;
}

/* ── 4. 상태 표시 색상 ── */
.status-online {
    color: green;                     /* ONLINE은 초록색 */
    font-weight: bold;
}

.status-offline {
    color: red;                       /* OFFLINE은 빨간색 */
    font-weight: bold;
}

/* ── 5. Command Panel 스타일 ── */
.command-panel {
    background-color: white;          /* 패널 배경 흰색 */
    padding: 15px;                    /* 안쪽 여백 */
    border: 1px solid #ddd;           /* 테두리 */
    border-radius: 5px;               /* 모서리 둥글게 */
    display: flex;                    /* 가로로 나란히 배치 */
    align-items: center;              /* 세로 가운데 정렬 */
    gap: 10px;                        /* 요소 사이 간격 */
}

select, input[type="text"] {
    padding: 8px;                     /* 안쪽 여백 */
    border: 1px solid #ccc;           /* 테두리 */
    border-radius: 4px;               /* 모서리 둥글게 */
    font-size: 14px;                  /* 글자 크기 */
}

input[type="text"] {
    flex: 1;                          /* 남은 공간을 입력칸이 다 차지 */
}

button {
    padding: 8px 16px;                /* 안쪽 여백 */
    border: 1px solid #ccc;           /* 테두리 */
    border-radius: 4px;               /* 모서리 둥글게 */
    background-color: #f8f8f8;        /* 배경색 */
    cursor: pointer;                  /* 마우스 올리면 손가락 모양 */
    font-size: 14px;                  /* 글자 크기 */
    white-space: nowrap;              /* 버튼 텍스트 줄바꿈 방지 */
}

button:hover {
    background-color: #e8e8e8;        /* 마우스 올렸을 때 색 변화 */
}

/* ── 6. 이벤트 유형별 색상 ── */
.event-ok {
    color: green;
    font-weight: bold;
}

.event-modified {
    color: orange;
    font-weight: bold;
}

.event-deleted {
    color: red;
    font-weight: bold;
}

.event-created {
    color: blue;
    font-weight: bold;
}