@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --font-family-ui: "Open Sans", "Zen Kaku Gothic New", "Noto Sans KR", "Apple SD Gothic Neo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", "맑은 고딕", "Malgun Gothic", sans-serif;
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html[lang="ko"] {
  --font-family-ui: "Noto Sans KR", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
}

html[lang="ja"] {
  --font-family-ui: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
}

/* Keep tenant Rails views and JS-rendered controls on the same locale-aware stack. */
.tenant-console,
.tenant-console * {
  font-family: var(--font-family-ui) !important;
}

code,
kbd,
pre,
samp,
.font-mono {
  font-family: var(--font-family-code) !important;
}

::selection,
*::selection {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.dark ::selection,
.dark *::selection {
  background-color: #bfdbfe !important;
  color: #111827 !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: #191c24;  /* gray-800 - Card/panel backgrounds */
  --bg-tertiary: #29303c;   /* 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: #1f2937;        /* gray-800 - Input background (matches bg-secondary) */
  --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;
}

/* Browser autofill override - Light mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #111827 !important;
  box-shadow: 0 0 0 1000px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Browser autofill override - Dark mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active,
.dark textarea:-webkit-autofill,
.dark select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #374151 inset !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  box-shadow: 0 0 0 1000px #374151 inset !important;
}

/* 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,
.dark g-thead.bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary);
}

.dark g-thead g-th {
  background-color: transparent !important;
}

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

.dark g-tbody g-td {
  background-color: transparent !important;
}

.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;
}


/* 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 {
  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 - exclude buttons and styled links */
.dark a:not([class*="bg-"]):not([class*="btn"]):not(.brand-link) {
  color: var(--info);
}

.dark a:not([class*="bg-"]):not([class*="btn"]):not(.brand-link):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 .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 !important;
}

/* 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 !important;
}

/* 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;
}

/* 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: var(--font-family-ui);
  --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: var(--font-family-ui);
  --ag-row-height: 36px;
  --ag-header-height: 40px;
  --ag-background-color: #1f2937;
  --ag-header-background-color: transparent;
  --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,
.dark .ag-theme-quartz .ag-header-cell {
  background-color: transparent !important;
  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;
}

.campaign-friendly-form details > summary::-webkit-details-marker {
  display: none;
}

.campaign-friendly-form details[open] > summary svg:last-child {
  transform: rotate(180deg);
}

/* Tenant sidebar: when collapsed, labels are hidden but menu icons should stay
   optically centered in the 72px rail instead of keeping text-mode padding. */
[data-controller="tenant-sidebar"][data-collapsed="true"] .tenant-sidebar-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

[data-controller="tenant-sidebar"][data-collapsed="true"] .tenant-sidebar-profile {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}