/* CareLink custom styles */

/* ===== Mobile-first responsiveness ===== */

/* Smooth horizontal scroll for data tables on small screens */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-wrap table { min-width: 560px; }

/* Bigger touch targets on phones */
@media (max-width: 640px) {
  button, .tab-btn, a.btn, input[type="submit"] {
    min-height: 44px;
  }
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    min-height: 44px;
  }
  /* tab bars scroll horizontally instead of wrapping awkwardly */
  #doctor-tabs, #pharmacy-tabs, #admin-tabs, #portal-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  #doctor-tabs::-webkit-scrollbar, #pharmacy-tabs::-webkit-scrollbar,
  #admin-tabs::-webkit-scrollbar, #portal-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
  /* modals take almost full screen on phones */
  #modal-overlay > div {
    max-width: 100% !important;
    max-height: 94vh !important;
    border-radius: 1rem 1rem 0 0;
    align-self: flex-end;
  }
  #modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  /* table cells slightly tighter */
  table th, table td { padding: 0.5rem !important; }
}

/* Active tap feedback */
@media (hover: none) {
  button:active, .tab-btn:active { transform: scale(0.97); transition: transform 0.05s; }
}

/* ===== ID-1 card print (85.60 x 53.98 mm) ===== */
.print-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 85.6mm);
  gap: 6mm;
  justify-content: center;
}

.card-id1 {
  width: 85.6mm;
  height: 53.98mm;
  position: relative;
}

/* crop marks via outline */
.card-front {
  width: 100%;
  height: 100%;
  border: 0.3mm dashed #94a3b8;
  border-radius: 3mm;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 3mm;
  box-sizing: border-box;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.2mm;
}
.card-header .brand { font-weight: 800; }
.card-header .serial { font-family: monospace; font-size: 2.4mm; direction: ltr; opacity: 0.9; }

.card-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-top: 2mm;
}
.qr-canvas {
  background: #fff;
  border-radius: 1.5mm;
  width: 24mm !important;
  height: 24mm !important;
}
.card-info .label { font-size: 3.4mm; font-weight: 700; margin: 0; }
.card-info .hint { font-size: 2.6mm; opacity: 0.85; margin: 1mm 0 0; }

.card-footer { font-size: 2.2mm; opacity: 0.75; text-align: center; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .card-front { border-style: solid; border-color: #ddd; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 8mm; }
}