/* /srv/projects/mama/home/static/home/admin/admin.css */
/* Wagtail 관리자 전용 공통 CSS (아이콘 그리드 + 관리자 브랜딩) */

:root {
  --mama-logo-height: 120px;
}

/* =========================
   관리자 브랜딩(로고 교체)
   ========================= */

/* 우리가 강제로 넣는 상단 로고 블록 */
.mama-admin-branding {
  padding: 12px 8px;
  display: flex;
  justify-content: center;
}

.mama-admin-branding-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mama-admin-logo {
  height: var(--mama-logo-height);
  width: auto;
  display: block;
}

/*
  ✅ 핵심:
  - 아이콘(svg)만 숨기면, 브랜딩 컨테이너(a.sidebar-wagtail-branding)가 높이/패딩을 계속 차지해서
    아래 메뉴가 위로 당겨지지 않는다.
  - 따라서 "브랜딩 링크 컨테이너 자체"를 레이아웃에서 제거(display:none)한다.
*/
a.sidebar-wagtail-branding {
  display: none !important;
}

/* (보조) Wagtail 관리자 기본 새 로고(아이콘 wrapper + svg)도 확실히 숨김 */
.sidebar-wagtail-branding__icon-wrapper,
.sidebar-wagtail-branding__icon-wrapper svg,
svg.sidebar-wagtail-branding__icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* =========================
   아이콘 그리드 위젯
   ========================= */

.icon-grid-widget .icon-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px 0;
}

.icon-grid-widget .selected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 13px;
}

.icon-grid-widget .selected .label {
  color: #6b7280;
}

.icon-grid-widget .selected-img {
  width: 20px;
  height: 20px;
  display: block;
}

.icon-grid-widget .selected-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #111827;
}

.icon-grid-widget .selected-key.none {
  color: #9ca3af;
}

.icon-grid-widget .toggle-btn {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #111827;
}

.icon-grid-widget .toggle-btn:hover {
  border-color: #9ca3af;
}

.icon-grid-widget .help {
  margin: 0 0 10px 0;
  color: #4b5563;
  font-size: 13px;
}

.icon-grid-widget .grid-wrap.is-collapsed {
  display: none;
}

.icon-grid-widget .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 44px));
  gap: 10px;
  align-items: center;
}

.icon-grid-widget .icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-grid-widget .icon-btn:hover {
  border-color: #9ca3af;
}

.icon-grid-widget .icon-btn.is-selected {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.25);
  background: #eff6ff;
}

.icon-grid-widget .icon-img {
  width: 20px;
  height: 20px;
  display: block;
}