/* ==========================================================================
   CRM Enterprise Theme — Arabic RTL — layered over Filament v3
   Palette: background #FAFAFA · surface #FFFFFF · text #18181B ·
            secondary #71717A · border #E4E4E7 · brand accent #2B5C91
   ========================================================================== */

:root {
    --font-baloo: "Baloo Bhaijaan 2", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* --sidebar-width is emitted by Filament itself — see AdminPanelProvider::sidebarWidth(). */
    --topbar-height: 4rem;

    --surface: 255 255 255;
    --surface-soft: 250 250 250;
    --border-soft: 228 228 231;
    --border-strong: 212 212 216;

    --text-primary: 24 24 27;
    --text-secondary: 113 113 122;
    --text-muted: 161 161 170;

    --radius-card: 0.75rem;
    --radius-control: 0.5rem;
    --radius-badge: 9999px;

    --shadow-card: 0 1px 2px 0 rgb(24 24 27 / 0.04);
    --shadow-pop: 0 8px 24px -6px rgb(24 24 27 / 0.1);
    --shadow-float: 0 16px 40px -10px rgb(24 24 27 / 0.16);
}

/* ------------------------------------------------------------------ Base */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-baloo);
    background-color: #fafafa;
    color: #18181b;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fi-body {
    min-height: 100vh;
}

::selection {
    background-color: rgb(var(--primary-600) / 0.15);
    color: rgb(var(--primary-900));
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--gray-300)) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(var(--gray-300));
    border-radius: 9999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------------ Shell */

.fi-layout,
.fi-main {
    min-height: 100vh;
    background-color: #fafafa;
}

.fi-main-ctn {
    padding-block: 1.5rem;
}

/* ----------------------------------------------------------------- Sidebar */

.fi-sidebar {
    border-inline-end: 1px solid rgb(var(--gray-200));
    background-color: rgb(var(--surface));
}

.fi-sidebar-header {
    background-color: rgb(var(--surface));
    border-block-end: 1px solid rgb(var(--gray-200));
}

.fi-logo {
    max-height: 2.25rem;
    width: auto;
    object-fit: contain;
}

.fi-sidebar-nav {
    padding: 1.25rem 0.75rem 1.5rem;
}

.fi-sidebar-group {
    margin-block-end: 1.25rem;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(var(--gray-400));
    padding-inline: 0.625rem;
    margin-block-end: 0.5rem;
}

.fi-sidebar-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fi-sidebar-item-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-600));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item-button:hover {
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-900));
}

.fi-sidebar-item-button:active {
    background-color: rgb(var(--gray-200));
}

.fi-sidebar-item-icon {
    color: rgb(var(--gray-400));
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: rgb(var(--gray-600));
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgb(var(--primary-50));
    color: rgb(var(--primary-700));
    box-shadow: inset 0 0 0 1px rgb(var(--primary-100));
    font-weight: 600;
}

.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.125rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: rgb(var(--primary-600));
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: rgb(var(--primary-600));
}

.fi-sidebar-group-button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-700));
}

.fi-sidebar-group-button:hover {
    background-color: rgb(var(--gray-100));
}

.fi-sidebar-group-collapse-button {
    margin-inline-start: auto;
    color: rgb(var(--gray-400));
}

/* ------------------------------------------------------------------ Topbar */

.fi-topbar {
    height: var(--topbar-height);
    background-color: rgb(var(--surface));
    border-block-end: 1px solid rgb(var(--gray-200));
}

.fi-icon-btn {
    color: rgb(var(--gray-500));
    border-radius: var(--radius-control);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-icon-btn:hover {
    color: rgb(var(--gray-800));
    background-color: rgb(var(--gray-100));
}

.fi-icon-btn:active {
    background-color: rgb(var(--gray-200));
}

.fi-icon-btn:focus-visible {
    outline: 2px solid rgb(var(--primary-500) / 0.5);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- User menu */

.fi-dropdown-panel {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    padding: 0.375rem;
}

.fi-dropdown-list-item {
    border-radius: var(--radius-control);
    transition: background-color 0.12s ease;
}

.fi-dropdown-list-item:hover {
    background-color: rgb(var(--gray-100));
}

.fi-dropdown-header {
    padding: 0.625rem 0.75rem;
    border-block-end: 1px solid rgb(var(--gray-200));
    margin-block-end: 0.25rem;
}

.fi-avatar.fi-circular {
    box-shadow: 0 0 0 2px rgb(var(--surface)), 0 0 0 4px rgb(var(--gray-200));
}

/* ------------------------------------------------------------ Page header */

.fi-header {
    padding-block: 0.5rem 1rem;
}

.fi-header-heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(var(--gray-900));
    letter-spacing: -0.01em;
}

.fi-header-heading-subheading {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

/* -------------------------------------------------------------- Sections */

.fi-section {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease;
}

.fi-section-header {
    padding: 1rem 1.25rem;
    border-block-end: 1px solid rgb(var(--gray-200));
}

.fi-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgb(var(--gray-900));
}

.fi-section-content-ctn {
    padding: 1.25rem;
}

/* ------------------------------------------------------------ Breadcrumbs */

.fi-breadcrumbs {
    color: rgb(var(--gray-500));
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--gray-500));
    transition: color 0.12s ease;
}

.fi-breadcrumbs-item-label:hover {
    color: rgb(var(--gray-800));
}

.fi-breadcrumbs-item-separator {
    color: rgb(var(--gray-300));
}

/* ---------------------------------------------------------------- Buttons */

.fi-btn {
    min-height: 2.25rem;
    padding-inline: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-control);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease, color 0.15s ease;
}

.fi-btn-label {
    overflow-wrap: anywhere;
}

.fi-btn:focus-visible {
    outline: 2px solid rgb(var(--primary-500) / 0.5);
    outline-offset: 2px;
}

/* Every labeled button: brand blue background with white text so the label is
   always readable — applies to primary, gray (secondary), and danger buttons. */
.fi-btn {
    background-color: #2b5c91 !important;
    border: 1px solid #2b5c91 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgb(43 92 145 / 0.2);
}

.fi-btn .fi-btn-label,
.fi-btn .fi-btn-icon,
.fi-btn span {
    color: #ffffff !important;
}

.fi-btn:hover {
    background-color: #29538b !important;
    border-color: #29538b !important;
    color: #ffffff !important;
}

.fi-btn:active {
    background-color: #244a78 !important;
    border-color: #244a78 !important;
    color: #ffffff !important;
}

.fi-btn-color-primary,
.fi-btn-color-gray,
.fi-btn-color-danger,
.fi-btn-color-warning {
    background-color: #2b5c91;
    border: 1px solid #2b5c91;
    color: #ffffff;
}

.fi-btn-color-primary:hover,
.fi-btn-color-gray:hover,
.fi-btn-color-danger:hover,
.fi-btn-color-warning:hover {
    background-color: #29538b;
    border-color: #29538b;
    color: #ffffff;
}

.fi-btn-color-primary:active,
.fi-btn-color-gray:active,
.fi-btn-color-danger:active,
.fi-btn-color-warning:active {
    background-color: #244a78;
    border-color: #244a78;
    color: #ffffff;
}

.fi-btn:disabled,
.fi-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.fi-btn-icon {
    flex-shrink: 0;
}

/* Link-style actions (e.g. reset filters, view): blue background, white text. */
.fi-link.fi-color-custom,
.fi-link.fi-color-primary,
.fi-link.fi-color-danger,
.fi-link.fi-color-warning {
    background-color: #2b5c91 !important;
    border-radius: var(--radius-control);
    color: #ffffff !important;
}

.fi-link.fi-color-custom:hover,
.fi-link.fi-color-primary:hover,
.fi-link.fi-color-danger:hover,
.fi-link.fi-color-warning:hover {
    background-color: #29538b !important;
    color: #ffffff !important;
}

.fi-link.fi-color-custom .fi-link-icon,
.fi-link.fi-color-primary .fi-link-icon,
.fi-link.fi-color-danger .fi-link-icon,
.fi-link.fi-color-warning .fi-link-icon,
.fi-link.fi-color-custom span,
.fi-link.fi-color-primary span,
.fi-link.fi-color-danger span,
.fi-link.fi-color-warning span {
    color: #ffffff !important;
}

/* Row-action dropdown items (edit / delete): blue background, white text. */
.fi-dropdown-list-item.fi-color-custom,
.fi-dropdown-list-item.fi-color-primary,
.fi-dropdown-list-item.fi-color-danger,
.fi-dropdown-list-item.fi-color-warning {
    background-color: #2b5c91 !important;
    color: #ffffff !important;
}

.fi-dropdown-list-item.fi-color-custom:hover,
.fi-dropdown-list-item.fi-color-primary:hover,
.fi-dropdown-list-item.fi-color-danger:hover,
.fi-dropdown-list-item.fi-color-warning:hover {
    background-color: #29538b !important;
    color: #ffffff !important;
}

.fi-dropdown-list-item.fi-color-custom .fi-dropdown-list-item-label,
.fi-dropdown-list-item.fi-color-custom .fi-dropdown-list-item-icon,
.fi-dropdown-list-item.fi-color-primary .fi-dropdown-list-item-label,
.fi-dropdown-list-item.fi-color-primary .fi-dropdown-list-item-icon,
.fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-label,
.fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-icon,
.fi-dropdown-list-item.fi-color-warning .fi-dropdown-list-item-label,
.fi-dropdown-list-item.fi-color-warning .fi-dropdown-list-item-icon,
.fi-dropdown-list-item.fi-color-custom span,
.fi-dropdown-list-item.fi-color-primary span,
.fi-dropdown-list-item.fi-color-danger span,
.fi-dropdown-list-item.fi-color-warning span {
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ Forms */

.fi-fo-field-wrp-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-700));
    margin-block-end: 0.375rem;
}

.fi-input-wrp {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-300));
    border-radius: var(--radius-control);
    min-height: 2.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.fi-input-wrp:hover {
    border-color: rgb(var(--gray-400));
}

.fi-input-wrp:focus-within {
    border-color: rgb(var(--primary-500));
    box-shadow: 0 0 0 3px rgb(var(--primary-500) / 0.14);
}

.fi-input-wrp[disabled],
.fi-input-wrp.fi-disabled {
    background-color: rgb(var(--gray-100));
    opacity: 0.7;
}

.fi-input {
    background-color: transparent;
    color: rgb(var(--gray-900));
}

.fi-input::placeholder {
    color: rgb(var(--gray-400));
}

.fi-select-input {
    border-radius: var(--radius-control);
}

.fi-checkbox-input {
    border-radius: 0.375rem;
    accent-color: rgb(var(--primary-600));
}

.fi-ta-search-field .fi-input-wrp {
    border-radius: 9999px;
}

.fi-fo-field-wrp-helper-text {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

/* ----------------------------------------------------------------- Tables */

.fi-ta-ctn {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.fi-ta-header-toolbar {
    padding: 0.875rem 1.25rem;
    border-block-end: 1px solid rgb(var(--gray-200));
}

.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0;
}

.fi-ta-table thead th {
    background-color: rgb(var(--gray-50));
    padding: 0.5rem 0.875rem;
    border-block-end: 1px solid rgb(var(--gray-200));
}

.fi-ta-header-cell-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(var(--gray-500));
}

.fi-ta-row {
    transition: background-color 0.12s ease;
}

.fi-ta-row:hover {
    background-color: rgb(var(--gray-50));
}

.fi-ta-cell {
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid rgb(var(--gray-100));
}

.fi-ta-text-item-label {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.fi-ta-text-item {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--gray-800));
}

.fi-ta-actions-cell .fi-icon-btn {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.fi-ta-row:hover .fi-ta-actions-cell .fi-icon-btn,
.fi-ta-actions-cell .fi-icon-btn:focus-visible {
    opacity: 1;
}

.fi-ta-placeholder {
    color: rgb(var(--gray-400));
    font-weight: 400;
}

.fi-ta-selection-indicator {
    border-radius: var(--radius-control);
}

/* ---------------------------------------------------------------- Badges */

.fi-badge {
    border-radius: var(--radius-badge);
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: inset 0 0 0 1px rgb(var(--c-200) / 0.7);
    white-space: nowrap;
}

.fi-color-primary {
    color: rgb(var(--c-600));
}

.fi-color-success {
    color: rgb(var(--c-600));
}

.fi-color-warning {
    color: rgb(var(--c-600));
}

.fi-color-danger {
    color: rgb(var(--c-600));
}

.fi-color-info {
    color: rgb(var(--c-600));
}

/* -------------------------------------------------------------- Infolist */

.fi-in-entry-wrp {
    padding: 0.625rem 1rem;
    border-block-end: 1px solid rgb(var(--gray-100));
}

.fi-in-entry-wrp:last-child {
    border-block-end: 0;
}

.fi-in-text-item-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(var(--gray-400));
    margin-block-end: 0.25rem;
}

.fi-in-text-item {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-800));
}

.fi-in-affixes {
    color: rgb(var(--gray-400));
}

/* ------------------------------------------------------------------- Tabs */

.fi-tabs {
    border-block-end: 1px solid rgb(var(--gray-200));
    gap: 1.25rem;
    padding-inline: 1.25rem;
}

.fi-tabs-item {
    position: relative;
    padding: 0.75rem 0.125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--gray-500));
    transition: color 0.12s ease;
}

.fi-tabs-item:hover {
    color: rgb(var(--gray-800));
}

.fi-tabs-item-active {
    color: rgb(var(--primary-700));
    font-weight: 600;
}

.fi-tabs-item-active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 9999px;
    background-color: rgb(var(--primary-600));
}

/* ------------------------------------------------------------ Pagination */

.fi-pagination-overview {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--gray-500));
}

.fi-pagination-item-button {
    border-radius: var(--radius-control);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.fi-pagination-item-button:hover {
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-800));
}

.fi-pagination-item.fi-active .fi-pagination-item-button {
    background-color: rgb(var(--primary-600));
    color: rgb(var(--surface));
}

/* ------------------------------------------------------------------ Modal */

.fi-modal-window {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-float);
}

.fi-modal-header {
    border-block-end: 1px solid rgb(var(--gray-200));
    padding: 1rem 1.25rem;
}

.fi-modal-footer {
    border-block-start: 1px solid rgb(var(--gray-200));
    padding: 0.875rem 1.25rem;
}

/* ---------------------------------------------------------- Empty state */

.fi-ta-empty-state-icon-ctn {
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-400));
}

.fi-ta-empty-state-heading {
    font-weight: 600;
    color: rgb(var(--gray-700));
}

.fi-ta-empty-state-content {
    color: rgb(var(--gray-500));
}

/* --------------------------------------------------------------- Widgets */

.fi-wi {
    border-radius: var(--radius-card);
}

.fi-wi-stats-overview {
    gap: 1rem;
}

.fi-wi-stats-overview-stats-ctn {
    gap: 1rem;
}

.fi-wi-stats-overview-stat {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1rem 1.125rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-wi-stats-overview-stat:hover {
    border-color: rgb(var(--gray-300));
    box-shadow: var(--shadow-pop);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--gray-500));
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--gray-900));
    letter-spacing: -0.01em;
}

.fi-wi-stats-overview-stat-icon {
    border-radius: var(--radius-control);
    color: rgb(var(--primary-600));
    background-color: rgb(var(--primary-50));
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

/* ------------------------------------------------------ Custom 360 header */

.crm-profile {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.crm-profile__top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-end: 1.25rem;
}

.crm-profile__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.crm-profile__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-card);
    background-color: rgb(var(--primary-600));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.crm-profile__naming {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-profile__name-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.crm-profile__name {
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(var(--gray-900));
    margin: 0;
}

.crm-profile__sub {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-block-start: 0.25rem;
    color: rgb(var(--gray-500));
    font-size: 0.875rem;
    font-weight: 500;
}

.crm-profile__sub-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.crm-profile__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.crm-profile__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    background-color: rgb(var(--surface-soft));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-control);
}

.crm-profile__meta-item dt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(var(--gray-400));
}

.crm-profile__meta-item dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-800));
    overflow-wrap: anywhere;
}

.crm-profile__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.25rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgb(var(--gray-200));
}

.crm-icon {
    color: rgb(var(--gray-400));
    flex-shrink: 0;
}

.crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-badge);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-600));
    border: 1px solid rgb(var(--gray-200));
}

.crm-chip b {
    font-weight: 700;
    color: rgb(var(--gray-800));
}

.crm-link {
    color: rgb(var(--primary-600));
    font-weight: 600;
    transition: color 0.12s ease;
}

.crm-link:hover {
    color: rgb(var(--primary-700));
    text-decoration: underline;
}

.crm-text-danger {
    color: rgb(var(--danger-600));
}

/* ---------------------------------------------------------- Notifications */

.fi-notifications {
    border-radius: var(--radius-card);
}

.fi-notifications .fi-modal-window {
    border-radius: var(--radius-card);
}

/* -------------------------------------------------- Loading / skeletons */

.fi-loading-section {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--gray-200));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.fi-loading-section .animate-pulse {
    border-radius: 0;
    border: 0;
    background-color: rgb(var(--gray-100));
    animation: fi-shimmer 1.6s ease-in-out infinite;
}

@keyframes fi-shimmer {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

.fi-wi-stats-overview [wire\:loading] {
    pointer-events: none;
}

/* Keep the Livewire global loading bar subtle and premium. */
[wire\:loading] .fi-loading-indicator {
    color: rgb(var(--primary-600));
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1023px) {
    .fi-main {
        padding-inline: 0.5rem;
    }

    .fi-ta-header-toolbar {
        padding: 0.75rem 1rem;
    }

    .crm-profile {
        padding: 1rem;
    }
}

/* ------------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}