/* =========================================================
   AREGNUM 2.0 WEB THEME
   Official brand styling for the Blazor Web App
   Bootstrap-based global overrides
   Loaded after style-orange.css
   ========================================================= */

/* =========================================================
   1. Official Brand Fonts
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&display=swap');


/* =========================================================
   2. Brand Variables
   ========================================================= */

:root {
    --aregnum-ivory: #F7F7F7;
    --aregnum-sky: #E2FBFF;
    --aregnum-moss: #5B625B;
    --aregnum-stone: #C5C2BD;
    --aregnum-clay: #B4A699;
    --aregnum-sage: #D3D8D4;
    --aregnum-forest: #2C382F;
    --aregnum-red: #DA4F4F;

    --aregnum-white: #FFFFFF;
    --aregnum-black: #000000;

    --aregnum-ivory-rgb: 247, 247, 247;
    --aregnum-sky-rgb: 226, 251, 255;
    --aregnum-moss-rgb: 91, 98, 91;
    --aregnum-stone-rgb: 197, 194, 189;
    --aregnum-clay-rgb: 180, 166, 153;
    --aregnum-sage-rgb: 211, 216, 212;
    --aregnum-forest-rgb: 44, 56, 47;
    --aregnum-red-rgb: 218, 79, 79;

    --aregnum-moss-05: rgba(var(--aregnum-moss-rgb), 0.05);
    --aregnum-moss-08: rgba(var(--aregnum-moss-rgb), 0.08);
    --aregnum-moss-10: rgba(var(--aregnum-moss-rgb), 0.10);
    --aregnum-moss-12: rgba(var(--aregnum-moss-rgb), 0.12);
    --aregnum-moss-18: rgba(var(--aregnum-moss-rgb), 0.18);
    --aregnum-moss-25: rgba(var(--aregnum-moss-rgb), 0.25);
    --aregnum-moss-35: rgba(var(--aregnum-moss-rgb), 0.35);
    --aregnum-moss-45: rgba(var(--aregnum-moss-rgb), 0.45);
    --aregnum-moss-65: rgba(var(--aregnum-moss-rgb), 0.65);
    --aregnum-moss-75: rgba(var(--aregnum-moss-rgb), 0.75);

    --aregnum-forest-05: rgba(var(--aregnum-forest-rgb), 0.05);
    --aregnum-forest-08: rgba(var(--aregnum-forest-rgb), 0.08);
    --aregnum-forest-10: rgba(var(--aregnum-forest-rgb), 0.10);
    --aregnum-forest-12: rgba(var(--aregnum-forest-rgb), 0.12);
    --aregnum-forest-18: rgba(var(--aregnum-forest-rgb), 0.18);
    --aregnum-forest-25: rgba(var(--aregnum-forest-rgb), 0.25);

    --aregnum-clay-18: rgba(var(--aregnum-clay-rgb), 0.18);
    --aregnum-clay-25: rgba(var(--aregnum-clay-rgb), 0.25);
    --aregnum-clay-35: rgba(var(--aregnum-clay-rgb), 0.35);

    --aregnum-red-10: rgba(var(--aregnum-red-rgb), 0.10);
    --aregnum-red-18: rgba(var(--aregnum-red-rgb), 0.18);
    --aregnum-red-25: rgba(var(--aregnum-red-rgb), 0.25);

    --aregnum-shell-bg: #FFFFFF;
    --aregnum-content-bg: #FFFFFF;

    --aregnum-sidebar-bg: #E7ECE8;
    --aregnum-sidebar-border: rgba(var(--aregnum-moss-rgb), 0.35);
    --aregnum-sidebar-active: #D5DCD6;
    --aregnum-sidebar-hover: #DDE4DE;

    --aregnum-card-bg: #F7F7F7;
    --aregnum-card-bg-soft: #F4F6F4;
    --aregnum-card-border: rgba(var(--aregnum-moss-rgb), 0.08);

    --aregnum-table-head-bg: #E7ECE8;
    --aregnum-table-border: rgba(var(--aregnum-moss-rgb), 0.08);
    --aregnum-table-row-hover: #F0F3F0;

    --aregnum-input-border: rgba(var(--aregnum-moss-rgb), 0.18);
    --aregnum-input-placeholder: rgba(var(--aregnum-moss-rgb), 0.45);

    --aregnum-text-main: #2C382F;
    --aregnum-text-soft: #5B625B;
    --aregnum-text-muted: rgba(var(--aregnum-moss-rgb), 0.75);
    --aregnum-text-light: #F7F7F7;

    --aregnum-font-heading: 'Roboto Serif', Georgia, 'Times New Roman', serif;
    --aregnum-font-accent: 'Space Grotesk', 'Inter', sans-serif;
    --aregnum-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --aregnum-radius-sm: 0.75rem;
    --aregnum-radius-md: 1.125rem;
    --aregnum-radius-lg: 1.5rem;
    --aregnum-radius-xl: 1.875rem;
    --aregnum-radius-pill: 999px;

    --aregnum-shadow-soft: 0 0.625rem 1.75rem rgba(var(--aregnum-moss-rgb), 0.08);
    --aregnum-shadow-card: 0 0.75rem 1.875rem rgba(var(--aregnum-moss-rgb), 0.09);
    --aregnum-shadow-modal: 0 1.625rem 5rem rgba(var(--aregnum-moss-rgb), 0.28);

    --bs-font-sans-serif: var(--aregnum-font-body);
    --bs-body-font-family: var(--aregnum-font-body);

    --bs-primary: #5B625B;
    --bs-primary-rgb: 91, 98, 91;

    --bs-secondary: #C5C2BD;
    --bs-secondary-rgb: 197, 194, 189;

    --bs-success: #D3D8D4;
    --bs-success-rgb: 211, 216, 212;

    --bs-danger: #B4A699;
    --bs-danger-rgb: 180, 166, 153;

    --bs-warning: #C5C2BD;
    --bs-warning-rgb: 197, 194, 189;

    --bs-info: #E2FBFF;
    --bs-info-rgb: 226, 251, 255;

    --bs-light: #F7F7F7;
    --bs-light-rgb: 247, 247, 247;

    --bs-dark: #2C382F;
    --bs-dark-rgb: 44, 56, 47;

    --bs-body-bg: #FFFFFF;
    --bs-body-color: #5B625B;
    --bs-heading-color: #2C382F;
    --bs-border-color: rgba(var(--aregnum-moss-rgb), 0.08);

    --bs-link-color: #5B625B;
    --bs-link-hover-color: #2C382F;

    --bs-border-radius: var(--aregnum-radius-md);
    --bs-border-radius-sm: var(--aregnum-radius-sm);
    --bs-border-radius-lg: var(--aregnum-radius-lg);
}


/* =========================================================
   3. Global Reset / Shell
   ========================================================= */

html,
body {
    background-color: var(--aregnum-shell-bg) !important;
    color: var(--aregnum-text-soft) !important;
    font-family: var(--aregnum-font-body) !important;
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body,
p,
span,
div,
input,
select,
textarea,
button,
table,
td,
th,
.modal,
.card,
.dropdown-menu,
.form-control,
.form-select {
    font-family: var(--aregnum-font-body) !important;
}

#main-wrapper {
    background-color: var(--aregnum-shell-bg) !important;
}

.page-wrapper,
.body-wrapper,
.container-fluid {
    background-color: var(--aregnum-content-bg) !important;
}

.container-fluid {
    padding-top: 1.5rem;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

p {
    color: var(--aregnum-text-soft);
}

svg,
img {
    max-width: 100%;
}

svg path {
    fill: currentColor;
}


/* =========================================================
   4. Typography
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.card-title,
.modal-title {
    font-family: var(--aregnum-font-heading) !important;
    color: var(--aregnum-text-main) !important;
    font-weight: 400;
    letter-spacing: 0.02em;
}

h4.fw-semibold,
h5.fw-semibold,
h6.fw-semibold,
.fw-semibold {
    color: var(--aregnum-text-main) !important;
}

.nav-small-cap,
.sidebar-nav ul .nav-small-cap,
.btn,
.badge,
.table thead th,
.breadcrumb,
.breadcrumb-item,
.navbar,
.topbar,
.app-header,
.sidebar-link,
.form-label,
label,
.dropdown-item {
    font-family: var(--aregnum-font-accent) !important;
}

.sidebar-link,
.btn,
.badge,
.table thead th,
.form-label,
label,
.dropdown-item {
    letter-spacing: 0.01em;
}

.nav-small-cap,
.sidebar-nav ul .nav-small-cap {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================================================
   5. Sidebar
   ========================================================= */

.left-sidebar {
    background-color: var(--aregnum-sidebar-bg) !important;
    border-right: 1px solid var(--aregnum-sidebar-border) !important;
    box-shadow: none !important;
}

.left-sidebar .brand-logo .logo-img img {
    filter: none !important;
}

.sidebar-nav,
.scroll-sidebar {
    background-color: var(--aregnum-sidebar-bg) !important;
}

.sidebar-nav ul {
    background-color: transparent !important;
}

.sidebar-nav ul .nav-small-cap {
    color: var(--aregnum-text-main) !important;
    font-size: 0.78rem;
    font-weight: 800;
    margin-top: 1rem;
    opacity: 0.95;
}

.sidebar-nav ul .nav-small-cap i {
    color: var(--aregnum-text-main) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    color: var(--aregnum-text-main) !important;
    background-color: transparent !important;
    border-radius: var(--aregnum-radius-pill);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-weight: 700;
    box-shadow: none !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link i,
.sidebar-nav ul .sidebar-item .sidebar-link span {
    color: var(--aregnum-text-main) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background-color: var(--aregnum-sidebar-hover) !important;
    color: var(--aregnum-text-main) !important;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item .sidebar-link.router-link-active {
    background-color: var(--aregnum-sidebar-active) !important;
    color: var(--aregnum-text-main) !important;
    font-weight: 800;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
.sidebar-nav ul .sidebar-item .sidebar-link.active i,
.sidebar-nav ul .sidebar-item .sidebar-link.router-link-active i {
    color: var(--aregnum-text-main) !important;
}

.sidebar-nav hr,
.left-sidebar hr {
    border-color: var(--aregnum-moss-18) !important;
    opacity: 1;
}


/* =========================================================
   6. Header / Topbar
   ========================================================= */

.app-header,
.topbar,
.navbar,
.header {
    background-color: var(--aregnum-white) !important;
    box-shadow: none !important;
}

.navbar .nav-link,
.app-header .nav-link,
.topbar .nav-link {
    color: var(--aregnum-text-soft) !important;
}

.navbar .nav-link:hover,
.app-header .nav-link:hover,
.topbar .nav-link:hover {
    color: var(--aregnum-text-main) !important;
}


/* =========================================================
   7. Global Page Title / Breadcrumb Card
   ========================================================= */

.BreadcrumbBackground,
.card.bg-light-info.BreadcrumbBackground,
.BreadcrumbBackground.card,
.card.bg-light-info {
    background: var(--aregnum-moss) !important;
    border: none !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-soft) !important;
    overflow: hidden;
    color: var(--aregnum-ivory) !important;
}

.BreadcrumbBackground .card-body,
.card.bg-light-info.BreadcrumbBackground .card-body {
    padding: 1.35rem 1.65rem !important;
}

.BreadcrumbBackground h1,
.BreadcrumbBackground h2,
.BreadcrumbBackground h3,
.BreadcrumbBackground h4,
.BreadcrumbBackground h5,
.BreadcrumbBackground h6,
.BreadcrumbBackground .page-title {
    color: var(--aregnum-ivory) !important;
    font-family: var(--aregnum-font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

.BreadcrumbBackground .breadcrumb,
.BreadcrumbBackground .breadcrumb-item,
.BreadcrumbBackground .breadcrumb-item a {
    color: rgba(var(--aregnum-ivory-rgb), 0.92) !important;
    font-family: var(--aregnum-font-accent) !important;
    font-weight: 800;
}

.BreadcrumbBackground .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(var(--aregnum-ivory-rgb), 0.72) !important;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--aregnum-text-muted) !important;
    font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--aregnum-text-muted) !important;
}


/* =========================================================
   8. Cards / Page Blocks
   ========================================================= */

.card {
    background: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
    color: var(--aregnum-text-soft);
}

.card-body,
.ar-card-body {
    color: var(--aregnum-text-soft);
}

.card.card-body {
    background: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
}

.card-header {
    background: var(--aregnum-ivory) !important;
    border-bottom: 1px solid var(--aregnum-moss-08) !important;
    color: var(--aregnum-text-main) !important;
    font-weight: 800;
}

.card-footer {
    background: var(--aregnum-ivory) !important;
    border-top: 1px solid var(--aregnum-moss-08) !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    color: var(--aregnum-text-main) !important;
}

.shadow-none {
    box-shadow: none !important;
}

.border {
    border-color: var(--aregnum-card-border) !important;
}

.bg-light {
    background-color: var(--aregnum-card-bg-soft) !important;
}

.border-bottom {
    border-bottom-color: var(--aregnum-card-border) !important;
}


/* =========================================================
   9. Search / Toolbar Cards
   ========================================================= */

.searchable-container .card.card-body:first-child,
.widget-content.searchable-container .card.card-body:first-child {
    background: var(--aregnum-ivory) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    padding: 1.55rem !important;
    box-shadow: var(--aregnum-shadow-card) !important;
}

.product-search,
#input-search,
input[type="search"],
input[type="text"].product-search {
    min-height: 3.35rem;
    background-color: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-input-border) !important;
    border-radius: var(--aregnum-radius-pill) !important;
    color: var(--aregnum-text-main) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.product-search::placeholder,
#input-search::placeholder,
.form-control::placeholder {
    color: var(--aregnum-input-placeholder) !important;
}

.position-relative .ti-search {
    color: var(--aregnum-text-soft) !important;
}


/* =========================================================
   10. Buttons
   IMPORTANT:
   No button uses red.
   Delete/danger buttons use Clay, matching the mobile app CSS.
   ========================================================= */

.btn {
    min-height: 2.85rem;
    border-radius: var(--aregnum-radius-pill) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1.35rem;
    font-family: var(--aregnum-font-body) !important;
    font-size: 0.93rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.015em;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    min-height: 2.35rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.83rem;
}

.btn-lg {
    min-height: 3.35rem;
    padding-left: 1.7rem;
    padding-right: 1.7rem;
    font-size: 1rem;
}

.btn-primary,
.btn-info {
    background: var(--aregnum-moss) !important;
    border-color: var(--aregnum-moss) !important;
    color: var(--aregnum-ivory) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    background: var(--aregnum-forest) !important;
    border-color: var(--aregnum-forest) !important;
    color: var(--aregnum-ivory) !important;
}

.btn-primary i,
.btn-info i {
    color: var(--aregnum-ivory) !important;
}

.btn-secondary,
.btn-light {
    background: var(--aregnum-stone) !important;
    border-color: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-light:focus {
    background: var(--aregnum-sage) !important;
    border-color: var(--aregnum-sage) !important;
    color: var(--aregnum-moss) !important;
}

.btn-success {
    background: var(--aregnum-sage) !important;
    border-color: var(--aregnum-sage) !important;
    color: var(--aregnum-moss) !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--aregnum-stone) !important;
    border-color: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.btn-danger {
    background: var(--aregnum-clay) !important;
    border-color: var(--aregnum-clay) !important;
    color: var(--aregnum-ivory) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--aregnum-stone) !important;
    border-color: var(--aregnum-stone) !important;
    color: var(--aregnum-ivory) !important;
}

.btn-outline-primary {
    border: 1px solid var(--aregnum-moss) !important;
    color: var(--aregnum-moss) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--aregnum-moss) !important;
    color: var(--aregnum-ivory) !important;
}

.btn-outline-secondary {
    border: 1px solid var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
    background: transparent !important;
}

.btn-outline-secondary:hover {
    background: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.btn-outline-danger {
    border: 1px solid var(--aregnum-clay) !important;
    color: var(--aregnum-moss) !important;
    background: transparent !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--aregnum-clay) !important;
    color: var(--aregnum-moss) !important;
}

.back.btn {
    margin-top: 1rem !important;
}


/* =========================================================
   11. Forms / Inputs
   ========================================================= */

.form-control,
.form-select,
textarea.form-control,
select.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    min-height: 2.85rem;
    background-color: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-input-border) !important;
    border-radius: var(--aregnum-radius-pill) !important;
    color: var(--aregnum-text-main) !important;
    font-family: var(--aregnum-font-body) !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.7rem 1.05rem;
    box-shadow: none !important;
    outline: none !important;
}

textarea,
textarea.form-control {
    min-height: 7rem;
    border-radius: var(--aregnum-radius-lg) !important;
    resize: vertical;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
select.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--aregnum-moss-45) !important;
    box-shadow: 0 0 0 0.25rem var(--aregnum-moss-08) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--aregnum-input-placeholder) !important;
}

.form-label,
label {
    color: var(--aregnum-moss) !important;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}

.input-group {
    border-radius: 0;
}

.input-group-text {
    background-color: var(--aregnum-ivory) !important;
    border-color: var(--aregnum-input-border) !important;
    color: var(--aregnum-moss) !important;
}


/* =========================================================
   12. Tables
   ========================================================= */

.table-responsive {
    border-radius: var(--aregnum-radius-md);
}

.table {
    color: var(--aregnum-text-soft) !important;
    border-color: var(--aregnum-table-border) !important;
    margin-bottom: 0 !important;
}

.table thead,
.table thead.header-item,
.table .header-item {
    background-color: var(--aregnum-sidebar-bg) !important;
}

.table thead th,
.table .header-item th {
    background-color: var(--aregnum-sidebar-bg) !important;
    color: var(--aregnum-forest) !important;
    border-bottom: 1px solid var(--aregnum-table-border) !important;
    font-family: var(--aregnum-font-accent) !important;
    font-weight: 800;
    padding: 1rem 1.2rem !important;
}

.table tbody td {
    color: var(--aregnum-text-soft) !important;
    border-color: var(--aregnum-table-border) !important;
    background-color: var(--aregnum-ivory) !important;
    padding: 1rem 1.2rem !important;
    vertical-align: middle;
}

.table tbody tr:hover td {
    background-color: var(--aregnum-table-row-hover) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #FAFBFA !important;
}

.search-table .user-name,
.table .user-name {
    color: var(--aregnum-text-main) !important;
    font-family: var(--aregnum-font-body) !important;
    font-weight: 800 !important;
}

.sortable-column {
    cursor: pointer;
}

.sortable-column:hover {
    color: var(--aregnum-forest) !important;
    text-decoration: underline;
}


/* =========================================================
   13. Badges / Status Labels
   ========================================================= */

.badge {
    border-radius: var(--aregnum-radius-pill) !important;
    font-family: var(--aregnum-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 0.42rem 0.72rem !important;
    line-height: 1;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--aregnum-moss) !important;
    color: var(--aregnum-ivory) !important;
}

.badge.bg-secondary,
.bg-secondary {
    background-color: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.badge.bg-danger,
.bg-danger {
    background-color: var(--aregnum-clay) !important;
    color: var(--aregnum-ivory) !important;
}

.badge.bg-success,
.bg-success {
    background-color: var(--aregnum-sage) !important;
    color: var(--aregnum-moss) !important;
}

.badge.bg-warning,
.bg-warning {
    background-color: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.badge.bg-info,
.bg-info {
    background-color: var(--aregnum-sky) !important;
    color: var(--aregnum-moss) !important;
}

.badge.text-dark {
    color: var(--aregnum-moss) !important;
}


/* =========================================================
   14. Dropdowns / Action Menus
   ========================================================= */

.dropdown-menu {
    background-color: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-md) !important;
    box-shadow: var(--aregnum-shadow-soft) !important;
    padding: 0.4rem !important;
}

.dropdown-item {
    color: var(--aregnum-text-main) !important;
    border-radius: var(--aregnum-radius-sm) !important;
    font-weight: 700;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--aregnum-sidebar-hover) !important;
    color: var(--aregnum-text-main) !important;
}

.dropdown-item i {
    color: var(--aregnum-text-main) !important;
}

.dropdown .text-muted,
.dropdown a.text-muted {
    color: var(--aregnum-text-main) !important;
}


/* =========================================================
   15. Nav Pills / Tabs
   ========================================================= */

.nav-pills {
    background-color: var(--aregnum-card-bg-soft) !important;
    border-radius: var(--aregnum-radius-lg);
    padding: 0.35rem;
}

.nav-pills .nav-link {
    color: var(--aregnum-text-soft) !important;
    font-family: var(--aregnum-font-accent) !important;
    font-weight: 800;
    border-radius: var(--aregnum-radius-pill) !important;
}

.nav-pills .nav-link i {
    color: var(--aregnum-text-soft) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--aregnum-moss) !important;
    color: var(--aregnum-ivory) !important;
}

.nav-pills .nav-link.active i,
.nav-pills .show > .nav-link i {
    color: var(--aregnum-ivory) !important;
}

.user-profile-tab {
    background-color: var(--aregnum-card-bg-soft) !important;
}


/* =========================================================
   16. Details / Chat Style Containers
   ========================================================= */

.chat-meta-user {
    background-color: var(--aregnum-ivory) !important;
    border-color: var(--aregnum-card-border) !important;
}

.chat-meta-user h5,
.chat-list h5,
.chat-list h6 {
    color: var(--aregnum-text-main) !important;
}

.chat-list p,
.chat-list span {
    color: var(--aregnum-text-soft) !important;
}

.rounded-circle {
    border: 1px solid var(--aregnum-card-border);
}


/* =========================================================
   17. Modals
   ========================================================= */

.modal {
    color: var(--aregnum-moss);
}

.modal-backdrop {
    background: var(--aregnum-moss);
}

.modal-backdrop.show {
    opacity: 0.42;
}

.modal-dialog {
    margin: 1rem auto;
}

.modal-content {
    background: var(--aregnum-ivory) !important;
    color: var(--aregnum-moss) !important;
    border: 1px solid var(--aregnum-moss-08) !important;
    border-radius: var(--aregnum-radius-xl) !important;
    box-shadow: var(--aregnum-shadow-modal) !important;
    overflow: hidden;
}

.modal-header {
    min-height: 4.5rem;
    background: var(--aregnum-ivory) !important;
    color: var(--aregnum-moss) !important;
    border-bottom: 1px solid var(--aregnum-moss-08) !important;
    padding: 1.35rem 1.5rem 1rem;
}

.modal-title {
    margin: 0;
    color: var(--aregnum-moss) !important;
    font-family: var(--aregnum-font-heading) !important;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.modal-body {
    background: var(--aregnum-ivory) !important;
    color: var(--aregnum-moss) !important;
    padding: 1.35rem 1.5rem;
    overflow-y: auto;
}

.modal-body p {
    color: var(--aregnum-moss-75);
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    background: var(--aregnum-ivory) !important;
    border-top: 1px solid var(--aregnum-moss-08) !important;
    padding: 1rem 1.5rem 1.35rem;
}

.modal-footer > * {
    margin: 0;
}

.btn-close {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--aregnum-radius-pill);
    background-color: var(--aregnum-sage);
    opacity: 1;
    box-shadow: none;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem var(--aregnum-moss-08);
}


/* =========================================================
   18. Alerts
   ========================================================= */

.alert {
    border: 1px solid var(--aregnum-moss-08);
    border-radius: var(--aregnum-radius-lg);
    background: var(--aregnum-ivory);
    color: var(--aregnum-moss);
    box-shadow: var(--aregnum-shadow-card);
    padding: 1rem 1.125rem;
}

.alert-primary {
    background-color: var(--aregnum-sage) !important;
    border-color: var(--aregnum-sage) !important;
    color: var(--aregnum-moss) !important;
}

.alert-info {
    background-color: var(--aregnum-sky) !important;
    border-color: var(--aregnum-sky) !important;
    color: var(--aregnum-moss) !important;
}

.alert-success {
    background-color: var(--aregnum-sage) !important;
    border-color: var(--aregnum-sage) !important;
    color: var(--aregnum-moss) !important;
}

.alert-warning {
    background-color: var(--aregnum-stone) !important;
    border-color: var(--aregnum-stone) !important;
    color: var(--aregnum-moss) !important;
}

.alert-danger {
    background-color: var(--aregnum-clay) !important;
    border-color: var(--aregnum-clay) !important;
    color: var(--aregnum-moss) !important;
}


/* =========================================================
   19. Text Utilities
   ========================================================= */

.text-primary {
    color: var(--aregnum-moss) !important;
}

.text-secondary {
    color: var(--aregnum-text-soft) !important;
}

.text-muted {
    color: var(--aregnum-text-muted) !important;
}

.text-dark {
    color: var(--aregnum-text-main) !important;
}

.text-danger {
    color: var(--aregnum-red) !important;
}

.text-success {
    color: var(--aregnum-moss) !important;
}

.text-info {
    color: var(--aregnum-moss) !important;
}

.text-warning {
    color: var(--aregnum-clay) !important;
}

.text-white {
    color: var(--aregnum-ivory) !important;
}


/* =========================================================
   20. Icons
   ========================================================= */

.ti,
.bi,
.card i,
.table i,
.dropdown i {
    color: inherit;
}

.card .ti,
.card .bi {
    color: var(--aregnum-text-main) !important;
}

.btn .ti,
.btn .bi,
.btn i {
    color: inherit !important;
}


/* =========================================================
   21. Loading / Spinners
   ========================================================= */

.spinner-border {
    color: var(--aregnum-moss) !important;
}

.btn .spinner-border {
    color: currentColor !important;
}


/* =========================================================
   22. Aregnum Data Page Helpers
   Use these classes in Razor pages instead of page-level CSS
   ========================================================= */

.aregnum-page-card {
    background: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
}

.aregnum-page-card-soft {
    background: var(--aregnum-card-bg-soft) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-soft) !important;
}

.aregnum-icon-circle {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aregnum-radius-pill);
    background: var(--aregnum-sage);
    color: var(--aregnum-moss);
    flex-shrink: 0;
}

.aregnum-icon-circle-sm {
    width: 2.35rem;
    height: 2.35rem;
}

.aregnum-icon-circle-lg {
    width: 3.625rem;
    height: 3.625rem;
}

.aregnum-section-title {
    color: var(--aregnum-moss) !important;
    font-family: var(--aregnum-font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

.aregnum-section-subtitle {
    color: var(--aregnum-moss-75) !important;
    font-family: var(--aregnum-font-body) !important;
    font-weight: 500;
}

.aregnum-toolbar {
    background: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
    padding: 1.5rem;
}

.aregnum-table-card {
    background: var(--aregnum-ivory) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    border-radius: var(--aregnum-radius-lg) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
    overflow: hidden;
}

.aregnum-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

.aregnum-empty-state-icon {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aregnum-radius-pill);
    background: var(--aregnum-sage);
    color: var(--aregnum-moss);
    margin-bottom: 1rem;
}


/* =========================================================
   23. Small Reusable Brand Utilities
   ========================================================= */

.aregnum-bg-ivory {
    background-color: var(--aregnum-ivory) !important;
}

.aregnum-bg-sky {
    background-color: var(--aregnum-sky) !important;
}

.aregnum-bg-sage {
    background-color: var(--aregnum-sage) !important;
}

.aregnum-bg-forest {
    background-color: var(--aregnum-forest) !important;
}

.aregnum-bg-moss {
    background-color: var(--aregnum-moss) !important;
}

.aregnum-bg-stone {
    background-color: var(--aregnum-stone) !important;
}

.aregnum-bg-clay {
    background-color: var(--aregnum-clay) !important;
}

.aregnum-text-forest {
    color: var(--aregnum-forest) !important;
}

.aregnum-text-moss {
    color: var(--aregnum-moss) !important;
}

.aregnum-text-muted {
    color: var(--aregnum-text-muted) !important;
}

.aregnum-border {
    border-color: var(--aregnum-card-border) !important;
}


/* =========================================================
   24. Focus / Selection Safety
   ========================================================= */

*:focus,
*:focus-visible,
*:active {
    outline: none !important;
}

input,
textarea,
select,
.form-control,
.form-select {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    outline: none !important;
    border-color: var(--aregnum-moss-45) !important;
    box-shadow: 0 0 0 0.25rem var(--aregnum-moss-08) !important;
}


/* =========================================================
   25. Responsive Shell Tweaks
   ========================================================= */

@media (max-width: 991.98px) {
    .container-fluid {
        padding-top: 1rem;
    }

    .BreadcrumbBackground .card-body,
    .card.bg-light-info.BreadcrumbBackground .card-body {
        padding: 1rem !important;
    }

    .searchable-container .card.card-body:first-child,
    .widget-content.searchable-container .card.card-body:first-child {
        padding: 1rem !important;
    }

    .btn {
        white-space: nowrap;
    }

    .modal-footer {
        flex-wrap: wrap;
    }
}


/* =========================================================
   26. Sidebar Logo Fix
   Fixes large 1920x1080 logo rendering inside sidebar
   ========================================================= */

.aregnum-logo-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.aregnum-sidebar-logo {
    display: block !important;
    width: 9.375rem !important;
    max-width: 9.375rem !important;
    height: auto !important;
    max-height: 6rem !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.user-profile-tab .nav-item .nav-link.active
{
    border-bottom: 2px solid var(--aregnum-ivory);
    color: var(--aregnum-ivory) !important;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-card-container > .row {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.dashboard-stat-card {
    min-height: 8.75rem;
    border-radius: var(--aregnum-radius-lg) !important;
    background: linear-gradient(135deg, var(--aregnum-ivory) 0%, var(--aregnum-card-bg-soft) 100%) !important;
    border: 1px solid var(--aregnum-card-border) !important;
    box-shadow: var(--aregnum-shadow-card) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-0.15rem);
    border-color: var(--aregnum-stone) !important;
    box-shadow: 0 1rem 2rem rgba(var(--aregnum-moss-rgb), 0.12) !important;
}

.dashboard-stat-icon {
    width: 3.15rem;
    height: 3.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    border-radius: var(--aregnum-radius-pill);
    background-color: var(--aregnum-sage);
    color: var(--aregnum-forest) !important;
    font-size: 1.9rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px var(--aregnum-moss-08);
}

.dashboard-stat-title {
    font-family: var(--aregnum-font-accent) !important;
    color: var(--aregnum-forest) !important;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.dashboard-stat-value {
    font-family: var(--aregnum-font-body) !important;
    color: var(--aregnum-forest) !important;
    font-weight: 800;
}

.dashboard-chart-card {
    background: linear-gradient(135deg, var(--aregnum-ivory) 0%, var(--aregnum-card-bg-soft) 100%);
    border: 1px solid var(--aregnum-card-border);
    border-radius: var(--aregnum-radius-lg);
    margin-bottom: 1.25rem;
    padding: 1rem;
    box-shadow: var(--aregnum-shadow-card);
}

.dashboard-chart-container {
    width: 100%;
    height: auto;
}

/* =========================================================
   WIDE REPORT TABLE SCROLL FIX
   ========================================================= */

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.table-responsive > table {
    min-width: max-content;
}

.aregnum-table-card {
    overflow-x: auto !important;
    overflow-y: hidden;
}

.aregnum-table-card .table-responsive {
    overflow-x: auto !important;
}

.table-responsive::-webkit-scrollbar,
.aregnum-table-card::-webkit-scrollbar {
    height: 0.7rem;
}

.table-responsive::-webkit-scrollbar-track,
.aregnum-table-card::-webkit-scrollbar-track {
    background: var(--aregnum-ivory);
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb,
.aregnum-table-card::-webkit-scrollbar-thumb {
    background: var(--aregnum-stone);
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.aregnum-table-card::-webkit-scrollbar-thumb:hover {
    background: var(--aregnum-moss);
}

/* =========================================================
   TABLE PAGINATION FOOTER FIX
   Keeps row counts like 0-0 of 0 on one line
   ========================================================= */

.table-footer,
.table-pagination,
.pagination,
.dataTables_paginate,
.dataTables_info,
.table-responsive + .row,
.card .row.align-items-center {
    min-width: 0;
}

.dataTables_info,
.table-pagination-info,
.table-footer-info,
.table-footer span,
.table-footer p,
.pagination span,
.pagination p {
    white-space: nowrap !important;
}

.table-footer,
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-footer .form-select,
.table-pagination .form-select,
.table-footer select,
.table-pagination select {
    width: auto !important;
    min-width: 5.5rem;
}

.table-footer .btn,
.table-pagination .btn,
.pagination .btn {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .table-footer,
    .table-pagination {
        align-items: stretch;
        justify-content: flex-start;
    }
}

/* =========================================================
   PARROT / REPORT TABLE FOOTER COUNT FIX
   Fixes wrapped counts like:
   0-
   0
   of
   0
   ========================================================= */

.card .table-responsive,
.card .table-responsive table {
    width: 100%;
}

.card .table-responsive + div,
.card .table-responsive + .row,
.card .table-responsive ~ div {
    min-width: 0;
}

.card .table-responsive ~ div .row,
.card .table-responsive + div .row,
.card .table-responsive + .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}

.card .table-responsive ~ div [class*="col"],
.card .table-responsive + div [class*="col"],
.card .table-responsive + .row [class*="col"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

.card .table-responsive ~ div p,
.card .table-responsive ~ div span,
.card .table-responsive ~ div label,
.card .table-responsive + div p,
.card .table-responsive + div span,
.card .table-responsive + div label,
.card .table-responsive + .row p,
.card .table-responsive + .row span,
.card .table-responsive + .row label {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.card .table-responsive ~ div select,
.card .table-responsive + div select,
.card .table-responsive + .row select {
    width: auto !important;
    min-width: 5rem !important;
}

/* Common generated table footer class names */
.datatable-bottom,
.dataTables_wrapper .row:last-child,
.table-footer,
.table-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.datatable-info,
.dataTables_info,
.table-pagination-info,
.table-footer-info {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    min-width: max-content !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

.datatable-dropdown,
.dataTables_length,
.datatable-pagination,
.dataTables_paginate,
.table-pagination-controls {
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    .datatable-bottom,
    .dataTables_wrapper .row:last-child,
    .table-footer,
    .table-pagination,
    .card .table-responsive ~ div .row,
    .card .table-responsive + div .row,
    .card .table-responsive + .row {
        flex-wrap: wrap !important;
    }
}

.fw-semibold {
    font-weight: 400 !important;
}



/* ============================================================

   Aregnum Table Cell Wrap Override

   Fixes long address/description text inside d-flex table cells.

   ============================================================ */



.table td .d-flex {

    min-width: 0;

}



.table td .text-wrap {

    display: block;

    min-width: 0;

    max-width: 100%;

    white-space: normal !important;

    overflow-wrap: break-word;

    word-break: normal;

    line-height: 1.45;

}



.table td .d-flex .text-wrap {

    flex: 1 1 auto;

    min-width: 0;

}



.table td:has(.text-wrap) {

    white-space: normal !important;

    max-width: 28rem;

}



.table td:has(.text-wrap) .d-flex {

    align-items: flex-start !important;

}



/* Keep action buttons from wrapping badly */

.table td:last-child .d-flex,

.table td:last-child .btn,

.table td:last-child .badge {

    white-space: nowrap !important;

    flex-shrink: 0;

}

/* ============================================================
   Aregnum Global Icon Circle Fix
   Fixes rounded icon circles that look oval because of padding.
   ============================================================ */

.bg-secondary.rounded-circle.d-inline-flex.align-items-center.justify-content-center.p-4 {
    width: 5rem !important;
    height: 5rem !important;
    min-width: 5rem !important;
    min-height: 5rem !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
}

.bg-secondary.rounded-circle.d-inline-flex.align-items-center.justify-content-center.p-3 {
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-width: 3.25rem !important;
    min-height: 3.25rem !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
}

.bg-secondary.rounded-circle.d-inline-flex.align-items-center.justify-content-center i {
    line-height: 1 !important;
}