/* =========================
   PhysioLogic PRISM – Teal UI
   ========================= */

:root {
  --brand-teal:       #0BAFBF;   /* primary */
  --brand-teal-600:   #0A98A6;   /* hover */
  --brand-teal-700:   #087F8C;   /* links */
  --brand-teal-900:   #065A60;   /* headings */
  --brand-bg:         #F7F9FB;   /* background */
  --brand-card:       #FFFFFF;   /* cards */
  --brand-border:     rgba(8,127,140,0.18);
  --brand-muted:      #6c8a91;
  --text-color:       #08373D;
}

/* --- Layout --- */
html, body { height: 100%; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: #ffffff;           /* solid site background */
  color: #08373D;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.container {
  /* make it feel like a normal website width, not a small card */
  width: 100%;
  max-width: 1200px;             /* increase site width */
  margin: 0 auto;                /* center within viewport */
  padding: 24px 20px;            /* comfortable gutters */
  box-shadow: none;              /* remove card look */
  border: none;                  /* remove border */
  background: transparent;       /* let page background show */
  border-radius: 0;
  flex: 1 0 auto;                /* allow content to grow */
}


/* --- Headings & links --- */
h1, h2, h3 { color: var(--brand-teal-900); margin-top: 0; }
a { color: var(--brand-teal-700); text-decoration: none; }
a:hover { color: var(--brand-teal-600); }

/* --- Forms & inputs --- */
.input-field,
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-color);
  box-sizing: border-box;
}
.form-group label { font-weight: 600; color: var(--brand-teal-900); margin-bottom: 6px; }

/* --- Buttons --- */
.button, button, input[type="submit"] {
  background: var(--brand-teal);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--brand-teal-600);
}
.small-button {
  background: var(--brand-teal);
  color: #fff;
  padding: 7px 10px;
  margin: 2px;
  border-radius: 6px;
  font-size: 0.85rem;
}
.small-button:hover { background: var(--brand-teal-600); }

/* --- Tables --- */
table, .data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: #fff;
}
th, td {
  border: 1px solid var(--brand-border);
  padding: 10px 12px;
  text-align: left;
}
thead th {
  background: #F2FBFC;
  color: var(--brand-teal-900);
  font-weight: 700;
}

/* --- Flash messages --- */
.flash.success { background: #E8F9FB; color: #0e7c79; border: 1px solid #b8eee7; padding: 8px 10px; border-radius: 6px; }
.flash.error   { background: #FFF1F1; color: #b00020; border: 1px solid #ffd2d2; padding: 8px 10px; border-radius: 6px; }

/* --- Cards --- */
.card, .panel {
  background: #fff;
  border: 1px solid rgba(8,127,140,0.18);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 16px;
}

/* --- Remove old navbar entirely --- */
.navbar { display: none !important; }
footer.disclaimer {
  background: #f2fbfc;
  color: #0a5460;
  font-size: 0.9rem;
  text-align: center;
  padding: 12px 16px;
  border-top: 1px solid rgba(8,127,140,0.15);
  flex: 0 0 auto;
}