/**
 * BeautySync Print Styles
 *
 * CSS media query styles for print optimization.
 * These styles are applied when the user prints or generates PDF.
 */

@media print {
  /* ==========================================================================
     Hide non-printable elements
     ========================================================================== */

  /* Navigation elements */
  nav,
  [role="navigation"],
  .bottom-nav,
  .sidebar,
  .desktop-sidebar,
  .mobile-nav {
    display: none !important;
  }

  /* Interactive elements */
  button:not(.print-keep),
  .fab,
  .floating-action-button,
  [role="button"]:not(.print-keep),
  .btn-action {
    display: none !important;
  }

  /* Modals and overlays */
  .modal,
  .dialog,
  .overlay,
  .backdrop,
  .tooltip,
  .popover,
  .dropdown-menu {
    display: none !important;
  }

  /* Utility class for hiding elements */
  .print-hidden,
  .no-print,
  [data-print="hidden"] {
    display: none !important;
  }

  /* ==========================================================================
     Show print-only elements
     ========================================================================== */

  .print-only,
  [data-print="only"] {
    display: block !important;
  }

  /* ==========================================================================
     Page layout
     ========================================================================== */

  @page {
    size: A4;
    margin: 1.5cm;
  }

  html, body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Remove shadows and gradients */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ==========================================================================
     Typography
     ========================================================================== */

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000 !important;
  }

  h1 {
    font-size: 18pt;
    margin-bottom: 12pt;
  }

  h2 {
    font-size: 16pt;
    margin-bottom: 10pt;
  }

  h3 {
    font-size: 14pt;
    margin-bottom: 8pt;
  }

  p, li {
    font-size: 12pt;
    orphans: 3;
    widows: 3;
  }

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

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href^="http"]:after,
  a[href^="https"]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

  /* Don't show URL for internal links */
  a[href^="/"]:after,
  a[href^="#"]:after {
    content: "";
  }

  /* ==========================================================================
     Tables
     ========================================================================== */

  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-header-group;
  }

  th, td {
    border: 1px solid #333 !important;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }

  tr:nth-child(even) {
    background-color: #fafafa !important;
  }

  /* ==========================================================================
     Images and graphics
     ========================================================================== */

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  canvas {
    page-break-inside: avoid;
  }

  /* Charts - convert to grayscale for better printing */
  .chart,
  .graph,
  [data-chart] {
    filter: grayscale(100%);
  }

  /* ==========================================================================
     Cards and containers
     ========================================================================== */

  .card,
  .container,
  .box {
    border: 1px solid #ccc !important;
    background: white !important;
    page-break-inside: avoid;
  }

  /* ==========================================================================
     Page breaks
     ========================================================================== */

  .page-break-before {
    page-break-before: always;
  }

  .page-break-after {
    page-break-after: always;
  }

  .no-page-break {
    page-break-inside: avoid;
  }

  /* Avoid breaking inside important sections */
  .summary,
  .totals,
  .highlight,
  .important {
    page-break-inside: avoid;
  }

  /* ==========================================================================
     Header and footer
     ========================================================================== */

  .print-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    border-bottom: 1px solid #333;
    background: white !important;
  }

  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    border-top: 1px solid #333;
    background: white !important;
    font-size: 10pt;
    color: #666;
  }

  /* ==========================================================================
     Colors - optimize for black and white printing
     ========================================================================== */

  /* Primary colors converted to dark gray */
  .primary,
  .text-primary {
    color: #333 !important;
  }

  .bg-primary {
    background-color: #e0e0e0 !important;
    color: #000 !important;
  }

  /* Success/error/warning to grayscale */
  .success,
  .text-success {
    color: #333 !important;
  }

  .error,
  .text-error,
  .danger,
  .text-danger {
    color: #000 !important;
    font-weight: bold;
  }

  .warning,
  .text-warning {
    color: #333 !important;
  }

  /* ==========================================================================
     Specific BeautySync elements
     ========================================================================== */

  /* Hide demo mode banner */
  .demo-banner,
  .demo-mode-banner {
    display: none !important;
  }

  /* Hide subscription upsells */
  .upsell,
  .upgrade-banner {
    display: none !important;
  }

  /* Keep status badges but make them print-friendly */
  .status-badge {
    border: 1px solid #333 !important;
    background: white !important;
    color: #000 !important;
    padding: 2px 6px;
  }

  /* Summary cards */
  .summary-card,
  .stat-card {
    border: 2px solid #333 !important;
    background: #f5f5f5 !important;
  }
}