/* ===================================================================
   ASG client portal — modern dashboard design system
   Full rebuild. Vanilla CSS with custom properties.
   =================================================================== */

:root {
    --brand:        #008b3e;
    --brand-light:  #6bb53f;
    --brand-dark:   #00461f;
    --bg:           #eceef0;
    --surface:      #ffffff;
    --surface-2:    #f5f7f6;
    --text:         #14201a;
    --text-soft:    #3a4842;
    --text-mute:    #54635b;
    --border:       #e4e8e6;
    --border-soft:  #eef1ef;
    --danger:       #d23b3b;
    --danger-soft:  #fdecec;
    --pos:          #0a7c3c;
    --pos-soft:     #e9f6ef;
    --neg:          #c0392b;
    --neg-soft:     #fdecec;
    --radius:       18px;
    --radius-sm:    12px;
    --shadow:       0 2px 6px rgba(16,40,28,.05), 0 22px 48px -26px rgba(16,40,28,.30);
    --shadow-sm:    0 1px 3px rgba(16,40,28,.06), 0 10px 24px -18px rgba(16,40,28,.25);
    --font:         'Montserrat','Helvetica Neue',Arial,sans-serif;
}

/* ---- hide the legacy chrome; the portal renders its own ---- */
#top-menu, #bottom-footer, .nav-bar-switcher, #sidebar, #sidebar-wrapper { display: none !important; }

.px-app * { box-sizing: border-box; }
body { background: var(--bg) !important; }
.px-app {
    font-family: var(--font);
    color: var(--text);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    max-width: 1800px;
    margin: 0 auto;
    padding: 22px 22px 56px;
    transition: padding-top .34s cubic-bezier(.3,.7,.2,1);
}
.px-app a { text-decoration: none; }

/* =================== HERO =================== */
.px-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 26px 32px 30px;
    color: #fff;
    background:
        radial-gradient(680px 320px at 88% -40%, rgba(107,181,63,.55), transparent 70%),
        linear-gradient(125deg, #00431e 0%, #007a37 55%, #00592b 100%);
    box-shadow: var(--shadow);
}
.px-hero__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.px-hero__logo { height: 40px; width: auto; }
.px-hero__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.px-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 11px;
    padding: 12px 40px 12px 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    max-width: 320px;
}
.px-select:hover { background-color: rgba(255,255,255,.18); }
.px-select option { color: #14201a; font-weight: 500; }
.px-select optgroup {
    color: #00592b;
    font-weight: 800;
    font-style: normal;
    background: #f4f7f5;
}
.px-select--addr { max-width: 360px; }

.px-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border: 0;
    transition: transform .14s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.px-btn svg { width: 16px; height: 16px; }
.px-btn:hover { transform: translateY(-2px); }
.px-btn--solid { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.px-btn--solid:hover { filter: brightness(.97); }
.px-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.px-btn--ghost:hover { background: rgba(255,255,255,.2); }

.px-hero__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.px-hero__greet { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin: 0 0 4px; }
.px-hero__name { font-size: 30px; font-weight: 800; margin: 0 0 14px; letter-spacing: .2px; }
.px-hero__chips { display: flex; gap: 9px; flex-wrap: wrap; }
.px-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,.92);
}
.px-chip b { font-weight: 800; color: #fff; }
.px-hero__balance {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    padding: 14px 22px;
    text-align: right;
    backdrop-filter: blur(3px);
}
.px-hero__balance span { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 3px; }
.px-hero__balance strong { font-size: 30px; font-weight: 800; letter-spacing: .3px; }

/* =================== STICKY HEADER (on scroll) =================== */
.px-stickbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1500;
    background:
        radial-gradient(420px 160px at 92% -120%, rgba(107,181,63,.5), transparent 70%),
        linear-gradient(120deg, #00431e, #007a37);
    box-shadow: 0 8px 26px rgba(16,40,28,.26);
    transform: translateY(-100%);
    transition: transform .34s cubic-bezier(.3,.7,.2,1);
}
.px-stickbar.is-on { transform: translateY(0); }
.px-stickbar__in {
    max-width: 1800px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 11px 30px;
}
.px-stickbar__logo { height: 30px; width: auto; }
.px-stickbar__name { font-size: 15.5px; font-weight: 800; color: #fff; }
.px-stickbar__sp { flex: 1; }
.px-stickbar__chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 5px 13px;
    white-space: nowrap;
}
.px-stickbar__chip b { font-weight: 800; color: #fff; }
@media (max-width: 880px) { .px-stickbar__chip { display: none; } }
.px-stickbar__bal {
    font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px; padding: 7px 16px;
}
.px-stickbar__bal b { font-size: 16px; font-weight: 800; color: #fff; margin-left: 6px; }
@media (max-width: 720px) {
    .px-stickbar__in { padding: 9px 16px; gap: 10px; }
    .px-stickbar__name { font-size: 13.5px; }
    .px-stickbar__bal { font-size: 12px; padding: 6px 12px; }
    .px-stickbar__bal b { font-size: 13.5px; }
}

/* =================== compact top bar (experiment — $pxCompact) =================== */
.px-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
    border-radius: 0;
    background:
        radial-gradient(560px 200px at 94% -60%, rgba(107,181,63,.5), transparent 70%),
        linear-gradient(120deg, #00431e, #007a37 70%, #00592b);
    box-shadow: 0 3px 16px -6px rgba(8,40,22,.5);
}
.px-topbar__in { display: flex; align-items: center; gap: 12px; padding: 10px 22px; min-height: 58px; }
.px-topbar-spacer { height: 60px; }   /* reserves flow space under the fixed bar */
.px-topbar__logo { height: 30px; width: auto; display: block; }
.px-topbar__sp { flex: 1 1 auto; }

/* building switch button (left) */
.px-bldg {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 40vw;
    padding: 8px 12px; border-radius: 11px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .16s ease;
}
.px-bldg:hover, .px-bldg:focus, .px-bldg[aria-expanded="true"] { background: rgba(255,255,255,.22); outline: none; }
.px-bldg--static { cursor: default; background: rgba(255,255,255,.1); }
.px-bldg__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-bldg__sw { width: 16px; height: 16px; flex: 0 0 auto; opacity: .9; }

/* who (right): name + balance */
.px-topbar__who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 0; }
.px-topbar__name { font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.px-topbar__bal { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); white-space: nowrap; }
.px-topbar__bal--extra { color: rgba(255,255,255,.72); }

/* profile button (avatar + chevron) */
.px-profile {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); cursor: pointer; transition: background .16s ease;
}
.px-profile:hover, .px-profile:focus, .px-profile[aria-expanded="true"] { background: rgba(255,255,255,.22); outline: none; }
.px-profile__av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--brand-dark, #00461f); font-size: 13px; font-weight: 800; }
.px-profile__chev { width: 16px; height: 16px; color: #fff; opacity: .85; transition: transform .2s ease; }
.px-profile[aria-expanded="true"] .px-profile__chev { transform: rotate(180deg); }

/* profile dropdown */
.px-pop {
    position: fixed; top: 70px; right: 24px; z-index: 2200; width: 280px; max-width: calc(100vw - 24px);
    background: var(--surface); border-radius: 16px; border: 1px solid var(--border-soft, #e6ece8);
    box-shadow: 0 24px 56px -16px rgba(8,20,14,.4); overflow: hidden;
    opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease;
}
.px-pop[hidden] { display: none; }
.px-pop.is-open { opacity: 1; transform: translateY(0); }
.px-pop__head { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface-2, #f1f5f3); }
.px-pop__av { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; font-size: 15px; font-weight: 800; }
.px-pop__id { min-width: 0; }
.px-pop__name { display: block; font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-pop__bal { display: block; font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.px-pop__bal b { color: var(--brand); }
.px-pop__rows { padding: 4px 16px; }
.px-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f0f3f1; }
.px-pop__row:last-child { border-bottom: 0; }
.px-pop__lbl { font-size: 12.5px; color: var(--text-mute); font-weight: 600; }
.px-pop__val { font-size: 13px; font-weight: 800; color: var(--text); }
.px-pop__acts { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.px-pop__act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 11px; background: var(--surface-2, #f1f5f3); color: var(--text); font-family: var(--font); font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .14s ease; }
.px-pop__act:hover, .px-pop__act:focus { background: #e7ece9; outline: none; }
.px-pop__act svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-soft); }
.px-pop__act--danger { color: var(--neg, #c0392b); }
.px-pop__act--danger svg { color: var(--neg, #c0392b); }
.px-pop__act--danger:hover { background: #fdecec; }

/* address switcher */
.px-switch { position: fixed; inset: 0; z-index: 2300; display: flex; align-items: flex-start; justify-content: center; padding: 68px 16px 16px; }
.px-switch[hidden] { display: none; }
.px-switch__backdrop { position: absolute; inset: 0; background: rgba(8,18,12,.45); opacity: 0; transition: opacity .22s ease; }
.px-switch.is-open .px-switch__backdrop { opacity: 1; }
.px-switch__panel { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 84px); display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px -18px rgba(16,40,28,.5); overflow: hidden; transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .24s cubic-bezier(.2,.7,.2,1), opacity .24s ease; }
.px-switch.is-open .px-switch__panel { transform: translateY(0) scale(1); opacity: 1; }
.px-switch__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft, #e6ece8); }
.px-switch__title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.px-switch__close { width: 36px; height: 36px; min-width: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.px-switch__close svg { width: 18px; height: 18px; flex: 0 0 auto; }
.px-switch__body { padding: 8px 10px 12px; overflow-y: auto; }
.px-switch__group { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-mute); padding: 12px 10px 6px; }
.px-switch__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer; font-family: var(--font); transition: background .14s ease, border-color .14s ease; }
.px-switch__item:hover, .px-switch__item:focus { background: var(--surface-2, #f1f5f3); outline: none; }
.px-switch__item.is-current { background: var(--pos-soft, #e8f6ee); border-color: rgba(10,124,60,.25); }
.px-switch__ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--surface-2, #eef2f0); color: var(--brand); }
.px-switch__item.is-current .px-switch__ic { background: #fff; }
.px-switch__ic svg { width: 19px; height: 19px; }
.px-switch__lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.px-switch__l1 { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-switch__l2 { font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.px-switch__chk { flex: 0 0 auto; color: var(--brand); width: 20px; height: 20px; }
.px-switch__chk svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
    .px-pop { right: 12px; left: 12px; width: auto; }
    .px-topbar__name { max-width: 26vw; }
    .px-bldg { max-width: 40vw; }
}
@media (max-width: 600px) {
    /* phones: hamburger + building name (fills the row) + compact avatar. name & balance live
       in the profile dropdown; logo + chevron are dropped so the building name can actually read */
    .px-topbar__who { display: none; }
    .px-topbar__sp { display: none; }
    .px-logolink.px-topbar__logolink { display: none; }
    .px-profile__chev { display: none; }
    .px-profile { padding: 4px; }
    .px-topbar__in { gap: 9px; padding: 9px 12px; }
    .px-bldg { flex: 1 1 auto; max-width: none; }
}

/* =================== SHELL =================== */
.px-shell { display: grid; grid-template-columns: 244px 1fr; gap: 22px; margin-top: 22px; align-items: start; }

/* ---- sidebar nav ---- */
.px-nav {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
}
.px-nav__label {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--text-mute);
    padding: 10px 12px 7px;
}
.px-nav__item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; text-align: left;
    border: 0; background: none; cursor: pointer;
    font-family: var(--font); font-size: 13.5px; font-weight: 600;
    color: var(--text-soft);
    padding: 11px 12px; margin-bottom: 2px;
    border-radius: 11px;
    transition: background .16s ease, color .16s ease;
    line-height: 1.35;
    white-space: normal;
}
.px-nav__item:hover { background: var(--surface-2); color: var(--text); }
.px-nav__item.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; box-shadow: 0 10px 20px -12px rgba(0,139,62,.7); }
.px-nav__ico {
    flex: 0 0 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--surface-2); color: var(--brand);
    transition: background .16s ease, color .16s ease;
}
.px-nav__item.is-active .px-nav__ico { background: rgba(255,255,255,.22); color: #fff; }
.px-nav__ico svg { width: 16px; height: 16px; }
.px-nav__txt { flex: 1; min-width: 0; word-break: break-word; overflow-wrap: anywhere; white-space: normal; }

/* =================== PANELS =================== */
.px-main { min-width: 0; }
.px-panel { display: none; }
.px-panel.is-active { display: block; animation: px-fade-soft .32s ease both; }
@keyframes px-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* opacity-only variant: leaves NO retained transform, so position:sticky works inside */
@keyframes px-fade-soft { from { opacity: 0; } to { opacity: 1; } }

.px-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px;
    margin-bottom: 20px;
}
.px-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.px-card__title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
.px-card__sub { font-size: 13px; color: var(--text-mute); margin: 3px 0 0; }
.px-pill {
    font-size: 15.5px; font-weight: 800;
    color: var(--brand); background: var(--pos-soft);
    padding: 10px 20px; border-radius: 999px; white-space: nowrap;
}

/* ---- account details grid ---- */
.px-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.px-fact {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    padding: 13px 15px;
}
.px-fact dt { font-size: 11.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.px-fact dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); word-break: break-word; }

/* ---- mini chart ---- */
.px-chart {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 18px 20px 14px;
    margin-bottom: 20px;
}
.px-chart__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.px-chart__title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.px-chart__legend { display: flex; gap: 16px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.px-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.px-chart__plot { display: flex; align-items: flex-end; gap: 14px; height: 150px; overflow-x: auto; padding-bottom: 4px; }
.px-chart__col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 46px; }
.px-chart__bars { display: flex; align-items: flex-end; gap: 5px; height: 118px; }
.px-chart__bar { width: 14px; border-radius: 5px 5px 0 0; min-height: 3px; transition: height .6s cubic-bezier(.2,.7,.2,1); }
.px-chart__bar--in  { background: linear-gradient(180deg, var(--brand-light), var(--brand)); }
.px-chart__bar--out { background: linear-gradient(180deg, #f08a8a, var(--neg)); }
.px-chart__lbl { font-size: 11px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.px-chart__empty { color: var(--text-mute); font-size: 13px; text-align: center; padding: 30px 0; }

/* ---- sub-tabs (transactions / monthly) ---- */
.nav-tabs { border-bottom: 1.6px solid var(--border) !important; margin: 0 0 4px; padding: 0; }
.nav-tabs > li > a {
    border: 0 !important; border-radius: 0 !important;
    margin: 0 2px -1.6px 0 !important;
    padding: 10px 15px !important;
    font-size: 13px !important; font-weight: 700;
    color: var(--text-mute) !important; background: transparent !important;
    border-bottom: 2.5px solid transparent !important;
    transition: color .18s ease, border-color .18s ease;
}
.nav-tabs > li > a:hover { color: var(--brand) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--brand) !important; border-bottom-color: var(--brand) !important; background: transparent !important;
}
.tab-content { padding-top: 16px; }
.tab-content > .tab-pane { animation: px-fade-soft .3s ease both; }

/* =================== TABLES / DataTables =================== */
.dataTables_wrapper { overflow-x: auto; }
.dataTables_wrapper .row { margin-left: 0 !important; margin-right: 0 !important; }
table.table {
    width: 100% !important; margin: 0 0 12px;
    border-collapse: separate; border-spacing: 0;
}
table.table > thead > tr > th {
    background: var(--pos-soft) !important;
    color: var(--brand-dark) !important;
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px;
    border: 0 !important;
    box-shadow: inset 0 -2px 0 rgba(0, 139, 62, .16);   /* thin brand underline ties it to the green theme */
    padding: 13px 12px !important;
    white-space: normal;
    min-width: 104px;
    vertical-align: middle;
}
table.table > thead > tr > th:first-child { border-radius: 9px 0 0 9px; }
table.table > thead > tr > th:last-child  { border-radius: 0 9px 9px 0; }
table.table > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 13px 12px !important;
    font-size: 13.5px;
    font-weight: 500 !important;
    color: var(--text) !important;
    vertical-align: middle; overflow-wrap: break-word;
    min-width: 104px;
}
.px-app .dataTables_wrapper, .px-app .dataTables_filter, .px-app .dataTables_filter label,
.px-app .dataTables_length, .px-app .dataTables_length label, .px-app .dataTables_info,
.px-app .dataTables_paginate, .px-app .dataTables_empty, .px-app .dataTables_filter input,
.px-app .dataTables_length select {
    font-weight: 600;
}
table.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
table.table > tbody > tr:hover > td { background: var(--surface-2); }
table.table .fa-credit-card { color: var(--brand); margin-right: 7px; }
table.table tr.red { background: var(--neg-soft) !important; }
table.table tr.red td { color: var(--neg) !important; border-bottom-color: #f6d6d6 !important; }

#clientTransSum td:nth-child(3), .buildingKulabaTransSum td:nth-child(3),
.MonthlyPaymentsTransSum td:nth-child(3), .liftTransSum td:nth-child(3) {
    color: var(--pos) !important; font-weight: 800; background: var(--pos-soft) !important;
}
#clientTransSum td:nth-child(4), .buildingKulabaTransSum td:nth-child(4),
.MonthlyPaymentsTransSum td:nth-child(4), .liftTransSum td:nth-child(4) {
    color: var(--neg) !important; font-weight: 800; background: var(--neg-soft) !important;
}

.dataTables_filter input, .dataTables_length select {
    border: 1.5px solid var(--border) !important;
    border-radius: 9px !important; padding: 7px 11px !important;
    outline: none; font-family: var(--font); color: var(--text);
}
.dataTables_filter input:focus, .dataTables_length select:focus {
    border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(0,139,62,.12);
}
.dataTables_filter, .dataTables_length, .dataTables_info { color: var(--text-soft); font-size: 12.5px; }
.dataTables_info { padding-top: 14px !important; }
.dataTables_paginate { padding-top: 14px !important; }
.dataTables_paginate .pagination {
    margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 6px;
}
/* the <li> is just a wrapper — the styled control is the <a> inside */
.dataTables_paginate .pagination > li {
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; list-style: none; float: none;
}
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
    display: block; float: none;
    min-width: 40px; text-align: center;
    padding: 9px 13px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: var(--text-soft) !important;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.dataTables_paginate .pagination > li > a:hover {
    background: var(--surface-2) !important; color: var(--brand) !important; border-color: #cfe6d8 !important;
}
.dataTables_paginate .pagination > li.active > a,
.dataTables_paginate .pagination > li.active > a:hover,
.dataTables_paginate .pagination > li.active > span {
    background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
    border-color: var(--brand) !important; color: #fff !important;
}
.dataTables_paginate .pagination > li.disabled > a,
.dataTables_paginate .pagination > li.disabled > span {
    opacity: .45; cursor: default;
    background: #fff !important; color: var(--text-soft) !important;
}
.dataTables_empty { text-align: center !important; color: var(--text-mute) !important; padding: 34px 12px !important; }
.dataTables_processing {
    background: rgba(255,255,255,.7) !important; color: var(--brand);
    border: 0 !important; font-weight: 700;
}

/* =================== responsive =================== */
/* mobile nav-drawer pieces are inert on desktop */
.px-hamburger { display: none; }
.px-nav__drawerhead { display: none; }
.px-nav-overlay { display: none; }

@media (max-width: 1024px) {
    .px-shell { grid-template-columns: 1fr; }

    /* hamburger trigger (lives in the hero bar + the sticky bar) */
    .px-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 44px;
        padding: 0; box-sizing: border-box; min-width: 0;
        border: 1px solid rgba(255,255,255,.28); border-radius: 12px;
        background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
        transition: background .16s ease;
    }
    .px-hamburger:hover, .px-hamburger:focus, .px-hamburger:active { background: rgba(255,255,255,.22); outline: none; }
    .px-hamburger svg { width: 22px; height: 22px; flex: 0 0 auto; }

    /* .px-nav becomes an off-canvas drawer */
    .px-nav {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 286px; max-width: 86vw; height: 100%;
        margin: 0; border-radius: 0 18px 18px 0;
        max-height: none; overflow-y: auto; overflow-x: hidden;
        padding: 14px 12px 28px;
        z-index: 2100;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.3,.7,.2,1);
        box-shadow: 24px 0 60px -16px rgba(8,20,14,.5);
    }
    .px-nav.is-open { transform: translateX(0); }

    /* drawer header (title + close) */
    .px-nav__drawerhead {
        display: flex; align-items: center; justify-content: space-between;
        padding: 4px 4px 12px; margin-bottom: 8px;
        border-bottom: 1px solid var(--border-soft, #e6ece8);
    }
    .px-nav__drawertitle { font-size: 15px; font-weight: 800; color: var(--text); }
    .px-nav__drawerclose {
        width: 40px; height: 40px; min-width: 0; padding: 0; box-sizing: border-box;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); cursor: pointer;
    }
    .px-nav__drawerclose:hover, .px-nav__drawerclose:focus { background: #e2e8e4; outline: none; }
    .px-nav__drawerclose svg { width: 18px; height: 18px; flex: 0 0 auto; }

    .px-nav__label { display: none; }   /* drawer header shows the title instead */
    .px-nav__item { width: 100%; flex: none; margin: 0 0 4px; white-space: normal; min-height: 48px; }

    /* dim overlay behind the drawer */
    .px-nav-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(8,18,12,.5);
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 2090;
    }
    .px-nav-overlay.is-open { opacity: 1; visibility: visible; }

    body.px-nav-open { overflow: hidden; }
}
@media (max-width: 768px) {
    .px-app { padding: 12px 12px 40px; }
    .px-hero { padding: 20px 18px 22px; border-radius: 20px; }
    /* top row: hamburger + logo grouped left; the tools drop to their own full-width row */
    .px-hero__bar { justify-content: flex-start; gap: 12px; margin-bottom: 18px; }
    .px-hero__logo { height: 34px; }
    .px-hero__tools { width: 100%; gap: 8px; }
    /* the account switcher had a fixed 320–360px max-width → caused horizontal overflow on phones */
    .px-select, .px-select--addr { max-width: 100%; width: 100%; min-width: 0; flex: 1 1 100%; }
    .px-hero__tools .px-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
    .px-hero__main { flex-direction: column; align-items: flex-start; gap: 16px; }
    .px-hero__balance { text-align: left; width: 100%; }
    .px-hero__name { font-size: 23px; }
    .px-facts { grid-template-columns: 1fr; }
    .px-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .px-panel.is-active, .tab-content > .tab-pane { animation: none; }
    .px-chart__bar, .px-btn, .px-nav__item { transition: none; }
}

/* =================== analytics dashboard =================== */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.dash-kpi {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 18px 20px;
    animation: px-fade .5s ease both;
}
.dash-kpi__ico {
    flex: 0 0 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--brand);
}
.dash-kpi__ico svg { width: 22px; height: 22px; }
.dash-kpi--in .dash-kpi__ico { background: var(--pos-soft); color: var(--pos); }
.dash-kpi--out .dash-kpi__ico { background: var(--neg-soft); color: var(--neg); }
.dash-kpi--net .dash-kpi__ico { background: #eaf6ef; color: var(--brand); }
.dash-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.dash-kpi__label { font-size: 12px; font-weight: 600; color: var(--text-mute); margin-bottom: 4px; }
.dash-kpi__val { font-size: 21px; font-weight: 800; color: var(--text); white-space: nowrap; }
.dash-kpi--in .dash-kpi__val { color: var(--pos); }
.dash-kpi--out .dash-kpi__val { color: var(--neg); }

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
/* top-months (narrow) + ბოლო აქტივობა (wide) row: ~30% / ~70% on desktop */
.dash-grid--actfeed { grid-template-columns: 3fr 7fr; }
.dash-grid .px-card { margin-bottom: 0; }
.dash-grid + .px-card, .dash-grid ~ .px-card { margin-top: 20px; }
/* vertical gap between stacked grid rows (chart / categories+activity / trend+discipline) */
.dash-grid + .dash-grid { margin-top: 20px; }

/* grouped bars */
.dash-bars { display: flex; align-items: flex-end; gap: 16px; height: 230px; padding-top: 10px; overflow-x: auto; }
.dash-bars__col { flex: 1; min-width: 38px; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; }
.dash-bars__pair { display: flex; align-items: flex-end; gap: 6px; height: 245px; }
.dash-bars__bar { width: 15px; border-radius: 6px 6px 0 0; height: 0; transition: height .9s cubic-bezier(.2,.7,.2,1); min-height: 2px; }
.dash-animate .dash-bars__bar { height: var(--h); }
.dash-bars__bar--in { background: linear-gradient(180deg, var(--brand-light), var(--brand)); }
.dash-bars__bar--out { background: linear-gradient(180deg, #f08a8a, var(--neg)); }
.dash-bars__lbl { font-size: 11px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }

/* donut */
.dash-donut { position: relative; width: 180px; height: 180px; margin: 6px auto 16px; }
.dash-donut__svg { width: 100%; height: 100%; }
.dash-donut__track { stroke: #e9eeeb; }
.dash-donut__seg {
    stroke: #008b3e; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1);
}
.dash-animate .dash-donut__seg { stroke-dashoffset: var(--off, 100); }
.dash-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-donut__pct { font-size: 30px; font-weight: 800; color: var(--brand); }
.dash-donut__cap { font-size: 12px; font-weight: 600; color: var(--text-mute); }
.dash-donut__legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.dash-donut__legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.dash-donut__legend b { color: var(--text); margin-left: 5px; }

/* trend area chart */
.dash-trend { width: 100%; }
.dash-trend__svg { width: 100%; height: 220px; display: block; }
.dash-trend__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s ease; }
.dash-animate .dash-trend__line { stroke-dashoffset: 0; }
.dash-trend__area { opacity: 0; transition: opacity 1s ease .3s; }
.dash-animate .dash-trend__area { opacity: 1; }

/* building snapshot */
.dash-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dash-stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 14px; text-align: center; }
.dash-stat__num { display: block; font-size: 23px; font-weight: 800; color: var(--text); white-space: nowrap; }
.dash-stat__num--neg { color: var(--neg); }
.dash-stat__lbl { font-size: 12px; font-weight: 600; color: var(--text-mute); }

.dash-empty { text-align: center; color: var(--text-mute); font-size: 13.5px; padding: 44px 0; }

@media (max-width: 1100px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    /* minmax(0,1fr) (not plain 1fr) so a card with a nowrap child can't force its
       track wider than the viewport — plain 1fr respects min-content and overflowed */
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-grid > .px-card { margin-bottom: 0; min-width: 0; }
    .dash-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-kpi__val { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-bars__bar, .dash-donut__seg, .dash-trend__line, .dash-trend__area { transition: none; }
    .dash-kpi { animation: none; }
}

/* per-account income breakdown (building dashboard) */
.dash-breakdown { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.dash-pie { position: relative; width: 180px; height: 180px; margin: 4px auto; }
.dash-pie__svg { width: 100%; height: 100%; transform: rotate(0deg); }
.dash-pie__track { stroke: #eef2f0; }
.dash-pie__seg { stroke-linecap: butt; opacity: 0; transition: opacity .5s ease; }
.dash-animate .dash-pie__seg { opacity: 1; }
.dash-pie__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-pie__total { font-size: 30px; font-weight: 800; color: var(--text); }
.dash-pie__cap { font-size: 12px; font-weight: 600; color: var(--text-mute); }

.dash-breakdown__list { display: flex; flex-direction: column; gap: 12px; }
.dash-brow { display: grid; grid-template-columns: 14px minmax(120px, 1.6fr) 2fr auto auto; align-items: center; gap: 12px; }
.dash-brow__dot { width: 12px; height: 12px; border-radius: 4px; }
.dash-brow__name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-brow__bar { height: 9px; border-radius: 999px; background: #eef2f0; overflow: hidden; }
.dash-brow__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.dash-animate .dash-brow__fill { width: var(--w); }
.dash-brow__pct { font-size: 13px; font-weight: 800; color: var(--text); min-width: 38px; text-align: right; }
.dash-brow__val { font-size: 13px; font-weight: 600; color: var(--text-mute); min-width: 86px; text-align: right; white-space: nowrap; }

/* funds-allocation modal: account names are the point here, so give the name its own
   row (wraps in full) with pct + value beside it, and drop the share-bar full-width below */
.dash-breakdown .dash-brow {
    grid-template-columns: 14px 1fr auto auto;
    grid-template-areas: "dot name pct val" "bar bar bar bar";
    align-items: center; row-gap: 9px; column-gap: 12px;
}
.dash-breakdown .dash-brow__dot  { grid-area: dot; align-self: start; margin-top: 4px; }
.dash-breakdown .dash-brow__name { grid-area: name; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.dash-breakdown .dash-brow__pct  { grid-area: pct; }
.dash-breakdown .dash-brow__val  { grid-area: val; }
.dash-breakdown .dash-brow__bar  { grid-area: bar; }

@media (max-width: 860px) {
    .dash-breakdown { grid-template-columns: 1fr; }
    .dash-pie { margin-bottom: 8px; }
    .dash-brow { grid-template-columns: 14px minmax(90px, 1.4fr) 1.6fr auto auto; gap: 9px; }
    .dash-brow__val { min-width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-pie__seg, .dash-brow__fill { transition: none; }
}

/* ===== dashboard v2: big balance, year filter, modal ===== */
/* big clickable funds-balance hero */
.dash-balance {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    text-align: left;
    border: 0; cursor: pointer; font-family: var(--font);
    border-radius: 22px;
    padding: 28px 32px;
    margin-bottom: 18px;
    color: #fff;
    background:
        radial-gradient(520px 220px at 90% -60%, rgba(107,181,63,.5), transparent 70%),
        linear-gradient(125deg, #00431e 0%, #007a37 60%, #00592b 100%);
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.dash-balance:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 26px 54px -22px rgba(0,80,40,.6); }
.dash-balance__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-balance__label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.dash-balance__val { font-size: 44px; font-weight: 800; letter-spacing: .3px; line-height: 1.05; }
.dash-balance__hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); }
.dash-balance__hint svg { width: 15px; height: 15px; }
.dash-balance__ico { flex: 0 0 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); }
.dash-balance__ico svg { width: 32px; height: 32px; }

/* flow KPI row (income / expense / net) */
.dash-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }

/* year select on the chart */
.dash-chart-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.px-select--year {
    color: var(--text); background-color: var(--surface-2);
    border: 1.5px solid var(--border);
    padding: 8px 34px 8px 14px; font-size: 13.5px; max-width: 130px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2354635b' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");
}
.px-select--year:hover { background-color: #eef2f0; }

/* income/expense donut seg — override the legacy single-value seg rules */
#dashDonutSeg, .dash-animate #dashDonutSeg {
    stroke: #008b3e; stroke-linecap: round;
    transform: none; transform-origin: 50% 50%;
    stroke-dashoffset: 25;
    transition: stroke-dasharray .9s cubic-bezier(.2,.7,.2,1);
}

.dash-brow__type { font-weight: 600; color: var(--text-mute); font-size: 11px; margin-left: 4px; }

/* funds allocation modal */
.dash-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--font); color: var(--text); }
.dash-modal[hidden] { display: none; }
.dash-modal__backdrop { position: absolute; inset: 0; background: rgba(16,32,24,.5); opacity: 0; transition: opacity .28s ease; backdrop-filter: blur(2px); }
.dash-modal.is-open .dash-modal__backdrop { opacity: 1; }
.dash-modal__box {
    position: relative; z-index: 1;
    width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
    background: var(--surface); border-radius: 22px;
    box-shadow: 0 30px 70px -20px rgba(16,40,28,.5);
    padding: 26px 28px;
    transform: translateY(16px) scale(.97); opacity: 0;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.dash-modal.is-open .dash-modal__box { transform: translateY(0) scale(1); opacity: 1; }
.dash-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.dash-modal__title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0; }
.dash-modal__sub { font-size: 13px; color: var(--text-mute); margin: 4px 0 0; }
.dash-modal__sub b { color: var(--brand); }
/* padding:0 + border-box are REQUIRED — the site theme puts `padding:12px 50px` on bare
   <button>, which (with border-box) forced this to 100px wide and collapsed the × to 0 width */
.dash-modal__close { width: 36px; height: 36px; min-width: 0; padding: 0; box-sizing: border-box; flex: 0 0 36px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.dash-modal__close:hover { background: #fdecec; color: var(--neg); }
.dash-modal__close svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dash-modal .dash-pie__seg { opacity: 1; }

@media (max-width: 1100px) { .dash-flow { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .dash-balance { flex-direction: column; align-items: flex-start; padding: 22px; }
    .dash-balance__val { font-size: 34px; }
    .dash-balance__ico { display: none; }
    .dash-modal__box { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-modal__backdrop, .dash-modal__box, #dashDonutSeg { transition: none; }
}

/* ===== chart: y-axis scale + hover tooltip ===== */
#dashChartCard { position: relative; }
.dash-bars { display: block; height: auto; overflow: visible; padding-top: 4px; }
.dash-plot { display: flex; gap: 12px; }
.dash-axis {
    flex: 0 0 auto; width: 54px; height: 245px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-align: right; padding-right: 6px;
    font-size: 10.5px; font-weight: 700; color: var(--text-mute);
}
.dash-axis span { line-height: 1; }
.dash-plot__main { position: relative; flex: 1; min-width: 0; overflow-x: auto; }
.dash-grid-lines {
    position: absolute; top: 0; left: 0; right: 0; height: 245px;
    display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
}
.dash-grid-lines i { display: block; border-top: 1px dashed var(--border); height: 0; }
.dash-cols { position: relative; z-index: 1; display: flex; gap: 16px; }
.dash-cols .dash-bars__col { height: auto; }

/* hover tooltip */
.dash-tip {
    position: absolute; z-index: 20;
    transform: translate(-50%, -100%);
    background: #16241c; color: #fff;
    border-radius: 12px; padding: 11px 14px;
    box-shadow: 0 14px 32px -8px rgba(0,0,0,.45);
    pointer-events: none; white-space: nowrap; font-size: 12.5px;
}
.dash-tip[hidden] { display: none; }
.dash-tip__m { font-weight: 800; margin-bottom: 7px; }
.dash-tip__r { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 600; color: rgba(255,255,255,.82); }
.dash-tip__r + .dash-tip__r { margin-top: 4px; }
.dash-tip__r span { display: inline-flex; align-items: center; }
.dash-tip__r i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.dash-tip__r b { color: #fff; font-weight: 800; }
.dash-tip::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #16241c;
}

/* ===== Transaction filter bar (txf) ===== */
.txf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e6e9e7);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,32,.04);
}
/* one always-visible wrapping filter row in BOTH the in-page and maximized views
   (selectors are .txf-scoped so they beat the later base .txf__bar / .txf__adv-toggle rules) */
.txf .txf__bar, .txf .txf__adv, .txf .txf__row { display: contents; }
.txf .txf__adv-toggle { display: none; }               /* filters always shown — toggle not needed */
.txf .txf__maximize { order: 50; margin-left: auto; }  /* expand-to-drawer button on the far right */
.txfx .txf__maximize { display: none; }                 /* the drawer has its own × close */
.txf__daterange { display: none; }                       /* date-range chip: only shown in the mobile maximized drawer */
.txf__search-btn { display: none; }                       /* search icon: only shown in the mobile maximized drawer */
/* readable input text — force dark over the legacy theme's light input colour */
.txf .txf__q,
.txf .txf__row input,
.txf .txf__row select { color: #14201a !important; font-weight: 600; -webkit-text-fill-color: #14201a; }
.txf input::placeholder { color: #93a29a; -webkit-text-fill-color: #93a29a; opacity: 1; }

/* compact, always-visible bar (presets + search + filter-toggle + maximize) */
.txf__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.txf__presets { display: flex; flex-wrap: wrap; gap: 8px; }
.txf__preset {
    appearance: none; cursor: pointer;
    border: 1px solid var(--border, #e6e9e7);
    background: #f4f6f5; color: #4a5a52;
    font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 999px;
    transition: background .15s, color .15s, border-color .15s;
}
.txf__preset:hover { background: #e9efeb; color: #2f3d36; }
.txf__preset.is-active {
    background: var(--brand, #19895a);
    border-color: var(--brand, #19895a);
    color: #fff;
}
.txf__preset.is-active:hover { background: var(--brand, #19895a); color: #fff; }

/* search stays in the compact bar so it remains usable while pinned */
/* .txf-scoped so the left padding beats the theme's input[type=text]{padding:9.5px}
   (otherwise the placeholder sits on top of the search icon) */
.txf .txf__q {
    flex: 0 1 260px; min-width: 170px;
    height: 36px; box-sizing: border-box;
    border: 1.5px solid #d7ddd9;
    border-radius: 10px;
    padding: 0 12px 0 36px; font-size: 13px; font-weight: 600; color: #14201a;
    -webkit-text-fill-color: #14201a;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354635b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.2-4.2'/></svg>") no-repeat 12px center;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.txf .txf__q:focus { border-color: var(--brand, #19895a); box-shadow: 0 0 0 3px rgba(25,137,90,.15); }

/* advanced-toggle + maximize buttons */
.txf__adv-toggle {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border, #e6e9e7);
    background: #f4f6f5; color: #4a5a52;
    border-radius: 10px; font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s;
}
.txf__adv-toggle:hover { background: #e9efeb; color: #2f3d36; }
.txf__adv-toggle svg { width: 15px; height: 15px; }
.txf__chev { transition: transform .25s ease; }
.txf.is-adv-open .txf__chev { transform: rotate(180deg); }
.txf__dot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand, #19895a); display: none; }
.txf.has-adv-active .txf__dot { display: block; }

.txf__maximize {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; box-sizing: border-box; flex: 0 0 auto;
    border: 1px solid var(--border, #e6e9e7);
    background: #f4f6f5; color: #4a5a52;
    border-radius: 10px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.txf__maximize:hover { background: var(--brand, #19895a); color: #fff; border-color: var(--brand, #19895a); }
.txf__maximize svg { width: 17px; height: 17px; }
.txf__maximize .txf__max-off { display: none; }
.txf__maximize.is-on .txf__max-on { display: none; }
.txf__maximize.is-on .txf__max-off { display: inline; }

/* advanced controls row (collapsible) */
.txf__adv {
    overflow: hidden; max-height: 200px; opacity: 1; margin-top: 10px;
    transition: max-height .3s ease, opacity .22s ease, margin-top .3s ease;
}
.txf:not(.is-adv-open) .txf__adv { max-height: 0; opacity: 0; margin-top: 0; }
.txf__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.txf__field { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #6b7b72; font-weight: 600; }
.txf__row input,
.txf__row select {
    height: 36px; box-sizing: border-box;
    border: 1px solid var(--border, #e6e9e7);
    border-radius: 10px;
    padding: 0 11px; font-size: 13px; color: #1f2a24;
    background: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.txf__row input:focus,
.txf__row select:focus {
    border-color: var(--brand, #19895a);
    box-shadow: 0 0 0 3px rgba(25,137,90,.12);
}
.txf__row input:disabled { background: #f1f3f2; color: #9aa8a0; }
.txf__from, .txf__to { width: 148px; }
.txf__type { min-width: 130px; }
.txf__min, .txf__max { width: 116px; }
/* apply button (primary). explicit padding + hover bg beat the site theme's button rules */
.txf__apply {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 16px; box-sizing: border-box; min-width: 0;
    border: 1px solid var(--brand, #19895a); border-radius: 10px;
    background: var(--brand, #19895a); color: #fff;
    font-family: var(--font); font-size: 13px; font-weight: 700;
    transition: background .15s ease, border-color .15s ease, transform .04s ease;
}
.txf__apply svg { width: 16px; height: 16px; flex: 0 0 auto; }
.txf__apply:hover, .txf__apply:focus, .txf__apply:active { background: var(--brand-dark, #00592b); border-color: var(--brand-dark, #00592b); color: #fff; outline: none; }
.txf__apply:active { transform: translateY(1px); }

/* clear is now an X icon button (padding:0 + border-box dodge the theme's button padding) */
.txf__clear {
    appearance: none; cursor: pointer;
    width: 36px; height: 36px; flex: 0 0 36px; padding: 0; box-sizing: border-box; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #e6e9e7);
    background: #f4f6f5; color: #6b7b72; border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
}
.txf__clear svg { width: 16px; height: 16px; flex: 0 0 auto; }
.txf__clear:hover, .txf__clear:focus { background: #fdecec; color: #c0392b; border-color: #f3c7c2; outline: none; }


/* sticky column headers — only active inside the drawer, where the table column
   itself becomes the scroll container (sticky <th> needs the scroller as a near parent) */
table.txf-sticky-head thead th {
    position: sticky; top: 0; z-index: 6;
    background: var(--pos-soft, #e9f6ef);
    box-shadow: inset 0 -2px 0 rgba(0, 139, 62, .16);
}
/* square the sticky header's end cells in the scroller: the rounded top corners
   otherwise leave transparent notches that expose the row scrolling underneath
   (same fix as the residents drawer). */
table.txf-sticky-head thead th:first-child,
table.txf-sticky-head thead th:last-child { border-radius: 0; }

/* =================================================================
   Full-screen transaction drawer (txfx) — slides in from the right,
   sits above the header / chat widget / sidebar.
   ================================================================= */
.txfx {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; justify-content: flex-end;
    background: rgba(10, 24, 17, 0);
    visibility: hidden; pointer-events: none;
    transition: background .3s ease, visibility 0s linear .34s;
    /* drawer is appended to <body>, outside .px-app — restore the portal font */
    font-family: var(--font, 'Montserrat','Helvetica Neue',Arial,sans-serif);
    color: var(--text, #243029);
}
.txfx, .txfx input, .txfx select, .txfx button, .txfx table, .txfx td, .txfx th {
    font-family: var(--font, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.txfx.is-open {
    background: rgba(10, 24, 17, .55);
    visibility: visible; pointer-events: auto;
    transition: background .3s ease;
}
.txfx__panel {
    position: relative;
    width: 96.5vw; max-width: 1880px; height: 100vh;
    background: var(--bg, #eef2f0);
    border-radius: 22px 0 0 22px;
    box-shadow: -30px 0 60px -24px rgba(8, 20, 14, .5);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .36s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
}
.txfx.is-open .txfx__panel { transform: translateX(0); }

/* circular close button straddling the drawer's top-left edge */
.txfx__close {
    position: absolute; top: 20px; left: -22px; z-index: 5;
    width: 44px; height: 44px; min-width: 0; padding: 0; box-sizing: border-box;
    border-radius: 50%; border: 0; cursor: pointer;
    background: var(--brand, #19895a); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px -6px rgba(8, 20, 14, .5);
    transition: transform .15s ease, background .15s ease;
}
.txfx__close:hover { background: var(--brand-light, #1aa568); transform: scale(1.06); }
.txfx__close svg { width: 20px; height: 20px; }

/* < back button (shown on phones in place of the × — see the mobile block below) */
.txfx__back {
    position: absolute; top: 14px; left: 14px; z-index: 6;
    width: 40px; height: 40px; min-width: 0; padding: 0; box-sizing: border-box;
    border: 0; border-radius: 50%; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    background: rgba(10, 20, 14, .06); color: var(--text, #14201a);
    transition: background .15s ease;
}
.txfx__back:hover, .txfx__back:focus, .txfx__back:focus-visible, .txfx__back:active {
    background: rgba(10, 20, 14, .12); color: var(--text, #14201a); outline: none;
}
.txfx__back svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* body is a flex column; the filter + DataTables controls stay fixed and ONLY the
   table column scrolls — this lets the sticky <thead> pin reliably.
   (No header bar — the title block was removed to reclaim vertical space.) */
.txfx__body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 18px 30px 20px 40px;
    position: relative; z-index: 0;
}
.txfx__body .txf { flex: 0 0 auto; margin-bottom: 14px; }
/* inside the drawer the node was just re-parented — animate instantly to avoid a frozen transition */
.txfx__body .txf__adv { transition: none; }
.txfx__body .dataTables_wrapper {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
/* DataTables emits .row blocks (length, the table row, pagination) — let the table row grow */
.txfx__body .dataTables_wrapper > .row { flex: 0 0 auto; }
.txfx__body .dataTables_wrapper > .row.txfx-grow { flex: 1 1 auto; min-height: 0; display: flex; }
.txfx__body .dataTables_wrapper > .row.txfx-grow > [class*="col-"] {
    flex: 1 1 auto; min-height: 0; float: none;
    overflow-y: auto; overflow-x: hidden;
}
body.txfx-lock { overflow: hidden; }

/* footer row: rows-per-page (left) + pagination (right), both moved below the table */
.txf-foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; }
.txf-foot .dataTables_length { margin: 0; }
.txf-foot .dataTables_info { padding: 4px 0 0; font-size: 12.5px; color: var(--text-mute, #7a8a82); }
.txf-foot .dataTables_paginate { margin: 0; float: right; text-align: right; }
.txfx__body .txf-foot { flex: 0 0 auto; }

@media (max-width: 900px) {
    /* 100% (not 100vw) so the panel never extends under the page's vertical scrollbar —
       100vw includes the scrollbar width and caused horizontal overflow + clipped the
       right-aligned amount. */
    .txfx__panel { width: 100%; max-width: 100%; border-radius: 0; overflow-x: hidden; }
    .txfx__close { left: auto; right: 16px; top: 14px; background: rgba(0,0,0,.45); }
    .txfx__body { padding: 16px 16px 16px; }
}
@media (max-width: 640px) {
    .txf__from, .txf__to, .txf__type, .txf__min, .txf__max { flex: 1 1 46%; width: auto; }
}

/* ===================================================================
   Modern transaction rows (.txn-table) — better spacing, clear
   income/expense direction, refined typography.
   =================================================================== */
.table.txn-table { border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.table.txn-table thead th {
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--brand-dark);
    background: var(--pos-soft);
    box-shadow: inset 0 -2px 0 rgba(0, 139, 62, .16);
    padding: 12px 22px; border: 0; white-space: nowrap;
}
.table.txn-table tbody td {
    padding: 14px 22px; border: 0;
    border-bottom: 1px solid var(--border, #eef1f0);
    vertical-align: middle; font-size: 13.5px; color: var(--text, #243029);
    background: transparent;
}
.table.txn-table tbody tr:last-child td { border-bottom: 0; }
.table.txn-table tbody tr { transition: background .12s ease; }
.table.txn-table tbody tr:hover td { background: var(--surface-2, #f6f8f7); }

/* slim direction accent on the left edge of each row */
.table.txn-table tbody td:first-child { position: relative; }
.table.txn-table tbody tr.txn-out td:first-child::before,
.table.txn-table tbody tr.txn-in  td:first-child::before,
.table.txn-table tbody tr.txn-invoice td:first-child::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
}
.table.txn-table tbody tr.txn-out td:first-child::before { background: #e6aaa2; }
.table.txn-table tbody tr.txn-in  td:first-child::before { background: #a3dcc0; }
.table.txn-table tbody tr.txn-invoice td:first-child::before { background: #e8c98f; }

/* date — two lines (date bold, time muted) */
.txn-date__d { display: block; font-weight: 600; color: var(--text, #243029); }
.txn-date__t { display: block; font-size: 12px; color: var(--text-mute, #9aa8a0); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* amount — direction icon + tabular value, colour-coded */
.txn-amt { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txn-amt__ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; flex: 0 0 28px; }
.txn-amt__ic svg { width: 14px; height: 14px; }
.txn-amt--in  { color: #128a52; }
.txn-amt--in  .txn-amt__ic { background: rgba(20,150,90,.12); color: #149a5c; }
.txn-amt--out { color: #c0392b; }
.txn-amt--out .txn-amt__ic { background: rgba(192,57,43,.10); color: #c0392b; }
.txn-amt--invoice { color: #a4690a; }
.txn-amt--invoice .txn-amt__ic { background: rgba(196,124,0,.14); color: #a4690a; }

/* balance + description */
.txn-bal  { color: var(--text-mute, #7a8a82); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.txn-table tbody td:nth-child(3), .table.txn-table tbody td:nth-child(4) { white-space: nowrap; }
/* description: always one line so row height never depends on description length
   (overflowing text is clipped with an ellipsis once the column width is set) */
.txn-desc { color: var(--text-soft, #3c4a42); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* type badge — colour-coded pill per transaction type */
.txn-type {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; line-height: 1.45; white-space: nowrap;
}
.txn-type--deposit  { background: rgba(20,150,90,.12);   color: #11874f; }
.txn-type--withdraw { background: rgba(192,57,43,.10);   color: #bb3a2c; }
.txn-type--expense  { background: rgba(192,57,43,.10);   color: #bb3a2c; }
.txn-type--transfer { background: rgba(214,51,108,.12);  color: #c2185b; }   /* pink */
.txn-type--invoice  { background: rgba(196,124,0,.14);   color: #a4690a; }   /* amber */
.txn-type--fee      { background: rgba(196,124,0,.14);   color: #a4690a; }
.txn-type--utility  { background: rgba(124,77,201,.13);  color: #6b46c1; }
.txn-type--other    { background: rgba(120,138,128,.16); color: #5b6b62; }

@media (max-width: 640px) {
    .table.txn-table thead th, .table.txn-table tbody td { padding-left: 14px; padding-right: 14px; }
}

/* ===== mobile (≤768): transaction tables become a bank-app-style feed
   (circle icon · description/type · ₾ amount · day-group dividers) — the SAME layout
   shown in the maximized drawer, so standard and maximized views match. The maximized
   drawer (.txfx) adds only the shell on top: fixed header, internal scroll, sticky day
   headers, back button. ===== */
@media (max-width: 768px) {
    .table.txn-table { border-spacing: 0; }
    .table.txn-table thead { display: none; }
    .table.txn-table, .table.txn-table tbody { display: block; width: 100%; }

    .table.txn-table tbody tr {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 96px;
        grid-template-areas: "ic title amt" "ic sub amt";
        align-items: center; align-content: center; column-gap: 12px; row-gap: 1px;
        padding: 11px 6px 11px 2px; min-height: 64px; box-sizing: border-box;
        border-bottom: 1px solid #eef2ef;
        cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .table.txn-table tbody tr:active { background: var(--surface-2, #f6f8f7); }
    .table.txn-table tbody tr:last-child { border-bottom: 0; }
    .table.txn-table tbody td { border: 0 !important; padding: 0 !important; background: transparent !important; }
    /* hide the desktop colour stripe in feed mode */
    .table.txn-table tbody tr.txn-out td:first-child::before,
    .table.txn-table tbody tr.txn-in  td:first-child::before,
    .table.txn-table tbody tr.txn-invoice td:first-child::before { display: none; }

    /* left circular direction icon (driven by the row's txn-in/out/invoice class) */
    .table.txn-table tbody tr::before {
        grid-area: ic; content: ""; align-self: center;
        width: 40px; height: 40px; border-radius: 50%;
        background-repeat: no-repeat; background-position: center; background-size: 18px;
    }
    .table.txn-table tbody tr.txn-in::before {
        background-color: #e7f6ee;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7c3c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='8 7 17 7 17 16'/></svg>");
    }
    .table.txn-table tbody tr.txn-out::before {
        background-color: #fdecec;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='7' x2='17' y2='17'/><polyline points='8 17 17 17 17 8'/></svg>");
    }
    .table.txn-table tbody tr.txn-invoice::before {
        background-color: #fdf3e2;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4690a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><polyline points='14 3 14 8 19 8'/></svg>");
    }

    /* title = description (single line, truncates; full text in the tap sheet) */
    .table.txn-table tbody td:nth-child(5) { display: block !important; grid-area: title; min-width: 0; }
    .table.txn-table tbody td:nth-child(5) .txn-desc {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.25;
    }
    /* subtitle = type (plain muted text, no pill) */
    .table.txn-table tbody td:nth-child(2) { display: block !important; grid-area: sub; min-width: 0; }
    .table.txn-table tbody td:nth-child(2) .txn-type {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        padding: 0; background: none !important; color: var(--text-soft) !important;
        font-size: 12.5px; font-weight: 600;
    }
    /* amount = fixed-width right column, ₾ (common right edge across rows) */
    .table.txn-table tbody td:nth-child(3) { display: block !important; grid-area: amt; justify-self: stretch; align-self: center; text-align: right; }
    .table.txn-table tbody td:nth-child(3) .txn-amt { display: inline-flex; justify-content: flex-end; width: 100%; gap: 0; }
    .table.txn-table tbody td:nth-child(3) .txn-amt__ic { display: none; }
    .table.txn-table tbody td:nth-child(3) .txn-amt__v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .table.txn-table tbody td:nth-child(3) .txn-amt__cur { display: none; }   /* hide "GEL"; ₾ added below */
    .table.txn-table tbody td:nth-child(3) .txn-amt__v::after { content: " ₾"; font-weight: 700; opacity: .85; }
    .table.txn-table tbody td:nth-child(3) .txn-amt--in  .txn-amt__v { color: #0a7c3c; }
    .table.txn-table tbody td:nth-child(3) .txn-amt--out .txn-amt__v { color: #c0392b; }
    .table.txn-table tbody td:nth-child(3) .txn-amt--invoice .txn-amt__v { color: #a4690a; }

    /* date (1) + balance (4) hidden per-row — date is the group header, both in the tap sheet */
    .table.txn-table tbody td:nth-child(1),
    .table.txn-table tbody td:nth-child(4) { display: none; }

    /* day-group divider row (sticky only inside the maximized drawer — see .txfx rule) */
    .table.txn-table tbody tr.txn-daygroup {
        display: block; padding: 10px 6px 8px 2px; border-bottom: 0; cursor: default;
        background: var(--bg, #eef2f0);
    }
    .table.txn-table tbody tr.txn-daygroup::before { display: none; }
    .table.txn-table tbody tr.txn-daygroup:active { background: var(--bg, #eef2f0); }
    .table.txn-table tbody tr.txn-daygroup td {
        display: block !important; font-size: 12px; font-weight: 800; color: var(--text-soft); letter-spacing: .2px;
    }
    .table.txn-table tbody td.dataTables_empty { display: block !important; grid-column: 1 / -1; padding: 28px 8px !important; text-align: center; color: var(--text-soft); }
}

/* ===== transaction detail bottom-sheet (opened by tapping a mobile row) ===== */
body.txd-open { overflow: hidden; }
/* z-index sits above the txfx maximize drawer (2147483000) so the detail sheet
   opens on top when a table is maximized; stays below the app loader (2147483600). */
.txd { position: fixed; inset: 0; z-index: 2147483200; display: none; font-family: var(--font); }
.txd.is-on { display: block; }
.txd__backdrop { position: absolute; inset: 0; background: rgba(8,18,12,.45); opacity: 0; transition: opacity .26s ease; }
.txd.is-open .txd__backdrop { opacity: 1; }
.txd__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 22px 22px 0 0;
    padding: 8px 20px 26px; max-height: 88vh; overflow-y: auto;
    transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 -20px 50px -16px rgba(8,20,14,.4);
}
.txd.is-open .txd__panel { transform: translateY(0); }
.txd__grab { width: 40px; height: 4px; border-radius: 999px; background: #d7ddd9; margin: 6px auto 12px; }
.txd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.txd__title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.txd__close { width: 36px; height: 36px; min-width: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.txd__close svg { width: 18px; height: 18px; flex: 0 0 auto; }
.txd__amt { font-size: 26px; font-weight: 800; margin: 2px 0 14px; font-variant-numeric: tabular-nums; }
.txd__amt--in { color: #0a7c3c; }
.txd__amt--out { color: #c0392b; }
.txd__amt--invoice { color: #a4690a; }
.txd__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid #eef2ef; }
.txd__lbl { font-size: 12.5px; font-weight: 600; color: var(--text-mute); flex: 0 0 auto; }
.txd__val { font-size: 13.5px; font-weight: 700; color: var(--text); text-align: right; }
.txd__row--desc { flex-direction: column; gap: 5px; }
.txd__row--desc .txd__val { text-align: left; font-weight: 600; line-height: 1.45; }

/* ===== service-fee (სააბონენტო) clickable + breakdown modal ===== */
.svc-fee {
    appearance: none; cursor: pointer; box-sizing: border-box; font: inherit;
    /* blue = interactive/informational; keeps green reserved for positive balance */
    color: #2557d6; font-weight: 800; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; min-width: 0;
    background: #eef3fd;
    border: 1px solid #d3e0f8; border-radius: 999px;
    box-shadow: 0 1px 2px rgba(8,20,14,.05);
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .04s ease;
}
/* leading "details" glyph (3-line list) via mask so it inherits the button colour */
.svc-fee::before {
    content: ""; flex: 0 0 14px; width: 14px; height: 14px; opacity: .85;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h2v2H3zM7 5h14v2H7zM3 11h2v2H3zM7 11h14v2H7zM3 17h2v2H3zM7 17h10v2H7z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h2v2H3zM7 5h14v2H7zM3 11h2v2H3zM7 11h14v2H7zM3 17h2v2H3zM7 17h10v2H7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc-fee:hover {
    background: #e1ebfb; border-color: #2557d6; color: #1c3fa0;
    box-shadow: 0 6px 14px -6px rgba(37,87,214,.45);
}
.svc-fee:active { transform: translateY(1px); }
.svc-fee:focus-visible { outline: 2px solid #2557d6; outline-offset: 2px; }
.svc-fee__ic { font-size: 15px; line-height: 1; opacity: .8; margin-left: -1px; }

/* Same cell, nothing to open. Rendered as a <span>, so it keeps the pill shape and the
   column reads as ONE column — a bare "0.00" sitting next to a blue pill looked like two
   different things (owner, 2026-08-05). Neutral and inert: no list glyph, no chevron, no
   hover, no pointer. Matches .res-bal.is-zero so the two money columns agree. */
.svc-fee--flat {
    cursor: default; justify-content: center; min-width: 60px;
    color: var(--text-mute); background: var(--surface-2);
    border-color: transparent; box-shadow: none;
}
.svc-fee--flat::before { display: none; }
.svc-fee--flat:hover {
    background: var(--surface-2); border-color: transparent;
    color: var(--text-mute); box-shadow: none;
}
.svc-fee--flat:active { transform: none; }

/* service type next to the name in the breakdown popup (monthly / one-off / loan-type) */
.svcm__type {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
    background: var(--surface-2); color: var(--text-mute);
}

.svcm {
    /* above the txfx maximize drawer (2147483000) AND the .txd detail sheet (2147483200) —
       on phones the breakdown opens from the neighbour's detail sheet and must paint over it,
       not tie with it on DOM order; below the app loader (2147483600). */
    position: fixed; inset: 0; z-index: 2147483300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(10,24,17,0); visibility: hidden; pointer-events: none;
    transition: background .25s ease, visibility 0s linear .25s;
    font-family: var(--font, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.svcm.is-open { background: rgba(10,24,17,.5); visibility: visible; pointer-events: auto; transition: background .25s ease; }
.svcm__panel {
    width: 580px; max-width: 96vw; max-height: 86vh; overflow: auto;
    background: #fff; border-radius: 16px; box-shadow: 0 30px 70px -24px rgba(8,20,14,.5);
    transform: translateY(12px) scale(.98); opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.svcm.is-open .svcm__panel { transform: none; opacity: 1; }
.svcm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.svcm__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--text, #16241c); }
.svcm__sub { font-size: 13px; font-weight: 600; color: var(--text-mute, #7a8a82); margin-top: 2px; }
.svcm__close { appearance: none; border: 0; background: #f4f6f5; width: 34px; height: 34px; min-width: 0; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 22px; line-height: 1; color: #6b7b72; cursor: pointer; flex: 0 0 auto; }
.svcm__close:hover { background: #fdecec; color: #c0392b; }
.svcm__body { padding: 6px 20px 20px; }
.svcm__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.svcm__table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft, #3a4842); padding: 8px 10px; white-space: nowrap; }
.svcm__table td { padding: 11px 10px; border-top: 1px solid var(--border, #eef1f0); vertical-align: middle; color: var(--text, #14201a); }
.svcm__table td:nth-child(2) { font-weight: 600; color: var(--text, #14201a); white-space: nowrap; }
.svcm__name { font-weight: 600; }
.svcm__amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.svcm__bal { font-variant-numeric: tabular-nums; color: var(--text-mute, #7a8a82); white-space: nowrap; }
.svcm__bal.is-neg { color: #c0392b; }
.svcm__table tfoot td { border-top: 2px solid var(--border, #e6e9e7); font-weight: 800; }
.svcm__table th:nth-child(3), .svcm__table th:nth-child(4),
.svcm__table td:nth-child(3), .svcm__table td:nth-child(4) { text-align: right; }

/* =================== RESIDENTS LIST (ბინადართა სია) — modern rows =================== */
.res-table > tbody > tr > td { padding-top: 10px !important; padding-bottom: 10px !important; }

/* "დაალაგე" sort dropdown */
.res-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.res-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* search field — styled to match the sort button. Selectors are double-class
   (.res-search .res-search__input) so they beat the theme's input[type=text]
   rules (which would otherwise force padding:9.5px and a focus shadow). */
.res-search { position: relative; display: inline-flex; align-items: center; }
.res-search .res-search__ic {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-mute); pointer-events: none; z-index: 2;
}
.res-search .res-search__input {
    appearance: none; box-sizing: border-box; position: relative; z-index: 1;
    width: 230px; max-width: 52vw;
    padding: 9px 14px 9px 40px;                       /* leaves room for the icon */
    background: #fff; border: 1px solid var(--border, #e3e8e5); border-radius: 11px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
    box-shadow: 0 1px 2px rgba(8, 20, 14, .04);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.res-search .res-search__input::placeholder { color: var(--text-mute); font-weight: 600; }
.res-search .res-search__input:hover { border-color: #d7ddd9; }
.res-search .res-search__input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 4px 12px -5px rgba(8, 20, 14, .18);  /* clean soft shadow, no green glow */
}

.res-sort { position: relative; }
.res-sort__toggle {
    appearance: none; cursor: pointer; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
    background: #fff; border: 1px solid var(--border, #e3e8e5); border-radius: 11px;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--text-soft);
    box-shadow: 0 1px 2px rgba(8, 20, 14, .04);
    transition: border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
/* simple float + shadow on hover (also neutralises the theme's button:hover
   that would otherwise turn this dark grey with white text) */
.res-sort__toggle:hover, .res-sort__toggle:focus, .res-sort__toggle:active {
    background: #fff; color: var(--text-soft); border-color: var(--border, #e3e8e5);
}
.res-sort__toggle:hover {
    border-color: #d7ddd9;
    box-shadow: 0 10px 22px -10px rgba(8, 20, 14, .32);
    transform: translateY(-1px);
}
.res-sort__ic { flex: 0 0 16px; }
.res-sort__lbl { white-space: nowrap; }
.res-sort__caret { font-size: 11px; opacity: .6; transition: transform .16s ease; }
.res-sort.is-open .res-sort__caret { transform: rotate(180deg); }
.res-sort__menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 250px;
    background: #fff; border: 1px solid var(--border-soft, #eef1ef); border-radius: 13px;
    box-shadow: 0 22px 48px -18px rgba(8, 20, 14, .45); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.res-sort.is-open .res-sort__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease; }
.res-sort__opt {
    appearance: none; cursor: pointer; box-sizing: border-box; width: 100%; text-align: left;
    display: block; padding: 10px 12px; border: 0; background: none; border-radius: 9px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.res-sort__opt:hover { background: var(--surface-2); color: var(--brand); }
.res-sort__opt.is-active { background: var(--pos-soft); color: var(--brand); font-weight: 800; }

/* row-number (#) column */
.res-th-idx { width: 46px; min-width: 46px !important; text-align: center !important; }
.res-table > tbody > tr > td.res-idx-cell {
    min-width: 46px !important; width: 46px; text-align: center;
    color: var(--text-mute); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px;
}

/* avatar + name */
.res-person { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.res-ava {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: 0;
    color: hsl(var(--h, 150) 42% 30%);
    background: hsl(var(--h, 150) 58% 93%);
    box-shadow: inset 0 0 0 1px hsl(var(--h, 150) 44% 84%);
    user-select: none;
}
.res-name { font-weight: 700; color: var(--text); }
.res-name--last { font-weight: 600; color: var(--text-soft); }

/* neutral / brand / day chips */
.res-chip, .res-apt, .res-day {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.res-chip {
    padding: 3px 10px; border-radius: 8px;
    background: var(--surface-2); color: var(--text-soft); font-size: 12.5px;
}
.res-apt {
    padding: 3px 11px; border-radius: 8px;
    background: var(--pos-soft); color: var(--brand); font-size: 12.5px;
    box-shadow: inset 0 0 0 1px #d6ecde;
}
/* apartment number as a colourful circle / capsule (hue stable per apartment) */
.res-apt-circle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 11px; border-radius: 999px;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
    white-space: nowrap; letter-spacing: .2px;
    color: hsl(var(--h, 150) 42% 30%);
    background: hsl(var(--h, 150) 58% 93%);
    box-shadow: inset 0 0 0 1px hsl(var(--h, 150) 44% 84%);
    user-select: none;
}
.res-day {
    min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px;
    background: var(--surface-2); color: var(--text-soft); font-size: 12.5px;
}
.res-dash { color: var(--text-mute); opacity: .45; font-weight: 600; }

/* meta columns */
.res-mob, .res-sub, .res-cad, .res-rate { font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-mob  { color: var(--text-soft); font-weight: 600; }
.res-sub  { color: var(--text-soft); font-weight: 600; }
.res-rate { color: var(--text-soft); font-weight: 600; }
.res-cad  { color: var(--text-mute); font-weight: 600; font-size: 12.5px; }

/* balance pill — the row's hero signal */
.res-bal {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 60px; padding: 5px 12px; border-radius: 999px;
    font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.res-bal.is-pos  { background: var(--pos-soft); color: var(--pos); }
.res-bal.is-neg  { background: var(--neg-soft); color: var(--neg); }
.res-bal.is-zero { background: var(--surface-2); color: var(--text-mute); }

/* softer, cleaner debtor row: faint wash + left accent (the red pill carries the rest) */
table.table.res-table > tbody > tr.red { background: rgba(192, 57, 43, .035) !important; }
table.table.res-table > tbody > tr.red > td { color: var(--text) !important; border-bottom-color: #f3e0de !important; }
table.table.res-table > tbody > tr.red > td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
table.table.res-table > tbody > tr:hover > td { background: var(--surface-2); }
table.table.res-table > tbody > tr.red:hover > td { background: rgba(192, 57, 43, .06); }

/* the mobile card face lives inside the სახელი cell; hidden on desktop */
.res-card { display: none; }

/* ===== mobile (≤768): residents list becomes a dashboard-debtor-style card list ===== */
@media (max-width: 768px) {
    .res-table thead { display: none; }
    .res-table, .res-table > tbody { display: block; width: 100%; }
    .res-table > tbody > tr {
        display: block; position: relative; padding: 0; margin: 0;
        border-bottom: 1px solid #eef2ef; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .res-table > tbody > tr:last-child { border-bottom: 0; }
    .res-table > tbody > tr:active { background: var(--surface-2, #f6f8f7); }
    /* faint debtor wash without the desktop left-accent box-shadow */
    table.table.res-table > tbody > tr.red { background: rgba(192, 57, 43, .045) !important; }
    table.table.res-table > tbody > tr.red > td:first-child { box-shadow: none; }

    /* hide every real cell; the card face (inside .res-c-fname) carries the row */
    .res-table > tbody > tr > td { display: none !important; border: 0 !important; padding: 0 !important; }
    .res-table > tbody > tr > td.res-c-fname { display: block !important; }
    .res-table > tbody > tr > td.res-c-fname > .res-name { display: none; }

    .res-card {
        display: flex !important; align-items: center; gap: 12px; padding: 13px 6px 13px 2px;
    }
    .res-card__apt {
        flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px;
        color: hsl(var(--h, 150) 42% 30%);
        background: hsl(var(--h, 150) 58% 93%);
        box-shadow: inset 0 0 0 1px hsl(var(--h, 150) 44% 84%);
    }
    .res-card__apt.is-empty { color: var(--text-mute); background: var(--surface-2); box-shadow: none; }
    .res-card__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    /* name+surname always fully visible — wrap instead of truncating */
    .res-card__name { font-size: 14px; font-weight: 700; color: var(--text); white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
    .res-card__meta { display: flex; gap: 12px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
    .res-card__m { font-variant-numeric: tabular-nums; }
    .res-card__m--ent::before { content: "სად. "; color: var(--text-mute); }
    .res-card__m--floor::before { content: "სართ. "; color: var(--text-mute); }
    .res-card__bal { flex: 0 0 auto; }
    /* chevron affordance — the whole row opens the detail sheet */
    .res-card::after {
        content: "›"; flex: 0 0 auto; margin-left: 2px;
        font-size: 20px; font-weight: 700; line-height: 1; color: var(--text-mute); opacity: .55;
    }
}

/* resident detail sheet: balance hero (reuses the .txd bottom-sheet shell) */
.txd__amt--zero { color: var(--text); }
.txd__amt-unit { font-size: 16px; font-weight: 700; opacity: .8; }
.txd__amt-lbl { margin: -8px 0 12px; font-size: 12.5px; font-weight: 700; color: var(--text-mute); }

/* clickable ASG logo (-> portal home of the current building) */
.px-logolink { display: inline-flex; align-items: center; line-height: 0; cursor: pointer; text-decoration: none; transition: opacity .14s ease; }
.px-logolink:hover { opacity: .85; }

/* =================== building-switch loader (a hopping building) =================== */
.asg-loader {
    position: fixed; inset: 0; z-index: 2147483600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    background: rgba(244, 248, 246, .82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
    font-family: var(--font, 'Montserrat', 'Helvetica Neue', Arial, sans-serif);
}
.asg-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }
.asg-loader__stage { position: relative; width: 96px; height: 86px; }
.asg-loader__hop {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    font-size: 56px; line-height: 1; will-change: transform;
    transform-origin: 50% 100%;
    animation: asgHop .9s cubic-bezier(.5, .05, .5, .95) infinite;
}
.asg-loader__shadow {
    position: absolute; left: 50%; bottom: 8px; width: 56px; height: 13px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 70, 31, .32), rgba(0, 70, 31, 0) 70%);
    border-radius: 50%; will-change: transform, opacity;
    animation: asgShadow .9s cubic-bezier(.5, .05, .5, .95) infinite;
}
@keyframes asgHop {
    0%   { transform: translateX(-50%) translateY(0)     scale(1.08, .9); }
    18%  { transform: translateX(-50%) translateY(-4px)  scale(.95, 1.07); }
    48%  { transform: translateX(-50%) translateY(-44px) scale(1.02, 1); }
    80%  { transform: translateX(-50%) translateY(0)     scale(1.12, .86); }
    100% { transform: translateX(-50%) translateY(0)     scale(1, 1); }
}
@keyframes asgShadow {
    0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: .34; }
    48%      { transform: translateX(-50%) scaleX(.5);  opacity: .14; }
    80%      { transform: translateX(-50%) scaleX(1.12); opacity: .4; }
}
.asg-loader__text { font-size: 15px; font-weight: 800; color: var(--brand-dark, #00461f); letter-spacing: .3px; }
.asg-loader__text i { font-style: normal; animation: asgDot 1.25s infinite; opacity: 0; }
.asg-loader__text i:nth-child(2) { animation-delay: .18s; }
.asg-loader__text i:nth-child(3) { animation-delay: .36s; }
@keyframes asgDot { 0%, 65%, 100% { opacity: 0; } 32% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .asg-loader__hop, .asg-loader__shadow, .asg-loader__text i { animation-duration: 1.6s; }
}

/* ============================================================
   Dashboard enrichment: categories / activity / discipline /
   year-over-year badges
   ============================================================ */

/* solo card inside a .dash-grid row spans the full width */
.dash-span-3 { grid-column: 1 / -1; }

/* year-over-year badge in KPI labels */
.dash-yoy { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.dash-yoy.is-good { color: var(--pos); background: var(--pos-soft); }
.dash-yoy.is-bad { color: var(--neg); background: var(--neg-soft); }

/* "ყველაზე ხარჯიანი თვეები" — months of the selected year ranked by expense */
.dash-topmonths { display: flex; flex-direction: column; gap: 13px; padding-top: 4px; }
.dash-tmonth { display: grid; grid-template-columns: 26px minmax(86px, 1.1fr) 2fr auto; align-items: center; gap: 12px; }
.dash-tmonth__rank { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #fdecec; color: #c0392b; font-size: 13px; font-weight: 800; }
.dash-tmonth:nth-child(n+4) .dash-tmonth__rank { background: var(--surface-2, #eef2f0); color: var(--text-mute); }
.dash-tmonth__name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tmonth__bar { height: 9px; border-radius: 999px; background: #f4e6e4; overflow: hidden; }
.dash-tmonth__fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: #c0392b; }
.dash-tmonth__val { font-size: 13px; font-weight: 700; color: var(--text); min-width: 92px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .dash-tmonth { grid-template-columns: 24px minmax(72px, 1.1fr) 1.5fr auto; gap: 9px; } .dash-tmonth__val { min-width: 76px; } }

/* legacy expense-category fill helper (kept; harmless) */
.dash-brow__fill--on { width: var(--w); }

/* recent activity feed */
.dash-feed { display: flex; flex-direction: column; }
.dash-feed__row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #eef2ef; }
.dash-feed__row:last-child { border-bottom: 0; }
.dash-feed__ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dash-feed__ic svg { width: 15px; height: 15px; }
.dash-feed__ic.is-in { color: var(--pos); background: var(--pos-soft); }
.dash-feed__ic.is-out { color: var(--neg); background: var(--neg-soft); }
.dash-feed__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-feed__txt { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-feed__meta { font-size: 11.5px; color: var(--text-soft); }
.dash-feed__amt { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.dash-feed__amt.is-in { color: var(--pos); }
.dash-feed__amt.is-out { color: var(--neg); }
/* "view all transactions" → opens the kulaba maximize drawer */
.dash-feed__all {
    margin-top: 14px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border: 1px solid #d7ddd9; border-radius: 12px;
    background: #fff; color: var(--text-soft);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.dash-feed__all svg { width: 16px; height: 16px; transition: transform .16s ease; }
.dash-feed__all:hover {
    background: #fff; color: var(--brand); border-color: #cdd6d1;
    box-shadow: 0 10px 22px -12px rgba(8, 20, 14, .3); transform: translateY(-1px);
}
.dash-feed__all:hover svg { transform: translateX(3px); }

/* payment discipline */
.dash-disc__big { display: flex; flex-direction: column; padding: 2px 0 16px; }
.dash-disc__pct { font-size: 40px; font-weight: 800; color: var(--pos); line-height: 1; }
.dash-disc__cap { font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-top: 5px; }
.dash-disc__bars { display: flex; gap: 5px; align-items: flex-end; height: 78px; }
.dash-disc__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.dash-disc__bar { display: block; width: 100%; max-width: 18px; height: var(--h); min-height: 2px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #34a463, #0a7c3c); }
.dash-disc__lbl { font-size: 9.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.dash-disc__note { font-size: 11.5px; color: var(--text-soft); margin: 10px 0 0; }

/* previous-year line in the chart tooltip */
.dash-tip__p { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.18); font-size: 11px; color: #b9c8bf; }

@media (max-width: 760px) {
    .dash-disc__lbl { display: none; }
}

/* ============================================================
   ჩემი სივრცე — combined personal page (profile + transactions + cards)
   ============================================================ */
.ms-profile__head {
    display: flex; align-items: center; justify-content: space-between; gap: 18px 24px;
    flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eef2ef;
}
.ms-profile__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ms-avatar {
    width: 60px; height: 60px; flex: 0 0 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #19a974, #008b3e);
    box-shadow: 0 10px 22px -10px rgba(0, 139, 62, .5);
}
.ms-profile__name { margin: 0 0 2px; font-size: 20px; font-weight: 800; color: var(--text); }
.ms-profile__addr { font-size: 13px; color: var(--text-soft); }
.ms-profile__bal { display: flex; flex-direction: column; align-items: flex-end; }
.ms-profile__bal-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); }
.ms-profile__bal-val { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ms-profile__bal-val.is-pos { color: var(--pos); }
.ms-profile__bal-val.is-neg { color: var(--neg); }

/* categorized fact groups (პერსონალური / ბინის / გადახდის მონაცემები)
   — each group is a distinct sub-card; the three sit side-by-side on wide screens
   and stack on narrow, so fields never bleed into one another. */
.ms-fact-groups {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}
.ms-fact-group {
    background: var(--surface-2); border: 1px solid var(--border-soft, #eef1ef);
    border-radius: 14px; padding: 15px 17px; min-width: 0;
}
.ms-fact-group__title {
    margin: 0 0 12px; padding-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: var(--brand);
    border-bottom: 1px solid #e3ece7;
}
/* one fact per row inside a group: muted label, bold value below, hairline divider */
.ms-facts { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ms-fact {
    display: flex; flex-direction: column; gap: 3px;
    padding: 9px 0; border-top: 1px solid #e7ece9;
}
.ms-fact:first-child { padding-top: 0; border-top: 0; }
.ms-fact:last-child { padding-bottom: 0; }
.ms-fact dt { font-size: 12.5px; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .3px; }
.ms-fact dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); word-break: break-word; }
/* monthly-payment fee button sits inside a fact dd — align it to the value baseline */
.ms-fact dd .svc-fee { margin: 0; }

/* card tiles */
/* ---- my cards: compact list (scales to many cards) ---- */
/* count pill next to the "ბარათები" title */
.ms-cards-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; margin-left: 4px; vertical-align: 2px;
    border-radius: 999px; background: var(--pos-soft); color: var(--brand);
    font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* search field (long lists) — double-class selectors beat the theme's input rules */
.ms-cardsearch { position: relative; display: inline-flex; align-items: center; }
.ms-cardsearch .ms-cardsearch__ic {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-mute); pointer-events: none; z-index: 2;
}
.ms-cardsearch .ms-cardsearch__input {
    appearance: none; box-sizing: border-box; position: relative; z-index: 1;
    width: 230px; max-width: 52vw;
    padding: 9px 14px 9px 40px;
    background: #fff; border: 1px solid var(--border, #e3e8e5); border-radius: 11px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
    box-shadow: 0 1px 2px rgba(8, 20, 14, .04);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.ms-cardsearch .ms-cardsearch__input::placeholder { color: var(--text-mute); font-weight: 600; }
.ms-cardsearch .ms-cardsearch__input:hover { border-color: #d7ddd9; }
.ms-cardsearch .ms-cardsearch__input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 4px 12px -5px rgba(8, 20, 14, .18);
}

.ms-cardlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* long lists: cap the height so the page layout stays stable; the panel scrolls */
.ms-cardlist--scroll { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.ms-cardlist--scroll::-webkit-scrollbar { width: 9px; }
.ms-cardlist--scroll::-webkit-scrollbar-thumb { background: #d7ddd9; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.ms-cardlist--scroll::-webkit-scrollbar-thumb:hover { background: #c2cbc6; background-clip: padding-box; }
.ms-cardlist-empty { margin-top: 12px; padding: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-mute); }
.ms-cardrow {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: 42px minmax(120px, 1.1fr) minmax(110px, 1.2fr) minmax(110px, 1fr) auto;
    padding: 11px 14px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border-soft, #eef1ef);
}
/* green "ASG" badge (replaces the old gold card chip) */
.ms-cardrow__chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-light, #6bb53f), var(--brand, #008b3e));
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); user-select: none;
}
.ms-cardrow__num  { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: .6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cardrow__name { font-size: 13px; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* editable card nickname (replaces the static name column) */
.ms-cardrow__nick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ms-cardrow__nicktext { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cardrow__nicktext.is-empty { font-weight: 600; font-style: italic; color: var(--text-mute); cursor: pointer; }
.ms-cardrow__edit { flex: 0 0 auto; width: 26px; height: 26px; min-width: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 7px; background: transparent; color: var(--text-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s ease, color .14s ease; }
.ms-cardrow__edit:hover, .ms-cardrow__edit:focus { background: var(--pos-soft); color: var(--brand); outline: none; }
.ms-cardrow__edit svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ms-cardrow__nick.is-editing { width: 100%; }
.ms-nickedit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.ms-nickedit__input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 5px 9px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text); border: 1.5px solid var(--brand); border-radius: 8px; outline: none; }
.ms-nickedit__save, .ms-nickedit__cancel { flex: 0 0 auto; width: 28px; height: 28px; min-width: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s ease, color .14s ease; }
.ms-nickedit__save svg, .ms-nickedit__cancel svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ms-nickedit__save { background: var(--brand); color: #fff; }
.ms-nickedit__save:hover, .ms-nickedit__save:focus { background: var(--brand-dark); color: #fff; outline: none; }
.ms-nickedit__save:disabled { background: var(--text-mute); cursor: default; }
.ms-nickedit__cancel { background: var(--surface-2, #f1f5f3); color: var(--text-soft); }
.ms-nickedit__cancel:hover, .ms-nickedit__cancel:focus { background: #e7ece9; color: var(--text); outline: none; }
.ms-cardrow__bldg { font-size: 12px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cardrow__state { justify-self: end; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ms-cardrow__state.is-ok  { background: var(--pos-soft); color: var(--pos); }
.ms-cardrow__state.is-off { background: var(--neg-soft); color: var(--neg); }

/* hotline note (card add/remove) */
.ms-cards-note {
    display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; padding-top: 14px;
    border-top: 1px solid var(--border-soft, #eef1ef);
    font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text-mute);
}
.ms-cards-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.ms-cards-note a { color: var(--brand); font-weight: 800; text-decoration: none; white-space: nowrap; }
.ms-cards-note a:hover { text-decoration: underline; }

/* ---- my transactions: short inline preview + "ყველა ტრანზაქციის ნახვა" -> maximize drawer ---- */
/* No filters in the inline preview: hide the personal filter bars in-page; they ride
   into the #txfx drawer on maximize, where they become visible/usable again. */
.txf[data-table="clientTransFin"],
.txf[data-table="clientTransMov"] { display: none; }
.txfx .txf[data-table="clientTransFin"],
.txfx .txf[data-table="clientTransMov"] { display: block; }
/* the "see all" button matches the dashboard feed button, with a little breathing room */
.ms-trans-all { margin-top: 14px; }

@media (max-width: 620px) {
    .ms-profile__bal { align-items: flex-start; }
    /* search drops below the title and spans the row */
    .ms-cardsearch { flex: 1 1 100%; }
    .ms-cardsearch .ms-cardsearch__input { width: 100%; max-width: none; }
    /* stack the list row: chip · number · state on the top line, name then building below */
    .ms-cardrow { display: flex; flex-wrap: wrap; gap: 7px 10px; }
    .ms-cardrow__num   { order: 2; flex: 1 1 auto; }
    .ms-cardrow__state { order: 3; margin-left: auto; }
    .ms-cardrow__nick  { order: 4; flex: 1 1 100%; }
    .ms-cardrow__name  { order: 5; flex: 1 1 100%; }
    .ms-cardrow__bldg  { order: 6; flex: 1 1 100%; }
}

/* ============================================================
   Neighbors payment overview (dashboard): top debtors + figures
   ============================================================ */
.dash-debtors { display: flex; flex-direction: column; }
.dash-debtor { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #eef2ef; }
.dash-debtor:last-child { border-bottom: 0; }
.dash-debtor__rank { width: 20px; flex: 0 0 20px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text-soft); }
.dash-debtor__apt {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; background: hsl(var(--h, 152), 46%, 42%);
}
.dash-debtor__apt.is-empty { background: #e6ebe8; color: var(--text-soft); }
.dash-debtor__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-debtor__name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-debtor__meta { font-size: 11.5px; color: var(--text-soft); }
.dash-debtor__bal { font-size: 14px; font-weight: 800; color: var(--neg); white-space: nowrap; }

.dash-nfigs { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef2ef; }
.dash-nfig { display: flex; flex-direction: column; gap: 2px; }
.dash-nfig__num { font-size: 20px; font-weight: 800; color: var(--text); }
.dash-nfig__num.is-neg { color: var(--neg); }
.dash-nfig__lbl { font-size: 12px; font-weight: 600; color: var(--text-soft); }

/* residents (neighbors) list inside the maximize drawer */
.txfx__body.is-res { padding-top: 16px; }
.txfx__body.is-res .res-card-head { flex: 0 0 auto; margin-bottom: 14px; }
.txfx__body.is-res #clients_wrapper { flex: 1 1 auto; min-height: 0; overflow: auto; }
.txfx__body.is-res #clients { margin: 0; }
.txfx__body.is-res #clients thead th {
    position: sticky; top: 0; z-index: 3; background: var(--pos-soft);
    box-shadow: inset 0 -2px 0 rgba(0, 139, 62, .16);
}
/* square the sticky header in the scroller: the rounded top-left corner otherwise
   leaves a transparent notch through which the debtor row's red left-accent bleeds
   as rows scroll underneath. Flush edges let the opaque header cover them. */
.txfx__body.is-res #clients thead th:first-child,
.txfx__body.is-res #clients thead th:last-child { border-radius: 0; }

/* ============================================================
   Maximize-drawer header title (kulaba) + residents maximize button
   ============================================================ */
/* kulaba drawer: account name + balance pill on the left of the filter row */
.txf__draw-title { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; }
.txf__draw-name { font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.txf__draw-bal { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--pos-soft); padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
/* the maximize button is redundant once the table is already in the drawer */
.txfx__body .txf__maximize { display: none; }
.txfx__body.is-res .res-maxbtn { display: none; }

/* residents card maximize button — opens the full list in the same drawer.
   Pinned to the very right edge of the toolbar (margin-left:auto), with a gentle
   "breathing" pulse so users notice the full-screen affordance. */
.res-maxbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; box-sizing: border-box; flex: 0 0 auto;
    border: 1px solid #cfe6da; background: var(--pos-soft); color: var(--brand);
    border-radius: 11px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
    animation: res-maxbtn-breathe 2.6s ease-in-out infinite;
}
.res-maxbtn:hover, .res-maxbtn:focus-visible {
    background: #fff; color: var(--brand); border-color: #cdd6d1;
    box-shadow: 0 10px 22px -12px rgba(8, 20, 14, .3); transform: translateY(-1px);
    animation-play-state: paused;          /* hold still while the user is interacting */
}
.res-maxbtn svg { width: 17px; height: 17px; }

@keyframes res-maxbtn-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 139, 62, .0);    transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 139, 62, .12); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .res-maxbtn { animation: none; }       /* respect users who opt out of motion */
}

/* chart header: title left · prominent year picker centered · legend right */
.dash-chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-chart-head__title { flex: 1 1 200px; min-width: 0; }
.dash-chart-head__legend { flex: 1 1 120px; justify-content: flex-end; }
.dash-yearpick {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    background: var(--pos-soft); border: 1px solid #cfe6da; border-radius: 999px; padding: 3px;
    box-shadow: 0 6px 16px -10px rgba(0, 139, 62, .45);
}
.dash-yearpick__sel {
    border: 0; background: transparent; font-size: 16px; font-weight: 800; color: var(--brand);
    cursor: pointer; padding: 4px 6px; text-align: center; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.dash-yearpick__btn {
    width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 50%;
    background: #fff; color: var(--brand); font-size: 18px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
    transition: background .15s, color .15s, transform .15s;
}
.dash-yearpick__btn:hover:not(:disabled) { background: var(--brand); color: #fff; transform: translateY(-1px); }
.dash-yearpick__btn:disabled { opacity: .3; cursor: default; }

/* ===== per-month kulaba-expense mini table (folds the chart) ===== */
.dash-chartrow { display: flex; align-items: stretch; min-width: 0; }
.dash-chartcard { flex: 1 1 auto; min-width: 0; align-self: flex-start; }
.dash-monthbox {
    flex: 0 0 0; max-width: 0; overflow: hidden; opacity: 0; padding: 0 !important;
    margin-right: 0; align-self: flex-start;
    transition: flex-basis .38s cubic-bezier(.32,.72,0,1), max-width .38s cubic-bezier(.32,.72,0,1),
                opacity .3s ease, margin-right .38s ease;
}
.dash-chartrow.is-open .dash-monthbox { flex: 0 0 360px; max-width: 360px; opacity: 1; margin-right: 20px; }
.dash-monthbox__in { width: 360px; box-sizing: border-box; padding: 20px 22px; display: flex; flex-direction: column; }
.dash-monthbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dash-monthbox__title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.dash-monthbox__sub { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--neg); }
.dash-monthbox__close { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 9px; background: var(--surface-2, #eef2f0); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.dash-monthbox__close:hover { background: #e2e8e4; color: var(--text); }
.dash-monthbox__close svg { width: 15px; height: 15px; }
.dash-monthbox__total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 8px; padding: 10px 12px; background: var(--neg-soft); border-radius: 11px; }
.dash-monthbox__total span { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.dash-monthbox__total b { font-size: 16px; font-weight: 800; color: var(--neg); }
/* fixed ~5-row body, scrolls inside; bottom fade hints there's more */
.dash-monthbox__bodywrap { position: relative; }
.dash-monthbox__bodywrap::after {
    content: ''; position: absolute; left: 0; right: 6px; bottom: 0; height: 26px;
    background: linear-gradient(rgba(255,255,255,0), var(--surface, #fff));
    pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.dash-monthbox__bodywrap.is-scrollable::after { opacity: 1; }
.dash-monthbox__body { flex: 0 0 auto; height: 178px; overflow-y: auto; min-height: 0; }
.dash-monthbox__loading, .dash-monthbox__empty { padding: 24px 8px; text-align: center; font-size: 13px; color: var(--text-soft); }
.dash-monthbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2ef; }
.dash-monthbox__count { font-size: 12px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.dash-monthbox__all {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7ddd9; border-radius: 10px;
    background: #fff; color: var(--text-soft); font-family: inherit; font-size: 12.5px; font-weight: 700;
    padding: 8px 12px; cursor: pointer; white-space: nowrap;
    transition: color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.dash-monthbox__all svg { width: 14px; height: 14px; transition: transform .15s; }
/* explicit background on hover/focus — the site theme's `button:hover{background:#404040}`
   would otherwise turn this dark grey (the recurring "broken button on hover" bug) */
.dash-monthbox__all:hover,
.dash-monthbox__all:focus,
.dash-monthbox__all:focus-visible,
.dash-monthbox__all:active {
    background: #f1f7f0; color: var(--brand); border-color: #cdd6d1;
    box-shadow: 0 8px 18px -12px rgba(8,20,14,.3); transform: translateY(-1px); outline: none;
}
.dash-monthbox__all:hover svg, .dash-monthbox__all:focus svg { transform: translateX(2px); }
.dash-mrow { display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 8px 2px; border-bottom: 1px solid #eef2ef; }
.dash-mrow:last-child { border-bottom: 0; }
.dash-mrow__d { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.dash-mrow__c { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mrow__a { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--neg); white-space: nowrap; }

/* the month columns become "buttons" */
.dash-bars--clickable .dash-bars__col { cursor: pointer; border-radius: 8px; transition: background .15s; }
.dash-bars--clickable .dash-bars__col:hover { background: rgba(0,139,62,.07); }
.dash-bars__col.is-active { background: rgba(0,139,62,.13); }

@media (max-width: 820px) {
    .dash-chartrow { flex-wrap: wrap; }
    .dash-chartrow.is-open .dash-monthbox { flex: 1 1 100%; max-width: 100%; margin-right: 0; margin-bottom: 16px; }
    .dash-monthbox__in { width: 100%; }
}

/* desktop: no grab handle on the month box (it's an inline slide-in, not a sheet) */
.dash-monthbox__grab { display: none; }

/* ===== phone (≤768): the month detail rises as a bottom-sheet instead of an
   inline box that shoves the chart down ===== */
@media (max-width: 768px) {
    body.dash-month-open { overflow: hidden; }
    .dash-monthbox__scrim {
        position: fixed; inset: 0; z-index: 2147483190;
        background: rgba(8, 18, 12, .45); opacity: 0; transition: opacity .28s ease;
    }
    .dash-monthbox__scrim.is-on { opacity: 1; }

    .dash-chartrow { position: static; }
    .dash-monthbox {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483200;
        flex: none !important; max-width: none !important; width: 100%;
        margin: 0 !important; opacity: 1 !important; overflow: visible !important;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%); transition: transform .34s cubic-bezier(.2, .7, .2, 1);
        box-shadow: 0 -20px 50px -16px rgba(8, 20, 14, .4);
    }
    .dash-chartrow.is-open .dash-monthbox {
        flex: none !important; max-width: none !important; margin: 0 !important;
        transform: translateY(0);
    }
    .dash-monthbox__in { width: 100%; max-height: 86vh; overflow-y: auto; padding-top: 8px; }
    .dash-monthbox__grab { display: block; width: 40px; height: 4px; border-radius: 999px; background: #d7ddd9; margin: 2px auto 12px; }
    /* let the list breathe on a phone (desktop fixes it to ~5 rows) */
    .dash-monthbox__body { height: auto; max-height: 48vh; }
}

/* ============================================================
   Maximized transaction "full view" — bank-app-style feed.
   Date group headers + circular direction icon + 2-line
   (description / type) + amount with ₾. MOBILE ONLY (≤768) and
   scoped to the .txfx drawer; desktop maximized keeps the normal
   table, and in-page transaction tables are unchanged.
   ============================================================ */
@media (max-width: 768px) {
/* full-width feed: DataTables (autoWidth) sets an inline px width on the table that
   squeezes the rows — override it so the title column gets the whole row */
.txfx__body .table.txn-table { width: 100% !important; max-width: 100% !important; margin: 0; }
.txfx__body .dataTables_wrapper .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* two-region layout: the header + filter bar (.txf) stay fixed at the top of the panel,
   and only the transaction LIST scrolls — so the date headers can stick to the top of the
   list. The list scrolls inside the panel (not the page behind it). */
.txfx__body { overflow: hidden; }
.txfx__body .dataTables_wrapper {
    flex: 1 1 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.txfx .table.txn-table thead { display: none; }
.txfx .table.txn-table,
.txfx .table.txn-table tbody { display: block; width: 100%; }

.txfx .table.txn-table tbody tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 96px;
    grid-template-areas: "ic title amt" "ic sub amt";
    align-items: center; align-content: center; column-gap: 12px; row-gap: 1px;
    padding: 11px 6px 11px 2px; min-height: 64px; box-sizing: border-box;
    border-bottom: 1px solid #eef2ef;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.txfx .table.txn-table tbody tr:hover { background: var(--surface-2, #f6f8f7); }
.txfx .table.txn-table tbody td { display: none !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
/* kill the desktop left direction stripe in feed mode */
.txfx .table.txn-table tbody tr.txn-out td:first-child::before,
.txfx .table.txn-table tbody tr.txn-in  td:first-child::before,
.txfx .table.txn-table tbody tr.txn-invoice td:first-child::before { display: none; }

/* left circular direction icon (driven by the row's txn-in/out/invoice class) */
.txfx .table.txn-table tbody tr::before {
    grid-area: ic; content: ""; align-self: center;
    width: 40px; height: 40px; border-radius: 50%;
    background-repeat: no-repeat; background-position: center; background-size: 18px;
}
.txfx .table.txn-table tbody tr.txn-in::before {
    background-color: #e7f6ee;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7c3c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='8 7 17 7 17 16'/></svg>");
}
.txfx .table.txn-table tbody tr.txn-out::before {
    background-color: #fdecec;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='7' x2='17' y2='17'/><polyline points='8 17 17 17 17 8'/></svg>");
}
.txfx .table.txn-table tbody tr.txn-invoice::before {
    background-color: #fdf3e2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4690a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><polyline points='14 3 14 8 19 8'/></svg>");
}

/* title = description (5th visible cell) — single line, truncates (full text in the tap sheet) */
.txfx .table.txn-table tbody td:nth-child(5) { display: block !important; grid-area: title; min-width: 0; }
.txfx .table.txn-table tbody td:nth-child(5) .txn-desc {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.25;
}
/* subtitle = type (2nd cell), shown as plain muted text (no pill) */
.txfx .table.txn-table tbody td:nth-child(2) { display: block !important; grid-area: sub; min-width: 0; }
.txfx .table.txn-table tbody td:nth-child(2) .txn-type {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0; background: none !important; color: var(--text-soft) !important;
    font-size: 12.5px; font-weight: 600;
}
/* amount = 3rd cell, fixed-width column, right-aligned (common right edge across all rows) */
.txfx .table.txn-table tbody td:nth-child(3) { display: block !important; grid-area: amt; justify-self: stretch; align-self: center; text-align: right; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt { display: inline-flex; justify-content: flex-end; width: 100%; gap: 0; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt__ic { display: none; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt__v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt__cur { display: none; }   /* hide "GEL"; ₾ added below */
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt__v::after { content: " ₾"; font-weight: 700; opacity: .85; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt--in  .txn-amt__v { color: #0a7c3c; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt--out .txn-amt__v { color: #c0392b; }
.txfx .table.txn-table tbody td:nth-child(3) .txn-amt--invoice .txn-amt__v { color: #a4690a; }

/* injected day-group header row — sticks to the top of the scrolling list until the
   next day's header pushes it up (bank-statement style) */
.txfx .table.txn-table tbody tr.txn-daygroup {
    display: block; padding: 9px 6px 9px 2px; border-bottom: 0; cursor: default;
    position: sticky; top: 0; z-index: 2;
    background: var(--bg, #eef2f0);
}
.txfx .table.txn-table tbody tr.txn-daygroup:hover { background: var(--bg, #eef2f0); }
.txfx .table.txn-table tbody tr.txn-daygroup::before { display: none; }
.txfx .table.txn-table tbody tr.txn-daygroup td {
    display: block !important; font-size: 12px; font-weight: 800; color: var(--text-soft);
    letter-spacing: .2px; text-transform: none;
}
.txfx .table.txn-table tbody tr.txn-daygroup + tr { border-top: 0; }
/* keep the "empty table" message visible in feed mode */
.txfx .table.txn-table tbody td.dataTables_empty { display: block !important; grid-column: 1 / -1; padding: 28px 8px !important; text-align: center; color: var(--text-soft); }

/* ---- maximized drawer shell (drawer-only): < back button replaces the × ---- */
.txfx__back { display: flex; }
.txfx__close { display: none; }
.txfx__body { padding: 16px 16px 16px; }
/* account name + balance row inside the drawer (clears the back button) */
.txfx .txf__draw-title { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding-left: 46px; min-height: 40px; margin: 0 0 4px; }
.txfx .txf__draw-name { max-width: none; font-size: 17px; }

/* ---- filter chrome (search-icon + date chip + filter icon + collapsible filters) —
   applies to the bar on mobile in BOTH the in-page and maximized views via .txf--mob ---- */
.txf--mob { display: block; padding: 0; margin: 0 0 6px; border: 0; background: transparent; }
.txf--mob .txf__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.txf--mob .txf__adv { display: block; }
.txf--mob.is-adv-open .txf__adv { max-height: 1200px; opacity: 1; margin-top: 12px; }
.txf--mob:not(.is-adv-open) .txf__adv { max-height: 0; opacity: 0; margin-top: 0; }
.txf--mob .txf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

/* search: collapsed to an icon by default; the input + its close (X) button appear as
   a full-width row only after the search icon is tapped (.is-search-open) */
.txf--mob .txf__q { display: none; }
.txf__searchwrap { display: none; }
.txf--mob.is-search-open .txf__searchwrap { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; }
.txf--mob .txf__searchwrap .txf__q {
    display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 46px;
    border-radius: 14px; font-size: 15px; padding: 0 14px 0 44px; background-position: 15px center;
}
/* close (X) button at the right of the search field — hides the search bar again */
.txf--mob .txf__search-close {
    display: inline-flex; flex: 0 0 auto; width: 44px; height: 46px; padding: 0; box-sizing: border-box;
    align-items: center; justify-content: center; border-radius: 14px;
    border: 1px solid var(--border, #e6e9e7); background: #fff; color: #4a5a52; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.txf--mob .txf__search-close:hover, .txf--mob .txf__search-close:focus, .txf--mob .txf__search-close:active {
    background: #fdecec; color: #c0392b; border-color: #f3c8c2; outline: none;
}
.txf--mob .txf__search-close svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* search + filter (+ maximize, in-page) icon buttons sit side by side after the date chip */
.txf--mob .txf__search-btn {
    display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; box-sizing: border-box;
    align-items: center; justify-content: center; border-radius: 14px;
    border: 1px solid var(--border, #e6e9e7); background: #fff; color: #4a5a52; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.txf--mob .txf__search-btn:hover, .txf--mob .txf__search-btn:focus, .txf--mob .txf__search-btn:active {
    background: #fff; color: var(--brand, #19895a); border-color: #cdd6d1; outline: none;
}
.txf--mob .txf__search-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.txf--mob.is-search-open .txf__search-btn { background: var(--pos-soft, #e7f6ee); border-color: #bfe3cf; color: var(--brand, #19895a); }

/* date-range chip (summary; opens the filter panel) — shrinks so it + the icons fit one row */
.txf--mob .txf__daterange {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 9px;
    height: 46px; padding: 0 16px; box-sizing: border-box;
    border: 1px solid var(--border, #e6e9e7); border-radius: 14px; background: #fff;
    font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--text, #14201a);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.txf--mob .txf__daterange:hover, .txf--mob .txf__daterange:focus, .txf--mob .txf__daterange:active {
    background: #fff; color: var(--text, #14201a); border-color: #cdd6d1;
    box-shadow: 0 8px 18px -12px rgba(8,20,14,.3); outline: none;
}
.txf--mob .txf__daterange svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-soft); }
.txf--mob .txf__daterange-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sliders/filter button (icon-only round) — opens the same panel */
.txf--mob .txf__adv-toggle {
    display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
    justify-content: center; border-radius: 14px; background: #fff;
}
.txf--mob .txf__adv-toggle .txf__adv-label, .txf--mob .txf__adv-toggle .txf__chev { display: none; }
.txf--mob .txf__adv-toggle svg { width: 19px; height: 19px; }
.txf--mob.is-adv-open .txf__adv-toggle { background: var(--pos-soft, #e7f6ee); border-color: #bfe3cf; color: var(--brand, #19895a); }

/* maximize button hidden on mobile — the standard view already mirrors the maximized one,
   so the per-table expand control is redundant clutter (keeps the clean 3-item chrome) */
.txf--mob .txf__maximize, .txfx .txf__maximize { display: none; }

/* filter fields stacked, full width, 2-up */
.txf--mob .txf__field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; font-size: 12px; color: #6b7b72; }
.txf--mob .txf__field span { padding-left: 2px; }
.txf--mob .txf__field input { width: 100%; }
.txf--mob .txf__type { grid-column: 1 / -1; min-width: 0; width: 100%; }
.txf--mob .txf__min, .txf--mob .txf__max { width: 100%; }
.txf--mob .txf__row input, .txf--mob .txf__row select { height: 46px; border-radius: 12px; font-size: 14px; }
.txf--mob .txf__clear { width: 100%; height: 46px; border-radius: 12px; }
.txf--mob .txf__apply { width: 100%; height: 46px; border-radius: 12px; justify-content: center; font-size: 14px; }
}   /* end @media (max-width: 768px) — bank-app feed + filter chrome */

/* ============================================================
   Balance top-up (mypay.ge)  — triggers + modal + toast
   ============================================================ */

/* shared trigger pill */
.px-topup {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: 0; border-radius: 999px;
    font-family: var(--font); font-size: 13px; font-weight: 800; line-height: 1.2;
    cursor: pointer; box-sizing: border-box;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
.px-topup__ic { width: 17px; height: 17px; flex: 0 0 auto; }
.px-topup__tx { white-space: nowrap; }
.px-topup__plus { font-weight: 900; font-size: 14px; line-height: 1; margin-left: -3px; opacity: .9; }

/* on the dark top bar — solid white CTA so it pops next to the avatar */
.px-topup--bar { flex: 0 0 auto; background: #fff; color: var(--brand-dark); box-shadow: 0 8px 18px -10px rgba(0,0,0,.55); }
.px-topup--bar:hover, .px-topup--bar:focus, .px-topup--bar:active { background: #eafaf0; color: var(--brand-dark); outline: none; }

/* under the hero balance (dark gradient) — glassy pill */
.px-topup--hero { margin-top: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.30); color: #fff; }
.px-topup--hero:hover, .px-topup--hero:focus, .px-topup--hero:active { background: rgba(255,255,255,.28); color: #fff; outline: none; }

/* in the My Space card (light) — brand green */
.px-topup--ms { margin-top: 10px; background: var(--brand); color: #fff; box-shadow: 0 10px 20px -12px rgba(0,139,62,.75); }
.px-topup--ms:hover, .px-topup--ms:focus, .px-topup--ms:active { background: var(--brand-dark); color: #fff; outline: none; }

/* profile dropdown row */
.px-pop__act--topup { background: var(--pos-soft); color: var(--brand-dark); }
.px-pop__act--topup svg { color: var(--brand); }
.px-pop__act--topup:hover, .px-pop__act--topup:focus { background: #dcefe3; color: var(--brand-dark); outline: none; }

/* phones: in-bar CTA is dropped — the dropdown row covers top-up there */
@media (max-width: 600px) {
    .px-topup--bar { display: none; }
}

/* ---- modal ---- */
.topup-modal { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--font); color: var(--text); }
.topup-modal[hidden] { display: none; }
.topup-modal__backdrop { position: absolute; inset: 0; background: rgba(16,32,24,.5); opacity: 0; transition: opacity .26s ease; backdrop-filter: blur(2px); }
.topup-modal.is-open .topup-modal__backdrop { opacity: 1; }
.topup-modal__box {
    position: relative; width: 100%; max-width: 420px; box-sizing: border-box;
    background: #fff; border-radius: var(--radius); padding: 22px;
    box-shadow: 0 30px 70px -20px rgba(8,30,18,.6);
    transform: translateY(14px) scale(.98); opacity: 0;
    transition: transform .26s cubic-bezier(.2,.8,.25,1), opacity .26s ease;
}
.topup-modal.is-open .topup-modal__box { transform: translateY(0) scale(1); opacity: 1; }
.topup-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.topup-modal__title { font-size: 18px; font-weight: 800; margin: 0; }
.topup-modal__close { width: 36px; height: 36px; min-width: 0; padding: 0; box-sizing: border-box; flex: 0 0 36px; border: 0; border-radius: 10px; background: var(--surface-2, #f1f5f3); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.topup-modal__close:hover, .topup-modal__close:focus { background: #fdecec; color: var(--neg); outline: none; }
.topup-modal__close svg { width: 18px; height: 18px; flex: 0 0 auto; }
.topup-modal__bal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--pos-soft); }
.topup-modal__bal-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.topup-modal__bal-val { font-size: 16px; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
/* target building — must read clearly: dark text, never light-on-light */
.topup-modal__target { display: flex; align-items: center; gap: 11px; margin: 12px 0 10px; padding: 11px 13px; border: 1px solid #dbe4de; border-radius: var(--radius-sm); background: #f7faf8; }
.topup-modal__target-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--pos-soft); color: var(--brand); }
.topup-modal__target-ic svg { width: 20px; height: 20px; }
.topup-modal__target-lines { display: flex; flex-direction: column; min-width: 0; }
.topup-modal__target-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); }
.topup-modal__target-name { font-size: 15.5px; font-weight: 800; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.topup-modal__target-sub { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-top: 1px; overflow-wrap: anywhere; }
.topup-modal__lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-soft); margin-bottom: 7px; }
.topup-modal__field { position: relative; }
.topup-modal__input { width: 100%; box-sizing: border-box; padding: 13px 42px 13px 14px; font-size: 20px; font-weight: 800; color: var(--text); border: 1.5px solid #d6ddd8; border-radius: var(--radius-sm); background: #fff; outline: none; font-family: var(--font); transition: border-color .15s ease, box-shadow .15s ease; }
.topup-modal__input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,139,62,.14); }
.topup-modal__cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 800; color: var(--text-mute); pointer-events: none; }
.topup-modal__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.topup-chip { flex: 1 1 0; min-width: 64px; padding: 9px 6px; border: 1.5px solid #d6ddd8; border-radius: 10px; background: #fff; color: var(--text-soft); font-family: var(--font); font-size: 13px; font-weight: 800; cursor: pointer; box-sizing: border-box; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.topup-chip:hover, .topup-chip:focus { background: var(--pos-soft); border-color: var(--brand-light); color: var(--brand-dark); outline: none; }
.topup-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.topup-modal__err { color: var(--neg); font-size: 12.5px; font-weight: 700; margin: 11px 0 0; }
.topup-modal__err[hidden] { display: none; }
.topup-modal__hint { font-size: 12px; line-height: 1.5; color: var(--text-soft); margin: 11px 0 0; }
.topup-modal__hint b { color: var(--text); }
.topup-modal__foot { display: flex; gap: 10px; margin-top: 18px; }
.topup-btn { flex: 1 1 0; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; font-weight: 800; cursor: pointer; box-sizing: border-box; transition: background .15s ease, box-shadow .15s ease; }
.topup-btn--ghost { background: var(--surface-2, #f1f5f3); color: var(--text-soft); }
.topup-btn--ghost:hover, .topup-btn--ghost:focus { background: #e7ece9; color: var(--text); outline: none; }
.topup-btn--solid { background: var(--brand); color: #fff; box-shadow: 0 12px 24px -12px rgba(0,139,62,.8); }
.topup-btn--solid:hover, .topup-btn--solid:focus { background: var(--brand-dark); color: #fff; outline: none; }
.topup-btn--solid:disabled { background: var(--text-mute); box-shadow: none; cursor: default; }

/* ---- return toast ---- */
.topup-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 3000; max-width: min(92vw, 430px); padding: 13px 18px; border-radius: 12px; font-family: var(--font); font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #fff; box-shadow: 0 18px 44px -14px rgba(8,30,18,.7); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.topup-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.topup-toast.is-ok { background: linear-gradient(120deg, var(--brand-dark), var(--brand)); }
.topup-toast.is-err { background: linear-gradient(120deg, #7a241b, var(--neg)); }

/* ============================================================
   My Space sub-tabs (profile / cards / transactions)
   ============================================================ */
.ms-subtabs { display: flex; gap: 6px; margin-bottom: 16px; padding: 5px; border-radius: 14px; background: var(--surface-2, #f1f5f3); }
.ms-subtab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-soft); font-family: var(--font); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.ms-subtab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ms-subtab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-subtab:hover, .ms-subtab:focus { background: rgba(255, 255, 255, .6); color: var(--text); outline: none; }
.ms-subtab.is-active { background: #fff; color: var(--brand-dark); box-shadow: 0 6px 16px -8px rgba(8, 30, 18, .4); }
.ms-subtab__count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
/* plain display toggle (NO transform/opacity retained) so sticky day-headers inside the
   transactions feed keep working — a retained transform would create a containing block */
.ms-subpane { display: none; }
.ms-subpane.is-active { display: block; }
@media (max-width: 600px) {
    .ms-subtab { padding: 9px 5px; gap: 5px; font-size: 12.5px; }
    .ms-subtab svg { width: 16px; height: 16px; }
}