/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Admin Sidebar Submenu Styles */
.submenu-enter {
  transition: all 0.2s ease-out;
  transform-origin: top;
}

.submenu-enter.hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: scaleY(0);
}

.submenu-enter:not(.hidden) {
  opacity: 1;
  max-height: 500px;
  transform: scaleY(1);
}

/* Sidebar scroll styles */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.7);
}

/* Markdown rendering for /working/system_setup naiki manual section */
.naiki-manual h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: rgb(17, 24, 39);
  border-bottom: 1px solid rgb(229, 231, 235);
  padding-bottom: 0.4rem;
}
.naiki-manual h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgb(31, 41, 55);
}
.naiki-manual h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  color: rgb(55, 65, 81);
}
.naiki-manual p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(55, 65, 81);
  margin-bottom: 0.75rem;
}
.naiki-manual ul, .naiki-manual ol {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: rgb(55, 65, 81);
}
.naiki-manual ul { list-style-type: disc; }
.naiki-manual ol { list-style-type: decimal; }
.naiki-manual li { margin-bottom: 0.25rem; line-height: 1.55; }
.naiki-manual blockquote {
  border-left: 3px solid rgb(99, 102, 241);
  padding: 0.5rem 0.75rem;
  background-color: rgb(238, 242, 255);
  margin: 0.75rem 0;
  font-size: 0.875rem;
  color: rgb(31, 41, 55);
  border-radius: 0 0.25rem 0.25rem 0;
}
.naiki-manual table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.8125rem;
  display: block;
  overflow-x: auto;
}
.naiki-manual th {
  background-color: rgb(249, 250, 251);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(75, 85, 99);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid rgb(229, 231, 235);
  white-space: nowrap;
}
.naiki-manual td {
  padding: 0.5rem 0.75rem;
  color: rgb(55, 65, 81);
  border: 1px solid rgb(229, 231, 235);
  vertical-align: top;
  line-height: 1.5;
}
.naiki-manual code {
  background-color: rgb(243, 244, 246);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: rgb(219, 39, 119);
  word-break: break-word;
}
.naiki-manual pre {
  background-color: rgb(249, 250, 251);
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  overflow-x: auto;
  font-size: 0.8125rem;
}
.naiki-manual pre code {
  background-color: transparent;
  color: rgb(31, 41, 55);
  padding: 0;
  font-size: inherit;
}
.naiki-manual a {
  color: rgb(79, 70, 229);
  text-decoration: underline;
}
.naiki-manual a:hover { color: rgb(67, 56, 202); }
.naiki-manual hr {
  border: 0;
  border-top: 1px solid rgb(229, 231, 235);
  margin: 1.5rem 0;
}
.naiki-manual strong { font-weight: 600; color: rgb(17, 24, 39); }

/* === Notion 에디터 데모 (Tiptap ProseMirror) ===
 * Tailwind v4 + typography plugin 미설치 환경 - .prose 유틸리티가 없어
 * Tiptap 의 contenteditable (.ProseMirror) 내부 요소가 UA 기본 스타일로 보임.
 * /admin/dev_components/notion_editor 페이지의 Tiptap 데모 한정 스코프.
 */
[data-controller~="notion-tiptap"] .ProseMirror {
  outline: none;
  min-height: 280px;
  color: rgb(17, 24, 39);
  font-size: 0.875rem;
  line-height: 1.625;
}
[data-controller~="notion-tiptap"] .ProseMirror:focus { outline: none; }

[data-controller~="notion-tiptap"] .ProseMirror h1 {
  font-size: 1.875rem; font-weight: 700; line-height: 1.2;
  margin: 1.25rem 0 0.75rem; color: rgb(17, 24, 39);
}
[data-controller~="notion-tiptap"] .ProseMirror h2 {
  font-size: 1.5rem; font-weight: 700; line-height: 1.25;
  margin: 1rem 0 0.5rem; color: rgb(17, 24, 39);
}
[data-controller~="notion-tiptap"] .ProseMirror h3 {
  font-size: 1.25rem; font-weight: 600; line-height: 1.3;
  margin: 0.875rem 0 0.5rem; color: rgb(17, 24, 39);
}
[data-controller~="notion-tiptap"] .ProseMirror p { margin: 0.5rem 0; }
[data-controller~="notion-tiptap"] .ProseMirror strong { font-weight: 700; }
[data-controller~="notion-tiptap"] .ProseMirror em { font-style: italic; }
[data-controller~="notion-tiptap"] .ProseMirror code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgb(243, 244, 246);
  color: rgb(220, 38, 38);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}
[data-controller~="notion-tiptap"] .ProseMirror pre {
  background: rgb(17, 24, 39);
  color: rgb(243, 244, 246);
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
  overflow-x: auto;
}
[data-controller~="notion-tiptap"] .ProseMirror pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.8125rem;
}
[data-controller~="notion-tiptap"] .ProseMirror ul,
[data-controller~="notion-tiptap"] .ProseMirror ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
[data-controller~="notion-tiptap"] .ProseMirror ul { list-style: disc; }
[data-controller~="notion-tiptap"] .ProseMirror ol { list-style: decimal; }
[data-controller~="notion-tiptap"] .ProseMirror li { margin: 0.25rem 0; }
[data-controller~="notion-tiptap"] .ProseMirror li > p { margin: 0; }
[data-controller~="notion-tiptap"] .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 0; }
[data-controller~="notion-tiptap"] .ProseMirror ul[data-type="taskList"] li {
  display: flex; align-items: flex-start; gap: 0.5rem;
}
[data-controller~="notion-tiptap"] .ProseMirror ul[data-type="taskList"] li > label {
  margin-top: 0.25rem;
}
[data-controller~="notion-tiptap"] .ProseMirror ul[data-type="taskList"] li > div { flex: 1; }
[data-controller~="notion-tiptap"] .ProseMirror blockquote {
  border-left: 3px solid rgb(99, 102, 241);
  padding-left: 1rem;
  color: rgb(75, 85, 99);
  margin: 0.75rem 0;
  font-style: italic;
}
[data-controller~="notion-tiptap"] .ProseMirror hr {
  border: 0; border-top: 1px solid rgb(229, 231, 235); margin: 1rem 0;
}
[data-controller~="notion-tiptap"] .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}
[data-controller~="notion-tiptap"] .ProseMirror table th,
[data-controller~="notion-tiptap"] .ProseMirror table td {
  border: 1px solid rgb(229, 231, 235);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
}
[data-controller~="notion-tiptap"] .ProseMirror table th {
  background: rgb(249, 250, 251);
  font-weight: 600;
  text-align: left;
}
[data-controller~="notion-tiptap"] .ProseMirror img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin: 0.5rem 0;
}
[data-controller~="notion-tiptap"] .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: rgb(156, 163, 175);
  pointer-events: none;
  height: 0;
}
.drag-handle {
  position: fixed;
  opacity: 0.6;
  width: 1.2rem;
  height: 1.5rem;
  z-index: 50;
  cursor: grab;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 2a1 1 0 100 2 1 1 0 000-2zM3 4.5a1 1 0 100 2 1 1 0 000-2zM3 7a1 1 0 100 2 1 1 0 000-2zM7 2a1 1 0 100 2 1 1 0 000-2zM7 4.5a1 1 0 100 2 1 1 0 000-2zM7 7a1 1 0 100 2 1 1 0 000-2z' fill='%23666'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.drag-handle:hover { opacity: 1; background-color: rgb(243, 244, 246); border-radius: 0.25rem; }
.drag-handle.hide { display: none; pointer-events: none; }

/* 다크 배경 (bg-gray-900) 컨테이너 내 스크롤 가능 영역의 스크롤바를 컨테이너 색과
 * 동일하게 만들어 시각적 노이즈 제거. /intranet/vibe_coding 의 프롬프트 박스 등. */
.scrollbar-dark {
  scrollbar-color: rgb(75, 85, 99) rgb(17, 24, 39);
  scrollbar-width: thin;
}
.scrollbar-dark::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-dark::-webkit-scrollbar-track { background: rgb(17, 24, 39); }
.scrollbar-dark::-webkit-scrollbar-thumb {
  background-color: rgb(75, 85, 99);
  border-radius: 4px;
  border: 2px solid rgb(17, 24, 39);
}
.scrollbar-dark::-webkit-scrollbar-thumb:hover { background-color: rgb(107, 114, 128); }
.scrollbar-dark::-webkit-scrollbar-corner { background: rgb(17, 24, 39); }