:root {
/* Custom Theme Colors */
--custom-primary: #007456;
--glow-primary: rgba(0, 116, 86, 0.4);
--background-body: #080a0c;
--text-primary: #eef2f5;
--text-secondary: #a8b2bc;
--text-muted: #7e8892;

/* Glassmorphism */
--glass-blur: 20px;
--glass-saturation: 160%;
--glass-bg-color: rgba(30, 40, 50, 0.45);
--glass-border-color: rgba(255, 255, 255, 0.15);
--glass-highlight: radial-gradient(circle at 0% 50%, rgb(255 255 255 / 14%), rgba(255, 255, 255, 0) 100%);

/* Shadows */
--shadow-color: rgba(0, 0, 0, 0.25);
--shadow-large: 0 12px 32px 0 var(--shadow-color);
--shadow-hover: 0 18px 45px 0 rgba(0, 0, 0, 0.35);

/* Blobs */
--blob-color-1: hsla(163, 80%, 50%, 0.3);
--blob-color-2: hsla(210, 80%, 60%, 0.3);
--blob-color-3: hsla(340, 80%, 65%, 0.3);
--blob-color-4: hsla(40, 80%, 55%, 0.3);

/* Bootstrap Primary Overrides */
--bs-progress-bar-bg: #007456;

--bs-primary: #007456;
--bs-primary-rgb: 0, 116, 86;

--bs-primary-text-emphasis: #005c45;
--bs-primary-bg-subtle: #cdeee5;
--bs-primary-border-subtle: #91ddcb;

--bs-link-color: #007456;
--bs-link-hover-color: #005c45;

--bs-alert-color: #003c2f;
--bs-alert-bg: #cdeee5;
--bs-alert-border-color: #91ddcb;

/* Button Styles */
--bs-btn-color: #fff;
--bs-btn-bg: #007456;
--bs-btn-border-color: #007456;

--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #00604a;
--bs-btn-hover-border-color: #00563f;

--bs-btn-focus-shadow-rgb: 0, 116, 86;

--bs-btn-active-color: #fff;
--bs-btn-active-bg: #00563f;
--bs-btn-active-border-color: #004e38;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #007456;
--bs-btn-disabled-border-color: #007456;

/* Form Feedback */
--bs-form-valid-color: #007456;
--bs-form-valid-border-color: #007456;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545;
}

/* Extra enforcement for Bootstrap .btn-primary and active states */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
background-color: #007456 !important;
border-color: #007456 !important;
color: #fff !important;
}

.btn-primary:hover {
background-color: #00604a !important;
border-color: #00563f !important;
color: #fff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
background-color: #007456 !important;
border-color: #007456 !important;
color: #fff !important;
}

@keyframes moveGlows { 
0% { background-position: 0% 50%, 50% 100%, 100% 0%, 0% 0%; } 
50% { background-position: 100% 50%, 0% 0%, 0% 100%, 50% 0%; } 
100% { background-position: 0% 50%, 50% 100%, 100% 0%, 0% 0%; } 
}
body { 
background-attachment: fixed;
background-color: var(--background-body); 
background-image: radial-gradient(at 20% 10%, var(--blob-color-1) 0px, transparent 50%), radial-gradient(at 80% 20%, var(--blob-color-2) 0px, transparent 50%), radial-gradient(at 10% 90%, var(--blob-color-3) 0px, transparent 50%), radial-gradient(at 75% 95%, var(--blob-color-4) 0px, transparent 50%); 
background-attachment: cover; 
animation: moveGlows 45s ease-in-out infinite; 
color: var(--text-primary); 
font-family: Poppins, sans-serif;
}
.navbar { 
background: var(--glass-bg-color); 
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); 
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); 
border-bottom: 1px solid var(--glass-border-color) !important; 
padding: 5px;
height: 60px;
}
.navbar-brand {
padding: 0;
margin: 0;
}
@media(max-width: 1000px) {
.navbar-brand img{
display: none !important;
}
}
.progress-bar {
background-color: #007456;
}
.card { 
background: var(--glass-highlight), var(--glass-bg-color); 
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); 
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); 
border: 1px solid var(--glass-border-color); 
box-shadow: var(--shadow-large), inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); 
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; 
position: relative; 
overflow: hidden; 
}
.card::after { 
content: ''; 
position: absolute; 
top: 0; 
left: -150%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); 
transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
pointer-events: none; 
}
.card:hover { 
transform: translateY(-5px) scale(1.03); 
box-shadow: var(--shadow-hover); 
border-color: rgba(255, 255, 255, 0.25); 
}
.card:hover::after { 
left: 150%; 
}
.card-title { 
color: var(--text-primary); 
font-weight: 600; 
}
.card-text { 
color: var(--text-secondary); 
}
.thumbnail-wrapper { 
min-width: 50px; 
max-width: 50%; 
height: 50px; 
display: flex; 
align-items: center; 
justify-content: flex-start; 
flex-shrink: 0; 
}
.thumbnail-img { 
max-width: 100%; 
max-height: 100%; 
object-fit: contain; 
border-radius: 3px; 
filter: invert(1); 
background: #ffffff1c; 
padding: 5px; 
}
.form-control, .form-select, .form-check-input, .input-group-text { 
background-color: rgba(20, 30, 40, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--glass-border-color);
color: var(--text-secondary);
border-radius: 7px;
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-group-text { 
border-right: none; 
} 
.form-control:not(.form-check-input) { 
border-left: none; 
}
.form-control:focus, .form-select:focus, .form-check-input:focus { 
background-color: rgba(30, 40, 50, 0.6);
border-color: var(--custom-primary);
box-shadow: 0 0 0 0.25rem rgba(0, 116, 86, 0.35);
color: var(--text-primary);
outline: 0;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--custom-primary);
--bs-btn-border-color: var(--custom-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #00926d;
--bs-btn-hover-border-color: #00926d;
--bs-btn-focus-shadow-rgb: 0, 116, 86;
}
.btn-secondary {
--bs-btn-color: var(--text-primary);
--bs-btn-bg: rgba(255, 255, 255, 0.1);
--bs-btn-border-color: rgba(255, 255, 255, 0.2);
--bs-btn-hover-bg: rgba(255, 255, 255, 0.2);
--bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
}
.btn-delete {
--bs-btn-color: #ffb3b3;
--bs-btn-bg: rgba(255, 80, 80, 0.15);
--bs-btn-border-color: rgba(255, 80, 80, 0.3);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgba(255, 80, 80, 0.3);
--bs-btn-hover-border-color: rgba(255, 80, 80, 0.5);
padding: 3px;
height: 21px;
width: 21px;
font-size: 11px;
}
.btn {
font-weight: 600;
transition: transform 0.2s ease-out, background-color 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
}


/* --- Main Accordion Styles --- */

/* --- Main Accordion Container --- */
.accordion-item {
  background: var(--glass-highlight), var(--glass-bg-color);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--glass-border-color);
  margin-bottom: 1rem;

  /* --- RADIUS FIX --- */
  /* These two properties create the shape and force the button and
     body inside to follow that shape, ensuring a perfect 1rem radius. */
  border-radius: 7px !important;
  overflow: hidden;
}

/* --- Accordion Button --- */
.accordion-button {
  background: rgba(20, 30, 40, 0.3);
  color: var(--text-primary);
  font-weight: 600;
  font-family: Poppins, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  /* Radius is now handled by the parent .accordion-item */
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:hover {
  background-color: rgba(0, 116, 86, 0.2);
}

.accordion-button:not(.collapsed) {
  background-color: var(--custom-primary);
  color: #fff;
  /* Note: This shadow may be clipped by the parent's `overflow: hidden`.
     This is the trade-off for a guaranteed perfect border-radius. */
  box-shadow: 0 0 12px var(--glow-primary);
}

/* --- Accordion Body --- */
.accordion-body {
  color: var(--text-secondary);
  padding: 1rem 1.25rem;
  background: transparent; /* Keep the glass effect */
}

/* --- ARROW FIX --- */
/* This targets the arrow in BOTH its collapsed and expanded states
   to ensure it is always white, overriding Bootstrap's blue active icon. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.badge {
text-transform: capitalize;
font-family: monospace;
}
.ver-type{
max-width: 100px;
overflow: hidden;
}
.modal-content { 
background: var(--glass-highlight), rgba(15, 20, 25, 0.6); 
backdrop-filter: blur(25px) saturate(180%); 
-webkit-backdrop-filter: blur(25px) saturate(180%); 
border-radius: 7px; 
border: 1px solid var(--glass-border-color); 
}
.auth-modal .nav-tabs { border-bottom: none; gap: 0.5rem; }
.auth-modal .nav-tabs .nav-link { background: rgba(20, 30, 40, 0.5); border: 1px solid var(--glass-border-color); color: var(--text-secondary); border-radius: 7px; }
.auth-modal .nav-tabs .nav-link.active { background-color: var(--custom-primary); border-color: var(--custom-primary); color: #fff; }

.deployed-app-card {
background: var(--glass-bg-color);
border: 1px solid var(--glass-border-color);
border-radius: 7px;
transition: background-color 0.3s ease, opacity 0.4s ease, box-shadow 0.3s ease;
box-shadow: var(--shadow-large);
}
.deployed-app-card:hover {
box-shadow: var(--shadow-hover);
}
.form-check-input:checked {
background-color: var(--custom-primary);
border-color: var(--custom-primary);
}
.form-check-label { color: var(--text-secondary); }
.form-switch .form-check-input {
width: 2.5em;
height: 1.25em;
margin-right: 10px;
}
.addon-spinner {
display: none;
width: 1.25rem;
height: 1.25rem;
color: var(--custom-primary);
}

.category-card {
background: var(--glass-bg-color);
border: 1px solid var(--glass-border-color);
border-radius: 7px;
box-shadow: var(--shadow-large);
}
#category-sidebar {
position: sticky;
top: 85px;
height: auto;
overflow-y: auto;
padding: 1.5rem;
}
.category-link {
color: var(--text-secondary);
background-color: rgba(20, 30, 40, 0.5);
border: 1px solid var(--glass-border-color);
border-radius: 7px;
padding: 0.4rem 0.9rem;
text-decoration: none;
font-weight: 500;
font-size: 13px;
transition: all 0.3s ease;
margin: 5px;
}

.host-link {
display: block;
width: 100%;
padding: 2px 10px;
background-color: rgba(0, 0, 0, 0.21);
border-radius: 7px;
color: #afb1b6;
text-decoration: none;
font-family: monospace;
font-weight: 500;
overflow: auto;
font-size: 13px;
}

.category-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
.category-link.active {
background-color: var(--custom-primary);
color: white;
box-shadow: 0 0 15px var(--glow-primary);
border-color: rgba(0, 116, 86, 0.8);
}