/* Import Google Fonts for Japanese text */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

/* Import AG Grid theme styles - using dist/styles path as per AG-Grid v31+ */
@import url("https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/styles/ag-grid.css");
@import url("https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/styles/ag-theme-quartz.css");

/* AG Grid는 시스템 폰트를 사용하므로 커스텀 폰트 정의 제거 */

/* Japanese Font Override */
* {
  font-family: "Open Sans", "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif !important;
}

/* AG Grid 아이콘 예외 처리 - 아이콘 폰트 사용 */
.ag-icon,
.ag-icon::before,
.ag-icon::after {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}

/* AG Grid 전체에서 일본어 폰트 오버라이드 예외 */
.ag-theme-quartz .ag-icon {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Ensure dark mode works properly */
.dark {
  color-scheme: dark;
}

/* Unified Dark Mode Color System */
.dark {
  /* Background colors - from darkest to lightest */
  --bg-primary: #111827;    /* gray-900 - Main app background */
  --bg-secondary: #1f2937;  /* gray-800 - Card/panel backgrounds */
  --bg-tertiary: #374151;   /* gray-700 - Elevated elements, inputs */
  --bg-hover: #4b5563;      /* gray-600 - Hover states */
  --bg-active: #6b7280;     /* gray-500 - Active/selected states */

  /* Border colors */
  --border-primary: #374151;   /* gray-700 - Primary borders */
  --border-secondary: #4b5563; /* gray-600 - Secondary borders */
  --border-hover: #6b7280;     /* gray-500 - Hover state borders */

  /* Text colors */
  --text-primary: #f3f4f6;    /* gray-100 - Primary text */
  --text-secondary: #e5e7eb;  /* gray-200 - Secondary text */
  --text-tertiary: #d1d5db;   /* gray-300 - Muted text */
  --text-muted: #9ca3af;      /* gray-400 - Very muted text */

  /* Interactive element colors */
  --button-bg: #374151;       /* gray-700 - Default button background */
  --button-hover: #4b5563;    /* gray-600 - Button hover */
  --button-active: #6b7280;   /* gray-500 - Button active */
  --button-text: #f3f4f6;     /* gray-100 - Button text */

  /* Form element colors */
  --input-bg: #374151;        /* gray-700 - Input background */
  --input-border: #4b5563;    /* gray-600 - Input border */
  --input-focus: #60a5fa;     /* blue-400 - Focus indicator */
  --input-text: #f3f4f6;      /* gray-100 - Input text */
  --input-placeholder: #9ca3af; /* gray-400 - Placeholder text */

  /* Status colors */
  --success: #10b981;         /* green-500 */
  --warning: #f59e0b;         /* amber-500 */
  --error: #ef4444;           /* red-500 */
  --info: #3b82f6;            /* blue-500 */
}

/* Synchronized transitions */
html.transitioning * {
  transition-duration: 200ms !important;
  transition-timing-function: ease-in-out !important;
}

/* Prevent layout shift during transition */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: ease-in-out;
  transition-duration: 200ms;
}

/* Dark mode form elements - using unified colors */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--input-focus);
  outline-color: var(--input-focus);
  background-color: var(--input-bg);
}

/* Placeholder text */
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

/* Dark mode form control class */
.dark .form-control {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.dark .form-control:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus);
  color: var(--input-text);
}

/* Checkboxes and radio buttons */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
  background-color: var(--info);
  border-color: var(--info);
}

/* Dark mode tables - using unified colors */
.dark .table {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.dark .table th {
  color: var(--text-secondary);
  border-color: var(--border-primary);
  background-color: var(--bg-tertiary);
}

.dark .table td {
  border-color: var(--border-primary);
}

.dark .table-bordered {
  border-color: var(--border-primary);
}

.dark .table-bordered th,
.dark .table-bordered td {
  border-color: var(--border-primary);
}

.dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bg-tertiary);
}

.dark .table-hover > tbody > tr:hover {
  background-color: var(--bg-hover);
}

/* Dark mode for grid table headers */
.dark g-thead {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

.dark g-tbody {
  background-color: var(--bg-secondary);
}

.dark g-table {
  background-color: var(--bg-secondary);
}

/* Dark mode for list containers */
.dark .card-body {
  background-color: var(--bg-secondary);
}

/* Override Tailwind classes with unified colors */
.dark .bg-white { background-color: var(--bg-secondary) !important; }
.dark .bg-gray-50 { background-color: var(--bg-secondary) !important; }
.dark .bg-gray-100 { background-color: var(--bg-secondary) !important; }
.dark .bg-gray-200 { background-color: var(--bg-tertiary) !important; }
.dark .bg-gray-300 { background-color: var(--bg-tertiary) !important; }
.dark .bg-gray-400 { background-color: var(--bg-hover) !important; }
.dark .bg-gray-500 { background-color: var(--bg-active) !important; }

/* Text color overrides */
.dark .text-gray-900 { color: var(--text-primary) !important; }
.dark .text-gray-800 { color: var(--text-primary) !important; }
.dark .text-gray-700 { color: var(--text-secondary) !important; }
.dark .text-gray-600 { color: var(--text-secondary) !important; }
.dark .text-gray-500 { color: var(--text-tertiary) !important; }
.dark .text-gray-400 { color: var(--text-muted) !important; }

/* Border color overrides */
.dark .border-gray-200 { border-color: var(--border-primary) !important; }
.dark .border-gray-300 { border-color: var(--border-primary) !important; }
.dark .border-gray-400 { border-color: var(--border-secondary) !important; }
.dark .border-gray-500 { border-color: var(--border-hover) !important; }

/* Force dark mode on card elements */
.dark .card,
.dark .card-header,
.dark .card-body,
.dark .card-footer {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Force dark mode on rounded containers */
.dark .rounded-xl,
.dark .rounded-lg,
.dark .rounded-md {
  background-color: var(--bg-secondary) !important;
}

/* Ensure grid table cells have dark background */
.dark g-tr > * {
  background-color: var(--bg-secondary) !important;
}

/* Dark mode for any table-like structures */
.dark [class*="table"] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Override CSS variables for components */
.dark {
  --color-bg: var(--bg-secondary) !important;
  --color-text: var(--text-primary) !important;
  --color-border: var(--border-primary) !important;
}

/* Apply unified dark mode colors to common elements */
.dark body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Cards and panels */
.dark .card,
.dark .panel,
.dark [class*="rounded"] {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

/* Buttons - unified styling */
.dark button:not(.fc-button),
.dark .btn,
.dark [role="button"] {
  background-color: var(--button-bg);
  color: var(--button-text);
  border-color: var(--border-primary);
}

.dark button:not(.fc-button):hover,
.dark .btn:hover,
.dark [role="button"]:hover {
  background-color: var(--button-hover);
  border-color: var(--border-secondary);
}

/* Links */
.dark a {
  color: var(--info);
}

.dark a:hover {
  color: #60a5fa; /* blue-400 */
}

/* Tables */
.dark table,
.dark .table {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.dark th {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.dark td {
  border-color: var(--border-primary);
}

.dark tr:hover {
  background-color: var(--bg-tertiary);
}

/* Dropdowns and menus */
.dark .dropdown-menu,
.dark [role="menu"],
.dark .menu {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .dropdown-item:hover,
.dark [role="menuitem"]:hover {
  background-color: var(--bg-tertiary);
}

/* Modals */
.dark .modal,
.dark .modal-content,
.dark [role="dialog"] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.dark .modal-header,
.dark .modal-footer {
  border-color: var(--border-primary);
}

/* Badges and pills */
.dark .badge,
.dark .pill {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Tooltips and popovers */
.dark .tooltip,
.dark .popover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* Navigation */
.dark nav,
.dark .navbar,
.dark .sidebar {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .nav-link {
  color: var(--text-secondary);
}

.dark .nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.dark .nav-link.active {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Alerts */
.dark .alert {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* Progress bars */
.dark .progress {
  background-color: var(--bg-tertiary);
}

/* Dark mode scrollbar - unified */
.dark {
  scrollbar-color: var(--border-secondary) var(--bg-secondary);
}

.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--bg-active);
}

.dark ::-webkit-scrollbar-corner {
  background: var(--bg-secondary);
}

/* Dark mode kanban drag styles */
.dark .kanban-column.drag-over {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #60a5fa;
}

.dark .kanban-column.drag-over h3 {
  color: #60a5fa;
}

/* Dark mode calendar styles */
.dark .fc-toolbar {
  background: #1f2937;
  border-bottom-color: #374151;
}

.dark .fc-toolbar-title {
  color: #f3f4f6;
}

.dark .fc-button {
  background: #3b82f6;
  border-color: #3b82f6;
}

.dark .fc-button:hover {
  background: #60a5fa;
  border-color: #60a5fa;
}

.dark .fc-button:disabled {
  background: #4b5563;
  border-color: #4b5563;
}

.dark .fc-daygrid-day {
  background: #1f2937;
  border-color: #374151;
}

.dark .fc-daygrid-day:hover {
  background: #374151;
}

.dark .fc-daygrid-day-number {
  color: #f3f4f6;
}

/* FullCalendar dark mode comprehensive fixes */
.dark .fc {
  background-color: #1f2937;
}

.dark .fc-theme-standard td,
.dark .fc-theme-standard th {
  border-color: #374151;
}

.dark .fc-theme-standard .fc-scrollgrid {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .fc .fc-scrollgrid-section-header > *,
.dark .fc .fc-scrollgrid-section-footer > *,
.dark .fc .fc-scrollgrid-section-body > * {
  background-color: #1f2937;
}

.dark .fc-col-header-cell {
  background-color: #374151 !important;
  color: #e5e7eb;
}

.dark .fc-day-today {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.dark .fc-daygrid-day-frame {
  background-color: #1f2937;
}

.dark .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: rgba(59, 130, 246, 0.1);
}

.dark .fc-timegrid-slot {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .fc-timegrid-slot-label {
  background-color: #374151;
  color: #e5e7eb;
}

.dark .fc-timegrid-axis {
  background-color: #374151;
  color: #e5e7eb;
}

.dark .fc-list-table {
  background-color: #1f2937;
}

.dark .fc-list-day-cushion {
  background-color: #374151;
  color: #e5e7eb;
}

.dark .fc-list-event {
  background-color: #1f2937;
  color: #e5e7eb;
}

.dark .fc-list-event:hover {
  background-color: #374151;
}

/* Calendar event colors in dark mode */
.dark .fc-event {
  border-color: transparent;
}

/* Time grid specific */
.dark .fc-timegrid-divider {
  background-color: #374151;
}

.dark .fc-timegrid-col {
  background-color: #1f2937;
}

.dark .fc-timegrid-col-frame {
  background-color: #1f2937;
}

/* Day headers */
.dark .fc-col-header {
  background-color: #374151;
}

.dark .fc-col-header-cell-cushion {
  color: #e5e7eb;
}

/* More specific overrides */
.dark .fc-daygrid-body {
  background-color: #1f2937;
}

.dark .fc-scrollgrid-sync-table {
  background-color: #1f2937;
}

/* Fix for the white cells */
.dark .fc-daygrid-day-bg,
.dark .fc-timegrid-col-bg {
  background-color: #1f2937 !important;
}

.dark .fc-day-other {
  background-color: #111827 !important;
  color: #6b7280;
}

.dark .fc-day-other .fc-daygrid-day-number {
  color: #6b7280;
}

/* Chat-specific dark mode fixes */
.dark #emojiPicker {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark #moreMenu {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .note-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .note-item:hover {
  background-color: var(--bg-tertiary);
}

/* Thread panel dark mode */
.dark #threadPanel {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark #threadOriginalMessage {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
}

/* Member selection dark mode */
.dark .member-item:hover {
  background-color: var(--bg-tertiary);
}

/* Fixed elements dark mode */
.dark .fixed > div {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Hover states */
.dark .hover\\:bg-gray-50:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark .hover\\:bg-gray-100:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark .hover\\:bg-gray-700:hover {
  background-color: var(--bg-hover) !important;
}

/* Focus states */
.dark .focus\\:ring-blue-500:focus {
  --tw-ring-color: var(--input-focus);
}

.dark .focus\\:border-blue-500:focus {
  border-color: var(--input-focus);
}

/* Ensure all fixed/absolute positioned elements have dark mode */
.dark .fixed > div:not([class*="gradient"]),
.dark .absolute > div:not([class*="gradient"]) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Shadow colors in dark mode */
.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Notification styles */
.notification-item.unread {
  position: relative;
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #3B82F6; /* Blue color for unread indicator */
}

.notification-item a,
.notification-item button {
  text-decoration: none;
  color: inherit;
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.popover {
  background-color: var(--color-bg, white);
  border-radius: var(--rounded-md, 0.375rem);
  border-width: 1px;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
  color: var(--color-text, #374151);
  inline-size: var(--popover-size, max-content);
  transition-behavior: allow-discrete;
  transition-duration: 150ms;
  transition-property: display, overlay, opacity, transform;
  opacity: 0;
  transform: scale(0.95);
}

.popover:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

.search-results {
  height: 100%;
}

.search-results > * {
  height: 100%;
}

/* Kanban Board Styles */
/* Add smooth drag and drop styles */
.kanban-column {
  transition: all 0.2s ease-in-out;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.kanban-column.drag-over {
  background-color: rgba(59, 130, 246, 0.1);
  border: 2px dashed #3b82f6;
  transform: scale(1.02);
}

[data-admin--kanban-target="note"] {
  transition: all 0.15s ease-in-out;
  cursor: grab;
}

[data-admin--kanban-target="note"]:active {
  cursor: grabbing;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

[data-admin--kanban-target="note"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Smooth counter updates */
.kanban-column h3 {
  transition: color 0.2s ease-in-out;
}

.kanban-column.drag-over h3 {
  color: #3b82f6;
  font-weight: 600;
}

/* Horizontal kanban layout */
.kanban-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

.kanban-container::-webkit-scrollbar {
  height: 8px;
}

.kanban-container::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 4px;
}

.kanban-container::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.kanban-container::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Ensure columns don't shrink */
.kanban-column {
  flex-shrink: 0;
  min-width: 320px;
}

/* Import chat styles */
@import "chat.css";

/* Import Quill editor styles */
@import "quill_editor.css";

/* Toast animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out;
}

/* Sticky action column for admin tables */
/* For custom grid table elements */
g-table {
  position: relative;
}

/* Make the last column sticky */
g-thead g-th.action-links-header,
g-tbody g-td.action-links {
  position: sticky;
  right: 0;
  background-color: inherit;
  z-index: 10;
}

/* Ensure proper stacking context for tbody rows */
g-tbody g-tr {
  position: relative;
}

/* Show shadow when table is scrolled */
g-table.scrolled g-thead g-th.action-links-header::before,
g-table.scrolled g-tbody g-td.action-links::before {
  opacity: 1;
}

/* Ensure proper backgrounds in light mode */
g-thead g-th.action-links-header {
  background-color: #f9fafb;
}

/* Dark mode support for sticky columns */
.dark g-thead g-th.action-links-header {
  background-color: var(--bg-tertiary);
}

.dark g-tbody g-td.action-links {
  background-color: var(--bg-secondary);
}

/* Adjust shadow for dark mode */
.dark g-thead g-th.action-links-header::before,
.dark g-tbody g-td.action-links::before {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
}

/* Full height layout */
.kanban-board {
  height: calc(100vh - 200px);
  min-height: 600px;
}

.cursor-move {
  cursor: move;
}

.cursor-move:active {
  cursor: grabbing;
}

/* Notes Calendar Styles */
.fc-toolbar {
  padding: 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.fc-toolbar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
}

.fc-button {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.fc-button:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.fc-button:disabled {
  background: #9ca3af;
  border-color: #9ca3af;
}

.fc-daygrid-day {
  background: white;
  border: 1px solid #e5e7eb;
}

.fc-daygrid-day:hover {
  background: #f9fafb;
}

.fc-daygrid-day-top {
  padding: 0.5rem;
}

.fc-daygrid-day-number {
  color: #374151;
  font-weight: 500;
}

.fc-event {
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0.125rem;
}

.fc-event:hover {
  opacity: 0.8;
}

.fc-event-title {
  color: white;
  font-weight: 500;
}

/* Chat Application Styles */
/* Thread replies animation */
.thread-replies {
  transition: opacity 0.2s ease-in-out;
}

.thread-replies.hidden {
  display: none;
}

/* Prevent action buttons from showing on media hover */
.group:hover .group-hover\:opacity-100 {
  opacity: 0;
}

/* Show action buttons only when hovering over message text area */
.group:hover .flex-1:hover ~ .group-hover\:opacity-100,
.group:hover .group-hover\:opacity-100:hover {
  opacity: 1;
}

/* Smooth chevron rotation */
span[id^="thread-chevron-"] {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Message textarea styling */
#message_body {
  line-height: 1.5;
  overflow-y: hidden;
  transition: height 0.1s ease;
}

#message_body::-webkit-scrollbar {
  width: 4px;
}

#message_body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

#message_body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

/* AG Grid 커스터마이징 */
.ag-theme-quartz {
  --ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ag-row-height: 36px;
  --ag-header-height: 40px;
}

/* AG Grid Dark Mode Support */
.dark .ag-theme-quartz,
.ag-theme-quartz.ag-theme-dark {
  --ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ag-row-height: 36px;
  --ag-header-height: 40px;
  --ag-background-color: #1f2937;
  --ag-header-background-color: #374151;
  --ag-odd-row-background-color: #1f2937;
  --ag-row-hover-color: #374151;
  --ag-border-color: #4b5563;
  --ag-foreground-color: #e5e7eb;
  --ag-header-foreground-color: #f3f4f6;
  --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.66);
}

/* Ensure AG Grid dark theme inherits dark mode colors */
.dark .ag-theme-quartz {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}


.dark .ag-theme-quartz .ag-header {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.dark .ag-theme-quartz .ag-row {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.dark .ag-theme-quartz .ag-row-odd {
  background-color: var(--bg-tertiary);
}

.dark .ag-theme-quartz .ag-row-hover {
  background-color: var(--bg-hover);
}

.ag-cell-focus {
  border: 2px solid #0d6efd !important;
}

.ag-aria-description-container {
  display: none;
}

/* Accordion Card Styles */
.accordion-content {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  /* Prevent width changes during animation */
  width: 100%;
}

/* When expanded, allow proper overflow */
.expanded .accordion-content {
  overflow: visible;
}

/* When accordion card is expanded, allow overflow for dropdowns */
[data-controller="accordion-card"].expanded {
  overflow: visible !important;
}

/* When accordion card is collapsed, hide overflow */
[data-controller="accordion-card"].collapsed {
  overflow: hidden;
}

/* Smooth icon rotation */
[data-accordion-card-target="icon"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header hover effects */
.accordion-card-header[data-accordion-card-target="header"] {
  position: relative;
  user-select: none;
}

/* Prevent text selection while clicking */
.accordion-card-header[data-accordion-card-target="header"] * {
  pointer-events: none;
}

/* Allow interaction with action links */
.accordion-card-header[data-accordion-card-target="header"] a,
.accordion-card-header[data-accordion-card-target="header"] button {
  pointer-events: auto;
}

/* Import loading styles */
@import "loading.css";

/* Import AG Grid custom styles */
@import "ag_grid_custom.css";