:root {
    --bg: #ffffff;
    --text: #1f2328;
    --bar: #343a40;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }

.page { max-width: 640px; margin: 0 auto; padding: 16px; }
.navbar form .nav-link { border: 0; }
.page.wide { max-width: 1100px; }

/* Controller pages: the tiles of the old app */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0; }
.tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 130px; padding: 10px; border: 1px solid #6c757d; border-radius: 10px;
    background: rgba(192, 192, 192, 0.5); color: inherit; text-decoration: none; text-align: center;
}
a.tile:hover, .tile.clickable:hover { background: rgba(160, 160, 160, 0.6); cursor: pointer; }
.tile img { width: 96px; height: 96px; }
.value-input { width: 5em; text-align: right; }
.chart { width: 100%; margin-bottom: 12px; }
.device-card .z-2 { z-index: 2; }

/* Locations inside locations (organization page) */
.location-depth-1 { padding-left: 1.25rem; }
.location-depth-2 { padding-left: 2.5rem; }
.location-depth-3 { padding-left: 3.75rem; }
.location-depth-4 { padding-left: 5rem; }

/* Column titles of the herd list: click to sort */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { text-decoration: underline; }

/* A reader's daily log (admin) */
.reader-log { max-height: 75vh; overflow: auto; padding: 8px; background: #f6f8fa; border: 1px solid #d0d7de;
              border-radius: 6px; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }

/* Dashboard notices: a colour per kind */
.notice-badge { background-color: var(--bs-secondary); }
.notice-breeding .notice-badge { background-color: #6f42c1; }
.notice-lambing .notice-badge { background-color: #198754; }
.notice-withdrawal .notice-badge { background-color: #fd7e14; }
.notice-module .notice-badge { background-color: #0d6efd; }
.notice-attestra .notice-badge { background-color: #dc3545; }
/* Dashboard: in a narrow card, the values, badges and button go under the controller's name */
.device-card .card-body { flex-wrap: wrap; }
.device-card .card-body > .flex-grow-1 { min-width: 12rem; }
/* Dashboard: one column (weather, herd, notifications, controllers), not too wide to read */
.dashboard { max-width: 48rem; }
/* A table column no wider than its content (the checkboxes) */
.fit-column { width: 1%; white-space: nowrap; }
/* The list under the search box of a contact picker */
.picker-list { max-height: 16rem; overflow-y: auto; }
/* A session's list scrolls by itself: Save stays close, even with 1000 tags on a phone */
.tag-list { max-height: 40vh; overflow-y: auto; }