/* TD Dorper Studs ERP — square operational UI + circular avatars + global loader/network state. */

/* Operational surfaces: intentional zero-radius design. */
.fi-section,
.fi-section-content-ctn,
.fi-ta-ctn,
.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-content-ctn,
.fi-ta-filter-indicators,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-wi-table,
.fi-btn,
.fi-icon-btn,
.fi-input-wrp,
.fi-select-input,
.fi-fo-repeater-item,
.fi-fo-builder-item,
.fi-fo-file-upload,
.fi-dropdown-panel,
.fi-modal-window,
.fi-tabs,
.fi-tabs-item,
.fi-pagination-item,
.fi-sidebar-nav,
.fi-sidebar-item-button,
.fi-topbar nav,
.fi-badge,
.fi-ac-action,
.fi-no-notification,
.fi-dropdown-list,
.fi-dropdown-list-item,
.fi-global-search-result,
.fi-global-search-field,
.fi-fo-wizard-header,
.fi-fo-wizard-header-step,
.fi-fo-wizard-actions,
.fi-fo-actions,
.fi-ta-filters,
.fi-ta-record-checkbox,
.fi-checkbox-input,
.fi-radio-input,
.fi-toggle,
.fi-toggle-on,
.fi-toggle-off {
    border-radius: 0 !important;
}

/* Native form controls / table surfaces that can retain Tailwind radius utilities. */
.fi-body input:not([type="range"]),
.fi-body select,
.fi-body textarea,
.fi-body button:not(.td-avatar-reset),
.fi-body table,
.fi-body thead,
.fi-body tbody,
.fi-body tr,
.fi-body th,
.fi-body td {
    border-radius: 0 !important;
}

/* AVATARS ARE THE EXCEPTION: circular everywhere they represent people/animals. */
.fi-avatar,
img.fi-avatar,
.fi-avatar img,
.fi-user-avatar,
.fi-user-avatar img,
img[class*="avatar"],
.fi-ta-image,
img.fi-ta-image,
.fi-ta-image img,
a[href*="/animals/"] img,
a[href*="/employees/"] img,
a[href*="/h-r/employees/"] img,
[data-td-avatar],
.td-avatar {
    border-radius: 9999px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* Keep tiny status dots and toggle handles visually usable. */
.fi-color-item,
.fi-badge-dot,
.fi-ta-icon-item,
.fi-toggle > span,
.fi-toggle span[aria-hidden="true"] {
    border-radius: 9999px !important;
}

/* Canonical next-tag hint added by td-ui-polish.js. */
.td-tag-preview {
    margin-top: .375rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    opacity: .8;
}

/* -------------------------------------------------------------------------
 * Global system loader. The backdrop itself blurs the whole application.
 * ---------------------------------------------------------------------- */
.td-system-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .22);
    -webkit-backdrop-filter: blur(7px) saturate(.82);
    backdrop-filter: blur(7px) saturate(.82);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity .16s ease, visibility .16s ease;
}

.td-system-loader.td-system-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.td-system-loader-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .72rem;
    min-width: 9.5rem;
    padding: 1.05rem 1.2rem .95rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .94);
    color: rgb(15, 23, 42);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
}

.dark .td-system-loader-panel {
    background: rgba(15, 23, 42, .95);
    color: rgb(248, 250, 252);
    border-color: rgba(148, 163, 184, .22);
}

.td-system-loader-logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.9rem;
    height: 4.9rem;
    border-radius: 9999px !important;
}

.td-system-loader-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(148, 163, 184, .24);
    border-top-color: rgb(127, 29, 29);
    border-right-color: rgba(127, 29, 29, .58);
    border-radius: 9999px !important;
    animation: td-system-spin .8s linear infinite;
}

.td-system-loader-logo,
.td-system-loader-logo-fallback {
    width: 3.85rem;
    height: 3.85rem;
    border-radius: 9999px !important;
}

.td-system-loader-logo {
    display: block;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    background: white;
    transition: opacity .12s ease;
}

.td-system-loader-logo.td-system-loader-logo-ready {
    opacity: 1;
}

.td-system-loader-logo-fallback {
    position: absolute;
    display: grid;
    place-items: center;
    background: rgb(127, 29, 29);
    color: white;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .06em;
    transition: opacity .12s ease;
}

.td-system-loader-logo-fallback-hidden {
    opacity: 0;
}

.td-system-loader-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .08rem;
}

.td-system-loader-copy strong {
    font-size: .88rem;
    line-height: 1.15rem;
    font-weight: 700;
}

.td-system-loader-copy span {
    font-size: .72rem;
    line-height: 1rem;
    opacity: .62;
}

@keyframes td-system-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .td-system-loader,
    .td-system-loader-ring {
        transition: none !important;
        animation-duration: 1.4s;
    }
}

/* -------------------------------------------------------------------------
 * Network monitor: Online / Slow / Offline / Restored.
 * Fixed and compact; does not block the application.
 * ---------------------------------------------------------------------- */
.td-network-status {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2147483001;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    max-width: min(23rem, calc(100vw - 2rem));
    padding: .43rem .65rem;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96);
    color: rgb(30, 41, 59);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    font-size: .72rem;
    line-height: 1rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .16s ease, opacity .16s ease;
}

.dark .td-network-status {
    background: rgba(15, 23, 42, .94);
    color: rgb(241, 245, 249);
    border-color: rgba(148, 163, 184, .25);
}

.td-network-dot {
    width: .54rem;
    height: .54rem;
    flex: 0 0 .54rem;
    border-radius: 9999px !important;
    background: rgb(22, 163, 74);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .13);
}

.td-network-detail {
    font-weight: 500;
    opacity: .62;
    white-space: nowrap;
}

.td-network-slow .td-network-dot {
    background: rgb(217, 119, 6);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .14);
}

.td-network-offline .td-network-dot {
    background: rgb(220, 38, 38);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .14);
}

.td-network-restored .td-network-dot {
    background: rgb(5, 150, 105);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .15);
}

.td-network-offline {
    border-color: rgba(220, 38, 38, .32);
}

.td-network-slow {
    border-color: rgba(217, 119, 6, .3);
}

.td-network-restored {
    border-color: rgba(5, 150, 105, .3);
}

@media (max-width: 640px) {
    .td-network-status {
        right: .7rem;
        bottom: .7rem;
    }
}