#toast-container .toast{
    opacity: 1 !important;
}
.b-1 {
    border: 1px solid gray
}

.p-2 {
    padding: 2px;
}

.w-content {
    width:max-content;
}

.m-20{
    margin: 20px;
}
.card{
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0px 8px;
    color: white;
    margin-bottom: 8px;
}
.violet{
    background-color: blueviolet;
}
.blue{
    background-color: blue;
}
.green{
    background-color: #02b502;
}
.teal{
    background-color: #028ab5;
}
.magenta{
    background-color: #880276;
}
.font-36{
    font-size: 36px;
}
.font-24-i{
    font-size: 24px !important;
}
.text-warning-i{
    color: #f70505;
}

.presc-section {
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: visible !important;
    padding: 0 !important;
}

div.row > div.presc-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.presc-section.col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.presc-header {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.presc-header-title {
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.presc-body {
    padding: 5px 8px;
    background-color: #f8fafc;
    overflow: visible;
}

.presc-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
}

.presc-section .input-group {
    margin-bottom: 5px;
    overflow: visible;
}

.presc-section .input-group:last-child {
    margin-bottom: 0;
}

.presc-section .form-control {
    height: 28px;
    padding: 3px 8px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.presc-section .form-control:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.presc-section .input-group-btn .btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.presc-section .input-group-btn .btn:active {
    transform: translateY(0.5px);
}

.presc-section .btn-success {
    background-color: #10b981;
    color: #ffffff;
}

.presc-section .btn-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.presc-section .btn-primary {
    background-color: #6366f1;
    color: #ffffff;
}

.presc-section .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.presc-header .btn {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1;
    border-radius: 4px;
}

.followup-section .presc-header {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.followup-section .presc-body {
    background-color: #fffbeb;
}

/* full-width but never wider than the box it sits in */
.followup-section .form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-color: #fcd34d;
}

.followup-section .form-control:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.followup-section .followup-custom {
    margin-top: 6px;
}

.followup-note {
    display: block;
    color: #92400e;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 5px;
}

.oe-row {
    display: flex;
    gap: 3px;
    align-items: stretch;
    flex-wrap: nowrap;
    min-width: 0;
}

.oe-part-1 {
    flex: 4 1 0;
    min-width: 0;
}

.oe-part-2 {
    flex: 3 1 0;
    min-width: 0;
}

.oe-part-3-wrapper {
    flex: 3 1 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}

.oe-part-3-wrapper .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.oe-part-3-wrapper .input-group-btn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    width: auto;
    min-width: 20px;
    justify-content: center;
}

.oe-part-3-wrapper .input-group-btn .btn {
    height: 14px !important;
    min-width: 14px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    font-size: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.oe-actions .btn:active {
    transform: translateY(0.5px);
}

.oe-actions .btn-danger {
    background-color: #ef4444;
}

.oe-actions .btn-success {
    background-color: #10b981;
}

.oe-actions .btn-default {
    background-color: #94a3b8;
    color: #ffffff;
}

.presc-section .input-sm {
    padding-left: 10px;
    padding-right: 10px;
}

.presc-section .dropdown-menu {
    z-index: 1050;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-top: 4px;
}

/* ...but an input carrying typeahead-append-to-body moves its
   <ul class="dropdown-menu"> out to <body>, where the rule above - scoped to
   .presc-section - no longer reaches it and Bootstrap's own .dropdown-menu
   z-index of 1000 applies. On a plain page that is high enough. Inside a modal
   (backdrop 1040, window 1050) it is painted behind the dialog: the matches are
   built and the list is display:block, it is simply invisible and unclickable.
   That is why the disease-template editor looked like it had no suggestion data
   for H/O, R/F, O/E, diagnosis, investigation done, plan of treatment,
   investigation and advice, while the medicine boxes - the only ones in that
   form without append-to-body - worked.
   Scoped to body.modal-open, so this is inert on the prescription form and
   everywhere else no modal is open; a direct child of <body> with this class is
   by definition a menu that was appended there. */
body.modal-open > .dropdown-menu {
    z-index: 1060;
}

/* A body-appended list (pad Investigation / Advice, up to 50 rows) ran past
   the bottom of the window with no way to reach its last rows. It scrolls on
   its own now; common.js keeps it under its input as the pad scrolls. */
body > ul.dropdown-menu {
    max-height: 55vh;
    overflow-y: auto;
}

.presc-section .dropdown-menu > li > a {
    padding: 6px 12px;
    font-size: 13px;
    color: #334155;
}

.presc-section .dropdown-menu > li > a:hover,
.presc-section .dropdown-menu > li > a:focus {
    background-color: #f1f5f9;
    color: #0f766e;
}

.presc-section .dropdown-menu .active a,
.presc-section .dropdown-menu .active a:hover,
.presc-section .dropdown-menu .active a:focus {
    background-color: #0d9488;
    color: #ffffff;
}

@media (max-width: 768px) {
    .oe-row {
        flex-wrap: wrap;
    }

    .oe-part-1,
    .oe-part-2,
    .oe-part-3-wrapper {
        flex: 1 1 100%;
    }

    .oe-part-3-wrapper {
        flex-direction: row;
    }
}

/* Landing Page overrides for body.app background */
body.landing-page-active .app,
body.landing-page-active #app {
  background: #fff !important;
  background-image: none !important;
}

/* Landing Page */
.landing-page {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #334155;
  line-height: 1.6;
  overflow-x: hidden;
  background: #fff;
}

.landing-page * {
  box-sizing: border-box;
}

.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.landing-nav.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.landing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f766e;
  font-weight: 700;
  font-size: 20px;
}

.landing-logo img {
  height: 36px;
  width: auto;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-nav-links a {
  text-decoration: none;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.landing-nav-links a:hover {
  color: #0d9488;
}

.landing-nav-cta {
  background: #0d9488 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.landing-nav-cta:hover {
  background: #0f766e !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.landing-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #334155;
  cursor: pointer;
}

.landing-hero {
  padding: 140px 0 100px;
  background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
}

.landing-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.landing-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.landing-hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.landing-hero-content h1 span {
  color: #0d9488;
}

.landing-hero-content p {
  font-size: 18px;
  color: #64748b;
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 480px;
}

.landing-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.btn-landing-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0d9488;
  color: #fff;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-landing-primary:hover {
  background: #0f766e;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(13, 148, 136, 0.3);
  color: #fff;
}

.btn-landing-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #0d9488;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #0d9488;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-landing-secondary:hover {
  background: #f0fdfa;
  transform: translateY(-2px);
  color: #0d9488;
}

.landing-hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #94a3b8;
}

.landing-hero-trust i {
  color: #10b981;
  font-size: 16px;
}

.landing-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-hero-placeholder {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 25px 60px rgba(13, 148, 136, 0.25);
}

.landing-trust {
  padding: 40px 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.landing-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.landing-trust-item {
  text-align: center;
}

.landing-trust-number {
  font-size: 36px;
  font-weight: 800;
  color: #0d9488;
  line-height: 1;
}

.landing-trust-label {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.landing-section {
  padding: 100px 0;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.landing-section-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.landing-section-header p {
  font-size: 18px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.landing-section-alt {
  background: #f8fafc;
}

.landing-features-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.landing-feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px;
  transition: all 0.3s ease;
}

.landing-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: #0d9488;
}

.landing-feature-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
}

.landing-feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.landing-feature-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

.landing-steps {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.landing-step {
  text-align: center;
  position: relative;
}

.landing-step-number {
  width: 48px;
  height: 48px;
  background: #0d9488;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto 16px;
}

.landing-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-step p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.landing-pricing-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.landing-pricing-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.landing-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.landing-pricing-card.popular {
  border-color: #0d9488;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.15);
  transform: scale(1.03);
}

.landing-pricing-card.popular:hover {
  transform: scale(1.03) translateY(-6px);
}

.landing-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.landing-pricing-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-pricing-price {
  font-size: 48px;
  font-weight: 800;
  color: #0d9488;
  margin-bottom: 4px;
  line-height: 1;
}

.landing-pricing-price span {
  font-size: 18px;
  font-weight: 500;
  color: #64748b;
}

.landing-pricing-period {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 24px;
}

.landing-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}

.landing-pricing-features li {
  padding: 10px 0;
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.landing-pricing-features li i {
  margin-top: 3px;
  font-size: 14px;
}

.landing-pricing-features li i.fa-check {
  color: #10b981;
}

.landing-pricing-features li i.fa-times {
  color: #ef4444;
}

.landing-testimonials-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  transition: all 0.3s ease;
}

.landing-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.landing-testimonial-stars {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.landing-testimonial-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.landing-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.landing-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.landing-testimonial-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.landing-testimonial-info span {
  font-size: 13px;
  color: #64748b;
}

.landing-faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.landing-faq-item:hover {
  border-color: #0d9488;
}

.landing-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.landing-faq-question i {
  color: #0d9488;
  transition: transform 0.2s ease;
  font-size: 14px;
}

.landing-faq-item.active .landing-faq-question i {
  transform: rotate(180deg);
}

.landing-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.landing-faq-item.active .landing-faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.landing-faq-answer p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

.landing-cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-cta-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.landing-cta h2 {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.landing-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

.landing-cta .btn-landing-primary {
  background: #fff;
  color: #0d9488;
  font-size: 18px;
  padding: 16px 40px;
}

.landing-cta .btn-landing-primary:hover {
  background: #f0fdfa;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.landing-cta-note {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.landing-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 60px 0 30px;
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.landing-footer-brand {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.landing-footer-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.landing-footer-social {
  display: flex;
  gap: 12px;
}

.landing-footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.landing-footer-social a:hover {
  background: #0d9488;
  color: #fff;
}

.landing-footer h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.landing-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-footer-links li {
  margin-bottom: 10px;
}

.landing-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.landing-footer-links a:hover {
  color: #0d9488;
}

.landing-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.landing-footer-bottom a {
  color: #0d9488;
  text-decoration: none;
}

.landing-footer-bottom a:hover {
  text-decoration: underline;
}

.landing-fade-up {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .landing-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-hero-content p {
    max-width: 100%;
  }

  .landing-hero-buttons {
    justify-content: center;
  }

  .landing-hero-trust {
    justify-content: center;
  }

  .landing-hero-visual {
    order: -1;
  }

  .landing-hero-content h1 {
    font-size: 40px;
  }

  .landing-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .landing-pricing-card.popular {
    transform: none;
  }

  .landing-pricing-card.popular:hover {
    transform: translateY(-6px);
  }

  .landing-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .landing-nav-links {
    display: none;
  }

  .landing-mobile-toggle {
    display: block;
  }

  .landing-hero {
    padding: 120px 0 60px;
  }

  .landing-hero-content h1 {
    font-size: 32px;
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-steps {
    grid-template-columns: 1fr;
  }

  .landing-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer-grid {
    grid-template-columns: 1fr;
  }

  .landing-section {
    padding: 70px 0;
  }

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

  .landing-cta h2 {
    font-size: 28px;
  }
}



/* Prescription patient-info block: labels live inside the fields (placeholders)
   so the header takes fewer vertical lines. */
.patient-info-row > [class*="col-"] {
  margin-bottom: 6px;
}

.patient-info-row .form-control::-webkit-input-placeholder {
  color: #7a8794;
  opacity: 1;
}

.patient-info-row .form-control::-moz-placeholder {
  color: #7a8794;
  opacity: 1;
}

.patient-info-row .form-control:-ms-input-placeholder {
  color: #7a8794;
}

.patient-info-row .form-control::placeholder {
  color: #7a8794;
  opacity: 1;
}

.patient-info-row .input-group-addon input[type="checkbox"] {
  margin: 0 3px 0 0;
  vertical-align: middle;
}

/* ---- Patient details card (prescription/new.tmpl.html) ------------------
   The block was three bare rows of boxes, with grey label chips on the first
   four fields and nothing on the other sixteen - two shapes in one block and
   no edge around any of it. It is one bordered card with a caption now. The
   fields, their order and their bindings are untouched; this is frame and
   labelling only. */
.patient-info-row {
  /* Lined up with the medicine rows directly under it. Those sit in a
     col-md-12 with an inline margin-left:-10px (new.tmpl.html, shared by the
     eye / pediatric / dental panels), so they start 10px left of this column
     and end 10px short of its right edge; with margin 0 the card overhung
     them by 10px on both sides. The bottom margin is the gap the card did not
     have - it sat flush on the first medicine row. Phones override all three
     in new.tmpl.html's own <style>, where the inline -10px is neutralised. */
  margin-left: -10px !important;
  margin-right: 10px !important;
  margin-bottom: 10px !important;
  padding: 9px 0 3px;
  border: 1px solid #dde6ea;
  border-radius: 8px;
  background: #fff;
}

.patient-info-row .pc-head {
  width: 100%;
  order: -1;
  display: flex;
  /* centre, not baseline: the Scan slip box (30px) sits in this row too */
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 15px 7px;
  margin-bottom: 9px;
  border-bottom: 1px solid #eef3f5;
}

.pc-head-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #52636f;
}

.pc-head-title .fa { margin-right: 5px; }

.pc-head-hint { font-size: 11.5px; color: #8a97a0; }

/* The label chips are gone, so the placeholder carries the label while a box
   is empty. This brings the label back as a small caption once the box has
   something in it - otherwise a filled form is twenty values with nothing
   saying what they are. A browser without :placeholder-shown simply never
   shows the caption; the placeholder did the job either way. */
.pc-field { position: relative; }

.pc-field > .pc-label {
  position: absolute;
  top: -7px;
  left: 9px;
  z-index: 2;
  padding: 0 4px;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7a8794;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.pc-field > input:not(:placeholder-shown) + .pc-label,
.pc-field > input:focus + .pc-label { opacity: 1; }

/* Rcpt and Sp.Note are one pair of buttons, not two rows of one. Bootstrap's
   .btn-group floats its children, so in a narrow column the second one
   dropped under the first. */
.patient-info-row .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Every box in the block is the same height, whatever it is made of: a plain
   input, the sex select, the PID group and the backdate group all line up. */
.patient-info-row .form-control,
.patient-info-row .btn { height: 32px; }
.patient-info-row .btn-group .btn { height: 32px; }

/* Backdate + Rcpt + Sp.Note share one column on one line. The backdate is a
   small calendar button: grey when today's date prints, teal with the date
   when a backdate is set. A transparent input lies over it, because focus on
   that input is what opens the angularjs-datepicker calendar. */
.patient-info-row .pad-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

/* angular-datepicker.css gives every .datepicker width:100% and a float */
.backdate-pick.datepicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    float: none;
}

.backdate-pick .backdate-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.backdate-pick .backdate-toggle {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    box-shadow: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.backdate-pick:hover .backdate-toggle {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}

.backdate-pick .backdate-toggle.active,
.backdate-pick:hover .backdate-toggle.active {
    background-color: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
    padding-right: 26px;
}

/* sits above the transparent input so it gets its own click */
.backdate-pick .backdate-clear {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

.backdate-pick .backdate-clear:hover {
    background: rgba(255, 255, 255, 0.4);
}

.backdate-pick ._720kb-datepicker-calendar {
    top: 100%;
    left: 0;
    width: 250px;
    margin-top: 2px;
}

/* ---- patient name in the PID / patient suggestion list -------------
   Shared by the prescription form, appointments and the public booking form
   (post-custom-template.tmpl.html).

   Was an inline rgb(139, 1, 86) - a dark purple that sat heavily on white and,
   being inline, could not be overridden anywhere: on Bootstrap's selected row
   (#fff on #337ab7) the name stayed dark purple on blue and was the hardest
   thing in the list to read. A class can answer both states. */
.pid-name {
    color: #0f766e;
    font-weight: 600;
}

.dropdown-menu > .active > a .pid-name {
    color: #fff;
}

/* ---- generic / company / tags in the medicine suggestion list --------
   (medicine-template.tmpl.html). Were inline pink and purple, which clashed
   with the teal list and could not change on the selected row, where they sat
   dark on teal. The selected row turns them light teal / soft white, and the
   details (i) button with them - it was teal on teal there. */
.med-sug-generic {
    color: #0f766e;
}

.med-sug-company {
    color: #64748b;
    font-size: 12px;
}

.med-sug-tags {
    color: #475569;
    font-size: 12px;
}

.dropdown-menu > .active > a .med-sug-generic {
    color: #ccfbf1;
}

.dropdown-menu > .active > a .med-sug-company,
.dropdown-menu > .active > a .med-sug-tags {
    color: rgba(255, 255, 255, 0.82);
}

.dropdown-menu > .active > a .mdi-btn,
.dropdown-menu > .active > a .mdi-btn:hover {
    color: #ffffff;
}


/* ------------------------------------------------------------------
   Action button bars (prescription form footer, appointment form).
   Style and spacing only: the buttons, their classes and their handlers
   are unchanged. ng-include / save-template wrap some of the buttons in
   elements of their own; display: contents lets those buttons sit in the
   same row as their siblings.
   ------------------------------------------------------------------ */
.epa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.epa-actions > ng-include,
.epa-actions > save-template { display: contents; }
.epa-actions .btn {
  margin: 0 !important;
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .14);
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.epa-actions .btn .fa { margin: 0; font-size: 13px; }
.epa-actions .btn:hover:not([disabled]),
.epa-actions .btn:focus:not([disabled]) { box-shadow: 0 3px 8px rgba(15, 23, 42, .2); transform: translateY(-1px); color: #fff; }
.epa-actions .btn:active:not([disabled]) { transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.epa-actions .btn[disabled] { opacity: .5; box-shadow: none; cursor: not-allowed; }
.epa-actions .btn-success { background: #16a34a; border-color: #15803d; }
.epa-actions .btn-success:hover:not([disabled]) { background: #15803d; }
.epa-actions .btn-primary { background: #2563eb; border-color: #1d4ed8; }
.epa-actions .btn-primary:hover:not([disabled]) { background: #1d4ed8; }
.epa-actions .btn-info { background: #0891b2; border-color: #0e7490; }
.epa-actions .btn-info:hover:not([disabled]) { background: #0e7490; }
.epa-actions .btn-warning { background: #f59e0b; border-color: #d97706; }
.epa-actions .btn-warning:hover:not([disabled]) { background: #d97706; }
.epa-actions .btn-danger { background: #dc2626; border-color: #b91c1c; }
.epa-actions .btn-danger:hover:not([disabled]) { background: #b91c1c; }
.epa-actions .btn-default { background: #fff; border-color: #cbd5e1; color: #334155; }
.epa-actions .btn-default:hover:not([disabled]),
.epa-actions .btn-default:focus:not([disabled]) { background: #f1f5f9; color: #0f172a; }
/* The "name your template" box save-template opens takes its own line. */
.epa-actions > save-template > .form-group { flex: 1 1 100%; order: 10; margin: 4px 0 0 !important; border-radius: 6px; }
.epa-actions > save-template > .form-group .btn { margin-top: 6px !important; }
.presc-actions { padding-bottom: 6px; }

/* The corner stack is fixed to the viewport, so whatever is at the very end of
   a page sits under it with no scrolling left to free it - on the appointments
   list that was the last row's Slip button. Reserving the stack's height at the
   bottom of the scrolling content lets the last row always be scrolled clear.
   Caught by the hit-target audit in srv/tests/browser/release-flows.cjs. */
#content { padding-bottom: 170px; }

/* Floating "Tour" button on the prescription pad (appTourFab in
   common/app-tour.js). Sits above the app's Go To Top button (#to-top). */
.epa-tour-fab { position: fixed; right: 14px; bottom: 52px; z-index: 1030; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.epa-tour-fab > * { pointer-events: auto; }
.epa-tour-fab-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px 8px 12px;
  background: #0f766e; color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .25); transition: transform .15s ease, background .15s ease; }
.epa-tour-fab-btn:hover, .epa-tour-fab-btn:focus { background: #0d9488; transform: translateY(-1px); outline: none; }
.epa-tour-fab-btn .fa { font-size: 16px; }
.epa-tour-fab-hint { position: relative; width: 270px; background: #fff; color: #334155; border: 1px solid #cfe7e3; border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  animation: epa-tour-fab-in .25s ease-out; }
.epa-tour-fab-hint:after { content: ''; position: absolute; right: 26px; bottom: -7px; width: 12px; height: 12px; background: #fff;
  border-right: 1px solid #cfe7e3; border-bottom: 1px solid #cfe7e3; transform: rotate(45deg); }
.epa-tour-fab-hint b { display: block; color: #0f172a; font-size: 13.5px; margin: 0 16px 3px 0; }
.epa-tour-fab-hint b .fa { color: #0f766e; }
.epa-tour-fab-hint > span { display: block; }
.epa-tour-fab-bn { color: #64748b; margin-top: 3px; }
.epa-tour-fab-actions { display: flex !important; align-items: center; justify-content: space-between; margin-top: 9px; }
.epa-tour-fab-actions a { color: #64748b; font-size: 12px; }
.epa-tour-fab-x { position: absolute; top: 4px; right: 8px; border: 0; background: none; font-size: 18px; line-height: 1; color: #94a3b8; }
.epa-tour-fab-x:hover { color: #0f172a; }
@keyframes epa-tour-fab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .epa-tour-fab { right: 10px; bottom: 50px; }
  .epa-tour-fab-btn span { display: none; }
  .epa-tour-fab-btn { padding: 10px 11px; }
  .epa-tour-fab-hint { width: 240px; }
}
/* "Hide" at the foot of the stack: quiet on purpose, it is not a task. */
.epa-tour-fab > .epa-tour-fab-hide { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 3px 10px; background: rgba(255, 255, 255, .92); color: #64748b; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.epa-tour-fab > .epa-tour-fab-hide:hover, .epa-tour-fab > .epa-tour-fab-hide:focus { color: #0f172a; border-color: #94a3b8; outline: none; }
.epa-tour-fab-ask b .fa { color: #64748b; }
.epa-tour-fab-ask > span { display: block; }
.epa-tour-fab-ask > span > span { display: block; }
.epa-tour-fab-choices { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.epa-tour-fab-choices a { margin-left: auto; color: #64748b; font-size: 12px; }
.epa-tour-fab > .epa-tour-fab-ask { width: min(312px, calc(100vw - 32px)); }
.epa-help-hidden { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.epa-help-hidden-bn { color: #92400e; margin-left: 4px; }
@media print { .epa-tour-fab { display: none !important; } }

/* Left menu on a short screen. The menu is taller than a laptop window once
   every item is shown (DEV sees the most), and it used to clip the overflow
   while Logout, pinned to the bottom, sat on top of the last items. Now the
   menu scrolls, and Logout follows the items - still at the bottom whenever
   there is room. Thin scrollbar so the 60px icon rail keeps its icons. */
#sidebar .main-menu,
#sidebar .main-menu:hover,
#sidebar nav.main-menu.expanded {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
#sidebar .main-menu > ul { flex: 0 0 auto; }
#sidebar .main-menu > ul.logout { position: static; margin-top: auto; }
#sidebar .main-menu::-webkit-scrollbar { width: 5px; }
#sidebar .main-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 3px; }

/* Pad form: a required box left empty on Save (Sex). */
.presc-missing { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, .15) !important; }

/* Show / hide password (common/password-reveal.js): the eye sits inside the box,
   on its right edge. In an .input-group the wrap stands in for the input's cell. */
.pw-wrap { position: relative; display: block; }
.input-group > .pw-wrap { display: table-cell; width: 100%; vertical-align: middle; }
.input-group > .pw-wrap > .form-control { display: block; width: 100%; float: none; }
.input-group > .pw-wrap:last-child > .form-control { border-radius: 0 4px 4px 0; }
.input-group > .pw-wrap:first-child > .form-control { border-radius: 4px 0 0 4px; }
.input-group > .pw-wrap:last-child > .input-sm { border-radius: 0 3px 3px 0; }
.pw-wrap > input { padding-right: 38px !important; }
.pw-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 38px; z-index: 3; padding: 0; margin: 0;
  border: 0; background: transparent; color: #94a3b8; font-size: 15px; line-height: 1; cursor: pointer; }
.pw-eye:hover, .pw-eye:focus { color: #0f766e; outline: none; }
.pw-eye.on { color: #0f766e; }
input[type=password]::-ms-reveal, input[type=password]::-ms-clear { display: none; }

/* The app's mark beside the name in the top bar. */
.epa-navbrand { display: inline-flex !important; align-items: center; white-space: nowrap; }
.epa-navbrand img { width: 28px; height: 28px; margin-right: 8px; flex-shrink: 0; }

/* ---- Explain (common/explain-mode.js) and its corner button ------------- */
.epa-explain-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 7px 13px 7px 11px; background: #fff; color: #1d4ed8; font-weight: 600; font-size: 13px; line-height: 1.2;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .15); }
.epa-explain-btn .fa { font-size: 15px; }
.epa-explain-btn:hover, .epa-explain-btn:focus { border-color: #1d4ed8; outline: none; }
.epa-explain-btn.is-on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
@media (max-width: 767px) { .epa-explain-btn span { display: none; } .epa-explain-btn { padding: 9px 10px; } }

.epa-xp { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 1060; }
.epa-xp > * { pointer-events: auto; }
.epa-xp-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 12px; padding: 7px 14px; background: #1e3a8a; color: #e0e7ff; font-size: 13px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .25); }
.epa-xp-bar b { color: #fff; }
.epa-xp-bar-bn { margin-left: 6px; color: #c7d2fe; }
.epa-xp-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.epa-xp-bar-actions button { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.epa-xp-bar-actions button:hover { background: rgba(255, 255, 255, .22); }
.epa-xp-bar-actions .epa-xp-done { background: #fff; color: #1e3a8a; border-color: #fff; }
.epa-xp-dot-sample, .epa-xp-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: #2563eb; color: #fff; font: 700 12px/1 Arial, sans-serif; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .35); }
.epa-xp-dot { position: fixed; left: 0; top: 0; padding: 0; cursor: pointer; transition: transform .12s ease-out, background .12s;
  animation: epa-xp-pop .25s ease-out; }
.epa-xp-dot:hover, .epa-xp-dot.is-open { background: #f59e0b; }
.epa-xp-dot:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
@keyframes epa-xp-pop { from { opacity: 0; } to { opacity: 1; } }
.epa-xp-ring { position: fixed; border: 2px solid #f59e0b; border-radius: 8px; box-shadow: 0 0 0 4000px rgba(15, 23, 42, .18);
  pointer-events: none !important; transition: all .15s ease-out; }
.epa-xp-card { position: fixed; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 72px); overflow: auto;
  background: #fff; color: #334155; border-radius: 12px; padding: 14px 16px 12px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .3); border-top: 4px solid #2563eb; }
.epa-xp-title { font-weight: 700; color: #0f172a; font-size: 14.5px; margin: 0 18px 6px 0; }
.epa-xp-bn { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; color: #1e293b; font-size: 13.5px; }
.epa-xp-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; line-height: 1; color: #94a3b8; }
.epa-xp-x:hover { color: #0f172a; }
.epa-xp-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.epa-xp-play { border: 0; border-radius: 999px; padding: 6px 12px; background: #eff6ff; color: #1d4ed8; font-weight: 600; font-size: 12.5px; }
.epa-xp-play.is-playing { background: #1d4ed8; color: #fff; }
.epa-xp-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.epa-xp-count { color: #94a3b8; font-size: 12px; margin-right: 4px; }
.epa-xp-nav button { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.epa-xp-nav button:disabled { opacity: .4; }
.epa-xp-next { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
body.epa-xp-on .content-wrap { padding-top: 40px; }
@media (max-width: 767px) { .epa-xp-bar-bn { display: block; margin: 2px 0 0; } .epa-xp-card { width: calc(100vw - 16px); } }
@media print { .epa-xp { display: none !important; } }

/* ---- Getting started pill and panel (common/setup-checklist.js) -------- */
.epa-cl { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.epa-cl-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 7px 13px 7px 11px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .35); }
.epa-cl-pill b { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
.epa-cl-pill:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.epa-cl-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: 420px; max-width: calc(100vw - 20px);
  overflow: auto; background: #fff; color: #334155; border-radius: 14px; padding: 12px 14px 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .28); border: 1px solid #dbeafe; animation: epa-tour-fab-in .2s ease-out; }
.epa-cl-head { display: flex; align-items: center; gap: 8px; }
.epa-cl-head b { color: #0f172a; font-size: 14.5px; }
.epa-cl-head b .fa { color: #2563eb; }
.epa-cl-of { margin-left: auto; color: #64748b; font-size: 12px; font-weight: 600; }
.epa-cl-x { border: 0; background: none; font-size: 20px; line-height: 1; color: #94a3b8; padding: 0 2px; }
.epa-cl-bar { height: 5px; border-radius: 3px; background: #e2e8f0; margin: 8px 0; overflow: hidden; }
.epa-cl-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #10b981); border-radius: 3px; transition: width .3s; }
.epa-cl-lead { font-size: 12.5px; margin: 0 0 6px; color: #475569; }
.epa-cl-bn { display: block; color: #64748b; font-size: 12.5px; }
.epa-cl-list { list-style: none; margin: 0; padding: 0; }
.epa-cl-list li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.epa-cl-mark { flex: 0 0 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: #eff6ff; color: #2563eb; font-size: 13px; }
.epa-cl-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.epa-cl-text b { display: block; color: #0f172a; font-size: 13px; }
.epa-cl-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.epa-cl-say { border: 0; background: none; color: #2563eb; padding: 2px 5px; font-size: 14px; }
.epa-cl-lead .epa-cl-say { padding: 0 4px; }
.epa-cl-go { border: 0; border-radius: 999px; background: #2563eb; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; white-space: nowrap; }
.epa-cl-list li.is-done { opacity: .6; }
.epa-cl-list li.is-done .epa-cl-mark { background: #dcfce7; color: #15803d; }
.epa-cl-list li.is-done b { text-decoration: line-through; text-decoration-color: #94a3b8; }
.epa-cl-list li.is-next { background: #f8fbff; margin: 0 -8px; padding: 8px; border-radius: 10px; border-top-color: transparent; }
.epa-cl-list li.is-next .epa-cl-mark { background: #2563eb; color: #fff; }
.epa-cl-foot { font-size: 12px; color: #94a3b8; padding-top: 6px; border-top: 1px solid #f1f5f9; }
/* The in-person chamber setup offer under the list (not a step). */
.epa-cl-visit { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 8px; padding: 9px 8px; border-radius: 10px;
  background: #f0fdf9; border: 1px solid #d1fae5; }
.epa-cl-visit .epa-cl-mark { background: #fff; color: #047857; border: 1px solid #d1fae5; }
.epa-cl-visit .epa-cl-go { background: #047857; }
.epa-cl-foot a { color: #64748b; }
@media (max-width: 767px) { .epa-cl-pill span { display: none; } }
/* Explain layers: the open card over the dots, the bar over everything; the bar
   starts after the collapsed menu so the menu's first icon stays visible. */
.epa-xp-ring { z-index: 1; }
.epa-xp-dot { z-index: 2; }
.epa-xp-card { z-index: 3; }
.epa-xp-bar { z-index: 4; }
@media (min-width: 768px) { .epa-xp-bar { left: 60px; } }

/* ---- Phones: the page itself scrolls (below 768px) -----------------------
   On a computer the app scrolls inside .content-wrap, next to the fixed
   sidebar. On a phone that inner scroller broke three things:
     - the 200px header sits ABOVE it, yet it was a full screen tall, so the
       last 200px of every page hung below the screen and could never be
       reached;
     - a drag that started on anything pinned (the corner buttons, a toast)
       scrolled nothing, because pinned things belong to the screen and the
       screen itself never scrolled;
     - Chrome's address bar never tucked away, so the page lost that room.
   Here the document scrolls instead, like any phone website. index.css loads
   after this file, hence the extra `html`/`body` in each selector. */
@media (max-width: 767px) {
  html:root, html body { height: auto; }
  html body { overflow: visible; padding-bottom: 0; }
  /* A pull-down on the pad must never reload it and lose a half-written
     prescription. */
  html:root { overscroll-behavior-y: contain; }
  body .app { height: auto; min-height: 100vh; display: flex; flex-direction: column; }
  body .content-wrap { position: relative; height: auto; flex: 1 0 auto; overflow: visible;
    overflow-x: clip; /* still no sideways wobble, without becoming a scroller */ }
  /* Room under the last thing on the page for the corner button. */
  body .content-wrap .content { padding-bottom: 84px; }
}

/* Phones: the corner stack folds into one Help button (common/app-tour.js
   appTourFab). Explain stays out while it is on, so it can be switched off. */
/* The Help fold button: phones and touch screens only (the two rules further
   down switch it on). It is a DIRECT-CHILD selector because `button:has(>
   .fa)` later in this file sets display:inline-flex, and a class plus an
   element beats a bare class - which is how a small unstyled square with a
   life-ring in it came to sit under the Tour button on every desktop page,
   doing nothing anyone could guess. Both halves of the switch are a class
   heavier now, so each still beats that rule and each other in the order
   they are written. */
.epa-tour-fab > .epa-tour-fab-fold { display: none; }
@media (max-width: 767px) {
  .epa-tour-fab > .epa-tour-fab-fold { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border: 0; border-radius: 50%; background: #0f766e; color: #fff; font-size: 20px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .28); }
  .epa-tour-fab > .epa-tour-fab-fold:focus { outline: none; box-shadow: 0 0 0 3px rgba(15, 118, 110, .35); }
  .epa-tour-fab { bottom: 16px; }
  .epa-tour-fab.is-folded > setup-checklist-dock,
  .epa-tour-fab.is-folded > feedback-pill,
  .epa-tour-fab.is-folded > .epa-tour-fab-btn,
  .epa-tour-fab.is-folded > .epa-tour-fab-hide,
  .epa-tour-fab.is-folded > .epa-tour-fab-ask,
  .epa-tour-fab.is-folded > .epa-explain-btn:not(.is-on) { display: none !important; }
  .epa-tour-fab-hint { width: min(280px, calc(100vw - 32px)); }
  /* Go To Top moves to the other corner, clear of the Help button. */
  body #to-top { right: auto; left: 12px; bottom: 16px; }
  /* The Getting started list: a sheet across the bottom of the screen. */
  .epa-cl-panel { position: fixed; z-index: 2; left: 8px; right: 8px; bottom: 74px; width: auto; max-width: none;
    max-height: calc(100vh - 110px) !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}


/* ==================================================================
   PHONE LAYOUT (<=767px). Look only - no markup, handler or desktop
   rule is changed by anything in this block. Everything is scoped to a
   screen, an id or a class that exists for this purpose, so a wider
   screen never sees it.
   ================================================================== */
@media screen and (max-width: 767px) {

  /* ---- 1. Prescription Settings tabs ------------------------------
     Eighteen tabs were one row you had to drag sideways, and the drag
     fought the page's own scroll. They wrap into two columns instead:
     every tab is reachable with a thumb, nothing moves horizontally.
     The anchors keep their order - activeTabIndex is read from their
     position in the DOM (settings.html), so order is behaviour. */
  #print-tabs .nav-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-bottom: 0 !important;
    margin-bottom: 14px;
    padding: 0;
    overflow: visible !important;
  }

  /* Bootstrap's .nav clearfix would otherwise become two grid cells of its
     own, pushing the first tab out of the top-left corner. */
  #print-tabs .nav-tabs::before,
  #print-tabs .nav-tabs::after {
    display: none !important;
  }

  #print-tabs .nav-tabs > li,
  #print-tabs .nav-tabs > li.active {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  #print-tabs .nav-tabs > li > a {
    margin: 0 !important;
    padding: 11px 12px !important;
    min-height: 46px;
    display: flex !important;
    align-items: center;
    gap: 7px;
    border: 1px solid #dbe3ec !important;
    border-radius: 9px !important;
    background: #f6f9fc;
    color: #27425e;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
  }

  #print-tabs .nav-tabs > li.active > a,
  #print-tabs .nav-tabs > li.active > a:hover,
  #print-tabs .nav-tabs > li.active > a:focus {
    background: #1f6fb2 !important;
    border-color: #1f6fb2 !important;
    color: #fff !important;
  }

  #print-tabs .nav-tabs > li > a i {
    opacity: .8;
    width: 14px;
    text-align: center;
  }

  /* Both mobile header rows share the same horizontal gutter. */
  .page-controls .navbar-header .epa-header-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .page-controls .navbar-header .epa-header-identity > .navbar-brand {
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0;
  }

  .page-controls .navbar-header .epa-header-identity > span.navbar-brand {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mobile action row: Logout on the left, menu on the right. */
  .page-controls .navbar-header .epa-xs-actions {
    display: flex !important;
    clear: both;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .page-controls .navbar-header .epa-xs-actions .navbar-toggle {
    float: none !important;
    margin: 6px 0;
  }

  .page-controls .navbar-header .epa-xs-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 13px;
  }

  .page-controls .navbar-header .epa-xs-logout > i {
    width: 28px;
    flex: 0 0 28px;
    text-align: center;
  }

  .page-controls .navbar-header .navbar-brand.epa-navbrand {
    padding-right: 6px;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- 3. The menu behind the hamburger ---------------------------
     Was a run of inline pills of every width, wrapping into ragged
     lines. Now an even three-column card grid: one tap target per entry,
     all the same size, with the page it is on marked. */
  #sidebar2.navbar {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 6px 16px rgba(16, 36, 56, .14);
    padding: 8px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar2 .main-menu,
  #sidebar2 .main-menu ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }

  #sidebar2 .main-menu ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  #sidebar2 .main-menu ul li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
  }

  #sidebar2 .main-menu ul li > a {
    display: flex !important;
    align-items: center;
    height: 100%;
    gap: 4px;
    min-height: 40px;
    padding: 6px !important;
    border: 1px solid #e3e9f0 !important;
    border-radius: 7px !important;
    background: #f6f9fc !important;
    color: #23405c !important;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
    width: auto !important;
  }

  #sidebar2 .main-menu ul li.active > a,
  #sidebar2 .main-menu ul li[ui-sref-active].active > a {
    background: #1f6fb2 !important;
    border-color: #1f6fb2 !important;
    color: #fff !important;
  }

  #sidebar2 .main-menu ul li > a i {
    font-size: 14px !important;
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
    opacity: .85;
  }

  #sidebar2 .main-menu ul li > a .nav-text {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* ---- 4. Room around the fields ----------------------------------
     The form already gives itself one gutter instead of three nested
     ones; this closes the rest of the gap - the card's own padding and
     the space under every field - so the inputs use the screen's width
     and a phone shows more of the form at once. */
  .content-wrap main > #content > .ng-scope > widget > .widget,
  .content-wrap main > #content widget > .widget {
    padding-left: 10px;
    padding-right: 10px;
  }

  #newPrescriptionForm {
    padding-left: 6px;
    padding-right: 6px;
  }

  #newPrescriptionForm .form-control,
  #newPrescriptionForm select.form-control,
  #newPrescriptionForm textarea,
  #newPrescriptionForm .input-group,
  #newPrescriptionForm .input-group.input-group-sm {
    margin-bottom: 6px;
  }

  #newPrescriptionForm .form-group {
    margin-bottom: 4px;
  }

  #newPrescriptionForm label.control-label,
  #newPrescriptionForm label.head_color {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  /* ---- 5. Quick Preview -------------------------------------------
     The page is drawn at its real size on purpose - that is the point
     of the preview - so on a phone it is wider than the screen. It gets
     its own scrolling box with a visible bar and a line saying so,
     instead of silently running off the edge of the page. */
  .presc-quick-preview .well {
    font-size: 12px;
    line-height: 1.7;
  }

  .presc-quick-preview .well > .btn.pull-right {
    float: none !important;
    display: block;
    width: 100%;
    margin: 8px 0 2px;
    padding: 9px 12px;
    font-size: 13px;
  }

  .presc-preview-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #fbfcfd;
    padding: 6px;
  }

  .presc-preview-scroll::-webkit-scrollbar {
    height: 9px;
  }

  .presc-preview-scroll::-webkit-scrollbar-thumb {
    background: #b9c6d4;
    border-radius: 6px;
  }

  .presc-preview-scroll::-webkit-scrollbar-track {
    background: #eef2f6;
    border-radius: 6px;
  }

  small.presc-preview-hint {
    display: block;
    font-size: 11.5px;
    color: #7a8794;
    margin: 0 0 6px;
  }
}

/* The hint belongs to the phone only; on a wide screen the page fits. */
.presc-preview-hint { display: none; }

/* ---------------------------------------------------------------------------
   A PATIENT LOGIN HAS NO LEFT MENU AT ALL.

   Every item in the sidebar is a doctor's screen, so for a patient the bar was
   an empty blue strip 60px wide down the side of their own portal, and the
   phone navbar still offered a button that opened nothing. The flag on <body>
   comes from $rootScope.isPatient (core.js), which session.setCurrentUser sets
   for every path into the app - including a page reload.
   --------------------------------------------------------------------------- */
body.epa-patient #sidebar,
body.epa-patient #sidebar2,
body.epa-patient .toggle-navigation-collapse,
body.epa-hospital #sidebar,
body.epa-hospital #sidebar2,
body.epa-hospital .toggle-navigation-collapse { display: none !important; }

/* and the page takes the space the bar was holding */
@media (min-width: 768px) {
  body.epa-patient .content-wrap,
  body.epa-hospital .content-wrap { width: 100%; left: 0; }
}

/* Practice dashboard and patient workspace: a shared, calm Google-colour palette. */
.home2.practice-dashboard { color:#202124; padding:24px; background:#f6f8fc; border-radius:20px; }
.practice-dashboard .practice-eyebrow { display:block; color:#5f6368; font-size:10px; font-weight:700; letter-spacing:1.6px; margin-bottom:8px; }
.practice-dashboard .home2-head h2 { font-size:28px; letter-spacing:-.6px; }
.practice-dashboard .home2-btn { border-radius:10px; }
.practice-dashboard .home2-btn-primary { background:#1a73e8; border-color:#1a73e8; }
.practice-dashboard .home2-panel { border:1px solid #e5e9f0; border-radius:16px; background:#fff; box-shadow:0 2px 8px #20212404; overflow:hidden; }
.practice-dashboard .home2-kpi { border-radius:14px; border:1px solid #e5e9f0; border-top:3px solid #4285f4; background:#fff; }
.practice-dashboard .home2-kpi:nth-child(2) { border-top-color:#fbbc04; }
.practice-dashboard .home2-kpi:nth-child(3) { border-top-color:#34a853; }
.practice-dashboard .home2-kpi:nth-child(4) { border-top-color:#ea4335; }
.practice-dashboard .home2-kpi:nth-child(5) { border-top-color:#a142f4; }
.practice-insights { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); gap:20px; margin:20px 0; }
.practice-dashboard .practice-activity,.practice-dashboard .practice-mix,.practice-dashboard .practice-tasks { padding:22px; }
.practice-dashboard .home2-panel-head h4 { color:#202124; font-weight:600; }
.practice-select { padding:8px 10px; border:1px solid #dadce0; border-radius:8px; background:#fff; color:#3c4043; }
.practice-chart-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0; flex-wrap:wrap; }
.practice-chart-tools strong { display:block; font-size:30px; font-weight:600; }
.practice-chart-tools span { color:#5f6368; font-size:12px; }
.practice-segment { display:flex; background:#f1f3f4; padding:3px; border-radius:9px; }
.practice-segment button { border:0; background:transparent; padding:7px 12px; border-radius:7px; color:#5f6368; font-size:12px; }
.practice-segment button.active { background:#fff; color:#1967d2; box-shadow:0 1px 3px #00000015; }
.practice-chart { height:180px; display:flex; gap:6px; align-items:end; border-bottom:1px solid #dadce0; background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#eef1f6 44px,#eef1f6 45px); padding:0 8px; }
.practice-bar-slot { height:100%; flex:1; position:relative; display:flex; align-items:end; min-width:0; outline-offset:3px; }
.practice-bar { width:100%; background:#4285f4; border-radius:5px 5px 0 0; }
.practice-bar.is-money { background:#34a853; }
.practice-bar-slot:hover .practice-bar,.practice-bar-slot:focus .practice-bar { filter:brightness(.85); }
.practice-bar-tip { display:none; position:absolute; bottom:50%; left:50%; transform:translateX(-50%); background:#202124; color:white; padding:8px; font-size:11px; border-radius:6px; z-index:2; white-space:nowrap; pointer-events:none; }
.practice-bar-slot:hover .practice-bar-tip,.practice-bar-slot:focus .practice-bar-tip { display:block; }
.practice-axis { display:flex; justify-content:space-between; gap:8px; margin-top:10px; font-size:11px; color:#5f6368; }
.practice-note { font-size:12px; color:#5f6368; margin:16px 0 0; line-height:1.6; }
.practice-donut { width:156px; height:156px; border-radius:50%; padding:18px; margin:24px auto; }
.practice-donut.is-empty { background:#e8eaed !important; }
.practice-donut>div { border-radius:50%; background:#fff; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.practice-donut strong { font-size:30px; }.practice-donut span { font-size:11px; color:#5f6368; }
.practice-legend { display:flex; justify-content:space-between; margin:12px 0; font-size:13px; }
.practice-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
.dot-blue { color:#1967d2; }.dot-green { color:#188038; }.dot-red { color:#c5221f; }.dot-amber { color:#9a6700; }
.practice-legend .dot-blue { background:#4285f4; }.practice-legend .dot-green { background:#34a853; }
.practice-tasks { margin-bottom:20px; }
.practice-task-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.practice-task { display:flex; gap:14px; align-items:center; border:1px solid #e8eaed; border-radius:12px; padding:16px; color:#202124; }
.practice-task:hover { background:#f8faff; border-color:#d2e3fc; text-decoration:none; }
.practice-task>i:first-child { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#f1f5fc; border-radius:10px; font-size:17px; flex-shrink:0; }
.practice-task div { flex:1; }.practice-task b { display:block; font-size:13px; }.practice-task span { display:block; font-size:12px; color:#5f6368; margin-top:5px; }
.pt-portal .pt-workspace { display:grid; grid-template-columns:225px minmax(0,1fr); gap:28px; align-items:start; }
.pt-portal.pt-portal { max-width:1440px; }
.pt-portal .pt-sidebar { position:sticky; top:70px; background:#fff; border:1px solid #e5e9f0; border-radius:20px; padding:20px 12px; }
.pt-portal .pt-main { min-width:0; }
.pt-sidebar-brand { display:flex; align-items:center; gap:10px; padding:4px 6px 24px; }.pt-sidebar-brand b { font-size:15px; }.pt-sidebar-brand small { display:block; color:#5f6368; font-size:11px; margin-top:4px; }
.pt-brand-mark { background:#e8f0fe; color:#1a73e8; border-radius:12px; padding:11px; font-size:20px; }
.pt-portal .pt-side-nav { display:flex; flex-direction:column; gap:7px; margin:0; }
.pt-portal .pt-side-nav button { display:flex; align-items:center; gap:10px; border:0; border-radius:12px; padding:13px 12px; background:transparent; font-size:13px; text-align:left; justify-content:flex-start; }
.pt-portal .pt-side-nav button.active { background:#e8f0fe; color:#174ea6; box-shadow:none; }
.pt-portal .pt-side-nav button .fa { color:#4285f4; }.pt-portal .pt-side-nav button:nth-child(2) .fa { color:#34a853; }.pt-portal .pt-side-nav button:nth-child(3) .fa { color:#b06000; }.pt-portal .pt-side-nav button:nth-child(4) .fa { color:#ea4335; }
.pt-portal .pt-side-nav button span { margin-left:auto; background:#f1f3f4; color:#5f6368; }
.pt-sidebar-help { background:#f8fafd; border-radius:12px; padding:14px; margin:30px 0 14px; font-size:12px; color:#5f6368; line-height:1.6; }.pt-sidebar-help>b { display:block; color:#3c4043; margin:8px 0 5px; }.pt-sidebar-help>.fa { color:#34a853; font-size:19px; }.pt-sidebar-help p { margin:0; }
.pt-portal .pt-sidebar-book { width:100%; background:#1a73e8; border-color:#1a73e8; border-radius:10px; }
.pt-portal .pt-welcome { background:linear-gradient(115deg,#e8f0fe,#f0f7ff 65%,#e6f4ea); border-color:#d2e3fc; }
.practice-dashboard a:focus-visible,.practice-dashboard button:focus-visible,.practice-dashboard select:focus-visible,.pt-sidebar button:focus-visible { outline:3px solid #8ab4f8; outline-offset:3px; }
@media(max-width:1000px) { .practice-insights { grid-template-columns:1fr; }.practice-mix .practice-donut { margin:16px auto; }.pt-portal .pt-workspace { grid-template-columns:185px minmax(0,1fr); gap:16px; } }
@media(max-width:700px) { .practice-dashboard { padding:12px; }.practice-task-grid { grid-template-columns:1fr; }.practice-dashboard .home2-head h2 { font-size:23px; }.practice-chart { gap:3px; }.pt-portal .pt-workspace { display:block; }.pt-portal .pt-sidebar { position:static; padding:12px; margin-bottom:18px; }.pt-sidebar-brand { padding-bottom:12px; }.pt-portal .pt-side-nav { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.pt-portal .pt-side-nav button { font-size:12px; padding:11px 8px; }.pt-sidebar-help,.pt-sidebar-book { display:none; }.practice-dashboard .practice-activity,.practice-dashboard .practice-mix,.practice-dashboard .practice-tasks { padding:16px; } }
@media print { .pt-portal .pt-workspace { display:block; }.practice-chart { print-color-adjust:exact; } }

.pt-portal .pt-side-nav button.active span { background:#d2e3fc; color:#174ea6; }
.pt-portal .pt-sidebar .pt-side-nav button { border:0; box-shadow:none; background:transparent; }
.pt-portal .pt-sidebar .pt-side-nav button.active { background:#e8f0fe; color:#174ea6; }
.pt-portal .pt-sidebar .pt-side-nav button.active .fa { color:#1967d2; }
.pt-portal .pt-sidebar .pt-side-nav button.active span { background:#d2e3fc; color:#174ea6; }
.pt-portal .pt-main .pt-welcome h4 { color:#174ea6; }
.pt-portal .pt-main .pt-welcome p { color:#3c4043; }
.pt-portal .pt-main .pt-welcome .pt-muted { color:#5f6368; }
.pt-portal .pt-main .pt-welcome .btn-primary,.pt-portal .pt-sidebar .pt-sidebar-book { background:#1a73e8; border-color:#1a73e8; color:#fff; box-shadow:0 2px 5px #1a73e81a; }
.pt-portal .pt-main .pt-welcome .btn-primary:hover,.pt-portal .pt-sidebar .pt-sidebar-book:hover { background:#1967d2; }
@media(max-width:700px) {
  .pt-portal .pt-sidebar .pt-side-nav { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pt-portal .pt-sidebar .pt-side-nav button { min-width:0; gap:6px; font-size:12px; padding:11px 6px; justify-content:flex-start; }
  .pt-portal .pt-sidebar .pt-sidebar-book { display:none; }
  .pt-portal .pt-sidebar .pt-side-nav button span { font-size:10px; padding:1px 4px; }
}

/* Patient portal language preference. */
.pt-portal .pt-language { display:inline-flex; gap:3px; padding:4px; background:#eef2f7; border:1px solid #e1e6ef; border-radius:11px; flex-shrink:0; }
.pt-portal .pt-language button { border:0; background:transparent; color:#3c4043; border-radius:7px; padding:8px 12px; min-height:36px; font-size:13px; font-weight:600; }
.pt-portal .pt-language button.active { background:#fff; color:#174ea6; box-shadow:0 1px 4px #20212418; }
.pt-portal .pt-language button:focus-visible { outline:3px solid #8ab4f8; outline-offset:2px; }
.pt-portal[lang="bn"] *:not(.fa),.pt-doctor-contact[lang="bn"] *:not(.fa) { font-family:"Noto Sans Bengali","Fira Sans",Arial,sans-serif; }
.pt-portal[lang="bn"] p,.pt-doctor-contact[lang="bn"] p { line-height:1.75; }
@media(max-width:700px) {
  .pt-portal .pt-sidebar .pt-side-nav button { flex-wrap:wrap; }
  .pt-portal .pt-sidebar .pt-side-nav button span { margin-left:0; }
  .pt-portal[lang="bn"] .pt-sidebar .pt-side-nav button { font-size:13px; }
  .pt-portal .pt-language { margin:4px 0; }
}
.pt-portal .pt-password { border:1px solid #d2e3fc; background:linear-gradient(120deg,#fff,#f4f8ff); }
.pt-portal .pt-password .pt-head h4 { margin:0; flex:1; color:#174ea6; }
.pt-portal .pt-password-form { max-width:440px; margin-top:16px; }
.pt-portal .pt-password-form label { display:block; margin-bottom:6px; }
.patient-signin-modes { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.patient-password-login label { display:block; margin:12px 0 5px; }

/* margin-TOP as well as bottom: this card sits directly under the pad's
   toolbar and had none, so it read as part of the toolbar rather than as its
   own card. 12px matches the gap it already leaves below itself. */
.presc-input-guide { margin:12px 0; padding:10px 14px; border:1px solid #dce6e2; border-radius:6px; background:#f6faf9; color:#36534b; font-size:13px; }
.presc-input-guide summary { cursor:pointer; font-weight:600; }
.presc-input-guide p { margin:8px 0 0; line-height:1.6; max-width:900px; }
/* A note above the sheet it talks about: left-aligned with the paper, an
   info icon, the sentence and its link, then the new-tab line beneath it, with
   clear space before the ruler so it does not read as part of the page. */
.presc-preview-settings-hint {
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:780px;
  margin:4px 0 18px;
  padding:10px 14px;
  text-align:left;
  font-size:13px;
  line-height:1.55;
  color:#475569;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
}
.presc-preview-settings-hint > .fa { color:#0f766e; font-size:15px; line-height:20px; flex-shrink:0; }
.presc-preview-settings-hint p { margin:0; }
.presc-preview-settings-hint a { font-weight:600; white-space:nowrap; }
.presc-preview-settings-hint small { display:block; margin-top:4px; font-size:12px; color:#7b8794; }
@media print { .presc-input-guide, .presc-preview-settings-hint { display:none !important; } }

.settings-signature-row signature-crop { display:block; width:100%; min-width:0; }
.signature-crop-panel { margin-top:10px; padding:12px; border:1px solid #dce6e2; border-radius:6px; background:#f6faf9; }
.signature-crop-panel canvas { display:block; max-width:100%; height:auto; margin:8px 0; cursor:crosshair; touch-action:none; background:repeating-conic-gradient(#eef2f5 0% 25%, #fff 0% 50%) 0 / 16px 16px; }
.signature-crop-coordinates { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.signature-crop-coordinates label { display:flex; flex-direction:column; font-size:12px; }
.signature-crop-coordinates input { width:75px; padding:4px; }
.signature-crop-actions { display:flex; flex-wrap:wrap; gap:6px; }

.presc-input-guide-interactive { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.presc-input-guide-interactive small { display:block; margin-top:3px; color:#526575; }
.presc-input-guide-interactive > button { flex:none; }

.presc-input-guide-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* BOTH offers read as offers. The second one was a plain white btn-default
   beside a solid blue primary, so "নিজে লিখুন" looked like a cancel button
   next to the real action - two different things are on offer here and a
   doctor should see two. Filled in the app's own green so it carries the same
   weight as the blue without competing for the same meaning: blue shows you,
   green lets you do it yourself. */
.presc-input-guide-buttons .btn-default {
  background:#1d8a6a; border-color:#1d8a6a; color:#fff; font-weight:600;
}
.presc-input-guide-buttons .btn-default:hover,
.presc-input-guide-buttons .btn-default:focus {
  background:#17735a; border-color:#17735a; color:#fff;
}
/* Breathing room between the two offers and the close button that dismisses
   them - they were in one unbroken run. */
.presc-input-guide-buttons .presc-input-guide-close { margin-left:6px; }

.presc-input-guide-close { border:0; background:transparent; color:#526575; font-size:22px; line-height:1; padding:4px 8px; cursor:pointer; }
.presc-input-guide-close:hover { background:#e4eeeb; border-radius:4px; }
.presc-input-guide-close:focus-visible { outline:2px solid #337ab7; outline-offset:2px; }

.presc-guide-dismiss-options { display:inline-flex; flex-wrap:wrap; gap:6px; padding-left:6px; border-left:1px solid #dce6e2; }

/* Touch screens retain the icon rail instead of a sticky mouse-hover overlay. */
@media (min-width:768px) and (hover:none) and (pointer:coarse) {
  .sidebar .main-menu:not(.expanded):hover {
    width:60px;
    overflow:hidden;
    transition:none;
  }
  .sidebar .main-menu:not(.expanded) li,
  .sidebar .main-menu:not(.expanded) li > a { width:60px; }
  .sidebar .main-menu:not(.expanded) .nav-text { display:none; }
}

/* Tablets and other touch screens use the same explicit Help disclosure. */
@media (min-width:768px) and (hover:none) and (pointer:coarse) {
  .epa-tour-fab > .epa-tour-fab-fold {
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border:0;border-radius:50%;
    background:#0f766e;color:#fff;font-size:20px;
    box-shadow:0 6px 18px rgba(15,23,42,.28);
  }
  .epa-tour-fab.is-folded > .epa-tour-fab-hint,
  .epa-tour-fab.is-folded > setup-checklist-dock,
  .epa-tour-fab.is-folded > feedback-pill,
  .epa-tour-fab.is-folded > .epa-tour-fab-btn,
  .epa-tour-fab.is-folded > .epa-tour-fab-hide,
  .epa-tour-fab.is-folded > .epa-tour-fab-ask,
  .epa-tour-fab.is-folded > .epa-explain-btn:not(.is-on) { display:none !important; }
}

/* Shared icon-button rhythm: anonymous text receives the same gap as a label.
   A lone icon has no second flex item, so copy/delete/arrow controls stay centred.

   NO !important ON display. This rule is about ALIGNMENT, and with !important it
   also decided VISIBILITY: every icon-only button in the application was forced
   visible, beating any display:none meant to hide it. The landing page's mobile
   menu button is a <button> whose only child is an <i class="fa">, so the
   hamburger sat in the navigation bar at every width, beside the full desktop
   menu it exists to replace.
   The !important was never needed for the alignment either: `.btn:has(> .fa)`
   is already more specific than Bootstrap's `.btn`, and `button:has(> .fa)`
   than the browser's own `button` rule. */
.btn:has(> .fa, > .glyphicon, > svg),
button:has(> .fa, > .glyphicon, > svg),
a[role="button"]:has(> .fa, > .glyphicon, > svg) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  column-gap:6px !important;
}
.btn > .fa, .btn > .glyphicon,
button > .fa, button > .glyphicon,
a[role="button"] > .fa, a[role="button"] > .glyphicon {
  flex-shrink:0;
  margin-inline:0 !important;
}
.btn > span:has(> .fa, > .glyphicon) {
  display:inline-flex;
  align-items:center;
  column-gap:6px;
}

/* The two paper rolls on the Appointment Slip card (prescription-settings/print).
   A pair of buttons rather than a number box: the width decides the slip's text
   size and the print layout, and nobody knows to type 2.28 for a 58mm roll. */
.settings-roll-pick { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.settings-roll-pick .btn { font-weight:600; border-radius:6px; padding:8px 16px; }
.settings-roll-pick .btn small { font-weight:400; color:#888; }
.settings-roll-pick .btn.is-on { background:#0d9488; border-color:#0d9488; color:#fff; }
.settings-roll-pick .btn.is-on small { color:#d7f2ef; }
.settings-roll-pick .settings-hint { flex:1 1 260px; min-width:0; }


/* ---- Disease template picker (dashboard.directive.js) -------------------
   The select, the search box and its clear button were three different
   heights - a full-size select above a small input, with the button sized on
   its own because the input-group carried no size class. They are one compact
   size now. The clear button is neutral: it empties a search box, it does not
   delete a template, and a red button there read as "remove this". */
.tpl-search .tpl-search-clear {
  color:#64748b; background:#f1f5f4; border-color:#ccd5d2;
  width:34px; padding-left:0; padding-right:0;
}
.tpl-search .tpl-search-clear:hover,
.tpl-search .tpl-search-clear:focus { color:#334155; background:#e4ebe9; border-color:#b6c2be; }
/* The three controls stack with the same rhythm instead of three hand-set margins. */
.tpl-search { margin:6px 5px 0 5px !important; }

/* Edit and the library are one row, not two stacked full-width buttons: they
   are the two things you can do with this box and neither is the main one.
   They share the width, and the labels stay on one line at the column's
   width (the pad's left column is col-sm-3). */
.tpl-actions { display:flex; align-items:stretch; gap:6px; }
.tpl-actions .btn {
  flex:1 1 0;
  min-width:0;
  padding:6px 8px;
  font-size:11.5px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===========================================================================
   PRESCRIPTION FORM - ONE BUTTON COLOUR                          (2026-10-13)
   ---------------------------------------------------------------------------
   Every action button and every row button on the pad is filled with one
   teal - the teal of the section headers - so the pad reads as one design.
   Before this, buttons were red, emerald, indigo, cyan, blue and amber at
   once.

     teal  #0f766e   every action and row button - Save, Clear and the rest
                     alike - white text 5.47:1
     red   #c9302c   Clear Prescription Form, only under the pointer: it
                     wipes the form with no confirmation
     white           the "+" sitting ON a teal header, which would vanish

   Disabled: the same teal button at 65% opacity - Bootstrap's own standard -
   so a not-yet-available button is a dimmer version of itself, never a
   different colour. (Tried and rejected: half opacity, too washed out; pale
   mint; grey. On an empty pad six of the nine bar buttons are disabled, so
   the disabled look IS the bar most of the time.)

   Left exactly as they were, because each one reports a state:
     Sp.Note turns red while a note exists; the O/E print button is green
     while that line prints; the backdate calendar, My list / All, the EN
     switches and the video-call button show their own on/off.
   Not touched: the rich-text editor's toolbar, the specialty-mode chips and
   toggles, the section headers, any size, printed paper.

   Delete this block to get the old look back exactly.
   =========================================================================== */

/* ---- row buttons beside an input: clear / remove (btn-danger), shift
        (btn-primary), add (btn-success). :not(.oe-actions) - the O/E pair
        forces a white icon inline and is handled on its own below. ---- */
.presc-section .input-group-btn:not(.oe-actions) > .btn-danger,
.presc-section .input-group-btn:not(.oe-actions) > .btn-primary,
.presc-section .input-group-btn:not(.oe-actions) > .btn-success {
    background-color: #0f766e;
    border: 1px solid #0f766e;
    color: #ffffff;
}

.presc-section .input-group-btn:not(.oe-actions) > .btn-danger:hover,
.presc-section .input-group-btn:not(.oe-actions) > .btn-danger:focus,
.presc-section .input-group-btn:not(.oe-actions) > .btn-primary:hover,
.presc-section .input-group-btn:not(.oe-actions) > .btn-primary:focus,
.presc-section .input-group-btn:not(.oe-actions) > .btn-success:hover,
.presc-section .input-group-btn:not(.oe-actions) > .btn-success:focus {
    background-color: #115e59;
    border-color: #115e59;
    color: #ffffff;
}

.presc-section .input-group-btn:not(.oe-actions) > .btn-danger:active,
.presc-section .input-group-btn:not(.oe-actions) > .btn-primary:active,
.presc-section .input-group-btn:not(.oe-actions) > .btn-success:active {
    background-color: #134e4a;
    border-color: #134e4a;
    color: #ffffff;
}

.presc-section .input-group-btn:not(.oe-actions) > .btn-danger[disabled],
.presc-section .input-group-btn:not(.oe-actions) > .btn-primary[disabled],
.presc-section .input-group-btn:not(.oe-actions) > .btn-success[disabled] {
    opacity: .65;
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: none;
}

/* ---- the "+" in the teal header: white, so it shows on the teal ---- */
.presc-section .presc-header > .btn-success {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0f766e;
}

.presc-section .presc-header > .btn-success:hover,
.presc-section .presc-header > .btn-success:focus,
.presc-section .presc-header > .btn-success:active {
    background-color: #ccfbf1;
    border-color: #ccfbf1;
    color: #115e59;
}

/* ---- O/E part 3. The clear button's white icon is forced inline, so only
        its background can change: teal like every other clear button. ---- */
.presc-section .input-group-btn.oe-actions > .btn-danger {
    background-color: #0f766e;
}

.presc-section .input-group-btn.oe-actions > .btn-danger:hover,
.presc-section .input-group-btn.oe-actions > .btn-danger:focus {
    background-color: #115e59;
}

/* A FIX, not a recolour: with print turned OFF this button had no colour
   class at all and fell back to the browser's #efefef under the forced white
   icon - 1.15:1, effectively invisible, so the doctor could not find it to
   turn print back on. Grey now means off (3.49:1); green for on is untouched. */
.presc-section .input-group-btn.oe-actions > .btn:not(.btn-success):not(.btn-danger) {
    background-color: #7f8a9c;
}

.presc-section .input-group-btn.oe-actions > .btn:not(.btn-success):not(.btn-danger):hover,
.presc-section .input-group-btn.oe-actions > .btn:not(.btn-success):not(.btn-danger):focus {
    background-color: #64748b;
}

/* ---- template picker: the search clear, Edit Selected Template (disabled
        until a template is chosen), Template library ---- */
.tpl-search .tpl-search-clear,
.tpl-edit-btn.btn-primary,
.tpl-lib-open.btn-default {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.tpl-search .tpl-search-clear:hover,
.tpl-search .tpl-search-clear:focus,
.tpl-edit-btn.btn-primary:not([disabled]):hover,
.tpl-edit-btn.btn-primary:not([disabled]):focus,
.tpl-lib-open.btn-default:hover,
.tpl-lib-open.btn-default:focus {
    background-color: #115e59;
    border-color: #115e59;
    color: #ffffff;
}

.tpl-search .tpl-search-clear:active,
.tpl-edit-btn.btn-primary:not([disabled]):active,
.tpl-lib-open.btn-default:active,
.tpl-lib-open.btn-default:active:hover,
.tpl-lib-open.btn-default:active:focus {
    background-color: #134e4a;
    border-color: #134e4a;
    color: #ffffff;
}

/* Bootstrap repaints .btn-primary[disabled]:hover blue and fades it to .65,
   so every disabled state is spelled out. */
.tpl-search .tpl-search-clear[disabled],
.tpl-edit-btn.btn-primary[disabled],
.tpl-edit-btn.btn-primary[disabled]:hover,
.tpl-edit-btn.btn-primary[disabled]:focus {
    opacity: .65;
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: none;
}

/* ---- patient row: NEW, Rcpt, Sp.Note; Add Medicine under the rows.
        Sp.Note gains .btn-danger while a special note exists, and
        :not(.btn-danger) keeps that red exactly as it was. ---- */
#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger),
#newPrescriptionForm .input-group-btn > .btn-primary[ng-click="clearAll()"],
.med-foot add-medicine .btn-primary {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger):hover,
#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger):focus,
#newPrescriptionForm .input-group-btn > .btn-primary[ng-click="clearAll()"]:hover,
#newPrescriptionForm .input-group-btn > .btn-primary[ng-click="clearAll()"]:focus,
.med-foot add-medicine .btn-primary:hover,
.med-foot add-medicine .btn-primary:focus {
    background-color: #115e59;
    border-color: #115e59;
    color: #ffffff;
}

#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger):active,
#newPrescriptionForm .input-group-btn > .btn-primary[ng-click="clearAll()"]:active,
.med-foot add-medicine .btn-primary:active,
.med-foot add-medicine .btn-primary:active:hover,
.med-foot add-medicine .btn-primary:active:focus {
    background-color: #134e4a;
    border-color: #134e4a;
    color: #ffffff;
}

/* Rcpt and Sp.Note are one button group: with the border the same teal as
   the fill they merged into a single block. A darker edge separates them,
   the way Bootstrap's own grouped buttons are separated. */
#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger),
#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger):hover,
#newPrescriptionForm .btn-group > .btn-primary:not(.btn-danger):focus {
    border-color: #0a4f4a;
}

/* The label chips are labels, not buttons: Bootstrap's own grey addon, so
   they never look clickable next to the teal buttons. The rule in
   new.tmpl.html is #id + 1 class; #id + 2 classes outranks it. */
#newPrescriptionForm .input-group > .input-group-addon {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

/* "Mobile *" draws its asterisk with an inline color:white - visible on the
   old blue chip, invisible on a grey one. Same asterisk, readable: */
#newPrescriptionForm .input-group > .input-group-addon i[style*="white"] {
    color: #5b6778 !important;
}

/* ---- action bar. .epa-actions .btn already gives every button here white
        text, a 6px radius and a shadow; these set one colour for all of
        them. Same specificity as the rules they replace, later in the file. */
.epa-actions .btn-info,
.epa-actions .btn-primary,
.epa-actions .btn-success {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.epa-actions .btn-info:hover:not([disabled]),
.epa-actions .btn-info:focus:not([disabled]),
.epa-actions .btn-primary:hover:not([disabled]),
.epa-actions .btn-primary:focus:not([disabled]),
.epa-actions .btn-success:hover:not([disabled]),
.epa-actions .btn-success:focus:not([disabled]) {
    background: #115e59;
    border-color: #115e59;
    color: #ffffff;
}

/* Clear Prescription Form wipes the typed prescription with no
   confirmation. At rest it is the same teal as every other button; under the
   pointer it turns red, instantly - .epa-actions .btn fades the background
   but not the text, and a fade made the label vanish for two frames. */
.epa-actions .btn-warning {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    transition: box-shadow .15s, transform .15s;
}

.epa-actions .btn-warning:hover:not([disabled]),
.epa-actions .btn-warning:focus:not([disabled]) {
    background: #c9302c;
    border-color: #c9302c;
    color: #ffffff;
}

/* Nine buttons at 14px side padding need 1296px and wrapped "Save as
   Template" onto a line of its own. 10px - Bootstrap's own .btn-sm padding -
   saves 72px; each label still has room. */
.epa-actions .btn {
    padding: 0 10px;
}

/* ...and the labels themselves are short now (form-control-1.html), so the
   whole bar is one line on a laptop. A label never breaks in two: a wrapped
   button is taller than its neighbours and the row stops looking like a row. */
.epa-actions .btn { white-space: nowrap; }

/* The hairline between "send this prescription somewhere" and "start over".
   Clear sits to the right of it and wipes the pad with no confirmation. */
.epa-actions-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: #d7e0e4;
}

/* Disabled: the same teal, dimmed to 65%. */
.epa-actions .btn-info[disabled],
.epa-actions .btn-primary[disabled],
.epa-actions .btn-success[disabled],
.epa-actions .btn-warning[disabled] {
    opacity: .65;
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: none;
}

/* ---- Follow Up After: the same teal header and plain body as every other
        section, instead of its own amber theme. ---- */
.followup-section .presc-header {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.followup-section .presc-body {
    background-color: #f8fafc;
}

.followup-section .form-control {
    border-color: #cbd5e1;
}

.followup-section .form-control:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.followup-note {
    color: #64748b;
}

/* ===================================================================
   PAGE NOTICE - video tutorials pointer                     (2026-10-14)
   Sits on the grey content background above the page card
   (core/app.html), not above the navy top bar any more.
   =================================================================== */
.epa-page-notices {
    background: #E5E9EC;
    padding: 10px 10px 0;
}
.epa-page-notices .epa-tip-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 40px 10px 14px;
    background: #eef4ff;
    border: 1px solid #c7d7f5;
    border-left: 4px solid #1d4ed8;
    border-radius: 6px;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.epa-page-notices .epa-tip-icon {
    flex: 0 0 auto;
    color: #1d4ed8;
    font-size: 22px;
    line-height: 1;
}
.epa-page-notices .epa-tip-copy strong { color: #0b2a6b; }
.epa-page-notices .epa-tip-copy a {
    margin-left: 4px;
    color: #1d4ed8;
    font-weight: 600;
    white-space: nowrap;
}
.epa-page-notices .epa-tip-copy a:hover { color: #0b2a6b; text-decoration: underline; }
.epa-page-notices .epa-tip-notice > .close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #0f172a;
    opacity: .55;
}
.epa-page-notices .epa-tip-notice { position: relative; }
.epa-page-notices:empty { display: none; }

/* ==================================================================
   PRESCRIPTION SETTINGS - shared baseline (2026-10-14).
   Each settings tab is ng-if'd in on its own, and every tab carried its
   own copy of these card styles - except Pediatric Mode (base rules
   missing) and Adult Dose & BMI (no styles at all), which rendered as
   bare text. This is the one copy every tab can lean on.

   :where() keeps the specificity at a single class, so a tab's own
   <style> block - later in the document - still wins wherever it says
   something different (Pediatric's indigo guide card, Print's teal).
   Browsers without :where() drop the rule and look as they did before.
   ================================================================== */
#print-tabs > div > .tab-content { padding-top: 22px; }
/* The eleven list tabs open on a panel whose heading <h3> brought its own
   20px top margin; without it every tab starts the same distance below the
   tab bar. */
#print-tabs > div > .tab-content .panel-dark > .panel-heading > .panel-title > h3 { margin-top: 0; }
:where(#print-tabs) .settings-page { width: 100%; padding-bottom: 40px; }
:where(#print-tabs) .settings-header { margin-bottom: 18px; }
:where(#print-tabs) .settings-header h2 { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 4px; line-height: 1.3; }
:where(#print-tabs) .settings-header h2 i { color: #0284c7; margin-right: 8px; }
:where(#print-tabs) .settings-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); margin-bottom: 16px; overflow: hidden;
}
:where(#print-tabs) .settings-card-header {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 12px 18px;
  font-size: 15px; font-weight: 700; color: #0f172a;
}
:where(#print-tabs) .settings-card-header i { color: #0284c7; margin-right: 8px; width: 16px; text-align: center; }
:where(#print-tabs) .settings-card-body { padding: 18px; }
:where(#print-tabs) .settings-card-row { display: flex; gap: 16px; align-items: stretch; }
:where(#print-tabs) .settings-card-row > .settings-card { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:where(#print-tabs) .settings-card-row > .settings-card > .settings-card-body { flex: 1 1 auto; }
@media (max-width: 900px) { :where(#print-tabs) .settings-card-row { flex-direction: column; } }
:where(#print-tabs) .settings-hint {
  display: block; color: #64748b; font-size: 12.5px; line-height: 1.5;
  margin: 4px 0 10px; overflow-wrap: break-word; word-wrap: break-word;
}
:where(#print-tabs) .settings-check + .settings-hint { margin: -2px 0 10px 23px; }
:where(#print-tabs) .settings-check {
  display: block; font-weight: 400; font-size: 13.5px; color: #1e293b; padding: 6px 0; margin: 0; cursor: pointer;
}
:where(#print-tabs) .settings-check input { width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: middle; }
:where(#print-tabs) .settings-field { margin-bottom: 12px; }
:where(#print-tabs) .settings-field label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }
:where(#print-tabs) .settings-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
:where(#print-tabs) .settings-actions { margin: 16px 0 40px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
:where(#print-tabs) .settings-actions .settings-hint { margin: 0; }
:where(#print-tabs) .guide-card { border-left: 4px solid #0284c7; }
:where(#print-tabs) .guide-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
:where(#print-tabs) .guide-icon { font-size: 30px; color: #0284c7; line-height: 1; flex: none; }
:where(#print-tabs) .guide-text { flex: 1 1 16rem; min-width: 0; }
:where(#print-tabs) .guide-text b { display: block; font-size: 14.5px; color: #0f172a; }
:where(#print-tabs) .guide-text p { margin: 3px 0 0; font-size: 12.5px; color: #475569; line-height: 1.55; }
:where(#print-tabs) .guide-links { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }

/* ---- The hint above the pad preview lines up with the sheet, not with the
        page: 35px in, the gutter print.tmpl.html leaves for the vertical ruler
        (the scroll box only pads itself on phones, where this stands down).
        Its width is the paper's own, set inline on the element, so both edges
        match on every paper size a practice prints. ---- */
.presc-preview-settings-hint {
  margin-left: 35px;
  max-width: 100%;
}
@media (max-width: 767px) {
  .presc-preview-settings-hint { margin-left: 0; }
}

/* ---- A4 header editor (Prescription Settings): the editors side by side and
        a sheet underneath that redraws as the doctor types. ---- */
.a4h-lay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.a4h-lay-t { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #56687d; }
.a4h-lay-b { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 12px;
             font-size: 13px; font-weight: 600; color: #0f172a; text-align: left; }
.a4h-lay-b small { display: block; font-weight: 400; font-size: 11.5px; color: #64748b; }
.a4h-lay-b.on { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15,118,110,.15); }
.a4h-lay-pic { display: flex; gap: 3px; justify-content: space-between; height: 10px; margin-bottom: 4px; }
.a4h-lay-pic i { display: block; height: 100%; border-radius: 2px; background: #e2e8f0; }
.a4h-lay-b.on .a4h-lay-pic i { background: #99f6e4; }

.a4h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a4h-grid.a4h-g3 { grid-template-columns: 1fr 1fr 1fr; }
/* three editors side by side get too narrow for their toolbar below 1280px:
   stack them (Left, Middle, Right - the preview still shows them side by side) */
@media (max-width: 1279px) { .a4h-grid.a4h-g3 { grid-template-columns: 1fr; } }
.a4h-grid .settings-field label { font-size: 11px; font-weight: 700; letter-spacing: .04em;
                                  text-transform: uppercase; color: #56687d; }

/* a box and its button on one line, the same height (Pad code / Use this pad) */
.settings-pair { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.settings-pair > .form-control { flex: 0 1 auto; margin: 0; height: auto; min-height: 34px; }
.settings-pair > .btn { margin: 0; flex: 0 0 auto; }
.a4h-pv { margin-top: 16px; }
/* the real-size header preview (paper-preview.js): a white sheet at the
   paper's true width on a grey desk, the margins as a dashed guide; the pad's
   own floats and padding inside; zoomed to fit. Anything past the paper edge
   is cut off, as it is on paper. */
.a4h-pv-size { margin-left: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #64748b; }
.pv-fit { overflow: hidden; padding: 14px; border: 1px solid #dbe3ea; border-radius: 6px; background: #eef2f6; }
.pv-paper { box-sizing: border-box; margin: 0 auto; padding-bottom: .2in; overflow: hidden; color: #111;
    background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 4px 14px rgba(15,23,42,.08);
    font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif; line-height: 1.42857; }
.pv-paper .pv-content { outline: 1px dashed #b8c4d0; outline-offset: 0; min-height: 20px; }
.pv-paper *:not(.fa) { font-family: inherit; }
.pv-head { display: flow-root; margin: 0 -15px; padding: 0; }
.pv-head .pv-col { float: left; box-sizing: border-box; min-height: 1px; }
.pv-head .pv-side { padding: 0 15px; }
.pv-head .pv-mid { width: 26%; text-align: center; }
.pv-head img { max-width: 100%; height: auto; }
.pv-head .pv-over { outline: 2px dashed #dc2626; outline-offset: -2px; }
.pv-paper .a4h-rule { margin: 0; padding-top: 10px; border-top: 0; border-bottom: 1px solid #333; }
.pv-paper .a4h-meta { margin: 0; padding-top: 10px; }
/* Appointment slip: how it prints */
.slip-formats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.slip-formats .slip-format { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 10px;
    align-items: center; text-align: left; padding: 8px 14px 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #1e293b; min-width: 170px; }
.slip-formats .slip-format b { font-size: 13px; }
.slip-formats .slip-format small { grid-column: 2; font-size: 11.5px; color: #64748b; font-weight: 400; }
.slip-formats .slip-format.on { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15,118,110,.15); background: #f0faf8; }
.slip-format-pic { grid-row: 1 / span 2; justify-self: center; display: block; border: 1.5px solid #94a3b8; border-radius: 2px; background: #fff; }
.slip-format.on .slip-format-pic { border-color: #0f766e; }
.slip-pic-roll { width: 12px; height: 30px; }
.slip-pic-a5 { width: 20px; height: 28px; }
.slip-pic-a4 { width: 24px; height: 32px; }
.pv-fit-slip { max-height: 760px; overflow-y: auto; }
.pv-warn { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #fecaca; border-radius: 6px; background: #fef2f2;
    color: #991b1b; font-size: 12.5px; }
.a4h-pv-t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
            color: #56687d; margin-bottom: 6px; }
.a4h-pv-t .fa { margin-right: 5px; }
.a4h-sheet { background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 18px 22px 14px;
             box-shadow: 0 1px 4px rgba(15,23,42,.08);
             /* The font paper gets (index.css forces it in @media print), so the
                preview is not a prettier version of the real thing. The `*` rule
                in index.css starts with a serif, which is what a bare preview
                would inherit. */
             font-family: 'Fira Sans', 'Roboto', Arial, sans-serif; }
.a4h-sheet *:not(.fa) { font-family: inherit; }
.a4h-cols { display: flex; gap: 16px; align-items: flex-start; }
.a4h-cols .a4h-l, .a4h-cols .a4h-r { width: 50%; min-width: 0; overflow: hidden; }
.a4h-cols.a4h-c3 .a4h-l, .a4h-cols.a4h-c3 .a4h-r { width: 37%; }
.a4h-cols .a4h-m { width: 26%; min-width: 0; overflow: hidden; text-align: center; }
.a4h-cols .a4h-r { text-align: right; }
.a4h-sheet p { margin: 0 0 2px; font-size: 13px; }
/* A logo never wider than the column it sits in, here and on paper (the pad
   adds the same cap inline, since a stylesheet does not reach the print doc). */
.a4h-sheet img { max-width: 100%; height: auto; }
.a4h-sheet h1, .a4h-sheet h2, .a4h-sheet h3, .a4h-sheet h4 { margin: 0 0 3px; font-size: 18px; }
/* The line the pad draws under the header, with the 10px of air it prints with. */
.a4h-rule { border-top: 1px solid #333; margin-top: 10px; }
.a4h-meta { margin-top: 10px; font-size: 13px; color: #334155; }
.a4h-meta b { margin-right: 4px; }
.a4h-meta b + b, .a4h-meta b ~ b { margin-left: 18px; }

@media (max-width: 860px) {
  .a4h-grid, .a4h-grid.a4h-g3 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   EASY PICK PAD                                                   (2026-10-16)
   ---------------------------------------------------------------------------
   prescription/pick-pad.js + pick-pad.html. Only on a pad whose doctor chose
   "Easy pick" (settings.padStyle === 'pick'): the Add rail beside the print
   preview, the picker dialog, and the Full form / Easy pick switch on the top
   strip. Nothing here is inside #print-area. Delete this block and the
   feature loses its look, nothing else changes.
   =========================================================================== */
/* Layout: templates + Add buttons on the left, patient details, the pinned
   Save/Print toolbar and the paper on the right. */
@media (min-width: 768px) {
    .pp-grid { display: flex; align-items: stretch; }
    .pp-grid > .pp-left { float: none; flex: 0 0 25%; max-width: 25%; }
    .pp-grid > .personalinfo { float: none; flex: 0 0 75%; max-width: 75%; }
    .pp-grid pick-pad { display: block; position: sticky; top: 10px; z-index: 5; margin-top: 14px; }
    .pp-toolbar { position: sticky; top: 0; z-index: 30; }
}
.pp-grid pick-pad { display: block; }
.pp-toolbar { margin: 4px 0 14px !important; background: #fff; border: 1px solid #dbe3ea; border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.pp-toolbar .presc-actions { padding: 8px 10px !important; }
.pp-toolbar > ng-include > .form-group.row { margin: 0; }
.pp-toolbar > ng-include > .form-group.row > div { width: 100%; padding: 0; }
/* the compact page bar above the paper */
.pp-workspace .presc-quick-preview { margin: 0 0 6px; }
.pp-workspace .presc-quick-preview > .col-sm-1 { display: none; }
.pp-workspace .presc-quick-preview > .col-sm-11 { width: 100%; padding: 0; }
.pp-workspace .presc-quick-preview .well { background: #f8fafc; border-color: #e2e8f0; box-shadow: none; font-size: 12.5px; }
.pp-workspace > hr, .pp-workspace hr { display: none; }
.pp-workspace .presc-preview-settings-hint { display: none; }
.pp-ps-link { margin-left: 10px; font-size: 12px; font-weight: 600; color: #0f766e; line-height: 22px; }
.pp-ps-link:hover { color: #0b5f58; }

.pp-rail { background: #fff; border: 1px solid #dbe3ea; border-radius: 10px; padding: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.pp-rail-head { font-weight: 700; color: #0f766e; font-size: 14px; padding: 2px 4px 8px; border-bottom: 1px solid #eef2f5; margin-bottom: 8px; }
.pp-rail-head small { display: block; font-weight: 400; color: #64748b; font-size: 11.5px; margin-top: 2px; }
.pp-rail .pp-add { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; text-align: left; margin: 0 0 6px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid #0f766e; background: #0f766e; color: #fff;
    font-size: 13.5px; line-height: 1.25; cursor: pointer; }
.pp-rail .pp-add:hover, .pp-rail .pp-add:focus { background: #0b5f58; border-color: #0b5f58; outline: none; }
.pp-rail .pp-add:focus-visible { box-shadow: 0 0 0 3px rgba(15, 118, 110, .3); }
.pp-rail .pp-add.has-items { background: #f0faf8; color: #0f3d3a; border-color: #9fd3cc; }
.pp-rail .pp-add.has-items:hover, .pp-rail .pp-add.has-items:focus { background: #e1f4f1; border-color: #0f766e; }
.pp-add-ico { width: 16px; text-align: center; flex: none; opacity: .95; }
.pp-rail .pp-add.has-items .pp-add-ico { color: #0f766e; }
.pp-rail .pp-add { min-width: 0; max-width: 100%; }
.pp-add-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pp-add-label { font-weight: 600; }
.pp-add-peek { font-size: 11.5px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-add-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #0f766e;
    color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.pp-add-go { flex: none; font-size: 12px; opacity: .85; }
.pp-rail .pp-add.has-items .pp-add-go { color: #0f766e; }

/* the switch on the top strip */
.presc-top-strip .pp-switch { display: inline-flex; flex: 0 0 auto; border: 1px solid #0f766e; border-radius: 4px; overflow: hidden; }
.presc-top-strip .pp-switch .pp-switch-btn { border: 0; border-radius: 0; margin: 0; background: #e6f2f1; color: #0f766e;
    white-space: nowrap; font-weight: 600; padding: 1px 8px; }
.presc-top-strip .pp-switch .pp-switch-btn + .pp-switch-btn { border-left: 1px solid #0f766e; }
.presc-top-strip .pp-switch .pp-switch-btn.is-on { background: #0f766e; color: #fff; }
.presc-top-strip .pp-switch .pp-switch-btn:hover:not(.is-on) { background: #cfe8e5; }

/* the picker */
.pp-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 60px; background: rgba(15, 23, 42, .42); z-index: 9100; }
.pp-sheet { position: fixed; z-index: 9101; top: 6vh; left: calc(50% + 30px); transform: translateX(-50%);
    width: min(1000px, calc(100vw - 92px)); height: 86vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 12px; border-top: 4px solid #0f766e; box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
    animation: pp-in .16s ease-out; }
@keyframes pp-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .pp-sheet { animation: none; } }
.pp-sheet.pp-kind-fu { height: auto; max-height: 86vh; }
.pp-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #e5eaef; }
.pp-sheet-head > .fa { color: #0f766e; font-size: 18px; }
.pp-sheet-title { font-size: 17px; font-weight: 700; color: #0f172a; }
.pp-sheet-sub { color: #64748b; font-size: 12.5px; }
.pp-x { margin-left: auto; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #64748b; padding: 0 4px; cursor: pointer; }
.pp-x:hover { color: #0f172a; }
.pp-sheet-body { flex: 1 1 auto; min-height: 0; }
.pp-cols { display: flex; }
.pp-pick { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px; border-right: 1px solid #e5eaef; }
.pp-chosen { flex: 1 1 42%; min-width: 0; overflow-y: auto; padding: 14px 16px; background: #f8fafc; }
.pp-search { position: relative; flex: none; }
.pp-search > .fa { position: absolute; z-index: 3; pointer-events: none; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.pp-search input.form-control { height: 40px; padding-left: 32px; padding-right: 30px; font-size: 15px; border-radius: 8px; }
.pp-search-clear { position: absolute; z-index: 3; right: 44px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
    font-size: 20px; color: #94a3b8; cursor: pointer; }
.pp-scope { flex: none; margin-top: 8px; display: inline-flex; align-self: flex-start; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.pp-scope button { border: 0; background: #fff; padding: 3px 12px; font-size: 12.5px; color: #334155; }
.pp-scope button + button { border-left: 1px solid #cbd5e1; }
.pp-scope button.on { background: #0f766e; color: #fff; }
.pp-sheet .pp-typed { display: block; flex: none; margin-top: 10px; text-align: left; border: 1px dashed #0f766e; background: #f0faf8; color: #0f3d3a;
    border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.pp-typed small { color: #64748b; margin-left: 6px; }
.pp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 10px; }
.pp-hint { font-size: 12px; color: #64748b; margin: 0 2px 6px; }
.pp-sheet .pp-sec { margin: 10px 2px 4px; padding-bottom: 3px; border-bottom: 1px solid #eef2f5; font-size: 10.5px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.pp-sheet .pp-sec:first-of-type { margin-top: 2px; }
.pp-sheet .pp-showmore { display: block; width: 100%; margin: 8px 0 2px; height: 32px; border: 1px dashed #b5d8d2; border-radius: 6px;
    background: #fff; color: #0f766e; font-size: 12.5px; font-weight: 600; }
.pp-sheet .pp-showmore:hover { background: #f0faf8; border-style: solid; }
.pp-sheet .pp-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 9px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f5f9;
    background: #fff; padding: 8px 8px; font-size: 14px; color: #0f172a; cursor: pointer; border-radius: 6px; }
.pp-sheet .pp-row > .fa { color: #94a3b8; margin-top: 3px; width: 14px; flex: none; }
.pp-sheet .pp-row:hover, .pp-sheet .pp-row:focus { background: #f0faf8; outline: none; }
.pp-sheet .pp-row.on { background: #e1f4f1; }
.pp-sheet .pp-row.on > .fa { color: #0f766e; }
.pp-med-name small { display: block; color: #64748b; font-size: 12px; }
.pp-empty { color: #94a3b8; font-size: 13px; padding: 14px 4px; }
.pp-chosen-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #475569; font-weight: 700; margin-bottom: 8px; }
.pp-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; }
.pp-item.editing { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, .15); }
.pp-item-n { flex: none; width: 20px; height: 20px; border-radius: 10px; background: #e2e8f0; color: #334155; font-size: 11px;
    font-weight: 700; text-align: center; line-height: 20px; margin-top: 1px; }
.pp-item-text { flex: 1 1 0; min-width: 0; font-size: 14px; color: #0f172a; word-wrap: break-word; }
.pp-item-text a { color: #0f3d3a; font-weight: 600; text-decoration: none; border-bottom: 1px dashed #94a3b8; }
.pp-item-text small { display: block; color: #475569; font-size: 12.5px; margin-top: 2px; }
.pp-item-acts { flex: none; display: inline-flex; gap: 2px; }
.pp-item-acts button { border: 1px solid #e2e8f0; background: #fff; color: #475569; width: 26px; height: 26px; border-radius: 6px;
    padding: 0; font-size: 12px; cursor: pointer; }
.pp-item-acts button:hover:not([disabled]) { border-color: #0f766e; color: #0f766e; }
.pp-item-acts button[disabled] { opacity: .35; cursor: default; }
.pp-item-acts button.pp-del:hover { border-color: #c9302c; color: #c9302c; }
.pp-ef-values { flex: 1 1 100%; padding: 6px 0 2px 28px; }
.pp-ef-own { display: flex; gap: 6px; margin-top: 6px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 16px; padding: 4px 11px; font-size: 13px;
    cursor: pointer; line-height: 1.35; }
.pp-chip:hover { border-color: #0f766e; color: #0f766e; }
.pp-chip.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.pp-fu { padding: 16px 18px; overflow-y: auto; }
.pp-fu-custom { margin-top: 12px; }
.pp-fu-custom small { color: #64748b; display: block; margin-top: 4px; }
.pp-med-edit { flex: 1 1 auto; overflow-y: auto; }
.pp-med-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.pp-med-title > .fa { color: #0f766e; }
.pp-med-title .pp-btn-quiet { margin-left: auto; }
.pp-field { margin-bottom: 12px; }
.pp-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: 4px; }
.pp-field .form-control { margin-bottom: 6px; }
.pp-field-input { position: relative; }
.pp-field-clear { position: absolute; z-index: 5; right: 36px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: #94a3b8; cursor: pointer; }
.pp-field-clear:hover { color: #475569; }
.pp-sheet .pp-field-input .epa-bn-field > input { padding-right: 62px !important; }
.pp-med-actions { padding-top: 4px; }
.pp-sheet-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px;
    border-top: 1px solid #e5eaef; }
.pp-foot-note { margin-right: auto; color: #64748b; font-size: 12px; }
.pp-sheet.pp-kind-rich { width: min(1180px, calc(100vw - 92px)); }
.pp-sheet.pp-kind-rich .pp-chosen { flex-basis: 50%; }
.pp-sheet .pp-item-text .pp-item-input { height: 28px; font-size: 14px; padding: 3px 8px; border-color: #e2e8f0; box-shadow: none; }
.pp-sheet .pp-item-text .pp-item-input:focus { border-color: #0f766e; }
.pp-rich { margin-top: 14px; }
.pp-rich-head { display: flex; align-items: center; gap: 8px; }
.pp-rich-head small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #64748b; }
.pp-rich-head .pp-btn-quiet { margin-left: auto; }
.pp-btn, .pp-btn:focus { background: #0f766e; border: 1px solid #0f766e; color: #fff; font-weight: 600; }
.pp-btn:hover { background: #0b5f58; border-color: #0b5f58; color: #fff; }
.pp-btn-quiet, .pp-btn-quiet:focus { background: #e6f2f1; border: 1px solid #9fd3cc; color: #0f766e; font-weight: 600; }
.pp-btn-quiet:hover { background: #cfe8e5; color: #0b5f58; }

@media (max-width: 767px) {
    .pp-backdrop { left: 0; }
    .pp-sheet { top: 0; left: 0; transform: none; width: 100vw; height: 100%; border-radius: 0; animation: none; }
    .pp-cols { flex-direction: column; overflow-y: auto; }
    .pp-pick { border-right: 0; border-bottom: 1px solid #e5eaef; flex: none; }
    .pp-list { max-height: 46vh; }
    .pp-chosen { flex: none; overflow: visible; }
    .pp-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .pp-rail-head { flex: 1 1 100%; margin-bottom: 2px; }
    .pp-rail .pp-add { width: auto; margin: 0; flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); padding: 8px; }
    /* two to a row: the label stays on one line (the + is dropped - the whole
       button is the tap target); a long one ends in ... with its tooltip */
    .pp-grid .pp-rail .pp-add { padding: 6px 8px; gap: 6px; }
    .pp-rail .pp-add .pp-add-label, .pp-rail .pp-add .pp-add-peek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pp-rail .pp-add:not(.has-items) .pp-add-go { display: none; }
}
/* Easy pick: the sheet sits in the middle of its column, like a document. */
.pp-workspace .presc-preview-scroll { display: flex; justify-content: safe center; }
.pp-workspace .presc-preview-scroll > .presc-preview-page { flex: 0 0 auto; }

/* ===========================================================================
   EASY PICK - COMPACT SCREEN                                      (2026-10-16)
   Only under .pp-grid / .pp-patient / .pp-toolbar, which exist only while the
   doctor writes with Easy pick. The full form never matches these rules.
   =========================================================================== */
/* -- patient: Patient ID, Name, Age, Sex, Mobile on the first line; the boxes
      opened from the "+" buttons on a second; the "+" buttons (vitals,
      Guardian, Ref. by ...) on the last, with Backdate / Rcpt / Sp.Note at the
      END of that same row. -- */
@media (min-width: 768px) {
    .patient-info-row.pp-patient { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 6px;
        padding: 0 14px 12px; margin-left: 0 !important; margin-right: 0 !important; }
    /* line breaks: after the first line, and after the opened boxes */
    .patient-info-row.pp-patient::after,
    .patient-info-row.pp-patient::before { content: ''; display: block; flex: 0 0 100%; height: 0; margin: -5px 0; }
    .patient-info-row.pp-patient::after { order: 9; }
    .patient-info-row.pp-patient::before { order: 35; display: none; }
    .patient-info-row.pp-patient.pf-has-open::before { display: block; }
    .pp-patient > .pc-head { order: 0; flex: 1 1 100%; margin: 0 -14px; padding: 9px 14px 8px; width: auto; }
    .pp-patient > .pc-head .pc-head-hint { display: none; }
    .pp-patient > [class*="col-"] { float: none; width: auto; padding: 0; margin: 0; min-height: 0; }
    .pp-patient > .pf-pid { order: 1; flex: 0 0 180px; }
    .pp-patient > .pf-core[data-label="Name"] { order: 2; flex: 1 1 170px; min-width: 120px; max-width: 300px; }
    .pp-patient > .pf-core[data-label="Age"] { order: 3; flex: 0 0 92px; }
    .pp-patient > .pf-core[data-label="Sex"] { order: 4; flex: 0 0 88px; }
    .pp-patient > .pf-core[data-label="Mobile"] { order: 5; flex: 0 0 128px; }
    /* the "+" buttons wrap inside their own box, and the three actions sit
       beside that box, level with its last line - so they always close the
       row and never drop onto a line of their own */
    .pp-patient > .pf-addrow { order: 40; flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .pp-patient > .pf-actions { order: 41; flex: 0 0 auto; margin-left: 8px !important; align-self: flex-end; }
    .pp-patient > .pf-actions::before { display: none !important; }
    .pp-patient > .pf-opt { order: 30; display: none; position: relative; flex: 0 0 150px; }
    .pp-patient > .pf-opt.pf-on { display: block; }
    .pp-patient > .pf-vital { flex-basis: 104px; }
    .pp-patient > .pf-opt[data-label="Address"] { flex: 1 1 240px; max-width: 360px; }
    .pp-patient > .pf-opt[data-label="Paid"] { flex-basis: 96px; }
}
/* below 1600px Rcpt and Sp.Note show their icon (the tooltip names them), so
   the three actions still close the "+" row instead of wrapping alone */
@media (min-width: 768px) and (max-width: 1599px) {
    .pp-patient .pf-actions .btn-group .btn { font-size: 0 !important; width: 30px; justify-content: center; padding-left: 0; padding-right: 0; }
    .pp-patient .pf-actions .btn-group .btn .fa { font-size: 12px; margin: 0; }
}
/* laptops: the same line, tighter - Rcpt and Sp.Note keep their icon and
   tooltip, the words go */
@media (min-width: 768px) and (max-width: 1365px) {
    .pp-patient > .pf-pid { flex-basis: 150px; }
    .pp-patient > .pf-pid input { padding-left: 7px; padding-right: 4px; }
    .pp-patient > .pf-core[data-label="Name"] { flex-basis: 120px; min-width: 100px; }
    .pp-patient > .pf-core[data-label="Age"] { flex-basis: 78px; }
    .pp-patient > .pf-core[data-label="Sex"] { flex-basis: 78px; }
    .pp-patient > .pf-core[data-label="Mobile"] { flex-basis: 108px; }
    .pp-patient > .pf-vital { flex-basis: 92px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .pp-patient > .pf-pid { flex-basis: 140px; }
    .pp-patient > .pf-core[data-label="Name"] { flex-basis: 90px; min-width: 90px; }
    .pp-patient > .pf-core[data-label="Mobile"] { flex-basis: 104px; }
    .pp-patient .pf-actions { gap: 4px; }
}
/* every box carries a small caption, so a filled form still reads */
.pp-patient > [data-label]::before, .pp-patient > .pf-pid::before {
    content: attr(data-label); display: block; margin: 0 0 3px 1px; font-size: 10px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: #64748b; line-height: 1.2; }
.pp-patient > .pf-pid::before { content: 'Patient ID'; }
.pp-patient > [data-label="Name"]::before, .pp-patient > [data-label="Age"]::before { content: attr(data-label) ' *'; }
.pp-patient .pc-field > .pc-label { display: none; }
.pp-patient .pf-actions .btn-group, .pp-patient .pf-actions .backdate-pick { margin: 0; }
.pp-patient .pf-actions { display: flex; align-items: center; gap: 6px; }
@media (min-width: 768px) {
    /* the height of the "+" buttons they sit with */
    .pp-patient .pf-actions .btn, .pp-patient .pf-actions .backdate-toggle { height: 26px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
    .pp-patient .pf-addrow .pf-add { height: 26px; }
}
/* the optional-box links */
.pp-patient .pf-addrow .pf-add { height: 24px; padding: 0 8px; gap: 3px; border: 1px dashed #b5d8d2; border-radius: 12px;
    background: transparent; color: #0f766e; font-size: 12px; font-weight: 600; line-height: 22px; }
.pp-patient .pf-addrow .pf-add .fa { font-size: 9px; }
.pp-patient .pf-addrow .pf-add:hover, .pp-patient .pf-addrow .pf-add:focus { background: #f0faf8; border-style: solid; border-color: #0f766e; outline: 0; }
/* phones list every box (one per line), so the links have nothing to open */
@media (max-width: 767px) { .pp-patient .pf-addrow, .pp-patient .pf-opt .pf-hide { display: none; } }
/* x on an opened, still-empty box puts it back into the links */
.pp-patient .pf-opt .pf-hide { position: absolute; top: -3px; right: 0; width: 16px; height: 16px; padding: 0; border: 0;
    border-radius: 3px; background: transparent; color: #94a3b8; font-size: 14px; line-height: 14px; opacity: 0; }
.pp-patient .pf-opt:hover .pf-hide, .pp-patient .pf-opt:focus-within .pf-hide { opacity: 1; }
.pp-patient .pf-opt .pf-hide:hover { color: #b91c1c; background: #fef2f2; }

/* -- the rail, tighter ---------------------------------------------------- */
.pp-grid .pp-rail { padding: 8px; }
.pp-grid .pp-rail-head { padding: 2px 4px 7px; margin-bottom: 7px; font-size: 13px; }
.pp-grid .pp-rail-head small { font-size: 11px; }
.pp-grid .pp-rail .pp-add { padding: 6px 10px; margin-bottom: 5px; font-size: 13px; min-height: 34px; }

/* -- Adult Dose & BMI and the specialty panels: a slimmer bar -------------- */
/* the panels' rows carry an inline margin-left:-10px (full form); here they line
   up with the patient card, the toolbar and the paper bar */
.pp-grid .row > .col-md-12[style*="margin-left"] { margin-left: 0 !important; }
.pp-grid .ad-panel { margin-bottom: 10px; border-color: #dde6ea; border-radius: 8px; }
.pp-grid .ad-head { padding: 7px 12px; font-size: 12px; background: #fff; color: #334155; border-bottom: 1px solid #eef3f5;
    border-radius: 8px 8px 0 0; }
.pp-grid .ad-panel.ad-folded .ad-head { border-bottom: 0; border-radius: 8px; }
.pp-grid .ad-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #52636f; }
.pp-grid .ad-badge, .pp-grid .ad-badge-2 { background: #e6f2f1; color: #0f5e57; }
.pp-grid .ad-need { color: #8a97a0; opacity: 1; }
.pp-grid .ad-fold { color: #64748b; }
.pp-grid .ad-fold:hover, .pp-grid .ad-fold:focus { color: #0f172a; background: #f1f5f9; }
.pp-grid .ad-tabs { padding: 4px 8px 0; }
.pp-grid .ad-tabs li { padding: 3px 10px; font-size: 12px; }
.pp-grid .ad-body { padding: 8px 10px; }
.pp-grid .ad-card { padding: 5px 9px; flex-basis: 120px; }
.pp-grid .ad-v { font-size: 17px; }
.pp-grid .ad-v-sm { font-size: 13.5px; }
.pp-grid .ad-note { display: none; }

/* -- toolbar --------------------------------------------------------------- */
/* Laptops (up to 1365px): the Add column narrows to a fixed 220px so the
   patient card and the paper get the room; the toolbar's secondary buttons
   (Investigation slip, PDF, New, Clear, Share) show their icon with the
   tooltip they already carry, so the toolbar stays on one line. */
@media (min-width: 768px) and (max-width: 1365px) {
    .pp-grid > .pp-left { flex: 0 0 220px; max-width: 220px; padding-right: 8px; }
    .pp-grid > .personalinfo { flex: 1 1 auto; max-width: calc(100% - 220px); }
    .pp-toolbar .presc-actions .btn { padding-left: 9px; padding-right: 9px; font-size: 12.5px; }
    .pp-toolbar .presc-actions .btn[title^="Save & Print Investigation"],
    .pp-toolbar .presc-actions .btn[name="newPatientPdf"],
    .pp-toolbar .presc-actions .btn[title^="New Prescription Form"],
    .pp-toolbar .presc-actions .btn[title^="Clear Prescription Form"],
    .pp-toolbar .presc-actions .btn.swp-btn { font-size: 0 !important; min-width: 32px; justify-content: center; }
    .pp-toolbar .presc-actions .btn[title^="Save & Print Investigation"] .fa,
    .pp-toolbar .presc-actions .btn[name="newPatientPdf"] .fa,
    .pp-toolbar .presc-actions .btn[title^="New Prescription Form"] .fa,
    .pp-toolbar .presc-actions .btn[title^="Clear Prescription Form"] .fa,
    .pp-toolbar .presc-actions .btn.swp-btn .fa { font-size: 14px; margin: 0; }
}
/* the page bar: one wrapping row, its two buttons together at the end */
.pp-workspace .presc-quick-preview .well { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 6px 10px; }
.pp-workspace .presc-quick-preview .well > span,
.pp-workspace .presc-quick-preview .well > .qp-inline > span { padding: 0 4px !important; }
.pp-workspace .presc-quick-preview .well > .pp-ps-link { order: 3; margin-left: 10px; float: none !important; }
.pp-workspace .presc-quick-preview .well > .btn.pull-right { order: 2; margin-left: auto; float: none !important; }
.pp-workspace .presc-quick-preview .well > div { order: 4; flex: 1 1 100%; }
.pp-workspace .presc-preview-scroll.pp-fitted ~ .presc-preview-hint,
.pp-workspace .presc-preview-hint { display: none; }
.pp-toolbar .presc-actions .btn { padding-top: 4px; padding-bottom: 4px; }

/* -- the medicine details popup opens ABOVE the picker ----------------------- */
body.pp-sheet-open .mdi-backdrop { z-index: 9150 !important; }
body.pp-sheet-open .mdi-box { z-index: 9151 !important; }
.pp-medrow { display: flex; align-items: stretch; border-bottom: 1px solid #f1f5f9; }
.pp-medrow > .pp-row { flex: 1 1 auto; border-bottom: 0; }
.pp-sheet .pp-info { flex: 0 0 auto; border: 0; background: transparent; color: #0f766e; font-size: 16px; padding: 0 10px; border-radius: 6px; }
.pp-sheet .pp-info:hover { background: #f0faf8; }
.pp-med-title .pp-info { padding: 2px 6px; }
.pp-sheet .pp-item-acts .pp-info-sm { color: #0f766e; }

/* -- Easy pick 2026-10-18: drag to reorder, edit a medicine, EN / বাং per part -- */
.pp-sheet .pp-item { cursor: move; }
.pp-sheet .pp-item-n { width: auto; min-width: 20px; padding: 0 6px 0 4px; cursor: move; white-space: nowrap; }
.pp-sheet .pp-item-n .pp-grip { color: #94a3b8; margin-right: 4px; font-size: 10px; }
.pp-sheet .pp-item-text, .pp-sheet .pp-item-acts { cursor: auto; }
.pp-sheet .pp-item.ui-sortable-helper { box-shadow: 0 6px 18px rgba(15, 23, 42, .18); border-color: #0f766e; }
.pp-sheet .pp-item.ui-sortable-placeholder { visibility: visible !important; background: #f0faf8; border: 1px dashed #9fd3cc; }
.pp-sheet .pp-item-acts .pp-edit-sm { color: #0f766e; }
.pp-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pp-field .pp-field-head label { margin-bottom: 0; }

/* Advice / Investigation suggestions show what will print under the label
   (rich-peek.tmpl.html); the list is body-appended, so scoped to body > ul. */
.dropdown-menu > li > a.rich-peek { white-space: normal; padding-top: 5px; padding-bottom: 5px; max-width: 560px; }
.rich-peek-label { display: block; font-weight: 600; }
.rich-peek-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; line-height: 1.35; color: #64748b; margin-top: 1px; }
.dropdown-menu > .active > a.rich-peek .rich-peek-text { color: rgba(255, 255, 255, .85); }

/* -- 2026-10-19: ONE language control per box - the in-field button on the right
   (bn-phonetic, bn-part). The teal-header EN / BAN switch is gone. On the pad
   (full form and Easy pick) the button is a compact 24 x 20 so even the three
   narrow O/E boxes and Dose / When / How long keep their typing room. -- */
#newPrescriptionForm .epa-bn-field > .epa-bn-toggle,
.pp-sheet .epa-bn-field > .epa-bn-toggle { right: 4px; }
#newPrescriptionForm .epa-bn-toggle button, #newPrescriptionForm .tox .epa-bn-toggle button,
.pp-sheet .epa-bn-toggle button, .pp-sheet .tox .epa-bn-toggle button { width: 24px; height: 20px; padding: 2px; }
#newPrescriptionForm .epa-bn-field > input,
.pp-sheet .epa-bn-field > input { padding-right: 32px !important; }
#newPrescriptionForm .epa-bn-flag, #newPrescriptionForm .tox .epa-bn-flag, .pp-sheet .epa-bn-flag, .pp-sheet .tox .epa-bn-flag { width: 16px; height: 10px; }
#newPrescriptionForm .epa-bn-flag:after, #newPrescriptionForm .tox .epa-bn-flag:after, .pp-sheet .epa-bn-flag:after, .pp-sheet .tox .epa-bn-flag:after { width: 6px; height: 6px; top: 2px; left: 4.5px; }

/* O/E (full form, 2026-10-19): with the in-field language button each box needs
   about 132px (>= 100px of typing room + the button). In a column too narrow for
   all three, Part-3 (with its clear / print buttons) wraps to its own line
   instead of squeezing the boxes - the old "Part-3 too narrow" problem. */
@media (min-width: 769px) {
    .oe-row { flex-wrap: wrap; row-gap: 3px; }
    .oe-part-1, .oe-part-2 { flex: 1 1 132px; min-width: 132px; }
    .oe-part-3-wrapper { flex: 1 1 156px; min-width: 156px; }
}

/* Patient portal: code sign-in limit (srv/routes/otp.js CODE_LOGIN_LIMIT, 2026-10-20). */
.pt-portal .pt-codelimit { display:flex; gap:12px; align-items:flex-start; border-radius:10px; padding:14px 16px; margin:0 0 16px; border:1px solid; border-left-width:5px; }
.pt-portal .pt-codelimit > .fa { font-size:22px; line-height:1.2; margin-top:2px; }
.pt-portal .pt-codelimit-body { flex:1; min-width:0; }
.pt-portal .pt-codelimit-body b { display:block; font-size:15px; margin-bottom:4px; }
.pt-portal .pt-codelimit-body p { margin:0 0 10px; line-height:1.7; }
.pt-portal .pt-codelimit-warn { background:#fffbeb; border-color:#f59e0b; color:#78350f; }
.pt-portal .pt-codelimit-warn > .fa { color:#d97706; }
.pt-portal .pt-codelimit-last { background:#fef2f2; border-color:#dc2626; color:#7f1d1d; }
.pt-portal .pt-codelimit-last > .fa { color:#dc2626; }
.pt-portal .pt-codelimit-last b { color:#b91c1c; }

/* ===========================================================================
   EASY PICK - DESK                                                (2026-10-20)
   Wide screens: the paper starts at the left of the right-hand column, and
   one panel beside it holds the page settings (top) and the action buttons
   (pinned while the paper scrolls). Same elements, same order, same clicks -
   only placed differently. The page bar's line stays as it was everywhere
   else (.qp-inline is display:contents); the panel shows a summary instead.
   Below 1280px the pinned bar above the paper is kept exactly.
   =========================================================================== */
.qp-inline { display: contents; }
.pp-page-sum { display: none; }
@media (min-width: 1280px) {
    /* column 1 is as wide as the paper and no wider (on a laptop it shrinks
       and ppPaperFit zooms); the panel takes all the rest, never under 268px,
       so it reaches the right edge of the patient card above - no empty strip. */
    .pp-desk.is-pick { display: grid; grid-template-columns: minmax(0, max-content) minmax(268px, 1fr); grid-template-rows: auto 1fr;
        column-gap: 8px; align-items: start; margin-top: 4px; }
    .pp-desk.is-pick > .pp-workspace { display: contents; }

    /* the paper: left column, from the top, starting at the left edge */
    .pp-desk.is-pick .presc-preview-scroll { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-start; margin: 0; }
    /* the page draws ~15px past its own width (ppPaperFit measures scrollWidth):
       room for it, or a big screen would still zoom the paper to 98%. */
    .pp-desk.is-pick .presc-preview-scroll > .presc-preview-page { margin-right: 18px; }

    /* page settings card */
    .pp-desk.is-pick .presc-quick-preview { grid-column: 2; grid-row: 1; margin: 0 0 12px; }
    .pp-desk.is-pick .presc-quick-preview .well { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px;
        background: #fff; border: 1px solid #dbe3ea; border-radius: 10px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); font-size: 12.5px; }
    .pp-desk.is-pick .presc-quick-preview .well > .qp-inline { display: none; }
    .pp-desk.is-pick .presc-quick-preview .well > .pp-page-sum { display: block; flex: 1 1 100%; order: 1; }
    .pp-page-title { font-weight: 700; color: #0f766e; font-size: 13px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid #eef2f5; }
    .pp-page-title .fa { margin-right: 4px; }
    .pp-page-sum dl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 8px; margin: 0; }
    .pp-page-sum dt { font-weight: 600; color: #64748b; }
    .pp-page-sum dd { margin: 0; color: #0f172a; font-variant-numeric: tabular-nums; }
    .pp-desk.is-pick .presc-quick-preview .well > .btn.pull-right { order: 2; margin: 2px 0 0 !important; }
    .pp-desk.is-pick .presc-quick-preview .well > .pp-ps-link { order: 3; margin: 2px 0 0 auto; line-height: 22px; }
    /* Update Settings opened: two boxes a row */
    .pp-desk.is-pick .presc-quick-preview .well > div:not(.pp-page-sum) { order: 4; flex: 1 1 100%; margin-top: 4px !important; }
    .pp-desk.is-pick .presc-quick-preview .well > div .row { margin: 0 -4px; }
    .pp-desk.is-pick .presc-quick-preview .well > div .row > [class*="col-"] { width: 50%; padding: 0 4px; margin-bottom: 6px; }
    .pp-desk.is-pick .presc-quick-preview .well > div label { font-size: 11px; color: #64748b; margin-bottom: 2px; white-space: nowrap; }

    /* action buttons card: pinned, two to a row, full labels */
    .pp-desk.is-pick > .pp-toolbar { grid-column: 2; grid-row: 2; position: sticky; top: 10px; margin: 0 !important; }
    .pp-desk.is-pick > .pp-toolbar > ng-include > .form-group.row { margin: 0; }
    /* six columns: Preview | Save, Save & Print, Investigation slip | PDF,
       New | Clear | Share, Save as Template. Anything else takes half. */
    .pp-desk.is-pick .pp-toolbar .presc-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 12px !important; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn { grid-column: span 3; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn[title^="Save & Print Investigation"] { grid-column: span 4; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn[name="newPatientPdf"],
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn[title^="New Prescription Form"],
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn[title^="Clear Prescription Form"],
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn.swp-btn { grid-column: span 2; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn.tpl-save-btn { grid-column: 1 / -1; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn { width: 100%; min-width: 0; margin: 0 !important; justify-content: center;
        padding: 6px 6px; font-size: 12.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .btn .fa { font-size: 13px; margin: 0; }
    .pp-desk.is-pick .pp-toolbar .presc-actions button[type="submit"] { grid-column: 1 / -1; padding: 9px 8px; font-size: 14px !important; }
    .pp-desk.is-pick .pp-toolbar .presc-actions .epa-actions-sep { grid-column: 1 / -1; display: block; width: auto; height: 1px;
        margin: 4px 0; background: #e2e8f0; }
    .pp-desk.is-pick .pp-toolbar .presc-actions > save-template > .form-group { grid-column: 1 / -1; }
}


/* New Serial/Appointment form: even grid instead of floated col-md-2 boxes
   of different heights, which left holes and a half-empty screen. */
form.appt-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px 18px; }
form.appt-form-grid > .alert { grid-column: 1 / -1; margin: 0; }
form.appt-form-grid > .form-group { float: none; width: auto; min-width: 0; padding: 0; margin: 0; }
form.appt-form-grid > .form-group.hide { display: none !important; }
form.appt-form-grid > .form-group .control-label { font-weight: 600; color: #334155; margin-bottom: 4px; }
form.appt-form-grid > .form-group .control-label br { display: none; }
form.appt-form-grid > .form-group small { display: block; margin-top: 4px; color: #64748b; }
form.appt-form-grid .input-sm, form.appt-form-grid .input-group-sm > .form-control { height: 34px; font-size: 13.5px; }
form.appt-form-grid > .appt-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end;
    border-top: 1px solid #eef2f5; padding-top: 12px; }
@media (max-width: 600px) { form.appt-form-grid { grid-template-columns: 1fr; padding: 12px; } }
.epa-no-access { display: none !important; }