/* ---------------------------------------------------------------------------
   Bespoke Sensor Applications -- supplementary styles.

   assets/css/style.css is the site's stylesheet and owns everything the site
   looked like before: the header, the hero, the sections, the .loginform cards,
   the chart container. This file only adds what that stylesheet has no rules
   for, because those parts of the site did not exist when it was written:

     * flash messages (there was no way to report anything but a redirect)
     * the admin area (there was no admin area)

   Two rules govern edits here:

     1. No bare element selectors. An earlier version of this file restyled
        body, a and h1-h3, which quietly overrode the template on every page.
        Everything below is a class, and every class is one the admin views or
        the flash markup ask for by name.
     2. The palette is the template's own, taken from assets/scss/_variables.scss
        and the .loginform rules, so the admin pages look like the rest of the
        site rather than like a second product.
--------------------------------------------------------------------------- */

:root {
  --bsa-deep:    #095256;  /* .loginform border, button background */
  --bsa-teal:    #64B6AC;  /* .section-bgdark, .returnsen */
  --bsa-mint:    #DAFFEF;  /* .section-bg, .loginform background */
  --bsa-text:    #777;     /* body copy */
  --bsa-link:    #43aea0;
  --bsa-border:  #b7d9d3;
  --bsa-ok:      #1a7f56;
  --bsa-warn:    #a86300;
  --bsa-danger:  #c2352b;
}

/* --- flash messages ------------------------------------------------------ */

.flash {
  margin: 20px auto;
  padding: 12px 18px;
  max-width: 700px;
  border-radius: 10px;
  border: 2px solid var(--bsa-deep);
  background: var(--bsa-mint);
  color: var(--bsa-deep);
  text-align: center;
}

.flash-success { border-color: var(--bsa-ok);     color: var(--bsa-ok); }
.flash-error   { border-color: var(--bsa-danger); color: var(--bsa-danger); background: #fdf1f0; }
.flash-info    { border-color: var(--bsa-deep);   color: var(--bsa-deep); }

/* --- admin: cards -------------------------------------------------------- */

.card {
  background: #fff;
  border-radius: 25px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
  padding: 25px;
  margin: 25px auto;
  max-width: 1100px;
  text-align: left;
  color: var(--bsa-text);
}

.card-narrow { max-width: 480px; }

.card h1, .card h2, .card h3 { color: var(--bsa-deep); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.stack > * + * { margin-top: 12px; }

/* --- admin: tables ------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--bsa-text);
}

table.data th,
table.data td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bsa-border);
  text-align: left;
  vertical-align: top;
}

table.data th {
  background: var(--bsa-mint);
  color: var(--bsa-deep);
  font-weight: 600;
  white-space: nowrap;
}

table.data tbody tr:hover { background: #f4fbf9; }

table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- admin: forms and buttons -------------------------------------------- */

.field { margin-bottom: 16px; text-align: left; }

.field label {
  display: block;
  margin-bottom: 5px;
  color: var(--bsa-deep);
  font-weight: 600;
  font-size: 14px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--bsa-deep);
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
  color: var(--bsa-text);
}

.hint { margin-top: 4px; font-size: 13px; color: var(--bsa-text); }

.btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--bsa-deep);
  color: #FCFFFD;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--bsa-teal); color: #FCFFFD; }

.btn-secondary { background: var(--bsa-teal); }
.btn-secondary:hover { background: var(--bsa-deep); }

.btn-danger { background: var(--bsa-danger); }
.btn-danger:hover { background: #94261e; }

.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }

/* --- admin: status pills ------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.pill-ok     { color: var(--bsa-ok); }
.pill-warn   { color: var(--bsa-warn); }
.pill-error  { color: var(--bsa-danger); }
.pill-muted  { color: var(--bsa-text); }

/* A freshly generated device secret, shown once and never stored in the clear.
   Wrapping matters: it is 64 hex characters and must be copyable in full. */
.secret {
  display: block;
  padding: 12px;
  background: var(--bsa-mint);
  border: 2px dashed var(--bsa-deep);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  word-break: break-all;
  color: var(--bsa-deep);
}

/* --- shared text helpers ------------------------------------------------- */

.muted { color: var(--bsa-text); }
.small { font-size: 13px; }