@import url("theme-vars.css");

/* Compact themed finish for pages loaded in the dashboard center iframe. */

:root {
    --center-bg: var(--app-bg, #f5f7fa);
    --center-surface: var(--app-surface, #ffffff);
    --center-border: var(--app-border, #dbe4ee);
    --center-border-soft: #edf2f7;
    --center-text: var(--app-text, #172033);
    --center-muted: var(--app-muted, #65748a);
    --center-primary: var(--app-primary, #315c64);
    --center-primary-dark: var(--app-primary-dark, #1e3a40);
    --center-accent: var(--app-accent, #c08a2c);
    --center-gradient: var(--app-gradient-primary, linear-gradient(135deg, var(--center-primary), var(--center-primary-dark)));
    --center-tint: color-mix(in srgb, var(--center-primary) 7%, white);
    --center-row-alt: color-mix(in srgb, var(--center-primary) 3%, white);
}

* {
    letter-spacing: 0 !important;
}

html,
body {
    min-height: 100%;
}

body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--center-primary) 5%, transparent), transparent 180px),
        var(--center-bg) !important;
    color: var(--center-text) !important;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.container,
.container-fluid,
.page-wrap,
.main-container,
.content-wrapper,
.dashboard-page,
.app-page {
    max-width: none !important;
    padding: 10px !important;
}

.header,
.page-header,
.toolbar,
.filter-card,
.filters-card,
.filter-section,
.welcome-banner {
    border-radius: 8px !important;
    border: 1px solid var(--center-border) !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
}

.header,
.page-header,
.toolbar {
    background: var(--center-gradient) !important;
    color: #fff !important;
}

.header *,
.page-header *,
.toolbar * {
    color: inherit !important;
}

h1,
h2,
h3,
h4,
.page-title,
.header-page-title,
.app-page-title,
.card-title {
    color: inherit;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
}

h5,
h6 {
    font-size: 13px !important;
    font-weight: 650 !important;
}

.card,
.form-card,
.app-card,
.table-container,
.chart-card,
.stat-card,
.summary-card,
.tile,
.report-paper,
.theme-preview {
    background: var(--center-surface) !important;
    border: 1px solid var(--center-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 8px !important;
}

.card-header,
.app-card-header {
    background: color-mix(in srgb, var(--center-primary) 6%, white) !important;
    border-bottom: 1px solid var(--center-border) !important;
    border-radius: 8px 8px 0 0 !important;
    color: var(--center-text) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
}

.card-body,
.app-card-body {
    padding: 10px !important;
}

.row {
    --bs-gutter-x: 0.6rem !important;
    --bs-gutter-y: 0.5rem !important;
}

.form-label,
.form-label-pro,
.app-label,
label {
    color: var(--center-muted) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    margin-bottom: 3px !important;
}

.form-control,
.form-select,
.form-ctrl,
.app-input,
.app-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea,
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--center-border) !important;
    border-radius: 6px !important;
    color: var(--center-text) !important;
    font-size: 11.5px !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
}

textarea,
textarea.form-control {
    min-height: 58px !important;
}

.form-control:focus,
.form-select:focus,
.form-ctrl:focus,
.app-input:focus,
.app-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--center-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--center-primary) 12%, transparent) !important;
}

.btn,
.app-btn,
button {
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
}

.btn-primary,
.btn-success:not(.btn-outline-success),
.btn-journal,
.btn-purchase,
.btn-pro-primary,
.btn-pro-sales,
.app-btn-primary,
.save-btn,
.submit-btn {
    background: var(--center-gradient) !important;
    border-color: var(--center-primary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--center-primary) !important;
    color: var(--center-primary) !important;
}

.btn-outline-primary:hover,
.filter-btn.active,
.nav-pills .nav-link.active,
.tab.active {
    background: var(--center-gradient) !important;
    border-color: var(--center-primary) !important;
    color: #fff !important;
}

.table,
table {
    color: var(--center-text) !important;
    font-size: 11px !important;
    margin-bottom: 0 !important;
}

.table th,
table th {
    background: color-mix(in srgb, var(--center-primary) 7%, white) !important;
    color: var(--center-muted) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 6px 7px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.table td,
table td {
    border-color: var(--center-border-soft) !important;
    padding: 5px 7px !important;
    vertical-align: middle !important;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: var(--center-row-alt) !important;
}

.table tbody tr:hover,
table tbody tr:hover {
    background: color-mix(in srgb, var(--center-primary) 8%, white) !important;
}

.stat-cards-row,
.summary-grid,
.summary-cards,
.stats-grid,
.kpi-grid {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.stat-card,
.summary-card,
.tile,
.metric-card {
    padding: 10px !important;
}

.stat-card .stat-value,
.tile-value,
.summary-value,
.metric-value,
.sc-val {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.stat-card .stat-label,
.tile-label,
.summary-label,
.metric-label,
.sc-lbl {
    color: var(--center-muted) !important;
    font-size: 9.5px !important;
    font-weight: 650 !important;
}

.badge,
.status-badge {
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    padding: 2px 6px !important;
}

.text-primary,
.brand i,
.accounts-table-title {
    color: var(--center-primary) !important;
}

.header .brand i,
.app-header .brand i,
.toolbar .brand i {
    color: #fff !important;
}

.bg-primary,
.bg-purple {
    background: var(--center-gradient) !important;
}

.modal-header,
.modal-header-drag {
    background: var(--center-gradient) !important;
    color: #fff !important;
}

.form-card h1,
.form-card h2,
.form-card h3,
.form-card h4,
.form-card h5,
.form-card h6,
.card-pro .card-head h3,
.accordion-header h4,
.summary-card .sc-val,
.summary-card .summary-value,
.summary-card .val,
.tree-product-title code,
.voucher-no {
    color: var(--center-primary) !important;
}

.summary-card .sc-icon,
.summary-card .summary-icon,
.summary-card .icon,
.stat-icon,
.rp-icon {
    background: color-mix(in srgb, var(--center-primary) 10%, white) !important;
    color: var(--center-primary) !important;
}

[style*="color:#7c3aed"],
[style*="color: #7c3aed"],
[style*="color:#2d6a4f"],
[style*="color: #2d6a4f"],
[style*="color:#1b4332"],
[style*="color: #1b4332"] {
    color: var(--center-primary) !important;
}

[style*="color:#f59e0b"],
[style*="color: #f59e0b"],
[style*="color:#d4a843"],
[style*="color: #d4a843"],
[style*="color:#b8860b"],
[style*="color: #b8860b"] {
    color: var(--center-accent) !important;
}

[style*="background:#7c3aed"],
[style*="background: #7c3aed"],
[style*="background:#2d6a4f"],
[style*="background: #2d6a4f"],
[style*="background:#1b4332"],
[style*="background: #1b4332"],
[style*="background:#f59e0b"],
[style*="background: #f59e0b"] {
    background: var(--center-gradient) !important;
}

.select2-container {
    font-size: 11.5px !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    padding-top: 3px !important;
}

.select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--center-text) !important;
    line-height: 18px !important;
}

@media (max-width: 900px) {
    .container,
    .container-fluid,
    .page-wrap,
    .main-container,
    .content-wrapper,
    .dashboard-page,
    .app-page {
        padding: 8px !important;
    }
}

@media (max-width: 1024px) {
    body {
        font-size: 11.5px !important;
    }

    .topbar,
    .app-header {
        gap: 6px !important;
        min-height: 42px !important;
        padding: 5px 8px !important;
    }

    .app-header {
        height: auto !important;
        position: sticky !important;
        top: 0 !important;
    }

    .main-wrap {
        margin-top: 0 !important;
        padding: 8px 8px 96px !important;
    }

    .topbar {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .topbar > .d-flex,
    .app-header .brand {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .topbar .brand,
    .app-header .brand {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .topbar .nav-pills,
    .app-header .nav-links {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .topbar .nav-pills::-webkit-scrollbar,
    .app-header .nav-links::-webkit-scrollbar {
        display: none !important;
    }

    .topbar .nav-pills .nav-link,
    .app-header .nav-links a {
        font-size: 10.5px !important;
        padding: 4px 7px !important;
        white-space: nowrap !important;
    }

    .card,
    .card-pro,
    .app-card,
    .form-card,
    .table-container,
    .chart-card,
    .stat-card,
    .summary-card {
        border-radius: 6px !important;
        margin-bottom: 7px !important;
    }

    .card-header,
    .card-pro .card-head,
    .app-card-header,
    .accordion-header {
        min-height: 30px !important;
        padding: 6px 8px !important;
    }

    .card-body,
    .card-pro .card-body,
    .accordion-body {
        padding: 8px !important;
    }

    .card-body.p-0,
    .card-pro .card-body.p-0,
    .table-responsive {
        overflow-x: auto !important;
    }

    .items-table-pro {
        min-width: 720px !important;
    }

    .entry-wrap,
    .entry-fields {
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }

    .entry-fields .field-acc,
    .entry-fields .field-desc,
    .entry-fields .field-amt,
    .entry-fields .field-dbt,
    .entry-fields .field-crd {
        flex: 1 1 145px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .entry-fields .field-del {
        width: 28px !important;
    }

    .total-strip {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 6px 8px !important;
    }

    .totals-bar-pro {
        align-items: stretch !important;
        gap: 6px !important;
        max-height: 44vh !important;
        overflow-y: auto !important;
        padding: 6px 8px !important;
    }

    .totals-bar-pro .totals-group {
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 4px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .totals-bar-pro .total-pill {
        border: 1px solid var(--center-border) !important;
        border-radius: 6px !important;
        padding: 4px !important;
    }

    .totals-bar-pro .total-pill .lbl {
        font-size: 8.5px !important;
    }

    .totals-bar-pro .total-pill .val {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    .totals-bar-pro .total-pill .val.grand {
        font-size: 15px !important;
    }

    .totals-bar-pro > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 576px) {
    .container,
    .container-fluid,
    .page-wrap,
    .main-container,
    .content-wrapper,
    .dashboard-page,
    .app-page,
    .main-wrap {
        padding: 6px !important;
    }

    h1,
    h2,
    h3,
    h4,
    .page-title,
    .header-page-title,
    .app-page-title,
    .card-title {
        font-size: 13px !important;
    }

    .card-header .title,
    .card-pro .card-head h3,
    .accordion-header h4 {
        font-size: 11.5px !important;
    }

    .form-control,
    .form-select,
    .form-ctrl,
    .app-input,
    .app-select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea,
    .select2-container--bootstrap-5 .select2-selection {
        font-size: 11px !important;
        min-height: 28px !important;
        padding: 4px 6px !important;
    }

    .btn,
    .btn-pro,
    .btn-rc,
    .btn-pc,
    .btn-jc,
    .app-btn,
    button {
        font-size: 10.5px !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
    }

    .totals-bar-pro {
        flex-direction: column !important;
    }

    .totals-bar-pro .totals-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .totals-bar-pro > div:last-child > .btn-pro,
    .totals-bar-pro > div:last-child > button,
    .totals-bar-pro > div:last-child > a {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
}