/*
  Admin UI Theme (Hyundai Card-inspired)
  - Monochrome base + single accent
  - Large typography, generous whitespace
  - Subtle borders/shadows (no neon gradients)
*/
:root{
  /* HyundaiCard-inspired Dark Theme (Rev B-2) */
  --bg:#3f4041;        /* screenshot-like dark gray background */
  --mainbg:#0b0b0d;    /* main content area (deep black) */
  --panel:#2d2e30;     /* card surface */
  --panel2:#262729;    /* input / secondary surface */
  --text:#f2f2f4;
  --muted:rgba(242,242,244,.65);
  --line:rgba(255,255,255,.12);
  --shadow: 0 8px 18px rgba(0,0,0,.22); /* subtle */
  --radius:14px;
  --accent:#e31b23;    /* Hyundai Card-like red */
  --danger:#ff4757;
  --warn:#f1c40f;
  --ok:#2ecc71;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.app-shell{display:flex;min-height:100%}
.sidebar{
  width:272px;
  padding:18px;
  background: var(--panel);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
}
.brand{padding:14px 12px 18px 12px;border:1px solid var(--line);border-radius:var(--radius);background: var(--panel2)}
.brand .dot{width:10px;height:10px;border-radius:99px;background:var(--accent)}
.brand-title{font-weight:800;margin-top:10px;letter-spacing:-.02em}
.brand-sub{font-size:12px;color:var(--muted);margin-top:4px}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.nav-item{
  padding:12px 12px;border-radius:16px;border:1px solid transparent;color:rgba(242,242,244,.62);
  transition: all .12s ease;
}
.nav-item:hover{background:rgba(242,242,244,.04);border-color:var(--line);color:var(--text)}
.nav-item.active{background:rgba(227,27,35,.08);border-color:rgba(227,27,35,.20);color:var(--text)}
.nav-item.disabled{opacity:.35;cursor:not-allowed}
.sidebar-footer{position:absolute;left:18px;right:18px;bottom:18px}
.main{
  flex:1;
  padding:26px 26px 50px 26px;
  /* 메인은 블랙 베이스 + 아주 약한 비네팅(현대카드 앱 느낌) */
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(227,27,35,.06), rgba(227,27,35,0) 55%),
    var(--mainbg);
  min-height:100vh;
}

.main-inner{
  /* 현대카드 앱처럼 콘텐츠가 과하게 조여 보이지 않도록 폭을 약간 여유 있게 */
  max-width: 1320px;
  margin: 0 auto;
}
.page-header{margin-bottom:14px}
.page-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-search{flex:1;display:flex;justify-content:flex-end;min-width:260px}
.search-input{
  width:100%;
  max-width:420px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:10px 14px;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-input::placeholder{color:rgba(255,255,255,0.45)}
.search-input:focus{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.26);
  box-shadow:0 0 0 4px rgba(227,27,35,0.10);
}


/* Hyundai-card-like header title */
.page-title{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.page-title h1{margin:0;font-size:28px;letter-spacing:-0.2px}
/*
  Page title icon (brand mark)
  The mark is wider than it is tall, so keep aspect-ratio to avoid "squeezing".
*/
.page-title-icon{
  height:28px;
  width:auto;
  max-width:56px;
  display:block;
  object-fit:contain;
  opacity:0.95;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}




h1{margin:0 0 8px 0;font-size:30px;letter-spacing:-.03em}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns: 1.1fr .9fr}
@media (max-width: 980px){
  .sidebar{display:none}
  .grid.two{grid-template-columns: 1fr}
}
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 48%),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:18px;
}

.card:hover{
  border-color: rgba(255,255,255,.16);
}
.card-title{font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.card-actions{display:flex;align-items:center;gap:8px}
.form .row{display:flex;gap:10px}
.form .col{flex:1}
.label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
.input,.textarea,.select{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--panel2);
  color:var(--text);
  outline:none;
  font-size:14px;
}
.input:focus,.textarea:focus,.select:focus{border-color: rgba(227,27,35,.35); box-shadow: 0 0 0 4px rgba(227,27,35,.10)}
.textarea{min-height:96px;resize:vertical}
.select.small{padding:8px 10px;border-radius:12px}
.input.small{padding:8px 10px;border-radius:12px;font-size:12px}

/* B-11: 최근 이벤트 기간 조회 컨트롤 */
.date-range{display:flex;align-items:center;gap:8px}
.date-range .tiny{font-size:11px}
.date-range .input.small{width:150px}
.date-range .date-range-msg{margin-left:6px;font-size:12px;color:rgba(255,120,120,.9)}

/* date input calendar icon (dark UI): make indicator visible */
/* Chrome/Edge sometimes render the picker indicator with a default dark background.
   Make the indicator background transparent and brighten the icon so it reads on dark UI. */
input[type="date"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator{
  background-color:transparent;
  filter:invert(1) brightness(1.7) contrast(1.1);
  opacity:.95;
  padding:4px;
  border-radius:8px;
  cursor:pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{background-color:rgba(255,255,255,.06)}

/* B-13 FIX: force visible white calendar icon (Chrome/Edge) */
input[type="date"]{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px 22px;
  padding-right: 50px;
  min-width: 180px;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  cursor: pointer;
  width: 50px;
  height: 100%;
}



/* inline validation */
.input.is-invalid,.select.is-invalid,.textarea.is-invalid{border-color:rgba(255,90,90,.85);box-shadow:0 0 0 1px rgba(255,90,90,.35)}

/* lightweight inline link button (used in empty states) */
.link-btn{margin-left:10px;background:transparent;border:0;color:rgba(255,255,255,.85);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.link-btn:hover{color:#fff}

@media (max-width: 1024px){
  .date-range{flex-wrap:wrap;justify-content:flex-end}
  .date-range .input.small{width:160px}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background: transparent;
  color:var(--text); font-weight:800; cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{background:rgba(242,242,244,.04);border-color:rgba(242,242,244,.14)}
.btn:active{transform: translateY(1px)}
.btn.primary{background: var(--accent); border-color: transparent; color:#fff}
.btn.primary:hover{filter:brightness(0.98)}
.btn.danger{background: var(--danger); border-color: transparent; color:#fff}
.btn.danger:hover{filter:brightness(0.98)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px;border-radius:12px;font-size:12px}

/* 최근 이벤트 "전송" 버튼이 좁은 영역에서 글자가 줄바꿈(전\n송) 되는 현상 방지 */
.btn.small{white-space:nowrap;min-width:52px;text-align:center}

/* 운영 안전장치: disabled 버튼은 명확하게 비활성 표시 */
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
  filter:saturate(.85);
}

/* tiny spinner (for "전송 중" etc.) */
.spinner{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  vertical-align:-2px;
  margin-right:6px;
  animation:spin 0.8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}
.link{display:inline-block;margin-top:10px;color:rgba(242,242,244,.78)}
.link:hover{color:var(--accent)}
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.table{width:100%;border-collapse:collapse;background:transparent}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.table th{font-size:12px;color:var(--muted);font-weight:700;background:rgba(242,242,244,.03)}

/* 제목 컬럼은 가독성을 위해 좌측 정렬 유지 */
.table th:nth-child(2),
.table td:nth-child(2){text-align:left}
.table input[type="checkbox"]{
  width:16px;height:16px;
  accent-color: var(--accent);
}
.title{font-weight:800}
.badge{
  display:inline-block;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:rgba(242,242,244,.78);
  font-size:12px
}
.badge.status.draft{border-color:rgba(242,242,244,.18);}
.badge.status.sent{border-color:rgba(0,208,132,.35);}
.badge.prio.low{border-color:rgba(242,242,244,.14)}
.badge.prio.medium{border-color:rgba(242,242,244,.22)}
.badge.prio.high{border-color:rgba(183,121,31,.38)}
.badge.prio.critical{border-color:rgba(209,26,42,.40)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:rgba(242,242,244,.78)}
.pill.ios{border-color:rgba(242,242,244,.22)}
.pill.android{border-color:rgba(242,242,244,.22)}
.inline{display:flex;gap:8px;align-items:center}

/* Tooltip (disabled buttons etc.)
   - disabled <button> does not show native title tooltip in many browsers
   - use wrapper hover to display tooltip consistently
*/
.tooltip-wrap{position:relative;display:inline-flex;align-items:center}
.tooltip-wrap[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,22,.95);
  color: rgba(242,242,244,.92);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 50;
}
.tooltip-wrap[data-tip]::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20,20,22,.95);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  z-index: 49;
}
.tooltip-wrap[data-tip]:hover::after,
.tooltip-wrap[data-tip]:hover::before{opacity: 1;}

/* When JS floating tooltip is enabled, disable pseudo tooltip to avoid clipped duplicates */
.tooltip-wrap.use-floating[data-tip]::after,
.tooltip-wrap.use-floating[data-tip]::before{display:none;}

/* Floating tooltip (JS positioned) - prevents clipping inside scroll containers */
.floating-tip{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-9999px,-9999px);
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,22,.95);
  color: rgba(242,242,244,.92);
  font-size: 12px;
  max-width: 260px;
  white-space: normal;
  line-height: 1.25;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 9999;
}
.floating-tip.is-open{opacity:1;}
.toast-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.toast{padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.toast.success{border-color:rgba(0,208,132,.35)}
.toast.error{border-color:rgba(255,77,109,.35)}

/* Simple pager (prev/next) */
.pager{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.pager .btn{min-width:64px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--bg)}
.login-card{
  width: 360px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:18px;
}
.login-title{font-weight:900;font-size:20px;letter-spacing:-.03em}
.login-sub{margin-top:6px;color:var(--muted);font-size:12px}
.hint{margin-top:10px;color:var(--muted);font-size:12px}

/* KPI cards */
.kpi-row{display:grid;gap:14px;grid-template-columns:repeat(4, minmax(0,1fr));margin: 14px 0 14px}
.kpi-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:16px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kpi-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  opacity:.28;
  pointer-events:none;
}
.kpi-card:hover::before{opacity:.55}
.kpi-card:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.kpi-label{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.kpi-value{font-size:32px;font-weight:900;letter-spacing:-.04em;margin-top:10px;line-height:1.05}
.kpi-value--datetime{font-size:26px;letter-spacing:-.02em;line-height:1.15;word-break:keep-all}
.kpi-sub{margin-top:6px}
@media (max-width: 980px){
  .kpi-row{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* Dashboard section rhythm */
/* KPI ↔ (이벤트 등록/최근 디바이스) 간격과 동일하게, 메인 2열 ↔ 최근 이벤트 간격도 맞춘다. */
.recent-events-card{margin-top:14px}

/* Row click + hover */
.row-click{cursor:pointer}
.row-click:hover{background:rgba(242,242,244,.04)}
.row-click.is-selected{background:rgba(227,27,35,.08)}

/* Right sheet (HyundaiCard-style) */
.modal{
  position:fixed;
  inset:0;
  z-index:50;
  /* keep in render tree so transitions work */
  pointer-events:none;
  opacity:0;
  transition: opacity .16s ease;
}
.modal[aria-hidden="false"]{
  pointer-events:auto;
  opacity:1;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  opacity:0;
  transition: opacity .16s ease;
}
.modal[aria-hidden="false"] .modal-backdrop{opacity:1}

.modal-sheet{
  position:absolute;
  right:24px;
  top:24px;
  bottom:24px;
  width:480px;
  max-width:calc(100vw - 48px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  overflow:hidden;
  transform: translateX(24px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform, opacity;
}
.modal[aria-hidden="false"] .modal-sheet{transform: translateX(0);opacity:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.modal-title{font-weight:900;letter-spacing:-.03em}
.modal-body{padding:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--line)}

/* Center confirm modal (send/delete) */
.modal-sheet.modal-sheet--center{
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:420px;
  max-width:calc(100vw - 48px);
  transform: translate(-50%, -50%) scale(0.98);
  opacity:0;
}
.modal[aria-hidden="false"] .modal-sheet.modal-sheet--center{
  transform: translate(-50%, -50%) scale(1);
  opacity:1;
}

.xbtn{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(242,242,244,.85);
}
.xbtn:hover{background:rgba(242,242,244,.04)}
.field{margin-bottom:14px}
.field .value{margin-top:6px}
.field .value.pre{white-space:pre-wrap;line-height:1.5}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:14px;padding:8px 10px;cursor:pointer}
.icon-btn:hover{background:rgba(242,242,244,.04)}
.icon-btn--danger{border-color:rgba(255,77,109,.35)}
.icon-btn--danger:hover{background:rgba(255,77,109,.10)}
.icon-btn--danger{border-color:rgba(255,77,109,.35)}
.icon-btn--danger:hover{background:rgba(255,77,109,.08)}

input[type="checkbox"]{
  width:16px;height:16px;
  accent-color: var(--accent);
}

/* Skeleton */
.skeleton{position:relative;overflow:hidden;background:rgba(242,242,244,.06);border-radius:10px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.1s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ===== Sidebar Logout (Admin UX polish + icon) ===== */
.sidebar-footer{
  margin-top: auto;
  padding: 16px;
}

/* sidebar-footer 안에 있는 nav-item(=로그아웃)만 버튼화 */
.sidebar-footer .nav-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 40px;
  border-radius: 12px;

  /* “위험 빨강”은 피하고, 고스트 버튼 느낌 */
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);

  font-weight: 600;
  letter-spacing: -0.2px;
  text-decoration: none;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* 아이콘(작게) - HTML 수정 없이 pseudo-element로 추가 */
.sidebar-footer .nav-item::before{
  content: "↩";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  border-radius: 6px;

  font-size: 13px;
  line-height: 1;

  /* 아이콘도 전체 톤에 맞게 은은하게 */
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);

  transform: translateY(-0.5px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sidebar-footer .nav-item:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.sidebar-footer .nav-item:hover::before{
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.sidebar-footer .nav-item:active{
  transform: translateY(0);
  background: rgba(255,255,255,0.05);
}