/* style.css */

:root {
    --purdue-gold: #CFB991; /* Boilermaker Gold */
    --purdue-black: #000000;
    --purdue-steel: #555960; /* Supporting Gray */
    --purdue-railway: #9D9795; /* Supporting Gray */
  }
  
  /* Navbar Styling */
  .navbar {
      background-color: var(--purdue-black) !important;
  }
  
  .navbar-brand.purdue-gold {
      color: var(--purdue-gold) !important;
      font-weight: bold;
  }
  
  .navbar .nav-link {
      color: rgba(255, 255, 255, 0.75); /* Lighter text on black */
  }
  
  .navbar .nav-link:hover,
  .navbar .nav-link.active {
      color: var(--purdue-gold);
  }
  
  /* Button Styling */
  .btn-primary {
      background-color: var(--purdue-gold);
      border-color: var(--purdue-gold);
      color: var(--purdue-black); /* Black text on gold buttons */
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
      background-color: #b8a278; /* Darker gold on hover */
      border-color: #b8a278;
      color: var(--purdue-black);
  }
  
  /* General Body */
  body {
      background-color: #f8f9fa; /* Light background */
  }
  
  /* Footer Styling */
  .footer {
      background-color: var(--purdue-railway) !important; /* Using a supporting gray */
      color: var(--purdue-black);
  }
  .footer .text-muted {
      color: var(--purdue-black) !important;
  }
  
  /* Login Form Specific */
  .login-container {
      max-width: 400px;
      margin: 50px auto;
      padding: 30px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .login-container h2 {
      color: var(--purdue-steel); /* Use a supporting gray for headings */
      margin-bottom: 20px;
      text-align: center;
  }

  
  /* --- Engagement Timeline Styles --- */
  .timeline-container {
      display: flex;
      flex-wrap: wrap; /* Allow wrapping on smaller screens */
      gap: 10px 0; /* Vertical gap between items, no horizontal gap initially */
      position: relative;
      overflow-x: auto; /* Allow horizontal scrolling if needed on small screens */
      padding-bottom: 10px; /* Space for potential scrollbar */
  }
  
  .timeline-item {
      display: flex;
      flex-direction: column; /* Stack marker and text vertically */
      align-items: center; /* Center items horizontally */
      text-align: center;
      position: relative; /* Needed for stretched-link */
      flex: 1; /* Try to make items equal width */
      min-width: 120px; /* Minimum width before wrapping */
      padding: 0 5px; /* Small horizontal padding */
  }
  
  .timeline-marker-container {
      position: relative; /* For connector positioning */
      display: flex;
      align-items: center;
      width: 100%; /* Take full width for connector */
      margin-bottom: 8px; /* Space between marker and text */
  }
  
  .timeline-marker {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid;
      margin: 0 auto; /* Center the marker horizontally */
      z-index: 1; /* Marker above connector */
      background-color: #fff; /* Background to cover connector */
      font-size: 1.1rem;
  }
  
  .timeline-connector {
      position: absolute;
      top: 50%;
      left: calc(50% + 20px); /* Start after the marker */
      width: calc(100% - 40px); /* Span to the next item's marker start */
      height: 2px;
      background-color: var(--purdue-railway); /* Default connector color */
      transform: translateY(-50%);
      z-index: 0; /* Behind marker */
  }
  
  /* Hide connector on the last item */
  .timeline-item:last-child .timeline-connector {
      display: none;
  }
  
  .timeline-content {
      font-size: 0.85rem;
  }
  
  .timeline-link {
      text-decoration: none;
      color: var(--purdue-steel);
      font-weight: 500;
  }
  .timeline-link:hover {
      text-decoration: underline;
      color: var(--purdue-black);
  }
  
  /* --- Timeline Item States --- */
  :root {
      /* Add a green color for completion status */
      --status-complete-green: #28a745; /* Standard Bootstrap success green */
      --status-incomplete-gray: var(--purdue-railway); /* Use existing gray */
  }
  
  /* Incomplete State */
  .timeline-item.incomplete .timeline-marker {
      border-color: var(--status-incomplete-gray);
      color: var(--status-incomplete-gray);
  }
  .timeline-item.incomplete .timeline-link {
      color: var(--status-incomplete-gray);
  }
  .timeline-item.incomplete .timeline-link:hover {
      color: var(--purdue-steel);
  }
  /* Connector remains default gray */
  
  /* Complete State */
  .timeline-item.complete .timeline-marker {
      border-color: var(--status-complete-green);
      background-color: var(--status-complete-green);
      color: #fff; /* White icon on green background */
  }
  .timeline-item.complete .timeline-link {
      color: var(--purdue-black); /* Make completed links more prominent */
      font-weight: 600;
  }
  .timeline-item.complete .timeline-link:hover {
      color: var(--status-complete-green);
  }
  /* Make connector green if the *current* step is complete */
  .timeline-item.complete .timeline-connector {
       background-color: var(--status-complete-green);
  }
  
  
  /* Responsive Adjustments for Timeline */
  @media (max-width: 991.98px) {
      .timeline-container {
          flex-wrap: wrap; /* Ensure wrapping */
          justify-content: flex-start; /* Align items to the start */
      }
      .timeline-item {
          min-width: 100px; /* Allow slightly smaller items */
          flex-basis: calc(33.33% - 10px); /* Roughly 3 items per row */
          margin-bottom: 20px; /* Add space between rows */
      }
       /* Adjust connector for wrapped layout - might need more complex logic or hide on wrap */
       .timeline-connector {
           /* Simple approach: Hide connectors on smaller screens if layout breaks */
           /* display: none; */
           /* Or adjust width/positioning if keeping them */
           width: calc(100% - 30px); /* Adjust width based on smaller markers maybe */
           left: calc(50% + 15px);
       }
       .timeline-item:nth-child(3n) .timeline-connector {
          /* Hide connector on the last item of a potential row of 3 */
          /* display: none; */ /* This might be too simplistic */
       }
       .timeline-item:last-child {
           margin-bottom: 0; /* Remove bottom margin on the very last item */
       }
  }
  
  @media (max-width: 767.98px) {
      .timeline-item {
          flex-basis: calc(50% - 10px); /* Roughly 2 items per row */
      }
       .timeline-item:nth-child(even) .timeline-connector {
          /* Hide connector on the last item of a potential row of 2 */
         /* display: none; */
       }
  }
  
  @media (max-width: 575.98px) {
      .timeline-item {
          flex-basis: 100%; /* 1 item per row */
          margin-bottom: 15px;
      }
      .timeline-connector {
          display: none; /* Hide connectors entirely when stacked vertically */
      }
       .timeline-marker-container {
           width: auto; /* Don't force full width */
           margin-bottom: 5px;
       }
  }
  
  /* Login Form Specific (Keep existing) */
  .login-container {
      /* ... */
  }
  .login-container h2 {
     /* ... */
  }
  

  /* ----- PROCESS MAPPING STYLES ----- */
          /* Add some basic styling for the process mapping page */
          #drawflow {
            width: 100%;
            height: 600px; /* Adjust as needed */
            border: 1px solid #ccc;
            background-color: #fdfdfd;
            background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
            background-size: 20px 20px;
            position: relative; /* Needed for Drawflow */
        }
        .node-palette {
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #f8f9fa;
            height: 600px; /* Match drawflow height */
            overflow-y: auto;
        }
        .palette-item {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: 4px;
            cursor: grab;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }
        .palette-item:active {
            cursor: grabbing;
        }
        .palette-item i {
            color: var(--purdue-steel);
        }
        /* Style for Drawflow nodes */
        .drawflow-node {
            background: #fff !important; /* Override default */
            border: 1px solid var(--purdue-steel) !important;
            color: var(--purdue-black) !important;
            min-width: 120px; /* Adjust */
            max-width: 200px;
            padding: 10px !important;
            border-radius: 5px !important;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        }
        .drawflow-node.selected {
             border-color: var(--purdue-gold) !important;
             box-shadow: 0 0 0 2px var(--purdue-gold) !important;
        }
        .drawflow-node .input, .drawflow-node .output {
            background: #fff !important;
            border: 1px solid var(--purdue-steel) !important;
            width: 14px !important;
            height: 14px !important;
        }
        .drawflow-node .input { left: -21px !important; }
        .drawflow-node .output { right: -8px !important; }
        .drawflow-node .drawflow_content_node {
            width: 100%;
            text-align: center;
        }
        .drawflow-node .node-title {
            font-weight: bold;
            margin-top: 5px;
            font-size: 0.9em;
            word-wrap: break-word;
        }
        .drawflow-delete { /* Style delete button */
            background: #dc3545 !important;
            border: 1px solid #fff !important;
        }
        .map-list-item {
            cursor: pointer;
        }
        .map-list-item.active {
            font-weight: bold;
            background-color: #e9ecef;
        }
        #map-details {
            margin-bottom: 1rem;
        }
        #map-details input, #map-details textarea {
            margin-bottom: 0.5rem;
        }
  /* style.css or header.php <style> */
  
  .drawflow-context-button {
      /* Adjust size, padding, line-height if needed */
      padding: 0.1rem 0.4rem;
      font-size: 0.8rem;
      line-height: 1.2;
      min-width: 30px; /* Ensure minimum width */
  }
  
  /* Optional: Add slight separation */
  .drawflow-context-button + .drawflow-context-button {
      margin-left: 3px;
  }