/* Base Gruvbox Dark variables */
:root {
--bg-color: #282828;
--primary-color: #fabd2f;
--secondary-color: #83a598;
--text-color: #ebdbb2;
--card-bg: #3c3836;
--hover-bg: #504945;
--border-color: #3c3836;
--shadow: rgba(0, 0, 0, 0.3);
/* Vis.js colors */
--status-draft: #928374;
--status-in_progress: #83a598;
--status-ready: #b8bb26;
--status-released: #b8bb26;
--status-cancelled: #fb4934;
--deploy-planned: #928374;
--deploy-running: #83a598;
--deploy-successful: #b8bb26;
--deploy-failed: #fb4934;
--deploy-cancelled: #d65d0e;
--text-light: #ebdbb2;
--text-dark: #3c3836;
}

/* Gruvbox Light overrides */
.light-mode {
--bg-color: #f2e5bc;
--primary-color: #d79921;
--secondary-color: #458588;
--text-color: #3c3836;
--card-bg: #ebdbb2;
--hover-bg: #d5c4a1;
--border-color: #d5c4a1;
--shadow: rgba(0, 0, 0, 0.2);
/* Vis.js colors */
--status-draft: #7c6f64;
--status-in_progress: #076678;
--status-ready: #98971a;
--status-released: #79740e;
--status-cancelled: #9d0006;
--deploy-planned: #7c6f64;
--deploy-running: #076678;
--deploy-successful: #98971a;
--deploy-failed: #9d0006;
--deploy-cancelled: #d65d0e;
--text-light: #ebdbb2;
--text-dark: #3c3836;
}

body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
}

a, a:visited {
  color: var(--secondary-color);
  text-decoration: none;
}
a:hover { color: var(--primary-color); }

/* Top Panel */
header {
position: relative;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--card-bg);
padding: 10px 20px;
box-shadow: 0 2px 5px var(--shadow);
}
.top-left, .top-right {
display: flex;
align-items: center;
}
.company-logo {
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
background-color: var(--primary-color);
}
.tool-name {
font-size: 1.5em;
margin-right: 10px;
}
.build-info {
font-size: 0.8em;
color: var(--secondary-color);
padding: 0 10px;
}
.notification, .user-widget, .theme-toggle, .refresh-cache {
margin-left: 20px;
cursor: pointer;
position: relative;
padding: 5px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.notification:hover, .user-widget:hover, .theme-toggle:hover, .refresh-cache:hover {
background-color: var(--hover-bg);
}
.theme-toggle {
/* Mouseover hint */
cursor: pointer;
}

/* Dummy dropdown menus */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
padding: 10px;
box-shadow: 0 2px 5px var(--shadow);
border-radius: 4px;
min-width: 150px;
z-index: 20;
}
.dropdown-menu.active {
display: block;
}

/* Sidebar */
.sidebar {
position: relative;
z-index: 5;
width: 200px;
background-color: var(--card-bg);
height: calc(100vh - 80px);
float: left;
padding-top: 20px;
/* Removing shadow to avoid “floating” effect */
/* box-shadow: 2px 0 5px var(--shadow); */
border-right: 1px solid var(--border-color);
}
.sidebar button {
width: 100%;
background: none;
border: none;
color: var(--text-color);
padding: 15px 20px;
text-align: left;
font-size: 1em;
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 5px;
}
.sidebar button:hover {
background-color: var(--hover-bg);
}
.sidebar button.active {
background-color: var(--primary-color);
color: var(--bg-color);
font-weight: bold;
box-shadow: 0 2px 5px var(--shadow);
}
/* When active, hover makes it a slightly brighter shade */
.sidebar button.active:hover {
filter: brightness(1.1);
}
.sidebar button i {
margin-right: 10px;
}

#projectList .dropdown-item {
padding: 4px;
}
/* highlight selected project */
#projectList .dropdown-item.active {
background-color: var(--hover-bg);
}
#projectList .dropdown-item.active > span { font-weight: bold; }

/* product-tag pills */
.product-tags .tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
font-size: 0.75em;
border-radius: 12px;
color: var(--bg-color);
}
.product-tags .tag img {
width: 12px; height: 12px;
}

.tag {
  border-radius:4px;padding:2px 6px; margin-right:4px;
}

.pill {
  display:inline-block;
  padding:2px 6px;
  margin:1px;
  border-radius:12px;
  background:var(--hover-bg);
  cursor:pointer;
  font-size:0.75em;
}
.release-pill{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:1em;
  background:var(--card-bg);
  border:2px solid var(--border-color);
}
.release-pill .deploy-container{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;}
.release-pill .deploy-entry{
  margin-top:1px;
  padding:0 3px;
  font-size:0.65em;
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:12px;
}
.pill.inherit{background:var(--border-color);}
.pill.toggle{background:transparent;text-decoration:underline;}

.deploy-tag {
  display:inline-block;
  border-radius:12px;
  padding:2px 6px;
  margin:1px;
  font-size:0.75em;
  cursor:pointer;
}
.deploy-tag .del {
  margin-left:4px;
  cursor:pointer;
}

.ticket-btn{
  position:relative;
  border:none;
  border-radius:4px;
  padding:2px 6px 6px;
  cursor:pointer;
}
.ticket-btn.empty{opacity:.5;}
.ticket-btn .ticket-bar{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:3px;
  display:flex;
}
.ticket-btn .ticket-bar span{flex-grow:1;}
.ticket-btn .ticket-bar .ready{background:#0c0;}
.ticket-btn .ticket-bar .pending{background:#c33;}
.ticket-labels{display:inline-flex;flex-wrap:wrap;gap:2px;margin-left:4px;}
.ticket-labels .pill{font-size:0.65em;display:inline-flex;align-items:center;}
.ticket-labels .del{margin-left:4px;cursor:pointer;}
.ticket-warning{margin-right:4px;color:#FFCC00;}
.comp-view tr.faded{opacity:.5;}
.add-ticket-link{margin-left:4px;}

/* Ticket button inside build list */
.release-pill .ticket-btn{
  font-size:0.65em;
  margin-top:1px;
}

/* Builds view layout */
#buildsContent {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
#buildsContent section {
  flex:1 1 360px;
}

#buildFilters,
#releaseFilters {
  margin-bottom:10px;
}

/* Commit tag */
.commit-tag {
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-family: monospace;
  background: var(--hover-bg);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.75em;
  text-decoration:none;
}

.empty-cell:hover {
  background: var(--hover-bg);
}

.deploy-entry {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:1px;
  border-radius:2px;
  cursor:pointer;
  min-width:20px;
  min-height:12px;
}

.component-tag {
border-radius:4px;padding:2px 6px; margin:0px 2px;
}

.status-tag {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
color: var(--text-color);
/* Drop the h2 decorations: */
font-weight: normal;
font-size: 0.5em;

}

/* Main Content Area */
.main {
margin-left: 200px;
padding: 20px;
}
.view {
display: none;
}
.view.active {
display: block;
}
/* Pulsating placeholder */
.placeholder {
background-color: #ccc;
color: transparent;
border-radius: 4px;
animation: pulse 1.5s infinite;
margin-bottom: 10px;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}


#release-network { height: 250px; overflow-x: scroll; background: var(--bg, transparent); }
/* hide vis.js tooltips entirely */
.vis-network .vis-tooltip { display: none !important; }




/* Table for Builds view */
table {
border-collapse: collapse;
background-color: var(--card-bg);
box-shadow: 0 2px 5px var(--shadow);
border-radius: 4px;
overflow: hidden;
margin: 20px 0;
}
thead {
background-color: var(--hover-bg);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
tr.selected {
background-color: var(--hover-bg);
}

/* Enhanced Pagination */
.pagination {
margin-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.pagination button {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 8px 12px;
margin: 2px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 4px;
box-shadow: 0 1px 3px var(--shadow);
}
.pagination button:hover {
background-color: var(--hover-bg);
}
.pagination input[type="number"] {
width: 60px;
padding: 6px;
margin: 2px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--card-bg);
color: var(--text-color);
}
.pagination select {
padding: 6px;
margin: 2px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--card-bg);
color: var(--text-color);
}


#releaseInfoRow {
  display:flex;
  gap:10px;
  margin-top:10px;
}

#releaseDetails {
  flex:1;
  padding:1rem;
  border:1px solid var(--border-color);
  background:var(--card-bg);
  color:var(--text-color);
}
  
  /* when editing, allow delete icons to show */
  #releaseDetails.editing .delete-component {
    display: inline-block;
  }
  
/* Ticket pane */
#ticketPane {
  flex:1;
  max-width:50%;
  background:var(--card-bg);
  color:var(--text-color);
  border:1px solid var(--border-color);
  transform:translateX(100%);
  transition:transform .3s ease;
  overflow-y:auto;
}
#ticketPane.visible { transform:translateX(0); }
#ticketPane.hidden { display:none; }
#ticketPane header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem;
  border-bottom:1px solid var(--border-color);
}
#ticketPane ul { list-style:none; padding:0; margin:0; }
#ticketPane li { padding:.5rem; border-bottom:1px solid var(--border-color); }
#ticketPane li.ticket-header {
  background:var(--hover-bg);
  font-weight:bold;
  border-bottom:none;
}
#ticketPane li.ticket-sep { height:1px; background:var(--border-color); margin:4px 0; padding:0; border:none; }
#openInJiraBtn {
  background:#0052CC;
  color:white;
}

/* Basic modal form styling */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-form.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-form.two-col > label,
.modal-form.two-col > div {
  display: flex;
  flex-direction: column;
}
.modal-form.two-col .actions {
  grid-column: 1/-1;
  text-align: right;
}
.modal-form > label {
  display: flex;
  flex-direction: column;
}
.modal-form input:not([type="radio"]):not([type="checkbox"]),
.modal-form textarea,
.modal-form select {
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-color);
  width: 100%;
  box-sizing: border-box;
}

/* environment product dropdown */
.product-select {
  background-position: 4px center;
  background-repeat: no-repeat;
  padding-left: 26px;
}

/* Release details layout */
.release-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.release-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rpc-btn{
  padding:4px 6px;
  border:none;
  background:var(--primary-color);
  color:var(--text-dark);
  border-radius:4px;
  cursor:pointer;
}
.rpc-popup{
  position:fixed;
  top:20%;
  left:50%;
  transform:translateX(-50%);
  max-width:80%;
  max-height:70vh;
  overflow-y:auto;
  background:var(--card-bg);
  color:var(--text-color);
  padding:10px;
  border-radius:6px;
  box-shadow:0 2px 8px var(--shadow);
  z-index:1000;
  border-left:8px solid var(--status-ready);
}
.rpc-popup .close-btn{
  float:right;
  cursor:pointer;
  background:none;
  border:none;
  color:inherit;
  font-size:16px;
}
.rpc-popup-warning{border-left-color:var(--deploy-running);}
.rpc-popup-error{border-left-color:var(--status-cancelled);}
.spinner{border:4px solid var(--card-bg);border-top:4px solid var(--primary-color);border-radius:50%;width:24px;height:24px;animation:spin 1s linear infinite;margin:20px auto;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.fix-entry{margin-bottom:8px;}
.diff-block{background:var(--hover-bg);padding:4px;font-family:monospace;margin:0;overflow:auto;max-height:200px;}
.diff-context{white-space:pre;}
.diff-old{background:#ffd6d6;white-space:pre;text-decoration:line-through;}
.diff-new{background:#d6ffd6;white-space:pre;}
.release-nav-table {
  margin: 6px 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-collapse: collapse;
}
.release-nav-table td {
  vertical-align: top;
  padding: 2px 4px;
  border: none;
}
.release-nav-table .nav-label{font-weight:bold;margin-right:4px;}
.release-nav-table .nav-pills{max-width:240px;display:flex;flex-direction:column;gap:2px;}
.release-nav-table .child-pills{flex-direction:column;}

.login-container{max-width:320px;margin:80px auto;padding:20px;border:1px solid var(--border-color);border-radius:4px;background:var(--card-bg);color:var(--text-color);box-shadow:0 2px 5px var(--shadow);}
.login-container input{width:100%;margin:6px 0;padding:8px;box-sizing:border-box;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-color);color:var(--text-color);}
.login-container button{width:100%;padding:8px;margin-top:6px;border:none;border-radius:4px;background:var(--primary-color);color:var(--text-dark);cursor:pointer;}