/* 기본 설정 */
body {
    font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    color: #333;
}

/* 컨테이너 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;  /* 상하 20px, 좌우 40px */
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-radius: 6px;
}

/* 헤더 */
header {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 20px;
}

header h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
}

header nav a {
    text-decoration: none;
    margin-right: 15px;
    color: #333;
    font-weight: 500;
}

header nav a:hover {
    color: #0078d7;
}

/* 제목 */
h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* 폼 */
form {
    margin-bottom: 30px;
   
   
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
}
.form-row label {
  margin-bottom: 4px; /* 설명과 입력창 거의 붙이기 */
}

.form-row input,
.form-row select {
  margin: 0;
  padding: 4px 6px;
  height: 30px;
  font-size: 10px;

  }

/* 연속된 요소(예: 드롭다운 + 입력칸) 간 위쪽 간격 제거 */
.form-row > * + * {
  margin-top: 0px; /* 완전 0이면 너무 붙어보일 수 있으니 2px만 유지 */
}

.form-wrapper {
  max-width: 850px;
  margin: 0 auto;
  padding: 20px;
  background: #fdfdfd;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

form button {
    padding: 8px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    background-color: #0078d7;
    color: white;
    cursor: pointer;
}

form button:hover {
    background-color: #005bb5;
}

/* 라벨+인풋을 가로로 배치할 경우 대비한 유연한 행 구성 */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    align-items: flex-start;
}

.form-row > div {
    flex: 1;
    min-width: 240px;
}

/* 테이블 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    overflow-x: auto;
}

table thead {
    background-color: #f0f0f0;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 10px;
    text-align: left;
}

table th {
    font-weight: 600;
}

/* 체크박스 */
input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 5px;
}



/* 일괄작업 버튼 */
.bulk-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bulk-actions button {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
}

.bulk-actions button:hover {
    background-color: #222;
}

/* 에러 메시지 */
.error {
    color: red;
    font-weight: bold;
}

/* 로그인 페이지 전용 */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-container h2 {
    margin-bottom: 20px;
    text-align: center;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #005bb5;
}

.login-container .error {
    color: red;
    text-align: center;
    margin-bottom: 15px;
}
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
        margin: 20px auto;
    }

    header {
        padding: 15px 10px;
    }

    header h1 {
        font-size: 20px;
    }

    header nav a {
        display: inline-block;
        margin: 5px 8px 0 0;
        font-size: 14px;
    }

    form input[type="text"],
    form input[type="date"],
    form select {
        max-width: 100%;
    }

    .bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination a {
        padding: 5px 10px;
        font-size: 13px;
    }

    table th, table td {
        padding: 8px;
        font-size: 13px;
    }

    .login-container {
        margin: 60px 15px;
        padding: 20px;
    }

    .login-container h2 {
        font-size: 20px;
    }

    .login-container input,
    .login-container button {
        font-size: 14px;
        padding: 8px;
    }
}
.success-message {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    margin-bottom: 20px;
    color: #155724;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;

}
.search-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fdfdfd;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.search-form .form-row {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

.search-form .form-row label {
  width: 100px;
  margin-right: 8px;
  font-weight: bold;
  font-size: 0.95em;
  white-space: nowrap;
}

.search-form .form-row input,
.search-form .form-row select {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.95em;
  border: 1px solid #bbb;
  border-radius: 3px;
}

/* 모바일 대응 */
@media (max-width: 600px) {
  .search-form {
    grid-template-columns: 1fr;
  }
  .search-form .form-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .search-form .form-row label {
    width: auto;
    margin-bottom: 4px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 6px;  /* 세로 2px, 가로 6px */
  max-width: 1020px;
  margin: 0 auto;
  padding: 0;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;

}

.form-row label {
  font-weight: 600;
  font-size: 13px;
  margin: 2;
  margin-right: 10px;
  min-width: 90px; /* ✅ 라벨 너비 고정 */
}

.form-row input,
.form-row select {
  flex: 1;
  height: 28px;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.form-row input[type="checkbox"] {
  margin-right: 4px;
  transform: scale(0.9);
  vertical-align: middle;
}

.form-row.full-width {
  grid-column: span 3;
  padding: 4px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  padding: 3px 8px;
  font-size: 13px;
  height: 32px;
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 🔄 타이어 등록 전용 스타일: 1열 세로 + 라벨과 입력 가로 정렬 */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 2px; /* 항목 간 최소 간격 */
  max-width: 600px;
  margin: 0 auto;
}

.register-form .form-row {
  display: flex;
  align-items: center;
  margin: 2;
  padding: 2px 0;
}

.register-form .form-row label {
  width: 120px;
  font-weight: 600;
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}

.register-form .form-row input,
.register-form .form-row select {
  flex: 1;
  padding: 4px 6px;
  margin: 0;
  font-size: 13px;
  height: 28px;
  }

/* 드롭다운 + 직접입력 세트 */
.register-form .inline-group {
  display: flex;
  gap: 2px;
}

.register-form .inline-group input,
.register-form .inline-group select {
  flex: 1;
}

/* 체크박스 스타일 */
.register-form .form-row input[type="checkbox"] {
  width: auto;
  transform: scale(0.95);
  margin-left: 4px;
}

footer {
  text-align: center;
  padding: 10px 0;
  background: #f8f8f8; /* 필요에 따라 배경색 추가 */
}
footer small {
  font-size: 0.9em;
  color: #666;
}

/* — 페이징 전체 — */
/* — 페이징 전체 — */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 20px 0;
  font-size: 14px;
}

.pagination a,
.pagination span {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #0078d7;
}

/* 링크 호버 */
.pagination a:hover:not(.disabled) {
  background-color: #f0f0f0;
}

/* 이전/다음 비활성화 */
.pagination .arrow.disabled {
  color: #aaa;
  border-color: #eee;
  background-color: #f9f9f9;
  cursor: default;
}

/* … 표시 */
.pagination .ellipsis {
  border: none;
  background: transparent;
  color: #666;
  cursor: default;
}

/* 화살표 버튼만 조금 축소 */
.pagination a.arrow,
.pagination span.arrow {
  padding: 0 6px;
}

/* 현재 페이지 강조 */
.pagination .page-number.active,
.pagination a.page-number.active {
  background-color: #0078d7 !important;
  border-color:     #0078d7 !important;
  color:            #fff     !important;
  cursor:           default;
}

/* 강조된 버튼 hover 시에도 배경 유지 */
.pagination .page-number.active:hover,
.pagination a.page-number.active:hover {
  background-color: #0078d7 !important;
}

  .stats-table th {
    background:#f5f5f5;   /* ← 헤더(총 타이어 수, 창고명) 배경색 */
  }
  .stats-table th,
  .stats-table td {
    border:1px solid #ccc;
    padding:6px 10px;
    white-space:nowrap;
  }
  
  .form-row--hug { flex: 0 0 auto; width: auto; }
  
  /* 행은 감싸지도록 */
.register-form .form-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;              /* ← 중요: 줄바꿈 허용 */
}

/* 데스크톱 기본 텍스트에어리어 높이(원하면 값 조절) */
.register-form .form-row textarea{
  min-height: 120px;
}

/* 모바일에서 비고란 넓고 크게 */
@media (max-width: 680px){
  /* 라벨 폭 살짝 줄이기(선택) */
  .register-form .form-row label{ min-width:120px; }

  /* 비고 textarea를 다음 줄로 내려서 전체폭 사용 */
  .register-form .form-row textarea{
    flex: 0 0 100% !important; /* inline의 flex:1을 덮어씀 */
    width: 100% !important;
    min-height: 160px;         /* 더 크게(원하면 180~200px로) */
  }

  /* 시간/숫자/셀렉트는 너무 길지 않게 */
  .register-form .form-row input[type="time"],
  .register-form .form-row input[type="number"],
  .register-form .form-row select{
    max-width: 120px;
  }
}

/* 선택함(담기) 버튼은 초록톤으로 구분 */
.btn-tray {
  background:#1b5e20 !important; color:#fff !important;
}
.btn-tray:hover { background:#18511c !important; }

/* 연한 스타일(비우기 등) */
.btn-tray-ghost {
  background:#2e7d32 !important;
}
.actions-bar .bulk-actions button { background:#555; color:#fff; }

/* 선택함(담기) 버튼 스타일(선택) */
.btn-tray { background:#1b5e20 !important; color:#fff !important; }
.btn-tray:hover { background:#18511c !important; }
.btn-tray-ghost { background:#2e7d32 !important; color:#fff !important; }

/* === Collapsible Sidebar === */
:root {
  --sb-w: 240px;
  --sb-bg: #111;
  --sb-fg: #eee;
  --sb-accent: #2d8cff;
}

body.with-sidebar { padding-left: var(--sb-w); }

#sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sb-w);
  background: var(--sb-bg);
  color: var(--sb-fg);
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0,0,0,.15);
  z-index: 1000;
  transform: translateX(0);
  transition: transform .2s ease;
}

#sidebar .sb-header { padding: 14px 14px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
#sidebar .sb-user { font-size: 12px; color:#aaa; margin-top:4px; }

#sidebar .sb-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
#sidebar .sb-nav a {
  display: block; padding: 10px 12px; border-radius: 6px;
  color: var(--sb-fg); text-decoration: none; font-size: 14px;
}
#sidebar .sb-nav a:hover { background: rgba(255,255,255,.07); }
#sidebar .sb-nav a.active {
  background: rgba(45,140,255,.15); color: #fff; outline: 1px solid rgba(45,140,255,.35);
}
#sidebar .sb-nav hr { border: 0; height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; }

/* 토글 버튼 */
#sidebar-toggle {
  position: fixed; top: 10px; left: 10px; z-index: 1100;
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer; font-size: 18px; line-height: 36px;
}

/* 접힘 상태 */
body.sidebar-collapsed #sidebar { transform: translateX(-100%); }
body.sidebar-collapsed.with-sidebar { padding-left: 0; }

/* 모바일: 기본 접힘, 토글 시 오픈(오버레이) */
@media (max-width: 960px) {
  body.with-sidebar { padding-left: 0; }
  #sidebar { transform: translateX(-100%); }
  body.sidebar-open #sidebar { transform: translateX(0); }
  #sidebar-toggle { top: 10px; left: 10px; }
}

/* 성공 메시지 살짝 띄우기(선택) */
.success-message {
  position: fixed; top: 10px; right: 10px; z-index: 1200;
  background: #e6ffed; color: #0a7f31; padding: 8px 12px; border-radius: 6px;
  border: 1px solid #bff0c8; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* === Sidebar z-index / Backdrop / Mobile open 위치 === */
:root {
  --sb-w: 240px;
}

/* 사이드바가 모든 콘텐츠보다 위에 오도록 */
#sidebar { z-index: 9998; }

/* 토글 버튼이 가장 위에 오도록, 크기 강제(다른 전역 버튼 스타일 무력화) */
#sidebar-toggle{
  position: fixed; inset: 10px auto auto 10px;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  z-index: 10000;
}

/* 모바일에서 열렸을 때 토글 버튼을 사이드바 오른쪽으로 이동(메뉴 안 가리게) */
@media (max-width: 960px){
  body.sidebar-open #sidebar-toggle { left: calc(var(--sb-w) + 12px); }
}

/* 모바일 백드롭(본문 클릭 막기 + 닫기용) */
.sidebar-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: none; z-index: 9990;
}
body.sidebar-open .sidebar-backdrop{ display: block; }

/* 혹시 본문에 높은 z-index가 있다면 사이드바보다 낮게 */
.container, main, header, footer { position: relative; z-index: 1; }
/* 맨 위로 버튼 */
.scroll-top{
  position: fixed;
  right: 16px; /* 왼쪽으로 두고 싶으면 left:16px로 바꾸고 right 제거 */
  bottom: calc(16px + env(safe-area-inset-bottom)); /* iOS 안전영역 대응 */
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: #1f6feb; color: #fff;
  font-size: 20px; line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 9999;          /* 다른 요소 위로 */
  opacity: 0;             /* 기본은 숨김 */
  transform: translateY(12px);
  pointer-events: none;   /* 숨김일 때 클릭 막기 */
  transition: opacity .25s ease, transform .25s ease;
}
.scroll-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:active{ transform: translateY(1px); }
@media (prefers-reduced-motion: reduce){
  .scroll-top{ transition: none; }
}

/* --- Pirelli 강조 버튼: 노란 배경 + 빨간 글씨, 테두리 없음 --- */
.btn-pirelli,
.actions-bar .btn-pirelli,
.bulk-actions .btn-pirelli,
.bulk-group .btn-pirelli {
  background-color: #FFD400 !important; /* 노란 배경 */
  color: #DA291C !important;            /* 빨간 글씨 */
  border: none !important;              /* 테두리 제거 */
  font-weight: 800;
}

/* hover */
.btn-pirelli:hover,
.actions-bar .btn-pirelli:hover { filter: brightness(0.95); }

/* focus: 노란색 은은한 포커스 링(접근성) */
.btn-pirelli:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .45);
}


.topnav{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.topnav a{
  padding:6px 10px; border-radius:6px; text-decoration:none;
}
.topnav a:hover{ background:#f3f3f3; }
.topnav .sep{ margin:0 6px; color:#aaa; }
.topnav .danger-link{ color:#ff6666; }

.menu-group{ position:relative; display:inline-block; }
.menu-group > summary{
  list-style:none; cursor:pointer; padding:6px 10px; border-radius:6px;
}
.menu-group > summary::-webkit-details-marker{ display:none; }
.menu-group[open] > summary{ background:#f3f3f3; }

.menu-group .dropdown{
  position:absolute; top:100%; left:0; z-index:1000;
  background:#fff; border:1px solid #ddd; border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  padding:6px; min-width:160px; display:flex; flex-direction:column; gap:4px;
}
.menu-group .dropdown a{ white-space:nowrap; }
@media (max-width: 760px){
  .topnav{ gap:6px; }
  .menu-group .dropdown{ min-width: 140px; }
}