/*────────────────────────────────────────────────────────────────────
      RESET & VARIABLES
    ────────────────────────────────────────────────────────────────────*/
    :root {
      --primary: #E63946;
      --primary-light: #FF6B6B;
      --bg-light: #F5F7FA;
      --bg-alt: #ECEFF4;
      --bg-dark: #1A1A1A;
      --card-light: #FFFFFF;
      --card-dark: #2A2A2A;
      --text-light: #333;
      --text-dark: #E5E5E5;
      --stripe: rgba(230,57,70,0.05);
      --nav-w: 220px;
      --hdr-h: 60px;
      --gap: 2rem;
      --card-gap: 1.5rem;
      --radius: 8px;
      --shadow: 0 2px 8px rgba(0,0,0,0.1);
      --font: 16px;
      --transition: 0.3s;
    }
    * { box-sizing: border-box; margin:0; padding:0; }
    html {
      font-family:'Inter',sans-serif;
      font-size:var(--font); line-height:1.5;
      background:var(--bg-light); color:var(--text-light);
      transition:background var(--transition),color var(--transition);
    }
    html.dark {
      background:var(--bg-dark); color:var(--text-dark);
    }
    body { display:flex; height:100vh; overflow:hidden; }

    /*────────────────────────────────────────────────────────────────────
      HEADER
    ────────────────────────────────────────────────────────────────────*/
    .header {
      position:fixed; top:0; left:0; right:0; height:var(--hdr-h);
      background:var(--card-light); box-shadow:0 1px 4px rgba(0,0,0,0.1);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 1rem; z-index:2200;
    }
    html.dark .header { background:var(--card-dark); }
    .header .brand {
      position:absolute; left:50%; transform:translateX(-50%);
      font-size:1.5rem; font-weight:700; color:var(--primary);
    }
    .header .profile {
      display:flex; align-items:center; gap:0.75rem;
    }
    .header .profile img {
      width:36px; height:36px; border-radius:50%; border:2px solid var(--primary);
    }
    .header .menu-btn {
      display:none; background:none; border:none; font-size:1.5rem;
      cursor:pointer; color:inherit;
    }

    /*────────────────────────────────────────────────────────────────────
      OVERLAY
    ────────────────────────────────────────────────────────────────────*/
    .overlay {
      display:none; position:fixed; top:var(--hdr-h); left:0;
      width:100%; height:calc(100% - var(--hdr-h));
      background:rgba(0,0,0,0.4); z-index:1500;
      overflow-y: auto;
    }
    .overlay.active { display:block; }

    /*────────────────────────────────────────────────────────────────────
      SIDEBAR
    ────────────────────────────────────────────────────────────────────*/
    .sidebar {
      position:fixed; top:0; left:0; bottom:0; width:var(--nav-w);
      padding:var(--hdr-h) .5rem 1rem;
      background:var(--bg-alt);
      border-right:1px solid var(--stripe); 
      box-shadow:2px 0 6px rgba(0,0,0,0.05);
      display:flex; flex-direction:column; transition:transform var(--transition);
      z-index:2100;
      height: 100vh;
      overflow-y: auto;
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
}
#sidebar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari & Opera */
}
    html.dark .sidebar {
      background:var(--card-dark); border-color:rgba(255,255,255,0.1);
    }
    .sidebar .profile {
      display:flex; flex-direction:column; align-items:center;
      gap:0.5rem; margin-bottom:1rem;
    }
    .sidebar .profile img {
      width:64px; height:64px; border-radius:50%; border:2px solid var(--primary);
    }
    .sidebar .profile-info {
      display:flex; flex-direction:column; align-items:center;
      gap:0.25rem; text-align:center;
    }
    .sidebar .profile-info .user-name {
      font-weight:700; font-size:1.1rem;
    }
    .sidebar .profile-info .company-name {
      font-size:0.875rem; font-style:italic; opacity:0.8;
    }
    .sidebar .profile-info .user-role {
      font-size:0.75rem; font-weight:500; opacity:0.6;
    }
    .sidebar nav > a,
    .sidebar nav .nav-link {
      display:block; width:100%; padding:0.5rem 0.75rem;
      border-radius:var(--radius); font-size:0.875rem; font-weight:500;
      text-decoration:none; color:inherit; background:none; border:none;
      text-align:left; cursor:pointer;
      transition:background var(--transition),transform var(--transition);
      margin-bottom:0.25rem;
    }
    .sidebar nav > a.active,
    .sidebar nav > a:hover,
    .sidebar nav .nav-dropdown.open > .nav-link {
      background:var(--primary-light); color:#fff; transform:translateX(4px);
    }
    .nav-dropdown {
      display:flex; flex-direction:column;
    }
    .nav-dropdown .chevron {
      float:right; transition:transform var(--transition);
    }
    .nav-dropdown.open .chevron {
      transform:rotate(180deg);
    }
    .submenu {
      display:none; flex-direction:column;
      padding-left:1rem; margin-bottom:0.25rem;
    }
    .nav-dropdown.open .submenu {
      display:flex;
    }
    .submenu a {
      display:block; padding:0.5rem 0.75rem;
      border-radius:var(--radius); font-size:0.85rem; font-weight:400;
      text-decoration:none; color:inherit;
      transition:background var(--transition);
    }
    .submenu a:hover { background:var(--stripe); }
    .sidebar .bottom-links {
      margin-top:auto; display:flex; flex-direction:column; gap:0.5rem;
    }
    .sidebar .bottom-links button {
      background:none; border:none; font-size:0.875rem;
      font-weight:500; text-align:left; padding:0.5rem 0.75rem;
      border-radius:var(--radius); cursor:pointer;
      transition:background var(--transition); color:inherit;
    }
    .sidebar .bottom-links button:hover {
      background:var(--primary-light); color:#fff;
    }

    

    /*────────────────────────────────────────────────────────────────────
      MAIN CONTENT
    ────────────────────────────────────────────────────────────────────*/
  .main-content {
  position: absolute;
  top: var(--hdr-h);
  left: var(--nav-w);
  right: 0;
  bottom: 0;
  overflow-y: auto;        /* scrolls entire content area, pinning the bar to the viewport’s right edge */
  background: var(--bg-light);
}
html.dark .main-content {
  background: var(--bg-dark);
}

.content-wrapper {
  padding: var(--gap) 1rem;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* no overflow here — let .main-content handle it */
}

    /*────────────────────────────────────────────────────────────────────
      GRID UTILITIES
    ────────────────────────────────────────────────────────────────────*/
    .grid { display:grid; gap:var(--card-gap); }
    .grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
    
    .grid-3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

    /*────────────────────────────────────────────────────────────────────
      CARD BASE
    ────────────────────────────────────────────────────────────────────*/
    .card, .card-fancy {
      position:relative; background:var(--card-light);
      border:1px solid var(--stripe); border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition:transform var(--transition),box-shadow var(--transition);
      padding:1rem; overflow:hidden;
    }
    html.dark .card, html.dark .card-fancy {
      background:var(--card-dark);
    }
    .card:hover, .card-fancy:hover {
      transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15);
    }

    /*────────────────────────────────────────────────────────────────────
      CARD HEADER & ACTIONS
    ────────────────────────────────────────────────────────────────────*/
    .card-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:0.75rem; padding-bottom:0.25rem;
      border-bottom:1px solid var(--stripe);
    }
    .card-header .title {
      display:flex; align-items:center; gap:0.5rem;
      font-weight:600; font-size:0.95rem;
    }
    .card-header .icon { font-size:1.1rem; }
    .card-header .actions {
      display:flex; align-items:center; gap:0.5rem;
    }
    .card-header .actions button {
      background:none; border:none; font-size:1rem;
      cursor:pointer; padding:0.25rem; border-radius:50%;
      transition:background var(--transition);
    }
    .card-header .actions button:hover {
      background:var(--stripe);
    }
    .dropdown { position:relative; }
    .dropdown-menu {
      display:none; position:absolute; top:120%; right:0;
      background:var(--card-light); border:1px solid var(--stripe);
      border-radius:var(--radius); box-shadow:var(--shadow);
      overflow:hidden; z-index:100;
    }
    .dropdown.open .dropdown-menu {
      display:block;
    }
    .dropdown-menu button {
      display:block; width:100%; padding:0.5rem 1rem;
      background:none; border:none; text-align:left;
      font-size:0.875rem; cursor:pointer;
    }
    .dropdown-menu button:hover {
      background:var(--stripe);
    }

    /*────────────────────────────────────────────────────────────────────
      BADGES & ACCENT STRIPES
    ────────────────────────────────────────────────────────────────────*/
    .badge {
      display:inline-block; padding:0.25rem 0.5rem;
      font-size:0.75rem; border-radius:var(--radius);
      font-weight:600;
    }
    .badge.active  { background:#4CAF50; color:#fff; }
    .badge.pending { background:#FFC107; color:#000; }
    .badge.overdue { background:#F44336; color:#fff; }
    .card[data-status="Active"]  { border-left:4px solid #4CAF50; }
    .card[data-status="Pending"] { border-left:4px solid #FFC107; }
    .card[data-status="Overdue"] { border-left:4px solid #F44336; }

    /*────────────────────────────────────────────────────────────────────
      HEADINGS
    ────────────────────────────────────────────────────────────────────*/
    section h2 {
      font-size:1.25rem; margin-bottom:1rem;
      padding-bottom:0.5rem;
      text-transform:uppercase; letter-spacing:0.05em;
    }

    /*────────────────────────────────────────────────────────────────────
      FIXED-HEIGHT CHART CONTAINERS
    ────────────────────────────────────────────────────────────────────
  /*──── AUTO-SIZING DONUTS & RADIALS ────*/
.card-body canvas:not(.sparkline) {
  /* fill the width… */
  width: 100% !important;
  /* …and let height grow naturally (keeps aspect from JS) */
  height: auto !important;
}

/*────────────────────────────────────────────────────────────────────
  CONCENTRIC CHART WRAPPER
────────────────────────────────────────────────────────────────────*/
.concentric-chart-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.concentric-chart-container canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%  !important;
  height: 100% !important;
}


/*────────────────────────────────────────────────────────────────────
  COLLAPSIBLE DETAILS
────────────────────────────────────────────────────────────────────*/
.card.collapsible {
  position: relative;
  padding-bottom: 2rem;            /* room for toggle */
}

.card.collapsible .card-body {
  max-height: 1000px;              /* large enough to show all content */
  overflow: hidden;
  transition: max-height 0.4s ease;/* smooth expand/collapse */
}

.card.collapsible.collapsed .card-body {
  max-height: 0;                   /* hides content */
}

.expand-btn {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card.collapsible.collapsed .expand-btn {
  transform: rotate(-90deg);
}


    /*────────────────────────────────────────────────────────────────────
      TABS
    ────────────────────────────────────────────────────────────────────*/
    .tabs {
      display:flex; border-bottom:1px solid var(--stripe);
      margin-bottom:1rem;
    }
    .tabs button {
      background:none; border:none; padding:0.5rem 1rem;
      cursor:pointer; font-size:0.875rem;
      color:inherit; /* visible in dark mode */
      transition:background var(--transition);
    }
    .tabs button.active {
      border-bottom:2px solid var(--primary);
      font-weight:600;
      color:inherit;
    }
    .tab-content { display:none; }
    .tab-content.active { display:block; }

    /*────────────────────────────────────────────────────────────────────
      SKELETON LOADER
    ────────────────────────────────────────────────────────────────────*/
    .card.loading {
      position:relative; min-height:200px;
    }
    .card.loading .skeleton {
      position:absolute; top:0; left:0;
      width:100%; height:200px;
      background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);
      background-size:200% 100%;
      animation:shimmer 1.5s infinite;
      z-index:10;
    }
    .card.loading .card-header,
    .card.loading .card-body,
    .card.loading .tabs {
      display:none;
    }
    @keyframes shimmer {
      0%   { background-position:-200% 0; }
      100% { background-position:200% 0; }
    }

    /*────────────────────────────────────────────────────────────────────
      TABLE
    ────────────────────────────────────────────────────────────────────*/
    .table-container {
      overflow-x:auto; max-height:280px; overflow-y:auto;
      margin-top:0.75rem;
    }
    .table {
      width:100%; border-collapse:separate; border-spacing:0;
      font-size:0.85rem;
    }
    .table th, .table td {
      padding:0.5rem 0.75rem; text-align:left;
    }
    .table th {
      background:var(--primary); color:#fff;
      position:sticky; top:0;
      text-transform:uppercase; letter-spacing:0.05em;
    }
    .table tr:nth-child(even) td { background:var(--stripe); }
    .table tr:hover td      { background:rgba(230,57,70,0.1); }

    /*────────────────────────────────────────────────────────────────────
      FORM
    ────────────────────────────────────────────────────────────────────*/
    .form-card {
      display:flex; flex-direction:column; gap:1rem; max-width:100%;
    }
    .form-card label {
      font-weight:600; font-size:0.9rem;
    }
    .form-card input,
    .form-card select,
    .form-card textarea {
      padding:0.5rem; border:1px solid #ccc;
      border-radius:var(--radius); font-size:0.9rem;
      transition:border var(--transition);
    }
    .form-card input:focus,
    .form-card select:focus,
    .form-card textarea:focus {
      border-color:var(--primary); outline:none;
    }
    .btn-primary {
      background:var(--primary); color:#fff;
      padding:0.5rem 1rem; border:none; border-radius:var(--radius);
      font-weight:600; font-size:0.9rem; cursor:pointer;
      transition:background var(--transition); width:fit-content;
    }
    .btn-primary:hover { background:var(--primary-light); }



    .cardbutton-primary {
      background:var(--primary); color:#fff;
      padding:1rem 1rem; border:none; border-radius:var(--radius);
      font-weight:600; font-size:0.9rem; cursor:pointer;
      transition:background var(--transition); width:fit-content;
    }
    .btn-primary:hover { background:var(--primary-light); }

    /*────────────────────────────────────────────────────────────────────
      FOOTER
    ────────────────────────────────────────────────────────────────────*/
    footer {
      text-align:center; padding:1rem;
      background:var(--card-light); border-top:1px solid var(--stripe);
      font-size:0.85rem;
    }
    html.dark footer { background:var(--card-dark); }

/*────────────────────────────────────────────────────────────────────
  RESPONSIVE & BREAKPOINTS
────────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Sidebar slides fully off-canvas */
  .sidebar {
    transform: translateX(-100%);
    top: var(--hdr-h);
    height: calc(100% - var(--hdr-h));
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* Show hamburger menu in header */
  .header .menu-btn {
    display: block;
  }

  /* Let the content fill the full width by resetting left */
  .main-content {
    left: 0;            /* override left:var(--nav-w) :contentReference[oaicite:0]{index=0}:contentReference[oaicite:1]{index=1} */
  }

  /* Single-column grids on mobile */
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  /* Desktop: restore normal sidebar position */
  .sidebar {
    transform: none;
    top: 0;
    height: 100%;
    z-index: 3000;
  }
  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (min-width: 1400px) {
  .content-wrapper {
    max-width: 1400px;
  }
}

@media (min-width: 1800px) {
  .content-wrapper {
    max-width: 1800px;
  }
}

/*────────────────────────────────────────────────────────────────────
  Level‐description box:
────────────────────────────────────────────────────────────────────
/* Level‐description box: light background + dark text in light mode,
   dark background + light text in dark mode */
   .level-description {
    background: var(--card-light);
    color: var(--text-light);
    padding: var(--gap);
    border-radius: var(--radius);
    margin-top: 0.5rem;
  }
  
  html.dark .level-description {
    background: var(--card-dark);
    color: var(--text-dark);
  }



/*────────────────────────────────────────────────────────────────────
  SKILL ASSESSMENT STYLES
────────────────────────────────────────────────────────────────────
/* 1) Add more space between elements in each slide */
.skill-slide {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;             /* bigger “gutters” between sections */
  line-height: 1.6;         /* easier to read long text */
}

/* 2) Give the skill title its own separator */
.skill-slide h3 {
  border-bottom: 1px solid var(--stripe);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* 3) Make labels stand out as section headers */
.skill-slide label {
  display: block;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* 4) Highlight the slider area with a subtle tinted background */
.skill-slide input[type="range"] {
  padding: 0.5rem 0;   /* vertical padding around the track */
}

.skill-slide .slider-labels {
  background: var(--bg-alt);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* 5) Accent the level description box */
.level-description {
  background: var(--bg-alt);
  padding: 1rem;
  border-left: 4px solid var(--primary-light);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

/* 6) Give the evidence textarea its own panel look */
.skill-slide textarea {
  background: var(--bg-alt);
  border: 1px solid var(--stripe);
  padding: 0.75rem;
  border-radius: var(--radius);
  resize: vertical;
  margin-top: 0.5rem;
}

/* 7) Subtle hover on navigation buttons to reinforce interactivity */
.navigation-buttons button:hover {
  background: var(--primary);
  opacity: 0.9;
}

/* 1) Gradient slider-labels with high-contrast text */
.skill-slide .slider-labels {
  background: linear-gradient(to right, #4CAF50, #E63946);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 2) Keep level-description visible in both modes */
.level-description {
  background: var(--card-light);
  color: var(--text-light);
}
html.dark .level-description {
  background: var(--card-dark);
  color: var(--text-dark);
}

/* 3) Highlight the “Importance:” label */
.skill-slide p strong {
  color: var(--primary-light);
  font-weight: 600;
}
.skill-slide p strong::before {
  content: "📊";
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}

/*────────────────────────────────────────────────────────────────────
  Myreport Heatmap styles
────────────────────────────────────────────────────────────────────*/
/* Heatmap grid */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
  gap: 1rem;
  justify-items: center;
}
.heatmap-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-light);
}
html.dark .heatmap-donut {
  color: var(--text-dark);
}

/* SVG donut */
.donut {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg); /* start filling from top */
}
.donut-ring,
.donut-segment {
  fill: none;
  stroke-width: 6;
}
.donut-ring {
  stroke: var(--stripe);
}
.donut-segment {
  stroke: var(--primary);
  transition: stroke-dasharray 0.6s ease;
}
.donut-text {
  font-size: 0.6rem;
  text-anchor: middle;
  dominant-baseline: central;
  transform: rotate(90deg); /* counter the outer rotation */
  fill: var(--text-light);
}
html.dark .donut-text {
  fill: var(--text-dark);
}

/*────────────────────────────────────────────────────────────────────
  PROFILE “BUSINESS CARD” LAYOUT
────────────────────────────────────────────────────────────────────
.profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-info {
  flex: 1;
  color: var(--text-secondary);
}

.profile-info p {
  margin: 0.25rem 0;
  line-height: 1.3;
}

.profile-info strong {
  color: var(--primary);
}

.profile-avatar img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primary);
}

.dark .profile-info {
  color: var(--text-secondary-dark);
}

.credential-badges {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.tick {
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  line-height: 1;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
}

/* blue fill for managers */
.tick-manager {
  background-color: #007bff;  /* or your --primary variable */
  color: #fff;
  border-color: #007bff;
}

/* white fill + black border for admins */
.tick-admin {
  background-color: #fff;
  color: #000;
  border-color: #000;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;

}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  flex-shrink: 0;
}