.email-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.email-modal-content {
  max-width: 500px;
  width: 90%;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow-y: auto;
}

.email-verification-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
}

.email-verification-description {
  color: #666;
  margin-bottom: 1.5rem;
  text-align: center;
  line-height: 1.5;
}

.verification-code-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

.verification-code-input:focus {
  outline: none;
  border-color: #007bff;
}

.verification-code-input:disabled {
  background-color: #f8f9fa;
  opacity: 0.6;
}

.verification-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
}

.verification-buttons {
  display: flex;
  gap: 0.75rem;
}

.verify-button {
  flex: 1;
  background: #007bff;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.verify-button:hover:not(:disabled) {
  background: #0056b3;
}

.verify-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cancel-button {
  padding: 0.75rem 1rem;
  border: 2px solid #6c757d;
  background: transparent;
  color: #6c757d;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-button:hover:not(:disabled) {
  background: #f8f9fa;
}
.error-boundary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 20px;
}

.error-content {
  text-align: center;
  max-width: 500px;
  padding: 30px;
  border: 1px solid #dc3545;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.error-content h2 {
  color: #dc3545;
  margin-bottom: 15px;
}

.error-content p {
  margin-bottom: 20px;
  color: #6c757d;
}

.error-content button {
  margin: 0 10px;
}
/* Authentication page styles */
.auth-page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.auth-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.clear-session-btn {
  font-size: 12px;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.clear-session-btn:hover {
  background-color: #e0e0e0;
}

/* Set default country code to UK (+44) */
[data-amplify-authenticator] [data-amplify-phone-number-field] select {
  /* This targets the country code dropdown */
}

[data-amplify-authenticator] [data-amplify-phone-number-field] input[type="tel"] {
  /* Ensure UK format is shown */
}
/* Landing page user roles styling */
.role-card {
  text-align: center;
}

.role-card h3 {
  text-align: center;
}

.role-card p {
  text-align: center;
}

.role-card ul {
  text-align: center;
  list-style: none;
  padding: 0;
}

.role-card li {
  text-align: center;
}

/* Sign in section styling */
.signin-section {
  text-align: center;
  margin-top: 40px;
  padding: 30px;
  background-color: #e8d5f0;
  border-radius: 8px;
  border: 1px solid #d1a7dd;
}

.signin-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.signin-section p {
  margin-bottom: 20px;
  color: #666;
}

.signin-btn {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  display: block;
  margin: 0 auto;
}

.signin-btn:hover {
  background-color: #5a6268;
}

/* Indented list styling */
.indented-list {
  margin-left: 30px;
  padding-left: 20px;
}

/* Center main headings */
.landing-content h1,
.landing-content h2 {
  text-align: center;
}

/* Landing subtitle styling */
.landing-subtitle {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

/* Center landing page buttons */
.get-started-btn,
.signin-btn {
  display: block !important;
  margin: 20px auto !important;
}

.cta-section {
  text-align: center;
}

.signin-section {
  text-align: center;
}

/* Contact page styling */
.contact-page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #000;
}

.contact-info {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.contact-info-title {
  color: #000;
}

.contact-info-text {
  color: #000;
}

.contact-info-text a {
  color: #007bff;
  text-decoration: underline;
}

.contact-info-text a:hover {
  color: #0056b3;
}

/* Contact form labels */
.contact-form label {
  color: #000 !important;
}

.contact-form .form-group label {
  color: #000 !important;
}

/* Knowledge base content styling */
.knowledge-base-content {
  color: #000;
}

/* Landing page menu button */
.landing-menu-wrapper {
  position: relative;
}

.landing-menu-button-container {
  position: fixed;
  top: min(40px, 5vw);
  left: min(60px, 8vw);
  z-index: 1000;
}

.landing-menu-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.landing-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: min(220px, 85vw);
  max-width: 90vw;
  z-index: 1001;
}

.landing-menu-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  display: block;
}

.landing-menu-item:hover {
  background-color: #f8f9fa;
}

/* Landing page logo container */
.landing-logo-container {
  text-align: center;
}

.landing-logo-wrapper {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid black;
  display: inline-block;
  margin-bottom: 40px;
}

.landing-logo {
  height: 400px;
  display: block;
  max-width: 90vw;
  object-fit: contain;
}

/* Landing page content sections */
.landing-section {
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
}

.landing-section-light {
  background-color: #f8f9fa;
}

.landing-section-yellow {
  background-color: #fffacd;
}

.landing-section-blue {
  background-color: #e7f3ff;
}

.landing-section-center {
  text-align: center;
  margin: 30px 0;
  padding: 20px;
}

/* Business types grid */
.business-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
  margin: 20px 0;
}

.business-type-card {
  padding: 15px;
  background-color: white;
  border-radius: 8px;
}

.business-type-card h4 {
  margin-top: 0;
}

.business-type-card p {
  margin-bottom: 0;
}

/* Sign up section */
.signup-section {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  margin: 40px 0 20px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .landing-logo {
    height: 300px;
  }
  
  .landing-menu-button-container {
    top: 20px;
    left: 20px;
  }
  
  .landing-section {
    padding: 15px;
  }
  
  .business-types-grid {
    gap: 15px;
  }
  
  .business-type-card {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .landing-logo {
    height: 250px;
  }
  
  .landing-logo-wrapper {
    padding: 15px;
  }
  
  .landing-section {
    padding: 12px;
  }
  
  .business-types-grid {
    gap: 12px;
  }
  
  .business-type-card {
    padding: 10px;
  }
}
/* Responsive Design for All Viewports */

/* Base responsive styles */
* {
  box-sizing: border-box;
}

/* Landing page content responsive */
.landing-content {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive typography */
@media (max-width: 768px) {
  .landing-content {
    padding: 0 15px;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
  
  h4 {
    font-size: 1.1rem;
  }
  
  p, li {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .landing-content {
    padding: 0 10px;
  }
  
  h1 {
    font-size: 1.6rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.2rem;
  }
  
  h4 {
    font-size: 1rem;
  }
  
  p, li {
    font-size: 0.9rem;
  }
}

/* Responsive buttons */
.btn {
  min-height: 44px;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }
}

/* Responsive grids */
.responsive-grid {
  display: grid;
  gap: 20px;
  margin: 20px 0;
}

.responsive-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.responsive-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (max-width: 768px) {
  .responsive-grid {
    gap: 15px;
    margin: 15px 0;
  }
  
  .responsive-grid-2,
  .responsive-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Responsive cards */
.card {
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  .card {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 12px;
  }
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive tables */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }
  
  th, td {
    padding: 6px 4px;
  }
}

/* Responsive navigation */
@media (max-width: 768px) {
  .hamburger-menu {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
  }
}

/* Responsive footer */
.app-footer {
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .app-footer {
    padding: 15px 10px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 10px;
  }
}

/* Responsive spacing */
@media (max-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .section {
    margin-bottom: 20px;
  }
}

/* Responsive text alignment */
@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center;
  }
}

/* Responsive containers - padding only, max-width handled in App.css */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 10px;
  }
}
.business-continuity-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
  color: #2c3e50;
}

.business-continuity-page h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2.2em;
}

.continuity-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #007bff;
}

.continuity-section h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.4em;
}

.continuity-section ul {
  margin: 0;
  padding-left: 20px;
}

.continuity-section li {
  margin-bottom: 8px;
  color: #2c3e50;
}

.continuity-section strong {
  color: #007bff;
}

.status-section {
  background: #e8f5e8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #28a745;
  text-align: center;
}

.status-section h2 {
  color: #155724;
  margin-bottom: 15px;
}

.status-section p {
  color: #155724;
}

.status-section a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.status-section a:hover {
  text-decoration: underline;
}

.contact-section {
  background: #fff3cd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #ffc107;
  text-align: center;
}

.contact-section h2 {
  color: #856404;
  margin-bottom: 15px;
}

.contact-section p {
  color: #856404;
}

.contact-section a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.contact-section a:hover {
  text-decoration: underline;
}

.back-link {
  text-align: center;
  margin-top: 30px;
}

.back-link a {
  color: #007bff;
  text-decoration: none;
  font-size: 1.1em;
}

.back-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .business-continuity-page {
    padding: 15px;
  }
  
  .business-continuity-page h1 {
    font-size: 1.8em;
  }
  
  .continuity-section {
    padding: 15px;
  }
}
.instructions-toggle {
  margin-bottom: 20px;
}

.toggle-button {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9em;
}

.toggle-button:hover {
  color: #0056b3;
}
.media-preview-container {
  margin-top: 10px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.media-item {
  position: relative;
}

.media-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 12px;
}

.remove-button:hover {
  background: rgba(255, 0, 0, 0.9);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .media-image {
    height: 120px;
  }
  
  .remove-button {
    width: 30px;
    height: 30px;
    font-size: 14px;
    top: 3px;
    right: 3px;
  }
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
  }
  
  .media-image {
    height: 100px;
  }
  
  .remove-button {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
  }
  
  .media-image {
    height: 80px;
  }
  
  .remove-button {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}
.paypal-billing-notice {
  background-color: #ff0000;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #cc0000;
  margin-bottom: 20px;
}

.paypal-billing-notice strong,
.paypal-billing-notice span {
  color: #000000;
}

.trial-status {
  background-color: #e8f5e8;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #4caf50;
  margin-bottom: 20px;
  text-align: center;
}

.trial-status h2 {
  color: #2e7d32;
  margin-bottom: 10px;
}

.trial-warning {
  background-color: #fff3cd;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ffc107;
  margin-top: 15px;
}

.trial-warning p {
  color: #856404;
  margin: 0;
}

.trial-expired {
  background-color: #f8d7da;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dc3545;
  margin-bottom: 20px;
  text-align: center;
}

.trial-expired h2 {
  color: #721c24;
  margin-bottom: 10px;
}

.trial-expired p {
  color: #721c24;
}

.epos-addon-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

.epos-addon-section h2 {
  color: #1976d2;
  margin-bottom: 10px;
}

.epos-addon-section > p {
  color: #666;
  margin-bottom: 20px;
  font-size: 16px;
}
/* Component-specific button disabled styles */
button:disabled,
.btn:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
}
@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-month-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  -ms-flex-preferred-size: 0 px;
      flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rbc-time-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}
.rbc-addons-dnd .rbc-addons-dnd-row-body {
  position: relative;
}
.rbc-addons-dnd .rbc-addons-dnd-drag-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-over {
  background-color: rgba(0, 0, 0, 0.3);
}
.rbc-addons-dnd .rbc-event {
  transition: opacity 150ms;
}
.rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
  display: block;
}
.rbc-addons-dnd .rbc-addons-dnd-dragged-event {
  opacity: 0;
}
.rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
  opacity: 0.5;
}
.rbc-addons-dnd .rbc-addons-dnd-resizable {
  position: relative;
  width: 100%;
  height: 100%;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
  width: 100%;
  text-align: center;
  position: absolute;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
  top: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
  bottom: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
  display: none;
  border-top: 3px double;
  margin: 0 auto;
  width: 10px;
  cursor: ns-resize;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
  position: absolute;
  top: 4px;
  bottom: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
  left: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
  right: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
  display: none;
  border-left: 3px double;
  margin-top: auto;
  margin-bottom: auto;
  height: 10px;
  cursor: ew-resize;
}

.booking-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 10px;
}

.booking-form-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Mobile responsive for booking form */
@media (max-width: 768px) {
  .booking-form-container {
    padding: 15px;
    max-width: 95%;
    max-height: 95vh;
  }
  
  .booking-form-container h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  
  .form-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-buttons button {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .booking-form-overlay {
    padding: 5px;
  }
  
  .booking-form-container {
    padding: 10px;
    border-radius: 4px;
  }
  
  .booking-form-container h3 {
    font-size: 16px;
  }
}

.booking-instructions {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}

.booking-instructions h3 {
  margin-top: 0;
  color: #333;
}

.booking-instructions ul {
  margin: 10px 0;
  padding-left: 20px;
}

.booking-instructions li {
  margin: 5px 0;
  color: #666;
}

.form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Calendar customization */
.rbc-calendar {
  font-family: inherit;
}

.rbc-event {
  background-color: #3174ad;
  border: none;
  border-radius: 3px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 4px;
  min-height: 20px;
}

.rbc-event-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rbc-event:focus {
  outline: 2px solid #3174ad;
}

.rbc-selected {
  background-color: #265985;
}

/* Selected day highlighting */
.rbc-date-cell.rbc-selected {
  background-color: #2c3e50 !important;
}

.rbc-month-view .rbc-date-cell.rbc-selected {
  background-color: #2c3e50 !important;
}

.rbc-today {
  background-color: #2c3e50;
  color: white;
}

.rbc-off-range-bg {
  background-color: #f7f7f7;
}



/* Time format in 24-hour - match month font styling */
.rbc-time-header-gutter,
.rbc-time-gutter {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.rbc-time-slot {
  border-top: 1px solid #ddd;
}

/* Improve readability of event text */
.rbc-event-label {
  font-weight: bold;
  font-size: 10px;
}

/* Stack overlapping events vertically instead of side by side */
.rbc-addons-dnd .rbc-addons-dnd-drag-preview {
  z-index: 999;
}

/* Drag and drop styling */
.rbc-addons-dnd-drag-preview {
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.rbc-addons-dnd-dragging {
  opacity: 0.5;
}

.rbc-addons-dnd-resizing {
  opacity: 0.8;
}

.rbc-event:hover {
  cursor: move;
  opacity: 0.9;
}

.rbc-event .rbc-addons-dnd-resize-ns-anchor {
  cursor: ns-resize;
}

.rbc-event .rbc-addons-dnd-resize-ew-anchor {
  cursor: ew-resize;
}

/* Booking status colors */
.booking-status-pending {
  background-color: #3174ad !important;
  color: white !important;
}

.booking-status-in_progress {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.booking-status-notified {
  background-color: #17a2b8 !important;
  color: white !important;
}

.booking-status-completed {
  background-color: #6c757d !important;
  color: white !important;
}

.booking-status-cancelled {
  background-color: #dc3545 !important;
  color: white !important;
}

.booking-status-handed_in {
  background-color: #28a745 !important;
  color: white !important;
}

.booking-status-paid_in_full {
  background-color: #6f42c1 !important;
  color: white !important;
}

.booking-status-partially_paid {
  background-color: #ffc0cb !important;
  color: #000 !important;
}

/* Split gradient for partially paid */
.booking-split-partially_paid.booking-work-pending        { background: linear-gradient(to right, #3174ad 50%, #ffc0cb 50%) !important; color: white !important; }
.booking-split-partially_paid.booking-work-handed_in      { background: linear-gradient(to right, #28a745 50%, #ffc0cb 50%) !important; color: white !important; }
.booking-split-partially_paid.booking-work-in_progress    { background: linear-gradient(to right, #ffc107 50%, #ffc0cb 50%) !important; color: #000 !important; }
.booking-split-partially_paid.booking-work-notified       { background: linear-gradient(to right, #17a2b8 50%, #ffc0cb 50%) !important; color: white !important; }
.booking-split-partially_paid.booking-work-completed      { background: linear-gradient(to right, #6c757d 50%, #ffc0cb 50%) !important; color: white !important; }
.booking-split-partially_paid.booking-work-cancelled      { background: linear-gradient(to right, #dc3545 50%, #ffc0cb 50%) !important; color: white !important; }
/* Fallback if workStatus missing */
.booking-split-partially_paid                             { background-color: #ffc0cb !important; color: #000 !important; }

/* Split gradient for paid in full */
.booking-split-paid_in_full.booking-work-pending          { background: linear-gradient(to right, #3174ad 50%, #6f42c1 50%) !important; color: white !important; }
.booking-split-paid_in_full.booking-work-handed_in        { background: linear-gradient(to right, #28a745 50%, #6f42c1 50%) !important; color: white !important; }
.booking-split-paid_in_full.booking-work-in_progress      { background: linear-gradient(to right, #ffc107 50%, #6f42c1 50%) !important; color: white !important; }
.booking-split-paid_in_full.booking-work-notified         { background: linear-gradient(to right, #17a2b8 50%, #6f42c1 50%) !important; color: white !important; }
.booking-split-paid_in_full.booking-work-completed        { background: linear-gradient(to right, #6c757d 50%, #6f42c1 50%) !important; color: white !important; }
.booking-split-paid_in_full.booking-work-cancelled        { background: linear-gradient(to right, #dc3545 50%, #6f42c1 50%) !important; color: white !important; }
/* Fallback if workStatus missing */
.booking-split-paid_in_full                               { background-color: #6f42c1 !important; color: white !important; }

/* UK Holiday styling */
.uk-holiday-event {
  background-color: #dc3545 !important;
  color: white !important;
  font-weight: bold !important;
  border: 2px solid #a71e2a !important;
}

.uk-holiday-event .rbc-event-content {
  font-size: 12px !important;
  text-align: center !important;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  .rbc-calendar {
    font-size: 12px;
  }
  
  .rbc-event {
    font-size: 10px;
    padding: 1px 2px;
    min-height: 15px;
  }
  
  .rbc-time-header {
    font-size: 11px;
  }
  
  .rbc-time-gutter {
    font-size: 10px;
    width: 50px;
  }
  
  .rbc-toolbar {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
  }
  
  .rbc-toolbar button {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 40px;
    margin: 2px;
  }
  
  .rbc-toolbar-label {
    font-size: 16px;
    margin: 8px 0;
    text-align: center;
    width: 100%;
  }
  
  .rbc-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
}

/* Calendar container responsive sizing */
.calendar-container {
  height: 600px;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .calendar-container {
    height: 500px;
    margin: 15px 0;
  }
}

@media (max-width: 480px) {
  .calendar-container {
    height: 450px;
    margin: 10px 0;
  }
  
  .rbc-calendar {
    font-size: 11px;
  }
  
  .rbc-event {
    font-size: 9px;
    padding: 2px;
    min-height: 14px;
  }
  
  .rbc-time-gutter {
    width: 45px;
    font-size: 10px;
  }
  
  .rbc-toolbar button {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 36px;
  }
  
  .rbc-toolbar-label {
    font-size: 14px;
  }
  
  .booking-form-container {
    padding: 12px;
    max-width: 98%;
  }
  
  .form-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-buttons button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
}
.super-admin-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.warning-banner {
  background: #dc3545;
  color: white;
  padding: 15px 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 30px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.login-container {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 400px;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}

.login-container p {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid #f5c6cb;
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid #c3e6cb;
}

.forgot-password-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.3s;
}

.forgot-password-btn:hover {
  background: #007bff;
  color: white;
}

.clear-sessions-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s;
}

.clear-sessions-btn:hover {
  background: #dc3545;
  color: white;
}

button[type="submit"] {
  width: 100%;
  padding: 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

button[type="submit"]:hover:not(:disabled) {
  background: #0056b3;
}

button[type="submit"]:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.back-btn {
  width: 100%;
  padding: 10px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background: #545b62;
}

.security-notice {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

@media (max-width: 480px) {
  .login-container {
    padding: 30px 20px;
  }
  
  .warning-banner {
    padding: 10px 20px;
    font-size: 14px;
  }
}
.super-admin-dashboard {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 0;
}

.super-admin-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: #666;
}

.admin-header {
  background: #1a1a1a;
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-left h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.admin-user {
  font-size: 14px;
  color: #ccc;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.session-timer {
  background: #dc3545;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
}

.logout-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.logout-btn:hover {
  background: #5a6268;
}

.help-btn {
  background: #ff9900;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.help-btn:hover {
  background: #e68a00;
}

.warning-banner {
  background: #dc3545;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}

.organization-search {
  background: white;
  margin: 20px 30px;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #ffc107;
}

.organization-search h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.search-container {
  position: relative;
}

.org-search-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.org-search-input:focus {
  border-color: #007bff;
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dropdown-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background: #f8f9fa;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.org-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.org-email {
  color: #666;
  font-size: 14px;
  margin-bottom: 3px;
}

.org-status {
  color: #28a745;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

.password-reset-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.modal-content input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.modal-content button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.modal-content button[type="submit"] {
  background: #007bff;
  color: white;
}

.close-btn {
  background: #6c757d;
  color: white;
}

.reset-message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  background: #d4edda;
  color: #155724;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  border-left: 4px solid #007bff;
}

.stat-card h3 {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-number {
  font-size: 48px;
  font-weight: bold;
  color: #007bff;
  margin: 0;
}

.admin-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 30px 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-section {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-top: 4px solid #28a745;
}

.admin-section h2 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 20px;
}

.admin-section p {
  color: #666;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.admin-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.admin-btn:hover {
  background: #0056b3;
}

.emergency-btn {
  background: #dc3545 !important;
}

.emergency-btn:hover {
  background: #c82333 !important;
}

.emergency-btn:disabled {
  background: #6c757d !important;
  cursor: not-allowed;
}

.download-btn {
  background: #17a2b8 !important;
}

.download-btn:hover {
  background: #138496 !important;
}

.download-btn:disabled {
  background: #6c757d !important;
  cursor: not-allowed;
}

.emergency-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.emergency-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  color: #856404;
  font-weight: 500;
  text-align: center;
}

/* Audit Table Styles */
.audit-logs-section {
  background: white;
  margin: 20px 30px;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #dc3545;
}

.audit-logs-section h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.audit-logs-table {
  overflow-x: auto;
  margin-top: 20px;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: white;
}

.audit-table thead tr {
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.audit-table th {
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #495057;
  border-right: 1px solid #dee2e6;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.audit-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  font-size: 11px;
  color: #495057;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 200px;
}

.audit-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.audit-row:hover {
  background-color: #f8f9fa;
}

.audit-row:active {
  background-color: #e9ecef;
}

/* Column widths */
.col-datetime { width: 12%; }
.col-admin { width: 15%; }
.col-action { width: 10%; }
.col-org { width: 15%; }
.col-email { width: 15%; }
.col-auth { width: 13%; }
.col-authorization { width: 20%; }

.action-badge {
  padding: 2px 6px;
  background-color: #e3f2fd;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  color: #1976d2;
  display: inline-block;
}

/* Audit Modal Styles */
.audit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.audit-modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.audit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
}

.audit-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.audit-modal-header .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.audit-modal-header .close-btn:hover {
  background-color: #e9ecef;
  color: #495057;
}

.audit-details-grid {
  padding: 25px;
  display: grid;
  gap: 20px;
}

.audit-detail-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px;
  align-items: start;
}

.audit-detail-item.authorization-item {
  grid-template-columns: 150px 1fr;
}

.audit-detail-item label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  padding-top: 2px;
}

.detail-value {
  background: #f8f9fa;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  font-size: 13px;
  color: #495057;
  word-wrap: break-word;
}

.authorization-content {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.4;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

/* Subscription Stats Styles */
.subscription-stats {
  background: white;
  margin: 20px 30px;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #28a745;
}

.subscription-stats h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.subscription-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #dee2e6;
}

.subscription-card h4 {
  margin: 0 0 10px 0;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.sub-count {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 5px;
}

.sub-price {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.revenue-card {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  grid-column: span 2;
}

.revenue-card h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
}

.revenue-amount {
  font-size: 32px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .header-right {
    flex-direction: column;
    gap: 10px;
  }
  
  .stats-grid,
  .admin-sections {
    padding: 20px;
    grid-template-columns: 1fr;
  }
  
  .stat-card,
  .admin-section {
    padding: 20px;
  }
  
  .stat-number {
    font-size: 36px;
  }
  
  .audit-logs-section {
    margin: 20px;
    padding: 20px;
  }
  
  .audit-table th,
  .audit-table td {
    padding: 8px 4px;
    font-size: 10px;
  }
  
  .audit-modal {
    padding: 10px;
  }
  
  .audit-modal-content {
    max-height: 95vh;
  }
  
  .audit-details-grid {
    padding: 20px;
  }
  
  .audit-detail-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .audit-detail-item.authorization-item {
    grid-template-columns: 1fr;
  }
  
  .subscription-stats {
    margin: 20px;
    padding: 20px;
  }
  
  .subscription-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  
  .revenue-card {
    grid-column: span 1;
  }
}

.email-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.email-preview {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.email-preview h4 {
  margin: 0 0 10px 0;
  color: #495057;
}

.email-content {
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
}

.email-body {
  line-height: 1.6;
}

.user-message {
  background-color: #fff3cd;
  border: 1px dashed #ffc107;
  padding: 10px;
  border-radius: 4px;
  font-style: italic;
  min-height: 40px;
}

/* Embedded Status Section */
.embedded-status-section {
  background: white;
  margin: 20px 30px;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #17a2b8;
  scroll-margin-top: 20px; /* Offset for smooth scrolling */
}

.embedded-status-section .status-page {
  margin: 0;
  padding: 0;
  background: transparent;
}

.embedded-status-section .status-header {
  margin-bottom: 20px;
}

.embedded-status-section .status-header h1 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 24px;
}
.status-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.back-button {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: background-color 0.2s;
}

.back-button:hover {
  background: #e5e7eb;
}

.status-header {
  text-align: center;
  margin-bottom: 3rem;
}

.status-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.overall-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.service-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 1.1rem;
}

.service-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-footer {
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .status-page {
    padding: 1rem;
  }
  
  .status-header h1 {
    font-size: 2rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
}
.create-dsr-modal {
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.dsr-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.form-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.request-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.request-type-card {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.request-type-card:hover {
  border-color: #3498db;
  background: #f0f8ff;
}

.request-type-card.selected {
  border-color: #2ecc71;
  background: #e8f8f5;
}

.request-type-card input[type="radio"] {
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.request-type-content {
  flex: 1;
}

.request-type-content strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 4px;
  font-size: 14px;
}

.request-type-content p {
  margin: 0;
  color: #7f8c8d;
  font-size: 13px;
  line-height: 1.4;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.data-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox-label:hover {
  background: #f8f9fa;
  border-color: #3498db;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 14px;
  color: #2c3e50;
  text-transform: capitalize;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.alert-error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.alert-success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.btn-primary,
.btn-secondary {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #2ecc71;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #27ae60;
}

.btn-primary:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #ecf0f1;
  color: #2c3e50;
}

.btn-secondary:hover:not(:disabled) {
  background: #bdc3c7;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .create-dsr-modal {
    max-width: 95%;
    margin: 20px auto;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .request-type-grid {
    grid-template-columns: 1fr;
  }

  .data-categories-grid {
    grid-template-columns: 1fr;
  }
}

.upload-identity-modal {
  max-width: 600px;
}

.upload-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-box {
  background: #e8f4f8;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #3498db;
}

.info-box p {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
}

.info-box ul {
  margin: 8px 0;
  padding-left: 24px;
  color: #2c3e50;
  font-size: 14px;
}

.info-box li {
  margin-bottom: 4px;
}

.file-requirements {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid #3498db;
  font-size: 13px !important;
  color: #555 !important;
}

.file-upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  transition: all 0.2s;
  background: #fafafa;
}

.file-upload-area:hover {
  border-color: #3498db;
  background: #f0f8ff;
}

.file-upload-label {
  display: block;
  cursor: pointer;
}

.file-upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.file-upload-prompt p {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 500;
}

.upload-hint {
  font-size: 14px !important;
  color: #7f8c8d !important;
  font-weight: 400 !important;
}

.file-selected {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.file-icon {
  font-size: 48px;
}

.file-info {
  flex: 1;
  text-align: left;
}

.file-name {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 4px;
  word-break: break-word;
}

.file-size {
  color: #7f8c8d;
  font-size: 13px;
}

.file-preview {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.file-preview h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
}

.file-preview img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid #ddd;
  display: block;
  margin: 0 auto;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.alert-error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.alert-success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

@media (max-width: 768px) {
  .upload-identity-modal {
    max-width: 95%;
    margin: 20px auto;
  }

  .file-upload-area {
    padding: 24px 16px;
  }
}

.update-dsr-modal {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.update-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.form-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

@media (max-width: 768px) {
  .update-dsr-modal {
    max-width: 95%;
    margin: 20px auto;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.dsr-detail-modal {
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
}

.status-banner {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-banner.pending {
  background: #fff3cd;
  border: 2px solid #ffc107;
}

.status-banner.in_progress {
  background: #d1ecf1;
  border: 2px solid #17a2b8;
}

.status-banner.completed {
  background: #d4edda;
  border: 2px solid #28a745;
}

.status-banner.rejected {
  background: #f8d7da;
  border: 2px solid #dc3545;
}

.status-banner.overdue {
  background: #f8d7da;
  border: 2px solid #dc3545;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: #dc3545; }
  50% { border-color: #ff6b6b; }
}

.status-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.overdue-warning {
  color: #721c24;
  font-weight: 600;
  font-size: 14px;
}

.days-remaining {
  color: #155724;
  font-weight: 600;
  font-size: 14px;
}

.days-remaining.warning {
  color: #856404;
}

.dsr-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 2px solid #e0e0e0;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: 600;
  color: #555;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  color: #2c3e50;
  font-size: 14px;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.detail-value.code {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #f0f0f0;
  word-break: break-all;
}

.detail-value.text-block {
  white-space: pre-wrap;
  line-height: 1.6;
}

.detail-value.internal {
  background: #fff3cd;
  border-color: #ffc107;
}

.verification-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.verification-badge.verified {
  background: #d4edda;
  color: #155724;
}

.verification-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.verification-badge.failed {
  background: #f8d7da;
  color: #721c24;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-tag {
  padding: 6px 12px;
  background: #e8f4f8;
  color: #2c3e50;
  border-radius: 16px;
  font-size: 13px;
  text-transform: capitalize;
}

.communication-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-left: 32px;
}

.communication-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
}

.timeline-marker {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: #3498db;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #3498db;
}

.timeline-content {
  flex: 1;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.timeline-type {
  font-weight: 600;
  color: #2c3e50;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-date {
  color: #7f8c8d;
  font-size: 12px;
}

.timeline-message {
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.timeline-sender {
  color: #7f8c8d;
  font-size: 12px;
  font-style: italic;
}

.upload-prompt {
  margin-top: 16px;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  text-align: center;
}

.btn-upload {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-upload:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.proof-uploaded-notice {
  margin-top: 16px;
  padding: 12px 16px;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
}

/* Process DSR Actions */
.process-dsr-actions {
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border: 2px solid #3498db;
  border-radius: 8px;
}

.process-dsr-actions h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.process-warning {
  margin: 0 0 16px 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-process-export,
.btn-process-delete {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-process-export {
  background: #28a745;
  color: white;
}

.btn-process-export:hover:not(:disabled) {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-process-delete {
  background: #dc3545;
  color: white;
}

.btn-process-delete:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-process-export:disabled,
.btn-process-delete:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.alert.alert-warning {
  padding: 12px 16px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.alert.alert-error {
  padding: 12px 16px;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #dc3545;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .dsr-detail-modal {
    max-width: 95%;
    margin: 20px auto;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .status-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.dsr-dashboard {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #e0e0e0;
}

.dashboard-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 28px;
}

.dashboard-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
}

.btn-create-dsr {
  padding: 12px 24px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.2);
}

.btn-create-dsr:hover {
  background: #27ae60;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.dsr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  transition: all 0.2s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card.pending {
  border-color: #f39c12;
}

.stat-card.in-progress {
  border-color: #3498db;
}

.stat-card.overdue {
  border-color: #e74c3c;
}

.stat-card.completed {
  border-color: #2ecc71;
}

.stat-icon {
  font-size: 48px;
  line-height: 1;
}

.stat-content {
  flex: 1;
}

.stat-content h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-number {
  margin: 0 0 4px 0;
  color: #2c3e50;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  margin: 0;
  color: #7f8c8d;
  font-size: 13px;
}

.dsr-info-panel {
  background: white;
  padding: 32px;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
}

.dsr-info-panel h2 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 24px;
}

.dsr-info-panel > p {
  margin: 0 0 32px 0;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.info-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.info-card h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.info-card p {
  margin: 0 0 12px 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.info-card ul {
  margin: 0;
  padding-left: 20px;
  color: #555;
  font-size: 14px;
  line-height: 1.8;
}

.info-card li {
  margin-bottom: 4px;
}

.next-steps {
  padding: 24px;
  background: #e8f8f5;
  border-radius: 8px;
  border: 2px solid #2ecc71;
}

.next-steps h3 {
  margin: 0 0 12px 0;
  color: #27ae60;
  font-size: 18px;
  font-weight: 600;
}

.next-steps p {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 14px;
}

.next-steps ul {
  margin: 0;
  padding-left: 20px;
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.8;
}

.next-steps li {
  margin-bottom: 6px;
}

/* DSR List Section */
.dsr-list-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  margin-top: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
}

.list-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 20px;
}

.filter-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.status-filter {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.btn-refresh {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-refresh:hover:not(:disabled) {
  background: #2980b9;
}

.btn-refresh:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 20px;
}

.empty-state p {
  margin: 0 0 20px 0;
  color: #7f8c8d;
}

.btn-clear-filter {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.dsr-table-container {
  overflow-x: auto;
}

.dsr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dsr-table thead {
  background: #f8f9fa;
}

.dsr-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
}

.dsr-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.dsr-table tbody tr {
  transition: background 0.2s;
  cursor: pointer;
}

.dsr-table tbody tr:hover {
  background: #f8f9fa;
}

.dsr-table tbody tr.row-overdue {
  background: #fee;
}

.dsr-table tbody tr.row-overdue:hover {
  background: #fdd;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.in-progress {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.completed {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.overdue {
  background: #f8d7da;
  color: #721c24;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.request-type-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e8f4f8;
  color: #2c3e50;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.user-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-email {
  font-weight: 500;
  color: #2c3e50;
}

.user-name {
  font-size: 12px;
  color: #7f8c8d;
}

.days-overdue {
  color: #e74c3c;
  font-weight: 600;
}

.days-warning {
  color: #f39c12;
  font-weight: 600;
}

.days-ok {
  color: #27ae60;
}

.priority-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.priority-badge.priority-low {
  background: #e8f8f5;
  color: #27ae60;
}

.priority-badge.priority-normal {
  background: #e8f4f8;
  color: #3498db;
}

.priority-badge.priority-high {
  background: #fff3cd;
  color: #f39c12;
}

.priority-badge.priority-urgent {
  background: #f8d7da;
  color: #e74c3c;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
  .dsr-dashboard {
    padding: 16px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 16px;
  }

  .btn-create-dsr {
    width: 100%;
  }

  .dsr-stats {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .dsr-info-panel {
    padding: 20px;
  }
}

.rotation-management {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rotation-management h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 10px;
}

.rotation-status-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  margin: 20px 0;
}

.rotation-status-card h3 {
  margin-top: 0;
  color: #555;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.status-item {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #4CAF50;
}

.status-item label {
  display: block;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.status-value {
  font-size: 1.1em;
  color: #333;
}

.status-value.warning {
  color: #ff9800;
  font-weight: bold;
}

.status-value.mono {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 5px;
  border-radius: 3px;
}

.rotation-info {
  background: #e3f2fd;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #2196F3;
  margin-top: 20px;
}

.rotation-info h4 {
  margin-top: 0;
  color: #1976D2;
}

.rotation-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.rotation-info li {
  margin: 8px 0;
  color: #555;
}

.rotation-loading,
.rotation-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.rotation-error {
  background: #ffebee;
  border-radius: 6px;
  border-left: 4px solid #f44336;
  padding: 20px;
  margin: 20px 0;
}

.rotation-error h3 {
  color: #c62828;
  margin-top: 0;
}

.rotation-error p {
  color: #d32f2f;
  font-weight: 500;
  margin: 15px 0;
}

.error-help {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: left;
}

.error-help h4 {
  color: #555;
  margin-top: 0;
}

.error-help ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 8px 0;
  color: #666;
}

.btn-retry {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.btn-retry:hover {
  background: #1976D2;
}

.schedule-enabled {
  color: #4CAF50;
  font-weight: 600;
}

.schedule-disabled {
  color: #f44336;
  font-weight: 600;
}

.schedule-expression {
  font-size: 0.85em;
  color: #666;
  font-family: 'Courier New', monospace;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 3px;
  margin-top: 5px;
  display: inline-block;
}

.cloudwatch-monitoring {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cloudwatch-monitoring h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #2196F3;
  padding-bottom: 10px;
}

.cost-overview {
  margin: 20px 0;
}

.cost-overview h3 {
  color: #555;
  margin-bottom: 15px;
}

.cost-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cost-amount {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 10px;
}

.cost-label {
  font-size: 1.2em;
  opacity: 0.9;
  margin-bottom: 10px;
}

.cost-info {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 10px;
}

.gdpr-section {
  margin: 30px 0;
  padding: 20px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
}

.gdpr-section h3 {
  margin-top: 0;
  color: #856404;
}

.gdpr-info {
  background: white;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  color: #856404;
  font-weight: 500;
}

.log-groups-section {
  margin: 30px 0;
}

.log-groups-section h3 {
  color: #555;
  margin-bottom: 15px;
}

.log-groups-table {
  overflow-x: auto;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 15px;
}

.log-groups-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.log-groups-table th {
  background: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.log-groups-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

.log-groups-table tr:hover {
  background: #f9f9f9;
}

.log-name {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #333;
  word-break: break-all;
  max-width: 300px;
  overflow-wrap: break-word;
}

.status-ok {
  color: #4CAF50;
  font-weight: 600;
}

.status-warning {
  color: #ff9800;
  font-weight: 600;
}

.retention-select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 0.9em;
}

.retention-select:hover {
  border-color: #2196F3;
}

.retention-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-note {
  margin-top: 10px;
  padding: 10px;
  background: #e3f2fd;
  border-radius: 4px;
  color: #1976D2;
  font-size: 0.9em;
  text-align: center;
}

.monitoring-info {
  background: #e8f5e9;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
  margin-top: 30px;
}

.monitoring-info h4 {
  margin-top: 0;
  color: #2e7d32;
}

.monitoring-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.monitoring-info li {
  margin: 8px 0;
  color: #555;
}

.cloudwatch-loading,
.cloudwatch-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.cloudwatch-error {
  color: #f44336;
}

.no-log-groups {
  text-align: center;
  padding: 40px 20px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  margin: 20px 0;
}

.no-log-groups p {
  margin: 10px 0;
  color: #856404;
  font-size: 1.1em;
}

.no-log-groups-hint {
  font-size: 0.9em !important;
  color: #856404 !important;
  max-width: 600px;
  margin: 15px auto 0 auto !important;
  text-align: left;
}

.no-log-groups-hint ul {
  margin: 10px 0;
  padding-left: 20px;
}

.no-log-groups-hint li {
  margin: 5px 0;
}

.load-more-container {
  margin-top: 15px;
  text-align: center;
}

.load-more-button {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.load-more-button:hover {
  background: #1976D2;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.load-more-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Retention Manager Mode Toggle */
.retention-mode-section {
  margin: 20px 0 30px 0;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.retention-mode-section h3 {
  margin-top: 0;
  color: white;
  margin-bottom: 15px;
}

.mode-toggle-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 6px;
}

.mode-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.mode-label {
  font-weight: 600;
  color: #555;
  font-size: 1.1em;
}

.mode-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.5px;
}

.mode-badge.dry-run {
  background: #e3f2fd;
  color: #1976D2;
  border: 2px solid #1976D2;
}

.mode-badge.full-active {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
  }
}

.mode-description {
  margin: 15px 0;
  padding: 12px;
  background: #f5f5f5;
  border-left: 4px solid #2196F3;
  border-radius: 4px;
}

.mode-description p {
  margin: 0;
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
}

.mode-toggle-button {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 10px;
}

.mode-toggle-button:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.mode-toggle-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mode-toggle-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.mode-toggle-button.active {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.mode-toggle-button.active:hover {
  background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
}

.canary-monitoring {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.canary-monitoring h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #FF9800;
  padding-bottom: 10px;
}

.canary-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.overview-stat {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #000;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.overview-stat.success {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #000;
}

.overview-stat.failed {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: #000;
}

.stat-value {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000;
}

.stat-label {
  font-size: 0.9em;
  opacity: 1;
  color: #000;
}

.canaries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.canary-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.canary-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.canary-card.status-success {
  border-left: 4px solid #4CAF50;
}

.canary-card.status-failed {
  border-left: 4px solid #f44336;
}

.canary-card.status-running {
  border-left: 4px solid #2196F3;
}

.canary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.canary-name {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
}

.canary-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
}

.canary-status.status-running {
  background: #e3f2fd;
  color: #1976D2;
}

.canary-status.status-success {
  background: #e8f5e9;
  color: #2e7d32;
}

.canary-status.status-failed {
  background: #ffebee;
  color: #c62828;
}

.canary-details {
  margin: 15px 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-label {
  font-weight: 600;
  color: #666;
  font-size: 0.9em;
}

.detail-value {
  color: #333;
  font-size: 0.9em;
}

.detail-value.status-success {
  color: #4CAF50;
  font-weight: 600;
}

.detail-value.status-failed {
  color: #f44336;
  font-weight: 600;
}

.canary-schedule {
  margin: 15px 0;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 0.85em;
  color: #666;
}

.btn-run-canary {
  width: 100%;
  padding: 10px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 10px;
}

.btn-run-canary:hover:not(:disabled) {
  background: #1976D2;
}

.btn-run-canary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.no-canaries {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 1.1em;
}

.canary-info {
  background: #fff3e0;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #FF9800;
  margin-top: 30px;
}

.canary-info h4 {
  margin-top: 0;
  color: #e65100;
}

.canary-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.canary-info li {
  margin: 8px 0;
  color: #555;
}

.canary-loading,
.canary-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.canary-error {
  color: #f44336;
}

.canary-error-container {
  padding: 20px;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  margin: 20px;
}

.canary-error-help {
  background: white;
  padding: 20px;
  border-radius: 6px;
  margin-top: 20px;
}

.canary-error-help h4 {
  color: #e65100;
  margin-top: 15px;
  margin-bottom: 10px;
}

.canary-error-help p {
  color: #555;
  margin: 10px 0;
}

.canary-error-help ul,
.canary-error-help ol {
  margin: 10px 0;
  padding-left: 25px;
}

.canary-error-help li {
  margin: 8px 0;
  color: #555;
}

.canary-error-help strong {
  color: #333;
}

.error-note {
  background: #e3f2fd;
  padding: 12px;
  border-left: 4px solid #2196F3;
  border-radius: 4px;
  margin-top: 15px;
  font-size: 0.95em;
}

.no-canaries-hint {
  font-size: 0.9em !important;
  color: #888 !important;
  max-width: 600px;
  margin: 15px auto 0 auto !important;
}

.security-checklist {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.security-checklist h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #f44336;
  padding-bottom: 10px;
}

.checklist-overview {
  margin: 20px 0;
}

.overview-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
}

.overview-card h3 {
  margin-top: 0;
  color: #555;
}

.checks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.check-item {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #ccc;
  transition: all 0.3s ease;
}

.check-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.check-item.status-ok {
  border-left-color: #4CAF50;
}

.check-item.status-warning {
  border-left-color: #ff9800;
}

.check-item.status-error {
  border-left-color: #f44336;
}

.check-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.check-icon {
  font-size: 1.5em;
}

.check-name {
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
}

.check-message {
  color: #666;
  font-size: 0.9em;
  margin-left: 35px;
}

.validation-section {
  margin: 30px 0;
  padding: 20px;
  background: #e3f2fd;
  border-radius: 6px;
  border-left: 4px solid #2196F3;
}

.validation-section h3 {
  margin-top: 0;
  color: #1976D2;
}

.validation-section p {
  color: #555;
  margin: 10px 0 15px 0;
}

.btn-validate {
  padding: 12px 24px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 1em;
}

.btn-validate:hover:not(:disabled) {
  background: #1976D2;
}

.btn-validate:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.validation-results {
  margin: 30px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 6px;
}

.validation-results h3 {
  margin-top: 0;
  color: #555;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.result-item {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #ccc;
}

.result-item.status-ok {
  border-left-color: #4CAF50;
}

.result-item.status-warning {
  border-left-color: #ff9800;
}

.result-item.status-error {
  border-left-color: #f44336;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.result-icon {
  font-size: 1.5em;
}

.result-name {
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
}

.result-message {
  color: #666;
  font-size: 0.9em;
  margin-left: 35px;
}

.checklist-info {
  background: #fff3e0;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #FF9800;
  margin-top: 30px;
}

.checklist-info h4 {
  margin-top: 0;
  color: #e65100;
}

.checklist-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.checklist-info li {
  margin: 8px 0;
  color: #555;
}

.security-loading,
.security-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.security-error {
  background: #ffebee;
  border-radius: 6px;
  border-left: 4px solid #f44336;
  padding: 20px;
  margin: 20px 0;
}

.security-error h3 {
  color: #c62828;
  margin-top: 0;
}

.security-error p {
  color: #d32f2f;
  font-weight: 500;
  margin: 15px 0;
}

.error-help {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: left;
}

.error-help h4 {
  color: #555;
  margin-top: 0;
}

.error-help ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 8px 0;
  color: #666;
}

.btn-retry {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.btn-retry:hover {
  background: #1976D2;
}

.system-health {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.system-health h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 10px;
}

.health-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.overview-stat {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-icon {
  font-size: 2em;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 0.9em;
  opacity: 1;
  margin-bottom: 8px;
  color: #fff;
}

.system-health .stat-value {
  font-size: 0.75em;
  font-weight: bold;
  text-transform: capitalize;
}

.system-health .stat-value.health-ok {
  color: #c8e6c9;
}

.system-health .stat-value.health-warning {
  color: #ffe082;
}

.system-health .stat-value.health-error {
  color: #ffcdd2;
}

.health-tabs {
  display: flex;
  gap: 10px;
  margin: 30px 0 20px 0;
  border-bottom: 2px solid #e0e0e0;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: #333;
  background: #f5f5f5;
}

.tab-btn.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
}

.health-content {
  min-height: 300px;
  padding: 20px 0;
}

.overview-content {
  text-align: center;
  padding: 40px 20px;
}

.overview-content h3 {
  color: #4CAF50;
  margin-bottom: 15px;
}

.overview-content p {
  color: #666;
  font-size: 1.1em;
  margin-bottom: 20px;
}

.refresh-info {
  background: #e8f5e9;
  padding: 10px;
  border-radius: 4px;
  color: #2e7d32;
  font-size: 0.9em;
  display: inline-block;
}

.health-table {
  overflow-x: auto;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 15px;
}

.health-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.health-table th {
  background: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.health-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

.health-table tr:hover {
  background: #f9f9f9;
}

.func-name,
.table-name,
.bucket-name,
.api-name {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #333;
  word-break: break-all;
  max-width: 300px;
}

.error-count {
  color: #f44336;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}

.status-badge.health-ok {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.health-warning {
  background: #fff3e0;
  color: #e65100;
}

.status-badge.health-error {
  background: #ffebee;
  color: #c62828;
}

.status-badge.health-unknown {
  background: #f5f5f5;
  color: #666;
}

.health-info {
  background: #e3f2fd;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #2196F3;
  margin-top: 30px;
}

.health-info h4 {
  margin-top: 0;
  color: #1976D2;
}

.health-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.health-info li {
  margin: 8px 0;
  color: #555;
}

.health-loading {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.lambda-content h3,
.dynamodb-content h3,
.s3-content h3,
.api-content h3 {
  color: #555;
  margin-bottom: 20px;
}

.backup-management {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.backup-management h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #9C27B0;
  padding-bottom: 10px;
}

.backup-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.overview-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
}

.overview-card h3 {
  margin-top: 0;
  color: #555;
  margin-bottom: 15px;
}

.backup-details {
  background: white;
  padding: 15px;
  border-radius: 4px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: #666;
  font-size: 0.9em;
}

.detail-value {
  color: #333;
  font-size: 0.9em;
}

.detail-value.status-available {
  color: #4CAF50;
  font-weight: 600;
}

.detail-value.status-creating {
  color: #2196F3;
  font-weight: 600;
}

.no-backup {
  text-align: center;
  padding: 20px;
  color: #999;
}

.backup-notice {
  background: #fff9c4;
  border: 1px solid #fbc02d;
  border-radius: 4px;
  padding: 12px;
  margin-top: 15px;
}

.backup-notice p {
  margin: 0;
  color: #f57f17;
  font-size: 0.9em;
  line-height: 1.5;
}

.backup-types-info {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 12px;
  margin-top: 15px;
  font-size: 0.9em;
}

.backup-types-info strong {
  color: #2e7d32;
}

.backup-types-info ul {
  color: #1b5e20;
}

.backup-types-info li {
  margin: 4px 0;
}

.backup-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-item {
  background: white;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
}

.stat-value {
  font-size: 2em;
  font-weight: bold;
  color: #9C27B0;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.85em;
  color: #666;
}

.manual-backup-section {
  margin: 30px 0;
  padding: 20px;
  background: #f3e5f5;
  border-radius: 6px;
  border-left: 4px solid #9C27B0;
}

.manual-backup-section h3 {
  margin-top: 0;
  color: #6a1b9a;
}

.manual-backup-section p {
  color: #555;
  margin: 10px 0 15px 0;
}

.backup-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.table-select {
  flex: 1;
  min-width: 200px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  font-size: 1em;
  cursor: pointer;
}

.table-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-backup {
  padding: 10px 24px;
  background: #9C27B0;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 1em;
}

.btn-backup:hover:not(:disabled) {
  background: #7B1FA2;
}

.btn-backup:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.backup-history-section {
  margin: 30px 0;
}

.backup-history-section h3 {
  color: #555;
  margin-bottom: 15px;
}

.backup-table {
  overflow-x: auto;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 15px;
}

.backup-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.backup-table th {
  background: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.backup-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 250px;
}

.backup-table tr:hover {
  background: #f9f9f9;
}

.backup-name {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  color: #333;
  max-width: 300px;
  word-wrap: break-word;
  word-break: break-all;
}

.type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}

.type-badge.type-manual {
  background: #e1bee7;
  color: #6a1b9a;
}

.type-badge.type-auto {
  background: #c5cae9;
  color: #283593;
}

.type-badge.type-system {
  background: #b3e5fc;
  color: #01579b;
}

.type-badge.type-aws-backup {
  background: #ffecb3;
  color: #ff6f00;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}

.status-badge.status-available {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.status-creating {
  background: #e3f2fd;
  color: #1976D2;
}

.status-badge.status-deleted {
  background: #f5f5f5;
  color: #666;
}

.no-history {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.no-history p {
  margin: 10px 0;
  font-size: 1.1em;
}

.no-history-hint {
  font-size: 0.9em !important;
  color: #666 !important;
  max-width: 600px;
  margin: 15px auto 0 auto !important;
  line-height: 1.6;
}

.backup-info {
  background: #e8eaf6;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #3F51B5;
  margin-top: 30px;
}

.backup-info h4 {
  margin-top: 0;
  color: #283593;
}

.backup-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.backup-info li {
  margin: 8px 0;
  color: #555;
}

.pitr-info {
  background: #fff3e0;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #FF9800;
  margin-top: 20px;
}

.pitr-info h4 {
  margin-top: 0;
  color: #e65100;
}

.pitr-info p {
  color: #555;
  margin: 10px 0 0 0;
  line-height: 1.6;
}

.backup-loading,
.backup-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.backup-error {
  background: #ffebee;
  border-radius: 6px;
  border-left: 4px solid #f44336;
  padding: 20px;
  margin: 20px 0;
}

.backup-error h3 {
  color: #c62828;
  margin-top: 0;
}

.backup-error p {
  color: #d32f2f;
  font-weight: 500;
  margin: 15px 0;
}

.error-help {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: left;
}

.error-help h4 {
  color: #555;
  margin-top: 0;
}

.error-help ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 8px 0;
  color: #666;
}

.btn-retry {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.btn-retry:hover {
  background: #1976D2;
}

.analytics-dashboard {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.analytics-dashboard h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #3F51B5;
  padding-bottom: 10px;
}

.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.metric-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.metric-card.success {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.metric-card.warning {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.metric-card.info {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.metric-card.danger {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.metric-value {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 0.9em;
  opacity: 0.9;
}

.analytics-tabs {
  display: flex;
  gap: 10px;
  margin: 30px 0 20px 0;
  border-bottom: 2px solid #e0e0e0;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: #333;
  background: #f5f5f5;
}

.tab-btn.active {
  color: #3F51B5;
  border-bottom-color: #3F51B5;
}

.analytics-content {
  min-height: 400px;
  padding: 20px 0;
}

.overview-content h3,
.growth-content h3,
.usage-content h3,
.subscriptions-content h3,
.geography-content h3 {
  color: #555;
  margin-bottom: 20px;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.stat-group {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
}

.stat-group h4 {
  margin-top: 0;
  color: #3F51B5;
  margin-bottom: 15px;
}

.stat-group p {
  margin: 10px 0;
  color: #666;
}

.stat-group strong {
  color: #333;
  font-size: 1.1em;
}

.growth-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 250px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.growth-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bar-container {
  display: flex;
  gap: 5px;
  align-items: flex-end;
}

.bar {
  width: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
  padding: 5px 0;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
}

.bar:hover {
  opacity: 0.8;
}

.orgs-bar {
  background: linear-gradient(to top, #3F51B5, #5C6BC0);
}

.users-bar {
  background: linear-gradient(to top, #4CAF50, #66BB6A);
}

.bar-label {
  font-size: 0.85em;
  color: #666;
  font-weight: 600;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.legend-color.orgs {
  background: linear-gradient(135deg, #3F51B5, #5C6BC0);
}

.legend-color.users {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.usage-card {
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.usage-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.usage-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.usage-value {
  font-size: 2.5em;
  font-weight: bold;
  color: #3F51B5;
  margin-bottom: 10px;
}

.usage-label {
  color: #666;
  font-weight: 600;
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.sub-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

.sub-card h4 {
  margin-top: 0;
  color: #555;
  font-size: 0.9em;
}

.sub-count {
  font-size: 2.5em;
  font-weight: bold;
  color: #3F51B5;
  margin: 10px 0;
}

.sub-price {
  color: #666;
  font-size: 0.9em;
}

.revenue-summary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

.revenue-summary h4 {
  margin-top: 0;
  font-size: 1.2em;
  opacity: 0.9;
}

.revenue-amount {
  font-size: 3em;
  font-weight: bold;
  margin-top: 10px;
}

.geo-table {
  overflow-x: auto;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 15px;
}

.geo-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.geo-table th {
  background: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd;
}

.geo-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.geo-table tr:hover {
  background: #f9f9f9;
}

.region-name {
  font-weight: 600;
  color: #3F51B5;
}

.percentage-bar {
  position: relative;
  width: 100%;
  height: 30px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.percentage-fill {
  height: 100%;
  background: linear-gradient(90deg, #3F51B5, #5C6BC0);
  transition: width 0.3s ease;
}

.percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.analytics-info {
  background: #e8eaf6;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #3F51B5;
  margin-top: 30px;
}

.analytics-info h4 {
  margin-top: 0;
  color: #283593;
}

.analytics-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.analytics-info li {
  margin: 8px 0;
  color: #555;
}

.analytics-loading,
.analytics-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.analytics-error {
  background: #ffebee;
  border-radius: 6px;
  border-left: 4px solid #f44336;
  padding: 20px;
  margin: 20px 0;
}

.analytics-error h3 {
  color: #c62828;
  margin-top: 0;
}

.analytics-error p {
  color: #d32f2f;
  font-weight: 500;
  margin: 15px 0;
}

.error-help {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: left;
}

.error-help h4 {
  color: #555;
  margin-top: 0;
}

.error-help ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 8px 0;
  color: #666;
}

.btn-retry {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.btn-retry:hover {
  background: #1976D2;
}

.testing-suite {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.testing-suite h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #00BCD4;
  padding-bottom: 10px;
}

.test-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.overview-stat {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.overview-stat.success {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.overview-stat.danger {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.stat-value {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 8px;
  color: #000;
}

.stat-label {
  font-size: 0.9em;
  opacity: 0.9;
  color: #000;
}

.test-categories {
  margin: 30px 0;
}

.test-categories h3 {
  color: #555;
  margin-bottom: 20px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.category-card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.category-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.category-header h4 {
  margin-top: 0;
  color: #00BCD4;
  margin-bottom: 8px;
}

.category-header p {
  color: #666;
  font-size: 0.9em;
  margin: 0 0 15px 0;
}

.category-tests {
  margin: 15px 0;
}

.test-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin: 5px 0;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #ccc;
}

.test-item.status-passed {
  border-left-color: #4CAF50;
}

.test-item.status-failed {
  border-left-color: #f44336;
}

.test-item.status-running {
  border-left-color: #2196F3;
}

.test-icon {
  font-size: 1.2em;
}

.test-name {
  font-size: 0.9em;
  color: #333;
}

.btn-run-tests {
  width: 100%;
  padding: 10px;
  background: #00BCD4;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 15px;
}

.btn-run-tests:hover:not(:disabled) {
  background: #0097A7;
}

.btn-run-tests:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.test-results {
  margin: 30px 0;
}

.test-results h3 {
  color: #555;
  margin-bottom: 20px;
}

.results-table {
  overflow-x: auto;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 15px;
}

.results-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.results-table th {
  background: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 2px solid #ddd;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.results-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 250px;
}

.results-table tr:hover {
  background: #f9f9f9;
}

.category-name {
  font-weight: 600;
  color: #00BCD4;
}

.passed-count {
  color: #4CAF50;
  font-weight: 600;
}

.failed-count {
  color: #f44336;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}

.status-badge.status-passed {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.status-failed {
  background: #ffebee;
  color: #c62828;
}

.status-badge.status-running {
  background: #e3f2fd;
  color: #1976D2;
}

.no-results {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 1.1em;
}

.testing-info {
  background: #e0f7fa;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #00BCD4;
  margin-top: 30px;
}

.testing-info h4 {
  margin-top: 0;
  color: #00838F;
}

.testing-info ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.testing-info li {
  margin: 8px 0;
  color: #555;
}

.testing-schedule {
  background: #fff3e0;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #FF9800;
  margin-top: 20px;
}

.testing-schedule h4 {
  margin-top: 0;
  color: #e65100;
}

.testing-schedule p {
  color: #555;
  margin: 10px 0;
}

.schedule-options {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.schedule-btn {
  padding: 10px 20px;
  background: #FF9800;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.schedule-btn:hover {
  background: #F57C00;
}

.schedule-btn:active {
  background: #E65100;
  transform: scale(0.98);
}

.schedule-note {
  font-size: 0.85em;
  color: #666;
  font-style: italic;
  margin-top: 10px;
}

.testing-loading,
.testing-error {
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
}

.testing-error {
  background: #ffebee;
  border-radius: 6px;
  border-left: 4px solid #f44336;
  padding: 20px;
  margin: 20px 0;
}

.testing-error h3 {
  color: #c62828;
  margin-top: 0;
}

.testing-error p {
  color: #d32f2f;
  font-weight: 500;
  margin: 15px 0;
}

.error-help {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: left;
}

.error-help h4 {
  color: #555;
  margin-top: 0;
}

.error-help ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 8px 0;
  color: #666;
}

.btn-retry {
  padding: 10px 20px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.btn-retry:hover {
  background: #1976D2;
}

.user-guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.user-guide-modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.user-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  border-bottom: 2px solid #e0e0e0;
}

.user-guide-header h2 {
  margin: 0;
  font-size: 24px;
  color: #232f3e;
}

.close-button {
  background: none;
  border: none;
  font-size: 32px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-button:hover {
  background: #f0f0f0;
  color: #232f3e;
}

.user-guide-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.user-guide-sidebar {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  padding: 20px 0;
}

.user-guide-sidebar nav {
  display: flex;
  flex-direction: column;
}

.user-guide-sidebar button {
  background: none;
  border: none;
  padding: 12px 24px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #232f3e;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.user-guide-sidebar button:hover {
  background: #e8eaed;
}

.user-guide-sidebar button.active {
  background: #fff;
  border-left-color: #ff9900;
  font-weight: 600;
  color: #ff9900;
}

.section-group {
  margin: 16px 0;
}

.section-group-title {
  padding: 8px 24px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 0.5px;
}

.user-guide-main {
  flex: 1;
  overflow-y: auto;
  padding: 30px 40px;
}

.guide-section-content {
  max-width: 800px;
}

.guide-section-content h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  color: #232f3e;
  border-bottom: 3px solid #ff9900;
  padding-bottom: 12px;
}

.guide-section-content h4 {
  margin: 24px 0 12px 0;
  font-size: 18px;
  color: #232f3e;
  font-weight: 600;
}

.guide-section-content p {
  margin: 12px 0;
  line-height: 1.6;
  color: #444;
  font-size: 15px;
}

.guide-section-content ul,
.guide-section-content ol {
  margin: 12px 0;
  padding-left: 24px;
  line-height: 1.8;
  color: #444;
}

.guide-section-content li {
  margin: 8px 0;
  font-size: 15px;
}

.guide-section-content strong {
  color: #232f3e;
  font-weight: 600;
}

.guide-section-content code {
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #d63384;
}

/* Scrollbar styling */
.user-guide-sidebar::-webkit-scrollbar,
.user-guide-main::-webkit-scrollbar {
  width: 8px;
}

.user-guide-sidebar::-webkit-scrollbar-track,
.user-guide-main::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.user-guide-sidebar::-webkit-scrollbar-thumb,
.user-guide-main::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.user-guide-sidebar::-webkit-scrollbar-thumb:hover,
.user-guide-main::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Responsive design */
@media (max-width: 768px) {
  .user-guide-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .user-guide-content {
    flex-direction: column;
  }

  .user-guide-sidebar {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .user-guide-main {
    padding: 20px;
  }

  .guide-section-content h3 {
    font-size: 22px;
  }
}

.superadmin-user-management {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.superadmin-users-loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-section h2 {
  margin: 0;
  color: #333;
}

.btn-add-user {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-add-user:hover {
  background-color: #218838;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-retry {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.users-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 30px;
  position: relative;
}

.users-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 1300px;
  width: 100%;
}

.users-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1300px;
}

.users-table thead {
  background-color: #f8f9fa;
}

.users-table th {
  padding: 15px 10px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 13px;
  white-space: normal;
  line-height: 1.3;
}

.users-table td {
  padding: 15px 10px;
  border-bottom: 1px solid #dee2e6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column widths - adjusted for wider table */
.users-table th:nth-child(1),
.users-table td:nth-child(1) {
  width: 180px;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
  width: 280px;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
  width: 140px;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
  width: 150px;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
  width: 160px;
}

.users-table th:nth-child(6),
.users-table td:nth-child(6) {
  width: 160px;
}

.users-table th:nth-child(7),
.users-table td:nth-child(7) {
  width: 120px;
}

.users-table th:nth-child(8),
.users-table td:nth-child(8) {
  width: 110px;
}

.users-table tr:hover {
  background-color: #f8f9fa;
}

.users-table tr.inactive {
  opacity: 0.6;
  background-color: #f5f5f5;
}

.mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #666;
  word-break: break-all;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.status-badge.active {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background-color: #f8d7da;
  color: #721c24;
}

.btn-remove {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.btn-remove:hover {
  background-color: #c82333;
}

.no-users {
  text-align: center;
  padding: 40px;
  color: #666;
  font-style: italic;
}

.info-section {
  background-color: #e7f3ff;
  border-left: 4px solid #007bff;
  padding: 20px;
  border-radius: 6px;
}

.info-section h4 {
  margin-top: 0;
  color: #004085;
}

.info-section ol {
  margin: 15px 0;
  padding-left: 20px;
}

.info-section li {
  margin-bottom: 8px;
  color: #004085;
}

.info-section .warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 15px;
  margin-top: 15px;
  border-radius: 4px;
  color: #856404;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #dee2e6;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.btn-close {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 1;
  transition: color 0.2s;
}

.btn-close:hover {
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group small {
  display: block;
  margin-top: 5px;
  color: #6c757d;
  font-size: 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dee2e6;
}

.btn-cancel {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #5a6268;
}

.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-submit {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-submit:hover {
  background-color: #218838;
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* Responsive styles */
@media (max-width: 1200px) {
  .users-table th:nth-child(2),
  .users-table td:nth-child(2) {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .superadmin-user-management {
    padding: 10px;
  }

  .header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .btn-add-user {
    width: 100%;
  }

  .users-table th,
  .users-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .users-table th:nth-child(1),
  .users-table td:nth-child(1) {
    min-width: 130px;
  }

  .users-table th:nth-child(2),
  .users-table td:nth-child(2) {
    min-width: 160px;
  }

  .mono {
    font-size: 11px;
  }

  .status-badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .btn-remove {
    font-size: 12px;
    padding: 5px 10px;
  }

  .modal-content {
    padding: 20px;
    width: 95%;
  }

  .info-section {
    padding: 15px;
  }

  .info-section ol {
    padding-left: 15px;
  }
}

.health-alerts-container {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.health-alerts-header {
  margin-bottom: 30px;
}

.health-alerts-header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.health-alerts-header p {
  margin: 0;
  color: #666;
}

.alert-config-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.alert-config-section h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.config-item {
  display: flex;
  flex-direction: column;
}

.config-item.full-width {
  grid-column: 1 / -1;
}

.config-item label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #555;
}

.config-item input[type="number"],
.config-item input[type="text"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.config-item input[type="checkbox"] {
  margin-right: 8px;
}

.save-config-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-config-btn:hover {
  background: #0056b3;
}

.save-config-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.active-alerts-section,
.alert-history-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.active-alerts-section h3,
.alert-history-section h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.no-alerts {
  padding: 40px;
  text-align: center;
  color: #28a745;
  font-size: 18px;
  background: #f0f9f4;
  border-radius: 8px;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.alert-card {
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid;
}

.alert-card.severity-critical {
  background: #fff5f5;
  border-left-color: #dc3545;
}

.alert-card.severity-high {
  background: #fff8f0;
  border-left-color: #fd7e14;
}

.alert-card.severity-medium {
  background: #fffbf0;
  border-left-color: #ffc107;
}

.alert-card.severity-low {
  background: #f0f9ff;
  border-left-color: #17a2b8;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.alert-severity {
  font-weight: bold;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.1);
}

.alert-time {
  font-size: 12px;
  color: #666;
}

.alert-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
}

.alert-message {
  color: #555;
  margin-bottom: 10px;
  line-height: 1.5;
}

.alert-metrics {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.metric {
  font-size: 13px;
  color: #666;
}

.metric strong {
  color: #333;
}

.acknowledge-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.acknowledge-btn:hover {
  background: #218838;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-value.critical {
  color: #dc3545;
}

.stat-value.high {
  color: #fd7e14;
}

.stat-value.medium {
  color: #ffc107;
}

.health-alerts-loading {
  padding: 40px;
  text-align: center;
  color: #666;
}

.advanced-analytics-container {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.analytics-header h2 {
  margin: 0;
  color: #333;
}

.time-range-selector {
  display: flex;
  gap: 10px;
}

.time-range-selector button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.time-range-selector button:hover {
  background: #f0f0f0;
}

.time-range-selector button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.kpi-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  gap: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kpi-icon {
  font-size: 36px;
}

.kpi-content {
  flex: 1;
}

.kpi-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.kpi-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  font-weight: 500;
}

.kpi-trend.positive {
  color: #28a745;
}

.kpi-trend.negative {
  color: #dc3545;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.analytics-card h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.chart-card {
  min-height: 300px;
}

.chart-placeholder {
  height: 250px;
  display: flex;
  align-items: flex-end;
  padding: 10px 0;
}

.chart-bars {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
  align-items: flex-end;
}

.bar {
  flex: 1;
  background: linear-gradient(to top, #007bff, #0056b3);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: all 0.3s;
}

.bar:hover {
  opacity: 0.8;
}

.bar.revenue {
  background: linear-gradient(to top, #28a745, #1e7e34);
}

.bar-label {
  position: absolute;
  bottom: -25px;
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}

.bar-value {
  position: absolute;
  top: -25px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.top-orgs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.org-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.org-rank {
  font-size: 20px;
  font-weight: bold;
  color: #007bff;
  min-width: 40px;
}

.org-info {
  flex: 1;
}

.org-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 3px;
}

.org-plan {
  font-size: 12px;
  color: #666;
}

.org-revenue {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
}

.subscription-breakdown {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sub-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sub-name {
  font-weight: 500;
  color: #333;
}

.sub-count {
  font-size: 13px;
  color: #666;
}

.sub-bar {
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sub-fill {
  height: 100%;
  background: linear-gradient(to right, #007bff, #0056b3);
  transition: width 0.3s;
}

.sub-revenue {
  font-size: 14px;
  font-weight: 500;
  color: #28a745;
}

.predictions-card {
  grid-column: 1 / -1;
}

.predictions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.prediction-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.prediction-icon {
  font-size: 32px;
}

.prediction-content {
  flex: 1;
}

.prediction-label {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.prediction-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.prediction-confidence {
  font-size: 12px;
  opacity: 0.8;
}

.usage-metrics-card {
  grid-column: 1 / -1;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.usage-item {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.usage-label {
  font-size: 14px;
  color: #666;
}

.usage-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.analytics-loading {
  padding: 40px;
  text-align: center;
  color: #666;
}

@media (max-width: 768px) {
  .analytics-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.organization-lifecycle-container {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.lifecycle-header {
  margin-bottom: 30px;
}

.lifecycle-header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.lifecycle-header p {
  margin: 0;
  color: #666;
}

.lifecycle-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.status-filter {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

.lifecycle-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.stat-value.active {
  color: #28a745;
}

.stat-value.trial {
  color: #17a2b8;
}

.stat-value.suspended {
  color: #ffc107;
}

.stat-value.cancelled {
  color: #dc3545;
}

.organizations-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.organizations-table table {
  width: 100%;
  border-collapse: collapse;
}

.organizations-table thead {
  background: #f8f9fa;
}

.organizations-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #dee2e6;
  font-size: 13px;
}

.organizations-table td {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
  font-size: 14px;
}

.organizations-table tbody tr:hover {
  background: #f8f9fa;
}

.org-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.org-name {
  font-weight: 500;
  color: #333;
}

.org-id {
  font-size: 11px;
  color: #999;
  font-family: monospace;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.status-active {
  background: #d4edda;
  color: #155724;
}

.status-badge.status-trial {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.status-suspended {
  background: #fff3cd;
  color: #856404;
}

.status-badge.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.status-expired {
  background: #e2e3e5;
  color: #383d41;
}

.lifecycle-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.lifecycle-badge.stage-onboarding {
  background: #cfe2ff;
  color: #084298;
}

.lifecycle-badge.stage-early {
  background: #d1e7dd;
  color: #0f5132;
}

.lifecycle-badge.stage-growth {
  background: #fff3cd;
  color: #664d03;
}

.lifecycle-badge.stage-mature {
  background: #e7d6f5;
  color: #6f42c1;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.action-btn:hover {
  transform: scale(1.1);
}

.suspend-btn {
  background: #ffc107;
}

.suspend-btn:hover {
  background: #e0a800;
}

.reactivate-btn {
  background: #28a745;
}

.reactivate-btn:hover {
  background: #218838;
}

.cancel-btn {
  background: #dc3545;
}

.cancel-btn:hover {
  background: #c82333;
}

.extend-btn {
  background: #17a2b8;
}

.extend-btn:hover {
  background: #138496;
}

.action-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #dee2e6;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  line-height: 1;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.org-details {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.org-details p {
  margin: 8px 0;
  font-size: 14px;
}

.action-warning {
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.action-warning p {
  margin: 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
}

.reason-input {
  margin-bottom: 20px;
}

.reason-input label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.reason-input textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #dee2e6;
}

.cancel-modal-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-modal-btn:hover {
  background: #f8f9fa;
}

.confirm-action-btn {
  padding: 10px 20px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.confirm-action-btn:hover {
  background: #0056b3;
}

.confirm-action-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.lifecycle-loading {
  padding: 40px;
  text-align: center;
  color: #666;
}

@media (max-width: 768px) {
  .lifecycle-controls {
    flex-direction: column;
  }

  .organizations-table {
    overflow-x: auto;
  }

  .action-buttons {
    flex-direction: column;
  }
}

.dpa-management {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.dpa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dpa-header h2 {
  margin: 0;
  color: #333;
}

.create-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.create-btn:hover {
  background: #0056b3;
}

.dpa-loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.no-dpas {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
  color: #666;
}

.dpa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
}

.dpa-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dpa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dpa-card.active {
  border: 2px solid #28a745;
}

.dpa-card.inactive {
  opacity: 0.7;
  border: 2px solid #ccc;
}

.dpa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.dpa-card-header h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.2em;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

.version-badge {
  background: #007bff;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9em;
}

.dpa-details {
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row strong {
  color: #555;
  font-size: 0.9em;
}

.detail-row span {
  color: #333;
  text-align: right;
  max-width: 60%;
}

.dpa-sections {
  margin: 20px 0;
}

.dpa-sections details {
  margin-bottom: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 10px;
}

.dpa-sections summary {
  cursor: pointer;
  font-weight: 600;
  color: #007bff;
  padding: 5px;
}

.dpa-sections summary:hover {
  color: #0056b3;
}

.dpa-sections p {
  margin: 10px 0 0 0;
  padding: 10px;
  color: #555;
  line-height: 1.6;
  background: white;
  border-radius: 4px;
}

.dpa-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.dpa-meta small {
  color: #999;
  font-size: 0.85em;
}

.deactivate-btn {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.deactivate-btn:hover {
  background: #c82333;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
}

.dpa-modal {
  background: white;
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.quick-fill {
  padding: 20px;
  background: #e7f3ff;
  border-bottom: 1px solid #b3d9ff;
}

.quick-fill-btn {
  background: #17a2b8;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.quick-fill-btn:hover {
  background: #138496;
}

.dpa-modal form {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
  font-size: 0.9em;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
}

.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

.file-upload-wrapper {
  position: relative;
}

.file-upload-wrapper input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.file-upload-label {
  display: block;
  padding: 12px 20px;
  background: #f8f9fa;
  border: 2px dashed #007bff;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  color: #007bff;
  font-weight: 600;
}

.file-upload-label:hover {
  background: #e7f3ff;
  border-color: #0056b3;
}

.file-upload-label span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-hint {
  display: block;
  margin-top: 6px;
  color: #6c757d;
  font-size: 0.85em;
}

.pdf-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.pdf-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.form-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-actions button:disabled:hover {
  background: #6c757d;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.form-actions button {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.form-actions button[type="button"] {
  background: #6c757d;
  color: white;
}

.form-actions button[type="button"]:hover {
  background: #5a6268;
}

.form-actions .submit-btn {
  background: #28a745;
  color: white;
}

.form-actions .submit-btn:hover {
  background: #218838;
}

@media (max-width: 768px) {
  .dpa-cards {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .dpa-modal {
    max-width: 100%;
    margin: 10px;
  }
}

.breach-management {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breach-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
}

.breach-header h2 {
  margin: 0;
  color: #333;
}

.test-email-btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s;
}

.test-email-btn:hover:not(:disabled) {
  background: #0056b3;
}

.test-email-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.breach-loading {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
}

.no-breaches {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-breaches-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.no-breaches h3 {
  color: #28a745;
  margin-bottom: 10px;
}

.no-breaches p {
  color: #666;
  font-size: 14px;
}

.breaches-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.breach-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
  transition: box-shadow 0.3s;
}

.breach-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.breach-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.breach-card-header h3 {
  margin: 0;
  color: #333;
  flex: 1;
}

.breach-badges {
  display: flex;
  gap: 10px;
}

.severity-badge, .status-badge {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.severity-critical {
  background: #dc3545;
  color: white;
}

.severity-high {
  background: #fd7e14;
  color: white;
}

.severity-medium {
  background: #ffc107;
  color: #333;
}

.severity-low {
  background: #17a2b8;
  color: white;
}

.status-resolved {
  background: #28a745;
  color: white;
}

.status-contained {
  background: #ffc107;
  color: #333;
}

.status-investigating {
  background: #dc3545;
  color: white;
}

.breach-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: flex;
  gap: 10px;
}

.detail-label {
  font-weight: 600;
  color: #555;
  min-width: 180px;
  flex-shrink: 0;
}

.detail-value {
  color: #333;
  flex: 1;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-list {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.detail-list li {
  margin-bottom: 5px;
}

.ico-reported {
  background: #e8f5e9;
  padding: 10px;
  border-radius: 5px;
  border-left: 4px solid #28a745;
}

.breach-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e0e0e0;
}

.send-notifications-btn {
  width: 100%;
  padding: 12px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s;
}

.send-notifications-btn:hover:not(:disabled) {
  background: #0056b3;
}

.send-notifications-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cancel-auto-btn {
  width: 100%;
  padding: 12px 20px;
  background: #ffc107;
  color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s;
  margin-top: 10px;
}

.cancel-auto-btn:hover:not(:disabled) {
  background: #e0a800;
}

.cancel-auto-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .breach-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .test-email-btn {
    width: 100%;
  }

  .breach-card-header {
    flex-direction: column;
    gap: 15px;
  }

  .breach-badges {
    width: 100%;
    justify-content: flex-start;
  }

  .detail-row {
    flex-direction: column;
    gap: 5px;
  }

  .detail-label {
    min-width: auto;
  }
}

.terms-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40px 20px;
}

.terms-content {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
  color: #333;
}

.terms-content h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 10px;
  border-bottom: 3px solid #007bff;
  padding-bottom: 15px;
}

.terms-content h2 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid #007bff;
  padding-left: 15px;
}

.terms-content p {
  margin-bottom: 12px;
  font-size: 1rem;
}

.terms-content ul {
  margin-left: 20px;
  margin-bottom: 15px;
  padding-left: 40px;
}

.terms-content li {
  margin-bottom: 8px;
  font-size: 1rem;
}

.terms-content a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.terms-content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.terms-content strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  .terms-container {
    padding: 20px 10px;
  }

  .terms-content {
    padding: 20px;
  }

  .terms-content h1 {
    font-size: 2rem;
  }

  .terms-content h2 {
    font-size: 1.5rem;
  }

  .terms-content p,
  .terms-content li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .terms-container {
    padding: 15px 5px;
  }

  .terms-content {
    padding: 15px;
  }

  .terms-content h1 {
    font-size: 1.5rem;
  }

  .terms-content h2 {
    font-size: 1.2rem;
  }

  .terms-content p,
  .terms-content li {
    font-size: 0.9rem;
  }
}

.privacy-policy-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40px 20px;
}

.privacy-policy-content {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
  color: #333;
}

.privacy-policy-content h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 10px;
  border-bottom: 3px solid #007bff;
  padding-bottom: 15px;
}

.privacy-policy-content h2 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid #007bff;
  padding-left: 15px;
}

.privacy-policy-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

.privacy-policy-content h4 {
  font-size: 1.1rem;
  color: #555;
  margin-top: 15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.privacy-policy-content section {
  margin-bottom: 30px;
}

.privacy-policy-content p {
  margin-bottom: 12px;
  font-size: 1rem;
}

.privacy-policy-content ul,
.privacy-policy-content ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

.privacy-policy-content ul {
  padding-left: 40px;
}

.privacy-policy-content ol {
  padding-left: 0;
}

.privacy-policy-content li {
  margin-bottom: 8px;
  font-size: 1rem;
}

.privacy-policy-content a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-policy-content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.privacy-policy-content strong {
  color: #1a1a1a;
  font-weight: 600;
}

.policy-meta {
  background-color: #f0f8ff;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 30px;
  border-left: 4px solid #007bff;
}

.policy-meta p {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.policy-footer {
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 5px;
  margin-top: 40px;
  border-top: 2px solid #007bff;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

.policy-footer p {
  margin-bottom: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .privacy-policy-container {
    padding: 20px 10px;
  }

  .privacy-policy-content {
    padding: 20px;
  }

  .privacy-policy-content h1 {
    font-size: 2rem;
  }

  .privacy-policy-content h2 {
    font-size: 1.5rem;
  }

  .privacy-policy-content h3 {
    font-size: 1.1rem;
  }

  .privacy-policy-content p,
  .privacy-policy-content li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .privacy-policy-container {
    padding: 15px 5px;
  }

  .privacy-policy-content {
    padding: 15px;
  }

  .privacy-policy-content h1 {
    font-size: 1.5rem;
  }

  .privacy-policy-content h2 {
    font-size: 1.2rem;
  }

  .privacy-policy-content h3 {
    font-size: 1rem;
  }

  .privacy-policy-content p,
  .privacy-policy-content li {
    font-size: 0.9rem;
  }
}

.dpa-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40px 20px;
}

.dpa-content {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
  color: #333;
}

.dpa-content h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 10px;
  border-bottom: 3px solid #28a745;
  padding-bottom: 15px;
}

.dpa-content h2 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid #28a745;
  padding-left: 15px;
}

.dpa-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

.dpa-content section {
  margin-bottom: 30px;
}

.dpa-content p {
  margin-bottom: 12px;
  font-size: 1rem;
}

.dpa-content ul,
.dpa-content ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

.dpa-content li {
  margin-bottom: 8px;
  font-size: 1rem;
}

.dpa-content a {
  color: #28a745;
  text-decoration: none;
  transition: color 0.3s ease;
}

.dpa-content a:hover {
  color: #1e7e34;
  text-decoration: underline;
}

.dpa-content strong {
  color: #1a1a1a;
  font-weight: 600;
}

.dpa-meta {
  background-color: #f0fff4;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 30px;
  border-left: 4px solid #28a745;
}

.dpa-meta p {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.processors-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: #f9f9f9;
}

.processors-table thead {
  background-color: #28a745;
  color: white;
}

.processors-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #ddd;
}

.processors-table td {
  padding: 12px;
  border: 1px solid #ddd;
}

.processors-table tbody tr:hover {
  background-color: #f5f5f5;
}

.processors-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.dpa-footer {
  background-color: #f0fff4;
  padding: 20px;
  border-radius: 5px;
  margin-top: 40px;
  border-top: 2px solid #28a745;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

.dpa-footer p {
  margin-bottom: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dpa-container {
    padding: 20px 10px;
  }

  .dpa-content {
    padding: 20px;
  }

  .dpa-content h1 {
    font-size: 2rem;
  }

  .dpa-content h2 {
    font-size: 1.5rem;
  }

  .dpa-content h3 {
    font-size: 1.1rem;
  }

  .dpa-content p,
  .dpa-content li {
    font-size: 0.95rem;
  }

  .processors-table {
    font-size: 0.9rem;
  }

  .processors-table th,
  .processors-table td {
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .dpa-container {
    padding: 15px 5px;
  }

  .dpa-content {
    padding: 15px;
  }

  .dpa-content h1 {
    font-size: 1.5rem;
  }

  .dpa-content h2 {
    font-size: 1.2rem;
  }

  .dpa-content h3 {
    font-size: 1rem;
  }

  .dpa-content p,
  .dpa-content li {
    font-size: 0.9rem;
  }

  .processors-table {
    font-size: 0.8rem;
    overflow-x: auto;
  }

  .processors-table th,
  .processors-table td {
    padding: 6px;
  }
}

/* Button Component Styles */

/* Base button styles */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  background-color: #3182ce;
  color: white;
}

.btn:hover:not(:disabled):not([data-loading="true"]) {
  background-color: #2c5aa0;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
  background-color: #cbd5e0;
}

/* Button variants */
.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0056b3;
}

.btn-warning {
  background-color: #ffc107;
  color: black;
}

.btn-warning:hover:not(:disabled) {
  background-color: #e0a800;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #c82333;
}

.btn-success {
  background-color: #28a745;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #1e7e34;
}

.btn-info {
  background-color: #20c997;
  color: white;
}

.btn-info:hover:not(:disabled) {
  background-color: #1aa085;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #545b62;
}

/* Loading state */
.btn[data-loading="true"] {
  cursor: wait !important;
  opacity: 0.7;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    margin: 8px 0;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .btn {
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px;
  }
}
/* LoadingButton Component Styles */

/* CSS Custom Properties for loading state */
:root {
  --loading-opacity: 1;
  --loading-cursor: pointer;
  --loading-pointer-events: auto;
}

/* LoadingButton inherits from Button.css */

/* LoadingButton specific styles */
.loading-button {
  position: relative;
}

.btn:disabled {
  background: #cbd5e0;
  cursor: not-allowed !important;
}

.btn:disabled:not([data-loading="true"]) {
  cursor: not-allowed !important;
}





.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Responsive Design */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    margin: 8px 0;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .loading-spinner {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}

@media (max-width: 480px) {
  .btn {
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px;
  }
}
.product-selector {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 15px 0;
  border-radius: 4px;
  background: #f9f9f9;
}

.product-grid {
  display: grid;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: white;
  border: 1px solid #eee;
  border-radius: 4px;
}

.selected-products {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.selected-product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: white;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 5px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-controls button {
  width: 30px;
  height: 30px;
  padding: 0;
}

.total-value {
  text-align: right;
  padding: 10px;
  background: #e9ecef;
  border-radius: 4px;
  margin-top: 10px;
}

.selected-product-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: white;
}

.product-main-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.product-details {
  color: black;
  flex: 1;
}

.quantity-display {
  color: black;
  margin: 0 10px;
}

.product-total {
  color: black;
  font-weight: bold;
}

.item-notes-section {
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.notes-toggle-btn {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 0;
  text-align: left;
  width: 100%;
}

.notes-toggle-btn:hover {
  color: #0056b3;
  text-decoration: underline;
}

.notes-input-container {
  margin-top: 8px;
}

.notes-textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}
/* Booking Form Component Styles */

.booking-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.booking-form-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
}

.booking-form-container h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-group input[readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-group small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

.form-group small[style*="color: #dc3545"] {
  color: #dc3545 !important;
}

/* Multi-day booking notice */
.multiday-notice {
  background-color: #fff3cd;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ffeaa7;
  margin-bottom: 15px;
}

.multiday-notice small {
  color: #856404;
}

.multiday-notice strong {
  font-weight: bold;
}

/* Form buttons */
.form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.form-buttons .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

/* Component-specific button disabled styles */
button:disabled,
.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Duration and End Time select overrides */
.form-group .duration-select {
  width: 144px !important;
  min-width: 144px;
}

.form-group .endtime-select {
  width: 100px !important;
  min-width: 100px;
}

/* Responsive design */
@media (max-width: 768px) {
  .booking-form-overlay {
    padding: 10px;
  }
  
  .booking-form-container {
    padding: 20px;
    max-height: 95vh;
  }
  
  .form-buttons {
    flex-direction: column;
  }
  
  .form-buttons .btn {
    width: 100%;
    margin: 5px 0;
  }
}

@media (max-width: 480px) {
  .booking-form-container {
    padding: 15px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
}
/* Loading Spinner Styles */
.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.loading-spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-spinner.small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.loading-spinner.medium {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.loading-spinner.large {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.loading-text {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loading Overlay Styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay-content {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.progress-container {
  margin-top: 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
/* DYNAMIC INPUT EXPANSION FOR PLACEHOLDER TEXT */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select,
.form-group input,
.form-group textarea,
.form-group select,
.searchable-dropdown input,
.modal-content input,
.modal-content textarea,
.modal-content select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 2.5em !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Exception for quantity and discount input boxes */
input[style*="width: 75px"] {
  width: 75px !important;
  max-width: 75px !important;
  min-width: 75px !important;
  padding: 0 !important;
}

/* Responsive design for recent changes */
@media (max-width: 768px) {
  /* Make note text smaller on mobile */
  span[style*="color: red"] {
    font-size: 12px !important;
  }
  
  /* Adjust input boxes for mobile */
  input[style*="width: 75px"] {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
  }
}

@media (max-width: 480px) {
  /* Further reduce input size on very small screens */
  input[style*="width: 75px"] {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
  }
}

/* Specific expansion for inputs with long placeholders */
input[placeholder*="Search by customer name"],
input[placeholder*="Enter customer name"],
input[placeholder*="Enter vehicle registration"],
input[placeholder*="Enter works to be carried out"] {
  width: 100% !important;
  min-width: 300px !important;
}

@media (max-width: 768px) {
  input[placeholder*="Search by customer name"],
  input[placeholder*="Enter customer name"],
  input[placeholder*="Enter vehicle registration"],
  input[placeholder*="Enter works to be carried out"] {
    min-width: 100% !important;
    font-size: 14px !important;
  }
}

/* Professional Automotive Theme */
:root {
  --primary: #1a365d;
  --secondary: #2d3748;
  --accent: #3182ce;
  --success: #38a169;
  --warning: #d69e2e;
  --danger: #e53e3e;
  --light: #f7fafc;
  --dark: #1a202c;
  --border: #e2e8f0;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure proper viewport handling */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
  button, 
  input[type="button"], 
  input[type="submit"], 
  input[type="reset"], 
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  background: black;
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin: 20px auto;
  max-width: 1400px;
  width: calc(100% - 40px);
  min-height: calc(100vh - 40px);
}

header {
  background: linear-gradient(to bottom, #667eea, rgba(118, 75, 162, 0.3));
  color: white;
  padding: 30px;
  border-radius: 12px 12px 0 0;
  text-align: center;
}

header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 700;
}

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

nav a {
  color: black;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  font-weight: 500;
  border: 2px solid black;
}

nav a:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

header nav .btn:not(.btn-signout) {
  border: 2px solid black;
}

header nav .btn-signout {
  border: 2px solid black;
}

.content {
  padding: 40px;
  color: white;
}

/* Make all table text black */
table, th, td {
  color: black !important;
}

/* Make all dropdown list text black */
div[style*="position: absolute"][style*="backgroundColor: white"],
div[style*="position: absolute"][style*="background-color: white"],
div[style*="position: absolute"][style*="backgroundColor: 'white'"],
div[style*="position: absolute"][style*="background-color: 'white'"] {
  color: black !important;
}

div[style*="position: absolute"] div {
  color: black !important;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--secondary);
  font-size: 1.1rem;
}

/* Global input expansion styles with !important */
input,
textarea,
select,
.form-group input,
.form-group textarea,
.form-group select {
  width: 100% !important;
  padding: 15px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  transition: border-color 0.3s ease !important;
  box-sizing: border-box !important;
  min-height: 3em !important;
  height: auto !important;
  line-height: 1.3 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  resize: vertical !important;
  max-height: none !important;
  display: block !important;
  vertical-align: top !important;
  overflow: visible !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-group input[readonly] {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Global styles moved to component-specific CSS files */

.btn-secondary {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
  color: white !important;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a4556 0%, #1a202c 100%) !important;
  color: white !important;
}

.btn-signout {
  background: #dc3545 !important;
  color: black !important;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black !important;
  padding: 12px 24px !important;
}

.btn-signout:hover:not(:disabled) {
  background: #c82333 !important;
  color: black !important;
}

.subscription-active {
  background: #f0fff0 !important;
  border: 2px solid #32cd32 !important;
}

.btn-subscribed {
  background: #28a745 !important;
  color: white !important;
  cursor: not-allowed !important;
}

.btn-subscribed:hover {
  background: #28a745 !important;
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.subscription-price {
  font-size: 24px;
  color: var(--accent);
  font-weight: bold;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.staff-member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.staff-member-row strong {
  color: black !important;
}

.signature-pad {
  border: 2px solid var(--border);
  border-radius: 8px;
  background: white;
}

.media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.media-preview img,
.media-preview video {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.installation-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 25px;
  background: #b0b0b0;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  color: black;
}

.installation-card p {
  color: black;
}

.installation-card:hover {
  transform: translateY(-2px);
}

.installation-card h3 {
  color: var(--primary);
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 10px;
}

.status-completed {
  background: #c6f6d5;
  color: #22543d;
}

.status-handed-in {
  background: #fef5e7;
  color: #744210;
}

.camera-container {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 15px 0;
}

.camera-controls {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* Tablet styles */
@media (max-width: 1024px) {
  .container {
    max-width: 95%;
    margin: 15px auto;
  }
  
  nav {
    gap: 12px;
  }
  
  nav a {
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .container {
    margin: 5px;
    border-radius: 8px;
    width: calc(100% - 10px);
    min-height: calc(100vh - 10px);
  }
  
  header {
    padding: 15px;
  }
  
  header h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  
  /* Mobile logo adjustments */
  .header-logo {
    height: clamp(150px, 20vw, 200px) !important;
    max-width: 95vw !important;
  }
  
  .landing-page img[src*="Autiva-FullLogo"] {
    height: clamp(200px, 25vw, 280px) !important;
    max-width: 95vw !important;
  }
  
  nav {
    gap: 8px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  nav a {
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    margin: 2px 0;
    width: 100%;
    max-width: 300px;
    display: block;
  }
  
  .content {
    padding: 15px;
  }
  
  .btn {
    width: 100%;
    margin: 8px 0;
    min-height: 50px;
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .camera-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .camera-controls .btn {
    width: 100%;
    margin: 5px 0;
  }
  
  .media-preview {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  
  .installation-card {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .signature-container {
    width: 100%;
    max-width: none;
  }
  
  .signature-pad {
    width: 100% !important;
    height: 150px !important;
  }
}

/* Small mobile styles */
@media (max-width: 480px) {
  .container {
    margin: 2px;
    width: calc(100% - 4px);
    min-height: calc(100vh - 4px);
  }
  
  header {
    padding: 10px;
  }
  
  header h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  
  /* Small mobile logo adjustments */
  .header-logo {
    height: clamp(120px, 18vw, 160px) !important;
    max-width: 98vw !important;
  }
  
  .landing-page img[src*="Autiva-FullLogo"] {
    height: clamp(150px, 22vw, 220px) !important;
    max-width: 98vw !important;
  }
  
  .content {
    padding: 10px;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 12px;
    font-size: 16px;
    min-height: 48px;
  }
  
  .media-preview {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  
  .installation-card {
    padding: 12px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .subscription-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .btn {
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px;
  }
  
  .signature-pad {
    height: 120px !important;
  }
  
  nav a {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Dedicated Landing Page Styles */
.landing-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.landing-content {
  background: #b0b0b0;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 1200px;
  padding: 40px;
  min-height: calc(100vh - 40px);
}

.landing-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.header-subtitle {
  color: black;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
}

.landing-list {
  margin-bottom: 30px;
}

.landing-section {
  margin-bottom: 30px;
}

.plan-card {
  background: #f8f9fa;
}

.getting-started-section {
  background: #e8f4fd;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.user-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.role-card {
  padding: 15px;
  border-radius: 8px;
}

.owner-role {
  background: #fff3cd;
}

.staff-role {
  background: #d1ecf1;
}

.cta-section {
  text-align: center;
  background: #d4edda;
  padding: 20px;
  border-radius: 8px;
}

.get-started-btn {
  background: #28a745 !important;
  color: white !important;
  font-size: 1.2rem;
  padding: 15px 40px;
  margin: 20px auto !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: block !important;
}

.get-started-btn:hover {
  background: #218838 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.status-page-btn {
  margin: 0 auto 20px auto !important;
  background-color: #6c757d !important;
  display: block !important;
}

/* Authentication Styles */
.auth-footer {
  text-align: center;
  margin-top: 10px;
}

.clear-session-btn {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}

/* Custom Alert Styles */
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.custom-alert-box {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
  animation: alertSlideIn 0.3s ease-out;
}

.custom-alert-content {
  padding: 30px;
  text-align: center;
}

.custom-alert-content p {
  margin: 0 0 25px 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #333;
}

.custom-alert-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.custom-alert-btn {
  min-width: 100px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
}

.copy-btn {
  min-width: 120px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
}

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Signature Pad Styles */
.signature-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: white;
}

.signature-pad {
  width: 100% !important;
  height: 200px !important;
  max-width: 100%;
  display: block;
  border: none;
  border-radius: 8px;
}

.signature-clear-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 10px;
  font-size: 12px;
  z-index: 10;
  min-width: auto;
  width: auto;
  height: auto;
  margin: 0;
}

/* Image Capture Button States */
.btn-image-captured {
  background-color: #28a745 !important;
  color: white !important;
  border-color: #28a745 !important;
}

/* Header Logo - Responsive */
.header-logo {
  height: clamp(200px, 25vw, 300px);
  margin-bottom: 10px;
  max-width: 90vw;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px auto;
}

/* Landing Page Logo - Responsive */
.landing-page img[src*="Autiva-FullLogo"] {
  height: clamp(250px, 30vw, 400px) !important;
  max-width: 90vw !important;
  object-fit: contain !important;
  display: block !important;
}

/* User Info Container */
.user-info-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 20px;
  margin: 15px auto;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-info-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 4px;
}

.user-info-email {
  font-size: 16px;
  font-weight: bold;
  color: #495057;
  margin-bottom: 4px;
}

.user-info-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

.owner-badge {
  color: #28a745;
  background-color: #d4edda;
}

.staff-badge {
  color: #007bff;
  background-color: #d1ecf1;
}

.organization-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #dee2e6;
}

.organization-name {
  font-size: 14px;
  color: #495057;
  font-weight: 600;
  margin-bottom: 2px;
}

.organization-owner {
  font-size: 13px;
  color: #6c757d;
  font-style: italic;
}

/* Access Restricted Container */
.access-restricted-container {
  background-color: #f8f9fa;
  border: 2px solid #dc3545;
  text-align: center;
  padding: 20px;
}

.access-restricted-container h3 {
  color: #dc3545;
}

.access-restricted-container p {
  color: #6c757d;
  margin: 10px 0;
}

/* Delete Account Grid */
.delete-account-grid {
  margin-top: 10px;
}

.delete-account-button {
  background-color: #dc3545 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Header Container Styles */
.header-container {
  margin: 10px auto;
  padding: 15px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-container h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  text-align: center;
}

.header-grid {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.header-grid-2col {
  grid-template-columns: 1fr 1fr;
}

.header-grid-1col {
  grid-template-columns: 1fr;
}

/* Management Container */
.management-container {
  border: 2px solid #007bff;
}

.management-button {
  background-color: #007bff !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.management-button:hover {
  background-color: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Customer Interactions Container */
.customer-interactions-container {
  border: 2px solid #28a745;
}

.customer-interactions-button {
  background-color: #28a745 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Secure Information Container */
.secure-info-container {
  background-color: #a71e2a;
  border: 2px solid #a71e2a;
}

.secure-info-container h3 {
  color: white;
}

.secure-info-button {
  background-color: #c82333 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* EPOS Container */
.epos-container {
  border: 2px solid #ffc107;
  background-color: #fff3cd;
}

.epos-container h3 {
  color: #856404;
}

.epos-button {
  background-color: #ffc107 !important;
  color: #212529 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 2px solid #212529 !important;
  font-weight: 600 !important;
}

.epos-button:hover {
  background-color: #e0a800 !important;
  color: #212529 !important;
}

/* System Container */
.system-container {
  border: 2px solid #6f42c1;
}

.system-button {
  background-color: #6f42c1 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Center odd buttons in header containers when viewport is wide enough */
@media (min-width: 769px) {
  .header-grid-2col:has(.system-button:nth-child(odd):last-child) .system-button:last-child,
  .header-grid-2col:has(.management-button:nth-child(odd):last-child) .management-button:last-child,
  .header-grid-2col:has(.customer-interactions-button:nth-child(odd):last-child) .customer-interactions-button:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 200px;
  }
}

/* System button styling - ensure Change Password matches other buttons */
.system-button {
  background-color: #6f42c1 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 2px solid black !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  min-height: 50px !important;
}

.system-button:hover {
  background-color: #5a32a3 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.system-button-wide {
  min-width: 120px;
}

/* Ensure all management buttons have consistent styling */
.management-button {
  border-radius: 8px !important;
  padding: 12px 24px !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-grid-2col {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  
  .header-container {
    margin: 10px 0;
    padding: 10px;
  }
  
  .header-container h3 {
    font-size: 1rem;
  }
  
  nav a {
    font-size: 0.9rem;
    padding: 8px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }
  
  .btn {
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .media-preview {
    grid-template-columns: 1fr;
  }
  
  .camera-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .camera-controls button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
  
  .header-container {
    margin: 5px 0;
    padding: 8px;
  }
  
  .installation-card {
    padding: 15px;
  }
  
  .subscription-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer Styles */
.app-footer {
  background: #b0b0b0;
  border-radius: 12px;
  border: 2px solid black;
  padding: 20px 0;
  margin: 40px 20px 20px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  margin-bottom: 15px;
}

.footer-links a {
  color: #007bff;
  text-decoration: none;
  margin: 0 15px;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links button:hover {
  text-decoration: underline;
}

.footer-business-continuity-btn {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
  margin: 0 15px;
  font-size: 14px;
  padding: 0;
}

.footer-credits {
  margin-bottom: 15px;
}

.footer-credits p {
  margin: 5px 0;
  font-size: 13px;
  color: black;
}

.footer-credits a {
  color: #007bff;
  text-decoration: none;
}

.footer-credits a:hover {
  text-decoration: underline;
}

.footer-copyright {
  font-size: 12px;
  color: black;
}

.footer-legal {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 11px;
  color: black;
  text-align: center;
}

.footer-legal p {
  margin: 0;
  line-height: 1.5;
}

/* Legal Content Styles */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
}

.legal-content h2 {
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.legal-content h3 {
  color: #555;
  margin-top: 25px;
  margin-bottom: 10px;
}

.legal-content p {
  margin-bottom: 15px;
  color: #666;
}

.legal-content ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 5px;
  color: #666;
}

.credits-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.legal-content a {
  color: #007bff;
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

/* Instructions Styles */
.instructions {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.instructions h3 {
  margin-top: 0;
  color: #495057;
  font-size: 1.2rem;
}

.instructions h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #6c757d;
  font-size: 1.1rem;
}

.instructions ol, .instructions ul {
  margin-bottom: 15px;
  padding-left: 25px;
}

.instructions li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.instructions p {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Mobile responsive for landing page */
@media (max-width: 768px) {
  .user-roles-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .custom-alert-box {
    margin: 20px;
    max-width: calc(100% - 40px);
  }
  
  .custom-alert-content {
    padding: 25px 20px;
  }
  
  .custom-alert-content p {
    font-size: 1rem;
  }
}
/* HandIn Component Responsive Styles */
.signing-section {
  border: 1px solid #ddd;
  padding: clamp(15px, 4vw, 20px);
  border-radius: 8px;
  background-color: #f9f9f9;
  margin: 15px 0;
}

.signing-header {
  margin: 0 0 15px 0;
  color: #333;
  font-size: clamp(16px, 4vw, 18px);
}

.signing-instructions {
  margin-bottom: 15px;
}

.instruction-text {
  display: block;
  margin-bottom: 8px;
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(13px, 3.5vw, 14px);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  cursor: pointer;
}

.checkbox-input {
  margin-top: 2px;
  flex-shrink: 0;
  min-width: 16px;
  min-height: 16px;
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
}

.checkbox-text {
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(13px, 3.5vw, 14px);
  flex: 1;
  min-width: 200px;
}

.signature-disclaimer {
  margin: 10px 0;
  font-size: clamp(14px, 3.5vw, 15px);
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}

.clear-signature-btn {
  margin-top: 10px;
  width: 100%;
  max-width: 200px;
}

.additional-info-section {
  margin: 15px 0;
}

.additional-info-header {
  display: block;
  margin-bottom: 10px;
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: bold;
  color: #333;
}

.additional-info-content {
  margin-bottom: 12px;
}

.additional-info-text {
  display: block;
  margin-bottom: 5px;
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(13px, 3.5vw, 14px);
  font-weight: normal;
  color: #555;
}

.additional-info-details {
  display: block;
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(12px, 3vw, 13px);
  font-weight: normal;
  color: #666;
  font-style: italic;
}

.additional-info-checkbox {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  cursor: pointer;
}

.additional-info-input {
  margin-top: 2px;
  flex-shrink: 0;
  min-width: 16px;
  min-height: 16px;
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
}

.additional-info-label {
  word-break: break-word;
  line-height: 1.4;
  font-size: clamp(13px, 3.5vw, 14px);
  flex: 1;
  min-width: 200px;
}

@media (max-width: 768px) {
  .signing-section {
    padding: 15px;
  }
  
  .checkbox-text {
    min-width: unset;
  }
  
  .additional-info-label {
    min-width: unset;
  }
}
.additional-info-container {
  border: 1px solid #ddd;
  padding: clamp(15px, 4vw, 20px);
  border-radius: 8px;
  background-color: #f9f9f9;
}

.additional-info-container-header {
  margin: 0 0 15px 0;
  color: #333;
  font-size: clamp(16px, 4vw, 18px);
  font-weight: 600;
}

@media (max-width: 768px) {
  .additional-info-container {
    padding: 15px;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.modal-content {
  background: #b0b0b0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
  margin: 0;
  color: #1a365d;
  font-size: 1.5rem;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-button:hover {
  background-color: #f5f5f5;
}

.modal-content form {
  padding: 30px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-content {
    max-width: 100%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 15px 20px;
  }
  
  .modal-content form {
    padding: 20px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
    margin: 5px 0;
  }
}

/* Responsive Utility Classes */
.mobile-full-width {
  width: 100%;
}

.mobile-center {
  text-align: center;
}

.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 768px) {
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-stack {
    flex-direction: column !important;
  }
}

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

/* Ensure all containers respect viewport width */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
  .container {
    min-height: -webkit-fill-available;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.6;
  color: #333;
}

.container {
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

/* Targeted input expansion for placeholder text visibility */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select,
.form-group input,
.form-group textarea,
.form-group select,
.searchable-dropdown input,
.modal-content input,
.modal-content textarea,
.modal-content select {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  min-height: 2.5em !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Ensure all dropdowns have black text */
select,
select option,
.form-group select,
.form-group select option,
.modal-content select,
.modal-content select option,
.searchable-dropdown select,
.searchable-dropdown select option {
  color: #000 !important;
}

/* Button styles moved to component-specific CSS files */

.signature-pad {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
  width: 100%;
  max-width: 100%;
}

/* Calendar responsive */
.calendar-container {
  overflow-x: auto;
  margin: 20px 0;
}

.rbc-calendar {
  min-width: 600px;
}

/* Form overlays responsive */
.booking-form-overlay,
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.booking-form-container,
.modal-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Dropdown responsive */
.searchable-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.dropdown-option:hover {
  background-color: #f5f5f5;
}

/* Table responsive */
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

thead, tbody, tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  word-wrap: break-word;
}

/* Calendar header responsive */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-header h2 {
  margin: 0;
  flex: 1;
}

.refresh-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.refresh-btn:hover {
  background-color: #0056b3;
}

@media (max-width: 480px) {
  .calendar-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .refresh-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
  
  .rbc-calendar {
    min-width: 320px;
    font-size: 12px;
  }
  
  .booking-form-container,
  .modal-content {
    padding: 15px;
    margin: 10px;
  }
  
  .form-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .form-buttons .btn {
    width: 100%;
    margin: 0;
  }
}

.media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.media-preview img,
.media-preview video {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .container {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  /* Button responsive styles moved to component CSS */
  
  .form-group {
    margin-bottom: 15px;
  }
  
  h1, h2, h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .media-preview img,
  .media-preview video {
    max-width: 120px;
    max-height: 120px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 8px;
  }
  
  input, textarea, select {
    font-size: 16px !important;
    padding: 14px !important;
  }
  
  /* Button styles moved to component CSS */
  
  h1, h2, h3 {
    font-size: 1.3rem;
  }
  
  .media-preview {
    justify-content: center;
  }
  
  .media-preview img,
  .media-preview video {
    max-width: 100px;
    max-height: 100px;
  }
}

/* Global loading cursor removed - now handled per component */
.handin-title {
  margin-bottom: 20px;
  color: #ccc;
}

/* Light grey text for labels and notes in Hand-In form */
label,
.form-group label,
.additional-info-header,
.additional-info-text,
.additional-info-details,
.additional-info-label,
.additional-info-container-header {
  color: #ccc !important;
}

/* Ensure dropdown options have black text */
.dropdown-option,
.dropdown-option strong,
.dropdown-option small {
  color: #000 !important;
}

.upload-status-container {
  text-align: center;
  margin-top: 10px;
}

.upload-status-text {
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
  border-radius: 4px;
}

/* Searchable dropdown styles */
.searchable-dropdown {
  position: relative;
  width: 100%;
}

/* Searchable dropdown specific styling */
.searchable-dropdown input[type="text"],
.searchable-dropdown input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  min-height: 2.5em !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .dropdown-options {
    max-height: 150px;
    font-size: 14px;
  }
  
  .dropdown-option {
    padding: 12px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .searchable-dropdown input {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .dropdown-options {
    max-height: 120px;
    font-size: 13px;
  }
  
  .dropdown-option {
    padding: 10px;
  }
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.dropdown-option:hover {
  background-color: #f5f5f5;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option.disabled {
  cursor: not-allowed;
  color: #999;
  background-color: #f9f9f9;
}

.dropdown-option.disabled:hover {
  background-color: #f9f9f9;
}


.handover-title {
  margin-bottom: 20px;
}

.signature-container {
  margin-top: 10px;
}

.clear-signature-btn {
  margin-top: 10px;
}

.upload-status-container {
  text-align: center;
  margin-top: 10px;
}

.upload-status-text {
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
}

.additional-info-form {
  margin-bottom: 20px;
}

.form-instructions {
  margin: 5px 0 10px 0;
  font-size: 0.9em;
  color: #666;
}

.upload-status-container {
  text-align: center;
  margin-top: 10px;
}

.upload-status {
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
  border-radius: 4px;
}
.secure-info-title {
  margin-bottom: 20px;
}

.upload-status-container {
  text-align: center;
  margin-top: 10px;
}

.upload-status-text {
  color: #666;
  font-style: italic;
  margin-top: 8px;
  font-size: 0.9em;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #28a745;
  transition: width 0.3s ease;
  border-radius: 4px;
}
.handover-notes-container {
  margin-top: 10px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #007bff;
}

.handover-notes-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #495057;
  font-size: 0.95em;
}

.handover-notes-content {
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.4;
  color: #6c757d;
  font-size: 0.9em;
}

/* Responsive design */
@media (max-width: 768px) {
  .handover-notes-container {
    padding: 10px;
    margin-top: 8px;
  }
  
  .handover-notes-title {
    font-size: 0.9em;
  }
  
  .handover-notes-content {
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  .handover-notes-container {
    padding: 8px;
    border-radius: 4px;
  }
  
  .handover-notes-title {
    font-size: 0.85em;
    margin-bottom: 6px;
  }
  
  .handover-notes-content {
    font-size: 0.8em;
    line-height: 1.3;
  }
}
.installation-grid {
  display: grid;
  gap: 20px;
}

.installation-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: 8px;
}

.status-completed {
  background-color: #d4edda;
  color: #155724;
}

.status-pending {
  background-color: #fff3cd;
  color: #856404;
}

.handover-notes-container {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.additional-info-container {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: black;
}

.additional-info-entry {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.secure-info-display-container {
  margin-top: 15px;
  padding: 10px;
  background-color: #ffe6e6;
  border-radius: 4px;
  border: 1px solid #dc3545;
  color: black;
}

.secure-info-entry {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.pdf-button {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.pdf-button:hover {
  color: #0056b3;
}

.pdf-button-secondary {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 10px;
}

.pdf-iframe-container {
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.pdf-iframe {
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 600px;
}

.search-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-input {
  width: 100% !important;
  max-width: none !important;
  min-height: 3em !important;
  height: auto !important;
  line-height: 1.3 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  overflow: visible !important;
}

.refresh-button {
  padding: 10px 20px;
  white-space: nowrap;
  width: fit-content;
  align-self: flex-start;
}

.staff-signature-note {
  margin-top: 10px;
  font-weight: bold;
  color: #856404;
}

.additional-info-required {
  margin-top: 10px;
  font-weight: bold;
  color: #dc3545;
}

.date-info {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
}

.entry-text {
  white-space: pre-wrap;
  margin: 5px 0 10px 0;
}

.legacy-entry-text {
  white-space: pre-wrap;
  margin: 5px 0;
}

.pdf-list-container {
  margin-top: 10px;
}

.pdf-item {
  margin-bottom: 10px;
}

.no-pdf-note {
  font-style: italic;
  color: #666;
  margin: 5px 0;
}

.refresh-help-text {
  font-size: 14px;
  color: #666;
  font-style: italic;
  margin-top: 5px;
}

/* Work Records Instructions Styles */
.installation-instructions {
  color: black;
}

.work-records-title {
  color: #ccc !important;
}

.instructions-list {
  padding-left: 20px;
  line-height: 1.6;
}

.instruction-item {
  margin-bottom: 10px;
  word-break: break-word;
  font-size: 14px;
}

.search-instruction-text {
  color: #ccc !important;
}

.search-criteria-list {
  margin-left: 20px;
  margin-top: 5px;
  font-size: 13px;
  color: #ccc !important;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .installation-grid {
    gap: 15px;
  }
  
  .installation-card {
    padding: 15px;
  }
  
  .search-input {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px !important;
  }
  
  .refresh-button {
    width: 100%;
    min-height: 48px;
  }
  
  .pdf-iframe {
    height: 400px;
  }
  
  .status-badge {
    display: block;
    margin: 8px 0;
    text-align: center;
    padding: 8px 12px;
  }
}

.handin-pdf-container,
.handover-pdf-container {
  margin-top: 15px;
  padding: 10px;
  background-color: #e6f3ff;
  border-radius: 4px;
  border: 1px solid #007bff;
  color: black;
}

@media (max-width: 480px) {
  .installation-card {
    padding: 12px;
  }
  
  .pdf-iframe {
    height: 300px;
  }
  
  .additional-info-entry,
  .secure-info-entry {
    padding: 8px;
    margin-bottom: 10px;
  }
  
  .handover-notes-container,
  .additional-info-container,
  .secure-info-display-container {
    padding: 8px;
  }
}
.sync-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.sync-status-icon {
  font-size: 16px;
}

.sync-status-syncing {
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #90caf9;
}

.sync-status-syncing .sync-status-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

.sync-status-success {
  background-color: #e8f5e9;
  color: #388e3c;
  border: 1px solid #81c784;
}

.sync-status-error {
  background-color: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef5350;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.sales-management {
  padding: 20px;
}

.sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.sales-item {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales-totals {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.sales-actions {
  display: flex;
  gap: 10px;
}

/* Operations Container Styles */
.operations-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.operations-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counter-operations {
  padding: 15px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.account-operations {
  padding: 15px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.operations-title {
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
}

.operations-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.report-date-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.accounts-search {
  margin-bottom: 20px;
}

.accounts-search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.accounts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.accounts-table-container {
  width: 100%;
  overflow-x: auto;
}

.accounts-table {
  width: 100%;
  border-collapse: collapse;
}

.accounts-table-empty {
  color: #6c757d;
  font-size: 12px;
  min-width: 675px;
  background-color: white;
}

.btn-back {
  padding: 8px 16px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit-account {
  padding: 3px 6px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .sales-grid {
    grid-template-columns: 1fr;
  }
  
  .sales-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  /* Scale down button text on mobile */
  table button {
    font-size: 8px !important;
    padding: 2px 4px !important;
  }
}
/* Import shared button styles */

/* SalesManagement specific loading spinner */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: sales-spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes sales-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* End of Day Sales Report Modal Styles */
.eod-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.eod-modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}

.eod-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.eod-modal-title {
  color: black;
  margin: 0;
}

.eod-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.eod-date-info {
  margin-bottom: 20px;
}

.eod-date-title {
  color: black;
  margin: 0 0 5px 0;
}

.eod-generated-text {
  color: black;
  margin: 0;
}

.eod-summary-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.eod-summary-title {
  color: black;
  margin: 0 0 10px 0;
}

.eod-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.eod-summary-item {
  color: black;
}

.eod-summary-total {
  grid-column: 1 / -1;
  color: black;
}

.eod-sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.eod-sales-section {
  padding: 15px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.eod-sales-title {
  color: black;
  margin: 0 0 10px 0;
}

.eod-sales-text {
  color: black;
  margin: 5px 0;
}

.eod-payment-methods {
  margin-top: 10px;
}

.eod-payment-title {
  color: black;
  margin: 0 0 5px 0;
}

.eod-payment-item {
  color: black;
}

.eod-totals-section {
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin-bottom: 20px;
}

.eod-totals-title {
  color: black;
  margin: 0 0 10px 0;
}

.eod-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  text-align: center;
}

.eod-totals-item {
  color: black;
}

.eod-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.eod-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.eod-btn-save {
  background-color: #28a745;
  color: white;
}

.eod-btn-print {
  background-color: #17a2b8;
  color: white;
}

.eod-btn-print-save {
  background-color: #007bff;
  color: white;
}

.eod-btn-close {
  background-color: #6c757d;
  color: white;
}
/* Account Operations Button Styles */
.btn-account-sale {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-account-sale:hover:not(:disabled) {
  background-color: #1e7e34;
}

.btn-account-sale:disabled {
  background-color: #ccc;
  cursor: wait;
}

.btn-account-quote {
  padding: 10px 20px;
  background-color: #17a2b8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-account-quote:hover:not(:disabled) {
  background-color: #138496;
}

.btn-account-quote:disabled {
  background-color: #ccc;
  cursor: wait;
}

.btn-add-account {
  padding: 10px 20px;
  background-color: #6f42c1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-add-account:hover:not(:disabled) {
  background-color: #5a32a3;
}

.btn-add-account:disabled {
  background-color: #ccc;
  cursor: wait;
}

.btn-accounts-list {
  padding: 10px 20px;
  background-color: #fd7e14;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-accounts-list:hover:not(:disabled) {
  background-color: #dc6502;
}

.btn-accounts-list:disabled {
  background-color: #ccc;
  cursor: wait;
}

/* Product actions button styles */
.product-actions button.btn:disabled:not([data-loading="true"]) {
  cursor: not-allowed !important;
}

/* Fallback for any disabled button */
button:disabled,
button:disabled:hover,
.btn-primary:disabled:hover,
.btn-warning:disabled:hover,
.btn-success:disabled:hover,
.btn-info:disabled:hover,
.btn-purple:disabled:hover,
.btn-orange:disabled:hover,
.btn:disabled,
.loading-button-disabled {
  cursor: not-allowed !important;
}

/* Override LoadingButton component styles specifically */
.installation-card .btn:disabled,
.installation-card button:disabled,
.product-actions .btn:disabled,
.product-actions button:disabled {
  cursor: not-allowed !important;
}

/* Price input styling - increased by 1/3rd from 75px to 100px */
.price-input {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
  text-align: center;
}

/* Convert button styling - allows text wrapping */
.convert-button {
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  line-height: 1.2;
}

/* Sales list button hover styles */
.sales-edit-btn {
  padding: 3px 6px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-edit-btn:hover {
  background-color: #5a6268;
}

.sales-view-booking-btn {
  padding: 3px 6px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-view-booking-btn:hover {
  background-color: #218838;
}

.sales-convert-booking-btn {
  padding: 3px 6px;
  background-color: #17a2b8;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-convert-booking-btn:hover {
  background-color: #138496;
}

.sales-go-to-sale-btn {
  padding: 3px 6px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-go-to-sale-btn:hover {
  background-color: #0056b3;
}

/* EOD Report Button */
.btn-eod-report {
  padding: 10px 20px;
  background-color: #6f42c1;
  color: white;
  border: none;
  border-radius: 4px;
}
.tab-navigation {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-navigation button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  cursor: pointer;
  border-radius: 4px;
}

.tab-button-active {
  background: #f0f8ff;
  color: #007bff;
  border-color: #007bff;
}

.tab-button-inactive {
  background: #f5f5f5;
  color: #333;
  border-color: #ddd;
}

.tab-navigation button:hover {
  background: #e9ecef;
}

.tab-button-active:hover {
  background: #e6f3ff;
}

.tab-button-inactive:hover {
  background: #e9ecef;
}
/* Component-specific button disabled styles */
button:disabled,
.btn:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
}

/* Loading button styles - ensure they work in EPOS */
button[data-loading="true"] {
  opacity: 0.7 !important;
  cursor: wait !important;
  pointer-events: none !important;
  position: relative !important;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: epos-spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes epos-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Product action buttons layout */
.product-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.product-actions .btn {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

@media (max-width: 768px) {
  .product-actions {
    flex-direction: column;
  }
  
  .product-actions .btn {
    flex: none;
    width: 100%;
  }
}

/* Compact scan button for Goods In modal */
.goods-in-scan-btn {
  padding: 4px 8px !important;
  font-size: 12px !important;
  min-width: auto !important;
  width: auto !important;
}
/* Stock Reports table with sticky header and scroll indicator */
.stock-reports-container {
  position: relative;
}

.stock-reports-scroll-indicator {
  height: 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}

.stock-reports-scroll-thumb {
  height: 10px;
  background: linear-gradient(90deg, #007bff 0%, #17a2b8 50%, #007bff 100%);
  border-radius: 5px;
  position: absolute;
  top: 1px;
  cursor: grab;
  min-width: 20px;
  transition: background 0.2s ease;
}

.stock-reports-scroll-thumb:hover {
  background: linear-gradient(90deg, #0056b3 0%, #138496 50%, #0056b3 100%);
}

.stock-reports-scroll-thumb:active {
  cursor: grabbing;
}

.stock-reports-table-wrapper {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  position: relative;
}

.stock-reports-table {
  width: 935px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  margin: 0;
}

.stock-reports-table th {
  background-color: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-bottom: 2px solid #dee2e6 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  padding: 6px !important;
  text-align: left !important;
  font-size: 11px !important;
}
/* Stock Order Report Table Styles */
.stock-order-table {
  width: 100%;
  border-collapse: collapse;
}

.stock-order-table th {
  padding: 8px;
  border: 1px solid #dee2e6;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
  hyphens: auto;
  background-color: #f8f9fa;
  font-size: 12px;
}

.stock-order-table th.center {
  text-align: center;
}

.stock-order-table td {
  padding: 8px;
  border: 1px solid #dee2e6;
  word-wrap: break-word;
  white-space: normal;
}

.stock-order-table td.center {
  text-align: center;
}

.stock-order-table td.suggested-order {
  text-align: center;
  font-weight: bold;
  color: #dc3545;
}

.stock-order-table td.ordered-btn {
  text-align: center;
  padding: 4px;
}

.stock-order-table .btn-ordered {
  padding: 4px 8px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.stock-order-table .btn-ordered:hover {
  background-color: #218838;
}
/* EposSystem Reports Styles */

/* Layout and Grid Styles */
.reports-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 15px;
  margin-bottom: 20px;
  align-items: end;
}

.reports-grid-3col {
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  gap: 15px;
  margin-bottom: 20px;
  align-items: end;
}

.reports-grid-4col {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
  align-items: end;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  text-align: center;
}

.summary-grid-4col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  text-align: center;
}

/* Section Styles */
.section-margin {
  margin-bottom: 30px;
}

.section-margin-20 {
  margin-bottom: 20px;
}

.section-divider {
  margin: 30px 0;
  border: none;
  border-top: 1px solid #dee2e6;
}

/* Summary Card Styles */
.summary-card {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 4px;
  color: black;
}

.summary-card-stock {
  background-color: #fff3cd;
}

.summary-card-balances {
  background-color: #f8d7da;
}

.summary-card-sales {
  background-color: #f8f9fa;
}

/* Summary Metric Styles */
.summary-metric {
  font-size: 24px;
  font-weight: bold;
}

.summary-metric-label {
  font-size: 12px;
  color: #666;
}

.metric-stock {
  color: #856404;
}

.metric-danger {
  color: #dc3545;
}

.metric-info {
  color: #17a2b8;
}

.metric-success {
  color: #28a745;
}

.metric-primary {
  color: #007bff;
}

/* Status Message Styles */
.status-success {
  padding: 20px;
  text-align: center;
  background-color: #d4edda;
  border-radius: 4px;
  color: #155724;
}

.status-info {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #666;
}

/* Form Styles */
.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-input-search {
  width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* Table Styles */
.table-container-scrollable {
  overflow-x: auto;
  max-height: 400px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.table-full {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  word-wrap: break-word;
}

.table-header {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
}

.table-cell {
  padding: 8px;
  border: 1px solid #dee2e6;
  text-align: left;
}

.table-cell-center {
  padding: 8px;
  border: 1px solid #dee2e6;
  text-align: center;
}

.table-cell-right {
  padding: 8px;
  border: 1px solid #dee2e6;
  text-align: right;
}

.table-cell-small {
  padding: 6px;
  border: 1px solid #dee2e6;
  font-size: 11px;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.table-cell-sku {
  max-width: 120px;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.table-cell-description {
  max-width: 250px;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.table-cell-brand {
  max-width: 100px;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.table-cell-outstanding {
  font-weight: bold;
  color: #dc3545;
}

/* Ordered Stock Table Styles */
.ordered-stock-table {
  background-color: #d4edda;
}

.ordered-stock-header {
  background-color: #c3e6cb;
}

.ordered-stock-row {
  background-color: #d4edda;
}

/* Empty State Styles */
.empty-state {
  padding: 20px;
  text-align: center;
  border-radius: 4px;
  color: #6c757d;
  font-size: 11px;
}

/* Banner Notification Styles */
.banner-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  z-index: 10000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.banner-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.banner-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Trial Status Styles */
.trial-status {
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.trial-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}

.trial-info {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

.trial-reminder {
  margin-top: 5px;
  font-size: 14px;
}

/* Tab Navigation Styles */
.tab-navigation {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tab-button-active {
  background-color: #f0f8ff;
  color: #007bff;
  border: 1px solid #007bff;
}

.tab-button-inactive {
  background-color: #f8f9fa;
  color: black;
}

/* Subscription Button */
.subscription-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

/* Instructions List */
.instructions-list {
  padding-left: 40px;
}

.instructions-list ~ ul {
  padding-left: 60px;
}

/* Tab Button Text Override */
.tab-button-inactive {
  background-color: #f8f9fa;
  color: black;
}

/* Outstanding Balances Table Styles */
.outstanding-balances-table {
  width: 100%;
  border-collapse: collapse;
}

.outstanding-balances-header {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
}

.outstanding-balances-cell {
  padding: 6px;
  border: 1px solid #dee2e6;
  font-size: 11px;
}

.outstanding-balances-customer {
  word-wrap: break-word;
  max-width: 200px;
  overflow-wrap: break-word;
  white-space: normal;
}

.outstanding-balances-email {
  word-wrap: break-word;
  max-width: 180px;
  overflow-wrap: break-word;
  white-space: normal;
}

.outstanding-balances-count {
  text-align: center;
  white-space: nowrap;
}

.outstanding-balances-amount {
  text-align: right;
  font-weight: bold;
  color: #dc3545;
  white-space: nowrap;
}