/**
 * CPM Pharma Logistics - Patient Interface Styles
 *
 * WooCommerce My Account integration
 * Prescription upload, history, and status management
 * Compatible with standard WooCommerce themes
 *
 * @package CPM_Pharma_Logistics
 * @version 1.0.0
 */

/* ========================================================================
   CSS Custom Properties (Design Tokens)
   ======================================================================== */

:root {
  /* Colors */
  --cpm-patient-primary: #7F54B3;
  --cpm-patient-primary-dark: #6A4696;
  --cpm-patient-secondary: #96588A;
  --cpm-patient-success: #28A745;
  --cpm-patient-danger: #DC3545;
  --cpm-patient-warning: #FFC107;
  --cpm-patient-pending: #FFC107;
  --cpm-patient-verified: #28A745;
  --cpm-patient-rejected: #DC3545;
  --cpm-patient-text: #333333;
  --cpm-patient-text-light: #666666;
  --cpm-patient-background: #FFFFFF;
  --cpm-patient-surface: #F7F7F7;
  --cpm-patient-border: #E0E0E0;
  --cpm-patient-dropzone-bg: #FAFBFC;
  --cpm-patient-dropzone-active: #E8F4FD;

  /* Typography */
  --cpm-patient-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cpm-patient-font-size-sm: 14px;
  --cpm-patient-font-size-base: 16px;
  --cpm-patient-font-size-lg: 18px;
  --cpm-patient-font-size-xl: 20px;
  --cpm-patient-font-size-2xl: 24px;
  --cpm-patient-line-height-tight: 1.25;
  --cpm-patient-line-height-normal: 1.5;

  /* Spacing */
  --cpm-patient-spacing-xs: 4px;
  --cpm-patient-spacing-sm: 8px;
  --cpm-patient-spacing-md: 12px;
  --cpm-patient-spacing-lg: 16px;
  --cpm-patient-spacing-xl: 24px;
  --cpm-patient-spacing-2xl: 32px;

  /* Border Radius */
  --cpm-patient-radius-sm: 2px;
  --cpm-patient-radius: 4px;
  --cpm-patient-radius-lg: 8px;
  --cpm-patient-radius-pill: 9999px;

  /* Shadows */
  --cpm-patient-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cpm-patient-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --cpm-patient-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --cpm-patient-transition-fast: 150ms ease;
  --cpm-patient-transition: 300ms ease;
}

/* ========================================================================
   Prescription Upload Form
   ======================================================================== */

.cpm-rx-upload-form {
  background-color: var(--cpm-patient-background);
  border: 1px solid var(--cpm-patient-border);
  border-radius: var(--cpm-patient-radius-lg);
  padding: var(--cpm-patient-spacing-xl);
  margin-bottom: var(--cpm-patient-spacing-xl);
}

.cpm-rx-upload-form__title {
  margin: 0 0 var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-xl);
  font-weight: 600;
  color: var(--cpm-patient-text);
}

.cpm-rx-upload-form__description {
  margin: 0 0 var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-base);
  color: var(--cpm-patient-text-light);
  line-height: var(--cpm-patient-line-height-normal);
}

/* ========================================================================
   File Upload Drop Zone
   ======================================================================== */

.cpm-dropzone {
  position: relative;
  background-color: var(--cpm-patient-dropzone-bg);
  border: 2px dashed var(--cpm-patient-border);
  border-radius: var(--cpm-patient-radius-lg);
  padding: var(--cpm-patient-spacing-2xl);
  text-align: center;
  transition: border-color var(--cpm-patient-transition),
              background-color var(--cpm-patient-transition);
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cpm-dropzone:hover {
  border-color: var(--cpm-patient-primary);
  background-color: var(--cpm-patient-dropzone-active);
}

.cpm-dropzone--active {
  border-color: var(--cpm-patient-primary);
  background-color: var(--cpm-patient-dropzone-active);
  border-style: solid;
}

.cpm-dropzone--error {
  border-color: var(--cpm-patient-danger);
  background-color: #FFF5F5;
}

.cpm-dropzone__icon {
  font-size: 48px;
  color: var(--cpm-patient-primary);
  margin-bottom: var(--cpm-patient-spacing-lg);
  opacity: 0.6;
}

.cpm-dropzone__text {
  font-size: var(--cpm-patient-font-size-lg);
  color: var(--cpm-patient-text);
  margin: 0 0 var(--cpm-patient-spacing-sm);
  font-weight: 500;
}

.cpm-dropzone__subtext {
  font-size: var(--cpm-patient-font-size-sm);
  color: var(--cpm-patient-text-light);
  margin: 0 0 var(--cpm-patient-spacing-lg);
}

.cpm-dropzone__button {
  display: inline-block;
  padding: var(--cpm-patient-spacing-md) var(--cpm-patient-spacing-xl);
  background-color: var(--cpm-patient-primary);
  color: #FFFFFF;
  font-size: var(--cpm-patient-font-size-base);
  font-weight: 600;
  border: none;
  border-radius: var(--cpm-patient-radius);
  cursor: pointer;
  transition: background-color var(--cpm-patient-transition);
}

.cpm-dropzone__button:hover {
  background-color: var(--cpm-patient-primary-dark);
}

.cpm-dropzone__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.cpm-dropzone__limits {
  margin-top: var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-sm);
  color: var(--cpm-patient-text-light);
}

/* ========================================================================
   Upload Progress
   ======================================================================== */

.cpm-upload-progress {
  margin-top: var(--cpm-patient-spacing-lg);
  padding: var(--cpm-patient-spacing-lg);
  background-color: var(--cpm-patient-surface);
  border-radius: var(--cpm-patient-radius);
}

.cpm-upload-progress__file {
  display: flex;
  align-items: center;
  gap: var(--cpm-patient-spacing-md);
  margin-bottom: var(--cpm-patient-spacing-md);
}

.cpm-upload-progress__file-icon {
  font-size: 24px;
}

.cpm-upload-progress__file-name {
  flex: 1;
  font-size: var(--cpm-patient-font-size-sm);
  color: var(--cpm-patient-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpm-upload-progress__bar-container {
  width: 100%;
  height: 8px;
  background-color: var(--cpm-patient-border);
  border-radius: var(--cpm-patient-radius-pill);
  overflow: hidden;
}

.cpm-upload-progress__bar {
  height: 100%;
  background-color: var(--cpm-patient-primary);
  transition: width var(--cpm-patient-transition);
  border-radius: var(--cpm-patient-radius-pill);
}

.cpm-upload-progress__bar--success {
  background-color: var(--cpm-patient-success);
}

.cpm-upload-progress__bar--error {
  background-color: var(--cpm-patient-danger);
}

.cpm-upload-progress__status {
  margin-top: var(--cpm-patient-spacing-sm);
  font-size: var(--cpm-patient-font-size-sm);
  text-align: center;
}

.cpm-upload-progress__status--success {
  color: var(--cpm-patient-success);
  font-weight: 600;
}

.cpm-upload-progress__status--error {
  color: var(--cpm-patient-danger);
  font-weight: 600;
}

/* ========================================================================
   Prescription History Table
   ======================================================================== */

.cpm-rx-history {
  margin-top: var(--cpm-patient-spacing-xl);
}

.cpm-rx-history__title {
  margin: 0 0 var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-xl);
  font-weight: 600;
  color: var(--cpm-patient-text);
}

.cpm-rx-history__table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--cpm-patient-background);
  border: 1px solid var(--cpm-patient-border);
  border-radius: var(--cpm-patient-radius);
  overflow: hidden;
}

.cpm-rx-history__table thead {
  background-color: var(--cpm-patient-surface);
}

.cpm-rx-history__table th {
  padding: var(--cpm-patient-spacing-md) var(--cpm-patient-spacing-lg);
  text-align: left;
  font-size: var(--cpm-patient-font-size-sm);
  font-weight: 600;
  color: var(--cpm-patient-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--cpm-patient-border);
}

.cpm-rx-history__table td {
  padding: var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-base);
  color: var(--cpm-patient-text);
  border-bottom: 1px solid var(--cpm-patient-border);
}

.cpm-rx-history__table tbody tr:last-child td {
  border-bottom: none;
}

.cpm-rx-history__table tbody tr:hover {
  background-color: var(--cpm-patient-surface);
}

.cpm-rx-history__empty {
  padding: var(--cpm-patient-spacing-2xl);
  text-align: center;
  color: var(--cpm-patient-text-light);
  font-size: var(--cpm-patient-font-size-base);
}

/* Responsive table */
@media (max-width: 767px) {
  .cpm-rx-history__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cpm-rx-history__table thead {
    display: none;
  }

  .cpm-rx-history__table tbody,
  .cpm-rx-history__table tr,
  .cpm-rx-history__table td {
    display: block;
  }

  .cpm-rx-history__table tr {
    margin-bottom: var(--cpm-patient-spacing-lg);
    border: 1px solid var(--cpm-patient-border);
    border-radius: var(--cpm-patient-radius);
  }

  .cpm-rx-history__table td {
    position: relative;
    padding-left: 50%;
    text-align: right;
    border-bottom: 1px solid var(--cpm-patient-border);
  }

  .cpm-rx-history__table td:last-child {
    border-bottom: none;
  }

  .cpm-rx-history__table td::before {
    content: attr(data-label);
    position: absolute;
    left: var(--cpm-patient-spacing-lg);
    top: var(--cpm-patient-spacing-lg);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--cpm-patient-font-size-sm);
    color: var(--cpm-patient-text-light);
  }
}

/* ========================================================================
   Status Badges
   ======================================================================== */

.cpm-rx-badge {
  display: inline-block;
  padding: var(--cpm-patient-spacing-xs) var(--cpm-patient-spacing-md);
  font-size: var(--cpm-patient-font-size-sm);
  font-weight: 600;
  border-radius: var(--cpm-patient-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cpm-rx-badge--pending,
.cpm-rx-pending {
  background-color: #FFF3CD;
  color: #856404;
  border: 1px solid var(--cpm-patient-pending);
}

.cpm-rx-badge--verified {
  background-color: #D4EDDA;
  color: #155724;
  border: 1px solid var(--cpm-patient-verified);
}

.cpm-rx-badge--rejected {
  background-color: #F8D7DA;
  color: #721C24;
  border: 1px solid var(--cpm-patient-rejected);
}

/* Cart Rx Badge */
.woocommerce-cart .cpm-rx-badge,
.woocommerce-checkout .cpm-rx-badge {
  margin-left: var(--cpm-patient-spacing-sm);
  vertical-align: middle;
}

/* ========================================================================
   Action Links
   ======================================================================== */

.cpm-rx-action-link {
  color: var(--cpm-patient-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--cpm-patient-transition-fast);
}

.cpm-rx-action-link:hover {
  color: var(--cpm-patient-primary-dark);
  text-decoration: underline;
}

.cpm-rx-action-link:focus {
  outline: 2px solid var(--cpm-patient-primary);
  outline-offset: 2px;
}

.cpm-rx-action-link--disabled {
  color: var(--cpm-patient-text-light);
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================================================
   Messages & Alerts
   ======================================================================== */

.cpm-message {
  padding: var(--cpm-patient-spacing-lg);
  border-radius: var(--cpm-patient-radius);
  margin-bottom: var(--cpm-patient-spacing-lg);
  font-size: var(--cpm-patient-font-size-base);
  line-height: var(--cpm-patient-line-height-normal);
  border-left: 4px solid transparent;
}

.cpm-message--success {
  background-color: #D4EDDA;
  color: #155724;
  border-left-color: var(--cpm-patient-success);
}

.cpm-message--error {
  background-color: #F8D7DA;
  color: #721C24;
  border-left-color: var(--cpm-patient-danger);
}

.cpm-message--warning {
  background-color: #FFF3CD;
  color: #856404;
  border-left-color: var(--cpm-patient-warning);
}

.cpm-message--info {
  background-color: #D1ECF1;
  color: #0C5460;
  border-left-color: var(--cpm-patient-primary);
}

.cpm-message__title {
  font-weight: 600;
  margin: 0 0 var(--cpm-patient-spacing-xs);
}

.cpm-message__text {
  margin: 0;
}

/* ========================================================================
   Buttons
   ======================================================================== */

.cpm-button {
  display: inline-block;
  padding: var(--cpm-patient-spacing-md) var(--cpm-patient-spacing-xl);
  font-size: var(--cpm-patient-font-size-base);
  font-weight: 600;
  font-family: var(--cpm-patient-font-family);
  text-align: center;
  text-decoration: none;
  line-height: var(--cpm-patient-line-height-tight);
  border: 2px solid transparent;
  border-radius: var(--cpm-patient-radius);
  cursor: pointer;
  transition: background-color var(--cpm-patient-transition),
              border-color var(--cpm-patient-transition),
              transform var(--cpm-patient-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.cpm-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--cpm-patient-shadow);
}

.cpm-button:active {
  transform: translateY(0);
}

.cpm-button:focus {
  outline: 2px solid var(--cpm-patient-primary);
  outline-offset: 2px;
}

.cpm-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cpm-button--primary {
  background-color: var(--cpm-patient-primary);
  color: #FFFFFF;
  border-color: var(--cpm-patient-primary);
}

.cpm-button--primary:hover {
  background-color: var(--cpm-patient-primary-dark);
  border-color: var(--cpm-patient-primary-dark);
}

.cpm-button--secondary {
  background-color: var(--cpm-patient-surface);
  color: var(--cpm-patient-text);
  border-color: var(--cpm-patient-border);
}

.cpm-button--secondary:hover {
  background-color: var(--cpm-patient-border);
}

.cpm-button--danger {
  background-color: var(--cpm-patient-danger);
  color: #FFFFFF;
  border-color: var(--cpm-patient-danger);
}

.cpm-button--danger:hover {
  background-color: #C82333;
  border-color: #C82333;
}

.cpm-button--block {
  display: block;
  width: 100%;
}

/* ========================================================================
   Loading Spinner
   ======================================================================== */

.cpm-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--cpm-patient-primary);
  border-radius: 50%;
  animation: cpmPatientSpin 0.6s linear infinite;
}

@keyframes cpmPatientSpin {
  to {
    transform: rotate(360deg);
  }
}

.cpm-spinner--center {
  display: block;
  margin: var(--cpm-patient-spacing-xl) auto;
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* ========================================================================
   WooCommerce Integration
   ======================================================================== */

/* My Account Navigation */
.woocommerce-MyAccount-navigation-link--prescriptions a {
  display: block;
  padding: var(--cpm-patient-spacing-md) 0;
  color: var(--cpm-patient-text);
  text-decoration: none;
  transition: color var(--cpm-patient-transition-fast);
}

.woocommerce-MyAccount-navigation-link--prescriptions a:hover,
.woocommerce-MyAccount-navigation-link--prescriptions.is-active a {
  color: var(--cpm-patient-primary);
}

/* Cart Item Prescription Badge */
.woocommerce-cart-form__cart-item .cpm-rx-badge {
  display: inline-block;
  margin-left: var(--cpm-patient-spacing-sm);
}

/* ========================================================================
   Accessibility Enhancements
   ======================================================================== */

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

/* Focus Visible (keyboard navigation) */
.cpm-dropzone:focus-visible,
.cpm-button:focus-visible,
.cpm-rx-action-link:focus-visible {
  outline: 3px solid var(--cpm-patient-primary);
  outline-offset: 2px;
}

/* ========================================================================
   Utility Classes
   ======================================================================== */

.cpm-text-center {
  text-align: center;
}

.cpm-text-right {
  text-align: right;
}

.cpm-mt-sm { margin-top: var(--cpm-patient-spacing-sm); }
.cpm-mt-md { margin-top: var(--cpm-patient-spacing-md); }
.cpm-mt-lg { margin-top: var(--cpm-patient-spacing-lg); }
.cpm-mt-xl { margin-top: var(--cpm-patient-spacing-xl); }

.cpm-mb-sm { margin-bottom: var(--cpm-patient-spacing-sm); }
.cpm-mb-md { margin-bottom: var(--cpm-patient-spacing-md); }
.cpm-mb-lg { margin-bottom: var(--cpm-patient-spacing-lg); }
.cpm-mb-xl { margin-bottom: var(--cpm-patient-spacing-xl); }

.cpm-hidden {
  display: none !important;
}

/* ========================================================================
   Responsive Breakpoints
   ======================================================================== */

@media (min-width: 768px) {
  .cpm-rx-upload-form,
  .cpm-rx-history {
    max-width: 100%;
  }

  .cpm-dropzone {
    min-height: 240px;
  }
}

@media (min-width: 992px) {
  .cpm-dropzone__text {
    font-size: var(--cpm-patient-font-size-xl);
  }
}