@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Primary & Accent */
  --primary: #4C6FFF;
  --primary-hover: #3B5CE0;
  --primary-light: #EEF2FF;
  --primary-text: #FFFFFF;

  /* Neutral Light Mode */
  --bg-page: #F7F8FA;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #EEF0F3;
  --bg-subtle: #EEF0F3;
  --bg-hover: #EEF0F3;
  --bg-active: #E2E5EA;

  --text-primary: #1A1D23;
  --text-secondary: #5C6370;
  --text-muted: #5C6370;
  --text-dim: #9BA1AC;
  --text-disabled: #9BA1AC;

  --border-color: #E2E5EA;
  --border-subtle: #EEF0F3;
  --border-focus: #4C6FFF;
  --grid-border-fallback: rgba(155, 161, 172, 0.45);

  /* Semantic Colors */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --info: #2563EB;
  --info-bg: #DBEAFE;

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border Radii (Disciplined) */
  --radius-sm: 4px;
  --radius-md: 6px;
  /* buttons, inputs */
  --radius-lg: 8px;
  /* cards, dropdowns */
  --radius-xl: 10px;
  /* dialogs, drawers */

  /* Shadows (Subtle, professional) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-dialog: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Layout dimensions */
  --topbar-height: 56px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;

  /* Scrollbar tokens */
  --scrollbar-thumb: #E2E5EA;
  --scrollbar-thumb-hover: #9BA1AC;
  --scrollbar-track: transparent;
}

[data-theme="dark"] {
  --primary: #6E8CFF;
  --primary-hover: #89A2FF;
  --primary-light: rgba(110, 140, 255, 0.15);

  --bg-page: #0F1115;
  --bg-surface: #181A20;
  --bg-surface-2: #22252C;
  --bg-subtle: #22252C;
  --bg-hover: #22252C;
  --bg-active: #2E313A;

  --text-primary: #EDEEF1;
  --text-secondary: #9DA3AF;
  --text-muted: #9DA3AF;
  --text-dim: #5C6270;
  --text-disabled: #5C6270;

  --border-color: #2E313A;
  --border-subtle: #22252C;
  --border-focus: #6E8CFF;
  --grid-border-fallback: rgba(92, 98, 112, 0.45);

  --success-bg: rgba(22, 163, 74, 0.15);
  --warning-bg: rgba(217, 119, 6, 0.15);
  --danger-bg: rgba(220, 38, 38, 0.15);
  --info-bg: rgba(37, 99, 235, 0.15);

  /* Scrollbar tokens (Dark Mode) */
  --scrollbar-thumb: #2E313A;
  --scrollbar-thumb-hover: #5C6270;
  --scrollbar-track: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================================
   CUSTOM SCROLLBAR STYLES (Modern standard + WebKit fallback)
   ========================================================================= */
/* Chuẩn W3C CSS Scrollbars Level 1 (Firefox, Chrome 121+, Safari 18.2+, Edge 121+) */
html,
body,
*,
::before,
::after {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

/* Fallback & Fine-tuned styling cho WebKit / Chromium browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* Kiểu dáng liên kết chung (Màu thương hiệu / xanh tương tự YouTrack/Linear) */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Các phần tử có thể click mở popup/xem chi tiết (Tiêu đề, Tên dự án, Xem nhanh) */
.trigger-quick-view,
.clickable-link,
a.trigger-quick-view {
  color: var(--primary) !important;
  cursor: pointer;
  transition: color 0.15s ease;
}

.trigger-quick-view:hover,
.clickable-link:hover,
a.trigger-quick-view:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline;
}

/* Nhãn thời gian phiên hiện tại & phiên trước */
.duration-badge-current {
  background-color: var(--info-bg) !important;
  color: var(--info) !important;
  border: none !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .duration-badge-current,
html.dark .duration-badge-current {
  background-color: rgba(37, 99, 235, 0.22) !important;
  color: #60a5fa !important;
  border: none !important;
}

.duration-badge-prev {
  background-color: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  border: none !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--radius-sm);
}

/* CSS Loading Frame Infinity cho phiên làm việc hiện tại */
.duration-spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent !important;
  border-radius: 50%;
  animation: duration-spin 0.8s linear infinite;
  margin-right: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}

@keyframes duration-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}