h1 { font-family: Arial, Helvetica, sans-serif; }

/* Section/Process Header Styling - for print color support */
.section-header,
.process-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%) !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

/* RTL Support for Arabic */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .ml-72 {
  margin-left: 0;
  margin-right: 18rem;
}

[dir="rtl"] .ml-5 {
  margin-left: 0;
  margin-right: 1.25rem;
}

[dir="rtl"] .mr-2 {
  margin-right: 0;
  margin-left: 0.5rem;
}

[dir="rtl"] .mr-3 {
  margin-right: 0;
  margin-left: 0.75rem;
}

[dir="rtl"] .pl-2 {
  padding-left: 0;
  padding-right: 0.5rem;
}

[dir="rtl"] .left-0 {
  left: auto;
  right: 0;
}

[dir="rtl"] .right-0 {
  right: auto;
  left: 0;
}

[dir="rtl"] aside#sidebar {
  left: auto;
  right: 0;
}

[dir="rtl"] .gap-2 {
  gap: 0.5rem;
}

[dir="rtl"] .gap-3 {
  gap: 0.75rem;
}

[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

[dir="rtl"] .fa-chevron-right:before {
  content: "\f053"; /* chevron-left */
}

[dir="rtl"] .fa-chevron-left:before {
  content: "\f054"; /* chevron-right */
}

[dir="rtl"] .list-decimal {
  list-style-position: inside;
}

/* Language switcher */
.lang-switcher {
  display: flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.lang-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.lang-btn.active {
  background: white;
  color: #1e40af;
}

/* Arabic font */
[dir="rtl"] body {
  font-family: 'Segoe UI', Tahoma, 'Arial', sans-serif;
}

/* Policy content formatting */
.policy-content {
  font-size: 0.95rem;
  line-height: 1.7;
}

.policy-content .policy-section {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.policy-content .policy-item {
  margin-left: 1.5rem;
  margin-top: 0.25rem;
}

.policy-content .policy-sub-item {
  margin-left: 3rem;
  margin-top: 0.125rem;
}

/* ========================================
   MOBILE SIDEBAR TOGGLE
   ======================================== */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mobile-menu-toggle:hover {
  transform: scale(1.05);
}

/* Mobile overlay for sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
}

.sidebar-overlay.active {
  display: block;
}

/* ========================================
   RESPONSIVE DESIGN - TABLET & MOBILE
   ======================================== */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  /* Reduce sidebar width */
  #sidebar {
    width: 16rem;
  }
  
  main.ml-72,
  .ml-72 {
    margin-left: 16rem !important;
  }
  
  /* Adjust grid layouts */
  .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Smaller padding */
  main {
    padding: 1.5rem !important;
  }
  
  /* Chatbot adjustments */
  .chatbot-window {
    width: 340px;
    height: 450px;
  }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  /* Show mobile menu button */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hide sidebar by default on mobile */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 85vw;
    max-width: 320px;
    z-index: 50;
  }
  
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  
  /* RTL sidebar positioning */
  [dir="rtl"] #sidebar {
    transform: translateX(100%);
    left: auto;
    right: 0;
  }
  
  [dir="rtl"] #sidebar.mobile-open {
    transform: translateX(0);
  }
  
  [dir="rtl"] .mobile-menu-toggle {
    left: auto;
    right: 1rem;
  }
  
  /* Remove left margin from main content */
  main.ml-72,
  main,
  .ml-72 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1rem !important;
    padding-top: 4rem !important;
  }
  
  /* Full width grids on mobile - 2 columns for stats */
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Smaller headings */
  h1.text-3xl,
  .text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h2.text-xl,
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  h1.text-2xl,
  .text-2xl {
    font-size: 1.25rem !important;
  }
  
  /* Section header - CRITICAL FIX for mobile */
  .section-header,
  .process-header {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .section-header .flex.items-center.gap-6,
  .section-header .flex.items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .section-header .w-20.h-20,
  .section-header .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  .section-header .w-20.h-20 i,
  .section-header .w-16.h-16 i {
    font-size: 1.25rem !important;
  }
  
  .section-header h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  
  .section-header p {
    font-size: 0.875rem !important;
  }
  
  /* Download PDF button on mobile */
  .section-header a[href*="pdf"],
  .section-header .flex.items-center.gap-2 {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
  }
  
  /* Process header in procedure pages */
  .bg-gradient-to-r.from-blue-600,
  [class*="bg-gradient"][class*="from-blue"] {
    padding: 1rem !important;
  }
  
  .bg-gradient-to-r h1,
  [class*="bg-gradient"] h1 {
    font-size: 1.125rem !important;
  }
  
  /* Table responsiveness */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    font-size: 0.875rem;
  }
  
  table th,
  table td {
    padding: 0.5rem !important;
  }
  
  /* Cards */
  .bg-white.rounded-xl,
  .bg-white.rounded-lg {
    border-radius: 0.75rem;
    padding: 1rem !important;
  }
  
  /* RACI badges smaller on mobile */
  .raci-badge {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  
  /* Procedure cards - better mobile layout */
  .procedure-card,
  [class*="procedure"] {
    padding: 0.75rem !important;
  }
  
  /* Procedure header in blue box */
  .bg-gradient-to-r.from-blue-600.to-blue-700 {
    padding: 0.75rem 1rem !important;
  }
  
  .bg-gradient-to-r.from-blue-600.to-blue-700 h3,
  .bg-gradient-to-r.from-blue-600.to-blue-700 .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }
  
  .bg-gradient-to-r.from-blue-600.to-blue-700 .text-xs {
    font-size: 0.7rem !important;
  }
  
  /* Form inputs */
  input[type="text"],
  input[type="search"],
  select {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  
  /* Chatbot positioning */
  .chatbot-container {
    bottom: 16px;
    right: 16px;
  }
  
  .chatbot-button {
    width: 50px;
    height: 50px;
  }
  
  .chatbot-window {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: auto;
    width: 100%;
    height: 75vh;
    border-radius: 16px 16px 0 0;
  }
  
  /* Quick navigation */
  #process-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  #process-nav a {
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
  }
  
  /* Stats cards - fix layout */
  .stats-card,
  [class*="stats"] {
    padding: 1rem !important;
  }
  
  .stats-card .text-3xl,
  .stats-card .text-2xl {
    font-size: 1.5rem !important;
  }
  
  .stats-card .text-sm {
    font-size: 0.75rem !important;
  }
  
  /* Flex direction column on mobile */
  .flex.md\:flex-row {
    flex-direction: column !important;
  }
  
  .flex.md\:items-center {
    align-items: flex-start !important;
  }
  
  /* Search bar full width */
  .flex.gap-4.items-center {
    flex-direction: column;
    align-items: stretch;
  }
  
  .flex.gap-4.items-center input,
  .flex.gap-4.items-center select {
    width: 100%;
    max-width: none;
  }
  
  /* Breadcrumb navigation */
  nav.text-sm,
  .breadcrumb {
    font-size: 0.75rem !important;
    padding: 0.5rem 0 !important;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Process list items */
  .process-item,
  a[href*="/process/"] {
    padding: 0.75rem !important;
  }
  
  /* Icon sizes in cards */
  .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  /* Gap adjustments */
  .gap-6 {
    gap: 1rem !important;
  }
  
  .gap-4 {
    gap: 0.75rem !important;
  }
  
  /* Text overflow handling */
  .truncate,
  [class*="truncate"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Policy content mobile - improved hierarchical list formatting */
  .policy-content {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  .policy-content > div {
    margin-left: 0 !important;
  }

  /* Nested list indentation for mobile - reduce margins */
  .policy-content .ml-4 { margin-left: 0.5rem !important; }
  .policy-content .ml-6 { margin-left: 1rem !important; }
  .policy-content .ml-8 { margin-left: 1.25rem !important; }
  .policy-content .ml-10 { margin-left: 1.5rem !important; }
  .policy-content .ml-12 { margin-left: 1.75rem !important; }
  .policy-content .ml-14 { margin-left: 2rem !important; }
  .policy-content .ml-16 { margin-left: 2.25rem !important; }

  /* Steps content mobile - improved nested formatting */
  .step-content > div {
    margin-left: 0 !important;
  }

  .step-content .ml-4 { margin-left: 0.5rem !important; }
  .step-content .ml-6 { margin-left: 1rem !important; }
  .step-content .ml-10 { margin-left: 1.25rem !important; }
  .step-content .ml-12 { margin-left: 1.5rem !important; }
  .step-content .ml-14 { margin-left: 1.75rem !important; }
  .step-content .ml-16 { margin-left: 2rem !important; }

  /* Ensure bullet items wrap properly on mobile */
  .policy-content div,
  .step-content div {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* RACI Matrix page */
  .role-category-card {
    padding: 0.75rem !important;
  }
}

/* Small mobile: < 480px */
@media (max-width: 480px) {
  main {
    padding: 0.75rem !important;
    padding-top: 3.5rem !important;
  }
  
  h1.text-3xl,
  .text-3xl {
    font-size: 1.25rem !important;
  }
  
  .section-header h1 {
    font-size: 1.125rem !important;
  }
  
  .bg-white.rounded-xl,
  .bg-white.rounded-lg {
    padding: 0.75rem !important;
  }
  
  /* Even smaller RACI badges */
  .raci-badge {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  
  /* Compact procedure display */
  .procedure-item {
    font-size: 0.875rem;
  }
  
  /* Stats grid - single column on very small screens */
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Smaller icons */
  .w-12.h-12 {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  .w-12.h-12 i {
    font-size: 1rem !important;
  }
  
  /* Process header number badge */
  .section-header .w-20.h-20,
  .w-16.h-16.rounded-xl {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .section-header .text-4xl {
    font-size: 1.25rem !important;
  }
  
  /* Tighter spacing */
  .p-8 {
    padding: 1rem !important;
  }
  
  .p-6 {
    padding: 0.75rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  .mb-6 {
    margin-bottom: 0.75rem !important;
  }

  /* Even smaller indentation on very small screens */
  .policy-content .ml-4 { margin-left: 0.25rem !important; }
  .policy-content .ml-6 { margin-left: 0.5rem !important; }
  .policy-content .ml-8 { margin-left: 0.75rem !important; }
  .policy-content .ml-10 { margin-left: 1rem !important; }
  .policy-content .ml-12 { margin-left: 1.25rem !important; }
  .policy-content .ml-14 { margin-left: 1.5rem !important; }
  .policy-content .ml-16 { margin-left: 1.75rem !important; }

  .step-content .ml-4 { margin-left: 0.25rem !important; }
  .step-content .ml-6 { margin-left: 0.5rem !important; }
  .step-content .ml-10 { margin-left: 0.75rem !important; }
  .step-content .ml-12 { margin-left: 1rem !important; }
  .step-content .ml-14 { margin-left: 1.25rem !important; }
  .step-content .ml-16 { margin-left: 1.5rem !important; }

  /* Policy/step content smaller font on very small screens */
  .policy-content,
  .step-content {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
  }
}

/* ========================================
   PRINT STYLES - COMPREHENSIVE FIX
   ======================================== */
@media print {
  /* Hide all navigation, sidebar, and interactive elements */
  #sidebar,
  aside,
  nav:not(.breadcrumb),
  header,
  footer,
  .no-print,
  .print-hide,
  button,
  .btn,
  .chatbot-container,
  .chatbot-toggle,
  .chatbot-button,
  .chatbot-window,
  .lang-switcher,
  .breadcrumb-nav,
  .back-button,
  .mobile-menu-toggle,
  .sidebar-overlay,
  [class*="sticky"],
  [class*="fixed"]:not(.print-fixed),
  #process-nav,
  #section-processes-nav,
  #sections-nav,
  .quick-action,
  .quick-actions,
  input,
  select,
  .search-box,
  .filter-controls,
  #search-input,
  #role-search,
  #template-search,
  .fa-external-link-alt,
  .fa-chevron-down,
  .fa-chevron-up,
  .fa-times,
  .fa-print,
  .expand-collapse-btn,
  a[href="#"],
  .hover\:bg-blue-50,
  [onclick],
  .cursor-pointer {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Reset page */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  html, body {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    font-size: 11pt !important;
  }
  
  /* Reset main content - CRITICAL FIX */
  main,
  main.ml-72,
  main.flex-1,
  .ml-72,
  .flex-1,
  #main-content,
  .main-content {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
  }
  
  /* Container resets */
  .container,
  .max-w-7xl,
  .max-w-4xl,
  .content-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Flex container resets */
  .flex.min-h-screen,
  .flex {
    display: block !important;
    width: 100% !important;
  }
  
  /* Process header - preserve colors with high specificity */
  .section-header,
  .process-header,
  .bg-gradient-to-r,
  [class*="bg-gradient"],
  .bg-blue-600,
  .bg-blue-700,
  .bg-blue-800,
  .bg-nwc-blue,
  .from-blue-600,
  .from-blue-700,
  .from-blue-800,
  div[class*="from-"][class*="to-"] {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: white !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    page-break-after: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  .section-header *,
  .process-header *,
  .bg-gradient-to-r *,
  [class*="bg-gradient"] *,
  div[class*="from-"][class*="to-"] *,
  .from-blue-600 *,
  .from-blue-700 *,
  .from-blue-800 * {
    color: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Force white text in headers */
  .text-white {
    color: white !important;
  }
  
  /* Section cards */
  .bg-white {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    page-break-inside: avoid !important;
  }
  
  /* Typography */
  h1 {
    font-size: 18pt !important;
    margin-bottom: 8px !important;
    page-break-after: avoid !important;
  }
  
  h2 {
    font-size: 14pt !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    page-break-after: avoid !important;
  }
  
  h3 {
    font-size: 12pt !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    page-break-after: avoid !important;
  }
  
  p, li, td, th {
    font-size: 10pt !important;
    line-height: 1.4 !important;
  }
  
  /* Tables */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    margin: 8px 0 !important;
  }
  
  thead {
    display: table-header-group !important;
  }
  
  tr {
    page-break-inside: avoid !important;
  }
  
  th, td {
    border: 1px solid #d1d5db !important;
    padding: 6px 8px !important;
    text-align: left !important;
    font-size: 9pt !important;
  }
  
  th {
    background: #f3f4f6 !important;
    font-weight: 600 !important;
  }
  
  /* RACI badges in print */
  .raci-badge {
    display: inline-flex !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
  }
  
  .raci-r { background: #dc2626 !important; color: white !important; }
  .raci-a { background: #ea580c !important; color: white !important; }
  .raci-c { background: #2563eb !important; color: white !important; }
  .raci-i { background: #16a34a !important; color: white !important; }
  
  /* Links */
  a {
    color: #1e40af !important;
    text-decoration: none !important;
  }
  
  a[href^="http"]:after,
  a[href]:after {
    content: none !important;
  }
  
  /* Lists */
  ul, ol {
    margin: 4px 0 !important;
    padding-left: 20px !important;
  }
  
  li {
    margin: 2px 0 !important;
  }
  
  /* Procedures section */
  .procedure-item,
  .procedure-card {
    page-break-inside: avoid !important;
    margin-bottom: 10px !important;
    padding: 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
  }
  
  /* Policy content */
  .policy-content {
    font-size: 10pt !important;
    line-height: 1.5 !important;
  }
  
  /* Step content formatting */
  .step-content,
  .procedure-steps {
    font-size: 10pt !important;
  }
  
  /* Icons - hide or adjust */
  i.fas,
  i.far,
  i.fab,
  .fa,
  [class*="fa-"] {
    font-size: 10pt !important;
    margin-right: 4px !important;
  }
  
  /* Hide decorative icons */
  .fa-external-link-alt,
  .fa-chevron-down,
  .fa-chevron-up,
  .fa-chevron-right,
  .fa-chevron-left,
  .fa-times,
  .fa-bars,
  .fa-search {
    display: none !important;
  }
  
  /* Grid layouts in print */
  .grid {
    display: block !important;
  }
  
  .grid > * {
    margin-bottom: 8px !important;
  }
  
  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }
  
  /* Process figures */
  .process-figure,
  .workflow-diagram,
  figure {
    page-break-inside: avoid !important;
    margin: 10px 0 !important;
  }
  
  /* Page margins */
  @page {
    margin: 15mm 10mm;
    size: A4;
  }
  
  @page :first {
    margin-top: 10mm;
  }
  
  /* Force page breaks */
  .page-break,
  .print-page-break {
    page-break-before: always !important;
  }
  
  .no-page-break,
  .print-no-break {
    page-break-inside: avoid !important;
  }
  
  /* Text colors for better print */
  .text-gray-500,
  .text-gray-600 {
    color: #4b5563 !important;
  }
  
  .text-gray-700,
  .text-gray-800,
  .text-gray-900 {
    color: #1f2937 !important;
  }
  
  .text-blue-600,
  .text-blue-700 {
    color: #1e40af !important;
  }
  
  /* Breadcrumb */
  .breadcrumb,
  nav.text-sm {
    margin-bottom: 8px !important;
    font-size: 9pt !important;
  }
  
  /* Spacing adjustments */
  .mb-8, .mb-6 {
    margin-bottom: 12px !important;
  }
  
  .p-6, .p-8 {
    padding: 10px !important;
  }
  
  /* Border utilities */
  .border-l-4 {
    border-left-width: 3px !important;
  }
  
  /* Shadow removal */
  [class*="shadow"] {
    box-shadow: none !important;
  }
  
  /* Rounded corners - reduce for print */
  [class*="rounded"] {
    border-radius: 4px !important;
  }
}

/* Print-specific utility classes */
.print-only {
  display: none !important;
}

@media print {
  .print-only {
    display: block !important;
  }
  
  .print-hide,
  .no-print {
    display: none !important;
  }
}

/* ========================================
   ROLE PAGE PRINT STYLES - A4 PORTRAIT
   ======================================== */
@media print {
  /* A4 Page Setup */
  @page {
    size: A4 portrait;
    margin: 15mm 12mm 15mm 12mm;
  }
  
  /* Role page specific - ensure print button is hidden */
  #role-content button,
  #role-content .no-print {
    display: none !important;
  }
  
  /* Role header card */
  #role-content .role-header-card,
  #role-content > div > div:first-child {
    background: white !important;
    border: 2px solid #1e3a5f !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    page-break-after: avoid !important;
  }
  
  /* Role icon in print */
  #role-content .print-icon,
  #role-content .w-16.h-16 {
    background: #dbeafe !important;
    border: 2px solid #1e3a5f !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  #role-content .print-icon i,
  #role-content .w-16.h-16 i {
    color: #1e3a5f !important;
  }
  
  /* Role name and title */
  #role-content h1 {
    font-size: 20pt !important;
    color: #1e3a5f !important;
    margin-bottom: 4px !important;
  }
  
  /* RACI Statistics boxes - keep colored for print */
  #role-content .bg-red-50,
  #role-content .bg-amber-50,
  #role-content .bg-blue-50,
  #role-content .bg-green-50,
  #role-content .bg-gray-100 {
    border: 1px solid #d1d5db !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  #role-content .bg-red-50 { background: #fef2f2 !important; }
  #role-content .bg-amber-50 { background: #fffbeb !important; }
  #role-content .bg-blue-50 { background: #eff6ff !important; }
  #role-content .bg-green-50 { background: #f0fdf4 !important; }
  
  /* RACI Assignments section */
  #role-content h2 {
    font-size: 14pt !important;
    color: #1e3a5f !important;
    border-bottom: 2px solid #1e3a5f !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    page-break-after: avoid !important;
  }
  
  /* RACI Assignment boxes - 2 column layout for print */
  #role-content .grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  /* Individual RACI boxes */
  #role-content .border.rounded-lg.p-4 {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px !important;
    page-break-inside: avoid !important;
    background: white !important;
  }
  
  /* RACI box headers with badges */
  #role-content .border.rounded-lg.p-4 > div:first-child {
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  
  /* Assignment list items */
  #role-content ul.space-y-2 {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  #role-content ul.space-y-2 li {
    padding: 4px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: 9pt !important;
    page-break-inside: avoid !important;
  }
  
  #role-content ul.space-y-2 li:last-child {
    border-bottom: none !important;
  }
  
  /* Procedure codes */
  #role-content .font-mono.text-xs {
    font-size: 8pt !important;
    color: #1e40af !important;
    display: block !important;
    margin-bottom: 2px !important;
  }
  
  /* Links in print - show as text */
  #role-content a {
    color: #374151 !important;
    text-decoration: none !important;
  }
  
  #role-content a:hover {
    background: none !important;
  }
  
  /* RACI badges - ensure color printing */
  #role-content .raci-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  #role-content .raci-badge.raci-r {
    background-color: #dc2626 !important;
    color: white !important;
  }
  
  #role-content .raci-badge.raci-a {
    background-color: #ea580c !important;
    color: white !important;
  }
  
  #role-content .raci-badge.raci-c {
    background-color: #2563eb !important;
    color: white !important;
  }
  
  #role-content .raci-badge.raci-i {
    background-color: #16a34a !important;
    color: white !important;
  }
  
  /* Print footer with page numbers */
  #role-content::after {
    content: "";
    display: block;
    height: 20px;
  }
  
  /* Ensure good page breaks */
  #role-content > div {
    page-break-inside: avoid !important;
  }
  
  /* Statistics row should not break */
  #role-content .flex.flex-wrap.gap-3 {
    page-break-inside: avoid !important;
    margin-bottom: 12px !important;
  }
}