/* B Fouress Planner - layout B: dark module bar, sticky context strip,
   full-width workspace. Sits on top of Bootstrap 4; only the app chrome and
   the dashboard tiles are styled here. */

:root {
    --paper:        #fbfbf8;
    --surface:      #ffffff;
    --surface-2:    #f4f5f0;
    --ink:          #14180f;
    --ink-2:        #4a5142;
    --ink-3:        #7b8371;
    --line:         #e2e5db;
    --line-2:       #cfd4c6;
    --brand:        #6cb33f;   /* the logo green */
    --brand-deep:   #457f22;   /* darkened for text and buttons on white */
    --chrome:       #171d13;
    --chrome-ink:   #e8ece3;
    --chrome-ink-2: #9aa48f;
    --ok:           #3f7d46;
    --ok-bg:        #eef5ea;
    --warn:         #8a6100;
    --warn-bg:      #fbf2dc;
    --crit:         #a63328;
    --crit-bg:      #fbeceb;
}

body {
    background: var(--paper);
    color: var(--ink);
}

/* ---------- module bar ---------- */
/* Two rows by design: brand and identity on top, the eight modules underneath.
   The module row is never squeezed by its neighbours, so it stays one line at
   any normal width and simply wraps if the window gets very narrow. */
.appbar {
    background: var(--chrome);
    display: flex;
    flex-direction: column;
    padding: 0 14px;
}
.appbar-top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
}
/* The logo is a green wordmark on an opaque white ground, so on the dark bar
   it needs to read as a deliberate white chip rather than a bare rectangle. */
.appbar .navbar-brand {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 7px;
    background: #fff;
    border-radius: 4px;
    line-height: 0;
}
.appbar .navbar-brand img { display: block; }
.appbar .appname {
    flex: 0 0 auto;
    color: var(--chrome-ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .05em;
}
.appbar .whoami {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.appbar .whoami form { margin: 0; }
.appbar .setuplink { color: var(--chrome-ink-2); font-size: 13px; text-decoration: none; }
.appbar .setuplink:hover { color: var(--chrome-ink); text-decoration: none; }
.appbar .uname { color: var(--chrome-ink-2); font-size: 13px; }
.appbar .btn-logout {
    border: 1px solid var(--chrome-ink-2);
    color: var(--chrome-ink);
    background: transparent;
    border-radius: 3px;
    padding: 3px 12px;
    font-size: 13px;
}
.appbar .btn-logout:hover { background: rgba(255,255,255,.08); color: #fff; }

.modnav { display: flex; gap: 18px; flex-wrap: wrap; row-gap: 0; }
.modnav a {
    color: var(--chrome-ink-2);
    font-size: 14px;
    text-decoration: none;
    padding: 0 0 11px;
    white-space: nowrap;
}
.modnav a:hover, .modnav a:focus { color: var(--chrome-ink); text-decoration: none; }
.modnav a.active {
    color: var(--chrome-ink);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--brand);
}

/* ---------- context strip ---------- */
.ctxstrip {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 9px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ctxstrip .ctxlabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ctxstrip select { min-width: 300px; max-width: 100%; }
.ctxstrip .ctxnote { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.ctxstrip .ctxnone { font-size: 13px; color: var(--crit); }

.btn-brand { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: #37661a; border-color: #37661a; color: #fff; }

/* ---------- workspace ---------- */
.workspace { padding: 18px 16px 48px; }
.workspace > * + * { margin-top: 16px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.panel-h {
    background: var(--chrome);
    color: var(--chrome-ink);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.panel-h .meta { color: var(--chrome-ink-2); font-weight: 500; font-size: 12.5px; }
.panel-b { padding: 16px; }

/* ---------- status tiles ---------- */
.tilerow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 767px) { .tilerow { grid-template-columns: 1fr; } }

.tile { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.tile-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    border-radius: 3px 3px 0 0;
}
.tile-n { font-variant-numeric: tabular-nums; font-size: 17px; }
.tile-b {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tile-b .none { color: var(--ink-3); font-style: italic; }
.tile-ok  .tile-h { background: var(--ok-bg);   color: var(--ok);   border-bottom-color: var(--ok); }
.tile-wrn .tile-h { background: var(--warn-bg); color: var(--warn); border-bottom-color: var(--warn); }
.tile-crt .tile-h { background: var(--crit-bg); color: var(--crit); border-bottom-color: var(--crit); }

.code { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 1px 9px;
    border-radius: 999px;
}
.pill-ok  { background: var(--ok-bg);   color: var(--ok); }
.pill-wrn { background: var(--warn-bg); color: var(--warn); }
.pill-crt { background: var(--crit-bg); color: var(--crit); }

.emptynote { color: var(--ink-3); font-size: 14px; margin: 0; }

/* ---------- login screen ---------- */
.loginwrap { max-width: 900px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.loginwrap h1 { font-size: 2.4rem; font-weight: 600; }
.loginwrap h2 { font-size: 1.9rem; font-weight: 400; color: var(--ink-2); }
.loginwrap .lead { color: var(--ink-2); }

/* the row for the project currently set in the context strip */
.table tbody tr.selectedrow > td { background: var(--ok-bg); }
.table tbody tr.selectedrow > td:first-child { box-shadow: inset 3px 0 0 var(--brand-deep); }

/* ---- scope switch: Department and My Work ------------------------------
   Two states, not a dropdown - there are only ever two, and a dropdown hides
   which one you are in. The chosen project is named on the button so nobody
   has to remember what they set on the Dashboard. */
.scopetoggle { display: flex; gap: 0; margin: 0 0 16px; flex-wrap: wrap; }
.scopebtn {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 7px 15px; font-size: 13px; line-height: 1.3;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-2); text-decoration: none;
}
.scopebtn:first-child { border-radius: 4px 0 0 4px; }
.scopebtn:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.scopebtn:hover, .scopebtn:focus { color: var(--ink); text-decoration: none; background: var(--surface-2); }
.scopebtn.on {
    background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
    font-weight: 600;
}
.scopebtn.on:hover, .scopebtn.on:focus { background: #37661a; color: #fff; }
.scopebtn.off { color: var(--ink-3); background: var(--surface-2); cursor: default; }
.scopename { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.scopebtn.on .scopename { opacity: .9; }