/* ============================================
   THEME VARIABLES
   ============================================ */
:root {
  --btn-bg-active: radial-gradient(#00293F, #081E21);
  --btn-border-active: #59c9ec;
  --btn-bg-default: radial-gradient(#302d26, #070706);
  --btn-border-default: #3f3d38;
  --btn-color-default: white;
  --btn-hover-bg: radial-gradient(#3398CC, #32332c);
  --btn-hover-border: skyblue;
}

[data-bs-theme="light"] {
  --btn-bg-active: radial-gradient(#bde4f3, #c6e3ea);
  --btn-border-active: #0077aa;
  --btn-bg-default: radial-gradient(#d3f2fc, skyblue);
  --btn-border-default: #0077aa;
  --btn-color-default: black;
  --btn-hover-bg: radial-gradient(#3398CC, #32332c);
  --btn-hover-border: skyblue;
}

/* ============================================
   BASE BUTTON STYLES (ALL BUTTONS)
   ============================================ */
 .btn-small, .show-button, .hide-button,
.overviews-button, .outputs-button, .inputs-button, .fullscreen-btn, .downloads-button, .three-button,
.search-btn, #themeToggle, #fullscreenToggle, .download-btn, .token-btn,
.createbutton, .editbutton, .deletebutton, .savebutton, .cancelbutton,
.loginbutton, .logoutbutton, .registerbutton, .viewbutton, 
.pausebutton, .profilebutton, .buybutton,
.btn.btn-danger, .btn.btn-secondary, .btn.btn-primary, .btn.btn-success
 {
  background: var(--btn-bg-default) !important;
  border: 1px solid var(--btn-border-default) !important;
  color: var(--btn-color-default) !important;
  transition: all 0.3s ease;
}

/* ============================================
   HOVER STATES (ALL BUTTONS)
   ============================================ */
.btn-small:hover, .show-button:hover,
.hide-button:hover, .overviews-button:hover, .outputs-button:hover,.three-button:hover,
.inputs-button:hover, .fullscreen-btn:hover, .search-btn:hover, .downloads-button:hover,
#themeToggle:hover, #fullscreenToggle:hover, .download-btn:hover, .token-btn:hover,
.createbutton:hover, .editbutton:hover, .deletebutton:hover, .savebutton:hover,
.cancelbutton:hover, .loginbutton:hover, .logoutbutton:hover, .registerbutton:hover,
.viewbutton:hover, .pausebutton:hover, .profilebutton:hover, .buybutton:hover ,
.btn.btn-danger:hover , .btn.btn-secondary:hover , .btn.btn-primary:hover , .btn.btn-success:hover 
{
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
}

/* ============================================
   ACTIVE STATES (ALL BUTTONS)
   ============================================ */
.btn-small:active, .show-button:active,
.hide-button:active, .overviews-button:active, .outputs-button:active, .three-button:active,
.inputs-button:active, .fullscreen-btn:active, .search-btn:active, .downloads-button:active,
#themeToggle:active, #fullscreenToggle:active, .download-btn:active, .token-btn:active,
.createbutton:active, .editbutton:active, .deletebutton:active, .savebutton:active,
.cancelbutton:active, .loginbutton:active, .logoutbutton:active, .registerbutton:active,
.viewbutton:active,  .pausebutton:active, .profilebutton:active, .buybutton:active ,
.btn.btn-danger:active , .btn.btn-secondary:active , .btn.btn-primary:active , .btn.btn-success:active 
{
  background: radial-gradient(#eefffd, #59c9ec) !important;
  border-color: black !important;
}


/* ============================================
   NAVBAR BUTTON SPECIFIC STATES
   ============================================ */
.btn-navbar.navbar-normal,  .homebutton.navbar-normal {
  background: var(--btn-bg-default) !important;
  border: 1px solid var(--btn-border-default) !important;
}

.btn-navbar.navbar-current-page , .homebutton.navbar-current-page{
  background: radial-gradient(#00293F, #081E21) !important;
  border: 1px solid #59c9ec !important;
}

.btn-navbar.navbar-hovering , .homebutton.navbar-hovering {
  background: radial-gradient(#3398CC,#32332c) !important;
  border: 1px solid skyblue !important;
}

.btn-navbar.navbar-clicked , .homebutton.navbar-clicked{
  background: radial-gradient(#eefffd, #59c9ec) !important;
  border: 1px solid #fff !important;
}


/* ============================================
   SPECIFIC BUTTON DIMENSIONS & LAYOUT
   ============================================ */
.btn-navbar, .homebutton {
  position: relative;
  display: inline-block;
  height: 60px;
  width: 180px;
  padding-top: 10px;
  left: 0px;
  border-radius: 9px;
}

.btn-small {
  position: relative;
  height: 30px;
  width: 30px;
  right: 20px;
  border-radius: 9px;
}

.btn-small img {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 2px;
  top: 2px;
}

.btn-icon {
  transform: translate(-3px, -2px);
  fill: var(--icon-color, #9b8f80);
}

.btn-small:hover .btn-icon {
  fill: var(--icon-color-hover, cyan) !important;
}

.btn-small:active .btn-icon {
  fill: var(--icon-color-active, #000);
}

.homebutton img {
  position: absolute;
  top: 5px;
  right: 12.5px;
  width: 85%;
  height: 85%;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.createbutton, .editbutton, .deletebutton, .savebutton, .cancelbutton,
.loginbutton, .logoutbutton, .registerbutton, .viewbutton, 
.pausebutton, .profilebutton, .buybutton {
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 9px;
  gap: 100px;
  opacity: 1;
  z-index: 1;
}

.createbutton-text, .editbutton-text, .deletebutton-text, .savebutton-text,
.cancelbutton-text, .loginbutton-text, .logoutbutton-text, .registerbutton-text,
.viewbutton-text, .buybutton-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -20%);
  color: #fff;
  font-family: 'calibri';
  font-weight: bold;
  z-index: 3;
  font-size: 15px;
}

.createbutton-text:hover, .editbutton-text:hover, .deletebutton-text:hover,
.savebutton-text:hover, .cancelbutton-text:hover, .loginbutton-text:hover,
.logoutbutton-text:hover, .registerbutton-text:hover {
  color: cyan;
}

.createbutton-text:active, .editbutton-text:active, .deletebutton-text:active,
.savebutton-text:active, .cancelbutton-text:active, .loginbutton-text:active,
.logoutbutton-text:active, .registerbutton-text:active {
  color: #32332c;
}

.createbutton img, .editbutton img, .deletebutton img, .cancelbutton img,
.savebutton img, .loginbutton img, .logoutbutton img, .registerbutton img,
.viewbutton img, .pausebutton img, .profilebutton img,
.buybutton img {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* Image swapping on hover/active */
.createbutton:hover img { content: url("/static/images/create_hover.png"); width: auto; }
.createbutton:active img { content: url("/static/images/create_active.png"); width: auto; }
.editbutton:hover img { content: url("/static/images/edit_hover.png"); width: auto; }
.editbutton:active img { content: url("/static/images/edit_active.png"); width: auto; }
.deletebutton:hover img { content: url("/static/images/delete_hover.png"); width: auto; }
.deletebutton:active img { content: url("/static/images/delete_active.png"); width: auto; }
.loginbutton:hover img { content: url("/static/images/login_hover.png"); width: auto; }
.loginbutton:active img { content: url("/static/images/login_active.png"); width: auto; }
.logoutbutton:hover img { content: url("/static/images/logout_hover.png"); width: auto; }
.logoutbutton:active img { content: url("/static/images/logout_active.png"); width: auto; }
.registerbutton:hover img { content: url("/static/images/register_hover.png"); width: auto; }
.registerbutton:active img { content: url("/static/images/register_active.png"); width: auto; }
.viewbutton:hover img { content: url("/static/images/view_hover.png"); width: auto; }
.viewbutton:active img { content: url("/static/images/view_active.png"); width: auto; }
.cancelbutton:hover img { content: url("/static/images/cancel_hover.png"); width: auto; }
.cancelbutton:active img { content: url("/static/images/cancel_active.png"); width: auto; }
.pausebutton:hover img { content: url("/static/images/pause_hover.png"); width: auto; }
.pausebutton:active img { content: url("/static/images/pause_active.png"); width: auto; }
.savebutton:hover img { content: url("/static/images/save_hover.png"); width: auto; }
.savebutton:active img { content: url("/static/images/save_active.png"); width: auto; }
.homebutton:hover img { content: url("/static/images/home_hover.png"); width: auto; }
.homebutton:active img { content: url("/static/images/home_active.png"); width: auto; }
.profilebutton:hover img { content: url("/static/images/profile_hover.png"); width: auto; }
.profilebutton:active img { content: url("/static/images/profile_active.png"); width: auto; }
.buybutton:hover img { content: url("/static/images/buy_hover.png"); width: auto; }
.buybutton:active img { content: url("/static/images/buy_active.png"); width: auto; }

/* ============================================
   SHOW/HIDE PANEL BUTTONS
   ============================================ */
.hide-button, .show-button, .overviews-button, .outputs-button, .inputs-button, .downloads-button , .three-button {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 80px;
  border-radius: 9px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
}

.hide-button img, .show-button img, .overviews-button img, .outputs-button img, .inputs-button img, .downloads-button img, .three-button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease;
  opacity: 1;
}

.show-button { display: none; }
.hide-button { display: block; }

.side-panel.show { display: block; transform: translateX(0); }

.hide-button:hover img { content: url("/static/images/showhide/hide_hover.png"); width: auto; }
.hide-button:active img { content: url("/static/images/showhide/hide_active.png"); width: auto; }
.show-button:hover img { content: url("/static/images/showhide/show_hover.png"); width: auto; }
.show-button:active img { content: url("/static/images/showhide/show_active.png"); width: auto; }


.outputs-button:hover img { content: url("/static/images/showhide/outputs_hover.png"); width: auto; }
.outputs-button:active img { content: url("/static/images/showhide/outputs_active.png"); width: auto; }

.inputs-button:hover img { content: url("/static/images/showhide/inputs_hover.png"); width: auto; }
.inputs-button:active img { content: url("/static/images/showhide/inputs_active.png"); width: auto; }

.downloads-button:hover img { content: url("/static/images/showhide/download_hover.png"); width: auto; }
.downloads-button:active img { content: url("/static/images/showhide/download_active.png"); width: auto; }

.three-button:hover img { content: url("/static/images/showhide/threejs_hover.png"); width: auto; }
.three-button:active img { content: url("/static/images/showhide/threejs_active.png"); width: auto; }

/* ============================================
   THEME TOGGLE & FULLSCREEN BUTTONS
   ============================================ */
#themeToggle, #fullscreenToggle {
  border-radius: 8px;
  padding: 0px 0px;
}

/* Light mode specific text colors */
[data-bs-theme="light"] .navbutton-text {
  color: #0e9ac7;
}

[data-bs-theme="light"] .navbutton-text:hover {
  color: white;
}

/* ============================================
   LICENSE TABLE BUTTONS
   ============================================ */
.license-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 8px;
}

.license-table th, .license-table td {
  padding: 8px 12px;
  text-align: left;
}

.license-table img {
  max-width: 48px;
  max-height: 48px;
  border-radius: 6px;
}

.btn-activate, .btn-deactivate, .btn-disabled, .btn-expired {
  position: relative;
  height: 30px;
  width: 90px;
  right: 20px;
  border-radius: 9px;
  transition: opacity 0.3s ease;
  background: radial-gradient(#302d26, #070706);
}

.btn-activate { border: 1px solid #28a745 !important; }
.btn-deactivate { border: 1px solid #007bff !important; }
.btn-expired { border: 1px solid red !important; }
.btn-disabled { border: 1px solid #fff !important; background: darkgray !important; }

/* ============================================
   TOKEN DISPLAY COLORS
   ============================================ */
.btn-cost, .token-display, .token-value, .token-label {
  color: var(--btn-color-default);
}

.btn.btn-danger, .btn.btn-secondary, .btn.btn-primary, .btn.btn-success
{
  width: 120px;
}