/* Theme variables for dynamic branding */
:root {
  --brand: #293574;
  --brand-hover: #0878bd;
  --accent: #efaf33;
}

/* Prevent horizontal scroll on mobile */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* Ensure all elements respect viewport boundaries */
* {
  box-sizing: border-box;
}

/* Prevent any element from causing horizontal overflow */
body,
main,
section,
div,
header,
footer {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Page-specific hardening: ensure Employees page containers never overflow */
/* Generic hardening for any page that opts-in via body.table-safe */
body.table-safe main,
body.table-safe .bg-white.rounded-xl.shadow-md,
body.table-safe .table-responsive,
body.table-safe .table-responsive > table,
/* Existing Employees page */
body.employees-page main,
body.employees-page .bg-white.rounded-xl.shadow-md,
body.employees-page .table-responsive,
body.employees-page .table-responsive > table,
/* Notifications page */
body.notifications-page main,
body.notifications-page .bg-white.rounded-xl.shadow-md,
body.notifications-page .table-responsive,
body.notifications-page .table-responsive > table {
  max-width: 100%;
}

/* Ensure the table sits inside the card and scrolls internally */
body.table-safe .table-responsive.inset,
body.employees-page .table-responsive.inset,
body.notifications-page .table-responsive.inset {
  margin: 0 !important;
  padding: 0 !important;
}

[data-theme="dwp"] {
  --brand: #06bcb5;
  --brand-hover: #1749a0;
}

[data-theme="mns"] {
  --brand: #000000;
  --brand-hover: #1a1718;
}

[data-theme="abp"] {
  --brand: #113275;
  --brand-hover: #1a1718;
}

[data-theme="biffa"] {
  --brand: #e42313;
  --brand-hover: #1a1718;
}

[data-theme="cps"] {
  --brand: #005daa;
  --brand-hover: #1a1718;
}

[data-theme="asda"] {
  --brand: #78be20;
  --brand-hover: #1a1718;
}

[data-theme="nhsbt"] {
  --brand: #005eb8;
  --brand-hover: #1a1718;
}

[data-theme="rdash"] {
  --brand: #005eb8;
  --brand-hover: #1a1718;
}

[data-theme="edinburgh"] {
  --brand: #6D3465;
  --brand-hover: #1a1718;
}

[data-theme="glasgow-college"] {
  --brand: #80379B;
  --brand-hover: #1a1718;
}

[data-theme="dundee"] {
  --brand: #00607C;
  --brand-hover: #1a1718;
}

[data-theme="east-ayrshire"] {
  --brand: #00529B;
  --brand-hover: #1a1718;
}

[data-theme="fife"] {
  --brand: #00546E;
  --brand-hover: #1a1718;
}

[data-theme="glasgow"] {
  --brand: #0F4754;
  --brand-hover: #1a1718;
}

[data-theme="inverclyde"] {
  --brand: #36808C;
  --brand-hover: #1a1718;
}

[data-theme="north-ayrshire"] {
  --brand: #003D6D;
  --brand-hover: #1a1718;
}

[data-theme="renfrewshire"] {
  --brand: #D01778;
  --brand-hover: #1a1718;
}

[data-theme="sds"] {
  --brand: #005F72;
  --brand-hover: #1a1718;
}

[data-theme="south-ayrshire"] {
  --brand: #0033A0;
  --brand-hover: #1a1718;
}

[data-theme="south-lanarkshire"] {
  --brand: #35A1DF;
  --brand-hover: #1a1718;
}

[data-theme="west-dunbartonshire"] {
  --brand: #2A4682;
  --brand-hover: #1a1718;
}

[data-theme="coca-cola"] {
  --brand: #dc2626;
  --brand-hover: #1a1718;
}

/* Custom styles for animations and special effects */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Toast notification */
#toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #111;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease-out;
  z-index: 50;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Widget dragging states */
.widget {
  transition: all 0.2s ease;
}

.widget[draggable="true"] {
  cursor: grab;
}

.widget[draggable="true"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.widget.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Brand colour utilities that work with Tailwind */
.bg-brand {
  background-color: var(--brand);
}

.bg-brand-hover:hover {
  background-color: var(--brand-hover);
}

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

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

.hover\:bg-brand:hover {
  background-color: var(--brand);
}

.hover\:bg-brand-hover:hover {
  background-color: var(--brand-hover);
}

/* Smooth transitions for interactive elements */
button,
.btn,
a,
input,
select,
textarea {
  transition: all 0.2s ease;
}

/* Simple focus states - just change border color */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
}

/* Mobile menu styles */
.mobile-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: #4b5563;
  transition: all 0.2s ease;
}

.mobile-menu-button:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.mobile-menu-button:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.mobile-menu {
  display: none;
}

.mobile-menu.active {
  display: block;
}

@media (min-width: 768px) {
  .mobile-menu-button {
    display: none;
  }
}

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2rem;
  padding: 0 2rem;
}

/* Inset variant: keeps scroll area within its container (no negative margins) */
.table-responsive.inset {
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .table-responsive {
    margin: 0 -2rem;
    padding: 0 2rem;
  }

  .table-responsive.inset {
    margin: 0;
    padding: 0;
  }

  .table-responsive table {
    min-width: 600px;
  }

  .table-responsive.inset table {
    min-width: 600px;
  }
}

/* Final override to ensure inset tables never use negative margins,
   placed after other responsive table rules to win the cascade */
.table-responsive.inset {
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .table-responsive.inset {
    margin: 0;
    padding: 0;
  }
}

/* Reduce card padding on mobile for better content fit */
@media (max-width: 767px) {
  .bg-white.rounded-xl.shadow-md {
    padding: 1.5rem !important;
  }

  /* Adjust table responsive margins for mobile card padding */
  .table-responsive {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }

  /* Ensure form inputs don't overflow on mobile */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  select,
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Reduce heading sizes on mobile for better fit */
  h2 {
    font-size: 1.875rem;
  }

  /* Adjust main content padding on mobile */
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Ensure buttons don't overflow on mobile */
  button,
  .btn,
  a.inline-block {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Make grid layouts stack properly on mobile */
  .grid {
    gap: 1rem;
  }

  /* Form specific mobile improvements */
  .form-input {
    padding: 0.75rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .form-label {
    font-size: 0.875rem;
  }

  .form-container {
    padding: 1rem;
  }

  .form-title {
    font-size: 1.25rem;
  }

  .form-description {
    font-size: 0.875rem;
  }

  /* Progress indicator mobile improvements */
  .progress-container {
    padding: 1rem;
  }

  .progress-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Button improvements for mobile */
  .btn-mobile {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  /* Fix text truncation and overflow */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  p,
  span,
  div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Ensure buttons and links don't overflow */
  button,
  a,
  .btn {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Fix tab navigation overflow */
  .tab-button {
    white-space: nowrap;
    min-width: fit-content;
  }

  /* Ensure form inputs don't cause overflow */
  input,
  select,
  textarea {
    max-width: 100%;
    word-wrap: break-word;
  }

  /* Fix grid layouts on very small screens */
  .grid {
    grid-template-columns: 1fr;
  }

  /* Ensure all containers respect viewport width */
  .container,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-7xl {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Fix form card overflow on mobile */
  .stage-content .bg-white {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ensure form inputs don't cause overflow */
  .stage-content input[type="text"],
  .stage-content input[type="email"],
  .stage-content input[type="search"],
  .stage-content input[type="tel"],
  .stage-content input[type="date"],
  .stage-content input[type="password"],
  .stage-content select,
  .stage-content textarea {
    max-width: 100%;
    width: 100%;
  }

  /* Fix button stacking on mobile */
  .flex.flex-col.sm\\:flex-row {
    gap: 0.75rem;
  }

  .flex.flex-col.sm\\:flex-row button {
    width: 100%;
  }

  /* Ensure grid layouts work on mobile */
  .grid.grid-cols-1.sm\\:grid-cols-2 {
    gap: 1rem;
  }

  /* Fix textarea and input overflow */
  textarea,
  input[type="text"],
  input[type="email"],
  select {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Layout controls mobile improvements */
  .flex.flex-col.sm\\:flex-row {
    align-items: stretch;
  }

  .flex.flex-col.sm\\:flex-row button {
    min-height: 44px; /* iOS touch target minimum */
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* Ensure layout controls don't overflow on very small screens */
  .flex.flex-col.sm\\:flex-row {
    gap: 0.75rem;
  }

  /* Master Appointments table mobile improvements */
  .table-responsive {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }

  .table-responsive table {
    min-width: 700px; /* Ensure table has enough width for all columns */
  }

  /* Pagination controls mobile improvements */
  .flex.flex-col.sm\\:flex-row.justify-between {
    gap: 1rem;
  }

  /* Ensure pagination buttons have proper touch targets */
  .min-w-\[32px\] {
    min-width: 32px;
    height: 32px;
  }

  /* Make select dropdowns mobile-friendly */
  select {
    font-size: 14px;
    min-height: 44px; /* iOS touch target */
  }

  /* Ensure table cells don't wrap unnecessarily */
  .whitespace-nowrap {
    white-space: nowrap;
  }
}

/* Hard stop: ensure inset variant never uses negative margins anywhere */
.table-responsive.inset {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .table-responsive.inset {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Hide scrollbar for mobile tabs */
.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Accessibility improvements */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus indicators for keyboard navigation */
.keyboard-navigation *:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.keyboard-navigation button:focus,
.keyboard-navigation a:focus,
.keyboard-navigation input:focus,
.keyboard-navigation select:focus,
.keyboard-navigation textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Enhanced focus states for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}

/* Back to top button animations */
#back-to-top {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#back-to-top:active {
  transform: translateY(0);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-brand {
    background-color: #000;
  }

  .text-brand {
    color: #000;
  }

  .border-brand {
    border-color: #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #back-to-top {
    transition: opacity 0.3s ease;
  }
}

/* Mobile dashboard button styles */
#mobile-dashboard-button {
  display: none;
}

@media (max-width: 767px) {
  #mobile-dashboard-button {
    display: flex;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  /* Ensure back to top button is easily tappable on mobile - positioned above dashboard button */
  #back-to-top {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem;
    min-height: 48px;
    min-width: 48px;
  }

  button,
  a,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Focus trap for modals and overlays */
.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ARIA live region for announcements */
.aria-live {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Improved form accessibility */
label {
  cursor: pointer;
}

/* Ensure form controls are properly labeled */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 44px;
}

/* Better error state styling */
.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626;
}

.error:focus {
  outline-color: #dc2626;
}

/* Success state styling */
.success {
  border-color: #059669;
  box-shadow: 0 0 0 1px #059669;
}

.success:focus {
  outline-color: #059669;
}