/* The Inter webfont is linked from index.html , not @import-ed here — an
@import serialises a second round trip after this file parses. */
:root {
--brand: #0fb05f;
--brand-dark: #0b7c47;
--brand-light: #d3f5e1;
--accent: #f0b95f;
--danger: #e15f4e;
--warn: #cd8a2a;
--ok: #4caf7a;
--bg: #ebf3f2;
--bg-2: #f5f8f8;
--surface: rgba(255,255,255,0.96);
--card: #ffffff;
--border: rgba(15, 23, 32, 0.08);
--text: #14232c;
--text-muted: #5a6a74;
--radius: 18px;
--shadow: 0 16px 40px rgba(15, 23, 32, 0.08);
--drawer-bg: #0b1220;
--drawer-bg-2: #060a13;
--drawer-border: rgba(148, 163, 184, 0.14);
--drawer-text: #b9c2d0;
--drawer-text-muted: #7b8794;
font-size: 15px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html {
/* Stops iOS inflating body text when a phone is rotated to landscape, which
otherwise breaks the type scale only on that orientation. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Inter is a large-x-height face; without this it renders noticeably heavy
on macOS/iOS compared to the design weight. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:
radial-gradient(circle at top left, rgba(15, 177, 113, 0.08), transparent 28%),
linear-gradient(180deg, #eff5f4 0%, #f8fafb 100%);
color: var(--text);
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
position: relative;
}
body::before, body::after {
content: "";
position: fixed;
inset: auto;
width: 360px;
height: 360px;
border-radius: 999px;
filter: blur(80px);
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
body::before { top: -120px; right: -80px; background: rgba(47, 143, 109, 0.13); }
body::after { bottom: -150px; left: -100px; background: rgba(224, 184, 109, 0.12); }
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
input, select, textarea, button { font-size: 14px; }
.btn, .card, .hero-card, .icon-btn, .topbar-search input, .toolbar input, .toolbar select, .filter-bar input, .filter-bar select, .form-field input, .form-field select, .form-field textarea, .pill-btn, .table-wrap, .modal, .animal-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px; border-radius: 999px; border: 1px solid transparent;
background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 6px 16px rgba(17, 37, 26, 0.06);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17, 37, 26, 0.12); }
.btn-primary { background: linear-gradient(135deg, #16b86e 0%, #0f7745 100%); color: #fff; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-danger { background: linear-gradient(135deg, #ef5d5b, var(--danger)); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.88); border-color: var(--border); color: var(--text); }
.btn-outline { background: rgba(255,255,255,0.96); border: 1px solid rgba(15, 23, 32, 0.08); color: var(--brand-dark); box-shadow: none; }
.btn-outline-invert { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); color: #fff; box-shadow: none; }
.btn-outline-invert:hover { background: rgba(255,255,255,0.18); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 999px; }
.btn-lg { padding: 14px 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* ---------------------------------------------------------------------
Login screen — two-panel layout.
Left: a dark brand panel carrying the product context, reusing the same
drawer palette the app shell uses, so signing in reads as the same product
rather than a detached page. Right: the credential form on a light surface.
Still one accent colour and no decorative animation beyond a single entrance
transition. The mark is the real brand logo (assets/mark-transparent.png).
--------------------------------------------------------------------- */
.login-screen {
min-height: 100vh; min-height: 100dvh;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
background: linear-gradient(180deg, #f7faf9 0%, #e9f1ee 100%);
position: relative; overflow-y: auto;
}
/* ---- Brand panel ---- */
.login-aside {
position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
padding: 44px 48px;
background: linear-gradient(160deg, #0d5c39 0%, var(--drawer-bg) 78%);
color: #fff;
}
/* Soft brand wash, echoing the blurred orbs on the app background. */
.login-aside::after {
content: ""; position: absolute; width: 460px; height: 460px; border-radius: 999px;
bottom: -190px; left: -140px; background: rgba(22, 184, 110, .22);
filter: blur(90px); pointer-events: none;
}
.login-aside > * { position: relative; z-index: 1; }
.login-lockup { display: flex; align-items: center; gap: 13px; }
/* Brand tile. The supplied logo is a raster flattened onto white with JPEG
ringing along its edges, so keying the background out leaves a pale fringe on
dark surfaces. Seating it on a white tile hides that by construction and
keeps the brand greens accurate instead of washed out. Replace with a plain
transparent ![]()
if a vector original ever lands. */
.brand-tile {
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border-radius: 12px; flex-shrink: 0;
width: 42px; height: 42px; padding: 5px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.brand-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-tile-sm { width: 32px; height: 32px; border-radius: 9px; padding: 3.5px; box-shadow: none; }
.login-mark { width: 42px; height: 42px; flex-shrink: 0; }
.login-lockup-text { line-height: 1; }
.login-lockup-name {
display: block; font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: #fff;
}
.login-lockup-sub {
display: block; margin-top: 5px; font-size: 9.5px; font-weight: 600;
letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.login-aside-body { max-width: 420px; padding: 40px 0; }
.login-aside-headline {
margin: 0 0 14px; font-size: 31px; line-height: 1.18; font-weight: 800; letter-spacing: -.022em;
}
.login-aside-lede {
margin: 0 0 26px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.72);
}
.login-aside-list { list-style: none; margin: 0; padding: 0; }
.login-aside-list li {
display: flex; align-items: flex-start; gap: 11px;
font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.86); margin-bottom: 13px;
}
.login-aside-list li:last-child { margin-bottom: 0; }
.login-tick {
flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border-radius: 999px;
background: rgba(22, 184, 110, .22); position: relative;
}
.login-tick::after {
content: ""; position: absolute; left: 5.5px; top: 4px; width: 4px; height: 8px;
border: solid #45d98c; border-width: 0 1.7px 1.7px 0; transform: rotate(43deg);
}
.login-aside-foot {
margin: 0; font-size: 11.5px; color: rgba(255,255,255,.45); letter-spacing: .01em;
}
/* ---- Form panel ---- */
.login-main {
display: flex; align-items: center; justify-content: center; padding: 40px 16px;
}
.login-wrap {
width: 400px; max-width: 100%; text-align: center; position: relative; z-index: 1;
animation: loginRise .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes loginRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Wordmark for the narrow layout, where the brand panel is not rendered. The
surface here is light, so the mark needs no tile behind it. */
.login-brand { display: none; margin-bottom: 26px; line-height: 1; }
.login-brand-mark { width: 54px; height: 54px; margin: 0 auto 14px; display: block; object-fit: contain; }
.login-brand-name {
display: block; font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: var(--brand-dark);
}
.login-brand-sub {
display: block; margin-top: 6px; font-size: 10px; font-weight: 600;
letter-spacing: .34em; text-transform: uppercase; color: var(--text-muted);
}
.login-title { color: var(--text); font-size: 23px; font-weight: 800; letter-spacing: -.018em; margin: 0 0 7px; }
.login-desc { color: var(--text-muted); margin: 0 auto 26px; font-size: 13.5px; max-width: 330px; line-height: 1.55; }
.auth-card {
background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px;
text-align: left; box-shadow: 0 10px 30px rgba(15, 23, 32, .07);
}
.login-form .field { margin-bottom: 16px; }
.login-form .input-label {
display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--text-muted);
}
.input-with-icon { position: relative; }
.input-with-icon .input-icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 17px; height: 17px; color: #8b9b93; pointer-events: none;
}
.input-with-icon input {
width: 100%; padding: 11px 12px 11px 38px; border-radius: 10px; border: 1px solid var(--border);
background: #f8fbfa; color: var(--text);
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input-with-icon input:hover { border-color: rgba(46,122,77,.3); }
.input-with-icon input:focus {
outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,176,95,.13);
}
.input-with-icon input::placeholder { color: #9caaa3; }
/* Leave room for the reveal button. */
#login-password { padding-right: 42px; }
.input-icon-btn {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
background: none; border: none; border-radius: 8px; color: #8b9b93;
transition: color .2s ease, background-color .2s ease;
}
.input-icon-btn svg { width: 17px; height: 17px; display: block; }
.input-icon-btn:hover { color: var(--brand-dark); background: rgba(15,176,95,.08); }
.input-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Only one of the two eye states is ever shown; JS toggles .is-revealed. */
.input-icon-btn .icon-shown-state { display: none; }
.input-icon-btn.is-revealed .icon-hidden-state { display: none; }
.input-icon-btn.is-revealed .icon-shown-state { display: block; }
.form-error {
background: #fef3f2; color: #b42318; border: 1px solid #fecdca;
padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 16px;
}
#login-submit { margin-top: 4px; }
.login-footnote { color: var(--text-muted); font-size: 12px; margin: 18px 0 0; }
.app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; z-index: 1; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view-root { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 24px 32px; background: transparent; min-height: 0; }
.topbar {
display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #ffffff;
border-bottom: 1px solid rgba(15, 23, 32, 0.08); position: relative; z-index: 50;
box-shadow: 0 8px 24px rgba(15, 23, 32, 0.06);
}
.topbar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.icon-btn {
background: rgba(255,255,255,0.9); border: 1px solid var(--border); border-radius: 12px; width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text); position: relative;
box-shadow: 0 8px 20px rgba(17, 37, 26, 0.05);
}
.icon-btn:hover { background: #f6fcf8; transform: translateY(-1px); }
.brand-mini { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 10px 24px rgba(15, 176, 95, .22); }
/* Topbar surface is already white, so the mark sits on it directly. */
.brand-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; display: block; }
.brand-mini small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.topbar-search { flex: 1; position: relative; max-width: 520px; }
.topbar-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; }
.topbar-search input { width: 100%; padding: 10px 12px 10px 36px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.95); box-shadow: inset 0 1px 2px rgba(17,37,26,.03); }
.topbar-search input:focus, .toolbar input:focus, .toolbar select:focus, .filter-bar input:focus, .filter-bar select:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none; border-color: rgba(46,122,77,.28); box-shadow: 0 0 0 4px rgba(46,122,77,.10);
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.avatar {
width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #fbbf24); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 13px;
}
.sync-indicator { display: inline-flex; align-items: center; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; }
.sync-dot.pending { background: var(--warn); }
.sync-dot.offline { background: var(--danger); }
.notif-badge {
position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; font-size: 10px;
font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center;
justify-content: center; padding: 0 3px;
}
.notif-popover {
position: absolute; top: 60px; right: 20px; width: 320px; background: #fff; border: 1px solid var(--border);
border-radius: 16px; box-shadow: 0 16px 42px rgba(0,0,0,.18); padding: 14px; z-index: 60;
}
.notif-popover-header { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(4,7,13,.62); backdrop-filter: blur(1px); z-index: 90; }
.nav-drawer {
position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background: linear-gradient(180deg, var(--drawer-bg) 0%, var(--drawer-bg-2) 100%); color: var(--drawer-text);
z-index: 91; display: flex; flex-direction: column; box-shadow: 18px 0 54px rgba(0,0,0,.38); border-right: 1px solid var(--drawer-border);
}
.drawer-header {
display: flex; align-items: center; justify-content: space-between; padding: 20px 18px;
border-bottom: 1px solid var(--drawer-border); color: #fff;
}
.drawer-header .modal-close { color: var(--drawer-text-muted); }
.drawer-header .modal-close:hover { color: #fff; }
.sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.sidebar-nav a {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--drawer-text); margin-bottom: 4px;
border: 1px solid transparent; transition: all .15s ease;
}
.sidebar-nav a:hover { background: rgba(148,163,184,.1); color: #fff; }
.sidebar-nav a.active { background: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(15,176,95,.25); }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 15px; opacity: .9; filter: grayscale(.15); }
.sidebar-nav a.active .nav-icon { opacity: 1; }
.nav-label { flex: 1; }
.drawer-footer { padding: 14px; border-top: 1px solid var(--drawer-border); }
.drawer-panel { margin-top: 10px; padding: 12px 13px; border-radius: 14px; background: rgba(148,163,184,.06); border: 1px solid var(--drawer-border); }
.drawer-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.drawer-panel-meta { font-size: 12px; color: var(--drawer-text); margin-top: 6px; }
.drawer-panel-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--drawer-text); }
.current-user { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; padding: 8px; border-radius: 12px; background: rgba(148,163,184,.06); }
#current-user-name { color: #fff; font-weight: 700; }
.muted-small { font-size: 11px; color: var(--drawer-text-muted); }
.drawer-footer .btn-danger {
background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.28); box-shadow: none;
}
.drawer-footer .btn-danger:hover { background: rgba(239,68,68,.2); transform: none; box-shadow: none; }
.command-banner {
background: linear-gradient(135deg, #2a7f63 0%, #133822 100%); color: #fff; border-radius: 24px;
padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin-bottom: 16px; box-shadow: 0 18px 44px rgba(21, 55, 37, 0.18);
}
.command-banner h2 { margin: 8px 0 6px; font-size: 22px; }
.command-banner p { margin: 0; color: #cfe3d7; font-size: 13px; max-width: 560px; line-height: 1.5; }
.month-scope-bar {
background: #ffffff; border: 1px solid rgba(15,40,27,0.06); border-radius: 24px; padding: 16px 18px;
margin-bottom: 18px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
box-shadow: 0 18px 40px rgba(15, 23, 32, 0.06);
}
.month-scope-bar strong { font-weight: 700; }
.month-scope-bar .badge { background: #ecf9f1; color: #0d603e; border: none; }
.recent-add-card { padding: 18px; background: #f7fbf8; border-radius: 24px; min-height: 158px; }
.page-shell { display: flex; flex-direction: column; gap: 16px; animation: fadeInUp .45s ease both; max-width: 1420px; margin: 0 auto; }
.hero-card {
position: relative; overflow: hidden; border-radius: 30px; padding: 32px 34px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap;
background: linear-gradient(135deg, #0f3c28 0%, #071512 100%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 70px rgba(5, 25, 20, 0.3);
}
.hero-card:hover { transform: translateY(-1px); }
.hero-card::before {
content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.08), transparent 45%);
pointer-events: none;
}
.hero-card::after {
content: ""; position: absolute; right: -40px; top: -20px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(20,155,93,0.2), transparent 65%);
}
.hero-card h2 { margin: 10px 0 10px; font-size: 32px; position: relative; z-index: 1; line-height: 1.1; color: #f7fcf7; }
.hero-card p { margin: 0; color: rgba(246,255,248,0.85); max-width: 680px; line-height: 1.65; position: relative; z-index: 1; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); color: #e9f9e9; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,0.14); }
.hero-actions, .hero-stats { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
.info-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); font-size: 12px; color: rgba(255,255,255,0.86); }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card {
background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid rgba(15, 23, 32, 0.06);
backdrop-filter: blur(18px);
}
.card:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(15, 23, 32, 0.1); }
.card h3 { margin: 0 0 4px; font-size: 13px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kpi-card { position: relative; overflow: hidden; min-height: 146px; border: 1px solid rgba(15, 23, 32, 0.06); }
.kpi-card::before { content: ""; position: absolute; inset: auto -20px -30px auto; width: 120px; height: 120px; border-radius: 50%; background: rgba(20,155,93,.08); }
.kpi-card--accent { background: rgba(15,176,95,.08); }
.kpi-card--ok { background: rgba(58,169,111,.08); }
.kpi-card--warn { background: rgba(246,193,82,.12); }
.kpi-card--danger { background: rgba(239,83,80,.08); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 14px; background: rgba(255,255,255,0.9); font-size: 16px; }
.kpi-value { font-size: 28px; font-weight: 800; margin: 8px 0 4px; }
.kpi-sub { font-size: 12.5px; color: var(--text-muted); }
.kpi-label.kpi-warn, .kpi-value.kpi-warn { color: #b56b1a; }
.kpi-label.kpi-ok, .kpi-value.kpi-ok { color: #138856; }
.kpi-label.kpi-danger, .kpi-value.kpi-danger { color: #b82b2a; }
.kpi-pct { font-size: 14px; font-weight: 600; opacity: .78; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.section-header h2 { margin: 0 0 4px; font-size: 19px; }
.section-header h3 { margin: 0; font-size: 16px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; }
.link-btn { background: none; border: none; color: var(--brand-dark); font-weight: 700; font-size: 13px; padding: 0; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input[type="text"] { flex: 1; min-width: 240px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.95); }
.filter-bar select { padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.95); }
.batch-group-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-btn {
background: rgba(255,255,255,0.88); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
}
.pill-btn.pill-active { background: rgba(47,143,109,.12); border-color: rgba(47,143,109,.26); color: var(--brand-dark); }
.bulk-bar {
display: flex; align-items: center; justify-content: space-between; background: rgba(47,143,109,.08); border: 1px solid rgba(47,143,109,.16);
border-radius: 16px; padding: 10px 16px; margin-bottom: 16px; font-size: 13.5px; font-weight: 700; color: var(--brand-dark);
}
.animal-card { position: relative; cursor: pointer; }
.animal-card-check { position: absolute; top: 14px; left: 14px; }
.animal-card-top { display: flex; align-items: center; justify-content: space-between; padding-left: 22px; margin-bottom: 12px; }
.animal-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.animal-card-row:last-of-type { border-bottom: none; }
.animal-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.yield-net { font-size: 13px; font-weight: 700; }
.yield-pos { color: var(--ok); }
.yield-neg { color: var(--danger); }
.icon-btn-sm { background: none; border: none; font-size: 14px; color: var(--text-muted); padding: 4px; }
.icon-btn-sm:hover { color: var(--danger); }
.table-wrap { overflow-x: auto; background: rgba(255,255,255,0.96); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: rgba(20,155,93,.05); color: var(--text-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
tbody tr:hover { background: rgba(20,155,93,.04); cursor: pointer; }
.empty-row td { text-align: center; color: var(--text-muted); padding: 30px; cursor: default; }
.empty-row:hover { background: transparent; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #eef0ef; color: #52605a; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.alert-item:last-child { border-bottom: none; }
.alert-icon { font-size: 16px; }
.modal-overlay {
position: fixed; inset: 0; background: rgba(10,20,14,.6); backdrop-filter: blur(3px); display: flex;
align-items: flex-start; justify-content: center; z-index: 1000; overflow-y: auto; padding: 40px 16px;
}
.modal {
background: #fff; border-radius: 20px; width: 100%; max-width: 640px;
box-shadow: 0 24px 64px rgba(0,0,0,.3); max-height: calc(100vh - 80px); display: flex; flex-direction: column;
}
.modal-lg { max-width: 900px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.modal-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-field {
display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700;
color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
}
.form-field input, .form-field select, .form-field textarea {
padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); font-weight: 400; color: var(--text);
text-transform: none; letter-spacing: normal; font-size: 13.5px;
}
.form-field.span-2 { grid-column: span 2; }
/* Field label row: lets a hint/link (e.g. "Auto-generate Next Tag") sit beside the label */
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field-hint {
font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--text-muted);
opacity: .8;
}
.field-hint-link { font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--brand-dark); cursor: pointer; }
.field-hint-link:hover { text-decoration: underline; }
.field-note {
font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text-muted); opacity: .85; margin-top: -2px;
}
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; letter-spacing: .02em !important; font-weight: 600 !important; }
/* Bordered section box for grouping related fields (e.g. pedigree/parents) */
.form-section {
border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: rgba(20,155,93,.02);
display: flex; flex-direction: column; gap: 12px;
}
.form-section-title {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
/* Conditional form sections (e.g. status-dependent detail fields) fade in
each time they're revealed, instead of abruptly popping into view. */
.status-extra:not(.hidden) { animation: fadeInUp .25s ease both; }
/* Segmented pill selector used for species/category choices inside forms */
.segmented-group { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented-btn {
padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--text-muted);
}
.segmented-btn.active { background: linear-gradient(135deg, #16b86e 0%, #0f7745 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(15,176,95,.28); }
.segmented-btn:active { transform: scale(.96); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 8px 14px; border-radius: 10px 10px 0 0; background: transparent; border: none; font-weight: 700; color: var(--text-muted); }
.tab-btn.active { background: rgba(20,155,93,.1); color: var(--brand-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.progress-bar { height: 8px; border-radius: 999px; background: #eef0ef; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); }
.progress-fill.warn { background: var(--warn); }
.progress-fill.danger { background: var(--danger); }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.list-plain li:last-child { border-bottom: none; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: rgba(20,155,93,.1); color: var(--brand-dark); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.toast-root { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1f2a24; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); transition: all .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #7f1d1d; }
.toast.success { background: #14532d; }
.chart-canvas-wrap { width: 100%; }
canvas { max-width: 100%; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Print / "Save as PDF" support — used by the Reports Export Center. Hides
app chrome and interactive controls, leaving only the current view's
content for a clean printed report. */
@media print {
.topbar, .nav-drawer, .drawer-overlay, #toast-root, #modal-root, #global-loader,
.hero-card, .toolbar, .tabs, #cat-tabs, #view-toggle,
button, .btn { display: none !important; }
.main-area { margin: 0 !important; }
.page-shell { padding: 0 !important; }
body { background: #fff !important; color: #111 !important; }
.card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; }
.print-report-header, .print-report-footer { display: flex !important; }
}
/* Print header with logo — hidden on screen, only shown at the top of a
printed / "Save as PDF" report. */
.print-report-header {
display: none;
align-items: center;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 2px solid #0f6b3a;
}
/* Real brand artwork (assets/tenya-logo-print.png). The .print-report-brand-name
/ -sub type treatment it replaced is kept below as a fallback for any caller
still emitting the old markup. */
.print-report-brand { flex-shrink: 0; line-height: 1; padding-right: 16px; border-right: 1px solid #d8d8d8; }
.print-report-logo {
display: block; height: 52px; width: auto;
/* Force the raster to print at full resolution rather than the browser's
downsampled screen bitmap. */
image-rendering: auto;
}
.print-report-brand-name { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #0f6b3a; }
.print-report-brand-sub {
display: block; margin-top: 4px; font-size: 8.5px; font-weight: 600;
letter-spacing: .3em; text-transform: uppercase; color: #6b7a72;
}
.print-report-header .print-report-title { font-size: 19px; font-weight: 800; color: #14232c; }
.print-report-header .print-report-meta { font-size: 11.5px; color: #555; }
/* Document footer for printed / "Save as PDF" output. */
.print-report-footer {
display: none;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
padding-top: 10px;
border-top: 1px solid #ccc;
font-size: 10.5px;
color: #666;
}
/* ---------------------------------------------------------------------
Background loading indicator — a slim top progress bar only, never a
full-screen overlay, so it never blocks or dims the app underneath.
--------------------------------------------------------------------- */
.top-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5000;
background: transparent; pointer-events: none; overflow: hidden;
}
.top-progress-bar {
position: absolute; top: 0; left: 0; height: 100%; width: 40%;
background: linear-gradient(90deg, transparent, var(--brand), var(--brand-dark), transparent);
border-radius: 0 4px 4px 0;
animation: topProgressSlide 1s ease-in-out infinite;
}
@keyframes topProgressSlide {
0% { left: -40%; }
100% { left: 100%; }
}
/* ---------------------------------------------------------------------
Premium modal / form / table / chart polish
--------------------------------------------------------------------- */
.modal-overlay { animation: modalOverlayIn .18s ease both; }
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
animation: modalPopIn .28s cubic-bezier(.2, .8, .3, 1.1) both;
border: 1px solid rgba(15, 23, 32, 0.06);
}
@keyframes modalPopIn {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
background: linear-gradient(135deg, rgba(15,176,95,.08), rgba(15,176,95,0) 60%);
border-radius: 20px 20px 0 0;
}
.modal-close { border-radius: 10px; width: 30px; height: 30px; }
.modal-close:hover { background: rgba(15, 23, 32, 0.06); color: var(--text); }
.modal-footer { background: rgba(15, 23, 32, 0.015); border-radius: 0 0 20px 20px; }
.form-field input, .form-field select, .form-field textarea {
padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border); background: rgba(247, 250, 249, 0.7);
box-shadow: inset 0 1px 2px rgba(15,23,32,.02);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: rgba(46,122,77,.32); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,176,95,.12); }
/* Premium custom dropdown arrow — replaces the plain native OS chevron everywhere.
Declared last so it wins over the earlier shorthand `background:` resets above. */
.form-field select, .toolbar select, .filter-bar select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7a72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px 6px;
padding-right: 30px;
cursor: pointer;
}
.form-field select:disabled { cursor: not-allowed; opacity: .6; }
.table-wrap { border-radius: 20px; }
thead th:first-child { border-top-left-radius: 14px; }
thead th:last-child { border-top-right-radius: 14px; }
th { position: sticky; top: 0; background: #eef9f2; z-index: 1; }
tbody tr { transition: background-color .15s ease, transform .15s ease; }
tbody tr:nth-child(even) { background: rgba(15, 23, 32, 0.012); }
tbody tr:hover { background: rgba(20,155,93,.07); }
td, th { padding: 12px 14px; }
.chart-canvas-wrap {
width: 100%; background: linear-gradient(180deg, rgba(20,155,93,.03), rgba(20,155,93,0) 60%);
border: 1px solid var(--border); border-radius: 16px; padding: 14px 10px 6px;
}
/* ---------------------------------------------------------------------
Numeric typography. Inter's default figures are proportional, so digits
change width per glyph and columns of money/weights visibly jitter between
rows. Tabular figures fix the advance width so they align in a column.
Applied only where numbers are read as data, not to running prose.
--------------------------------------------------------------------- */
.kpi-value, .yield-net, .metric-value,
table td, table th,
.mono-input, input[type="number"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---------------------------------------------------------------------
Responsive layout — tablet & mobile
--------------------------------------------------------------------- */
/* iOS Safari auto-zooms the viewport when a focused form control has a
computed font-size below 16px, leaving the page zoomed in and horizontally
scrollable after the keyboard closes. The global rule sets 14px, so every
control needs bumping on touch-sized screens. 16px is the exact threshold. */
@media (max-width: 900px) {
input, select, textarea,
.input-with-icon input,
.form-field input, .form-field select, .form-field textarea,
.toolbar input, .toolbar select,
.filter-bar input, .filter-bar select,
.topbar-search input {
font-size: 16px;
}
}
/* Comfortable touch targets. 30px controls are well under the ~44px that both
Apple's and Google's guidance call for; the visual size is kept by expanding
the hit area rather than the painted box. */
@media (pointer: coarse) {
.input-icon-btn { width: 44px; height: 44px; right: 2px; border-radius: 10px; }
.icon-btn { width: 44px; height: 44px; }
.tab-btn { padding: 11px 16px; }
.link-btn, .field-hint-link { padding: 6px 0; }
}
@media (max-width: 1100px) {
.login-aside { padding: 36px 34px; }
.login-aside-headline { font-size: 26px; }
}
@media (max-width: 900px) {
/* Drop the brand panel rather than stacking it: stacked, it would push the
credential form below the fold on a phone. .login-brand takes over. */
.login-screen { grid-template-columns: 1fr; }
.login-aside { display: none; }
.login-brand { display: block; }
.view-root { padding: 16px 14px 24px; }
.hero-card { padding: 22px 20px; border-radius: 22px; }
.hero-card h2 { font-size: 24px; }
.command-banner { padding: 18px 18px; }
.modal-overlay { padding: 16px 8px; align-items: flex-end; }
.modal { border-radius: 22px 22px 0 0; max-height: calc(100dvh - 24px); }
.form-grid { grid-template-columns: 1fr; }
.form-field.span-2 { grid-column: span 1; }
}
@media (max-width: 720px) {
.topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
.topbar-search { order: 3; flex-basis: 100%; max-width: none; }
.topbar-actions { gap: 6px; }
.topbar-actions .btn span, .topbar-actions .btn { font-size: 12px; }
.nav-drawer { width: min(280px, 86vw); }
.section-header { flex-direction: column; align-items: flex-start; }
.toolbar { width: 100%; }
.toolbar input, .toolbar select { flex: 1; min-width: 0; }
.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }
table { font-size: 12.5px; }
th, td { padding: 9px 10px; white-space: nowrap; }
.kpi-value { font-size: 22px; }
.modal-body { padding: 16px; }
.modal-header, .modal-footer { padding: 14px 16px; }
}
@media (max-width: 480px) {
:root { font-size: 14px; }
.login-wrap { width: 100%; }
.auth-card { padding: 20px; }
.hero-card { flex-direction: column; }
/* Reclaim vertical space so the form sits above the fold once the on-screen
keyboard opens, without shrinking the type below comfortable reading size. */
.login-main { padding: 28px 14px; }
.login-brand { margin-bottom: 22px; }
.login-brand-mark { width: 42px; height: 42px; margin-bottom: 12px; }
.login-brand-name { font-size: 23px; }
.login-title { font-size: 21px; }
.login-desc { font-size: 13px; margin-bottom: 22px; max-width: 300px; }
.login-footnote { font-size: 11.5px; }
}