/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background-color: #0B1F3A; color:#fff;
  font-family:'Segoe UI', sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}

/* Loading Screen */
.loading {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:#0B1F3A; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:999;
  animation: fadeOut 1s ease-out forwards; animation-delay:1.5s;
}
.loading-logo {
  height:240px; margin-bottom:1rem;
  animation:pulse 2.5s ease-in-out 3;
}
.loading span { font-size:1.4rem; }
@keyframes fadeOut { to { opacity:0; visibility:hidden; } }
@keyframes pulse {
  0%,100% { transform:scale(1); opacity:0.9; }
  50% { transform:scale(1.05); opacity:1; }
}

/* Background Pattern */
#background-svg {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:url('assets/pattern-hvac-ductwork-advanced.svg') repeat;
  background-size:600px; opacity:0.08; z-index:0;
  animation:panBlueprint 30s linear infinite;
}
@keyframes panBlueprint {
  from { background-position:0 0; }
  to   { background-position:600px 600px; }
}

/* Weather Overlay */
#weather-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
body.daytime #weather-overlay { background:rgba(255,255,255,0.05); }
body.nighttime #weather-overlay { background:rgba(0,0,0,0.2); }
#weather-overlay.clear {
  background:url('assets/weather/sun.svg') center/90px no-repeat;
  opacity:0.12;
}
#weather-overlay.clouds {
  background:url('assets/weather/clouds.svg') center/cover no-repeat;
  opacity:0.08;
}
#weather-overlay.rain {
  background:url('assets/weather/rain.svg') repeat;
  background-size:50px; opacity:0.06;
  animation:rainFall 0.6s linear infinite;
}
#weather-overlay.snow {
  background:url('assets/weather/snow.svg') repeat;
  background-size:60px; opacity:0.04;
  animation:snowFall 1.2s linear infinite;
}
@keyframes rainFall { 0%{background-position:0 -50px;}100%{background-position:0 50px;} }
@keyframes snowFall{0%{background-position:0 -60px;}100%{background-position:0 60px;}}

/* Top Info Bar */
#floating-bar {
  position:sticky; top:0; width:100%;
  background:rgba(11,31,58,0.95); display:flex;
  justify-content:space-between; align-items:center;
  padding:.75rem 1.25rem; font-size:.95rem; z-index:10;
  border-bottom:1px solid #1E3A5F;
}
#floating-bar .info-panels-left,
#floating-bar .info-panels-right {
  display:flex; gap:1rem;
}

/* Weather Info Styling */
#weather-info {
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem;
}
#weather-info .weather-icon {
  width:24px; height:24px;
}

/* Main Content */
.container {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:3rem 1rem; position:relative; z-index:1;
}
.logo-main { margin-bottom:1rem; text-align:center; }
.logo { height:240px; animation:pulse 3s ease-in-out 3; }

/* Dashboard Title */
.dashboard-title {
  font-size:2.25rem; margin-bottom:2rem;
  text-align:center; color:#E63946;
}
.title-animated-from-left { animation:slideInLeft .8s ease-out; }
@keyframes slideInLeft {
  from { transform:translateX(-40px); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}

/* Grid Layout */
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1.5rem; width:100%; max-width:1000px; margin:0 auto;
}
.fade-in-grid { animation:fadeIn 1s ease-in; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Tile Cards */
.dashboard-tile {
  background:linear-gradient(135deg,#E63946 0%,#0B1F3A 100%);
  border-radius:1rem; text-decoration:none; color:white;
  display:flex; flex-direction:column; align-items:center;
  padding:1.75rem 1.25rem;
  box-shadow:0 4px 8px rgba(0,0,0,0.4);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.dashboard-tile:hover {
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 6px 14px rgba(0,0,0,0.6);
  background:linear-gradient(135deg,#0B1F3A 0%,#E63946 100%);
}
.dashboard-tile:active {
  transform:translateY(-2px) scale(0.98);
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}

/* Icon Styling */
.tile-icon {
  width:80px; height:80px; margin-bottom:.75rem;
  filter:brightness(1); transition:transform .2s ease,filter .2s ease;
}
.dashboard-tile:hover .tile-icon {
  transform:scale(1.2); filter:brightness(1.1);
}
.dashboard-tile:active .tile-icon {
  transform:scale(1.1); filter:brightness(0.9);
}

/* Thicken Specific SVGs */
.dashboard-tile img[src$="parts.svg"],
.dashboard-tile img[src$="thermometer.svg"] {
  filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) !important;
}

/* Footer */
footer {
  text-align:center; font-size:.85rem;
  padding:1rem; background-color:#0B1F3A;
  border-top:1px solid #1E3A5F; color:#CCC;
}
/* Page Title */
.page-title {
  font-size: 1.75rem;
  color: #E63946;
  text-align: center;
  margin: 1.5rem 0;
}

/* Content & Form Layout */
.content {
  background: rgba(255,255,255,0.05);
  padding: 2rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #FFD;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.1);
  color: #FFF;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.5);
}

/* Wizard Buttons */
.option-button {
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  padding: 1rem 1.5rem;
  color: #FFF;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.option-button.selected,
.option-button:hover {
  background: rgba(230,57,70,0.8);
  transform: translateY(-2px);
}

/* Wizard Navigation Buttons */
.btn-primary {
  background: #E63946;
  color: #FFF;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  background: #cf2e3f;
  transform: translateY(-2px);
}
.btn-primary:active {
  background: #d3323b;
  transform: translateY(0);
}

/* Wizard Step Fade */
.wizard-step {
  display: none;
}
.wizard-step:first-of-type {
  display: block;
}
.hidden {
  display: none !important;
}
/* Center the form and adjust header button */
.wizard-container {
  max-width: 600px;
  margin: 2rem auto;   /* centers horizontally */
  padding: 1.5rem;
}

#floating-bar {
  display: flex;
  align-items: center;
}
.header-buttons {
  margin-left: auto;   /* push button to right */
}
.header-buttons .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
/* Center the wizard form */
.wizard-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
}

/* Align Return button to right */
#floating-bar {
  display: flex;
  align-items: center;
}
.header-buttons {
  margin-left: auto;
}
.header-buttons .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
/* Style for the employee dropdown */
.select-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.1);
  color: #FFF;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  appearance: none; /* removes default arrow for a cleaner look */
}
.select-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.5);
}
/* Parts Restock Page */

/* Employee dropdown */
.select-input {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  appearance: none;
}
.select-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.5);
}

/* Parts grid */
.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 1rem;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
}
.part-button {
  background: linear-gradient(135deg, #E63946 0%, #0B1F3A 100%);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  transition: transform .2s ease, filter .2s ease;
}
.part-button:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.1);
}
.part-button:active {
  transform: translateY(-1px) scale(0.98);
  filter: brightness(0.9);
}

/* Selected list */
.selected-list {
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.selected-list h2 {
  margin-bottom: 1rem;
  color: #E63946;
}
.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.selected-item:last-child {
  border-bottom: none;
}
.qty-controls {
  display: flex;
  gap: 0.5rem;
}
.qty-controls button {
  background: #E63946;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease;
}
.qty-controls button:hover {
  background: #cf2e3f;
}
.qty-controls input {
  width: 2rem;
  text-align: center;
  border: none;
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1rem;
  border-radius: 0.25rem;
}

/* Submit & footer nav buttons */
#submit-btn {
  margin-bottom: 2rem;
}
.footer-nav a.btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  font-size: 1rem;
  transition: background .2s ease, transform .2s ease;
}
.footer-nav a.btn-secondary:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
/* Dashboard‐style buttons for roles & parts */
.role-button,
.part-button {
  background: linear-gradient(135deg, #E63946 0%, #0B1F3A 100%);
  border-radius: 1rem;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
  user-select: none;
}

/* Hover state: lift and invert gradient */
.role-button:hover,
.part-button:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
  background: linear-gradient(135deg, #0B1F3A 0%, #E63946 100%);
}

/* Active state: slight press down */
.role-button:active,
.part-button:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Disable built‐in focus outline and add custom ring */
.role-button:focus,
.part-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.6), 0 4px 8px rgba(0,0,0,0.4);
}

/* Hide legacy header login/account panel if present */
#account-panel { display: none !important; }