/* Friday Bali style Admin Design System Overrides */
:root {
  /* Admin System override colors when in leader layout */
  --admin-primary: #4F46E5;
  --admin-primary-hover: #4338CA;
  --admin-border: #E5E7EB;
  --admin-bg-primary: #F9FAFB;
  --admin-bg-surface: #FFFFFF;
  --admin-text-main: #111827;
  --admin-text-muted: #4B5563;
  --admin-error: #EF4444;
}

/* Scoped to leader-layout */
.leader-layout {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-main) !important;
  font-family: 'Inter', 'Pretendard', sans-serif !important;
}

/* Sharp corners everywhere inside leader-layout */
.leader-layout *, 
.leader-layout ::before, 
.leader-layout ::after {
  border-radius: 0px !important;
}

/* Overriding cards inside leader-layout */
.leader-layout .card {
  background-color: var(--admin-bg-surface) !important;
  border: 1px solid var(--admin-border) !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

/* 사이드바는 2026-08-02 에 걷어냈다(상단바 + 전체 메뉴 패널로 교체).
   .leader-sidebar / -header / -footer 규칙은 마크업이 사라져 더 쓰이지 않는다.
   app.css 에는 레이아웃 규칙이 남아 있지만 붙을 요소가 없다. */

/* Menu items */
.leader-menu-item a {
  color: var(--admin-text-muted) !important;
  font-weight: 600 !important;
  border-radius: 0px !important;
}

.leader-menu-item a:hover {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-main) !important;
}

.leader-menu-item.active a {
  background-color: var(--admin-primary) !important;
  color: #ffffff !important;
}

/* Inputs and Selects inside leader-layout */
.leader-layout .form-control,
.leader-layout input[type="text"],
.leader-layout input[type="password"],
.leader-layout input[type="email"],
.leader-layout input[type="number"],
.leader-layout input[type="date"],
.leader-layout select,
.leader-layout textarea {
  border: 1px solid #D1D5DB !important;
  background-color: #ffffff !important;
  color: var(--admin-text-main) !important;
  border-radius: 0px !important;
  outline: none !important;
  font-size: 13px !important;
}

.leader-layout .form-control:focus,
.leader-layout input:focus,
.leader-layout select:focus,
.leader-layout textarea:focus {
  border-color: var(--admin-primary) !important;
  box-shadow: 0 0 0 1px var(--admin-primary) !important;
}

/* Buttons */
.leader-layout .btn {
  border-radius: 0px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
}

.leader-layout .btn-primary {
  background-color: var(--admin-primary) !important;
  color: #ffffff !important;
  border: none !important;
}
.leader-layout .btn-primary:hover {
  background-color: var(--admin-primary-hover) !important;
}

.leader-layout .btn-secondary {
  background-color: #ffffff !important;
  color: var(--admin-text-muted) !important;
  border: 1px solid #D1D5DB !important;
}
.leader-layout .btn-secondary:hover {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-main) !important;
}

.leader-layout .btn-outline {
  border: 1px solid var(--admin-border) !important;
  background-color: #ffffff !important;
  color: var(--admin-text-muted) !important;
}
.leader-layout .btn-outline:hover {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-main) !important;
}

.leader-layout .btn-black {
  background-color: var(--admin-primary) !important;
  color: #ffffff !important;
  border: none !important;
}
.leader-layout .btn-black:hover {
  background-color: var(--admin-primary-hover) !important;
}

.leader-layout .btn-danger {
  background-color: var(--admin-error) !important;
  color: #ffffff !important;
  border: none !important;
}
.leader-layout .btn-danger:hover {
  background-color: #DC2626 !important;
}

/* Custom Checkbox CSS */
.admin-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.admin-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.admin-checkbox-custom {
  height: 18px;
  width: 18px;
  background-color: #ffffff;
  border: 1px solid #D1D5DB;
  border-radius: 0px !important;
  display: inline-block;
  position: relative;
}

.admin-checkbox-wrapper:hover input ~ .admin-checkbox-custom {
  border-color: var(--admin-primary);
}

.admin-checkbox-wrapper input:checked ~ .admin-checkbox-custom {
  background-color: var(--admin-primary);
  border-color: var(--admin-primary);
}

.admin-checkbox-custom::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.admin-checkbox-wrapper input:checked ~ .admin-checkbox-custom::after {
  display: block;
}

/* Table Style Overrides */
.leader-layout table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.leader-layout th {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-muted) !important;
  border-bottom: 2px solid var(--admin-border) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}

.leader-layout td {
  border-bottom: 1px solid var(--admin-border) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--admin-text-main) !important;
}

/* Page Header Standards */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: var(--admin-bg-surface);
  border: 1px solid var(--admin-border);
  padding: 20px;
}

.page-header-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--admin-text-main);
  margin: 0;
}

.page-header-desc {
  font-size: 13px;
  color: var(--admin-text-muted);
  margin: 4px 0 0 0;
}

.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Search Filters Area Standard */
.admin-search-area {
  background: #ffffff;
  border: 1px solid var(--admin-border);
  padding: 20px;
  margin-bottom: 20px;
}

/* ── 상단바 + 전체 메뉴 패널 (2026-08-02) ────────────────────────────────
 *
 * 예전 좌측 사이드바는 position:fixed; top:0; bottom:0 이라 높이가 화면에 묶여 있었다.
 * 메뉴가 23개로 늘자 아래 항목이 잘린 채 손이 닿지 않았고, overflow 를 붙여 고쳐도
 * 화면이 더 작아지면 같은 문제가 다시 난다.
 *
 * 이 패널은 position 을 안 쓴다. 일반 문서 흐름이라 길어지면 그냥 페이지가 스크롤된다 —
 * 잘림이 구조적으로 불가능해진다.
 */
.leader-layout {
  display: block !important;   /* 사이드바가 없으니 flex 열 배치가 필요 없다 */
}
.leader-main {
  margin-left: 0 !important;   /* 260px 사이드바 자리를 비운다 */
}
.leader-header {
  gap: 14px !important;
  justify-content: flex-start !important;
}

.leader-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: var(--admin-text-main) !important;
  background-color: var(--admin-bg-surface) !important;
  border: 1px solid var(--admin-border) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.leader-menu-btn i { width: 16px !important; height: 16px !important; }
.leader-menu-btn[aria-expanded="true"] {
  background-color: var(--admin-text-main) !important;
  color: #fff !important;
}

.leader-menupanel {
  background-color: var(--admin-bg-surface) !important;
  border-bottom: 1px solid var(--admin-border) !important;
}
.leader-menupanel[hidden] { display: none !important; }
.leader-menupanel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px 24px;
}
/* 메뉴는 여러 열로 흘린다 — 23개를 한 줄로 세우면 패널이 화면을 넘겨 버린다 */
.leader-menupanel .leader-menu {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 2px 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.leader-menupanel .leader-menu-item a { padding: 10px 12px !important; }

.leader-menupanel-account {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.leader-switch-select {
  font-size: 0.78rem; font-weight: 700; height: 34px; padding: 0 10px;
  border: 1px solid var(--admin-border) !important;
  background-color: var(--admin-bg-surface) !important;
  color: var(--admin-text-main) !important;
  font-family: inherit; cursor: pointer; min-width: 160px;
}
.leader-menupanel-who {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--admin-text-muted);
}
.leader-logout-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--admin-error) !important; font-weight: 750; text-decoration: none;
}
.leader-logout-link i { width: 13px; height: 13px; }
.leader-menupanel-account .btn { margin-left: auto; width: auto !important; padding: 0 14px !important; }