/* APNIC Community Honeynet Project — light UI overlay on top of Foundation.
 *
 * COSMETIC ONLY. This file restyles colors, type, spacing and cards. It does
 * NOT change the layout grid (.row/.columns) or any element id/class the JS
 * relies on (#sensor-table, .del-sensor, #_csrf_token, the dashboard tiles,
 * the deploy form). Safe to edit/revert in isolation. Loaded AFTER
 * foundation.min.css + normalize.css so these rules win.
 */

:root {
  --accent:       #117a8b;   /* teal */
  --accent-dark:  #0c5b67;   /* deep teal (top bar) */
  --accent-blue:  #134b66;   /* blue (headings) */
  --ink:          #20303a;
  --muted:        #61727b;
  --bg:           #f4f7f8;
  --card:         #ffffff;
  --border:       #e1e8ea;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, "Noto Sans", sans-serif;
}

/* ---- Top bar -------------------------------------------------------------- */
.top-bar,
.top-bar.expanded,
.top-bar.expanded .title-area,
.top-bar .name {
  background: var(--accent-dark);
}
.top-bar { box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.top-bar .name h1 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.top-bar .name h1 a { color: #ffffff; }

.top-bar-section ul li { background: transparent; }
.top-bar-section ul li > a:not(.button) {
  background: transparent;
  color: #d8eef2;
  font-weight: 500;
}
.top-bar-section ul li:hover > a:not(.button),
.top-bar-section ul li.active > a:not(.button) {
  background: rgba(255,255,255,.12);
  color: #ffffff;
}
.top-bar-section .dropdown { background: var(--accent-dark); }
.top-bar-section .dropdown li > a {
  background: var(--accent-dark);
  color: #d8eef2;
}
.top-bar-section .dropdown li:hover > a { background: rgba(255,255,255,.14); }

/* ---- Links, buttons, headings -------------------------------------------- */
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.button { background: var(--accent); border-radius: 4px; }
.button:hover, .button:focus { background: var(--accent-dark); }
.button.secondary { background: #e9eff1; color: var(--ink); }
.button.secondary:hover { background: #dde6e9; color: var(--ink); }

h1, h2, h3, h4 { color: var(--accent-blue); font-weight: 600; }
h5 { color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
     font-size: .78rem; font-weight: 700; }

.page-subtitle { color: var(--muted); font-size: .95rem; margin: 0 0 .4rem; }

/* ---- Cards (Foundation .panel) + tables ---------------------------------- */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  padding: 18px 20px;
}

table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.panel table { border: 0; box-shadow: none; }   /* inner tiles' mini-tables stay flat */
table thead { background: #eef3f5; }
table thead th { color: var(--accent-blue); border-bottom: 1px solid var(--border); }
table tbody tr:hover td { background: #f3f8f9; }

input[type="text"], input[type="email"], input[type="password"], select {
  border-radius: 4px;
}

/* ---- Footer -------------------------------------------------------------- */
#footer {
  margin-top: 64px;
  margin-bottom: 40px;
  color: var(--muted);
  font-size: .82rem;
}
.footer-inner { text-align: center; }
.footer-brand { font-weight: 600; color: var(--accent-blue); }
.footer-sep   { color: #c0cdd2; margin: 0 .45rem; }
#footer a { color: var(--accent); }

/* ---- Login --------------------------------------------------------------- */
.login-wrap { margin-top: 7%; }
.login-card { padding: 28px 28px 22px; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-title {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
}
.login-sub { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.login-card label { font-weight: 600; color: var(--ink); }
.login-card .button.expand { margin-top: 10px; }
.login-forgot { text-align: center; margin: 14px 0 0; font-size: .85rem; }