/* =========================
   SalesMap — styles.css (완전체)
   템플릿: base.html / dashboard.html / company_detail.html / login.html
   ========================= */

/* ----- 리셋 & 토큰 ----- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --border:#e6e8f0;
  --text:#0f172a;
  --muted:#64748b;

  --brand:#2563eb;
  --brand-500:#3b82f6;
  --brand-700:#1e40af;
  --brand-50:#eff6ff;

  --danger:#ef4444;
  --success:#16a34a;

  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
}

/* ----- 베이스 타이포/레이아웃 ----- */
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
.container{
  width:100%;
  max-width:1100px;
  margin:24px auto 80px;
  padding:0 16px;
}

/* ----- 헤더 ----- */
header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  height:56px; max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ font-weight:900; letter-spacing:.2px; color:var(--brand); font-size:18px; }
.header-actions{ display:flex; align-items:center; gap:8px; }

/* ----- 카드 공통 ----- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.section-title{ margin:0 0 8px; font-size:20px; font-weight:800; }
.helper{ color:var(--muted); font-size:13px; }

/* ----- 버튼 / 배지 ----- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px;
  border-radius:10px; border:1px solid transparent;
  background:var(--brand); color:#fff; font-weight:700; cursor:pointer;
  transition:transform .05s, box-shadow .15s, background .15s, border-color .15s;
  box-shadow:0 8px 22px rgba(37,99,235,.18);
}
.btn:hover{ background:var(--brand-500); box-shadow:0 10px 26px rgba(37,99,235,.22); }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:#fff; color:var(--brand); border-color:var(--border); box-shadow:none; }
.btn.secondary{ background:#fff; color:var(--text); border:1px solid var(--border); box-shadow:none; }
.btn.danger{ background:var(--danger); box-shadow:0 8px 22px rgba(239,68,68,.18); }
.btn.sm{ height:30px; padding:0 10px; font-size:12px; border-radius:8px; }

/* ----- 인풋 ----- */
label{display:block; font-size:12px; color:var(--muted); margin:2px 0 6px;}
.input, select.input, textarea.input{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; outline:none; transition:border .15s, box-shadow .15s;
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* ----- 유틸 배치 ----- */
.actions{display:flex; gap:10px;}
.actions .grow{flex:1 1 auto}
#btn-add-company{ flex:1 1 100%; height:44px; font-size:15px; }

/* ----- 테이블 ----- */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:14px; background:#fff; border-radius:10px; overflow:hidden;
}
.table thead th{
  background:var(--brand-50); color:#0b183b;
  text-align:left; padding:12px; border-bottom:1px solid var(--border);
  font-weight:800;
}
.table tbody td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:hover{ background:#fafbff; }
.link-inline{ color:var(--brand); font-weight:700; }
.link-inline:hover{ text-decoration:underline; }

/* ----- 지도 ----- */
.map-wrap{ width:100%; height:480px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }

/* ----- 정렬 유틸 ----- */
.table thead th, .table tbody td.tcenter { text-align:center; }
.tcenter{text-align:center}
.tright{text-align:right}

/* =========================
   모달 (최종본)
   ========================= */
.modal{
  position:fixed; inset:0;
  display:none;                 /* .show에서 flex로 전환 */
  align-items:center; justify-content:center;
  background:rgba(15,23,42,.35);
  padding:16px; z-index:100;
  overflow:auto;                /* 카드보다 작으면 바깥도 스크롤 */
}
.modal.show{ display:flex; }

.modal-card{
  width:100%; max-width:880px;
  background:#fff; border:1px solid var(--border);
  border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.2);
  display:flex; flex-direction:column;
  max-height:92vh;              /* 화면 기준 상한 */
  overflow:hidden;              /* 카드 밖 넘침 방지 */
}
/* form을 flex로 만들어 modal-body가 스크롤 영역이 되게 함 */
.modal-card form{ display:flex; flex-direction:column; min-height:0; }

.modal-head, .modal-foot{
  flex:0 0 auto; padding:14px 16px; border-color:var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; z-index:1;
}
.modal-head{ border-bottom:1px solid var(--border); position:sticky; top:0; }
.modal-foot{ border-top:1px solid var(--border); position:sticky; bottom:0; }
.modal-title{ font-weight:900; font-size:18px; }

.modal-body{
  flex:1 1 auto; min-height:0;   /* 내부 스크롤 가능 조건 */
  padding:16px; overflow:auto;   /* 스크롤은 여기서만 발생 */
}

/* 지도 박스 */
.modal-map{ width:100%; height:280px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }

/* ----- 알림 ----- */
.notice{ padding:10px 12px; border-radius:10px; background:#f8fafc; border:1px solid var(--border); color:#0b183b; font-size:13px; }
.notice.success{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.notice.error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

/* ----- 페이지네이션 ----- */
.pager .btn{min-width:80px}
.pager .helper{font-size:13px}
/* 버튼 묶음 래퍼(공통) */
.pager-btns{display:flex; gap:8px;}

/* ----- 카드 내부 그리드 보조 ----- */
.field{min-width:0}

/* ----- 로그인 카드 ----- */
.login-wrap{padding:24px}
.login-card .btn{height:44px}

/* ----- 접근성 포커스 ----- */
a:focus-visible, .btn:focus-visible, .input:focus-visible, select.input:focus-visible, textarea.input:focus-visible{
  outline:3px solid rgba(37,99,235,.35); outline-offset:2px;
}

/* ----- 업로드 미리보기 / 이미지 뷰어 ----- */
.uploaded-wrap{ margin-top:8px; padding:8px; background:#f9fafb; border:1px solid var(--border); border-radius:10px; }
.file-list{ display:flex; flex-direction:column; gap:6px; }
.file-item{ display:flex; align-items:center; gap:8px; font-size:14px; }
.file-item a{ color:var(--brand); text-decoration:none; word-break:break-all; }
.file-item a:hover{ text-decoration:underline; }
.img-list{ display:flex; flex-wrap:wrap; gap:10px; }
.img-thumb{ width:84px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:pointer; }
#img-viewer{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.65); }
#img-viewer img{ max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* 삭제 토글 표시 */
.to-remove{ opacity:.55; }
.to-remove a{ text-decoration:line-through; }

/* 작은 X 버튼 */
.badge-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:12px; line-height:1; user-select:none;
}
.badge-x:hover{ background:#ffe9e9; border-color:#fca5a5 }

/* 이미지 썸네일용 X 버튼 오버레이 */
.thumb-wrap{ position:relative; width:84px; height:84px; }
.thumb-wrap .badge-x{
  position:absolute; top:-8px; right:-8px; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* ----- 반응형 ----- */
@media (max-width: 1024px){
  .container{max-width:920px}
  .map-wrap{height:420px}
}
@media (max-width: 768px){
  .container{max-width:680px}
  .header-inner{height:54px}
  .map-wrap{height:360px}
  .table thead th:nth-child(4), .table tbody td:nth-child(4){ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card .actions{flex-wrap:wrap}
  #btn-add-company{ order:99; }
}
@media (max-width: 600px){
  .container{max-width:100%}
  .brand{font-size:16px}
  .header-actions .btn{height:34px; padding:0 10px}
  .section-title{font-size:18px}
  .map-wrap{height:300px}

  /* 대시보드 기업목록 전용: 번호(1), 대표자(3) 숨김, 주소(4) 숨김 */
  #companies-table thead th:nth-child(1), #companies-table tbody td:nth-child(1){ display:none }
  #companies-table thead th:nth-child(3), #companies-table tbody td:nth-child(3){ display:none }
  #companies-table thead th:nth-child(4), #companies-table tbody td:nth-child(4){ display:none }

  /* ▼▼ 폭 재설정: 기업명 넓게, 관리 좁게 (HTML 인라인 width 덮어씀) ▼▼ */
  #companies-table thead th:nth-child(2),
  #companies-table tbody td:nth-child(2){
    width:auto !important;           /* 기업명: 남은 공간 전부 */
  }
  #companies-table thead th:nth-child(5),
  #companies-table tbody td:nth-child(5){
    width:120px !important;          /* 관리: 버튼 폭만큼 고정 (필요 시 100~130px 조정) */
  }

  /* --- 기업상세 영업일지 전용: 2~5 숨김 => 작성일(1), 금액(6), 조치(7)만 보임 --- */
  #logs-table thead th:nth-child(2),
  #logs-table thead th:nth-child(3),
  #logs-table thead th:nth-child(4),
  #logs-table thead th:nth-child(5),
  #logs-table tbody td:nth-child(2),
  #logs-table tbody td:nth-child(3),
  #logs-table tbody td:nth-child(4),
  #logs-table tbody td:nth-child(5){ display:none }

  /* 페이지네이션: 페이지 정보 아래 한 줄로 버튼 정렬 */
  .pager{ flex-direction:column; gap:8px; }
  .pager-info{ order:0; text-align:center; width:100%; }
  .pager-btns{ order:1; display:flex; justify-content:center; gap:8px; flex-wrap:nowrap; }
  .pager-btns .btn{ min-width:74px; }
  .modal-card{max-width:96vw}
  .modal-body{padding:12px}
  .modal-head,.modal-foot{padding:12px}
}

@media (max-width: 420px){
  .header-inner{padding:0 12px}
  .container{padding:0 12px}
  .btn{height:36px}
  .btn.sm{height:28px}
  .map-wrap{height:300px}
}

/* ----- 특화 ----- */
.card .actions{align-items:center}       /* company_detail.html */
.table .actions{gap:6px}
.card .actions + .actions{margin-top:10px} /* dashboard.html */
.card > div[style*="overflow:auto"]{ border-radius:12px; border:1px solid var(--border); }

/* === company_detail: 첨부 삭제 버튼 (템플릿 JS와 맞춤) === */
.chip-x{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  font-size:12px; cursor:pointer; user-select:none;
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; margin-left:6px;
}

/* 이미지 썸네일 X (템플릿의 .img-wrap 구조에 맞춤) */
.img-wrap{ position:relative; }
.img-x{
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:999px; font-size:12px;
  line-height:20px; text-align:center; cursor:pointer;
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca;
}

/* 기본(PC): 견적일, 현장명, 견적기업, 금액, 주소, 관리 전부 표시 */
#estimates-table thead th,
#estimates-table tbody td {
  display: table-cell;
}

/* 모바일(화면 폭 600px 이하): 견적일(1), 기업(4), 주소(5) 숨김 */
@media (max-width: 600px) {
  #estimates-table thead th:nth-child(1),
  #estimates-table tbody td:nth-child(1) { display: none; } /* 견적일 숨김 */
  
  #estimates-table thead th:nth-child(4),
  #estimates-table tbody td:nth-child(4) { display: none; } /* 기업 숨김 */
  
  #estimates-table thead th:nth-child(5),
  #estimates-table tbody td:nth-child(5) { display: none; } /* 주소 숨김 */
  
  /* 모바일 폭 조정 */
  #estimates-table thead th:nth-child(2),
  #estimates-table tbody td:nth-child(2) {
    width: auto !important;
  }
  #estimates-table thead th:nth-child(3),
  #estimates-table tbody td:nth-child(3) {
    width: 30% !important;
    text-align: center;
  }
  #estimates-table thead th:nth-child(6),
  #estimates-table tbody td:nth-child(6) {
    width: 120px !important;
    text-align: center;
  }
}