/* ========== Responsive Media Queries ========== */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
  .sidebar {
      transform: translateX(-100%);
  }

  .sidebar.active {
      transform: translateX(0);
  }

  .main-content {
      margin-left: 0;
      width: 100%;
  }

  .menu-toggle {
      display: block !important;
  }

  .close-sidebar {
      display: block;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
  .dashboard-card {
      padding: 15px;
  }

  .card-value {
      font-size: 1.5rem;
  }

  .service-card {
      width: 100%;
      max-width: 350px;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
  .top-nav {
      flex-direction: column;
      align-items: flex-start;
  }

  .user-profile {
      margin-top: 10px;
  }

  .section-header h2 {
      font-size: 24px;
  }
}

/* Print styles */
@media print {
  .header, .sidebar, .certificate-actions, .no-print {
      display: none;
  }

  .certificate-section {
      margin: 0;
      padding: 0;
      box-shadow: none;
      page-break-after: always;
  }

  .document-page {
      margin: 0;
      box-shadow: none;
      padding: 0;
      width: 100%;
      max-width: 100%;
  }

  .family-status-table {
      width: 100%;
      margin: 0;
  }

  body {
      background-color: white !important;
  }
}

/* PDF-specific styles (for when generating PDFs) */
@media print, pdf {
  body {
      background-color: white !important;
      font-family: 'Times New Roman', serif;
      line-height: 1.5;
  }
  
  .document-page {
      padding: 0;
      margin: 0;
      box-shadow: none;
      width: 100%;
      max-width: 100%;
  }
  
  .document-header {
      margin-bottom: 15px;
      text-align: center;
  }
  
  .underline {
      text-decoration: underline;
      text-underline-offset: 3px;
  }
  
  table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
  }
  
  .section {
      margin-bottom: 15px;
      page-break-inside: avoid;
  }
  
  .family-member-row {
      margin-bottom: 10px;
      page-break-inside: avoid;
  }
  
  .no-print, .no-pdf {
      display: none !important;
  }
  
  .page-break {
      page-break-after: always;
  }
}

/*-=================================-*/
/*-------------personal--------------*/
/* media.css */
@media (max-width: 1200px) {
  /* Adjust layout for large tablets and small laptops */
  .sidebar {
      width: 220px;
  }
  .main-content {
      margin-left: 220px;
  }

}

@media (max-width: 992px) {
  /* Tablet styles */
  .sidebar {
      position: fixed;
      z-index: 1000;
      left: -250px;
      transition: all 0.3s ease;
  }
  .sidebar.active {
      left: 0;
  }
  .main-content {
      margin-left: 0;
      width: 100%;
  }
  .header-brand {
      font-size: 1.2rem;
  }
  .user-profile {
      flex-direction: column;
      text-align: right;
  }
  .person-icon {
      margin-right: 0;
  }
  .document-page {
      padding: 15px;
  }
}

@media (max-width: 768px) {

  .certificate-actions .btn {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
  }
  .table-responsive {
      overflow-x: auto;
  }
  .family-member-row {
      padding: 10px;
      border: 1px solid #eee;
      margin-bottom: 10px;
  }
  .family-member-row .row > div {
      margin-bottom: 8px;
  }
  .modal-dialog {
      margin: 10px auto;
  }
}

@media (max-width: 576px) {
  /* Mobile styles */
  .header {
      padding: 10px 15px;
  }
  .header-brand {
      font-size: 1rem;
  }
  .user-info {
      display: none;
  }
  .document-header h1 {
      font-size: 1.5rem;
  }
  .document-header h2 {
      font-size: 1.2rem;
  }
  .section table td, .section table th {
      padding: 5px;
      font-size: 0.8rem;
  }
  .form-row > .col, .form-row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
  }
  .btn-sm {
      padding: 0.25rem 0.5rem;
      font-size: 0.7rem;
  }
  .modal-dialog {
      max-width: 95%;
  }
  .family-member-row .row > div {
      padding-right: 5px;
      padding-left: 5px;
  }
}

/* Print-specific styles */
@media print {
  body * {
      visibility: hidden;
  }
  #certificatePreview, #certificatePreview * {
      visibility: visible;
  }
  #certificatePreview {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      margin: 0;
      padding: 0;
  }
  .no-print {
      display: none !important;
  }
  .document-page {
      page-break-after: always;
  }
  .document-page:last-child {
      page-break-after: avoid;
  }
}