/*
 * ═══════════════════════════════════════════════════════════════════
 * DigiLend Enterprise UI/UX Enhancement V4 - COMPREHENSIVE FIXES
 * © 2025 Golden Kairos Innovations Ltd.
 * Revolutionary Business-Unusual Enterprise-Grade Styling
 * ═══════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════
   CRITICAL FIX 1: FONT AWESOME ICONS RESTORATION
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure Font Awesome CSS loads first */
@import url('/styles/fontawesome.8f41798f.css');

/* Force Font Awesome font family for all icon classes */
i[class*="fa-"],
.fa,
[class*="fa fa-"],
i.fa,
i[class^="fa-"],
i[class*=" fa-"] {
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    text-decoration: inherit !important;
    font-variant: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Specific icon fixes */
i.fa.fa-user,
i.fa.fa-users,
i.fa.fa-building,
i.fa.fa-home,
i.fa.fa-dashboard,
i.fa.fa-chart-bar,
i.fa.fa-money-bill-wave,
i.fa.fa-credit-card,
i.fa.fa-file-invoice,
i.fa.fa-cog,
i.fa.fa-bell,
i.fa.fa-search,
i.fa.fa-plus,
i.fa.fa-edit,
i.fa.fa-trash,
i.fa.fa-eye,
i.fa.fa-arrow-right,
i.fa.fa-arrow-left,
i.fa.fa-sort,
i.fa.fa-sort-up,
i.fa.fa-sort-down,
i.fa.fa-check,
i.fa.fa-times,
i.fa.fa-exclamation-triangle,
i.fa.fa-info-circle,
i.fa.fa-question-circle,
i.fa.fa-external-link {
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* Icon sizing fixes */
.fa-lg {
    font-size: 1.33333333em !important;
    line-height: 0.75em !important;
    vertical-align: -15% !important;
}

.fa-2x {
    font-size: 2em !important;
}

.fa-3x {
    font-size: 3em !important;
}

/* Sidebar icons - ensure visibility */
.sidebar .nav>li>a>i,
.nav-sidebar>li>a>i,
.left-nav ul li a i,
#mifos-reskin-side-nav .left-nav ul li a i {
    margin-right: 12px !important;
    font-size: 18px !important;
    color: #D4AF37 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    width: 20px !important;
    text-align: center !important;
    font-family: 'FontAwesome' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Navbar icons */
.navbar .nav>li>a>i,
.navbar-default .navbar-nav>li>a>i {
    margin-right: 8px !important;
    font-size: 16px !important;
    color: white !important;
    font-family: 'FontAwesome' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Button icons */
.btn i {
    margin-right: 8px !important;
    font-family: 'FontAwesome' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn i:only-child {
    margin-right: 0 !important;
}

/* Table icons */
.table td i,
.table th i {
    margin-right: 8px !important;
    vertical-align: middle !important;
    font-family: 'FontAwesome' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CRITICAL FIX 2: COMPREHENSIVE PADDING & SPACING SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Global spacing system - Enterprise grade */
:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
}

/* Body and main container spacing */
body {
    padding-top: 70px !important;
    /* Account for fixed navbar */
    line-height: 1.7 !important;
}

/* Main content area - generous spacing */
.main-content,
.container-fluid,
#mifos-reskin-body-view {
    padding: 40px 50px !important;
    margin-top: 0 !important;
}

/* Panel and card spacing - ENHANCED */
.panel,
.card,
.portlet,
.box {
    margin-bottom: 40px !important;
    padding: 0 !important;
}

.panel-body,
.card-body,
.portlet-body,
.box-body {
    padding: 35px 40px !important;
}

.panel-heading,
.card-header,
.portlet-title,
.box-header {
    padding: 25px 40px !important;
    margin-bottom: 0 !important;
}

.panel-footer,
.card-footer,
.box-footer {
    padding: 25px 40px !important;
}

/* Form spacing - ENHANCED */
.form-group {
    margin-bottom: 28px !important;
}

.form-group label {
    margin-bottom: 12px !important;
    display: block !important;
}

.form-control {
    margin-bottom: 0 !important;
}

/* Button spacing - ENHANCED */
.btn {
    margin-right: 12px !important;
    margin-bottom: 12px !important;
    padding: 14px 32px !important;
}

.btn:last-child {
    margin-right: 0 !important;
}

/* Table spacing - ENHANCED */
.table {
    margin-bottom: 40px !important;
}

.table thead th {
    padding: 20px 28px !important;
}

.table tbody td {
    padding: 18px 28px !important;
}

/* List spacing - ENHANCED */
ul,
ol {
    margin-bottom: 28px !important;
    padding-left: 32px !important;
}

li {
    margin-bottom: 12px !important;
}

/* Navbar spacing - ENHANCED */
.navbar {
    padding: 15px 25px !important;
    min-height: 70px !important;
    height: 70px !important;
}

.navbar-nav>li>a {
    padding: 20px 20px !important;
}

/* Sidebar spacing - ENHANCED */
.sidebar .nav>li>a,
.nav-sidebar>li>a,
.left-nav ul li a,
#mifos-reskin-side-nav .left-nav ul li a {
    padding: 16px 24px !important;
    margin: 6px 12px !important;
}

/* Content area spacing - ENHANCED */
.row {
    margin-bottom: 32px !important;
}

.row:last-child {
    margin-bottom: 0 !important;
}

[class*="col-"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Modal spacing - ENHANCED */
.modal-body {
    padding: 40px !important;
}

.modal-header {
    padding: 25px 40px !important;
}

.modal-footer {
    padding: 25px 40px !important;
}

/* Alert spacing - ENHANCED */
.alert {
    padding: 22px 30px !important;
    margin-bottom: 28px !important;
}

/* Breadcrumb spacing - ENHANCED */
.breadcrumb {
    padding: 16px 30px !important;
    margin-bottom: 32px !important;
}

.breadcrumb>li {
    padding: 0 12px !important;
}

/* Dashboard widget spacing - ENHANCED */
.dashboard-stat,
.stat-card,
.info-box {
    padding: 35px !important;
    margin-bottom: 35px !important;
}

/* Tab spacing - ENHANCED */
.nav-tabs>li>a {
    padding: 16px 32px !important;
    margin-right: 8px !important;
}

.tab-content {
    padding: 35px 0 !important;
}

/* Section spacing - ENHANCED */
section {
    margin-bottom: 50px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

p {
    margin-bottom: 20px !important;
}

/* Header row spacing - ENHANCED */
.page-header {
    margin-bottom: 40px !important;
    padding: 35px 40px !important;
}

/* Dropdown spacing - ENHANCED */
.dropdown-menu {
    padding: 12px 0 !important;
}

.dropdown-menu>li>a {
    padding: 14px 24px !important;
}

/* Input group spacing - ENHANCED */
.input-group {
    margin-bottom: 20px !important;
}

.input-group-addon {
    padding: 14px 22px !important;
}

/* Well spacing - ENHANCED */
.well {
    padding: 35px !important;
    margin-bottom: 35px !important;
}

/* List group spacing - ENHANCED */
.list-group-item {
    padding: 18px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CRITICAL FIX 3: HEADER & BREADCRUMB SYNCHRONIZATION
   ═══════════════════════════════════════════════════════════════════ */

/* Page header synchronization */
.page-header,
.content-header,
[class*="header"] {
    background: linear-gradient(135deg, #F8FAFB 0%, #E8EDF2 100%) !important;
    border-bottom: 3px solid #D4AF37 !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
    padding: 25px 35px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Breadcrumb synchronization */
.breadcrumb {
    background: rgba(248, 250, 252, 0.9) !important;
    border-radius: 0 0 12px 12px !important;
    border-top: 1px solid rgba(232, 237, 242, 0.8) !important;
    margin-bottom: 0 !important;
    padding: 16px 35px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* Header and breadcrumb container */
.header-breadcrumb-container {
    margin-bottom: 40px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Page title styling */
.page-header h1,
.page-header h2,
.content-header h1,
.content-header h2 {
    color: #0A2540 !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.page-header h1 i,
.page-header h2 i,
.content-header h1 i,
.content-header h2 i {
    color: #D4AF37 !important;
    font-size: 24px !important;
}

/* Breadcrumb styling */
.breadcrumb>li {
    font-size: 15px !important;
    color: #2C3E50 !important;
    font-weight: 500 !important;
}

.breadcrumb>li+li::before {
    content: '›' !important;
    font-size: 20px !important;
    color: #D4AF37 !important;
    padding: 0 15px !important;
    font-weight: 700 !important;
}

.breadcrumb>li.active {
    color: #1E5BA8 !important;
    font-weight: 700 !important;
}

.breadcrumb>li a {
    color: #5D6D7E !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.breadcrumb>li a:hover {
    color: #D4AF37 !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CRITICAL FIX 4: TABLE HEADER ROUNDED CORNERS
   ═══════════════════════════════════════════════════════════════════ */

/* Table container with rounded corners */
.table,
.datatable,
table.display,
.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    background: white !important;
}

/* Table header with rounded corners */
.table thead th:first-child,
.datatable thead th:first-child,
table.display thead th:first-child,
.dataTable thead th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
}

.table thead th:last-child,
.datatable thead th:last-child,
table.display thead th:last-child,
.dataTable thead th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 0 !important;
}

/* Table header styling */
.table thead th,
.datatable thead th,
table.display thead th,
.dataTable thead th {
    background: linear-gradient(135deg, #0A2540 0%, #1E5BA8 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 20px 28px !important;
    border: none !important;
    position: sticky !important;
    top: 70px !important;
    /* Account for navbar */
    z-index: 10 !important;
}

/* Table body first and last cells */
.table tbody tr:last-child td:first-child,
.datatable tbody tr:last-child td:first-child,
.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px !important;
}

.table tbody tr:last-child td:last-child,
.datatable tbody tr:last-child td:last-child,
.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL ENTERPRISE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Enhanced table hover with better spacing */
.table-hover>tbody>tr:hover,
.table-hover tbody tr:hover,
.datatable tbody tr:hover,
table.display tbody tr:hover,
.dataTable tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.table-hover>tbody>tr:hover td,
.table-hover tbody tr:hover td,
.datatable tbody tr:hover td,
table.display tbody tr:hover td,
.dataTable tbody tr:hover td {
    color: #0A2540 !important;
    font-weight: 600 !important;
    background-color: transparent !important;
}

/* Enhanced button spacing */
.btn-group .btn {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.btn-group .btn+.btn {
    margin-left: 0 !important;
}

/* Enhanced form control spacing */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
    padding: 14px 18px !important;
    margin-bottom: 0 !important;
}

/* Enhanced checkbox and radio spacing */
.checkbox,
.radio {
    margin-bottom: 20px !important;
}

.checkbox label,
.radio label {
    padding-left: 32px !important;
    margin-bottom: 0 !important;
}

/* Enhanced fieldset spacing */
fieldset {
    padding: 30px !important;
    margin-bottom: 35px !important;
    border: 1px solid #E8EDF2 !important;
    border-radius: 12px !important;
}

legend {
    padding: 8px 20px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #1E5BA8 !important;
}

/* Enhanced navbar height compensation */
body {
    padding-top: 70px !important;
}

/* Enhanced content area */
#mifos-reskin-body-view {
    margin-left: 280px !important;
    transition: margin-left 0.3s ease !important;
    padding: 40px 50px !important;
}

#mifos-reskin-side-nav.collapsed~#mifos-reskin-body-view {
    margin-left: 85px !important;
}

/* Enhanced sidebar spacing */
#mifos-reskin-side-nav .left-nav ul li a {
    padding: 16px 24px !important;
    margin: 6px 12px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

/* Enhanced responsive spacing */
@media (max-width: 992px) {

    .main-content,
    .container-fluid,
    #mifos-reskin-body-view {
        padding: 30px 35px !important;
    }

    .panel-body,
    .card-body {
        padding: 25px 30px !important;
    }

    .table thead th {
        padding: 16px 22px !important;
    }

    .table tbody td {
        padding: 14px 22px !important;
    }
}

@media (max-width: 768px) {

    .main-content,
    .container-fluid,
    #mifos-reskin-body-view {
        padding: 20px 25px !important;
    }

    .panel-body,
    .card-body {
        padding: 20px 25px !important;
    }

    .table thead th {
        padding: 14px 18px !important;
        font-size: 13px !important;
    }

    .table tbody td {
        padding: 12px 18px !important;
        font-size: 13px !important;
    }

    .btn {
        padding: 12px 24px !important;
        margin-bottom: 10px !important;
    }

    .navbar {
        min-height: 60px !important;
        height: auto !important;
        padding: 10px 20px !important;
    }

    body {
        padding-top: 60px !important;
    }

    #mifos-reskin-body-view {
        margin-left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   END OF ENTERPRISE UI/UX ENHANCEMENT V4
   ═══════════════════════════════════════════════════════════════════ */