/* Wave 6 + A + B + C — combined UI styles
   Added sections: Rx Templates, Waiting List, Staff, Subscription, Support, No-Show card */

/* ─── Shared section shell ─── */
.w6-section {
  background: #0F1C30;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

.w6-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.w6-section-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: #E8EEF5;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.w6-section-head .sub { font-size: 12px; color: rgba(232,238,245,0.55); margin-top: 2px; }

.w6-btn {
  background: linear-gradient(135deg, #00D4B4 0%, #5B8DEF 100%);
  color: #041812;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.w6-btn:hover { transform: translateY(-1px); }
.w6-btn.ghost {
  background: transparent;
  color: #E8EEF5;
  border: 1px solid rgba(255,255,255,0.1);
}
.w6-btn.ghost:hover { background: rgba(255,255,255,0.05); }
.w6-btn.danger { background: linear-gradient(135deg, #EF4444 0%, #F5A623 100%); color: #fff; }
.w6-btn.sm { padding: 6px 12px; font-size: 12px; }
.w6-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ─── Prescription Templates ─── */
.rx-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rx-template {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.rx-template:hover {
  border-color: rgba(0,212,180,0.3);
  background: rgba(0,212,180,0.04);
  transform: translateY(-1px);
}
.rx-template .rx-name { color: #E8EEF5; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.rx-template .rx-category {
  display: inline-block;
  background: rgba(91,141,239,0.15);
  color: #5B8DEF;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.rx-template .rx-preview { color: rgba(232,238,245,0.6); font-size: 12px; line-height: 1.5; }
.rx-template .rx-meta { margin-top: 8px; font-size: 11px; color: rgba(232,238,245,0.4); }
.rx-template .rx-actions {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: none;
  gap: 4px;
}
.rx-template:hover .rx-actions { display: flex; }
.rx-template .rx-actions button {
  background: rgba(5,9,20,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(232,238,245,0.7);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.rx-template .rx-actions button:hover { color: #E8EEF5; background: rgba(255,255,255,0.08); }

/* ─── Waiting List ─── */
.waitlist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.waitlist-table th, .waitlist-table td {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.waitlist-table th {
  background: rgba(255,255,255,0.03);
  color: rgba(232,238,245,0.65);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.waitlist-table td { color: #E8EEF5; }
.waitlist-prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.waitlist-prio.p0 { background: rgba(255,255,255,0.2); }
.waitlist-prio.p1 { background: #5B8DEF; }
.waitlist-prio.p2 { background: #F5A623; }
.waitlist-prio.p3 { background: #EF4444; }

/* ─── No-Show Card ─── */
.noshow-card {
  background: linear-gradient(135deg, rgba(245,166,35,0.04), rgba(239,68,68,0.04));
  border: 1px solid rgba(245,166,35,0.22);
  border-radius: 14px;
  padding: 18px;
}
.noshow-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.noshow-stat { flex: 1; min-width: 120px; }
.noshow-stat .val { font-size: 24px; font-weight: 800; color: #F5A623; }
.noshow-stat .lbl { font-size: 11.5px; color: rgba(232,238,245,0.55); margin-top: 2px; }
.noshow-offenders { list-style: none; padding: 0; margin: 0; }
.noshow-offenders li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.noshow-offenders li .name { color: #E8EEF5; }
.noshow-offenders li .phone { color: rgba(232,238,245,0.5); font-size: 11.5px; }
.noshow-offenders li .count {
  background: rgba(239,68,68,0.2);
  color: #EF4444;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}

/* ─── Staff Management ─── */
.staff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.staff-table th, .staff-table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.staff-table th { background: rgba(255,255,255,0.03); color: rgba(232,238,245,0.6); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.role-badge.owner { background: rgba(0,212,180,0.15); color: #00D4B4; }
.role-badge.doctor { background: rgba(91,141,239,0.15); color: #5B8DEF; }
.role-badge.nurse { background: rgba(139,92,246,0.15); color: #8B5CF6; }
.role-badge.secretary { background: rgba(245,166,35,0.15); color: #F5A623; }

/* ─── Subscription / Billing ─── */
.sub-hero {
  background: linear-gradient(135deg, rgba(0,212,180,0.06), rgba(91,141,239,0.06));
  border: 1px solid rgba(0,212,180,0.25);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.sub-hero .label { font-size: 12px; color: rgba(232,238,245,0.55); text-transform: uppercase; letter-spacing: 0.5px; }
.sub-hero .plan-name { font-size: 28px; font-weight: 900; color: #E8EEF5; margin-top: 4px; }
.sub-hero .status { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; margin-top: 8px; }
.sub-hero .status.trial { background: rgba(245,166,35,0.15); color: #F5A623; }
.sub-hero .status.active { background: rgba(0,212,180,0.18); color: #00D4B4; }
.sub-hero .status.cancelled { background: rgba(239,68,68,0.15); color: #EF4444; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.plan-card {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.plan-card:hover {
  border-color: rgba(0,212,180,0.4);
  background: rgba(0,212,180,0.04);
}
.plan-card.selected {
  border-color: #00D4B4;
  background: rgba(0,212,180,0.06);
}
.plan-card h4 { font-size: 16px; font-weight: 700; color: #E8EEF5; margin-bottom: 6px; }
.plan-card .price { font-size: 26px; font-weight: 900; color: #00D4B4; }
.plan-card .price .u { font-size: 12px; font-weight: 500; color: rgba(232,238,245,0.55); }
.plan-card ul { list-style: none; padding: 0; margin: 14px 0 0 0; }
.plan-card li { font-size: 12.5px; color: rgba(232,238,245,0.75); padding: 4px 0; }
.plan-card li::before { content: '✓ '; color: #00D4B4; font-weight: 700; }

.invoice-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.invoice-table th, .invoice-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid rgba(255,255,255,0.05); }
.invoice-table th { background: rgba(255,255,255,0.03); color: rgba(232,238,245,0.6); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.inv-status { padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; display: inline-block; }
.inv-status.paid { background: rgba(0,212,180,0.15); color: #00D4B4; }
.inv-status.pending { background: rgba(245,166,35,0.15); color: #F5A623; }
.inv-status.failed { background: rgba(239,68,68,0.15); color: #EF4444; }

/* ─── Trial Banner ─── */
.trial-banner {
  background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(91,141,239,0.08));
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.trial-banner .ic { font-size: 22px; }
.trial-banner .txt { flex: 1; }
.trial-banner .txt strong { color: #F5A623; }
.trial-banner .days { font-size: 13px; color: rgba(232,238,245,0.8); }

/* ─── Support Tickets ─── */
.ticket-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.ticket-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.ticket-item .t-sub { color: #E8EEF5; font-size: 13.5px; font-weight: 600; }
.ticket-item .t-meta { color: rgba(232,238,245,0.5); font-size: 11.5px; margin-top: 2px; }
.t-status { padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.t-status.open { background: rgba(91,141,239,0.15); color: #5B8DEF; }
.t-status.resolved { background: rgba(0,212,180,0.15); color: #00D4B4; }
.t-status.closed { background: rgba(255,255,255,0.08); color: rgba(232,238,245,0.6); }

/* ─── Referral Card ─── */
.ref-card {
  background: linear-gradient(135deg, rgba(139,92,246,0.05), rgba(91,141,239,0.05));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 14px;
  padding: 20px;
}
.ref-code-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(5,9,20,0.6);
  padding: 12px 14px;
  border-radius: 10px;
  margin: 12px 0;
}
.ref-code-box code {
  flex: 1;
  font-family: 'Monaco', monospace;
  color: #8B5CF6;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-stats { display: flex; gap: 16px; margin-top: 12px; }
.ref-stats .s-item { flex: 1; }
.ref-stats .s-val { font-size: 22px; font-weight: 800; color: #8B5CF6; }
.ref-stats .s-lbl { font-size: 11px; color: rgba(232,238,245,0.55); }

/* ─── Modal — generic ─── */
.w6-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5,9,20,0.7); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.w6-modal.open { display: flex; }
.w6-modal-card {
  background: #0F1C30;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 28px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.w6-modal-card h3 {
  font-size: 18px;
  color: #E8EEF5;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.w6-modal-card h3 .close { cursor: pointer; color: rgba(232,238,245,0.5); background: none; border: none; font-size: 22px; }
.w6-modal-card h3 .close:hover { color: #E8EEF5; }
.w6-modal-card label {
  display: block;
  font-size: 12px;
  color: rgba(232,238,245,0.65);
  margin: 12px 0 4px 0;
  font-weight: 600;
}
.w6-modal-card input, .w6-modal-card select, .w6-modal-card textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(5,9,20,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #E8EEF5;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}
.w6-modal-card input:focus, .w6-modal-card select:focus, .w6-modal-card textarea:focus { border-color: #00D4B4; }
.w6-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.w6-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(232,238,245,0.5);
  font-size: 13px;
}

/* Med row inside Rx Template editor */
.med-row { display: flex; gap: 8px; margin-bottom: 6px; }
.med-row input { flex: 1; }
.med-row .x { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(232,238,245,0.6); padding: 0 10px; border-radius: 8px; cursor: pointer; }
.med-row .x:hover { background: rgba(239,68,68,0.1); color: #EF4444; border-color: rgba(239,68,68,0.3); }

@media (max-width: 640px) {
  .w6-section { padding: 18px 16px; }
  .plan-grid { grid-template-columns: 1fr; }
  .rx-template-grid { grid-template-columns: 1fr; }
}