/*----------------------------------------------
  Custom Theme Styles for Rushworks Portal
  All colors set via CSS variables: no hardcoded color values
-----------------------------------------------*/

/* Remove underline from all anchors for cleaner look */
a {
  text-decoration: none !important;
  color: var(--bs-primary); /* Brand Maroon */
  transition: color 0.15s;
}
a:focus,
a:hover {
  color: var(--bs-link-hover, #3c6360) !important; /* customizable hover color */
}

/* Brand color palette per grayscale.css */
:root {
  --bs-primary: #8E2323;
  --bs-primary-rgb: 142,35,35;
  --bs-secondary: #161616;
  --bs-secondary-rgb: 22,22,22;
  --bs-info: #8fb1d5;
  --bs-warning: #e54a2d;
  --bs-success: #114a91;
  --bs-success-rgb: 17,74,145;
  --bs-danger: #af3b3b;
  --bs-danger-rgb: 175,59,59;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248,249,250;
  --bs-dark: #161616;
  --bs-dark-rgb: 22,22,22;
  --bs-border-color: #dee2e6;
  --bs-border-light: #e9ecef;
  --bs-black-rgb: 0,0,0;
  --bs-white: #fff;
  /* Socials */
  --google-color: #db4437;
  --facebook-color: #4267B2;
  --twitter-color: #1DA1F2;
  --linkedin-color: #0077B5;
  /* Custom for link hover fallback */
  --bs-link-hover: #3c6360;
}

/* Bootstrap container size - matches .container:max-width in views */
.container {
  max-width: 80%;
}

/* General button style: used for main action buttons (Sign In, Verify) */
.cta-button,
.btn.cta-button {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background 0.15s, transform 0.2s, color 0.2s;
  box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.07);
}
.cta-button:hover,
.btn.cta-button:hover {
  background-color: var(--bs-danger) !important;
  color: var(--bs-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.12);
}

/* Consistent variable-based .btn colors */
.btn {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: none;
  transition: background 0.15s, color 0.2s;
}

.btn:hover,
.btn:focus {
  background-color: var(--bs-danger) !important;
  color: var(--bs-white) !important;
}

.btn-success,
.btn.btn-success {
  background-color: var(--bs-success) !important;
  color: var(--bs-white) !important;
  border: none;
}
.btn-success:hover,
.btn.btn-success:hover,
.btn-success:focus,
.btn.btn-success:focus {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/* Social sign-in buttons */
.social-btn {
  border: none;
  color: var(--bs-white) !important;
  border-radius: 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-width: 2.5rem;
  transition: filter 0.2s, transform 0.2s;
}
.social-btn.google   { background-color: var(--google-color);}
.social-btn.facebook { background-color: var(--facebook-color);}
.social-btn.twitter  { background-color: var(--twitter-color);}
.social-btn.linkedin { background-color: var(--linkedin-color);}
.social-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-2px);
}

/* Typography utility overrides for color consistency */
.text-primary    { color: var(--bs-primary) !important; }
.text-secondary  { color: var(--bs-secondary) !important; }
.text-success    { color: var(--bs-success) !important; }
.text-danger     { color: var(--bs-danger) !important; }
.text-light      { color: var(--bs-white) !important; }
.text-dark       { color: var(--bs-dark) !important; }
.text-center     { text-align: center  !important; }
.text-left       { text-align: left    !important; }
.text-right      { text-align: right   !important; }

/* Form controls -- smooth rounded corners, visible focus */
input[type="email"],
input[type="text"],
input[type="password"],
textarea,
.form-control {
  border-radius: 0.5rem;
  font-size: 1rem;
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.16);
}

/* Cards & Feature Cards for auth and org panels */
.card,
.feature-card,
.card.feature-card {
  border-radius: 1rem;
  background: var(--bs-white);
  box-shadow: 0 4px 6px rgba(var(--bs-primary-rgb), 0.07);
  transition: transform 0.3s ease;
}
.feature-card,
.card.feature-card { padding: 2rem; text-align: center; }
.feature-card:hover,
.card.feature-card:hover { transform: translateY(-5px); }

/* Divider for "or" or "need help" bars in cards */
.divider {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
}
.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--bs-border-color);
}
.divider span {
  position: relative;
  z-index: 1;
  background: var(--bs-white);
  padding: 0 1rem;
}

/* Error icon animation utility */
.error-icon {
  color: var(--bs-warning);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Autocomplete Suggestion List for address field */
#suggestionList {
  z-index: 1050;
  position: absolute;
  background-color: var(--bs-white);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(var(--bs-black-rgb), .10);
  max-height: 200px;
  overflow-y: auto;
  pointer-events: auto;
}
#suggestionList .list-group-item {
  padding: .75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--bs-border-light);
  color: var(--bs-dark);
  background: none;
  transition: background 0.15s;
}
#suggestionList .list-group-item:last-child { border-bottom: none; }
#suggestionList .list-group-item:hover,
#suggestionList .list-group-item:focus {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  outline: none;
}
#suggestionList .list-group-item:active,
#suggestionList .list-group-item.selected {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

/* DataTables integration for tables in manage.pug and admin views */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 0.875rem !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 0.875rem !important;
  font-weight: 500;
  color: var(--bs-success);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-light);
  margin-left: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.25rem 0.5rem !important;
  margin: 0 0.125rem;
  border-radius: 0.375rem !important;
  background: var(--bs-light) !important;
  color: var(--bs-success) !important;
  border: none !important;
  font-weight: 500;
  transition: background 0.2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.2);
}

/* Pointer row support for clickable tables */
.pointer-row {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pointer-row:hover {
  background-color: var(--bs-danger) !important;
  color: var(--bs-success) !important;
}

/* Nav tabs (active underline & background) */
.tab-button,
.nav-tabs .nav-link {
  transition: all 0.3s ease;
}
.tab-button.active,
.nav-tabs .nav-link.active {
  border-bottom: 3px solid var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.07);
}

/* Custom Grid for shot-shape selector (used in some views) */
.shot-shape-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 0.5rem;
}
.shot-shape-option input[type="radio"]:checked+label {
  background-color: var(--bs-success) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-success) !important;
}
.shot-shape-option label:hover {
  background-color: rgba(var(--bs-success-rgb), 0.1);
  border-color: var(--bs-success);
}

/* Modal content box: center/rounded/shadow, used for OTP and others */
.modal-content {
  background-color: var(--bs-white);
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(var(--bs-black-rgb),0.2);
  /* max-width: 500px;
  width: 90%; */
  max-height: 90vh;
  overflow-y: auto;
}

/* Responsive tweaks for mobile: match views' sizes */
@media (max-width: 768px) {
  .feature-card { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .feature-card { padding: 1rem; }
  h1 { font-size: 1.75rem;}
  h2 { font-size: 1.5rem;}
  h3 { font-size: 1.25rem;}
}


/* Style for project tabs */
.row.flex-nowrap {
  min-height: 72vh !important;
}
.card.h-100, .card.flex-grow-1 {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
.card-body.flex-grow-1 {
  flex: 1 1 0%;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.col-md-3.d-flex, .col-md-6.d-flex {
  flex-direction: column;
  height: 100%;
}
.list-group.flex-grow-1 {
  flex-grow:1;
}
main, .container, .tab-content {
  min-height: 0;
}

.task-mini-card {
  /* Prevent border-top shifting by always reserving space for top border */
  border-top: 4px solid transparent;
  transition: background 0.08s, box-shadow 0.16s, border-left 0.16s, border-top 0.11s;
}
.task-mini-card.selected-task {
  background: #e3f0fd !important;
  border-left: 6px solid #1976d2 !important;
  box-shadow: 0 0 0 2px #b3d6fa;
}
/* Highlight user drop target */
.user-mini-card.drop-hover {
  background: #e9fae3 !important;
  border-left: 6px solid #06d6a0 !important;
  box-shadow: 0 0 0 2px #b2f2dd;
  transition: background 0.1s, box-shadow 0.15s;
}
/* Highlight selected user visually (like epics) */
.user-mini-card.selected {
  background: #e8e4fe !important;
  border-left: 6px solid #4f2988 !important;
  box-shadow: 0 0 0 2px #d1c4f3;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s;
}
/* Highlight epic drop target */
.epic-mini-card.drop-hover {
  background: #e9fae3 !important;
  border-left: 6px solid #06d6a0 !important;
  box-shadow: 0 0 0 2px #b2f2dd;
  transition: background 0.1s, box-shadow 0.15s;
}
/* Highlight task drop zones for reordering */
.task-drop-zone.drop-hover-taskzone {
  background: #def1ff !important;
  border-radius: 5px;
  transition: background 0.09s;
}
/* Highlight top border on task card drag-hover for droppable */
.task-mini-card.drop-hover-taskcard {
  border-top: 4px solid #1976d2 !important;
  box-shadow: 0 -2px 0 0 #90caf9;
  transition: border-top 0.11s, box-shadow 0.18s;
}
.desc-hover-popup {
  pointer-events: none;
  word-break: break-word;
  min-width: 220px;
  max-width: 340px;
  background: #222;
  color: #fff;
  padding: 8px 13px;
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(46,46,46,.28);
  font-size: 1em;
  line-height: 1.38;
  position: absolute;
  left: 0px;
  top: 110%;
  z-index: 2001;
  opacity: 0;
  transition: opacity 0.17s;
}
/* Prevent box "shaking" when hovering or focusing task description text */
.task-mini-card .task-desc-short,
.task-mini-card .task-desc-hover-container {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: none !important;
}
footer {
  width: 100vw;
  background: #f8f9fa;
  border-top: 1px solid #e4e8ef;
}