/*
   Universal Monster Catcher Dark Mode Theme
   Scoped under .umcgame-container
*/

.umcgame-container {
    font-family: 'Orbitron', sans-serif;
    background-color: #0d0d0d;
    color: #00ffff;
    height: 100vh;
  }
  
  .umcgame-container h5,
  .umcgame-container h3,
  .umcgame-container label {
    color: #00ffff;
  }
  
  .umcgame-container .small {
    color: #00ffff;
  }
  
  /* By default, let the layout be stacked; we'll do a flex approach on larger screens */
  .container-fluid,
  .row {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  .umcgame-container .sidebar {
    background-color: #1a1a1a;
    padding: 10px;
    /* removed fixed height approach. We'll control via flex below. */
  }
  
  .umcgame-container .main-content {
    background-color: #0d0d0d;
    padding: 20px;
  }
  
  /* We'll add IDs around each progress container so we can style the "empty portion" separately. */
  .progress.umcgame-progress {
    height: 20px;
    margin-bottom: 10px;
  }
  #health-progress-container.progress.umcgame-progress,
  #experience-progress-container.progress.umcgame-progress,
  #tokens-progress-container.progress.umcgame-progress,
  #mobile-health-progress-container.progress.umcgame-progress,
  #mobile-experience-progress-container.progress.umcgame-progress,
  #mobile-tokens-progress-container.progress.umcgame-progress {
    background-color: #1a1a1a; /* default empty color */
  }
  
  .umcgame-container .progress-bar {
    /* fill color is set by JS injection */
  }
  
  /* Default fill colors if no JS injection: */
  #health-bar,
  #mobile-health-bar {
    background-color: #ff0066;
  }
  #experience-bar,
  #mobile-experience-bar {
    background-color: #66ff66;
  }
  #tokens-bar,
  #mobile-tokens-bar {
    background-color: #0099ff;
  }
  
  /* Buttons */
  .umcgame-container .btn-umcgame {
    background-color: #00ffff;
    color: #0d0d0d;
    border: 1px solid #00ffff;
    margin-bottom: 10px;
  }
  
  .umcgame-container .btn-umcgame:hover {
    background-color: #00cccc;
    color: #0d0d0d;
  }

  .btn-secondary, .btn-warning {
    font-size: 0.7rem;
    font-weight: 400;
  }
  
  /* For the new nav-button class, default is overridden by JS if user picks custom. */
  .nav-button {
    margin-bottom: 10px;
  }
  
  /* Captured monsters & inventory */
  .umcgame-container #captured-monsters ul,
  .umcgame-container #inventory ul,
  .umcgame-container #mobile-captured-monsters ul,
  .umcgame-container #mobile-inventory ul {
    background-color: #1a1a1a;
  }
  
  .umcgame-container #captured-monsters .list-group-item,
  .umcgame-container #inventory .list-group-item,
  .umcgame-container #mobile-captured-monsters .list-group-item,
  .umcgame-container #mobile-inventory .list-group-item {
    background-color: #262626;
    color: #00ffff;
    border: 1px solid #00ffff;
  }
  
  .umcgame-container #captured-monsters .list-group-item.active,
  .umcgame-container #inventory .list-group-item:hover,
  .umcgame-container #mobile-captured-monsters .list-group-item.active,
  .umcgame-container #mobile-inventory .list-group-item:hover {
    background-color: #00ffff;
    color: #0d0d0d;
  }
  
  .umcgame-container #event-buttons .event-button {
    background-color: #262626;
    color: #00ffff;
    border: 1px solid #00ffff;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.75rem 1rem;
    margin: 5px;
    flex: 1 1 auto;
  }
  
  .umcgame-container #event-buttons .event-button:hover {
    background-color: #00ffff;
    color: #0d0d0d;
  }
  
  /* Action buttons */
  .umcgame-container #action-buttons .btn {
    background-color: #262626;
    color: #00ffff;
    border: 1px solid #00ffff;
    margin: 5px;
    flex: 1 1 auto;
  }
  
  .umcgame-container #action-buttons .btn:hover {
    background-color: #00ffff;
    color: #0d0d0d;
  }

  /* Breadcrumb */
  .umcgame-container .breadcrumb {
    background-color: transparent;
    padding: 0;
  }
  
  .umcgame-container .breadcrumb .breadcrumb-item {
    font-size: .9rem;
    color: #00ffff;
  }
  
  .umcgame-container #area-title {
    color: #00ffff;
  }
  
  /* Area image */
  .umcgame-container #area-image-container {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .umcgame-container #area-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border: 2px solid #00ffff;
  }
  
  /* Event Log */
  .umcgame-container #event-log {
    background-color: #000000;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    padding: 10px;
  }
  
  .umcgame-container #event-log h5 {
    color: #00ff00;
  }
  
  .umcgame-container #log-list .list-group-item {
    background-color: #000000;
    color: #00ff00;
    border: none;
    padding: 2px 5px;
  }
  
  /* Save/Load buttons */
  .umcgame-container #save-load-buttons .btn {
    background-color: #262626;
    color: #00ffff;
    border: 1px solid #00ffff;
    margin-right: 10px;
  }
  
  .umcgame-container #save-load-buttons .btn:hover {
    background-color: #00ffff;
    color: #0d0d0d;
  }
  
  /* Navigation buttons (desktop/tablet) */
  .umcgame-container #navigation-buttons {
    margin-top: 20px;
  }
  
  .umcgame-container #navigation-buttons button {
    width: 100%;
    margin-bottom: 10px;
    background-color: #262626;
    color: #00ffff;
    border: 1px solid #00ffff;
  }
  
  .umcgame-container #navigation-buttons .my-2 {
    display: flex;
    justify-content: space-between;
  }
  
  .umcgame-container #navigation-buttons .my-2 button {
    width: 48%;
  }
  
  /* Scrollbars */
  .umcgame-container ::-webkit-scrollbar {
    width: 8px;
  }
  .umcgame-container ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  .umcgame-container ::-webkit-scrollbar-thumb {
    background: #00ffff;
  }
  .umcgame-container ::-webkit-scrollbar-thumb:hover {
    background: #00cccc;
  }
  
  /* No buggy highlighted text */
  .umcgame-container button,
  .umcgame-container .btn,
  .umcgame-container .nav-button,
  .umcgame-container .event-button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  /* Mobile Styles */

  #mobile-health-text,
  #mobile-level-text,
  #mobile-experience-text,
  #mobile-tokens-text {
    font-size: .7rem;
  }

  @media (max-width: 767.98px) {
    .umcgame-container .event-button,
    .umcgame-container .btn,
    .umcgame-container .btn-secondary {
        white-space: normal !important;    /* Allow text to wrap */
        word-wrap: break-word;             /* Break long words if needed */
        overflow-wrap: anywhere;           /* Alternative property for modern browsers */
        display: block;                    /* Ensure full-width block buttons, if desired */
        width: 100%;                       /* Force them to span 100% width */
    }
    
    .umcgame-container .sidebar {
        display: none;
    }
  
    .umcgame-container .main-content {
        padding: 10px;
        padding-top: 160px;
        padding-bottom: 100px;
    }
  
    .umcgame-container #area-title {
        font-size: 1.3rem;
    }
  
    .umcgame-container .event-button,
    .umcgame-container #action-buttons .btn {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
  
    .umcgame-container #event-log h5 {
        font-size: 0.9rem;
    }
  
    .umcgame-container #event-log ul, {
        font-size: 0.8rem;
    }
  
    .umcgame-container .mobile-stats .col {
        padding: 5px;
        text-align: center;
    }
  
    .umcgame-container .mobile-stats small {
        font-size: 0.5rem;
    }
  
    .umcgame-container .mobile-stats .progress {
        height: 10px;
        margin-bottom: 5px;
    }
  
    /* Fixed Mobile Header */
    .umcgame-container #mobile-header {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #0d0d0d;
        z-index: 1000;
        border-bottom: 1px solid #00ffff;
        padding: 10px;
    }
  
    .umcgame-container .mobile-stats,
    .umcgame-container .mobile-navigation {
        margin: 0;
    }
  
    .umcgame-container .mobile-navigation .d-flex {
        gap: 5px;
    }
  
    .umcgame-container .mobile-navigation .d-flex .btn {
        flex: 1;
    }
  
    .umcgame-container .row.d-flex.d-md-none.mt-3 {
        display: flex !important;
        flex-wrap: nowrap;
    }
  
    .umcgame-container .row.d-flex.d-md-none.mt-3 .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
  
    .umcgame-container #mobile-captured-monsters h5,
    .umcgame-container #mobile-inventory h5 {
        font-size: 0.8rem;
        margin-bottom: 5px;
    }
  
    .umcgame-container #mobile-captured-monsters .list-group-item,
    .umcgame-container #mobile-inventory .list-group-item {
        font-size: 0.7rem;
    }
  
    /* Fix for sticky header overlapping content */
    .umcgame-container #mobile-header {
        margin-bottom: 10px;
    }
  }
  
  /* Desktop & Tablet: Make the entire layout fill height, side by side */
  @media (min-width: 768px) {
    .umcgame-container .container-fluid,
    .umcgame-container .row {
      height: 100vh;
      display: flex;
      flex-wrap: nowrap;
    }
    .umcgame-container .col-12.col-md-2.sidebar {
      flex: 0 0 auto; /* fixed width or auto width for the sidebar */
      overflow-y: auto;
    }
    .umcgame-container .col-12.col-md-10.main-content {
      flex: 1 1 auto;
      overflow-y: auto;
    }
    #event-buttons,
    #action-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }