/* MarraCloud clean rebuild layer - loaded last */
:root {
    --mc-clean-bg: #f6f8fb;
    --mc-clean-surface: #ffffff;
    --mc-clean-text: #0f172a;
    --mc-clean-muted: #64748b;
    --mc-clean-border: #e2e8f0;
    --mc-clean-primary: #2563eb;
    --mc-clean-primary-dark: #1d4ed8;
    --mc-clean-success: #16a34a;
    --mc-clean-radius: 12px;
    --mc-clean-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

html {
    background: var(--mc-clean-bg);
}

body {
    background: var(--mc-clean-bg) !important;
    color: var(--mc-clean-text);
    font-family: "Poppins", "Roboto", Arial, sans-serif;
    letter-spacing: 0;
}

body:not(.auth-wrap) .container {
    width: 95%;
    max-width: 1480px;
}

a {
    color: var(--mc-clean-primary);
}

a:hover,
a:focus {
    color: var(--mc-clean-primary-dark);
}

/* Header */
.top-bar {
    background: #0f172a !important;
}

.top-bar-clean {
    min-height: 34px;
    font-size: 12px;
}

.header-main-menu.sticky-navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--mc-clean-border) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.navbar-main,
.main-nav-links,
.modern-secondary-nav,
.navbar-brand.modern-logo {
    min-height: 64px !important;
}

.navbar-brand.modern-logo img {
    max-width: 154px !important;
    max-height: 48px !important;
}

.main-nav-links > li > a,
.modern-secondary-nav > li > a {
    min-height: 38px !important;
    border-radius: 999px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.main-nav-links > li > a .menu-icon {
    display: none !important;
}

.main-nav-links > li.open > a,
.main-nav-links > li > a:hover,
.main-nav-links > li > a:focus {
    background: #eff6ff !important;
    color: var(--mc-clean-primary-dark) !important;
}

.modern-buy-btn {
    background: var(--mc-clean-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.modern-login-btn,
.modern-sign-up-btn,
.modern-notification-btn {
    border: 1px solid var(--mc-clean-border) !important;
    background: #ffffff !important;
    color: var(--mc-clean-text) !important;
}

.navbar-main .dropdown-menu {
    border: 1px solid var(--mc-clean-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mc-clean-shadow) !important;
}

.navbar-main .dropdown-menu > li > a {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.navbar-main .dropdown-menu > li > a .menu-icon {
    display: inline-flex !important;
    width: 16px !important;
    min-width: 16px !important;
    color: var(--mc-clean-primary);
}

/* Homepage */
.modern-hero-section {
    min-height: 0 !important;
    padding: 72px 0 54px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 58%, #2563eb 100%) !important;
    color: #ffffff;
    overflow: hidden;
}

.hero-background,
.hero-overlay,
.hero-animation,
.hero-particles,
.hero-wave,
.floating-element,
.particle {
    display: none !important;
}

.hero-content {
    max-width: 980px;
    margin: 0 auto;
}

.hero-badges {
    display: none !important;
}

.hero-title {
    max-width: 860px;
    margin: 0 auto 16px !important;
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
}

.hero-description {
    max-width: 720px;
    margin: 0 auto 26px !important;
    color: #dbeafe !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-hero-primary,
.btn-hero-secondary,
.btn-plan,
.btn-comparison,
.btn-invoice {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-hero-primary,
.btn-plan,
.btn-comparison {
    border: 1px solid var(--mc-clean-success) !important;
    background: var(--mc-clean-success) !important;
    color: #ffffff !important;
}

.btn-hero-secondary {
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.hero-stats {
    max-width: 880px;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 34px auto 0 !important;
}

.stat-item {
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.stat-icon {
    display: none !important;
}

.stat-number {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}

.stat-label {
    color: #bfdbfe !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.hero-features-grid {
    max-width: 940px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 24px auto 0 !important;
}

.feature-card,
.plan-card,
.modern-news-card,
.invoice-card,
.custom-panel-box,
#main-body .panel,
.panel-sidebar,
.table-container,
.dataTables_wrapper {
    border: 1px solid var(--mc-clean-border) !important;
    border-radius: var(--mc-clean-radius) !important;
    background: var(--mc-clean-surface) !important;
    box-shadow: var(--mc-clean-shadow) !important;
}

.feature-card {
    padding: 18px !important;
    text-align: left !important;
}

.feature-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #eff6ff !important;
    color: var(--mc-clean-primary) !important;
    font-size: 16px !important;
}

.feature-overlay,
.plan-card:before,
.plan-card:after,
.modern-news-card:after,
.invoice-card:after {
    display: none !important;
}

.modern-invoice-section {
    display: none !important;
}

.modern-plans-section,
.modern-news-section {
    padding: 58px 0 !important;
    background: var(--mc-clean-bg) !important;
}

.section-heading-center {
    max-width: 760px;
    margin: 0 auto 28px !important;
}

.section-heading-center h2 {
    color: var(--mc-clean-text) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
}

.section-heading-center .lead,
.section-heading-center p {
    color: var(--mc-clean-muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.plans-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
}

.plan-card {
    padding: 22px !important;
    transform: none !important;
}

.plan-card.plan-featured {
    border-color: #93c5fd !important;
}

.plan-icon,
.plan-icon.featured {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
    color: var(--mc-clean-primary) !important;
}

.plan-card h3 {
    color: var(--mc-clean-text) !important;
    font-size: 20px !important;
}

.plan-description,
.plan-features li,
.plan-users {
    color: var(--mc-clean-muted) !important;
    font-size: 13px !important;
}

.plan-price .price {
    color: var(--mc-clean-text) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
}

.plan-features {
    max-height: 300px;
    overflow: auto;
    padding-right: 6px !important;
}

.plan-features li {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9;
}

.plan-benefits,
.plan-comparison-section {
    display: none !important;
}

/* Client area */
#main-body {
    padding: 34px 0 48px !important;
    background: var(--mc-clean-bg) !important;
}

#main-body .main-content,
#main-body .sidebar,
#main-body .sidebar-secondary {
    min-width: 0;
}

#main-body .panel > .panel-heading,
.panel-sidebar > .panel-heading,
.client-home-panels .panel > .panel-heading {
    border-bottom: 1px solid var(--mc-clean-border) !important;
    background: #ffffff !important;
    padding: 16px 18px !important;
}

#main-body .panel > .panel-body,
.client-home-panels .panel > .panel-body,
.well,
.custom-card-block {
    padding: 18px !important;
}

.mc-client-hero {
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #1d4ed8, #0f172a) !important;
    box-shadow: var(--mc-clean-shadow) !important;
}

.mc-client-overview,
.client-dashboard-wrap .row {
    gap: 14px !important;
}

.mc-client-stat,
.client-dashboard-single {
    border: 1px solid var(--mc-clean-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--mc-clean-shadow) !important;
}

/* Tables/forms/buttons */
#main-body .btn,
#main-body button,
#main-body input[type="submit"],
.modal .btn {
    min-height: 40px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

#main-body .btn-primary,
#main-body .primary-solid-btn {
    border-color: var(--mc-clean-primary) !important;
    background: var(--mc-clean-primary) !important;
    color: #ffffff !important;
}

#main-body .btn-success {
    border-color: var(--mc-clean-success) !important;
    background: var(--mc-clean-success) !important;
    color: #ffffff !important;
}

#main-body .form-control,
#main-body input[type="text"],
#main-body input[type="email"],
#main-body input[type="password"],
#main-body input[type="number"],
#main-body select,
#main-body textarea {
    min-height: 40px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#main-body .form-control:focus,
#main-body input:focus,
#main-body select:focus,
#main-body textarea:focus {
    border-color: var(--mc-clean-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

#main-body table.table > thead > tr > th,
#main-body table.table-list > thead > tr > th,
#main-body table.dataTable > thead > tr > th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

#main-body table.table > tbody > tr > td,
#main-body table.table-list > tbody > tr > td,
#main-body table.dataTable > tbody > tr > td {
    vertical-align: middle !important;
}

/* Footer */
.modern-footer-clean {
    background: #0f172a !important;
}

.modern-footer-clean .footer-main {
    padding: 42px 0 28px !important;
}

.modern-footer-clean .footer-description,
.modern-footer-clean .footer-nav a,
.modern-footer-clean .contact-item {
    color: #cbd5e1 !important;
}

.floating-whatsapp .whatsapp-btn {
    box-shadow: var(--mc-clean-shadow) !important;
}

@media (max-width: 1199px) {
    body:not(.auth-wrap) .container {
        width: 100%;
    }

    .hero-title {
        font-size: 34px !important;
    }

    .plans-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 991px) {
    .navbar-main {
        display: block !important;
    }

    #primary-nav {
        max-height: calc(100vh - 98px) !important;
        overflow-y: auto !important;
    }

    .main-nav-links > li > a,
    .modern-secondary-nav > li > a {
        width: 100% !important;
        justify-content: space-between !important;
        border: 1px solid var(--mc-clean-border) !important;
        border-radius: 10px !important;
        margin-bottom: 6px !important;
    }

    .hero-stats,
    .hero-features-grid,
    .mc-client-overview,
    .client-dashboard-wrap .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .modern-hero-section {
        padding: 52px 0 42px !important;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 28px !important;
    }

    .hero-description {
        font-size: 14px !important;
    }

    .hero-buttons,
    .hero-buttons .btn,
    .mc-client-hero-actions,
    .mc-client-action {
        width: 100% !important;
    }

    .hero-stats,
    .hero-features-grid,
    .mc-client-overview,
    .client-dashboard-wrap .row {
        grid-template-columns: 1fr !important;
    }

    #main-body .table-container,
    #main-body .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #main-body .btn,
    #main-body button,
    #main-body input[type="submit"] {
        width: 100%;
        margin-bottom: 8px;
    }
}