/*
|--------------------------------------------------------------------------
| Mawzena Unified Content UI - Safe Version
| This file styles page content only. It does NOT style the sidebar.
|--------------------------------------------------------------------------
*/

:root {
    --mz-page-bg: #f7efe3;
    --mz-card: #fffaf2;
    --mz-card-2: #fffdf8;
    --mz-text: #2f2418;
    --mz-muted: #7a6a57;
    --mz-border: rgba(105, 75, 39, .16);
    --mz-primary: #8b5a2b;
    --mz-primary-dark: #5d3519;
    --mz-primary-soft: rgba(139, 90, 43, .10);
    --mz-danger: #b74b42;
    --mz-success: #20835f;
    --mz-radius-xl: 26px;
    --mz-radius-lg: 20px;
    --mz-radius-md: 15px;
    --mz-shadow: 0 14px 38px rgba(58, 36, 17, .09);
    --mz-shadow-soft: 0 8px 22px rgba(58, 36, 17, .06);
}

body.dashboard-body {
    font-family: "Times New Roman", Times, serif !important;
    color: var(--mz-text);
    background:
        radial-gradient(circle at top right, rgba(215, 168, 82, .14), transparent 30%),
        linear-gradient(135deg, #fff8ed 0%, #f4eadb 58%, #fffdf8 100%) !important;
    min-height: 100vh;
}

/*
|--------------------------------------------------------------------------
| Content shell only
|--------------------------------------------------------------------------
*/

.main-content {
    padding: 24px !important;
    max-width: 1440px;
    margin-inline: auto;
    font-family: "Times New Roman", Times, serif !important;
}

.main-content *,
.main-content input,
.main-content select,
.main-content textarea,
.main-content button {
    font-family: "Times New Roman", Times, serif !important;
}

.main-content .topbar,
.main-content .page-header,
.main-content .dashboard-header {
    background: linear-gradient(135deg, rgba(255,250,242,.96), rgba(246,231,207,.86)) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-xl) !important;
    box-shadow: var(--mz-shadow-soft) !important;
    padding: 20px 22px !important;
    margin-bottom: 20px !important;
}

.main-content .topbar h1,
.main-content .page-header h1,
.main-content .dashboard-header h1 {
    color: var(--mz-primary-dark) !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    font-weight: 900 !important;
}

.main-content .topbar p,
.main-content .page-header p,
.main-content .dashboard-header p {
    color: var(--mz-muted) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Cards and panels
|--------------------------------------------------------------------------
*/

.main-content .panel,
.main-content .card,
.main-content .stat-card,
.main-content .wallet-card,
.main-content .category-card,
.main-content .debt-card,
.main-content .settings-card,
.main-content .recurring-card,
.main-content .table-card {
    background: rgba(255, 250, 242, .94) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-xl) !important;
    box-shadow: var(--mz-shadow-soft) !important;
}

.main-content .panel,
.main-content .card,
.main-content .table-card {
    padding: 20px !important;
}

.main-content .stats-grid,
.main-content .dashboard-grid,
.main-content .wallets-page-grid,
.main-content .debt-stats-grid {
    gap: 16px !important;
}

.main-content .stat-card {
    padding: 18px !important;
    overflow: hidden;
}

.main-content .panel h2,
.main-content .panel h3,
.main-content .card h2,
.main-content .card h3,
.main-content .stat-card h3 {
    color: var(--mz-primary-dark) !important;
    font-weight: 900 !important;
}

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

.main-content .btn,
.main-content .mini-btn,
.main-content button[type="submit"],
.main-content input[type="submit"] {
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--mz-primary), var(--mz-primary-dark)) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    padding: 11px 17px !important;
    box-shadow: 0 10px 24px rgba(93, 53, 25, .18) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

.main-content .btn:hover,
.main-content .mini-btn:hover,
.main-content button[type="submit"]:hover,
.main-content input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(93, 53, 25, .24) !important;
}

.main-content .mini-btn-light,
.main-content .btn-light,
.main-content a.mini-btn-light {
    background: #f2e3cc !important;
    color: var(--mz-primary-dark) !important;
    box-shadow: none !important;
}

.main-content .danger,
.main-content .btn-danger,
.main-content .mini-btn.danger,
.main-content button.danger {
    background: linear-gradient(135deg, #c25b51, #8f2e27) !important;
    color: #fff !important;
}

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

.main-content input,
.main-content select,
.main-content textarea {
    border: 1px solid rgba(105, 75, 39, .20) !important;
    background: #fffdf8 !important;
    color: var(--mz-text) !important;
    border-radius: 16px !important;
    padding: 11px 13px !important;
    font-size: 17px !important;
    outline: none !important;
    transition: border .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus {
    border-color: rgba(139, 90, 43, .55) !important;
    box-shadow: 0 0 0 4px rgba(139, 90, 43, .12) !important;
    background: #fff !important;
}

.main-content label {
    color: var(--mz-primary-dark) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

.main-content .form-group {
    margin-bottom: 13px !important;
}

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

.main-content table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 9px !important;
}

.main-content thead th {
    color: var(--mz-muted) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    white-space: nowrap;
}

.main-content tbody tr {
    background: rgba(255, 252, 246, .88) !important;
    box-shadow: 0 8px 18px rgba(58, 36, 17, .055);
}

.main-content tbody td {
    padding: 13px 12px !important;
    border-top: 1px solid rgba(105,75,39,.10) !important;
    border-bottom: 1px solid rgba(105,75,39,.10) !important;
    color: var(--mz-text) !important;
    font-size: 16px !important;
    vertical-align: middle !important;
}

html[dir="rtl"] .main-content tbody td:first-child,
html[dir="rtl"] .main-content thead th:first-child {
    border-radius: 0 16px 16px 0;
}

html[dir="rtl"] .main-content tbody td:last-child,
html[dir="rtl"] .main-content thead th:last-child {
    border-radius: 16px 0 0 16px;
}

html[dir="ltr"] .main-content tbody td:first-child,
html[dir="ltr"] .main-content thead th:first-child {
    border-radius: 16px 0 0 16px;
}

html[dir="ltr"] .main-content tbody td:last-child,
html[dir="ltr"] .main-content thead th:last-child {
    border-radius: 0 16px 16px 0;
}

/*
|--------------------------------------------------------------------------
| States
|--------------------------------------------------------------------------
*/

.main-content .amount-income,
.main-content .text-success {
    color: var(--mz-success) !important;
    font-weight: 900 !important;
}

.main-content .amount-expense,
.main-content .text-danger {
    color: var(--mz-danger) !important;
    font-weight: 900 !important;
}

.main-content .alert,
.main-content .flash,
.main-content .success,
.main-content .error {
    border-radius: 18px !important;
    padding: 13px 16px !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: var(--mz-shadow-soft) !important;
    font-size: 17px !important;
}

.main-content .alert.success,
.main-content .success {
    background: rgba(63, 141, 99, .12) !important;
    color: #266342 !important;
}

.main-content .alert.error,
.main-content .error {
    background: rgba(183, 75, 66, .12) !important;
    color: #8f2e27 !important;
}

.main-content .empty-state,
.main-content .empty-cell,
.main-content .empty-box {
    background: rgba(255, 250, 242, .82) !important;
    border: 1px dashed rgba(105, 75, 39, .24) !important;
    border-radius: var(--mz-radius-lg) !important;
    padding: 18px !important;
    color: var(--mz-muted) !important;
    font-size: 17px !important;
}

/*
|--------------------------------------------------------------------------
| Details and links
|--------------------------------------------------------------------------
*/

.main-content details {
    border-radius: 18px !important;
}

.main-content summary {
    cursor: pointer;
    color: var(--mz-primary-dark) !important;
    font-weight: 900 !important;
}

.main-content a {
    color: var(--mz-primary-dark);
}

.main-content .small-link {
    color: var(--mz-primary-dark) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.main-content .small-link:hover {
    text-decoration: underline !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .main-content {
        padding: 14px !important;
    }

    .main-content .topbar,
    .main-content .page-header,
    .main-content .dashboard-header,
    .main-content .panel,
    .main-content .card,
    .main-content .table-card {
        border-radius: 22px !important;
    }

    .main-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
    }
}


/* MW_REFRESHED_UNIFIED_THEME_START */

/* Unified refreshed Mawzena theme */
:root {
    --mz-primary: #0f766e;
    --mz-primary-dark: #115e59;
    --mz-primary-soft: #ccfbf1;
    --mz-accent: #0284c7;
    --mz-page-bg:
        radial-gradient(circle at 12% 8%, rgba(14, 165, 233, .12), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(20, 184, 166, .14), transparent 32%),
        radial-gradient(circle at 16% 92%, rgba(99, 102, 241, .08), transparent 34%),
        linear-gradient(135deg, #f7fbff 0%, #eefaf8 46%, #f8fafc 100%);
    --mz-card-bg: rgba(255, 255, 255, .84);
    --mz-card-bg-strong: rgba(255, 255, 255, .94);
    --mz-card-border: rgba(15, 118, 110, .13);
    --mz-text-main: #14323a;
    --mz-text-muted: #64748b;
}

html,
body,
body.dashboard-body,
body.app-body,
body.month-summary-page {
    background: var(--mz-page-bg) !important;
    background-attachment: fixed !important;
}

.app-layout,
.dashboard-layout,
.main-content {
    background: transparent !important;
}

.main-content .topbar,
.main-content .page-header,
.main-content .dashboard-header {
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(236,253,245,.72)) !important;
    border: 1px solid rgba(15, 118, 110, .12) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .06) !important;
}

.main-content .topbar h1,
.main-content .page-header h1,
.main-content .dashboard-header h1,
.main-content .panel h2,
.main-content .panel h3,
.main-content .card h2,
.main-content .card h3,
.main-content .stat-card h3 {
    color: var(--mz-text-main) !important;
}

.main-content .topbar p,
.main-content .page-header p,
.main-content .dashboard-header p,
.main-content small {
    color: var(--mz-text-muted) !important;
}

.main-content .panel,
.main-content .card,
.main-content .stat-card,
.main-content .wallet-card,
.main-content .category-card,
.main-content .debt-card,
.main-content .settings-card,
.main-content .recurring-card,
.main-content .table-card {
    background: var(--mz-card-bg) !important;
    border: 1px solid var(--mz-card-border) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(12px);
}

.main-content table {
    background: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(15, 118, 110, .10) !important;
}

.main-content thead th {
    background: rgba(236, 253, 245, .88) !important;
    color: #115e59 !important;
}

.main-content tbody tr {
    background: rgba(255, 255, 255, .76) !important;
}

.main-content tbody tr:hover {
    background: rgba(240, 253, 250, .86) !important;
}

.main-content input,
.main-content select,
.main-content textarea {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(15, 118, 110, .16) !important;
    color: #14323a !important;
}

.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus {
    border-color: rgba(20, 184, 166, .60) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .12) !important;
    background: #ffffff !important;
}

.main-content .btn,
.main-content .mini-btn,
.main-content button[type="submit"],
.main-content input[type="submit"] {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(20, 184, 166, .34) !important;
    box-shadow: 0 12px 26px rgba(15, 118, 110, .18) !important;
}

.main-content .mini-btn-light,
.main-content .btn-light,
.main-content a.mini-btn-light {
    background: rgba(236, 253, 245, .92) !important;
    color: #115e59 !important;
    border: 1px solid rgba(15, 118, 110, .16) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05) !important;
}

.main-content .danger,
.main-content .btn-danger,
.main-content .mini-btn.danger,
.main-content button.danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
}

/* Keep semantic/status colors readable */
.main-content .text-success,
.main-content .amount-income {
    color: #15803d !important;
}

.main-content .text-danger,
.main-content .amount-expense {
    color: #dc2626 !important;
}

.main-content .empty-state,
.main-content .empty-cell,
.main-content .empty-box {
    background: rgba(255, 255, 255, .72) !important;
    border: 1px dashed rgba(15, 118, 110, .16) !important;
    color: #64748b !important;
}

/* MW_REFRESHED_UNIFIED_THEME_END */

/* MW_PHASE2_UNIFIED_UI_START */
:root {
    --mz-primary: #0f766e;
    --mz-primary-dark: #115e59;
    --mz-accent: #2563eb;
    --mz-warm: #b45309;
    --mz-danger: #dc2626;
    --mz-success: #15803d;
    --mz-surface: rgba(255, 255, 255, .92);
    --mz-surface-strong: #ffffff;
    --mz-border: rgba(15, 118, 110, .14);
    --mz-border-strong: rgba(15, 118, 110, .22);
    --mz-text: #0f172a;
    --mz-muted: #64748b;
    --mz-radius: 8px;
    --mz-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

body,
button,
input,
select,
textarea {
    letter-spacing: 0 !important;
}

.main-content {
    width: 100%;
    max-width: 1480px;
    padding: 24px !important;
}

.main-content .topbar,
.main-content .page-header,
.main-content .dashboard-header {
    border-radius: var(--mz-radius) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(240, 253, 250, .86)) !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: var(--mz-shadow) !important;
}

.main-content .panel,
.main-content .card,
.main-content .stat-card,
.main-content .wallet-card,
.main-content .category-card,
.main-content .debt-card,
.main-content .settings-card,
.main-content .recurring-card,
.main-content .table-card,
.main-content .ms-card,
.main-content .empty-state,
.main-content .empty-cell,
.main-content .empty-box,
.main-content details,
.main-content .modal-box {
    border-radius: var(--mz-radius) !important;
}

.main-content .panel,
.main-content .card,
.main-content .stat-card,
.main-content .wallet-card,
.main-content .category-card,
.main-content .debt-card,
.main-content .settings-card,
.main-content .recurring-card,
.main-content .table-card,
.main-content .ms-card {
    background: var(--mz-surface) !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: var(--mz-shadow) !important;
}

.main-content .stat-card,
.main-content .ms-card {
    min-height: 132px;
    display: grid;
    align-content: start;
    gap: 8px;
}

.main-content .stat-card strong,
.main-content .ms-card strong,
.main-content .wallet-balance,
.main-content .debt-money-grid b {
    overflow-wrap: anywhere;
}

.main-content .btn,
.main-content .mini-btn,
.main-content .small-action,
.main-content .small-link,
.main-content .month-btn,
.main-content .ms-pay-btn,
.main-content button[type="submit"],
.main-content input[type="submit"] {
    min-height: 42px !important;
    border-radius: var(--mz-radius) !important;
    border: 1px solid rgba(15, 118, 110, .24) !important;
    background: linear-gradient(135deg, var(--mz-primary), #14b8a6) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, .16) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

.main-content .btn-light,
.main-content .mini-btn-light,
.main-content a.mini-btn-light,
.main-content .small-link,
.main-content .month-btn {
    background: #ecfeff !important;
    color: var(--mz-primary-dark) !important;
    box-shadow: none !important;
}

.main-content .danger,
.main-content .btn-danger,
.main-content .mini-btn.danger,
.main-content button.danger {
    background: linear-gradient(135deg, var(--mz-danger), #b91c1c) !important;
    border-color: rgba(220, 38, 38, .22) !important;
    color: #ffffff !important;
}

.main-content input,
.main-content select,
.main-content textarea {
    border-radius: var(--mz-radius) !important;
    border-color: var(--mz-border-strong) !important;
    background: var(--mz-surface-strong) !important;
}

.main-content .table-wrap,
.main-content .ms-table-wrap,
.main-content .installment-table-wrap {
    border-radius: var(--mz-radius);
}

.main-content table {
    border-radius: var(--mz-radius) !important;
    overflow: hidden;
}

.main-content thead th {
    background: #f0fdfa !important;
    color: var(--mz-primary-dark) !important;
}

.main-content tbody td:first-child {
    border-start-start-radius: var(--mz-radius) !important;
    border-end-start-radius: var(--mz-radius) !important;
}

.main-content tbody td:last-child {
    border-start-end-radius: var(--mz-radius) !important;
    border-end-end-radius: var(--mz-radius) !important;
}

.main-content .badge,
.main-content .ms-badge,
.main-content .debt-type-badge,
.main-content .debt-status,
.main-content .installment-status,
.main-content .ms-status-pill {
    border-radius: var(--mz-radius) !important;
    min-height: 28px;
    align-items: center;
}

.main-content .amount-income,
.main-content .text-success,
.main-content .stat-card.success strong {
    color: var(--mz-success) !important;
}

.main-content .amount-expense,
.main-content .text-danger,
.main-content .stat-card.danger strong {
    color: var(--mz-danger) !important;
}

.main-content .stat-card.warning strong,
.main-content .debt-type-badge.gold {
    color: var(--mz-warm) !important;
}

.main-content .stats-grid,
.main-content .monthly-stats-grid,
.main-content .ms-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.main-content .dashboard-grid,
.main-content .monthly-dashboard-grid,
.main-content .wallets-page-grid,
.main-content .debts-layout,
.main-content .reports-grid {
    gap: 16px !important;
}

.main-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .main-content {
        padding: 72px 14px 18px !important;
    }

    .main-content .topbar,
    .main-content .page-header,
    .main-content .dashboard-header {
        align-items: stretch !important;
        gap: 12px !important;
    }

    .main-content .stats-grid,
    .main-content .monthly-stats-grid,
    .main-content .ms-cards,
    .main-content .dashboard-grid,
    .main-content .monthly-dashboard-grid,
    .main-content .wallets-page-grid,
    .main-content .debts-layout,
    .main-content .reports-grid {
        grid-template-columns: 1fr !important;
    }
}
/* MW_PHASE2_UNIFIED_UI_END */