/* iFarm Cloud — SYLCO design. Global rules only; layout and dashboard use scoped CSS. */
html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { background: #f7f5f5; }

/* Brand colours for Bootstrap controls (navy #003767, sky #61C3DE) */
:root { --bs-primary: #003767; --bs-primary-rgb: 0, 55, 103; --bs-link-color: #0a4f8a; --bs-link-hover-color: #003767; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #61c3de; }
.form-control:focus, .form-select:focus { border-color: #61c3de; }
.form-check-input:checked { background-color: #003767; border-color: #003767; }
.card-tools { margin-left: auto; }
[dir="rtl"] .card-tools { margin-left: 0; margin-right: auto; }

/* KPI tiles used by the preview pages */
.small-box { position: relative; display: block; border-radius: 14px; padding: 16px 18px 14px; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,55,103,.06); overflow: hidden; }
.small-box .inner { position: relative; z-index: 1; }
.small-box h3 { font-family: "Jura", "Segoe UI", sans-serif; font-size: 2rem; font-weight: 700; margin: 0 0 4px; }
.small-box p { margin: 0; font-size: .9rem; opacity: .9; }
.small-box .small-box-icon { position: absolute; right: 14px; top: 8px; font-size: 3.2rem; opacity: .18; z-index: 0; }
[dir="rtl"] .small-box .small-box-icon { right: auto; left: 14px; }
.small-box .small-box-footer { display: block; margin: 10px -18px -14px; padding: 6px; text-align: center; font-size: .8rem; color: inherit; background: rgba(0,0,0,.1); text-decoration: none; }

/* Language flags (vendored flag-icons SVGs) */
.lang-flag { inline-size: 20px; block-size: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; vertical-align: -2px; }
.lang-flag-none { inline-size: 20px; text-align: center; opacity: .6; flex: none; }

/* ---- Bulk-action bar of a list (animals, deleted animals): stays under the page header while the list scrolls ---- */
.sc-bulkbar { position: sticky; top: 72px; z-index: 40; box-shadow: 0 6px 16px rgba(0, 55, 103, .14); }
.sc-body.imp .sc-bulkbar { top: 112px; }
@media (max-width: 600px) { .sc-bulkbar, .sc-body.imp .sc-bulkbar { position: static; } }   /* on a phone the wrapped bar would cover the list */

/* ---- Blazor reconnect UI (Greek, auto-reload on failure) ---- */
#components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,55,103,.55); align-items: center; justify-content: center; font-family: "Segoe UI", system-ui, sans-serif; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal .rc-box { background: #fff; color: #212529; border-radius: 14px; padding: 26px 30px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); min-width: 320px; }
#components-reconnect-modal .rc-spinner { width: 34px; height: 34px; border: 4px solid #e6e9ee; border-top-color: #003767; border-radius: 50%; margin: 0 auto 14px; animation: rc-spin .9s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
#components-reconnect-modal .rc-text { margin: 0; font-weight: 600; }
#components-reconnect-modal .rc-attempt { display: block; font-weight: 400; color: #6b7280; font-size: .85rem; margin-top: 4px; }
#components-reconnect-modal .rc-failed { display: none; margin: 0; color: #b91c1c; }
#components-reconnect-modal.components-reconnect-failed .rc-text,
#components-reconnect-modal.components-reconnect-rejected .rc-text,
#components-reconnect-modal.components-reconnect-failed .rc-spinner,
#components-reconnect-modal.components-reconnect-rejected .rc-spinner { display: none; }
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-rejected .rc-failed { display: block; }

/* ---- Blazor unhandled-error bar (hidden until Blazor shows it) ---- */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding: .6rem 1.25rem .7rem; background: #fff8dc; color: #212529; box-shadow: 0 -1px 2px rgba(0,0,0,.2); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
[dir="rtl"] #blazor-error-ui .dismiss { right: auto; left: .75rem; }