/* EquineSuite Stable Manager — brand: Stable Green, Saddle Clay, Tack, Paddock Sage, Oat, Straw.
   Rajdhani for names and headings, IBM Plex Mono for stalls, times, weights and doses. Stall tiles share the arched top of the mark. */

:root {
  --green: #12201A; --clay: #E3915E; --tack: #9C4F22; --sage: #B7D3B0; --oat: #F3EFE6; --straw: #E5B83B; --straw-bg: #FFF3D1; --straw-ink: #6B5200;
  --bg: #F3EFE6; --panel: #FFFFFF; --panel2: #F7F6F1; --line: #E5E2D8; --line2: #D8D3C6; --ink: #12201A; --ink2: #3E4A42; --mute: #6E766C;
  --side: #12201A; --side-ink: #F3EFE6; --side-mute: #8FA596; --side-line: #26392E; --side-hi: #1B2E25;
  --ok: #2E7D4F; --ok-bg: #DDEDD8; --info: #2F5E8C; --info-bg: #DCE8F3; --warn: #8A6100; --warn-bg: #FFF3D1; --bad: #A8341F; --bad-bg: #F8DED6;
  --r: 10px; --arch: 20px 20px 8px 8px; --shadow: 0 14px 30px -20px rgba(18, 32, 26, .35);
  --f-head: 'Rajdhani', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0D1712; --panel: #14221B; --panel2: #111D17; --line: #26392E; --line2: #2E4639; --ink: #F3EFE6; --ink2: #C8D2C3; --mute: #8FA596;
  --side: #0A120E; --side-hi: #14221B;
  --ok: #8FD3A0; --ok-bg: #1D3A27; --info: #9CC3EA; --info-bg: #1B2E40; --warn: #F2CF6B; --warn-bg: #3A3014; --bad: #F2A08C; --bad-bg: #432019;
  --straw-bg: #3A3014; --straw-ink: #F2CF6B; --shadow: 0 14px 30px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 500 15px/1.45 var(--f-head); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 700; letter-spacing: .03em; margin: 0; }
.mono, code, kbd, pre, input[type=time], input[type=date], input[type=number] { font-family: var(--f-mono); }
.muted { color: var(--mute); } .small { font-size: 12.5px; } .tiny { font-size: 11px; } .strong { font-weight: 700; } .grow { flex: 1; }
.bad-txt { color: var(--bad) !important; } .danger-txt { color: var(--bad); }
.hn { font-family: var(--f-head); font-weight: 700; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; color: var(--mute); margin: 0 0 6px; text-transform: uppercase; }
.ico { width: 20px; height: 20px; flex: none; }
.boot { min-height: 100vh; display: grid; place-items: center; background: var(--green); }
.loading { display: grid; place-items: center; padding: 80px 0; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------------- buttons & inputs */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 700 14px var(--f-head); letter-spacing: .04em; padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink2); } .btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--green); color: var(--oat); border-color: var(--green); }
:root[data-theme="dark"] .btn.primary { background: var(--oat); color: var(--green); border-color: var(--oat); }
.btn.clay { background: var(--clay); color: var(--green); border-color: var(--clay); }
.btn.ghost { background: transparent; } .btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 13px; } .btn.block { width: 100%; justify-content: center; margin-top: 8px; }
.btn.busy { position: relative; color: transparent !important; } .btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid var(--mute); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: inherit; border-radius: 8px; cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--panel2); } .icon-btn.sm { width: 26px; height: 26px; } .icon-btn.sm .ico { width: 15px; height: 15px; }
.chip-btn { border: 1px solid var(--line2); background: var(--panel); color: var(--ink); border-radius: 99px; padding: 4px 10px; font: 600 13px var(--f-head); cursor: pointer; }
input, select, textarea { width: 100%; font: 500 14.5px var(--f-head); color: var(--ink); background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(227, 145, 94, .25); }
input:disabled, select:disabled, textarea:disabled { background: var(--panel2); color: var(--mute); }
input[type=checkbox] { width: auto; accent-color: var(--clay); }
textarea { resize: vertical; } textarea.mono { font-family: var(--f-mono); font-size: 13px; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }

/* ---------------- badges, pills */
.b { display: inline-block; font: 600 10.5px var(--f-mono); letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: var(--panel2); color: var(--ink2); white-space: nowrap; border: 1px solid var(--line); }
.b.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .b.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.b.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--straw); } .b.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.b.sage { background: var(--sage); color: var(--green); border-color: transparent; } .b.neu { opacity: .8; }
.pill { display: inline-block; font: 500 11px var(--f-mono); padding: 1px 7px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); margin: 1px; text-decoration: none; }
.disc { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--f-mono); letter-spacing: .05em; padding: 2px 8px 2px 6px; border-radius: 99px; border: 1px solid var(--line2); background: var(--panel); }
.disc::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }

/* ---------------- shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 12px; text-decoration: none; }
.brand small { display: block; font: 500 9px var(--f-mono); letter-spacing: .24em; color: var(--side-mute); }
.brand b { font: 700 17px var(--f-head); letter-spacing: .08em; }
.org-pick { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 8px; border: 1px solid var(--side-line); background: var(--side-hi); color: var(--side-ink); border-radius: 8px; font: 600 14px var(--f-head); cursor: pointer; text-align: start; }
.org-pick span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 26px; height: 26px; border-radius: 7px; background: var(--clay); color: var(--green); display: grid; place-items: center; font: 700 11px var(--f-mono); flex: none; }
.side nav { flex: 1; padding: 4px 8px; }
.nav-g p { font: 600 9.5px var(--f-mono); letter-spacing: .2em; color: var(--side-mute); margin: 14px 8px 4px; text-transform: uppercase; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: #C8D2C3; }
.side nav a:hover { background: var(--side-hi); color: var(--side-ink); }
.side nav a.on { background: var(--side-hi); color: var(--side-ink); box-shadow: inset 3px 0 0 var(--clay); }
.side nav a .ico { width: 18px; height: 18px; } .side nav em:empty { display: none; }
.side nav em { margin-inline-start: auto; font: 600 10px var(--f-mono); background: var(--clay); color: var(--green); border-radius: 99px; padding: 0 6px; font-style: normal; }
.side-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--side-line); font: 500 11px var(--f-mono); color: var(--side-mute); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--mute); border-radius: 9px; padding: 7px 12px; font: 500 14px var(--f-head); cursor: pointer; text-align: start; }
.search span { flex: 1; } kbd { font-size: 10.5px; border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; }
.top .btn.primary { margin-inline-start: auto; } .bell i { position: absolute; top: 3px; inset-inline-end: 2px; background: var(--clay); color: var(--green); font: 700 9px var(--f-mono); border-radius: 99px; padding: 1px 4px; font-style: normal; }
.devbar { background: var(--straw-bg); color: var(--straw-ink); font: 600 10.5px var(--f-mono); letter-spacing: .12em; text-align: center; padding: 4px; border-bottom: 1px solid var(--straw); }
#view { padding: 22px 24px 60px; max-width: 1480px; width: 100%; margin: 0 auto; }
.only-m { display: none; }

/* ---------------- page */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; line-height: 1; letter-spacing: .04em; }
.page-head .sub { margin: 6px 0 0; color: var(--mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.card.flush { padding: 0; overflow: hidden; }
.card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.card > header h3 { font-size: 15px; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; margin-inline-end: auto; }
.card h3 { font-size: 15px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.empty { display: grid; place-items: center; gap: 8px; padding: 50px 20px; color: var(--mute); text-align: center; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.search-in { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--panel); border-radius: 8px; padding: 0 10px; min-width: 240px; color: var(--mute); }
.search-in input { border: 0; padding: 8px 0; background: transparent; box-shadow: none !important; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: var(--panel); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--ink2); font: 600 13px var(--f-head); padding: 6px 11px; cursor: pointer; border-inline-end: 1px solid var(--line); }
.seg button:last-child { border-inline-end: 0; } .seg button.on { background: var(--green); color: var(--oat); }
:root[data-theme="dark"] .seg button.on { background: var(--oat); color: var(--green); }

/* ---------------- tables */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel2); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; } .tbl tbody tr:hover td { background: var(--panel2); }
.tbl td.strong { font-weight: 700; font-size: 15px; } .tbl.mini { font-size: 13px; } .tbl.mini td, .tbl.mini th { padding: 5px 8px; }
.tbl-foot { padding: 8px 12px; margin: 0; font: 500 11px var(--f-mono); }

/* ---------------- record page */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; margin: 0; }
.dl > div.wide { grid-column: 1 / -1; } .dl dt { font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dl dd { margin: 2px 0 0; font-size: 15px; } .pre { white-space: pre-wrap; }
.row-link { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 14px; }
.row-link:last-child { border-bottom: 0; } .row-link:hover { color: var(--tack); } .row-link small { display: inline-flex; gap: 6px; align-items: center; color: var(--mute); }
.row-link span small { display: block; }
.hist { font-size: 13px; margin: 0 0 8px; } .thumb { max-width: 160px; border-radius: 8px; }
.qr-card { text-align: center; } .qr { border-radius: 8px; border: 1px solid var(--line); }
.meal-view { padding: 2px 0; }

/* ---------------- forms & modal */
.modal-bg { position: fixed; inset: 0; background: rgba(13, 23, 18, .55); display: grid; place-items: start center; padding: 6vh 16px; z-index: 100; overflow-y: auto; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border-radius: 14px; width: min(520px, 100%); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); border: 1px solid var(--line); }
.modal.wide { width: min(860px, 100%); }
.modal > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal > header h3 { font-size: 19px; } .modal-body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
.modal > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel2); border-radius: 0 0 14px 14px; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.fld > span { font: 600 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.fld.wide { grid-column: 1 / -1; } .req { color: var(--clay); } .help { color: var(--mute); font-size: 12px; }
.help-box { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; color: var(--ink2); margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; cursor: pointer; } .chip input { display: none; }
.chip span { border: 1px solid var(--line2); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; background: var(--panel); }
.chip input:checked + span { background: var(--green); color: var(--oat); border-color: var(--green); }
:root[data-theme="dark"] .chip input:checked + span { background: var(--clay); color: var(--green); border-color: var(--clay); }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: var(--line2); border-radius: 99px; transition: .2s; cursor: pointer; }
.switch i::after { content: ''; position: absolute; width: 18px; height: 18px; inset-inline-start: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + i { background: var(--clay); } .switch input:checked + i::after { transform: translateX(18px); }
.ref { position: relative; display: flex; gap: 4px; } .ref .ref-q { flex: 1; }
.ref-new { border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; width: 36px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.ref-list { display: none; position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0; z-index: 10; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; margin-top: 2px; }
.ref-list.open { display: block; }
.ref-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; padding: 8px 10px; text-align: start; cursor: pointer; font: 600 14px var(--f-head); color: var(--ink); }
.ref-list button:hover { background: var(--panel2); } .ref-list small { color: var(--mute); font: 500 11px var(--f-mono); } .pad { padding: 10px; }
.ref-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--sage); color: var(--green); border-radius: 99px; padding: 2px 4px 2px 10px; font-weight: 700; font-size: 13px; }
.tag button { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 15px; }
.tbl-ed table { width: 100%; border-collapse: collapse; } .tbl-ed th { font: 600 10px var(--f-mono); color: var(--mute); text-align: start; padding: 2px; }
.tbl-ed td { padding: 2px; } .tbl-ed input { padding: 6px 8px; font-size: 13.5px; }
.meals-ed { display: flex; flex-direction: column; gap: 8px; }
.meal { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 6px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--panel2); }
.meal-its { display: flex; flex-direction: column; gap: 4px; } .meal-it { display: grid; grid-template-columns: 70px 70px 1fr auto; gap: 4px; }
.meal input { padding: 5px 8px; font-size: 13.5px; }
.img-fld { display: flex; align-items: center; gap: 10px; } .img-fld img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px 12px 6px 6px; }
.ai-fill { background: var(--panel2); border: 1px dashed var(--clay); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.ai-fill summary { cursor: pointer; font-weight: 700; display: flex; gap: 6px; align-items: center; color: var(--tack); }
.ai-fill textarea { margin: 8px 0; }
.list-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 6px; text-align: start; font: 600 15px var(--f-head); color: var(--ink); cursor: pointer; }
.list-btn:hover { background: var(--panel2); } .list-btn small { display: block; color: var(--mute); font: 500 11px var(--f-mono); }
.palette .modal-body { padding-top: 10px; } .pal-q { font-size: 17px; padding: 11px 12px; margin-bottom: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.quick-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--arch); background: var(--panel2); cursor: pointer; font: 700 14px var(--f-head); color: var(--ink); }
.quick-grid button:hover { border-color: var(--clay); }
.note { display: block; padding: 10px 6px; border-bottom: 1px solid var(--line); text-decoration: none; } .note.unread b::before { content: '● '; color: var(--clay); }
.note span, .note small { display: block; font-size: 13px; color: var(--mute); }
.err-box { background: var(--bad-bg); color: var(--bad); padding: 8px; border-radius: 6px; font-size: 12px; max-height: 160px; overflow: auto; }

/* ---------------- toasts */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 200; }
.toast { background: var(--green); color: var(--oat); padding: 10px 16px; border-radius: 10px; font-weight: 700; box-shadow: var(--shadow); transition: .3s; border-inline-start: 4px solid var(--sage); }
.toast.err { border-inline-start-color: var(--clay); background: #3A1A12; } .toast.warn { border-inline-start-color: var(--straw); } .toast.out { opacity: 0; transform: translateY(8px); }

/* ---------------- AI panel */
.ai-panel { position: fixed; inset-inline-end: 14px; top: 64px; bottom: 14px; width: 380px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); display: flex; flex-direction: column; z-index: 60; }
.ai-panel > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ai-panel > header b { display: flex; gap: 6px; align-items: center; font-size: 16px; letter-spacing: .04em; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; }
.msg.bot { background: var(--panel2); border: 1px solid var(--line); align-self: flex-start; } .msg.me { background: var(--green); color: var(--oat); align-self: flex-end; }
.msg.thinking { opacity: .6; } .msg.err { color: var(--bad); } .ai-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-sugs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; }
.ai-in { display: flex; gap: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); } .ai-panel > p { padding: 0 12px 8px; margin: 0; }

/* ---------------- home */
.hero { background: var(--green); color: var(--oat); border-radius: 14px; padding: 26px 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; position: relative; overflow: hidden; }
.hero h1 { font-size: 36px; letter-spacing: .04em; } .hero .eyebrow { color: #8FA596; } .hero .lead { color: #C8D2C3; margin: 4px 0 10px; font-size: 16px; }
.hero .disc { background: #1B2E25; border-color: #2B4237; color: var(--oat); } .disc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hero .pill { background: #1B2E25; border-color: #2B4237; color: var(--oat); }
.hero-acts { display: grid; grid-template-columns: repeat(4, 86px); gap: 8px; align-self: center; }
.hero-acts a { aspect-ratio: 1; border-radius: 22px 22px 8px 8px; background: #1B2E25; border: 1.5px solid #2B4237; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px 10px; text-decoration: none; font-weight: 700; font-size: 13.5px; }
.hero-acts a:hover { background: var(--clay); color: var(--green); border-color: var(--clay); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.kpi small { font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.kpi b { font: 700 28px var(--f-head); line-height: 1.1; } .kpi span { font-size: 13px; color: var(--mute); }
.kpi.warn { background: var(--straw-bg); border-color: var(--straw); } .kpi:hover { border-color: var(--clay); }
.meter { display: block; height: 4px; background: var(--line); border-radius: 4px; margin-top: 6px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--sage); }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .home-grid .brief { grid-row: span 2; }
.home-grid .card:nth-child(2) { grid-column: span 2; }
.brief-sum { font-size: 15.5px; color: var(--ink2); background: var(--panel2); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.brief-it { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.brief-it > i { width: 4px; align-self: stretch; border-radius: 4px; background: var(--info); flex: none; }
.brief-it.warn > i { background: var(--straw); } .brief-it.bad > i { background: var(--clay); }
.brief-it span { flex: 1; } .brief-it span small { display: block; color: var(--mute); font-size: 13px; }
.brief-it em { font: 600 11px var(--f-mono); color: var(--tack); font-style: normal; display: flex; align-items: center; white-space: nowrap; } .brief-it em .ico { width: 14px; }
.timeline { display: flex; flex-direction: column; }
.tl-it { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.tl-it span small { display: block; color: var(--mute); font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 4px; } .bar { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bar i { display: block; width: 70%; background: var(--clay); border-radius: 6px 6px 2px 2px; min-height: 2px; } .bar small { font: 500 9.5px var(--f-mono); color: var(--mute); margin-top: 4px; }

/* ---------------- stall tile (shared by map, board, horses) */
.stall { border-radius: var(--arch); background: var(--panel); border: 1.5px solid var(--line2); padding: 10px 9px 8px; display: flex; flex-direction: column; justify-content: space-between; min-height: 70px; text-decoration: none; color: var(--ink); }
.stall small { font: 500 10px var(--f-mono); color: var(--mute); } .stall b { font: 700 15px var(--f-head); line-height: 1.05; }
.stall.sel { background: var(--clay); border-color: var(--clay); color: var(--green); } .stall.sel small { color: var(--green); }
.stall.sage, .stall.turned_out { background: var(--sage); border-color: var(--sage); color: var(--green); }
.stall.watch, .stall.vet_watch, .stall.box_rest, .stall.rehab { background: var(--straw-bg); border: 2px solid var(--straw); } .stall.watch small, .stall.vet_watch small { color: var(--straw-ink); }
.stall.isolation { background: var(--bad-bg); border: 2px solid var(--bad); }
.stall.empty { border-style: dashed; background: transparent; } .stall.empty b { font: 500 10px var(--f-mono); color: var(--mute); }

/* ---------------- login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.login-art { background: var(--green); color: var(--oat); padding: 8vh 6vw; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.login-art .eyebrow { color: #8FA596; margin-top: 20px; } .login-art h1 { font-size: 58px; letter-spacing: .08em; line-height: .9; }
.login-art .lead { font: 600 22px var(--f-head); color: #C8D2C3; max-width: 460px; }
.stall-strip { display: grid; grid-template-columns: repeat(5, 84px); gap: 8px; margin-top: 30px; }
.login-art .stall { background: #1B2E25; border-color: #2B4237; color: var(--oat); aspect-ratio: 1; } .login-art .stall small { color: #8FA596; }
.login-art .stall.sel { background: var(--clay); color: var(--green); } .login-art .stall.sage { background: var(--sage); color: var(--green); }
.login-art .stall.watch { background: #FFF3D1; border-color: var(--straw); color: var(--green); } .login-art .stall.empty { background: transparent; border: 1.5px dashed #2B4237; }
.login-box { align-self: center; justify-self: center; width: min(400px, 92%); display: flex; flex-direction: column; gap: 10px; padding: 30px 0; }
.login-box h2 { font-size: 28px; } .dev-box { margin-top: 14px; padding: 14px; border: 1.5px dashed var(--clay); border-radius: var(--arch); background: var(--panel); }
.dev-box p { margin: 4px 0; font-size: 14px; color: var(--ink2); }
.center-card { max-width: 420px; margin: 15vh auto; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ---------------- responsive */
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } .home-grid { grid-template-columns: 1fr 1fr; } .home-grid .card:nth-child(2) { grid-column: auto; } .rec-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; } .side { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: .2s; } .side.open { transform: none; box-shadow: 20px 0 50px rgba(0, 0, 0, .4); }
  .only-m { display: inline-grid; } .top { padding: 8px 12px; } .search span, .search kbd { display: none; } .search { flex: 0; }
  #view { padding: 16px 12px 60px; } .kpis { grid-template-columns: 1fr 1fr; } .home-grid { grid-template-columns: 1fr; } .home-grid .brief { grid-row: auto; }
  .hero-acts { grid-template-columns: repeat(4, 1fr); width: 100%; } .login { grid-template-columns: 1fr; } .login-art { padding: 40px 24px; } .login-art h1 { font-size: 40px; } .stall-strip { grid-template-columns: repeat(5, 1fr); }
  .ai-panel { inset-inline-start: 8px; inset-inline-end: 8px; width: auto; top: 56px; } .page-head h1 { font-size: 25px; }
}
@media print { .side, .top, .devbar, .ai-panel, .actions, .no-print { display: none !important; } .shell { display: block; } #view { padding: 0; } body { background: #fff; } }

/* ---------------- subscription page, admin console, support mode */
.sub-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.1fr; background: var(--bg); }
.sub-art { background: var(--green); color: var(--oat); padding: 8vh 5vw; display: flex; flex-direction: column; gap: 6px; }
.sub-art .eyebrow { color: #8FA596; margin-top: 18px; } .sub-art h1 { font-size: 48px; letter-spacing: .08em; line-height: .95; } .sub-art .lead { color: #C8D2C3; font: 600 20px var(--f-head); }
.sub-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: #C8D2C3; } .sub-list li { display: flex; gap: 8px; align-items: center; } .sub-list .ico { color: var(--clay); }
.sub-box { align-self: center; justify-self: center; width: min(560px, 92%); display: flex; flex-direction: column; gap: 14px; padding: 30px 0; }
.sub-state { border-radius: var(--arch); padding: 16px 18px; border: 1.5px solid var(--line2); background: var(--panel); }
.sub-state h2 { font-size: 24px; } .sub-state p { margin: 6px 0 0; color: var(--ink2); }
.sub-state.pending { border-color: var(--straw); background: var(--straw-bg); } .sub-state.bad { border-color: var(--bad); } .sub-state.info { border-color: var(--info); }
.plans { display: grid; gap: 8px; margin-bottom: 10px; } .plan { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: var(--panel); cursor: pointer; }
.plan:has(input:checked) { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(227, 145, 94, .2); } .plan b { font-size: 17px; display: block; } .plan small { display: block; color: var(--mute); } .plan em { font: 500 12px var(--f-mono); font-style: normal; color: var(--tack); }
.sub-box form { display: flex; flex-direction: column; gap: 10px; } .sub-acts, .sub-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-shell { min-height: 100vh; background: var(--bg); } .admin-top { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--green); color: var(--oat); }
.admin-top small { display: block; font: 500 9px var(--f-mono); letter-spacing: .24em; color: #8FA596; } .admin-top b { letter-spacing: .08em; } .admin-top .me { font: 500 11px var(--f-mono); color: #8FA596; }
.admin-top .btn.ghost { color: var(--oat); border-color: #2B4237; }
.admin-shell #view { padding: 22px 24px 60px; max-width: 1400px; margin: 0 auto; }
.admin-tabs { margin-bottom: 14px; } .admin-wrap .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } .row-acts { white-space: nowrap; text-align: end; } .row-acts .btn { margin-inline-start: 4px; }
.adm-det { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .adm-det .wide { grid-column: 1 / -1; } .adm-det h3 { font-size: 14px; letter-spacing: .1em; }
.admin-link { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; padding: 8px 10px; border-radius: 8px; background: var(--clay); color: var(--green); text-decoration: none; font-weight: 700; font-size: 14px; }
.devbar.support { background: var(--clay); color: var(--green); border-color: var(--tack); } .devbar a { color: inherit; font-weight: 700; }
@media (max-width: 760px) { .sub-page { grid-template-columns: 1fr; } .sub-art { padding: 36px 22px; } .sub-art h1 { font-size: 36px; } .admin-wrap .kpis { grid-template-columns: repeat(3, 1fr); } .adm-det { grid-template-columns: 1fr; } }
.plan input { width: auto; margin: 4px 0 0; flex: none; accent-color: var(--clay); } .plan span { flex: 1; }

/* ---------------- Arabic & right-to-left */
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button { font-family: 'Noto Kufi Arabic', 'Rajdhani', system-ui, sans-serif; }
html[lang="ar"] body { font-size: 14px; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .kpi b, html[lang="ar"] .hn, html[lang="ar"] .stall b { font-family: 'Noto Kufi Arabic', 'Rajdhani', sans-serif; font-weight: 700; }
html[lang="ar"] * { letter-spacing: 0 !important; }   /* spaced letters break Arabic joining */
html[lang="ar"] .page-head h1 { font-size: 26px; line-height: 1.3; } html[lang="ar"] .hero h1 { font-size: 30px; line-height: 1.3; }
html[lang="ar"] .eyebrow, html[lang="ar"] .fld > span, html[lang="ar"] .tbl th, html[lang="ar"] .dl dt, html[lang="ar"] .kpi small, html[lang="ar"] .nav-g p { font-family: 'Noto Kufi Arabic', sans-serif; text-transform: none; font-size: 11.5px; }
[dir="rtl"] .i-chev, [dir="rtl"] .i-back, [dir="rtl"] .i-route { transform: scaleX(-1); }
[dir="rtl"] .switch input:checked + i::after { transform: translateX(-18px); }
[dir="rtl"] .side nav a.on { box-shadow: inset -3px 0 0 var(--clay); }
[dir="rtl"] .mono, [dir="rtl"] input[type=time], [dir="rtl"] input[type=date], [dir="rtl"] input[type=number], [dir="rtl"] input[type=email], [dir="rtl"] input[type=tel], [dir="rtl"] input[type=url] { unicode-bidi: plaintext; }
[dir="rtl"] input[type=email], [dir="rtl"] input[type=tel], [dir="rtl"] input[type=url] { direction: ltr; text-align: end; }
@media (max-width: 760px) { [dir="rtl"] .side { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .side.open { transform: none; box-shadow: -20px 0 50px rgba(0,0,0,.4); } }

/* ---------------- language switch & update available */
.lang-btn { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 700 14px 'Noto Kufi Arabic', var(--f-head); cursor: pointer; }
.lang-btn:hover { border-color: var(--clay); } .login-lang { display: flex; justify-content: flex-end; }
.sub-foot .lang-btn, .admin-top .lang-btn { height: 30px; }
.update-bar { position: fixed; z-index: 150; inset-inline-end: 16px; bottom: 16px; max-width: min(520px, calc(100vw - 32px)); display: flex; align-items: center; gap: 10px; background: var(--green); color: var(--oat); padding: 10px 12px 10px 14px; border-radius: 14px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); border-inline-start: 4px solid var(--clay); animation: fade .2s; }
.update-bar span { flex: 1; font-size: 14px; } .update-bar b { display: block; } .update-bar .icon-btn { color: var(--oat); } .update-bar .icon-btn:hover { background: #1B2E25; }

/* ---------------- phones & tablets: nothing overlaps or gets cut */
img, video, svg { max-width: 100%; }
.page-head > div:first-child { min-width: 0; } .page-head h1 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .top { gap: 4px; padding: 8px 10px; } .top .lbl { display: none; } .top .btn.sm { padding: 6px 9px; } .top .icon-btn { width: 32px; height: 32px; } .top .lang-btn { min-width: 32px; height: 32px; }
  .hero { padding: 20px 18px; } .hero h1 { font-size: 28px; }
  .hero-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 6px; } .hero-acts a { padding: 8px 7px; font-size: 12px; border-radius: 16px 16px 6px 6px; }
  .page-head { align-items: flex-start; } .page-head .actions { width: 100%; } .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .toolbar > * { flex: 1 1 100%; min-width: 0; } .search-in { min-width: 0; } .seg { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .seg button { white-space: nowrap; }
  .modal-bg { padding: 0; place-items: end center; } .modal { border-radius: 16px 16px 0 0; max-height: 92vh; display: flex; flex-direction: column; } .modal-body { max-height: none; flex: 1; }
  .form { grid-template-columns: 1fr; } .dl { grid-template-columns: 1fr 1fr; }
  .card { padding: 14px; } .devbar { font-size: 9.5px; letter-spacing: .06em; padding: 4px 8px; }
}
@media (max-width: 380px) { .dl { grid-template-columns: 1fr; } }
.disc, .pill, .b { unicode-bidi: plaintext; } html[lang="ar"] .disc, html[lang="ar"] .pill, html[lang="ar"] .b { font-family: "Noto Kufi Arabic", var(--f-mono); }

/* phones: grid & flex children may always shrink (long Arabic words, charts, wide labels never widen the page) */
@media (max-width: 760px) {
  #view .card, #view section, #view article { min-width: 0; max-width: 100%; }
  #view [class*="grid"] > *, #view [class*="cols"] > *, #view [class*="kpis"] > * { min-width: 0; }
}