/* Prescribis Brand Styles - August 2025 */

/* CSS Variables - Brand Tokens */
:root {
  /* Primary Palette */
  --color-primary-700: #2d4488;        /* Primary Blue */
  --color-primary-200: #a8bed7;        /* Light Blue */
  --color-accent-300:  #e9b48b;        /* Peach accent */

  /* Secondary Palette */
  --color-navy-800:    #262d54;        /* Dark Navy — top bar */
  --color-blue-500:    #447abe;        /* Secondary Blue */
  --color-orange-500:  #dd7b34;        /* Alert/Warning */
  --color-sand-100:    #ece0d2;        /* Neutral/tint */

  /* Base Colors */
  --color-white:       #ffffff;
  --color-black:       #000000;

  /* Text Colors */
  --text-body:         var(--color-white);
  --text-dark:         var(--color-navy-800);

  /* Design Tokens */
  --radius-lg:         10px;
  --shadow-sm:         0 2px 6px rgba(0,0,0,.12);
}

/* Typography - Articulat CF */
body {
  font-family: "articulat-cf", "Inter", "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text-body) !important;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-700) 100%) fixed !important;
  background-attachment: fixed !important;
}

/* Headings Typography */
h1, h2 {
  font-family: "articulat-cf", "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important; /* Heavy */
}

h3, h4, h5 {
  font-family: "articulat-cf", "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important; /* Demi Bold */
}

/* Body text, tables, forms */
p, td, th, input, select, textarea, label, .form-control {
  font-family: "articulat-cf", "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important; /* Regular */
}

/* Content Surfaces */
.card, .panel, .content-surface, .home-container, .modal-content {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(2px) !important;
  border-radius: var(--radius-lg) !important;
}

.session-content {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(2px) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Navigation Bar */
.navbar {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

.navbar a, .navbar .nav-link {
  color: var(--color-white) !important;
}

.navbar .nav-link:hover {
  color: var(--color-primary-200) !important;
}

.navbar-brand {
  color: var(--color-white) !important;
  font-weight: 600 !important; /* Demi Bold for brand */
}

/* Primary Buttons */
.btn-primary, .new-session-btn {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.btn-primary:hover, .new-session-btn:hover {
  background: var(--color-blue-500) !important;
  border-color: var(--color-blue-500) !important;
  color: var(--color-white) !important;
}

/* Continue Buttons */
.btn-continue, .btn-session-continue {
  background: var(--color-primary-700) !important;
  border: 1px solid var(--color-primary-700) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.btn-continue:hover, .btn-session-continue:hover {
  background: var(--color-navy-800) !important;
  border-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

/* Back Buttons */
.btn-back {
  background: transparent !important;
  border: 1px solid var(--color-white) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.btn-back:hover {
  background: transparent !important;
  border-color: var(--color-navy-800) !important;
  color: var(--color-navy-800) !important;
}

/* Navigation Tabs */
.nav-tabs .nav-link.active {
  background: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  border: none !important;
  font-weight: 500 !important;
}

.nav-tabs .nav-link {
  color: var(--color-white) !important;
  background: rgba(255,255,255,0.10) !important;
  font-weight: 500 !important;
}

.nav-tabs {
  border-bottom: 0 !important;
}

/* Home Page Tabs */
.home-container .tab.active {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-700) !important;
  border-bottom: 2px solid var(--color-primary-700) !important;
  font-weight: 500 !important;
}

.home-container .tab {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  font-weight: 500 !important;
  border: 1px solid var(--color-primary-200) !important;
}

.home-container .tab:hover:not(.active) {
  background-color: rgba(168, 190, 215, 0.8) !important;
  color: var(--color-navy-800) !important;
}

/* Table Styles */
.table thead {
  background: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

.table thead th {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

/* Removed table row hover background color */

/* Sortable Headers */
.sortable {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

.sortable:hover {
  background-color: var(--color-primary-700) !important;
}

/* Status Badges */
.badge-completed {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.badge-inprogress {
  background: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  font-weight: 500 !important;
}

.badge-contra {
  background: var(--color-orange-500) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

/* Action Buttons */
.btn-view {
  background: rgba(255,255,255,.15) !important;
  color: var(--color-white) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  font-weight: 500 !important;
}

.btn-view:hover {
  background: rgba(255,255,255,.25) !important;
  color: var(--color-white) !important;
}

.btn-prescription {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.btn-prescription:hover {
  background: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

.btn-danger {
  background: var(--color-orange-500) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.btn-danger:hover {
  background: #c66429 !important;
  color: var(--color-white) !important;
}

/* Session Tabs */
.step-tabs .nav-link.active, .session-tab.active {
  background: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.step-tabs .nav-link.completed, .session-tab.completed {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

.step-tabs .nav-link, .session-tab {
  background: rgba(255,255,255,0.25) !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Question Row Styling */
.question-row, .question-container {
  background: rgba(255,255,255,0.9) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--color-navy-800) !important;
}

.question-text {
  color: var(--color-navy-800) !important;
  font-weight: 500 !important;
}

/* Main content area text visibility */
.prescribing-session-container .content-area,
.prescribing-session-container .main-content,
.prescribing-session-container .question-section {
  background: rgba(255,255,255,0.95) !important;
  color: var(--color-navy-800) !important;
}

.prescribing-session-container p,
.prescribing-session-container h1,
.prescribing-session-container h2,
.prescribing-session-container h3,
.prescribing-session-container h4,
.prescribing-session-container h5,
.prescribing-session-container h6,
.prescribing-session-container .text,
.prescribing-session-container label {
  color: var(--color-navy-800) !important;
}

.question-hint {
  color: rgba(255,255,255,0.8) !important;
}

/* Response Toggle Buttons */
.response-toggle {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary-700) !important;
  font-weight: 500 !important;
}

.response-toggle:hover {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  border-color: var(--color-navy-800) !important;
}

.response-toggle.active {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
  font-weight: 600 !important;
}

.response-toggle[data-value="Yes"] {
  border-color: var(--color-primary-700) !important;
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

.response-toggle[data-value="Yes"]:hover {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  border-color: var(--color-navy-800) !important;
}

.response-toggle[data-value="Yes"].active {
  background-color: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-500) !important;
}

.response-toggle[data-value="Yes"].active:hover {
  background-color: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-500) !important;
}

.response-toggle[data-value="No"] {
  border-color: var(--color-primary-700) !important;
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

.response-toggle[data-value="No"]:hover {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  border-color: var(--color-navy-800) !important;
}

.response-toggle[data-value="No"].active {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
}

/* Form Controls */
.form-control {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: var(--color-navy-800) !important;
}

.form-control:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--color-primary-700) !important;
  box-shadow: 0 0 0 0.2rem rgba(45, 68, 136, 0.25) !important;
  color: var(--color-navy-800) !important;
}

/* Search Boxes */
.search-box input, .home-search-container .search-box input {
  background-color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: var(--color-navy-800) !important;
}

.search-box input:focus, .home-search-container .search-box input:focus {
  background-color: rgba(255,255,255,0.95) !important;
  border-color: var(--color-primary-700) !important;
  box-shadow: 0 0 0 0.2rem rgba(45, 68, 136, 0.25) !important;
}

.search-box input::placeholder, .home-search-container .search-box input::placeholder {
  color: rgba(38, 45, 84, 0.6) !important;
}

/* Filter Buttons */
.filter-btn {
  background-color: rgba(255,255,255,0.9) !important;
  color: var(--color-navy-800) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  font-weight: 500 !important;
}

.filter-btn:hover {
  background-color: rgba(255,255,255,0.95) !important;
}

.filter-btn.in-stock {
  border-color: var(--color-blue-500) !important;
  color: var(--color-blue-500) !important;
}

.filter-btn.out-of-stock {
  border-color: var(--color-orange-500) !important;
  color: var(--color-orange-500) !important;
}

.filter-btn.coming-soon {
  border-color: var(--color-accent-300) !important;
  color: var(--color-navy-800) !important;
}

.filter-btn.in-stock.active {
  background-color: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-500) !important;
}

.filter-btn.out-of-stock.active {
  background-color: var(--color-orange-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-orange-500) !important;
}

.filter-btn.coming-soon.active {
  background-color: var(--color-accent-300) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-accent-300) !important;
}

/* Modal Styles */
.modal-header {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  border-bottom: none !important;
}

.modal-title {
  color: var(--color-white) !important;
  font-weight: 600 !important;
}

.modal-body {
  background: rgba(255,255,255,0.95) !important;
  color: var(--color-navy-800) !important;
}

.modal-footer {
  background: rgba(255,255,255,0.95) !important;
  border-top: 1px solid rgba(255,255,255,0.3) !important;
}

/* Disclaimer Modal */
#disclaimerModal .modal-header {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

#disclaimerModal .btn-primary {
  background-color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  font-weight: 500 !important;
}

#disclaimerModal .btn-primary:hover {
  background-color: var(--color-blue-500) !important;
  border-color: var(--color-blue-500) !important;
}

.disclaimer-content .form-check-input:checked {
  background-color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

/* Toast Notifications */
.toast-container .alert-success {
  background-color: var(--color-blue-500) !important;
  color: var(--color-white) !important;
}

.toast-container .alert-danger {
  background-color: var(--color-orange-500) !important;
  color: var(--color-white) !important;
}

.toast-container .alert-warning {
  background-color: var(--color-accent-300) !important;
  color: var(--color-navy-800) !important;
}

.toast-container .alert-info {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
}

/* Session Container */
.prescribing-session-container {
  background-color: transparent !important;
}

.session-tabs {
  background-color: var(--color-primary-200) !important;
}

.session-footer-container {
  background-color: var(--color-primary-200) !important;
}

/* Dropdown Menu Fixes */
.dropdown-menu {
  background-color: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--color-primary-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dropdown-item {
  color: var(--color-navy-800) !important;
  font-weight: 500 !important;
}

.dropdown-item:not(:hover):not(:focus) {
  color: var(--color-navy-800) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

.dropdown-divider {
  border-color: var(--color-primary-200) !important;
}

/* Fix View Button Visibility */
.btn-view {
  background: rgba(255,255,255,.9) !important;
  color: var(--color-navy-800) !important;
  border: 1px solid var(--color-primary-200) !important;
  font-weight: 500 !important;
}

.btn-view:hover {
  background: rgba(255,255,255,.95) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
}

/* Table Layout Fixes */
.home-prescriptions-table .actions-cell {
  min-width: 280px !important;
  max-width: 280px !important;
  width: 280px !important;
  padding: 10px 8px !important;
  gap: 0.25rem !important;
}

.home-prescriptions-table .btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8rem !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
}

/* Complete Button Isolation - Prevent Cross-Button Hover Effects */
.home-prescriptions-table .btn-sm.btn-primary,
.home-prescriptions-table .btn-sm.btn-success,
.home-prescriptions-table .btn.btn-primary,
.home-prescriptions-table .btn.btn-success,
.table tbody tr .btn-primary,
.table tbody tr .btn-success {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-700) !important;
}

.home-prescriptions-table .btn-sm.btn-primary:hover:not(:disabled),
.home-prescriptions-table .btn-sm.btn-success:hover:not(:disabled),
.home-prescriptions-table .btn.btn-primary:hover:not(:disabled),
.home-prescriptions-table .btn.btn-success:hover:not(:disabled),
.table tbody tr .btn-primary:hover:not(:disabled),
.table tbody tr .btn-success:hover:not(:disabled) {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
  opacity: 1 !important;
  transform: none !important;
}

.home-prescriptions-table .btn-sm.btn-view,
.home-prescriptions-table .btn.btn-view,
.table tbody tr .btn-view {
  background-color: rgba(255,255,255,.9) !important;
  color: var(--color-navy-800) !important;
  border: 1px solid var(--color-primary-200) !important;
}

.home-prescriptions-table .btn-sm.btn-view:hover:not(:disabled),
.home-prescriptions-table .btn.btn-view:hover:not(:disabled),
.table tbody tr .btn-view:hover:not(:disabled) {
  background-color: rgba(255,255,255,.95) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
  opacity: 1 !important;
  transform: none !important;
}

.home-prescriptions-table .btn-sm.btn-session-continue,
.home-prescriptions-table .btn.btn-session-continue,
.table tbody tr .btn-session-continue {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-700) !important;
}

.home-prescriptions-table .btn-sm.btn-session-continue:hover:not(:disabled),
.home-prescriptions-table .btn.btn-session-continue:hover:not(:disabled),
.table tbody tr .btn-session-continue:hover:not(:disabled) {
  background-color: var(--color-primary-200) !important;
  color: var(--color-navy-800) !important;
  border-color: var(--color-primary-200) !important;
  opacity: 1 !important;
  transform: none !important;
}

.home-prescriptions-table .btn-sm.btn-delete,
.home-prescriptions-table .btn.btn-delete,
.table tbody tr .btn-delete {
  background-color: #dc3545 !important;
  color: var(--color-white) !important;
  border: 1px solid #dc3545 !important;
}

.home-prescriptions-table .btn-sm.btn-delete:hover:not(:disabled),
.home-prescriptions-table .btn.btn-delete:hover:not(:disabled),
.table tbody tr .btn-delete:hover:not(:disabled) {
  background-color: #c82333 !important;
  color: var(--color-white) !important;
  border-color: #c82333 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Completely disable ALL row hover effects - no visual changes when hovering over rows */

/* Utility Classes */
.text-brand-primary {
  color: var(--color-primary-700) !important;
}

.text-brand-secondary {
  color: var(--color-blue-500) !important;
}

.text-brand-accent {
  color: var(--color-accent-300) !important;
}

.bg-brand-primary {
  background-color: var(--color-primary-700) !important;
}

.bg-brand-secondary {
  background-color: var(--color-blue-500) !important;
}

.bg-brand-navy {
  background-color: var(--color-navy-800) !important;
}

/* Ensure text remains readable on gradient background */
.home-container {
  background: rgba(255,255,255,0.95) !important;
  color: var(--color-navy-800) !important;
}

.home-container h1, .home-container h2, .home-container h3, .home-container h4, .home-container h5, .home-container h6 {
  color: var(--color-navy-800) !important;
}

.home-container p, .home-container td, .home-container th, .home-container label {
  color: var(--color-navy-800) !important;
}

/* Session content readability */
.session-content, .session-content-results {
  background-color: rgba(255,255,255,0.95) !important;
  color: var(--color-navy-800) !important;
}

.session-content h1, .session-content h2, .session-content h3, .session-content h4, .session-content h5, .session-content h6,
.session-content-results h1, .session-content-results h2, .session-content-results h3, .session-content-results h4, .session-content-results h5, .session-content-results h6 {
  color: var(--color-navy-800) !important;
}

.session-content p, .session-content td, .session-content th, .session-content label,
.session-content-results p, .session-content-results td, .session-content-results th, .session-content-results label {
  color: var(--color-navy-800) !important;
}