@import url('./reset.css');
@import url('./fonts.css');
@import url('./layout.css');
@import url('./typography.css');
@import url('./colors.css');
@import url('./components.css');

:root {
  /* Colors */
  --color-background: #FFFFFF;
  --color-sidebar: #FFFFFF;
  --color-white: #fff;
  --color-text-primary: #1E1E1E;
  --color-text-secondary:#757575;
  --color-text-tertiary: #4C4D59;

  --color-border: #D7DAE9;
  --color-border-mid: rgba(34, 34, 39, 0.2);
  --color-border-light: #F5F5F5;
  
  --color-accent: #FF00FF;

  --color-success: #56C678;

  --color-critical: #F34544;
  --color-critical-bg: rgba(243, 69, 68, 0.1);
  --color-high: #FCBD44;
  --color-high-bg: rgba(254, 205, 111, 0.2);
  --color-medium: #F78533;
  --color-medium-bg: rgba(247, 133, 51, 0.1);
  
  /* Fonts */
  --font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  
  /* Sizes */
  --spacing-xs: 0.3125rem;  /* 5px */
  --spacing-sm: 0.625rem;   /* 10px */
  --spacing-md: 0.9375rem;  /* 15px */
  --spacing-lg: 1.25rem;    /* 20px */
  --spacing-xl: 1.875rem;   /* 30px */
  --spacing-xxl: 2.5rem;    /* 40px */
  
  /* Font sizes */
  --font-size-xs: 0.8125rem;  /* 13px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.375rem;   /* 22px */
  --font-size-xl: 1.75rem;    /* 28px */
  
  /* Border radius */
  --border-radius-sm: 0.3125rem;  /* 5px */
  --border-radius-md: 0.5rem;     /* 8px */
  --border-radius-lg: 0.625rem;   /* 10px */
  --border-radius-circle: 50%;
  
  /* Component sizes */
  --sidebar-width: 21.25rem;      /* 340px */
  --logo-size: 3.125rem;          /* 50px */
  --topic-number-size: 1.875rem;  /* 30px */
  --dot-size: 0.375rem;           /* 6px */
  --circle-size: 1.25rem;         /* 20px */
  --radio-size: 1.125rem;         /* 18px */
}



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

body {
    margin: 0;
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-weight: 500;
}

.container {
    width: 100%;
    max-width: 90rem; /* 1440px */
    margin: 0 auto;
}

/* Sidebar styles */
.sidebar {
  background-color: var(--color-sidebar);
  min-height: calc(100vh - 40px);
}

.logo-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  overflow: hidden;
}

.topic-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.list-group-item.active .topic-number {
  background-color: #e6e1f5;
}

/* Tab styles */
.tab-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ddd;
  display: inline-block;
}

.nav-link.active .tab-circle {
  background-color: #198754;
  border-color: #198754;
}

/* Question card styles */
.question-card .card-header {
  background-color: #f9f9f9;
}

.priority-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.priority-label {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Priority colors */
.question-card.critical .priority-dot {
  background-color: var(--color-critical);
}

.question-card.critical .priority-label {
  color: var(--color-critical);
}

.question-card.high .priority-dot {
  background-color: var(--color-high);
}

.question-card.high .priority-label {
  color: var(--color-high);
}

.question-card.medium .priority-dot {
  background-color: var(--color-medium);
}

.question-card.medium .priority-label {
  color: var(--color-medium);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .sidebar {
    min-height: auto;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .btn-group .btn {
    border-radius: 0.25rem !important;
    margin-bottom: 0.25rem;
  }
}