/* ======================================
   Banti v2 - Shared Styles
   Leverages Bootstrap 5.3 + Dynamic Brand Variables
   Used across all pages (login, register, albums, etc.)
   ====================================== */

/* ======================================
   Brand CSS Variables (set by backend)
   ====================================== */
:root {
  --brand-primary: #ffffff;
  --brand-primary-dark: #e6e6e6;
  --brand-primary-text: #333;
  --brand-success: #5cb85c;
  --brand-success-dark: #4cae4c;
  --brand-info: #17a2b8;
  --brand-info-dark: #138496;
  --transition: all 0.3s ease;
  --brand-link-color: #337ab7;
  --brand-link-hover-color: #175285;
  --label-danger-color: #d9534f;
  --text-bg-warning: #f0ad4e;
  --text-bg-success: #5cb85c;
  --text-bg-info: #5bc0de;
  --text-bg-primary: #337ab7;
  --text-bg-secondary: #6c757d;
  --text-bg-light: #f1f1f1; /* var(--text-bg-light); */
  --text-bg-dark: #343a40;
  --bs-body-color: #333;


}
:root, [data-bs-theme="light"] {
  /* 1. Core Primary Colors */
  --bs-primary: #337ab7;
  --bs-primary-rgb: 51, 122, 183; /* RGB equivalent of #337ab7 */

  /* 2. Subtle backgrounds and borders (e.g., alerts, active items) */
  --bs-primary-bg-subtle: #e8f1f9;
  --bs-primary-border-subtle: #b1cee7;
  --bs-primary-text-em: #245885;
}

/* Keep Font Awesome from waiting too long before painting icons. */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/resources/css/webfonts/fa-solid-900.woff2") format("woff2"),
       url("/resources/css/webfonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/resources/css/webfonts/fa-regular-400.woff2") format("woff2"),
       url("/resources/css/webfonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/resources/css/webfonts/fa-brands-400.woff2") format("woff2"),
       url("/resources/css/webfonts/fa-brands-400.woff") format("woff");
}

/* 3. Global Button State Overrides */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #286090;          /* Darkened for hover */
  --bs-btn-hover-border-color: #204d74;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-bg: #204d74;         /* Darkest for active/click */
  --bs-btn-active-border-color: #122b40;
}

/* 4. Optional: Dark Mode adjustment if your site uses it */
[data-bs-theme="dark"] {
  --bs-primary: #4693d2;
  --bs-primary-rgb: 70, 147, 210;
  --bs-primary-bg-subtle: #112538;
  --bs-primary-border-subtle: #245885;
}

/* ======================================
   Base Styles
   ====================================== */
html,
body {
  color: var(--brand-primary-text);
  background-color: var(--brand-primary);
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif;
}

#app {
  width: 100%;
  height: 100%;
}

/* ======================================
   Animations (Reusable)
   ====================================== */
@keyframes slideDownBounce {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  60% {
    opacity: 1;
    transform: translateY(10px);
  }
  80% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDownBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.back-link {
  text-decoration: none;
  font-size: 1.1rem
}

/* ======================================
   Form Controls - Brand Customizations
   ====================================== */
.form-control {
  font-weight: bold;
}
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.1);
}
.form-control::placeholder {
  color: #c4c8cb; /* Bootstrap's text-muted gray */
  opacity: 1;
}

.form-label, .form-check-label{
  font-weight: 400;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--brand-primary-text);
}
.form-check-label {
  margin-bottom: 0;
}

.input-group .form-control {
  border-radius: 0.375rem;
}

/* ======================================
   Button Addon - Password Visibility
   ====================================== */
.input-group .btn-outline-secondary {
  border-color: #dee2e6;
  color: #6c757d;
  transition: var(--transition);
}

.input-group .btn-outline-secondary:hover,
.input-group .btn-outline-secondary:focus {
  border-color: var(--brand-primary-text);
  color: var(--brand-primary-text);
  background-color: transparent;
}

.input-group .btn-outline-secondary:active {
  border-color: var(--brand-primary);
  color: white;
  background-color: var(--brand-primary);
}
.btn-group .btn.active,
.btn-check:checked+.btn {
    background-color: var(--text-bg-primary);
    color: white;
    border-color: var(--text-bg-primary);
}

/* ======================================
   Buttons - Brand Customizations
   ====================================== */
.btn-outline-secondary {
    --bs-btn-color: #777;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}
.btn {
  /* text-transform: uppercase; */
  /* letter-spacing: 0.5px; */
  font-weight: 700;
  font-size: 0.875rem;
}
.btn-group-sm .btn {
    font-size: 0.7rem;
}

.btn-success {
  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #56AC56 100%);
    background-image: -o-linear-gradient(top, #5cb85c 0%, #56AC56 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#56AC56));
    background-image: linear-gradient(to bottom, #5cb85c 0%, #56AC56 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff56AC56', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #3e8f3e;
    color: #FFF;
    border-bottom-color: #398A39;
    border-top-color: #5EBE5E;
}

.btn-success:hover:not(:disabled) {
  background: #398A39;
  box-shadow: none;
}

.btn-success:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-info {
  background-color: var(--brand-info);
  border-color: var(--brand-info);
}

.btn-info:hover:not(:disabled) {
  background-color: var(--brand-info-dark);
  border-color: var(--brand-info-dark);
}

/* .btn-link {
  color: var(--brand-primary);
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--brand-primary-dark);
} */

.btn-lg {
  padding: 0.55rem 1.5rem;;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.275rem;
}

.custom-switch-green .form-check-input:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
    background-color: var(--brand-success);
    border-color: var(--brand-success);
}

/* ======================================
   Utility Classes
   ====================================== */
.alert-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.text-label-danger {
  color: var(--label-danger-color) !important;
}

small {
  font-size: 0.75rem;
}

/* ======================================
   Top Navigation
   ====================================== */
.top-nav {
  padding: 12px 5px 12px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(15px);
}

.top-nav .navbar-brand {
  font-weight: 700;
  font-size: 20px;
  color: var(--brand-primary) !important;
  margin-right: 30px;
}

.top-nav .brand-text {
  color: var(--brand-primary);
}

.top-nav .nav-link {
  color: #666 !important;
  font-weight: 500;
  margin: 0 15px;
  transition: color 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.top-nav .nav-link:hover {
  color: var(--brand-primary) !important;
}

.top-nav .nav-link.active {
  color: var(--brand-primary) !important;
  border-bottom: 2px solid var(--brand-primary);
  padding-bottom: 10px;
}

.top-nav .navbar-text {
  color: #666;
  font-weight: 500;
  font-size: 14px;
}
.table {
    color: var(--brand-primary-text)
}

.table-sm>:not(caption)>*>*{
    font-size: 0.875rem;
    padding: 0.75rem 0.25rem;
}
.table-hover > tbody > tr:hover > * {
  background-color: #e7f1ff !important; /* Alice Blue */
  color: var(--brand-primary-text);
  
  /* Crucial: Clear Bootstrap's default box-shadow overlay */
  box-shadow: none !important; 
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f9f9f9 !important; /* Your custom stripe color */
  color: #000;
  
  /* Crucial: Turn off Bootstrap's default monotone overlay */
  box-shadow: none !important; 
}

/* ======================================
   Responsive Design
   ====================================== */
@media (max-width: 576px) {
  .form-control {
    font-size: 1rem; /* Prevents zoom on iOS */
  }
}