/* Base styles for the Patient Management System plugin */

/* Import the Noto Sans Bengali font for all text in the plugin.  This ensures
   Bengali characters render correctly and consistently across browsers. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #f5f7fa;
  color: #1f2937;
}

/* Wrapper used by each shortcode */
.pms-wrapper {
  /* Occupy full available width to play nicely inside Elementor columns. */
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #f7fafd, #eef2ff);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
  /* Use Noto Sans Bengali for all plugin content */
  font-family: 'Noto Sans Bengali', sans-serif;
}

/* Headers */
.pms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pms-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pms-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
}
.pms-title-small {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
}
.pms-subtitle {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}
.pms-text-center {
  text-align: center;
  font-size: 14px;
  color: #374151;
}

/* Grid layouts */
/* Grid for forms: use flexbox instead of CSS grid for better compatibility
   within Elementor and other builders.  Cards will share equal width on
   larger screens and stack on smaller screens. */
/*
 * Form layout container for doctor/patient input forms.  Use CSS grid so each
 * child occupies one column on wider screens and stacks on smaller screens.
 * We choose CSS grid over flex because Elementor and the WordPress editor can
 * wrap the shortcode output in additional <p> or <div> elements.  With grid,
 * any wrapper simply becomes a grid item occupying one column, preserving
 * the expected two-column layout.  If the viewport is narrow, the grid
 * collapses to a single column.
 */
.pms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .pms-grid {
    grid-template-columns: 1fr;
  }
}

/* Remove margins from automatically generated paragraphs to prevent unwanted spacing */
.pms-wrapper p {
  margin: 0;
}
/* If paragraphs wrap cards inside cards, collapse them so header/content remain rows */
.pms-card > p,
.pms-card-header > p,
.pms-card-content > p {
  margin: 0;
  padding: 0;
  display: contents;
}
.pms-grid-monitor {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: flex-start;
}
.pms-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Responsive adjustments: stack grids on smaller screens to avoid overflow
   within Elementor or narrow containers. */
@media (max-width: 768px) {
  .pms-grid-monitor {
    grid-template-columns: 1fr;
  }
  .pms-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.pms-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pms-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  background: #f9fafb;
}
.pms-card-title {
  font-weight: 600;
  font-size: 16px;
}
.pms-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pms-instructions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pms-instruction-heading {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

/* ------------------------------------------------------------- */
/* Table styling
   Add borders and padding to all preview tables so that row and column
   lines are visible in generated sheets and records.  Without these
   rules the cells appear unbounded, which makes the grids hard to
   read.  These rules apply to both the headers and the body cells. */
.pms-preview table th,
.pms-preview table td {
  border: 1px solid #d1d5db;
  padding: 4px;
  text-align: left;
}

.pms-list {
  list-style: disc;
  margin-left: 20px;
  font-size: 14px;
  color: #4b5563;
}

/* Form controls */
label {
  font-size: 14px;
  color: #374151;
}
.pms-input,
.pms-select,
.pms-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
  /* Ensure inputs inherit the Bengali font rather than defaulting to sans-serif. */
  font-family: 'Noto Sans Bengali', sans-serif;
}
.pms-input:focus,
.pms-select:focus,
.pms-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.pms-textarea {
  resize: vertical;
}

.pms-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  font-size: 14px;
}
.pms-fieldset .pms-label {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Buttons */
.pms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.pms-btn-primary {
  background: #4f46e5;
  color: #ffffff;
}
.pms-btn-primary:disabled {
  background: #a5b4fc;
  cursor: default;
}
.pms-btn-outline {
  background: #ffffff;
  border: 1px solid #4f46e5;
  color: #4f46e5;
}
.pms-btn-outline:hover {
  background: #f5f3ff;
}

/* Checkbox wrapper */
.pms-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Lists and records */
.pms-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

/* Button group: align action buttons horizontally with spacing.  Use wrap so
   they will wrap on smaller screens if space is limited. */
.pms-button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pms-record {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px 16px;
}
.pms-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pms-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.pms-tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
  background: #ede9fe;
  color: #5b21b6;
}
.pms-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #1f2937;
  background: #e5e7eb;
}

/* Status colours for glucose and blood pressure */
.pms-status-low {
  color: #2563eb;
}
.pms-status-normal {
  color: #16a34a;
}
.pms-status-pre {
  color: #ca8a04;
}
.pms-status-high {
  color: #dc2626;
}
.pms-status-emergency {
  color: #7f1d1d;
}

/* Summary boxes */
.pms-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.pms-summary-item {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}
.pms-summary-normal {
  background: #dcfce7;
  color: #166534;
}
.pms-summary-pre {
  background: #fef9c3;
  color: #854d0e;
}
.pms-summary-high {
  background: #fee2e2;
  color: #991b1b;
}
.pms-summary-low {
  background: #dbeafe;
  color: #1e3a8a;
}
.pms-summary-emergency {
  background: #fce7f3;
  color: #831843;
}

/* Mood score buttons */
.pms-mood-score-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.pms-mood-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 6px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pms-mood-button.active {
  border-color: #c084fc;
  background: #faf5ff;
}
.pms-mood-button span {
  font-size: 18px;
}
.pms-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pms-emotion {
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  user-select: none;
}
.pms-emotion.selected {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}

/* Trend boxes for child growth */
.pms-trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pms-trend-item {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
}
.pms-trend-height {
  background: #e0f2fe;
  color: #0369a1;
}
.pms-trend-weight {
  background: #dcfce7;
  color: #15803d;
}

/* Print styles */
@media print {
  /* Optimize page layout for A4 and remove excessive margins.  This helps fit
     the generated sheet on a single page by tightening whitespace. */
  @page {
    /* Fit the sheet snugly on a single A4 page by removing default
       printer margins.  Some printers impose minimum margins;
       setting this to 0 yields the tightest fit possible. */
    size: A4;
    margin: 0;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    /* Preserve colours and backgrounds during printing */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Override wrapper spacing specifically when printing to eliminate extra
     whitespace above and below the sheet. */
  .pms-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Scale down the entire printable content slightly to ensure that
     long tables (e.g., 31-day glucose sheets) fit on a single A4 page
     without spilling over to a second page.  The transform origin is
     set to the top left to avoid unwanted centering. */
  .pms-printing {
    transform: scale(0.9);
    transform-origin: top left;
  }

  /* Reduce padding in table cells during print to save vertical space. */
  .pms-preview table th,
  .pms-preview table td {
    padding: 2px !important;
    font-size: 10px !important;
  }
  body {
    background: #ffffff !important;
  }
  /* Hide everything by default on print */
  body * {
    visibility: hidden;
  }
  /* Only elements marked as printing (and their children) will be visible.
     Do not force a block display on every descendant; keep native display
     values (e.g. table, table-row, table-cell) so that layouts like tables
     render correctly when printing.  Setting visibility here allows us to
     unhide the content while preserving structure. */
  .pms-printing,
  .pms-printing * {
    visibility: visible !important;
  }
  .pms-printing {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  /* Hide elements specifically marked as print-hidden */
  .pms-print-hidden {
    display: none !important;
  }
  /* Show elements marked as print-block */
  .pms-print-block {
    display: block !important;
  }
}