/* U+SASE 모니터링 포털 커스텀 스타일 */

/* ===== 사이드바 접기/펼치기 ===== */
#sidebar { transition: width .25s ease; }
#main-content { transition: margin-left .25s ease; }

#sidebar-toggle {
  position: absolute; top: 14px; right: -13px; z-index: 50;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid #e5e7eb; color: #6b7280;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: all .2s;
}
#sidebar-toggle:hover { color: #e6007e; border-color: #e6007e; }
.dark #sidebar-toggle { background: #1a1d29; border-color: #323748; color: #9ca3af; }
.dark #sidebar-toggle:hover { color: #ff4da6; border-color: #ff4da6; }

/* 접힌 상태 */
body.sidebar-collapsed #sidebar { width: 68px; }
body.sidebar-collapsed #main-content { margin-left: 68px !important; }
body.sidebar-collapsed #sidebar-toggle i { transform: rotate(180deg); }
body.sidebar-collapsed .nav-label { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 12px 0; }
body.sidebar-collapsed .nav-item i { width: auto; }
body.sidebar-collapsed #brand-logo { display: none; }
body.sidebar-collapsed #brand-logo-mini { display: inline; }
body.sidebar-collapsed #brand-header { padding: 24px 0 16px; text-align: center; }
body.sidebar-collapsed #app-version { display: none; }
body.sidebar-collapsed #sidebar-footer-row { justify-content: center; }
body.sidebar-collapsed #sidebar-footer { padding-left: 8px; padding-right: 8px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  color: #6b7280; cursor: pointer; transition: all .15s;
}
.dark .nav-item { color: #9ca3af; }
.nav-item:hover { background: #f3f4f6; color: #111827; }
.dark .nav-item:hover { background: #1f2330; color: #f3f4f6; }
.nav-item.active { background: #fdf2f8; color: #e6007e; font-weight: 600; }
.dark .nav-item.active { background: rgba(230,0,126,.12); color: #ff4da6; }

.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
}
.dark .card { background: #161926; border-color: #262a3a; }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:600; }
.badge-normal { background:#dcfce7; color:#15803d; }
.dark .badge-normal { background:rgba(34,197,94,.15); color:#4ade80; }
.badge-warning { background:#fef3c7; color:#b45309; }
.dark .badge-warning { background:rgba(245,158,11,.15); color:#fbbf24; }
.badge-critical { background:#fee2e2; color:#b91c1c; }
.dark .badge-critical { background:rgba(239,68,68,.15); color:#f87171; }
.badge-info { background:#dbeafe; color:#1d4ed8; }
.dark .badge-info { background:rgba(59,130,246,.15); color:#60a5fa; }
.badge-gray { background:#f3f4f6; color:#4b5563; }
.dark .badge-gray { background:#262a3a; color:#9ca3af; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; transition:all .15s; cursor:pointer; }
.btn-primary { background:#e6007e; color:#fff; }
.btn-primary:hover { background:#c00069; }
.btn-secondary { background:#f3f4f6; color:#374151; }
.dark .btn-secondary { background:#262a3a; color:#d1d5db; }
.btn-secondary:hover { background:#e5e7eb; }
.dark .btn-secondary:hover { background:#323748; }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }
.dark .btn-danger { background:rgba(239,68,68,.15); color:#f87171; }

.input {
  width:100%; padding:8px 12px; border-radius:10px; font-size:13px;
  border:1px solid #d1d5db; background:#fff; color:#111827; outline:none;
}
.input:focus { border-color:#e6007e; box-shadow:0 0 0 3px rgba(230,0,126,.1); }
.dark .input { background:#12141c; border-color:#323748; color:#e5e7eb; }

table.data-table { width:100%; font-size:13px; border-collapse:collapse; }
table.data-table th { text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
.dark table.data-table th { color:#9ca3af; border-color:#262a3a; }
table.data-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; }
.dark table.data-table td { border-color:#1f2330; }
table.data-table tbody tr:hover { background:#fafafa; }
.dark table.data-table tbody tr:hover { background:#1a1d2b; }

/* mini resource bar */
.res-bar { width:64px; height:6px; border-radius:3px; background:#e5e7eb; overflow:hidden; display:inline-block; vertical-align:middle; }
.dark .res-bar { background:#262a3a; }
.res-bar > div { height:100%; border-radius:3px; }

/* GridStack */
.grid-stack { margin: 0 -6px; }
.grid-stack-item-content { overflow: hidden !important; }
.grid-stack > .grid-stack-item > .ui-resizable-se { right: 6px; bottom: 6px; }
.widget-card { height:100%; display:flex; flex-direction:column; }
.widget-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px; cursor:move; }
.widget-title { font-size:13px; font-weight:700; }
.widget-body { flex:1; padding:0 16px 14px; overflow:auto; min-height:0; }

/* Leaflet dark mode */
.dark .leaflet-tile { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); }
.dark .leaflet-container { background: #12141c; }
.leaflet-container { border-radius: 10px; z-index: 1; }

.map-pulse {
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(230,0,126,.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background:#fff; border-radius:16px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; }
.dark .modal-box { background:#1a1d29; border:1px solid #262a3a; }

/* Toast */
.toast { padding:12px 18px; border-radius:12px; font-size:13px; font-weight:500; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.2); animation: slideIn .25s ease; }
@keyframes slideIn { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }

/* Print (리포트) */
@media print {
  #sidebar, .no-print { display: none !important; }
  #main-content { margin-left: 0 !important; }
  body { background: #fff !important; }
}

/* scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }
.dark ::-webkit-scrollbar-thumb { background:#323748; }
::-webkit-scrollbar-track { background:transparent; }

/* ===== 인증 (로그인/회원가입) ===== */
.auth-tab {
  padding: 9px 0;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #9ca3af;
  transition: all .18s ease;
  cursor: pointer;
}
.auth-tab:hover { color: #6b7280; }
.dark .auth-tab:hover { color: #d1d5db; }
.auth-tab.active {
  background: #e6007e;
  color: #fff;
  box-shadow: 0 2px 10px rgba(230, 0, 126, .35);
}

/* 입력 검증 오류 */
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15) !important;
}

/* ============================================================
   모바일 대응 (≤767px) — 드로어 사이드바 + 콘텐츠 최적화
   ============================================================ */
@media (max-width: 767px) {
  /* 사이드바 → 오프캔버스 드로어 */
  #sidebar {
    transform: translateX(-100%);
    transition: transform .28s ease;
    width: 264px !important;
    z-index: 60;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  body.mobile-nav-open #sidebar { transform: translateX(0); }
  /* 데스크톱용 접기 상태가 모바일 드로어에 영향 주지 않도록 무효화 */
  body.sidebar-collapsed #sidebar { width: 264px !important; }
  body.sidebar-collapsed #main-content { margin-left: 0 !important; }
  body.sidebar-collapsed .nav-label { display: inline; }
  body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 10px 14px; }
  body.sidebar-collapsed #brand-logo { display: block; }
  body.sidebar-collapsed #brand-logo-mini { display: none; }
  body.sidebar-collapsed #brand-header { padding: 24px 20px 16px; text-align: left; }
  body.sidebar-collapsed #app-version { display: inline; }
  #sidebar-toggle { display: none; } /* 접기 토글은 데스크톱 전용 */

  body.mobile-nav-open { overflow: hidden; }

  /* 카드/테이블 */
  .card { border-radius: 12px; }
  table.data-table { font-size: 12px; }
  table.data-table th, table.data-table td { padding: 8px 8px; }
  /* 가로 스크롤 테이블 래퍼는 카드가 담당 (overflow-x-auto) */

  /* 모달 풀폭 */
  .modal-backdrop { padding: 10px; align-items: flex-end; }
  .modal-box { max-height: 92vh; border-radius: 16px 16px 0 0; }

  /* 페이지 헤더/필터 랩 */
  #page-container header { flex-wrap: wrap; gap: 10px; }
  #page-container h1 { font-size: 17px; }

  /* 대시보드: GridStack 위젯 세로 스택 (드래그/리사이즈는 데스크톱 전용) */
  .grid-stack { margin: 0; }
  .grid-stack > .grid-stack-item { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; margin-bottom: 12px; transform: none !important; }
  .grid-stack { height: auto !important; display: block; }
  .grid-stack > .grid-stack-item > .ui-resizable-handle { display: none !important; }

  /* 지도/차트 높이 축소 */
  #world-map { min-height: 260px !important; }

  /* 토스트 */
  #toast-root { left: 12px; right: 12px; bottom: 12px; }
  .toast { font-size: 12px; }
}

/* 모바일 위젯 내부 높이 보정: 세로 스택 시 content가 잘리지 않도록 */
@media (max-width: 767px) {
  .grid-stack-item-content { position: relative !important; inset: auto !important; height: auto !important; min-height: 100px; }
  .widget-card { height: auto !important; }
  .widget-header { cursor: default; } /* 모바일에서는 드래그 없음 */
  .widget-body { overflow: visible; }
  .widget-body canvas { max-height: 240px !important; height: 240px !important; }
  #world-map { height: 280px !important; }
  /* KPI 위젯: 2열 그리드 유지 */
  #dashboard-page .grid.grid-cols-2 { gap: 10px; }
}

/* 게스트 모드: 개인정보 리스트 blur 처리 (알림 수신자 / 사용자 목록) */
.guest-blur tbody { filter: blur(5px); user-select: none; pointer-events: none; }
.guest-blur { position: relative; }
.guest-blur-notice {
  font-size: 11px; color: #d97706; padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
}
.dark .guest-blur-notice { color: #fbbf24; }