/*
 * FINPRO Global Compact UI - 2026-09-02
 * Presentation-only density layer for authenticated FINPRO pages.
 * No workflow, query, route, permission, SAP, credential, or security logic.
 *
 * Design goal:
 * - preserve the current FINPRO visual language;
 * - reclaim vertical space for operational tables;
 * - keep controls comfortably clickable and readable;
 * - apply consistently across Supplier / SCM / Finance / Admin pages.
 */

body.app-body {
    --topbar-height: 62px;
    --sidebar-width: 252px;
}

/* =========================================================
   1. Application shell
   ========================================================= */
body.app-body .dash-topbar-inner {
    padding: 8px 14px;
    gap: 12px;
}

body.app-body .dash-topbar-left {
    gap: 10px;
}

body.app-body .dash-topbar-right {
    gap: 9px;
    font-size: 12.5px;
}

body.app-body .sidebar-toggle {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    font-size: 17px;
}

body.app-body .brand-wrap {
    gap: 9px;
}

body.app-body .brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

body.app-body .brand-company {
    font-size: 11px;
    line-height: 1.1;
}

body.app-body .brand-app {
    font-size: 16px;
    line-height: 1.15;
}

body.app-body .app-version-chip {
    margin-left: 5px;
    padding: 1px 5px;
    font-size: 9px;
}

body.app-body .role-badge {
    padding: 5px 9px;
    font-size: 11px;
}

body.app-body .logout-link {
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 12px;
}

body.app-body .sidebar {
    padding: 12px 10px;
}

body.app-body .sidebar-section {
    margin-bottom: 15px;
}

body.app-body .sidebar-title {
    margin: 0 0 5px 7px;
    font-size: 10px;
    letter-spacing: .85px;
}

body.app-body .sidebar-menu li {
    margin-bottom: 2px;
}

body.app-body .sidebar-menu a {
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.25;
}

body.app-body .content-wrap {
    padding: 8px 12px 7px;
}

/* Page identity stays visible but no longer consumes a large card. */
body.app-body .page-header {
    min-height: 40px;
    padding: 7px 12px;
    margin-bottom: 7px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.app-body .page-header h1 {
    margin: 0;
    font-size: 17px;
    line-height: 1.1;
}

body.app-body .page-meta {
    font-size: 11.5px;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

body.app-body .page-card,
body.app-body .table-card,
body.app-body .form-card {
    padding: 9px;
    border-radius: 11px;
}

body.app-body .footer-note {
    margin-top: 3px;
    font-size: 10px;
}

/* =========================================================
   2. Common headings, forms and actions
   ========================================================= */
body.app-body .toolbar {
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

body.app-body .section-title {
    margin-bottom: 7px;
    padding-bottom: 5px;
    font-size: 12.5px;
}

body.app-body .section-subtitle,
body.app-body .text-muted {
    font-size: 11.5px;
}

body.app-body .section-subtitle {
    margin-bottom: 8px;
}

body.app-body .text-muted {
    margin-top: 2px;
}

body.app-body .form-row {
    margin-bottom: 8px;
}

body.app-body .form-row label {
    margin-bottom: 4px;
    font-size: 12px;
}

body.app-body .form-row input,
body.app-body .form-row select,
body.app-body .form-row textarea {
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12.5px;
}

body.app-body .form-grid {
    gap: 10px;
}

body.app-body .form-actions {
    margin-top: 10px;
    gap: 7px;
}

body.app-body .btn-primary,
body.app-body .btn-secondary {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
}

body.app-body .alert {
    padding: 8px 10px;
    margin-bottom: 9px;
    border-radius: 8px;
    font-size: 12.5px;
}

/* =========================================================
   3. Generic summaries and tables
   ========================================================= */
body.app-body .summary-grid {
    gap: 9px;
    margin-bottom: 10px;
}

body.app-body .summary-card {
    padding: 10px 12px;
    border-radius: 11px;
}

body.app-body .summary-label {
    margin-bottom: 4px;
    font-size: 11.5px;
}

body.app-body .summary-value {
    font-size: 22px;
}

body.app-body .summary-value.small {
    font-size: 19px;
}

body.app-body .app-table {
    border-radius: 10px;
}

body.app-body .app-table thead th {
    padding: 7px 7px;
    font-size: 11.5px;
}

body.app-body .app-table tbody td {
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1.24;
}

body.app-body .badge-status {
    min-height: 19px;
    padding: 2px 7px;
    font-size: 10.8px;
}

/* Exact FINPRO server-side pagination helper classes. */
body.app-body .finpro-pagination-wrap {
    gap: 8px !important;
    margin: 6px 0 2px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
}

body.app-body .finpro-pagination-left,
body.app-body .finpro-pagination-right {
    gap: 6px !important;
}

body.app-body .finpro-pagination-select {
    height: 28px !important;
    padding: 0 24px 0 7px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
}

body.app-body .finpro-page-link {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
}

/* =========================================================
   4. Transaction list pages (PO / GR / Ready / Invoice / Follow-up)
   These rules intentionally beat module-local presentation styles.
   ========================================================= */
body.app-body .finpro-compact-page {
    margin-top: -4px !important;
    padding-bottom: 0 !important;
}

body.app-body .finpro-mini-topbar {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    min-height: 40px;
}

body.app-body .finpro-mini-title {
    font-size: 15.5px !important;
    line-height: 1.05 !important;
}

body.app-body .finpro-mini-subtitle {
    margin-top: 1px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
}

body.app-body .finpro-filter-card {
    padding: 7px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
}

body.app-body .finpro-filter-card .form-grid,
body.app-body .finpro-filter-card .form-grid.with-vendor {
    gap: 8px !important;
}

body.app-body .finpro-filter-card label {
    margin-bottom: 3px !important;
    font-size: 11px !important;
}

body.app-body .finpro-filter-card input,
body.app-body .finpro-filter-card select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

body.app-body .finpro-filter-card .form-actions {
    gap: 6px !important;
}

body.app-body .finpro-filter-card .btn-primary,
body.app-body .finpro-filter-card .btn-secondary,
body.app-body .finpro-filter-card .finpro-btn-primary,
body.app-body .finpro-filter-card .finpro-btn-secondary {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    line-height: 30px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

body.app-body .finpro-export-row,
body.app-body .finpro-scm-export-row {
    gap: 6px !important;
    margin-bottom: 6px !important;
}

body.app-body .finpro-export-row .btn-secondary,
body.app-body .finpro-scm-export-row .btn-secondary {
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

body.app-body .finpro-summary-grid,
body.app-body .finpro-scm-summary-grid {
    gap: 6px !important;
    margin-bottom: 6px !important;
}

body.app-body .finpro-summary-card {
    min-height: 46px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
}

body.app-body .finpro-summary-label {
    margin-bottom: 2px !important;
    font-size: 10.8px !important;
}

body.app-body .finpro-summary-value {
    font-size: 18px !important;
}

body.app-body .finpro-summary-value.small {
    font-size: 16px !important;
}

body.app-body .finpro-table-card,
body.app-body .js-finpro-table-card {
    border-radius: 10px !important;
}

body.app-body .finpro-table-scroll table.app-table thead th,
body.app-body .js-finpro-table-scroll table.app-table thead th {
    padding: 6px 8px !important;
    font-size: 11px !important;
}

body.app-body .finpro-table-scroll table.app-table tbody td,
body.app-body .js-finpro-table-scroll table.app-table tbody td {
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
}

/* The viewport JS already computes the real table height. We only remove
   legacy excess bottom padding so reclaimed space becomes visible data area. */
body.app-body .finpro-table-card,
body.app-body .finpro-scroll-card,
body.app-body .table-scroll-card {
    padding-bottom: 8px !important;
}

body.app-body .finpro-viewport-table-scroll,
body.app-body .finpro-table-scroll,
body.app-body .js-finpro-table-scroll {
    padding-bottom: 8px !important;
}

body.app-body .finpro-table-scroll table,
body.app-body .js-finpro-table-scroll table,
body.app-body .table-scroll-wrap table {
    margin-bottom: 8px !important;
}

/* =========================================================
   5. Dashboards / cards
   ========================================================= */
body.app-body .finpro-dashboard-page,
body.app-body .finpro-scm-page,
body.app-body .finpro-finance-page,
body.app-body .finpro-admin-page {
    margin-top: -4px !important;
}

body.app-body .finpro-flow-grid,
body.app-body .finpro-dashboard-grid,
body.app-body .finpro-scm-dashboard-grid,
body.app-body .finpro-info-grid,
body.app-body .finpro-scm-info-grid,
body.app-body .finpro-shortcut-grid,
body.app-body .finpro-scm-shortcut-grid,
body.app-body .admin-summary-grid,
body.app-body .admin-live-grid {
    gap: 7px !important;
    margin-bottom: 7px !important;
}

body.app-body .finpro-flow-card,
body.app-body .finpro-dashboard-card,
body.app-body .finpro-scm-dashboard-card,
body.app-body .finpro-info-item,
body.app-body .finpro-scm-info-card,
body.app-body .finpro-card,
body.app-body .admin-card,
body.app-body .admin-summary-box,
body.app-body .admin-live-card {
    padding: 9px 10px !important;
    border-radius: 10px !important;
}

body.app-body .finpro-flow-card {
    min-height: 54px !important;
}

body.app-body .finpro-flow-label,
body.app-body .admin-summary-label,
body.app-body .admin-live-card-label {
    margin-bottom: 4px !important;
    font-size: 10.8px !important;
}

body.app-body .finpro-flow-value,
body.app-body .admin-summary-value,
body.app-body .admin-live-card-value {
    font-size: 21px !important;
}

body.app-body .finpro-flow-note,
body.app-body .admin-live-card-note {
    margin-top: 3px !important;
    font-size: 10.8px !important;
}

body.app-body .finpro-two-column,
body.app-body .admin-live-panels {
    gap: 9px !important;
}

body.app-body .finpro-panel,
body.app-body .admin-live-panel {
    border-radius: 10px !important;
}

body.app-body .finpro-panel-header,
body.app-body .admin-live-panel-head {
    padding: 7px 9px !important;
}

body.app-body .admin-live-dashboard {
    gap: 9px !important;
}

body.app-body .admin-live-head {
    padding: 9px 11px !important;
    border-radius: 10px !important;
}

body.app-body .admin-live-title {
    margin-bottom: 2px !important;
    font-size: 16px !important;
}

body.app-body .admin-live-subtitle {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

body.app-body .admin-live-refresh {
    padding: 6px 9px !important;
    font-size: 11.5px !important;
}

body.app-body .admin-live-table th {
    padding: 7px 9px !important;
}

body.app-body .admin-live-table td {
    padding: 7px 9px !important;
}

/* =========================================================
   6. Admin / permission maintenance pages
   ========================================================= */
body.app-body .finpro-compact-admin {
    gap: 6px !important;
}

body.app-body .finpro-compact-filter {
    margin-bottom: 5px !important;
    padding: 8px !important;
}

body.app-body .permission-group,
body.app-body .finpro-permission-group {
    margin-bottom: 9px !important;
    padding: 9px !important;
    border-radius: 10px !important;
}

body.app-body .permission-group-title,
body.app-body .finpro-permission-group-title {
    margin-bottom: 7px !important;
}

body.app-body .permission-grid,
body.app-body .finpro-permission-grid {
    gap: 6px !important;
}

body.app-body .permission-item,
body.app-body .finpro-permission-item {
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 9px !important;
}

/* =========================================================
   7. Responsive safety
   ========================================================= */
@media (max-width: 1100px) {
    body.app-body {
        --topbar-height: 58px;
    }

    body.app-body .content-wrap {
        padding: 8px;
    }

    body.app-body .page-header {
        display: block;
        min-height: 0;
        padding: 7px 10px;
    }

    body.app-body .page-header h1 {
        margin-bottom: 2px;
    }

    body.app-body .page-meta {
        text-align: left;
        white-space: normal;
    }

    body.app-body .finpro-summary-grid,
    body.app-body .finpro-scm-summary-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body.app-body .brand-company,
    body.app-body .role-badge {
        display: none;
    }

    body.app-body .brand-app {
        font-size: 14px;
    }

    body.app-body .dash-topbar-right > div {
        display: none;
    }
}