/* 원본 Bootstrap 3.3.7 / AdminLTE 2.4.0 / skin-blue를 읽은 뒤 필요한 부분만 조정한다.
   원본 CSS는 legacy 폴더에 보존한다. Python 화면의 조정은 이 파일에서 관리한다. */
body { font-family: "Helvetica Neue", "Malgun Gothic", Arial, sans-serif; }
/* 원본의 레이아웃 보정 JS 없이도 긴 표를 문서 전체에서 스크롤할 수 있게 한다. */
.wrapper { height: auto; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
.main-header .logo-lg img { width: 200px; max-width: 100%; vertical-align: middle; }
.main-header .logo-mini img { width: 40px; vertical-align: middle; }
.main-header button.sidebar-toggle { border: 0; background: transparent; height: 50px; }
.header-tools { display: flex; align-items: center; height: 50px; color: white; }
.header-link { padding: 15px; color: white; font-size: 16px; }
.header-link:hover, .header-link:focus { background: #367fa9; color: white; }
.header-time { font-size: 12px; padding: 15px 10px; }
.header-time .fa { margin-right: 5px; }
.account-menu { position: relative; }
.account-menu summary { cursor: pointer; padding: 15px; line-height: 20px; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary { background: #367fa9; }
.account-menu summary > .fa:first-child { font-size: 20px; margin-right: 5px; vertical-align: middle; }
.account-menu summary > .fa:last-child { margin-left: 8px; }
.account-dropdown { position: absolute; top: 50px; right: 0; width: 280px; background: white; box-shadow: 0 6px 12px #0003; z-index: 1100; }
.account-dropdown .user-header { background: #3c8dbc; text-align: center; padding: 20px; }
.account-dropdown .user-header > .fa { font-size: 55px; }
.account-dropdown .user-header p { font-size: 17px; margin: 10px 0 0; }
.account-dropdown small { display: block; font-size: 12px; margin-top: 5px; }
.account-dropdown .user-footer { display: flex; justify-content: space-between; padding: 10px; background: #f9f9f9; }

/* 원본 트리 메뉴를 키보드로도 조작할 수 있는 버튼으로 연결한다. */
.sidebar-menu > li > button { display: flex; align-items: center; width: 100%; text-align: left; padding: 12px 15px 12px 12px; background: transparent; border: 0; border-left: 3px solid transparent; color: #b8c7ce; }
.sidebar-menu > li > button > .fa:first-child { width: 20px; }
.sidebar-menu > li > button > span { flex: 1; }
.sidebar-menu > li:hover > button, .sidebar-menu > li.active > button, .sidebar-menu > li.menu-open > button { color: white; background: #1e282c; }
.sidebar-menu > li.active > button { border-left-color: #3c8dbc; }
.tree-arrow { font-size: 12px; }
.menu-open > button .tree-arrow { transform: rotate(-90deg); }
.sidebar-menu > .menu-open > .treeview-menu { display: block; }
.sidebar-menu > li:not(.menu-open) > .treeview-menu { display: none; }
.sidebar-bottom { margin: 30px 15px 15px; border-top: 1px solid #374850; padding-top: 15px; color: #b8c7ce; }
.sidebar-bottom strong, .sidebar-bottom small { display: block; margin-bottom: 7px; }
.sidebar-bottom small { font-size: 12px; }
.sidebar-bottom .fa-circle { font-size: 9px; margin-right: 5px; }
.logout { background: transparent; border: 0; padding: 5px 0; color: #b8c7ce; font-size: 12px; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > button > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > button > .tree-arrow,
.sidebar-mini.sidebar-collapse .sidebar-bottom { display: none; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > button { padding: 12px 15px; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { display: none; }

/* AdminLTE의 박스·제목·표 배치를 사용한다. 여백은 원본 업무 화면처럼 촘촘하게 둔다. */
.content-wrapper { min-height: calc(100vh - 101px); }
.content { padding: 15px; }
.page-heading { margin: -15px -15px 20px; }
.content-header.page-heading > h1 { font-size: 24px; line-height: 1.4; margin: 0; }
.box-header.with-border { border-bottom-color: #f4f4f4; }
.box-header .box-title { line-height: 1.5; }
.box-header .box-tools { display: flex; gap: 8px; align-items: center; top: 9px; }
.box-footer .actions { justify-content: flex-end; }
.box-body > :last-child { margin-bottom: 0; }
.box-body.table-scroll { padding: 10px; }
.table-scroll { overflow-x: auto; }
.table { margin-bottom: 0; font-size: 13px; }
.table > thead > tr > th { text-align: center; vertical-align: middle; background: #f9f9f9; }
.table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; }
.table > tbody > tr > th.well { background: #f5f5f5; border-radius: 0; box-shadow: none; }
.device-info th { min-width: 90px; width: 11%; font-size: 12px; white-space: nowrap; }
.device-info td { min-width: 140px; }
.device-info .description-cell { white-space: normal; overflow-wrap: anywhere; }
.muted { color: #777; font-size: 12px; }
.text-link { color: #3c8dbc; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 12px; align-items: center; }
.text-button { padding: 0; border: 0; background: transparent; color: #3c8dbc; font-size: 12px; }
.text-button.danger, .danger { color: #dd4b39; }
.empty { text-align: center; color: #777; padding: 25px !important; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 24px; width: 100%; margin: 5px 0; font-size: 12px; }
.badge.demo { background: #f39c12; font-weight: 400; border-radius: 2px; font-size: 11px; }
.message { margin-bottom: 15px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 400; }
.section-heading > a { font-size: 12px; }

/* 측정 데이터는 원본 중앙 모니터링의 info-box 색상·도형으로 표현한다. */
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.info-box { margin-bottom: 15px; }
.info-box-number { font-size: 23px; }
.info-box-number small { font-size: 13px; font-weight: 400; }
.info-box .progress-description { font-size: 12px; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 15px; }
.device-grid > .box { margin-bottom: 0; }
.device-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.device-name { font-size: 18px; margin: 5px 0 8px; font-weight: 400; }
.reading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #f4f4f4; padding: 12px 0; }
.reading > div > span { display: block; font-size: 13px; }
.reading strong { font-size: 25px; }
.reading strong small, .big-value small { font-size: 12px; font-weight: 400; color: #777; }
.state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.state:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state.normal { color: #008d4c; }
.state.warning { color: #b87500; }
.state.danger { color: #dd4b39; }
.state.stale, .state.unknown { color: #777; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; color: #777; font-size: 11px; }
.card-bottom::before, .card-bottom::after { display: none; }
.big-value { font-size: 32px; font-weight: 600; margin: 10px 0; }
.post-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #f4f4f4; padding: 12px 0; }
.post-row:last-child { border-bottom: 0; }
.post-row time { white-space: nowrap; font-size: 12px; color: #777; }
.charts { display: grid; gap: 20px; }
.chart-group h3 { font-size: 14px; font-weight: 400; margin: 0 0 10px; }
.chart-group canvas { display: block; width: 100%; height: 190px; }
.constant { display: inline-block; margin-right: 5px; font-size: 11px; background: #ecf0f5; padding: 2px 4px; }
.comment { border-bottom: 1px solid #f4f4f4; padding: 12px 0; }
.comment p { margin-bottom: 5px; }
.comment-form { margin-top: 15px; }
.advanced summary { font-size: 15px; padding: 10px; cursor: pointer; }
.raw-packet { margin-top: 15px; font-size: 12px; }
.raw-packet pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 5px; }
.post-content { min-height: 160px; overflow-wrap: anywhere; }

/* Django 폼 위젯도 Bootstrap의 직각 입력란·버튼과 같은 모양으로 맞춘다. */
input:not([type=checkbox]):not([type=hidden]):not([type=radio]), select, textarea {
  display: block; width: 100%; padding: 6px 12px; color: #555; background: white;
  border: 1px solid #d2d6de; border-radius: 0; box-shadow: none; font-size: 14px;
}
input:not([type=checkbox]):not([type=hidden]):not([type=radio]), select { height: 34px; }
input:focus, select:focus, textarea:focus { border-color: #3c8dbc; outline: 2px solid #b5d9ed; outline-offset: 1px; }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { margin-right: 7px; }
label { display: block; font-size: 13px; }
.helptext { display: block; font-size: 12px; color: #777; margin-top: 5px; }
.errorlist { color: #dd4b39; font-size: 12px; padding-left: 18px; }
.alert .errorlist { color: inherit; }
.form-panel { max-width: 1000px; }
.legacy-form .form-group { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: start; gap: 15px; margin: 0 0 18px; }
.legacy-form .control-label { text-align: right; padding-top: 7px; }
.form-field > div > div { margin-bottom: 5px; }
.filter-form { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 15px; }
.filter-form p { margin: 0; }
.filter-form > .errorlist { grid-column: 1 / -1; }
.search { display: flex; gap: 10px; align-items: end; }
.search .search-field { flex: 1; max-width: 600px; }
.form-footer { margin: 15px -10px -10px; border-top: 1px solid #f4f4f4; padding: 10px; }
/* 기존 템플릿의 단순 버튼 클래스에도 같은 팔레트를 적용한다. */
.button { display: inline-block; padding: 6px 12px; background: #3c8dbc; border: 1px solid #367fa9; color: white; border-radius: 3px; font-size: 14px; }
.button.secondary { background: #f4f4f4; border-color: #ddd; color: #444; }

/* 원본 formLogin.jsp의 회색 바탕·360px 흰 박스·BL Process 이미지. */
.login-page { background: #d2d6de; }
.login-shell { min-height: 100vh; padding: 1px 15px 30px; }
.login-box { width: 360px; max-width: 100%; margin: 7% auto; }
.login-brand { width: 149px; height: 149px; }
.login-system-title { margin: 0; text-align: center; font-size: 14px; font-weight: 400; line-height: 1.55; color: #333; }
.login-help { font-size: 12px; margin-bottom: 0; }
.login-box .btn-flat { border-radius: 0; }
.login-shell > .message { max-width: 360px; margin: 20px auto; }

/* 작은 화면에서는 원본의 메뉴 열기 방식을 유지하면서 가로 넘침을 막는다. */
@media (max-width: 1000px) {
  .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .filter-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .content-wrapper { min-height: calc(100vh - 151px); }
  .main-header .logo-lg img { width: 200px; }
  .main-sidebar { padding-top: 100px; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > button > span,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > button > .tree-arrow { display: initial; }
  .device-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-form { grid-template-columns: minmax(0, 1fr); }
  .legacy-form .form-group { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .legacy-form .control-label { text-align: left; padding-top: 0; }
  .box-header .box-tools { position: static; float: none; margin-top: 8px; flex-wrap: wrap; }
  .content-header.page-heading > h1 { font-size: 23px; }
  .content-header > .breadcrumb { padding: 8px; margin-top: 10px; }
  .login-box { margin-top: 20px; }
  .account-dropdown { width: 270px; }
  .table { white-space: nowrap; }
}
@media print {
  .main-header, .main-sidebar, .main-footer, .actions, .box-tools, .advanced { display: none; }
  .content-wrapper { margin: 0; }
}