/* /static/css/custom.css */
.min-vh-30 {
    min-height: 30vh;
  }


.half-opacity {
    --bs-bg-opacity: 0.5;
  }
  
.spacer-60 {
    clear: both;
    height: 60px;
  }


/* custom.css */
.form-control {
  font-weight: 500;
}

.text-large {
  font-size: 28px;
}


.djheader {
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgb(198, 198, 198);
    color: white;
    text-align: center;
  }
  
  .djfooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(198, 198, 198);
    color: white;
    text-align: center;
  }

.portal-navbar {
  background: #343a40 !important;
  box-shadow: 0 9px 18px -10px rgba(185, 74, 72, 0.45) !important;
  border-bottom: none;
}

.portal-navbar .navbar-brand,
.portal-navbar .navbar-brand span,
.portal-navbar .nav-link {
  color: #ffffff !important;
}

.portal-navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.3);
}

.portal-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.portal-navbar .navbar-brand {
  font-size: 1.25rem;
  color: #ffffff !important;
}

.portal-navbar .navbar-nav .nav-link {
  color: #f8f9fa;
  transition: color 0.3s ease;
}

.portal-navbar .navbar-nav .nav-link:hover {
  color: #ffc9cf;
}

.portal-navbar .navbar-toggler {
  border: none;
}


/* Hide Bootstrap dropdown caret on profile image toggle */
.no-caret::after { display: none !important; }

/* Unified portal card styling (matches management pages) */
.portal-card {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: .75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 0 0 3px rgba(0,123,255,0.05);
  transition: box-shadow .25s ease, transform .25s ease;
  padding: 1.25rem 1.25rem .75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.portal-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 4px rgba(0,123,255,0.07);
  transform: translateY(-2px);
}
.portal-card h5, .portal-card .lead { font-weight: 600; margin-bottom: .75rem; }
.portal-card a.nav-link { padding: .25rem 0; text-align: left; }
.portal-card a.nav-link:hover { text-decoration: underline; }

/* Table alignment with glow container */
.portal-table-container {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: .75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 0 0 3px rgba(0,123,255,0.05);
  padding: 1rem 1.25rem 1.25rem;
}
.portal-table-container .table { margin-bottom: 0; }
.portal-table-container .table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
.portal-table-container .table tbody td { vertical-align: middle; }

/* Subtle striped enhancement */
.table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: #fafbfc; }

/* Dark mode harmony (if dark mode toggled) */
body.dark-mode .portal-card, body.dark-mode .portal-table-container { background:#1f242a; border-color:#2d3640; box-shadow:0 2px 6px rgba(0,0,0,0.6), 0 0 0 3px rgba(0,123,255,0.15); }
body.dark-mode .portal-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.7), 0 0 0 4px rgba(0,123,255,0.18); }
body.dark-mode .portal-table-container .table-striped>tbody>tr:nth-of-type(odd){ --bs-table-accent-bg:#242b33; }

/* External manager tool logos */
.external-tool-logos .tool-logo {
  display: inline-block;
  background: #fff;
  border: none;
  border-radius: .5rem;
  padding: .5rem;
  transition: box-shadow .2s ease, transform .2s ease;
  max-width: 160px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.external-tool-logos .tool-logo img { display:block; width: 140px; height:auto; }
.external-tool-logos .tool-logo:hover { box-shadow:0 4px 10px rgba(0,0,0,.12); transform:translateY(-2px); }
body.dark-mode .external-tool-logos .tool-logo { background:#2d3640; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
body.dark-mode .external-tool-logos .tool-logo:hover { box-shadow:0 4px 14px rgba(0,0,0,.6); }

/* Dark mode enhancements for standard cards (home page & shared boxes) */
body.dark-mode .card { background:#1f242a; border-color:#2d3640; }
body.dark-mode .card-header { background:#27303a !important; border-bottom-color:#2d3640; color:#f1f3f5; }
body.dark-mode .card-header .fw-semibold, 
body.dark-mode .card-header span, 
body.dark-mode .card-header h5 { color:#f1f3f5; }
body.dark-mode .card-body { color:#d5d9df; }
body.dark-mode a { color:#5fa9ff; }
body.dark-mode a:hover { color:#8bc2ff; }

/* Portal tools button (muted red) */
.btn-portal {
  color: #fff;
  background-color: #b94a48; /* muted red */
  border-color: #b94a48;
}
.btn-portal:hover,
.btn-portal:focus {
  color: #fff;
  background-color: #a33f3d;
  border-color: #a33f3d;
}
.btn-portal:active {
  color: #fff;
  background-color: #8f3735;
  border-color: #8f3735;
}
.btn-portal:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(185,74,72,.3);
}
body.dark-mode .btn-portal {
  background-color: #a94442;
  border-color: #a94442;
  color: #fff;
}
body.dark-mode .btn-portal:hover,
body.dark-mode .btn-portal:focus {
  background-color: #983c3a;
  border-color: #983c3a;
}

/* Square icon buttons for homepage */
.btn-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  border: 1px solid #6c757d;
}

/* Default colors for non-custom buttons */
.btn-square:not(.btn-storefile) {
  background-color: #6699cc; /*Old: #6c757d*/
  border-color: #6699cc;
  color: #fff;
}

.btn-square:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Default hover for non-custom buttons */
.btn-square:not(.btn-storefile):hover {
  background-color: #475877; /*Old: #5a6268*/
  border-color: #475877;
  color: #fff;
}

.btn-square .btn-icon {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

.btn-square .btn-text {
  font-size: 0.75rem;
  line-height: 1.1;
  font-weight: 500;
}

body.dark-mode .btn-square:not(.btn-storefile) {
  background-color: #495057;
  border-color: #495057;
  color: #fff;
}

body.dark-mode .btn-square:not(.btn-storefile):hover {
  background-color: #3d4349;
  border-color: #3d4349;
  color: #fff;
}

/* Store file buttons - let JavaScript handle all styling */
.btn-storefile {
  /* No background or color defaults - JavaScript will set these */
}