@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --bg-0: #050b10;
  --bg-1: #0d1822;
  --bg-2: #172635;
  --panel: rgba(8, 16, 24, 0.92);
  --panel-soft: rgba(12, 24, 36, 0.82);
  --line: rgba(175, 198, 226, 0.38);
  --text: #f3f8ff;
  --muted: #c6d5e8;
  --accent: #f59f0a;
  --accent-soft: #fbc55f;
  --danger: #ef4444;
  --success: #16a34a;
  --radius: 18px;
}

.theme-shell {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -4%, rgba(245, 159, 10, 0.18), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(33, 88, 130, 0.38), transparent 42%),
    linear-gradient(150deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  min-height: 100vh;
}

.theme-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.45;
  z-index: -1;
}

.app-nav {
  background: linear-gradient(135deg, rgba(8, 16, 25, 0.95) 0%, rgba(21, 35, 48, 0.92) 100%) !important;
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 14px 34px rgba(2, 9, 15, 0.42) !important;
  backdrop-filter: blur(8px);
}

#nav-brand {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: clamp(1.65rem, 3.4vw, 2.05rem);
  color: #fef3c7;
  text-shadow: 0 0 22px rgba(250, 191, 72, 0.22);
}

#nav-role {
  background: rgba(245, 159, 10, 0.2) !important;
  color: #fde7bf !important;
  border: 1px solid rgba(245, 159, 10, 0.5);
}

.app-main {
  position: relative;
}

.app-view {
  animation: view-rise 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes view-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#view-login > div,
#view-session > div:nth-child(2),
#view-users > div:nth-child(2),
#view-change-password > div:nth-child(2),
#modal-add-user > div,
#modal-reset-pw > div,
#modal-edit-user > div {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(145deg, rgba(12, 23, 34, 0.96), rgba(5, 14, 22, 0.95)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.46) !important;
}

#view-login h2,
#view-dashboard h2,
#view-session h3,
#view-users h2,
#view-change-password h2,
#modal-add-user h3,
#modal-reset-pw h3 {
  color: #f6f8fb !important;
  letter-spacing: 0.015em;
}

label,
#view-session input[type='date'],
#sessions-empty,
#session-notes,
#view-session p,
#view-users table,
#view-change-password p,
#reset-pw-username {
  color: var(--muted) !important;
}

input,
select,
textarea {
  background: rgba(2, 10, 16, 0.84) !important;
  color: var(--text) !important;
  border: 1px solid rgba(176, 198, 224, 0.42) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: rgba(186, 204, 224, 0.88);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(252, 211, 77, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(245, 159, 10, 0.22) !important;
  background: rgba(6, 16, 24, 0.95) !important;
}

#session-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.035em;
  font-size: clamp(2rem, 3.2vw, 2.3rem) !important;
  color: #f5f9ff !important;
}

button {
  border-radius: 12px !important;
  border: 1px solid transparent;
  transition: transform 0.16s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-primary {
  background: linear-gradient(140deg, #f59f0a 0%, #ea7c13 100%) !important;
  color: #101826 !important;
  font-weight: 700 !important;
  border-color: rgba(255, 202, 96, 0.46);
}

.btn-secondary {
  background: rgba(42, 62, 82, 0.94) !important;
  color: #f0f6ff !important;
  border-color: rgba(188, 210, 234, 0.5);
}

.btn-danger {
  background: rgba(130, 24, 30, 0.74) !important;
  color: #ffe0e0 !important;
  border-color: rgba(253, 164, 175, 0.62) !important;
}

#btn-back-dashboard,
#btn-back-from-pw {
  color: #fbc55f !important;
}

#sessions-list {
  gap: 1rem;
}

#sessions-list > div {
  border: 1px solid rgba(174, 197, 223, 0.36) !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg, rgba(11, 22, 33, 0.97), rgba(18, 32, 45, 0.96)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

#sessions-list > div:hover {
  border-color: rgba(251, 191, 36, 0.54) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

#sessions-list h3,
#exercises-list h4 {
  color: #f6f9fc !important;
}

#sessions-list .text-blue-500,
#sessions-list .text-blue-800,
#sessions-list .text-blue-600,
#exercises-list .text-blue-800,
#users-list .text-blue-800,
#users-list .text-blue-600 {
  color: var(--accent-soft) !important;
}

#sessions-list .bg-blue-100,
#exercises-list .bg-blue-100,
#users-list .bg-blue-100 {
  background: rgba(245, 159, 10, 0.19) !important;
}

#sessions-list .text-gray-400,
#sessions-list .text-gray-500,
#sessions-list .text-gray-700,
#exercises-list .text-gray-500,
#exercises-list .text-gray-700,
#exercises-list .text-gray-400,
#users-list .text-gray-500,
#users-list .text-gray-400 {
  color: var(--muted) !important;
}

#exercises-list .bg-gray-50 {
  background: rgba(8, 18, 28, 0.88) !important;
}

#exercises-list .border-gray-100 {
  border-color: rgba(176, 198, 223, 0.34) !important;
}

#sessions-empty {
  border: 1px dashed rgba(190, 212, 236, 0.6);
  border-radius: var(--radius);
  background: rgba(14, 28, 42, 0.78);
}

#exercises-list > div {
  border: 1px solid rgba(176, 198, 223, 0.34) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(10, 21, 32, 0.97), rgba(18, 31, 44, 0.96)) !important;
}

#add-exercise-form,
#add-exercise-form + * {
  color: var(--text);
}

#view-session > div:last-child {
  border-radius: var(--radius) !important;
  border: 1px solid rgba(245, 159, 10, 0.35) !important;
  background: linear-gradient(152deg, rgba(60, 37, 5, 0.26), rgba(25, 17, 8, 0.5)) !important;
}

#view-users table,
#view-users thead,
#view-users tbody tr,
#users-list tr {
  background: transparent !important;
}

#view-users th,
#users-list td {
  border-color: rgba(186, 208, 233, 0.34) !important;
  color: #f0f6ff !important;
}

#view-users thead {
  border-bottom: 1px solid rgba(140, 160, 183, 0.3) !important;
}

#users-list tr:hover {
  background: rgba(29, 45, 62, 0.55) !important;
}

#users-list .text-red-600,
#users-list .text-red-900 {
  color: #fda4af !important;
}

#users-list .text-purple-600,
#users-list .text-purple-900 {
  color: #93c5fd !important;
}

#users-list .bg-yellow-100 {
  background: rgba(245, 159, 10, 0.2) !important;
}

#users-list .text-yellow-800 {
  color: #fdd58a !important;
}

#modal-add-user,
#modal-reset-pw,
#modal-edit-user {
  backdrop-filter: blur(5px);
  background: rgba(2, 8, 14, 0.58) !important;
}

#toast {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 34px rgba(2, 6, 11, 0.38);
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .app-main {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }

  #view-dashboard > div:first-child,
  #view-users > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  #view-dashboard > div:first-child > div {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #view-session > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  #nav-user-controls {
    gap: 0.45rem !important;
  }

  #nav-user-controls button {
    font-size: 0.78rem !important;
  }
}