/* KMRENT Terminal(equipment_tracker/static/style.css)의 변수명/클래스/구조를
   그대로 따라간다. 두 시스템은 독립적으로 운영하지만(코드를 import 하지 않는다),
   **한쪽 구조만 고치고 양쪽에 동기화**할 수 있어야 하므로 클래스 이름과
   마크업 구조는 일부러 같게 유지한다.

   그래서 여기서 클래스 이름을 마음대로 바꾸면 안 된다 - 바꿔야 한다면
   양쪽을 같이 바꾼다. 이 프로젝트에만 있는 것(자료실 탭)은 그 아래
   "자료실" 구획에 따로 모아두었다. CONVENTIONS.md 참고. */
:root {
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --border: #dde2e8;
  --text: #1f2937;
  --text-muted: #6b7280;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --header-bg: #eef2f7;
  --ok-text: #15803d;
  font-family: "Malgun Gothic", "Segoe UI", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }

/* 숨김은 이 클래스 하나로만 한다. display 를 지정한 요소는 반드시 짝 규칙
   (.xxx.hidden { display: none; })을 같이 둘 것 - 특이도가 같아서 나중에
   선언된 display 가 이긴다. CONVENTIONS.md 3장 참고. */
.hidden { display: none; }

/* ---------------- 버튼 (Terminal 과 동일) ---------------- */
.btn {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--header-bg); color: var(--text); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #fbcfcf; }
.btn-small { padding: 4px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.spacer { flex: 1; }

/* ---------------- 로그인 화면 (Terminal 과 동일) ---------------- */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
/* .hidden 과 특이도가 같아서 나중에 선언된 display:flex 가 이겨버린다.
   이 줄이 없으면 로그인에 성공해도 로그인 화면이 안 걷힌다. */
.login-screen.hidden { display: none; }
.login-box {
  background: var(--card-bg);
  border: 1px solid #17497a;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  width: 380px;
  overflow: hidden;
}
.login-titlebar {
  background: linear-gradient(to bottom, #3a7fc1, #1c5a94);
  padding: 12px 16px;
  border-bottom: 1px solid #17497a;
}
.login-title {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.login-subtitle {
  color: rgba(255,255,255,.75);
  font-size: 12px;
  margin-left: 8px;
}
.login-body { padding: 22px 24px 24px; }
.login-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.login-field-row label {
  width: 78px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
}
.login-field-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
}
.login-field-row input:focus {
  outline: none;
  border-color: #3a7fc1;
  box-shadow: 0 0 0 2px rgba(58,127,193,0.25);
}
.login-submit-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(to bottom, #3a7fc1, #1c5a94);
  color: #fff;
  padding: 9px;
}
.login-submit-btn:hover { background: linear-gradient(to bottom, #4a8fd1, #2c6aa4); }
.login-error { color: var(--danger); font-size: 12px; margin: 0 0 10px; text-align: center; }

/* ---------------- 상단 탭바 (Terminal 과 동일) ---------------- */
.top-level-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 20px 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}
.top-level-tabs .account-bar { padding-bottom: 8px; }
.top-level-tabs-scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  /* overflow-x 만 auto 로 두면 overflow-y 가 visible -> auto 로 계산돼서,
     .active 탭의 top:1px 만큼 넘친 걸로 보고 세로 스크롤바가 생긴다.
     명시적으로 잘라준다. */
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
}
.top-level-tabs-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.top-level-tab {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg);
  color: var(--text-muted);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.top-level-tab:hover { background: var(--border); }
.top-level-tab.active {
  background: var(--card-bg);
  color: var(--text);
  position: relative;
  top: 1px;
}
.account-bar { display: flex; align-items: center; gap: 8px; }
.account-info { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.top-view.hidden { display: none; }

@media (max-width: 700px) {
  .top-level-tabs { flex-wrap: wrap; }
  .top-level-tabs-scroll { flex: 1 1 100%; order: 1; }
  .top-level-tabs-right { flex: 1 1 100%; order: 2; justify-content: flex-end; padding-bottom: 6px; flex-wrap: wrap; }
  .account-bar .btn { white-space: nowrap; }   /* 폰 폭에서 계정관리·로그아웃이 세로 한 글자씩 깨지지 않게 (부품-#271) */
}
/* 모바일 탭 = 화면 아래 고정 줄 (부품-#313 · #314): 탭 3개가 폭을 나눠 갖고 오른쪽 끝에 톱니(설정) 하나.
   서버관리·계정관리·로그아웃은 톱니 메뉴 안으로(원래 단추는 감춰 두고 메뉴가 대신 누른다). ?mobile=1 강제 모드는 420px 기둥 안에. 새 창(viewer-only)엔 없음 */
.top-level-gear, .mobile-menu { display: none; }
body.is-mobile:not(.viewer-only) #appShell { padding-bottom: 60px; }
body.is-mobile:not(.viewer-only) .top-level-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0; gap: 0; border-top: 1px solid var(--border); border-bottom: 0; background: var(--card-bg); }
body.force-mobile:not(.viewer-only) .top-level-tabs { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
body.is-mobile:not(.viewer-only) .top-level-tabs-scroll { flex: 1 1 auto; overflow: hidden; }
body.is-mobile:not(.viewer-only) .top-level-tab { flex: 1 1 0; border: 0; border-radius: 0; background: transparent; padding: 12px 4px 14px; font-size: 13px; text-align: center; top: 0; }
body.is-mobile:not(.viewer-only) .top-level-tab.active { color: var(--link, #1a5fb4); box-shadow: inset 0 3px 0 var(--link, #1a5fb4); background: transparent; }
body.is-mobile:not(.viewer-only) .top-level-tabs-right { display: none; }
body.is-mobile:not(.viewer-only) .top-level-gear { display: block; flex: 0 0 48px; height: 48px; border: 0; border-left: 1px solid var(--border); background: transparent; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit; }
body.is-mobile:not(.viewer-only) .mobile-menu { display: block; position: fixed; right: 8px; bottom: 56px; z-index: 41; min-width: 160px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); padding: 6px 0; }
body.force-mobile:not(.viewer-only) .mobile-menu { right: calc(50% - 210px + 8px); }
body.is-mobile .mobile-menu.hidden { display: none; }
.mobile-menu-who { padding: 6px 14px 8px; font-size: 11.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.mobile-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 14px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.mobile-menu button:hover { background: var(--header-bg); }
.mobile-menu button.hidden { display: none; }
body.is-mobile .etc-subtabs { padding: 6px 8px 0; }
body.is-mobile .etc-body { padding: 6px 8px 12px; }

/* ---------------- 역할 게이트 (셸 공통) ----------------
   열람전용 계정에게는 편집용 컨트롤을 일괄로 감춘다. 탭이 늘어나도
   버튼에 .edit-only 만 붙이면 되므로 JS 에서 역할을 다시 볼 일이 없다.
   (Terminal 의 body.role-viewer 방식과 같다) */
body.role-viewer .edit-only { display: none !important; }

/* ---------------- 서버관리(계정) ----------------
   KMRENT Terminal 의 서버관리 탭과 같은 클래스/구조를 쓴다. 화면을 한쪽만
   고치고 양쪽에 동기화할 수 있게 하려는 것이다. 클래스 이름을 바꾸면
   그 동기화가 깨지므로 반드시 양쪽을 같이 본다. */
.server-view-body { padding: 18px 20px 60px; max-width: none; }
.server-view-body h2 { margin: 0 0 16px; }
.table-scroll { overflow-x: auto; }

.users-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 16px; }
.users-table th, .users-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  font-size: 13px;
  text-align: left;
  overflow: hidden;
}
.users-table th { color: var(--text-muted); font-weight: 600; }
.users-table col.col-username { width: 9%; }
.users-table col.col-email { width: 16%; }
.users-table col.col-phone { width: 11%; }
.users-table col.col-position { width: 8%; }
.users-table col.col-department { width: 11%; }
.users-table col.col-company { width: 11%; }
.users-table col.col-role { width: 11%; }
.users-table col.col-created { width: 8%; }
/* Terminal 은 12% 인데 여기는 15% 다 - 이 시스템에만 있는 "정지/복구" 버튼이
   하나 더 들어가기 때문. 동기화할 때 유일하게 다른 지점이므로 CONVENTIONS.md
   의 "알려진 차이" 항목과 같이 본다. (company 를 14%->11% 로 줄여 합은 100%) */
.users-table col.col-actions { width: 15%; }
.users-table select {
  font-family: inherit; font-size: 12px; padding: 4px 6px; width: 100%;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text);
}
.users-add-title { font-size: 14px; margin: 0 0 8px; }
.users-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.users-pw-input {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; font-size: 12px; width: 90px; box-sizing: border-box;
}
.users-contact-input {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; font-size: 12px; width: 100%; box-sizing: border-box;
}
.users-row-off td { background: var(--danger-bg); }

.add-user-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-user-form input {
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; font-family: inherit;
}
.add-user-form select {
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; font-family: inherit; background: #fff; color: var(--text);
}
.hint { color: var(--text-muted); font-size: 12px; margin: 8px 0 0; }

/* ---------------- 모달 (Terminal 과 동일 구조) ----------------
   .modal-backdrop 하나 안에 .modal 여러 개를 형제로 두고, 열 때 backdrop 과
   해당 modal 에서 .hidden 을 걷는다. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-backdrop.hidden { display: none; }
.modal.hidden { display: none; }   /* 위와 같은 이유 - 아래 display:flex 를 이겨야 한다 */
.modal {
  background: white;
  border-radius: 10px;
  width: 480px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-header-actions { display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 16px 18px; overflow-y: auto; overflow-x: hidden; }
.btn-icon {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
}
.btn-icon:hover { background: var(--danger-bg); color: var(--danger); }

.my-account-form { display: flex; flex-direction: column; gap: 6px; width: 320px; }
.my-account-form label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.my-account-form input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.my-account-form input:disabled { background: var(--header-bg); color: var(--text-muted); }
.my-account-form button { margin-top: 14px; }
.my-account-saved { color: var(--ok-text); font-size: 12px; margin: 0; }

/* ---------------- 토스트 ---------------- */
.toast.hidden { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 6px;
  font-size: 13px; z-index: 300; box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.toast.bad { background: var(--danger); }

@media (max-width: 640px) {
  .c-date, .c-size { display: none; }
  .uploads { left: 20px; width: auto; }
}