/* =========================================================
   PadiDoctors Premium Shared Theme
   Safe global design layer for pages extending base.html
   - Does NOT change burger/nav JS behavior
   - Does NOT change nav display logic
   - Focuses on cards, forms, surfaces, buttons, tables, alerts
   ========================================================= */

:root{
  --pd-bg: #f6f8fc;
  --pd-bg-soft: #fbfcfe;
  --pd-surface: rgba(255,255,255,.92);
  --pd-surface-strong: #ffffff;
  --pd-border: rgba(15,23,42,.08);
  --pd-border-strong: rgba(15,23,42,.14);
  --pd-text: #0f172a;
  --pd-muted: rgba(15,23,42,.64);
  --pd-muted-2: rgba(15,23,42,.52);

  --pd-brand: #0f766e;
  --pd-brand-2: #14b8a6;
  --pd-brand-soft: rgba(20,184,166,.10);

  --pd-success: #16a34a;
  --pd-success-soft: rgba(22,163,74,.10);
  --pd-warning: #d97706;
  --pd-warning-soft: rgba(217,119,6,.10);
  --pd-danger: #dc2626;
  --pd-danger-soft: rgba(220,38,38,.10);
  --pd-info: #2563eb;
  --pd-info-soft: rgba(37,99,235,.10);

  --pd-shadow-sm: 0 8px 20px rgba(15,23,42,.06);
  --pd-shadow: 0 16px 40px rgba(15,23,42,.10);
  --pd-shadow-lg: 0 24px 60px rgba(15,23,42,.12);

  --pd-radius-xs: 10px;
  --pd-radius-sm: 12px;
  --pd-radius: 16px;
  --pd-radius-lg: 20px;
  --pd-radius-xl: 24px;

  --pd-max: 1180px;
}

/* ---------- Global page surface ---------- */
html, body{
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.06), transparent 22%),
    radial-gradient(circle at top right, rgba(37,99,235,.05), transparent 20%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
  color: var(--pd-text);
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep main app width comfortable without disrupting existing layout */
.site-container{
  max-width: var(--pd-max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.site-wrap{
  max-width: var(--pd-max);
}

/* ---------- Typography polish ---------- */
h1, h2, h3, h4, h5, h6{
  color: var(--pd-text);
  letter-spacing: -0.02em;
}

h1{ font-weight: 900; }
h2{ font-weight: 850; }
h3, h4{ font-weight: 800; }

p, li, label, small, .tiny{
  color: var(--pd-text);
}

.tiny{
  color: var(--pd-muted) !important;
}

/* ---------- Links ---------- */
a{
  text-underline-offset: 2px;
}

a:hover{
  text-decoration-thickness: 2px;
}

/* ---------- Shared premium cards ---------- */
.card,
.panel,
.tile,
.stat-card,
.info-card,
.summary-card,
.content-card{
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  backdrop-filter: blur(6px);
}

.card{
  padding: 18px;
}

/* For card headers inside generic blocks */
.card h3:first-child,
.card h4:first-child{
  margin-top: 0;
}

/* ---------- Section titles ---------- */
.section-title,
.dd-section-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.section-title h3,
.dd-section-title h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ---------- Buttons ----------
   Kept conservative so it does not break your nav buttons */
.btn{
  border-radius: 12px !important;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: none;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

.btn.outline{
  border: 1px solid var(--pd-border-strong) !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--pd-text) !important;
}

.btn.outline:hover{
  background: #fff !important;
  border-color: rgba(15,23,42,.18) !important;
}

.btn.tiny{
  padding: 7px 10px !important;
  font-size: 12px !important;
  line-height: 1.1;
  border-radius: 10px !important;
}

/* Try to improve primary buttons without assuming framework class names */
.btn:not(.outline){
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

/* ---------- Forms ---------- */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea{
  width: 100%;
  border: 1px solid var(--pd-border);
  background: rgba(255,255,255,.82);
  color: var(--pd-text);
  border-radius: 12px;
  padding: 11px 13px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(15,23,42,.42);
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 4px rgba(20,184,166,.10);
  background: #fff;
}

/* Textareas feel more premium with comfortable height */
textarea{
  min-height: 110px;
  resize: vertical;
}

/* ---------- Empty states ---------- */
.empty-state,
.dd-empty{
  padding: 16px;
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.64);
}

.empty-state h4,
.dd-empty h4{
  margin: 0 0 6px 0;
  font-weight: 900;
}

.empty-state p,
.dd-empty p{
  margin: 0;
  color: var(--pd-muted);
}

/* ---------- Lists / inbox-like rows ---------- */
.dd-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.dd-item{
  padding: 14px;
  border: 1px solid var(--pd-border);
  background: rgba(255,255,255,.76);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}

.dd-item-top{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  flex-wrap: wrap;
}

.dd-item-title{
  font-weight: 900;
  color: var(--pd-text);
  letter-spacing: -.01em;
}

.dd-item-meta{
  font-size: 12px;
  color: var(--pd-muted);
}

.dd-item-body{
  color: var(--pd-text);
}

.dd-search input.input{
  background: rgba(255,255,255,.84);
}

/* ---------- Pills / badges / chips ---------- */
.pill,
.chip,
.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pd-border);
  background: rgba(255,255,255,.82);
  color: var(--pd-text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.pill-online{
  border-color: rgba(22,163,74,.28);
  background: var(--pd-success-soft);
  color: #166534;
}

.pill-offline{
  border-color: rgba(100,116,139,.22);
  background: rgba(148,163,184,.12);
  color: #475569;
}

.pill-warning{
  border-color: rgba(217,119,6,.26);
  background: var(--pd-warning-soft);
  color: #92400e;
}

.pill-danger{
  border-color: rgba(220,38,38,.22);
  background: var(--pd-danger-soft);
  color: #991b1b;
}

.pill-info{
  border-color: rgba(37,99,235,.22);
  background: var(--pd-info-soft);
  color: #1d4ed8;
}

/* ---------- Tables ---------- */
.table,
.dd-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
}

.table thead th,
.dd-table thead th{
  background: rgba(248,250,252,.96);
  color: var(--pd-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--pd-border);
  padding: 12px 14px;
}

.table tbody td,
.dd-table tbody td{
  padding: 13px 14px;
  border-top: 1px solid rgba(15,23,42,.06);
  vertical-align: top;
  color: var(--pd-text);
}

.table tbody tr:first-child td,
.dd-table tbody tr:first-child td{
  border-top: none;
}

.table tbody tr:hover,
.dd-table tbody tr:hover{
  background: rgba(248,250,252,.85);
}

/* ---------- Alerts ---------- */
.alert,
.pd-alert{
  border-radius: 16px;
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
}

.pd-alert-warning{
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e8 100%);
  border-color: rgba(217,119,6,.20);
}

.pd-alert-info{
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
  border-color: rgba(37,99,235,.18);
}

.pd-alert-link{
  font-weight: 800;
}

/* ---------- Modals / dropdown-like surfaces ---------- */
.dropdown-menu,
.patient-more-menu-inner,
.modal-content{
  border-radius: 18px !important;
  border: 1px solid var(--pd-border) !important;
  box-shadow: var(--pd-shadow) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px);
}

/* ---------- Header / footer polish ----------
   Conservative: no nav mechanics touched */
.site-header{
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* =========================================================
   PadiDoctors Footer — premium dark brand footer
   ========================================================= */

footer.footer{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 24%),
    linear-gradient(90deg, #041e42 0%, #0a3154 45%, #021a2e 100%);
  padding: 38px 0 34px;
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 -8px 30px rgba(2,6,23,.10);
}

/* IMPORTANT: remove old footer inheritance problems */
footer.footer,
footer.footer h1,
footer.footer h2,
footer.footer h3,
footer.footer h4,
footer.footer h5,
footer.footer h6{
  color: #f8fbff !important;
}

footer.footer p,
footer.footer li,
footer.footer small,
footer.footer span{
  color: #b8c7d9 !important;
}

footer.footer a{
  color: #dbe7f5 !important;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

footer.footer a:hover{
  color: #ffffff !important;
  opacity: 1;
}

/* 3-column footer layout */
footer.footer .footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* brand column */
footer.footer .footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

footer.footer .footer-logo{
  height: 28px;
  width: auto;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

footer.footer .footer-text{
  margin: 0 0 8px 0;
  line-height: 1.6;
  color: #b8c7d9 !important;
}

/* columns */
footer.footer .footer-col h4{
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff !important;
}

footer.footer .footer-col p{
  margin: 0;
  line-height: 1.7;
}

/* social links */
footer.footer .footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 12px;
  margin-bottom: 14px;
}

footer.footer .footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

footer.footer .footer-social a:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* trust badges */
footer.footer .footer-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

footer.footer .trust-badge{
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: #bcd0e3 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* link text blocks */
footer.footer .footer-links{
  color: #c8d7e7 !important;
}

/* mobile */
@media (max-width: 720px){
  footer.footer{
    padding: 32px 0 28px;
  }

  footer.footer .footer-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  footer.footer .footer-social{
    margin-bottom: 12px;
  }
}

/* headings */
footer.footer h4{
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* body copy */
footer.footer p{
  margin: 8px 0;
  line-height: 1.65;
}

/* lists/inline link groups */
footer.footer .footer-links,
footer.footer .footer-inline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

footer.footer .footer-inline a{
  position: relative;
}

footer.footer .footer-inline a:not(:last-child)::after{
  content: "·";
  position: absolute;
  right: -10px;
  color: rgba(184,199,217,.65);
}

/* logo block */
footer.footer img{
  display: block;
  max-width: 120px;
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* subtle column balance */
footer.footer > .site-container > *{
  min-width: 220px;
  flex: 1 1 260px;
}

/* premium spacing rhythm */
footer.footer .muted,
footer.footer .copyright{
  color: #aebfd2 !important;
}

/* mobile polish */
@media (max-width: 640px){
  footer.footer{
    padding: 34px 0 30px;
  }

  footer.footer .site-container{
    gap: 28px;
  }

  footer.footer h4{
    margin-bottom: 8px;
  }

  footer.footer img{
    max-width: 110px;
    margin-bottom: 12px;
  }
}

/* ---------- Subnav buttons for doctor/lab/admin ---------- */
.app-subnav{
  max-width: var(--pd-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.app-subnav .btn{
  background: rgba(255,255,255,.82);
}

.app-subnav .btn.active{
  border-color: rgba(20,184,166,.28) !important;
  background: rgba(20,184,166,.10) !important;
  color: #115e59 !important;
}

/* ---------- Plan badge polish ---------- */
.plan-badge{
  border: 1px solid var(--pd-border);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  box-shadow: var(--pd-shadow-sm);
}

.plan-badge-label{
  font-weight: 900;
}

.plan-badge-link{
  font-weight: 800;
}


/* ---------- Utility ---------- */
.surface-soft{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
}

.shadow-soft{
  box-shadow: var(--pd-shadow-sm);
}

.shadow-card{
  box-shadow: var(--pd-shadow);
}

/* ---------- Mobile refinements ----------
   Do NOT touch nav open/close behavior */
@media (max-width: 920px){
  .site-container{
    padding-left: 12px;
    padding-right: 12px;
  }

  .card{
    padding: 16px;
    border-radius: 18px;
  }

  .dd-item{
    border-radius: 14px;
  }
}

@media (max-width: 640px){
  .site-container{
    padding-left: 10px;
    padding-right: 10px;
  }

  .card{
    padding: 14px;
    border-radius: 16px;
  }

  .btn{
    border-radius: 12px !important;
  }

  .table thead th,
  .dd-table thead th,
  .table tbody td,
  .dd-table tbody td{
    padding: 10px 11px;
  }
}

/* ===============================
   $100M SaaS Footer Layout Polish
   =============================== */

footer.footer .site-container{
  max-width:1180px;
  margin:auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:70px;
  align-items:start;
}

/* tighten vertical spacing */
footer.footer p{
  margin:6px 0;
  line-height:1.55;
}

/* stronger headings */
footer.footer h4{
  font-size:16px;
  margin-bottom:12px;
  font-weight:800;
}

/* better link rhythm */
footer.footer a{
  opacity:.9;
}

footer.footer a:hover{
  opacity:1;
}

/* logo spacing */
footer.footer img{
  margin-bottom:12px;
}

/* mobile layout */
@media (max-width:720px){

  footer.footer .site-container{
    grid-template-columns:1fr;
    gap:30px;
  }

}

/* =========================================================
   Site-wide $100M product polish
   ========================================================= */

:root{
  --pd-glow: 0 10px 30px rgba(2,132,199,.08), 0 4px 12px rgba(15,23,42,.06);
  --pd-glow-strong: 0 18px 45px rgba(2,132,199,.12), 0 8px 22px rgba(15,23,42,.10);
}

.site-header{
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.75), 0 8px 24px rgba(15,23,42,.04);
}

.card,
.panel,
.tile,
.stat-card,
.info-card,
.summary-card,
.content-card,
.table,
.dd-table,
.dropdown-menu,
.modal-content{
  box-shadow: var(--pd-glow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.panel:hover,
.tile:hover,
.stat-card:hover,
.info-card:hover,
.summary-card:hover,
.content-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pd-glow-strong);
  border-color: rgba(20,184,166,.18);
}

.btn{
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.btn:hover{
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

input:focus,
select:focus,
textarea:focus,
.input:focus{
  transform: translateY(-1px);
}

.card,
.table,
.dd-table,
.modal-content,
.dropdown-menu{
  background-image: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 100%);
}

h1, h2{
  letter-spacing: -0.03em;
}

h3, h4{
  letter-spacing: -0.02em;
}

.pill,
.chip,
.badge-soft{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

footer.footer{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 -8px 30px rgba(2,6,23,.10);
}

/* =========================================================
   $100M Product Feel Layer (safe enhancement)
   ========================================================= */

:root{
  --pd-glow: 0 10px 30px rgba(2,132,199,.08), 0 4px 12px rgba(15,23,42,.06);
  --pd-glow-strong: 0 18px 45px rgba(2,132,199,.12), 0 8px 22px rgba(15,23,42,.10);
}

/* premium card feel */
.card,
.panel,
.tile,
.stat-card,
.info-card,
.summary-card,
.content-card{
  box-shadow: var(--pd-glow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.panel:hover,
.tile:hover,
.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pd-glow-strong);
  border-color: rgba(20,184,166,.18);
}

/* premium buttons */
.btn{
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover{
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

/* cleaner header */
.site-header{
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

/* premium footer depth */
footer.footer{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 -8px 30px rgba(2,6,23,.10);
}
.triage-card {
  background: #f7fbfb;
  border: 1px solid #d9eeee;
  border-radius: 10px;
  padding: 18px;
  margin-top: 12px;
  line-height: 1.6;
}

.triage-severity-badge {
  display: inline-block;
  background: #ff9f1a;
  color: white;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.triage-summary-text {
  font-size: 15px;
}
.triage-summary-text ul {
  margin-top: 6px;
  padding-left: 18px;
}