/* =====================================================================
   finApp V18.1.0 — UI Refresh Foundation
   Visual direction: Soft 3D Professional
   Scope: design tokens, app shell, navigation icons, mobile density,
   semantic badges, form polish. Business logic remains unchanged.
   ===================================================================== */

:root{
    --fa-green-900:#075e27;
    --fa-green-800:#08752d;
    --fa-green-700:#0f8a35;
    --fa-green-600:#179c39;
    --fa-green-500:#35b653;
    --fa-green-100:#eaf8ee;
    --fa-green-050:#f5fbf6;
    --fa-blue-600:#2f74db;
    --fa-blue-100:#edf4ff;
    --fa-orange-600:#e88812;
    --fa-orange-100:#fff3df;
    --fa-purple-600:#7357d8;
    --fa-purple-100:#f1edff;
    --fa-cyan-600:#2688a8;
    --fa-cyan-100:#eaf8fb;
    --fa-red-600:#c63b32;
    --fa-red-100:#fff0ee;
    --fa-gray-900:#1b2a22;
    --fa-gray-700:#475467;
    --fa-gray-500:#7c8981;
    --fa-gray-300:#dce5df;
    --fa-gray-100:#f4f7f5;
    --fa-surface:#fff;
    --fa-page:#f6f8f6;
    --fa-radius-sm:10px;
    --fa-radius-md:14px;
    --fa-radius-lg:18px;
    --fa-shadow-soft:0 8px 22px rgba(23,45,31,.07);
    --fa-shadow-icon:0 5px 12px rgba(16,35,23,.16),inset 0 1px 0 rgba(255,255,255,.85);
}

.ui-v181{background:var(--fa-page);color:var(--fa-gray-900)}
.ui-v181 .content{background:var(--fa-page)}

/* Soft-3D icon primitive ------------------------------------------------ */
.fa-soft-icon,.fa-mobile-icon,.quick-action-icon{
    position:relative;
    display:inline-grid!important;
    place-items:center;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.82);
    background:linear-gradient(145deg,#fff 0%,var(--fa-icon-bg,#eaf8ee) 100%);
    color:var(--fa-icon-color,#15913a)!important;
    box-shadow:var(--fa-shadow-icon);
    overflow:hidden;
    isolation:isolate;
}
.fa-soft-icon::before,.fa-mobile-icon::before,.quick-action-icon::before{
    content:"";position:absolute;inset:2px 3px auto 3px;height:38%;border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,0));z-index:-1
}
.fa-soft-icon{width:27px!important;height:27px!important;border-radius:9px}
.fa-soft-icon svg{width:16px!important;height:16px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.fa-mobile-icon{width:28px;height:28px;border-radius:9px}
.fa-mobile-icon svg{width:16px!important;height:16px!important}
.quick-action-icon{width:24px;height:24px;border-radius:8px}
.quick-action-icon svg{width:14px;height:14px}
.fa-icon--home{--fa-icon-bg:#e2f7e8;--fa-icon-color:#168f39}
.fa-icon--sales{--fa-icon-bg:#e8f2ff;--fa-icon-color:#2872db}
.fa-icon--project{--fa-icon-bg:#e9f2ff;--fa-icon-color:#356fd0}
.fa-icon--stock,.fa-icon--purchase{--fa-icon-bg:#fff0d8;--fa-icon-color:#e58a13}
.fa-icon--finance{--fa-icon-bg:#eee9ff;--fa-icon-color:#6f55d3}
.fa-icon--expense{--fa-icon-bg:#fff0e7;--fa-icon-color:#df6b2f}
.fa-icon--report{--fa-icon-bg:#e4f7e8;--fa-icon-color:#12943a}
.fa-icon--owner{--fa-icon-bg:#eef3f7;--fa-icon-color:#587084}
.fa-icon--users{--fa-icon-bg:#e8f6fb;--fa-icon-color:#2b88a6}
.fa-icon--settings{--fa-icon-bg:#eef1f4;--fa-icon-color:#647386}
.fa-icon--quick{--fa-icon-bg:#e5f7e9;--fa-icon-color:#0f8a35;font-size:17px;font-weight:900}
.fa-icon--menu{--fa-icon-bg:#eef2f0;--fa-icon-color:#526158}

/* Desktop shell: approved green professional direction ---------------- */
@media(min-width:1200px){
    .ui-v181 .sidebar{
        background:linear-gradient(180deg,#0c8834 0%,#076529 100%)!important;
        border-right:0!important;
        box-shadow:8px 0 28px rgba(6,82,32,.10);
        scrollbar-color:rgba(255,255,255,.28) transparent
    }
    .ui-v181 .sidebar .brand{
        background:transparent!important;border-bottom:1px solid rgba(255,255,255,.13);
        margin-bottom:10px!important
    }
    .ui-v181 .business-brand-copy strong,.ui-v181 .business-brand-copy small{color:#fff!important}
    .ui-v181 .menu-label{color:#bfe8c9!important}
    .ui-v181 .nav-item{color:rgba(255,255,255,.90)!important}
    .ui-v181 .nav-main{min-height:43px!important;padding:7px 9px!important}
    .ui-v181 .nav-main:hover,.ui-v181 .nav-group:not(.is-active).is-open .nav-group-toggle{
        background:rgba(255,255,255,.11)!important;color:#fff!important
    }
    .ui-v181 .nav-item.active{
        background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.12))!important;
        color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(3,69,26,.13)!important
    }
    .ui-v181 .nav-item.active::after{background:#c8f3d3!important;box-shadow:0 0 0 3px rgba(255,255,255,.10)!important}
    .ui-v181 .nav-submenu .nav-sub{border-left-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.80)!important}
    .ui-v181 .nav-submenu .nav-sub:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
    .ui-v181 .nav-submenu .nav-sub.active-sub{
        background:#fff!important;color:#0b792f!important;border-left-color:#fff!important;
        box-shadow:0 5px 14px rgba(2,67,25,.13)!important
    }
    .ui-v181 .nav-submenu .nav-sub.active-sub::after{background:#179c39!important}
    .ui-v181 .nav-chevron{opacity:.82}
    .ui-v181 .fa-soft-icon{box-shadow:0 4px 11px rgba(2,58,21,.20),inset 0 1px 0 rgba(255,255,255,.95)}
}

/* Topbar and quick actions --------------------------------------------- */
.ui-v181 .topbar.topbar-utility{background:rgba(255,255,255,.96);box-shadow:0 1px 9px rgba(17,39,24,.035)}
.ui-v181 .quick-action,.ui-v181 .quick-menu-toggle{
    min-height:40px;padding:6px 10px 6px 7px;gap:7px;border-color:#dde6df;border-radius:11px;
    background:#fff;color:#33443a;box-shadow:0 3px 10px rgba(17,39,24,.035);font-size:9px
}
.ui-v181 .quick-action:hover,.ui-v181 .quick-menu-toggle:hover{
    transform:translateY(-1px);border-color:#c9ddcf;background:#fbfefc;color:#0d7f30;
    box-shadow:0 7px 15px rgba(17,85,37,.08)
}
.ui-v181 .quick-action>span{font-size:inherit;line-height:inherit;color:inherit}
.ui-v181 .quick-menu-panel{border-radius:15px;box-shadow:0 22px 52px rgba(17,39,24,.16)}
.ui-v181 .quick-menu-panel a{border-radius:10px}

/* Generic surfaces ----------------------------------------------------- */
.ui-v181 .button{border-radius:11px}
.ui-v181 .button.primary{box-shadow:0 6px 14px rgba(15,127,45,.15)}
.ui-v181 .form-control{border-color:#d9e3dc;background:#fff}
.ui-v181 .form-control:focus{border-color:#60bd78;box-shadow:0 0 0 4px rgba(23,156,57,.09)}
.ui-v181 .modal-panel{box-shadow:0 24px 70px rgba(15,33,21,.18)}

/* Semantic chips must look like chips, never full-width markers. */
.ui-v181 :is(.finance-badge,.stock-badge,.sales-badge,.sale-type-pill){
    width:max-content!important;max-width:100%;justify-self:end;align-self:center;
    padding:5px 10px!important;border-radius:999px!important;line-height:1.15
}
.ui-v181 .mobile-card-table td :is(.finance-badge,.stock-badge,.sales-badge,.sale-type-pill){margin-left:auto}

/* Footer: geometrically centered on all screen sizes. */
.ui-v181 .app-footer{
    justify-content:center!important;align-content:center;text-align:center!important;flex-wrap:wrap;
    column-gap:9px!important;row-gap:4px!important
}
.ui-v181 .app-footer>span{display:inline-block;text-align:center}

/* Direct sale polish already identified during V18 testing. */
.ui-v181 .sale-total-preview .grand{background:#fff!important;border-color:#d9e5dc!important;color:#25352b!important}
.ui-v181 .sale-total-preview .grand strong{color:#0f8a35!important;font-weight:900}
.ui-v181 .sale-form-note{border:1px solid #edf1ee;background:#f9fbfa}

/* Login identity ------------------------------------------------------- */
.auth-page.ui-v181{
    background:radial-gradient(circle at 12% 18%,rgba(53,182,83,.10),transparent 27%),
               radial-gradient(circle at 88% 82%,rgba(255,183,67,.10),transparent 25%),
               linear-gradient(145deg,#f6faf7 0%,#fff 53%,#fffaf1 100%)
}
.auth-page.ui-v181 .finapp-login-card{border-color:#e0e8e2;box-shadow:0 24px 65px rgba(19,61,31,.10)}
.auth-page.ui-v181 .auth-product-mark{background:#fff;padding:6px;box-shadow:0 12px 28px rgba(10,111,43,.16)}
.auth-page.ui-v181 .auth-product-brand h1{color:#08752d}

/* Tablet/mobile shell ------------------------------------------------- */
@media(max-width:1199px){
    .ui-v181 .sidebar{
        background:linear-gradient(180deg,#0c8834 0%,#076529 100%)!important;
        border-right:0!important;color:#fff!important
    }
    .ui-v181 .sidebar .brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.13)}
    .ui-v181 .business-brand-copy strong,.ui-v181 .business-brand-copy small{color:#fff!important}
    .ui-v181 .menu-label{color:#bfe8c9!important}
    .ui-v181 .nav-item{color:rgba(255,255,255,.90)!important}
    .ui-v181 .nav-item:hover,.ui-v181 .nav-group:not(.is-active).is-open .nav-group-toggle{background:rgba(255,255,255,.10)!important;color:#fff!important}
    .ui-v181 .nav-item.active{background:rgba(255,255,255,.17)!important;color:#fff!important}
    .ui-v181 .nav-submenu .nav-sub{color:rgba(255,255,255,.82)!important;border-left-color:rgba(255,255,255,.18)!important}
    .ui-v181 .nav-submenu .nav-sub.active-sub{background:#fff!important;color:#0b792f!important}
    .ui-v181 .mobile-drawer-footer{border-top-color:rgba(255,255,255,.15)}
    .ui-v181 .mobile-drawer-user{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.09);color:#fff}
    .ui-v181 .mobile-drawer-profile small{color:#cce8d3}
    .ui-v181 .mobile-drawer-logout{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
    .ui-v181 .mobile-install-button{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);color:#fff}
    .ui-v181 .mobile-install-button small{color:#cde9d4}
}

@media(max-width:767px){
    :root{--v18-topbar:56px;--v18-bottom-nav:70px}
    .ui-v181 .topbar.topbar-utility{
        background:linear-gradient(135deg,#0b8834,#159d3d)!important;border-bottom:0!important;
        box-shadow:0 5px 18px rgba(6,91,34,.14)!important
    }
    .ui-v181 .topbar-mobile-context strong{color:#fff!important;font-size:13px!important}
    .ui-v181 .mobile-menu-button{
        width:40px;height:40px;flex-basis:40px;border-color:rgba(255,255,255,.24);border-radius:12px;
        background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
    }
    .ui-v181 .top-user-profile{background:rgba(255,255,255,.12)}
    .ui-v181 .avatar{background:#eff9f1!important;color:#0d7f30!important;border:1px solid rgba(255,255,255,.70)}
    .ui-v181 .content{padding-top:12px!important}

    .ui-v181 .mobile-bottom-nav{
        padding-top:5px;border-top-color:#e1e8e3;background:rgba(255,255,255,.98);
        box-shadow:0 -8px 24px rgba(20,48,29,.08)
    }
    .ui-v181 .mobile-bottom-item{gap:2px;border-radius:11px;background:transparent!important;color:#68756d}
    .ui-v181 .mobile-bottom-item.active{background:transparent!important;color:#0e8332}
    .ui-v181 .mobile-bottom-item.active .fa-mobile-icon{
        border-color:#bfe1c8;box-shadow:0 6px 13px rgba(15,127,45,.14),inset 0 1px 0 rgba(255,255,255,.95);
        transform:translateY(-1px)
    }
    .ui-v181 .mobile-bottom-item>span:last-child{font-size:8.5px}

    /* Form density: keep 44px+ touch target without oversized fields. */
    .ui-v181 .modal-body .form-control,.ui-v181 .sale-line .form-control{min-height:52px!important;padding-top:10px!important;padding-bottom:10px!important;font-size:16px!important}
    .ui-v181 .modal-panel.mobile-form-modal .modal-head{padding-top:max(12px,var(--v18-safe-top))!important;padding-bottom:10px!important}
    .ui-v181 .modal-panel.mobile-form-modal .modal-body{padding:12px!important}

    /* Sale line becomes a deliberate mobile card instead of compressed desktop grid. */
    .ui-v181 .sale-form-lines{counter-reset:fa-sale-item;gap:10px!important}
    .ui-v181 .sale-line{
        counter-increment:fa-sale-item;position:relative;grid-template-columns:1fr 1fr!important;
        padding:42px 11px 11px!important;gap:9px!important;border-radius:14px!important;background:#fbfdfb!important
    }
    .ui-v181 .sale-line::before{
        content:"Item " counter(fa-sale-item);position:absolute;left:12px;top:12px;color:#213229;
        font-size:11px;font-weight:900
    }
    .ui-v181 .sale-line label:nth-child(1),.ui-v181 .sale-line label:nth-child(2),.ui-v181 .sale-line label:nth-child(3),.ui-v181 .sale-line label:nth-child(8){grid-column:1/-1!important}
    .ui-v181 .sale-line-remove{
        position:absolute!important;right:10px;top:8px;width:34px!important;height:34px!important;min-height:34px!important;
        border-radius:10px!important;background:#fff7f6!important
    }
    .ui-v181 .sale-line label>span{font-size:9px!important}
    .ui-v181 .sale-stock-hint{font-size:9px!important;line-height:1.4;color:#6e7b73}
    .ui-v181 .sales-section-title{align-items:center!important}
    .ui-v181 #sale-add-line{min-height:38px!important;padding:7px 10px!important}
    .ui-v181 .sale-form-note{font-size:9px!important;line-height:1.45;padding:9px 10px!important}
    .ui-v181 .sale-total-preview{gap:7px!important}
    .ui-v181 .sale-total-preview>div{padding:10px!important;border-radius:11px!important}
    .ui-v181 .sale-total-preview .grand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px}
    .ui-v181 .sale-total-preview .grand strong{margin-top:0!important;font-size:14px!important}

    /* Mobile table cards: tighter density and compact semantic chips. */
    .ui-v181 table.mobile-card-table tbody{gap:10px!important}
    .ui-v181 table.mobile-card-table tbody tr{border-radius:15px!important;box-shadow:0 4px 14px rgba(20,48,29,.045)}
    .ui-v181 table.mobile-card-table tbody td{padding:8px 11px!important;line-height:1.35}
    .ui-v181 table.mobile-card-table tbody td[data-mobile-primary="1"]{padding:11px!important;background:#fbfdfb!important}
    .ui-v181 table.mobile-card-table tbody td[data-mobile-actions="1"]{align-items:center!important}

    /* Footer remains above bottom-nav and genuinely centered. */
    .ui-v181 .app-footer{display:flex!important;justify-content:center!important;align-items:center!important;min-height:76px!important;padding:14px 14px 20px!important}
    .ui-v181 .app-footer>span{flex:0 0 100%;width:100%}
}

@media(prefers-reduced-motion:reduce){
    .ui-v181 .quick-action,.ui-v181 .fa-mobile-icon{transition:none!important;transform:none!important}
}

/* =====================================================================
   V18.1.2 — Desktop Sidebar Polish
   - hamburger as the single expand/collapse affordance;
   - icon-only pin with clear active state;
   - auto-close on outside click when unpinned;
   - no white menu blocks;
   - soft-3D navigation art assets;
   - owner/partner and user icons are clearly different.
   ===================================================================== */

:root{
    --fa-sidebar-expanded:286px;
    --fa-sidebar-rail:74px;
    --fa-sidebar-motion:210ms
}

.desktop-sidebar-controls,
.desktop-sidebar-flyout{
    display:none
}

/* New soft-3D artwork should be visible, not trapped inside white tiles. */
.ui-v181 .sidebar .fa-soft-icon,
.ui-v181 .mobile-bottom-nav .fa-mobile-icon{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important
}

.ui-v181 .sidebar .fa-soft-icon::before,
.ui-v181 .mobile-bottom-nav .fa-mobile-icon::before{
    display:none!important
}

.fa-nav-art{
    display:block;
    width:27px;
    height:27px;
    object-fit:contain;
    filter:drop-shadow(0 2px 2px rgba(2,58,21,.18))
}

.ui-v181 .mobile-bottom-nav .fa-nav-art{
    width:24px;
    height:24px
}

@media(min-width:1200px){
    .ui-v181 .sidebar{
        width:var(--fa-sidebar-expanded)!important;
        max-width:var(--fa-sidebar-expanded)!important;
        padding-left:12px!important;
        padding-right:12px!important;
        transition:
            width var(--fa-sidebar-motion) ease,
            padding var(--fa-sidebar-motion) ease,
            box-shadow var(--fa-sidebar-motion) ease!important
    }

    .ui-v181 .main{
        margin-left:var(--fa-sidebar-expanded)!important;
        width:calc(100% - var(--fa-sidebar-expanded))!important;
        transition:
            margin-left var(--fa-sidebar-motion) ease,
            width var(--fa-sidebar-motion) ease!important
    }

    .ui-v181 .sidebar .brand{
        position:relative;
        min-height:72px;
        display:flex!important;
        align-items:center;
        gap:9px;
        padding:10px 76px 10px 4px!important
    }

    .desktop-sidebar-controls{
        position:absolute;
        top:50%;
        right:8px;
        z-index:8;
        display:flex;
        align-items:center;
        gap:5px;
        transform:translateY(-50%)
    }

    .desktop-sidebar-pin,
    .desktop-sidebar-toggle{
        width:32px;
        height:32px;
        display:inline-grid;
        place-items:center;
        padding:0;
        border:1px solid rgba(255,255,255,.18);
        border-radius:10px;
        background:rgba(255,255,255,.07);
        color:#e9f8ed;
        cursor:pointer;
        box-shadow:none;
        transition:
            background .16s ease,
            border-color .16s ease,
            transform .16s ease,
            color .16s ease,
            box-shadow .16s ease
    }

    .desktop-sidebar-pin:hover,
    .desktop-sidebar-toggle:hover{
        background:rgba(255,255,255,.14);
        border-color:rgba(255,255,255,.29);
        transform:translateY(-1px)
    }

    .desktop-sidebar-pin:focus-visible,
    .desktop-sidebar-toggle:focus-visible{
        outline:2px solid #d4f5dd;
        outline-offset:2px
    }

    .desktop-sidebar-hamburger{
        width:16px;
        display:grid;
        gap:3px
    }

    .desktop-sidebar-hamburger i{
        display:block;
        height:1.8px;
        border-radius:999px;
        background:currentColor
    }

    .desktop-sidebar-pin-icon{
        width:17px;
        height:17px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
        transform:rotate(-8deg);
        transition:
            fill .16s ease,
            stroke-width .16s ease,
            transform .16s ease
    }

    .desktop-sidebar-pin[aria-pressed="true"]{
        background:#f4fff7;
        border-color:#d8f4df;
        color:#08752d;
        box-shadow:0 5px 12px rgba(2,58,21,.13)
    }

    .desktop-sidebar-pin[aria-pressed="true"] .desktop-sidebar-pin-icon{
        fill:#179c39;
        stroke:#08752d;
        stroke-width:2.2;
        transform:rotate(0deg)
    }

    /* Explicitly neutralise the legacy white/gray navigation cards. */
    .ui-v181 .sidebar [data-nav-group]{
        margin:3px 0!important
    }

    .ui-v181 .sidebar .nav-main{
        min-height:43px!important;
        padding:7px 9px!important;
        border:1px solid transparent!important;
        border-radius:11px!important;
        background:transparent!important;
        color:rgba(255,255,255,.90)!important;
        box-shadow:none!important
    }

    .ui-v181 .sidebar .nav-main:hover,
    .ui-v181 .sidebar .nav-group:not(.is-active).is-open .nav-group-toggle{
        background:rgba(255,255,255,.085)!important;
        border-color:rgba(255,255,255,.06)!important;
        color:#fff!important;
        box-shadow:none!important
    }

    .ui-v181 .sidebar .nav-main.active{
        background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
        border-color:rgba(255,255,255,.13)!important;
        color:#fff!important;
        box-shadow:inset 3px 0 0 rgba(164,240,182,.92)!important
    }

    .ui-v181 .sidebar .nav-main.active::after{
        width:6px!important;
        height:6px!important;
        right:9px!important;
        background:#b7efc5!important;
        box-shadow:0 0 0 2px rgba(255,255,255,.08)!important
    }

    .ui-v181 .sidebar .nav-text{
        color:inherit!important;
        text-shadow:0 1px 0 rgba(0,0,0,.04)
    }

    .ui-v181 .sidebar .nav-submenu{
        margin-top:2px!important
    }

    .ui-v181 .sidebar .nav-submenu .nav-sub{
        min-height:34px!important;
        margin:1px 0!important;
        border-left:2px solid rgba(255,255,255,.15)!important;
        border-radius:0 9px 9px 0!important;
        background:transparent!important;
        color:rgba(255,255,255,.78)!important;
        box-shadow:none!important
    }

    .ui-v181 .sidebar .nav-submenu .nav-sub:hover{
        background:rgba(255,255,255,.075)!important;
        color:#fff!important
    }

    .ui-v181 .sidebar .nav-submenu .nav-sub.active-sub{
        background:rgba(255,255,255,.13)!important;
        color:#fff!important;
        border-left-color:#a7eeb8!important;
        box-shadow:none!important;
        font-weight:800
    }

    .ui-v181 .sidebar .nav-submenu .nav-sub.active-sub::after{
        width:5px!important;
        height:5px!important;
        right:9px!important;
        background:#b8f2c6!important
    }

    .ui-v181 .sidebar .fa-soft-icon{
        width:30px!important;
        height:30px!important;
        border-radius:0!important
    }

    .ui-v181 .sidebar .fa-soft-icon .fa-nav-art{
        width:29px;
        height:29px
    }

    /* Collapsed icon rail. */
    html.fa-sidebar-rail-init .ui-v181 .sidebar,
    .ui-v181.desktop-sidebar-collapsed .sidebar{
        width:var(--fa-sidebar-rail)!important;
        max-width:var(--fa-sidebar-rail)!important;
        padding-left:8px!important;
        padding-right:8px!important;
        overflow-x:hidden!important
    }

    html.fa-sidebar-rail-init .ui-v181 .main,
    .ui-v181.desktop-sidebar-collapsed .main{
        margin-left:var(--fa-sidebar-rail)!important;
        width:calc(100% - var(--fa-sidebar-rail))!important
    }

    html.fa-sidebar-rail-init .ui-v181 .sidebar .brand,
    .ui-v181.desktop-sidebar-collapsed .sidebar .brand{
        min-height:118px;
        display:grid!important;
        grid-template-columns:1fr!important;
        place-items:center;
        align-content:center;
        gap:8px;
        padding:9px 0!important
    }

    html.fa-sidebar-rail-init .ui-v181 .business-brand-copy,
    html.fa-sidebar-rail-init .ui-v181 .menu-label,
    html.fa-sidebar-rail-init .ui-v181 .nav-text,
    html.fa-sidebar-rail-init .ui-v181 .nav-chevron,
    html.fa-sidebar-rail-init .ui-v181 .nav-submenu,
    html.fa-sidebar-rail-init .ui-v181 .mobile-drawer-footer,
    .ui-v181.desktop-sidebar-collapsed .business-brand-copy,
    .ui-v181.desktop-sidebar-collapsed .menu-label,
    .ui-v181.desktop-sidebar-collapsed .nav-text,
    .ui-v181.desktop-sidebar-collapsed .nav-chevron,
    .ui-v181.desktop-sidebar-collapsed .nav-submenu,
    .ui-v181.desktop-sidebar-collapsed .mobile-drawer-footer{
        display:none!important
    }

    html.fa-sidebar-rail-init .ui-v181 .sidebar .brand .business-brand-logo,
    .ui-v181.desktop-sidebar-collapsed .sidebar .brand .business-brand-logo{
        width:42px!important;
        height:42px!important;
        flex:0 0 42px!important;
        margin:0!important
    }

    html.fa-sidebar-rail-init .ui-v181 .desktop-sidebar-controls,
    .ui-v181.desktop-sidebar-collapsed .desktop-sidebar-controls{
        position:static;
        transform:none;
        display:flex;
        justify-content:center;
        gap:5px
    }

    html.fa-sidebar-rail-init .ui-v181 [data-nav-group],
    .ui-v181.desktop-sidebar-collapsed [data-nav-group]{
        margin:3px 0!important
    }

    html.fa-sidebar-rail-init .ui-v181 .nav-main,
    .ui-v181.desktop-sidebar-collapsed .nav-main{
        position:relative;
        width:50px!important;
        min-width:50px!important;
        max-width:50px!important;
        min-height:48px!important;
        height:48px!important;
        margin:0 auto!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border-radius:13px!important;
        background:transparent!important;
        box-shadow:none!important
    }

    html.fa-sidebar-rail-init .ui-v181 .nav-main:hover,
    .ui-v181.desktop-sidebar-collapsed .nav-main:hover{
        background:rgba(255,255,255,.09)!important
    }

    html.fa-sidebar-rail-init .ui-v181 .nav-main.active,
    .ui-v181.desktop-sidebar-collapsed .nav-main.active{
        background:rgba(255,255,255,.12)!important;
        border-color:rgba(255,255,255,.10)!important;
        box-shadow:inset 3px 0 0 #a4efb6!important
    }

    html.fa-sidebar-rail-init .ui-v181 .nav-main .fa-soft-icon,
    .ui-v181.desktop-sidebar-collapsed .nav-main .fa-soft-icon{
        width:34px!important;
        height:34px!important
    }

    html.fa-sidebar-rail-init .ui-v181 .nav-main .fa-nav-art,
    .ui-v181.desktop-sidebar-collapsed .nav-main .fa-nav-art{
        width:33px!important;
        height:33px!important
    }

    /* Flyout for grouped menus while using the compact rail. */
    .desktop-sidebar-flyout{
        position:fixed;
        z-index:220;
        width:238px;
        max-width:calc(100vw - 100px);
        padding:9px;
        border:1px solid #dce6df;
        border-radius:15px;
        background:rgba(255,255,255,.985);
        color:#26352c;
        box-shadow:0 18px 45px rgba(17,39,24,.18);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px)
    }

    .desktop-sidebar-flyout.is-open{display:block}

    .desktop-sidebar-flyout-title{
        padding:7px 9px 9px;
        color:#66766c;
        font-size:8px;
        font-weight:900;
        letter-spacing:.055em;
        text-transform:uppercase
    }

    .desktop-sidebar-flyout a{
        min-height:40px;
        display:flex;
        align-items:center;
        padding:8px 10px;
        border-radius:10px;
        color:#2d3c33;
        text-decoration:none;
        font-size:10px;
        font-weight:700
    }

    .desktop-sidebar-flyout a:hover{
        background:#eef8f1;
        color:#08752d
    }

    .desktop-sidebar-flyout a.active{
        background:#e4f6e9;
        color:#08752d
    }

    .desktop-sidebar-flyout a+a{margin-top:2px}

    .desktop-sidebar-flyout::before{
        content:"";
        position:absolute;
        left:-6px;
        top:21px;
        width:10px;
        height:10px;
        border-left:1px solid #dce6df;
        border-bottom:1px solid #dce6df;
        background:#fff;
        transform:rotate(45deg)
    }
}

@media(prefers-reduced-motion:reduce){
    .ui-v181 .sidebar,
    .ui-v181 .main,
    .desktop-sidebar-pin-icon{
        transition:none!important
    }
}


/* =====================================================================
   finApp V18.2.1 — Header Alignment Polish
   - desktop page label removed to avoid duplicating the content heading;
   - desktop quick actions align to the left edge of the workspace;
   - account / role context remains anchored at the right;
   - mobile header keeps the compact page title for orientation;
   - V18.2.0 role dropdown, toast, and busy-button primitives retained.
   Business logic and V18.1.2 sidebar behavior remain unchanged.
   ===================================================================== */

.ui-v182 .desktop-page-context{
    display:none!important
}

.ui-v182 .top-user{
    position:relative;
    min-width:0
}

.ui-v182 .top-user-profile{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    max-width:100%;
    padding:4px 8px 4px 5px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease
}

.ui-v182 .top-user-profile:hover,
.ui-v182 .top-user.is-open .top-user-profile{
    border-color:#e1e8e3;
    background:#f8fbf9;
    box-shadow:0 4px 12px rgba(17,39,24,.045)
}

.ui-v182 .top-user-profile:focus-visible{
    outline:2px solid rgba(23,156,57,.32);
    outline-offset:2px
}

.ui-v182 .top-user-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px
}

.ui-v182 .top-user-copy strong{
    max-width:126px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#25352b;
    font-size:10px;
    line-height:1.25
}

.ui-v182 .top-user-copy small{
    color:#7a8980;
    font-size:8px;
    line-height:1.2
}

.ui-v182 .top-user-role-badge{
    min-height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:4px 7px;
    border:1px solid #dde6df;
    border-radius:999px;
    background:#f5f7f6;
    color:#56635b;
    font-size:7.5px;
    font-weight:900;
    letter-spacing:.025em;
    line-height:1;
    white-space:nowrap
}

.ui-v182 .top-user-role-badge.role-owner{
    border-color:#eadba3;
    background:#fff8df;
    color:#765d07
}

.ui-v182 .top-user-role-badge.role-admin{
    border-color:#ceddf4;
    background:#eef5ff;
    color:#315d9c
}

.ui-v182 .top-user-role-badge.role-staff{
    border-color:#cfe8d6;
    background:#eef9f1;
    color:#147036
}

.ui-v182 .top-user-role-badge.role-viewer,
.ui-v182 .top-user-role-badge.role-user{
    border-color:#dce2df;
    background:#f5f7f6;
    color:#647168
}

.ui-v182 .top-user-role-icon{
    width:13px;
    height:13px;
    display:inline-grid;
    place-items:center;
    flex:0 0 13px
}

.ui-v182 .top-user-role-icon svg,
.ui-v182 .top-user-dropdown-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.ui-v182 .top-user-chevron{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-right:1.7px solid #7b8981;
    border-bottom:1.7px solid #7b8981;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .16s ease
}

.ui-v182 .top-user.is-open .top-user-chevron{
    transform:rotate(225deg) translate(-1px,-1px)
}

.ui-v182 .top-user-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:260;
    width:252px;
    max-width:calc(100vw - 24px);
    padding:8px;
    border:1px solid #dfe7e1;
    border-radius:15px;
    background:rgba(255,255,255,.99);
    box-shadow:0 22px 52px rgba(17,39,24,.16);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px)
}

.ui-v182 .top-user-dropdown[hidden]{
    display:none!important
}

.ui-v182 .top-user-dropdown-head{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:7px 7px 9px
}

.ui-v182 .top-user-dropdown-head>.avatar{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important
}

.ui-v182 .top-user-dropdown-head>div:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px
}

.ui-v182 .top-user-dropdown-head strong{
    max-width:165px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#24342a;
    font-size:11px
}

.ui-v182 .top-user-dropdown-divider{
    height:1px;
    margin:4px 2px;
    background:#e8ede9
}

.ui-v182 .top-user-dropdown-item{
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 9px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#33443a;
    font:inherit;
    font-size:9px;
    font-weight:750;
    line-height:1.25;
    text-align:left;
    text-decoration:none;
    cursor:pointer
}

.ui-v182 .top-user-dropdown-item:hover,
.ui-v182 .top-user-dropdown-item:focus-visible{
    background:#eef8f1;
    color:#08752d;
    outline:0
}

.ui-v182 .top-user-dropdown-item.is-danger{
    color:#a83f38
}

.ui-v182 .top-user-dropdown-item.is-danger:hover,
.ui-v182 .top-user-dropdown-item.is-danger:focus-visible{
    background:#fff2f0;
    color:#b43730
}

.ui-v182 .top-user-dropdown-icon{
    width:18px;
    height:18px;
    display:inline-grid;
    place-items:center;
    flex:0 0 18px
}

.ui-v182 .top-user-dropdown-icon>svg{
    width:17px!important;
    height:17px!important
}

.ui-v182 .top-user-logout-form{
    margin:0
}

/* Shared feedback primitives. */
.ui-v182 #toast-root.toast-root{
    position:fixed;
    top:72px;
    right:18px;
    z-index:5000;
    width:min(360px,calc(100vw - 36px));
    display:flex;
    flex-direction:column;
    gap:8px;
    pointer-events:none
}

.ui-v182 .v182-toast{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:start;
    gap:8px;
    padding:11px 12px;
    border:1px solid #dfe7e1;
    border-left-width:4px;
    border-radius:12px;
    background:#fff;
    color:#2e3d34;
    box-shadow:0 14px 34px rgba(17,39,24,.13);
    font-size:9px;
    line-height:1.45;
    pointer-events:auto;
    animation:v182ToastIn .18s ease both
}

.ui-v182 .v182-toast--success{border-left-color:#179c39}
.ui-v182 .v182-toast--error{border-left-color:#c63b32}
.ui-v182 .v182-toast--warning{border-left-color:#e88812}
.ui-v182 .v182-toast--info{border-left-color:#2f74db}

.ui-v182 .v182-toast-mark{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1f5f2;
    font-weight:900
}

.ui-v182 .v182-toast--success .v182-toast-mark{background:#eaf8ee;color:#0f8a35}
.ui-v182 .v182-toast--error .v182-toast-mark{background:#fff0ee;color:#c63b32}
.ui-v182 .v182-toast--warning .v182-toast-mark{background:#fff3df;color:#b96a08}
.ui-v182 .v182-toast--info .v182-toast-mark{background:#edf4ff;color:#2f74db}

.ui-v182 .v182-toast.is-leaving{
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease,transform .18s ease
}

.ui-v182 .v182-busy{
    pointer-events:none;
    opacity:.74
}

.ui-v182 .v182-spinner{
    width:14px;
    height:14px;
    display:inline-block;
    flex:0 0 14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:v182Spin .65s linear infinite
}

@keyframes v182Spin{to{transform:rotate(360deg)}}
@keyframes v182ToastIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1200px){
    .ui-v182 .topbar.topbar-utility{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        align-items:center!important;
        gap:18px!important;
        padding-left:16px!important;
        padding-right:16px!important
    }

    .ui-v182 .topbar-mobile-left{
        display:none!important
    }

    .ui-v182 .desktop-quick-actions{
        justify-self:start!important;
        min-width:0;
        margin-left:0!important
    }

    .ui-v182 .top-user{
        justify-self:end
    }
}

@media(max-width:1199px){
    .ui-v182 .desktop-page-context{
        display:none!important
    }

    .ui-v182 .top-user-role-badge{
        font-size:7px
    }
}

@media(max-width:767px){
    .ui-v182 .top-user-profile{
        width:40px;
        height:40px;
        min-height:40px;
        justify-content:center;
        padding:2px;
        border-color:transparent;
        background:rgba(255,255,255,.12)
    }

    .ui-v182 .top-user-profile:hover,
    .ui-v182 .top-user.is-open .top-user-profile{
        border-color:rgba(255,255,255,.22);
        background:rgba(255,255,255,.18);
        box-shadow:none
    }

    .ui-v182 .top-user-profile .top-user-copy,
    .ui-v182 .top-user-profile .top-user-role-badge,
    .ui-v182 .top-user-profile .top-user-chevron{
        display:none!important
    }

    .ui-v182 .top-user-profile .avatar{
        width:32px!important;
        height:32px!important;
        flex-basis:32px!important
    }

    .ui-v182 .top-user-dropdown{
        position:fixed;
        top:62px;
        right:10px;
        width:min(260px,calc(100vw - 20px))
    }

    .ui-v182 #toast-root.toast-root{
        top:auto;
        right:12px;
        bottom:calc(var(--v18-bottom-nav,70px) + 12px);
        width:calc(100vw - 24px)
    }
}

@media(prefers-reduced-motion:reduce){
    .ui-v182 .top-user-profile,
    .ui-v182 .top-user-chevron,
    .ui-v182 .v182-toast,
    .ui-v182 .v182-spinner{
        transition:none!important;
        animation:none!important
    }
}


/* =====================================================================
   finApp V18.2.2 — Typography & Readability Polish
   - raises the visual type scale by roughly 2px across the application;
   - preserves information hierarchy instead of applying one blunt size;
   - slightly increases line-height and control/table breathing room;
   - leaves V18.2.1 header alignment and V18.1.2 sidebar behavior intact.
   Business logic and database schema remain unchanged.
   ===================================================================== */

:root{
    --fa-type-2xs:10px;
    --fa-type-xs:11px;
    --fa-type-sm:12px;
    --fa-type-meta:13px;
    --fa-type-base:15px;
    --fa-type-control:15px;
    --fa-type-table:14px;
    --fa-type-table-head:12px;
    --fa-type-nav:13px;
    --fa-type-subnav:12px;
    --fa-type-h1:28px;
    --fa-type-h2:23px;
    --fa-type-h3:19px;
}

.ui-v1822{
    font-size:var(--fa-type-base);
    line-height:1.5
}

.ui-v1822 .content{
    font-size:var(--fa-type-base);
    line-height:1.5
}

/* Page hierarchy ------------------------------------------------------ */
.ui-v1822 .content h1{
    font-size:var(--fa-type-h1);
    line-height:1.18
}

.ui-v1822 .content h2{
    font-size:var(--fa-type-h2);
    line-height:1.22
}

.ui-v1822 .content h3{
    font-size:var(--fa-type-h3);
    line-height:1.28
}

.ui-v1822 .content p,
.ui-v1822 .content li{
    line-height:1.55
}

.ui-v1822 .content small,
.ui-v1822 .muted,
.ui-v1822 .text-muted{
    font-size:var(--fa-type-sm)
}

/* Sidebar ------------------------------------------------------------- */
.ui-v1822 .sidebar .menu-label{
    font-size:10.5px;
    line-height:1.3
}

.ui-v1822 .sidebar .nav-main{
    font-size:var(--fa-type-nav);
    line-height:1.3
}

.ui-v1822 .sidebar .nav-submenu .nav-sub{
    font-size:var(--fa-type-subnav);
    line-height:1.35
}

.ui-v1822 .desktop-sidebar-flyout-title{
    font-size:10px
}

.ui-v1822 .desktop-sidebar-flyout a{
    font-size:12px;
    line-height:1.35
}

/* Desktop header ------------------------------------------------------ */
.ui-v1822 .quick-action,
.ui-v1822 .quick-menu-toggle{
    min-height:42px;
    padding:7px 11px 7px 8px;
    font-size:11px;
    line-height:1.25
}

.ui-v1822 .quick-menu-panel{
    font-size:12px
}

.ui-v1822 .quick-menu-panel .quick-menu-label{
    font-size:10px;
    line-height:1.3
}

.ui-v1822 .quick-menu-panel a strong{
    font-size:12px;
    line-height:1.35
}

.ui-v1822 .quick-menu-panel a small{
    font-size:11px;
    line-height:1.4
}

.ui-v1822 .top-user-copy strong{
    font-size:12px;
    line-height:1.3
}

.ui-v1822 .top-user-copy small{
    font-size:10px;
    line-height:1.25
}

.ui-v1822 .top-user-role-badge{
    min-height:27px;
    padding:5px 8px;
    font-size:9.5px;
    line-height:1
}

.ui-v1822 .top-user-dropdown-head strong{
    font-size:13px
}

.ui-v1822 .top-user-dropdown-item{
    min-height:42px;
    padding:9px 10px;
    font-size:11px;
    line-height:1.35
}

/* Forms and controls -------------------------------------------------- */
.ui-v1822 .form-control,
.ui-v1822 .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-v1822 .content select,
.ui-v1822 .content textarea{
    font-size:var(--fa-type-control);
    line-height:1.4
}

.ui-v1822 .form-control,
.ui-v1822 .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-v1822 .content select{
    min-height:44px
}

.ui-v1822 .content textarea{
    min-height:92px
}

.ui-v1822 .content label,
.ui-v1822 .form-label{
    font-size:13px;
    line-height:1.4
}

.ui-v1822 .button,
.ui-v1822 .content button:not(.icon-button):not(.mobile-menu-button):not(.desktop-sidebar-toggle):not(.desktop-sidebar-pin){
    font-size:14px;
    line-height:1.3
}

/* Data tables --------------------------------------------------------- */
.ui-v1822 .content table{
    font-size:var(--fa-type-table);
    line-height:1.45
}

.ui-v1822 .content table thead th{
    font-size:var(--fa-type-table-head);
    line-height:1.35
}

.ui-v1822 .content table tbody td{
    font-size:var(--fa-type-table);
    line-height:1.45
}

.ui-v1822 .content table tbody td small{
    font-size:var(--fa-type-sm);
    line-height:1.4
}

/* Badges / chips keep hierarchy while becoming readable. */
.ui-v1822 :is(.finance-badge,.stock-badge,.sales-badge,.sale-type-pill){
    font-size:11px!important;
    line-height:1.2!important
}

/* Shared feedback ----------------------------------------------------- */
.ui-v1822 .v182-toast{
    font-size:11px;
    line-height:1.5
}

.ui-v1822 .app-footer{
    font-size:11.5px;
    line-height:1.45
}

/* Mobile keeps the same hierarchy, only removes the tiny text problem. */
@media(max-width:767px){
    .ui-v1822 .topbar-mobile-context strong{
        font-size:15px!important;
        line-height:1.25!important
    }

    .ui-v1822 .mobile-bottom-item>span:last-child{
        font-size:10.5px;
        line-height:1.2
    }

    .ui-v1822 .sale-line::before{
        font-size:13px
    }

    .ui-v1822 .sale-line label>span{
        font-size:11px!important;
        line-height:1.35!important
    }

    .ui-v1822 .sale-stock-hint{
        font-size:11px!important;
        line-height:1.45
    }

    .ui-v1822 .sale-form-note{
        font-size:11px!important;
        line-height:1.5
    }

    .ui-v1822 .sale-total-preview .grand strong{
        font-size:16px!important
    }

    .ui-v1822 table.mobile-card-table tbody td{
        font-size:13.5px!important;
        line-height:1.45
    }

    .ui-v1822 table.mobile-card-table tbody td::before{
        font-size:11px
    }

    .ui-v1822 .top-user-dropdown-item{
        font-size:12px
    }

    .ui-v1822 .top-user-dropdown-head strong{
        font-size:14px
    }

    .ui-v1822 .app-footer{
        font-size:11px
    }
}


/* =====================================================================
   finApp V18.2.3 — Meta Text Readability Follow-up
   - raises small/meta/supporting text by about 2px in content areas;
   - targets recurring secondary text types such as activity subtitles,
     item type labels, helper/meta text, and date stamps;
   - leaves navigation/header structure and business logic unchanged.
   ===================================================================== */

.ui-v1823{
    --fa-type-sm:14px;
    --fa-type-meta:15px
}

.ui-v1823 .content small,
.ui-v1823 .muted,
.ui-v1823 .text-muted{
    font-size:var(--fa-type-sm);
    line-height:1.5
}

.ui-v1823 .content table tbody td small{
    font-size:13.5px;
    line-height:1.5
}

.ui-v1823 .content :is(.meta,.item-meta,.activity-meta,.list-meta,.card-meta,.timeline-meta,.date-meta,.entry-meta,.subtitle,.subtext,.helper-text,.section-note){
    font-size:var(--fa-type-meta);
    line-height:1.45
}

.ui-v1823 .content :is(.activity-item,.timeline-item,.list-item,.feed-item) small,
.ui-v1823 .content :is(.activity-item,.timeline-item,.list-item,.feed-item) time,
.ui-v1823 .content :is(.activity-item,.timeline-item,.list-item,.feed-item) .date,
.ui-v1823 .content :is(.activity-item,.timeline-item,.list-item,.feed-item) .timestamp{
    font-size:var(--fa-type-sm);
    line-height:1.45
}

@media(max-width:767px){
    .ui-v1823 .content small,
    .ui-v1823 .muted,
    .ui-v1823 .text-muted{
        font-size:13.5px;
        line-height:1.48
    }
}


/* =====================================================================
   finApp V18.2.4 — Strong Secondary Text Readability
   User feedback: V18.2.3 was still visually too small.
   This follow-up deliberately makes secondary/meta copy visibly larger,
   and uses stronger selectors so older component rules cannot suppress it.
   Navigation, layout structure, permissions and business logic unchanged.
   ===================================================================== */

.ui-v1824{
    --fa-type-secondary:15px;
    --fa-type-meta-strong:14px;
    --fa-type-meta-compact:13.5px
}

/* General supporting copy under headings / section titles. */
.ui-v1824 .content small,
.ui-v1824 .content .muted,
.ui-v1824 .content .text-muted,
.ui-v1824 .content :is(p,span,div)[class*="subtitle"],
.ui-v1824 .content :is(p,span,div)[class*="subtext"],
.ui-v1824 .content :is(p,span,div)[class*="helper"],
.ui-v1824 .content :is(p,span,div)[class*="description"],
.ui-v1824 .content :is(p,span,div)[class*="caption"]{
    font-size:var(--fa-type-secondary)!important;
    line-height:1.5!important
}

/* Metadata such as "Proyek · Buat", status/category labels and timestamps. */
.ui-v1824 .content time,
.ui-v1824 .content :is(span,p,div,strong)[class*="meta"],
.ui-v1824 .content :is(span,p,div,strong)[class*="date"],
.ui-v1824 .content :is(span,p,div,strong)[class*="timestamp"],
.ui-v1824 .content :is(span,p,div,strong)[class*="activity-type"],
.ui-v1824 .content :is(span,p,div,strong)[class*="activity-label"],
.ui-v1824 .content :is(span,p,div,strong)[class*="event-type"],
.ui-v1824 .content :is(span,p,div,strong)[class*="event-label"]{
    font-size:var(--fa-type-meta-strong)!important;
    line-height:1.45!important
}

/* Activity / timeline / feed components: force tiny labels and dates upward. */
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) :is(small,time),
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) :is(span,p,strong)[class*="meta"],
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) :is(span,p,strong)[class*="date"],
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) :is(span,p,strong)[class*="time"]{
    font-size:var(--fa-type-meta-strong)!important;
    line-height:1.45!important
}

/* If the component uses bare small text without semantic classes, this catches it. */
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) > :is(small,time),
.ui-v1824 .content :is([class*="activity"],[class*="timeline"],[class*="feed"],[class*="event"]) > * > :is(small,time){
    font-size:var(--fa-type-meta-strong)!important
}

/* Table secondary rows remain compact but no longer tiny. */
.ui-v1824 .content table tbody td small,
.ui-v1824 .content table tbody td .muted,
.ui-v1824 .content table tbody td .text-muted{
    font-size:var(--fa-type-meta-compact)!important;
    line-height:1.45!important
}

@media(max-width:767px){
    .ui-v1824{
        --fa-type-secondary:14.5px;
        --fa-type-meta-strong:13.5px;
        --fa-type-meta-compact:13px
    }
}