/* MyLife: "Nordic Fog" theme (Documentation/MyLife.md).
   Desktop = sidebar; phone (< 992px) = top bar + bottom tabs.
   Dark mode: the tokens are redefined under html[data-bs-theme=dark] (set by js/theme-init.js).
   Right-to-left (Arabic): spacing uses logical properties (margin-inline-start…), so it flips by itself. */
:root {
    --forest: #1F3A2E; --pine: #2E5242; --hero: #1F3A2E; --ink: #1B2B24; --body: #5A6B63; --muted: #6B7A73; --pale: #C5D3CB;
    --line: #E1E7E3; --fog: #ECEFEA; --fog2: #F4F6F3; --card: #FFFFFF; --sage: #D5DED8; --chk: #B8C4BE;
    --amber: #F2A541; --amber-50: #FDF1DC; --amber-ink: #8A5A0B;
    --leaf: #2F7A55; --leaf-50: #E2F0E8;
    --rust: #B4441B; --rust-50: #F8E6DF;
    --lake: #4F7CAC; --lake-50: #E4ECF5; --lake-ink: #3E6A99;
    --shadow: 0 6px 22px rgba(27, 43, 36, .06);
    --side: 236px;
    color-scheme: light;
}
html[data-bs-theme=dark] {
    --forest: #3B7A5B; --pine: #2E5242; --hero: #1F3A2E; --ink: #E6EEE9; --body: #A8B8AF; --muted: #8B9C92; --pale: #C5D3CB;
    --line: #26342C; --fog: #0F1712; --fog2: #1A2620; --card: #16201B; --sage: #33443A; --chk: #4A5F53;
    --amber: #F2A541; --amber-50: #3A2E16; --amber-ink: #F4C27A;
    --leaf: #5DBB8A; --leaf-50: #1A3327;
    --rust: #E2754F; --rust-50: #3A1F17;
    --lake: #6E9BCB; --lake-50: #1B2A3A; --lake-ink: #9DBEE3;
    --shadow: 0 6px 22px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

html, body { background: var(--fog); }
body.ml { font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); font-size: 15px; -webkit-font-smoothing: antialiased; }
html[lang=ar] body.ml { font-family: "IBM Plex Sans Arabic", Manrope, system-ui, sans-serif; }
html[lang=ar] body.ml * { letter-spacing: 0 !important; }   /* tracking breaks Arabic letter joining */
a { color: var(--leaf); }
a:hover { color: var(--forest); }
h1, h2, h3 { color: var(--ink); }
.ml-ico { width: 20px; height: 20px; flex: none; }
.ml-mark { width: 28px; height: 28px; flex: none; }
[dir=rtl] .flip { transform: scaleX(-1); }
[hidden] { display: none !important; }

/* ---------- sidebar (desktop) ---------- */
.ml-side { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: var(--side); background: var(--card); border-inline-end: 1px solid var(--line); padding: 20px 14px 14px; display: flex; flex-direction: column; z-index: 20; overflow-y: auto; }
.ml-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 18px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
.ml-brand:hover { color: var(--ink); }
.ml-nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 20px; color: var(--body); text-decoration: none; font-weight: 500; margin-bottom: 2px; }
.ml-nav a .ml-ico { color: var(--body); }
.ml-nav a:hover { background: var(--fog2); color: var(--ink); }
.ml-nav a.on { background: var(--forest); color: #fff; font-weight: 700; }
.ml-nav a.on .ml-ico { color: #fff; }
/* photo in the free space between the menu and the user card; left out when the screen is too short for it */
.ml-side-photo { flex: 1; min-height: 120px; margin: 14px 2px; border-radius: 18px; background: url(../images/side-shelf.jpg) center 85% / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
html[data-bs-theme=dark] .ml-side-photo { opacity: .6; }
@media (max-height: 820px) { .ml-side-photo { display: none; } }
.ml-side-user { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 10px 6px 10px 12px; padding-inline: 12px 6px; border-radius: 18px; background: var(--fog); }
.ml-side-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: 4px; }
.ml-side-user form { margin: 0; }
.ml-by { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; font-size: 12px; color: var(--body); }
.ml-by .ml-mark { width: 13px; height: 13px; }
.ml-by b { font-family: Quicksand, Manrope, sans-serif; font-weight: 700; }
.ml-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.nav-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rust); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- main ---------- */
.ml-main { margin-inline-start: var(--side); min-height: 100vh; padding: 28px 36px 56px; max-width: calc(1280px + var(--side)); }
.ml-phonebar, .ml-tabs { display: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.8px; margin: 0; flex: 1; }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.head-acts .ml-ico { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn-f { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: 22px; background: var(--forest); color: #fff; border: 0; font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.btn-f:hover, .btn-f:focus-visible { background: var(--pine); color: #fff; }
.btn-f .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #1F3A2E; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: -12px; }
.btn-f .plus .ml-ico { width: 18px; height: 18px; }
.btn-g { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.btn-g:hover { background: var(--fog2); color: var(--ink); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
.ml-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--body); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; text-decoration: none; }
.ml-iconbtn:hover { background: var(--fog2); color: var(--ink); }
.ml-iconbtn .ml-ico { width: 18px; height: 18px; }
.ml-iconbtn.solid { background: var(--forest); color: #fff; }
.ml-iconbtn.solid:hover { background: var(--pine); color: #fff; }
.ml-iconbtn.disabled { opacity: .35; pointer-events: none; }
.link-btn { border: 0; background: none; padding: 6px 4px; color: var(--leaf); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.link-btn:hover { color: var(--forest); text-decoration: underline; }
.link-btn.danger { color: var(--rust); }
:focus-visible { outline: 3px solid rgba(242, 165, 65, .7); outline-offset: 2px; }

/* ---------- cards ---------- */
.card-ml { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; min-width: 0; }
.ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ch h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.ch a { font-weight: 700; font-size: 13px; text-decoration: none; }
.ch-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ch-total { font-weight: 700; font-size: 13px; color: var(--body); }
.lab { display: block; font-size: 13px; color: var(--body); font-weight: 500; }
.big { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin: 2px 0 4px; }
.big span { font-size: 14px; font-weight: 500; color: var(--body); letter-spacing: 0; }
.big.neg { color: var(--rust); }
.mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 8px; font-size: 13px; color: var(--body); }
.mrow b { font-size: 14px; color: var(--ink); white-space: nowrap; }
.mrow b em { font-weight: 500; font-style: normal; color: var(--body); }
.mfoot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--body); }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--forest); }
.bar.over i { background: var(--rust); }
.bar.amber i { background: var(--amber); }
.bar.leaf i { background: var(--leaf); }
.bar.thin { height: 6px; }
.ml-hint { font-size: 12.5px; color: var(--body); margin: 8px 0 0; line-height: 1.5; }
.empty, .empty-sm { text-align: center; padding: 18px 8px; color: var(--body); }
.empty p, .empty-sm p { margin: 0 0 12px; }
.empty-sm { padding: 6px 0 4px; text-align: start; }
.empty-sm .btn-g + .btn-g { margin-inline-start: 6px; }
.empty-line { color: var(--body); margin: 6px 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.insight { display: inline-block; padding: 5px 11px; border-radius: 10px; background: var(--rust-50); color: var(--rust); font-weight: 600; font-size: 12.5px; margin: 0 0 10px; }
.xp { font-size: 11.5px; font-weight: 700; font-style: normal; color: var(--amber-ink); background: var(--amber-50); padding: 4px 8px; border-radius: 9px; white-space: nowrap; }
.chip-d { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--pine); color: #fff; font-weight: 700; font-size: 12px; }
.chip-d .ml-ico { width: 14px; height: 14px; color: var(--amber); }
.tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: var(--fog); color: var(--forest); margin-inline-start: 4px; }
.tag.off { background: var(--rust-50); color: var(--rust); }
.pos { color: var(--leaf); }
.neg { color: var(--rust); }
.muted { color: var(--body); }
.sec-h { font-size: 15px; font-weight: 800; color: var(--body); text-transform: uppercase; letter-spacing: .8px; margin: 8px 0 12px; }
html[data-bs-theme=dark] .dot, html[data-bs-theme=dark] .cat-list .bar i[style*=background], html[data-bs-theme=dark] .item-bar { filter: brightness(1.7); }

/* ---------- hero ---------- */
/* desk photo on the end side, under a forest fade that keeps the text readable; Arabic uses a mirrored copy */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; background: linear-gradient(90deg, var(--hero) 36%, rgba(31, 58, 46, .74) 60%, rgba(31, 58, 46, .42)), url(../images/home-desk.jpg) right 62% / cover no-repeat var(--hero); color: #fff; border-radius: 26px; padding: 26px 30px; margin-bottom: 18px; }
[dir=rtl] .hero { background-image: linear-gradient(270deg, var(--hero) 36%, rgba(31, 58, 46, .74) 60%, rgba(31, 58, 46, .42)), url(../images/home-desk-rtl.jpg); background-position: 0 0, left 62%; }
html[data-bs-theme=dark] .hero { box-shadow: inset 0 0 0 1px #2E5242; }
.hero .ring { border-radius: 50%; background: rgba(31, 58, 46, .6); }
.hero-l { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--pale); font-size: 13.5px; font-weight: 500; }
.hero h1 { color: #fff; font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 10px 0 6px; }
.hero p { color: var(--pale); font-size: 15px; line-height: 1.55; margin: 0; max-width: 600px; }
.hero p b { color: #fff; }
.hero .dotsep { margin: 0 6px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-acts button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 12px; padding-inline: 12px 15px; border-radius: 20px; border: 0; background: var(--pine); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.hero-acts button:hover { background: #3a6352; }
.hero-acts .ml-ico { width: 17px; height: 17px; color: var(--amber); }
.hero-r { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; flex: none; }
.ring { position: relative; width: 124px; height: 124px; }
.ring svg { width: 100%; height: 100%; }
.ring-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-n b { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.ring-n small { font-size: 11.5px; color: var(--pale); margin-top: 3px; }
.hero-cap { font-size: 13px; font-weight: 700; }

/* ---------- home grid ---------- */
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "money tasks upcoming" "week week habits" "goals goals notes"; gap: 18px; }
.home-grid .card-ml { margin: 0; }
.g-money { grid-area: money; } .g-tasks { grid-area: tasks; } .g-goals { grid-area: goals; } .g-week { grid-area: week; }
.g-upcoming { grid-area: upcoming; } .g-habits { grid-area: habits; } .g-notes { grid-area: notes; }
.g-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; }
.g-goals > .ch, .g-goals > .empty-sm { grid-column: 1 / -1; }
.g-goals .goal { border-bottom: 0; padding: 4px 0 8px; }
.limit-alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: var(--amber-50); color: var(--ink); font-size: 13px; text-decoration: none; }
.limit-alert .ml-ico { width: 17px; height: 17px; color: var(--amber-ink); margin-top: 1px; }
.limit-alert.over { background: var(--rust-50); }
.limit-alert.over .ml-ico { color: var(--rust); }
.limit-alert:hover { color: var(--ink); filter: brightness(.98); }

/* week chart */
.week { padding-top: 8px; }
.week-plot { position: relative; height: 130px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); }
.week-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.week-bar { width: 100%; max-width: 38px; border-radius: 8px 8px 3px 3px; background: var(--sage); }
.week-bar.over { background: var(--rust); }
.week-bar.today { background: var(--forest); }
.week-line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--chk); z-index: 1; pointer-events: none; }
.week-line span { position: absolute; inset-inline-end: 0; top: -20px; font-size: 11px; font-weight: 600; color: var(--body); background: var(--card); padding-inline-start: 6px; }
.week-days { display: flex; gap: 10px; margin-top: 6px; }
.week-days span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.week-days span.today { color: var(--forest); font-weight: 800; }

/* lists */
.tx-list, .task-list, .cat-list, .cat-manage, .user-list, .item-list, .habit-list { list-style: none; margin: 0; padding: 0; }
.tx-list li { display: flex; align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--line); }
.tx-list li:last-child { border-bottom: 0; }
.tx-t { flex: 1; min-width: 0; }
.tx-t b { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-t small { display: block; color: var(--body); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-amt { font-weight: 800; white-space: nowrap; }
.tx-amt-2 { display: flex; flex-direction: column; align-items: flex-end; }
.tx-amt-2 b { font-weight: 800; white-space: nowrap; }
.tx-amt-2 small { font-size: 12px; color: var(--body); }
.tx-amt-2 .link-btn { padding: 2px 0; }
.day-h { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--body); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 2px; }
.muted-row { opacity: .7; }

/* tasks */
.task { display: flex; align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.tk-check { position: relative; width: 44px; height: 44px; margin-inline-start: -10px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: transparent; }
.tk-check::before { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--chk); }
.tk-check .ml-ico { position: relative; width: 14px; height: 14px; stroke-width: 3; }
.tk-check:hover::before { border-color: var(--forest); }
.task.done .tk-check::before { background: var(--forest); border-color: var(--forest); }
.task.done .tk-check { color: #fff; }
.tk-t { flex: 1; min-width: 0; }
.tk-t b { display: block; font-weight: 600; font-size: 14.5px; }
.task.done .tk-t b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.tk-t small { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--body); margin-top: 2px; }
.tk-t .overdue { color: var(--rust); font-weight: 700; }
.tk-t .prio { display: inline-flex; align-items: center; gap: 3px; color: var(--amber-ink); font-weight: 700; }
.tk-t .prio .ml-ico { width: 13px; height: 13px; }
.area { font-weight: 700; }
.area-work { color: var(--lake-ink); } .area-home { color: var(--amber-ink); } .area-family { color: #8a77b5; } .area-health { color: var(--rust); } .area-personal { color: var(--leaf); }
.quick-task { display: flex; gap: 8px; margin-bottom: 8px; }
.quick-task .form-control { border-radius: 22px; min-height: 44px; }
.quick-task.big { margin-bottom: 14px; }
.quick-task.big .form-control { min-height: 50px; padding-inline-start: 18px; background: var(--card); }
.quick-task.big .ml-iconbtn { width: 50px; height: 50px; }

/* segmented tabs */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--card); border-radius: 14px; padding: 4px; margin-bottom: 16px; box-shadow: var(--shadow); }
.seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; color: var(--body); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.seg a:hover { background: var(--fog2); color: var(--ink); }
.seg a.on { background: var(--forest); color: #fff; }
.seg a em { font-style: normal; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--fog); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.seg a.on em { background: var(--amber); color: #1F3A2E; }
.page-tools .seg { margin: 0; }

/* money */
.month-nav { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border-radius: 22px; padding: 2px; box-shadow: var(--shadow); }
.month-nav b { min-width: 140px; text-align: center; font-size: 14.5px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.stat { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.stat small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--body); }
.stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.pos b { color: var(--leaf); } .stat.neg b { color: var(--rust); }
.stats + .ml-hint { margin-bottom: 18px; }
.money-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.money-grid .card-ml { margin-bottom: 18px; }
.safe { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cat-list li { margin-bottom: 12px; }
.cat-top { display: flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 6px; }
.cat-top span:nth-child(2), .cat-top span:first-child:not(.dot) { flex: 1; }
.cat-top b em { font-weight: 500; font-style: normal; color: var(--body); }
.bar.limit i { background: var(--forest); }
.lim-near .bar.limit i { background: var(--amber); }
.lim-over .bar.limit i { background: var(--rust); }
.lim-over .cat-top b { color: var(--rust); }

/* goals */
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.goal-grid .goal { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; }
.goal { min-width: 0; }
.goal-top { display: flex; align-items: center; gap: 12px; }
.goal-ico { width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--leaf-50); color: var(--leaf); }
.goal-ico.goal-emergency { background: var(--lake-50); color: var(--lake-ink); }
.goal-ico.goal-purchase { background: var(--amber-50); color: var(--amber-ink); }
.goal-t { flex: 1; min-width: 0; }
.goal-t b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-t small { color: var(--body); font-size: 12.5px; }
.goal-top strong { font-size: 15px; color: var(--leaf); }
.goal-amt { margin: 10px 0 8px; font-size: 13.5px; color: var(--body); }
.goal-amt b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); }
.g-goals .goal-amt b { font-size: 17px; }
.goal-note { font-size: 12.5px; color: var(--body); margin: 8px 0 0; }
.goal-note.pos { color: var(--leaf); font-weight: 600; }
.goal-note.warn { color: var(--amber-ink); font-weight: 600; }
.goal-note.neg { color: var(--rust); font-weight: 600; }
.goal-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.goal-acts .btn-g .ml-ico { width: 16px; height: 16px; }
.goal-acts .link-btn { margin-inline-start: auto; }
.goal.closed { opacity: .65; }
.goal.reached .goal-top strong { color: var(--forest); }

/* calendar items: agenda + coming up */
.item { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item-bar { width: 4px; height: 34px; border-radius: 3px; flex: none; }
.item-when { width: 84px; flex: none; }
.item-when b { display: block; font-size: 13px; }
.item-when small { font-size: 12px; color: var(--body); font-weight: 600; }
.item .state { font-weight: 800; color: var(--amber-ink); margin-inline-end: 6px; }
.item.overdue .state, .item.overdue .item-when b { color: var(--rust); }
.item .tk-check { margin-inline-start: 0; }

/* bills */
.bill-ico { width: 40px; height: 40px; border-radius: 13px; background: var(--fog); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bill-overdue .bill-ico { background: var(--rust-50); color: var(--rust); }
.bill-duetoday .bill-ico, .bill-soon .bill-ico { background: var(--amber-50); color: var(--amber-ink); }
.bill-overdue .bill-when { color: var(--rust); font-weight: 700; }
.bill-duetoday .bill-when, .bill-soon .bill-when { color: var(--amber-ink); font-weight: 700; }
.bill-list li { flex-wrap: wrap; padding: 6px 0; }

/* calendar page */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-layout .card-ml { margin: 0; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { text-align: center; font-size: 12px; font-weight: 700; color: var(--body); text-transform: uppercase; letter-spacing: .5px; padding-bottom: 8px; overflow: hidden; }
.cal-grid { gap: 4px; }
.cal-day { min-height: 96px; border-radius: 12px; padding: 6px; background: var(--fog2); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-day:hover { background: var(--fog); color: var(--ink); }
.cal-day.out { opacity: .45; }
.cal-n { font-weight: 700; font-size: 13px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cal-day.today .cal-n { background: var(--amber); color: #1F3A2E; }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--forest); background: var(--card); }
.cal-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-item { font-size: 11px; font-weight: 600; line-height: 1.3; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--ink); border-inline-start: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.cal-task { background: var(--card); }
.cal-more { font-size: 11px; color: var(--body); font-weight: 700; padding-inline-start: 4px; }
.cal-dots { display: none; gap: 3px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--body); }
.cal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 5px; }

/* notes */
.note-search { position: relative; margin-bottom: 12px; max-width: 520px; }
.note-search > span { position: absolute; inset-inline-start: 14px; top: 13px; color: var(--muted); }
.note-search .form-control { padding-inline-start: 42px; background: var(--card); border-radius: 22px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag-row a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 17px; background: var(--card); color: var(--body); font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: var(--shadow); }
.tag-row a.on { background: var(--forest); color: #fff; }
.note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.note { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 16px 18px 10px; display: flex; flex-direction: column; min-width: 0; }
.note.pinned { box-shadow: inset 0 0 0 2px var(--amber-50), var(--shadow); }
.note-top { display: flex; align-items: flex-start; gap: 8px; }
.note-top b { flex: 1; font-size: 15px; padding-top: 8px; }
.note .pin.on { color: var(--amber-ink); background: var(--amber-50); }
.note-body { flex: 1; white-space: pre-line; font-size: 14px; color: var(--body); margin: 4px 0 8px; overflow-wrap: anywhere; }
.note-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.note-foot small { color: var(--muted); font-size: 12px; margin-inline-end: auto; }
.note-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 9px; background: var(--fog); color: var(--forest); }
.nt-title { font-size: 18px; font-weight: 800; }
.nt-body { min-height: 200px; line-height: 1.55; }
.nt-pin { align-self: end; padding-bottom: 10px; }
.pinned-note { display: block; width: 100%; text-align: start; border: 0; background: var(--amber-50); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; color: var(--ink); cursor: pointer; }
.pinned-note b { display: block; font-size: 14px; }
.pinned-note span { display: block; font-size: 12.5px; color: var(--body); white-space: pre-line; overflow-wrap: anywhere; }

/* habits */
.habit { padding: 12px 0; border-bottom: 1px solid var(--line); }
.habit:last-child { border-bottom: 0; }
.habit-main { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.habit-t { flex: 1; min-width: 0; }
.habit-t b { display: block; font-size: 14.5px; }
.habit-t small { color: var(--body); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.habit.done .habit-t b { color: var(--leaf); }
.habit-streak { display: inline-flex; align-items: center; gap: 3px; color: var(--amber-ink); font-weight: 700; }
.habit-streak .ml-ico { width: 13px; height: 13px; }
.habit-btns { display: flex; gap: 6px; }
.habit-btns .ml-iconbtn { width: 44px; height: 44px; border: 1px solid var(--line); }
.habit-btns .ml-iconbtn.solid { border-color: var(--forest); }
.habit-list.compact .habit { padding: 8px 0; }
.habit-list.compact .habit-btns .ml-iconbtn { width: 40px; height: 40px; }
.habit-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.habit-week { display: flex; gap: 5px; margin-inline-end: auto; }
.habit-week span { width: 28px; height: 28px; border-radius: 50%; background: var(--fog); color: var(--body); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.habit-week span.on { background: var(--leaf); color: #fff; }
.habit-week span.today { box-shadow: 0 0 0 2px var(--amber); }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* reports */
.insights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.insights li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.insights li .ml-ico { color: var(--amber-ink); width: 18px; height: 18px; margin-top: 2px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--body); font-weight: 600; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; }
.lg-in, .yin { background: var(--leaf); }
.lg-out, .yout { background: var(--forest); }
.yout.over { background: var(--rust); }
.ychart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 200px; }
.ycol { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.ycol.future { opacity: .35; }
.ybars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line); }
.ybars i { width: 40%; max-width: 18px; border-radius: 5px 5px 2px 2px; }
.ycol span { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.rtable th, .rtable td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: end; white-space: nowrap; }
.rtable th:first-child { text-align: start; }
.rtable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--body); }
.rtable tbody th { font-weight: 700; }
.rtable tfoot th, .rtable tfoot td { font-weight: 800; border-bottom: 0; }
.chg { font-style: normal; font-size: 12px; font-weight: 700; margin-inline-end: 8px; }
.chg.up { color: var(--rust); } .chg.down { color: var(--leaf); } .chg.new { color: var(--muted); }
.mini-nav { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.mini-nav .ml-iconbtn { width: 34px; height: 34px; }
.cmp { margin: -4px 0 12px; }

/* settings / admin */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-grid .card-ml { margin: 0; }
.cat-manage li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cat-manage li.archived { opacity: .5; }
.cm-name { flex: 1; min-width: 0; font-weight: 600; }
.cm-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--body); }
.limit-in.form-control { width: 110px; min-height: 36px; padding: 4px 10px; font-size: 14px; border-radius: 10px; }
.limit-na { width: 110px; text-align: center; color: var(--chk); }
.cat-add { display: flex; gap: 8px; margin-top: 14px; }
.cat-add .form-select { max-width: 160px; }
.user-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.user-list li.off { opacity: .6; }
.user-list form { margin: 0; }
.ml-note { display: flex; flex-direction: column; gap: 6px; background: var(--amber-50); border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; color: var(--ink); }
.temp-pass { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--forest); background: var(--card); border-radius: 10px; padding: 6px 12px; align-self: flex-start; user-select: all; }

/* forms */
.ml-form { display: flex; flex-direction: column; gap: 14px; }
.ml-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ml-field > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.ml-field > span em { font-weight: 500; font-style: normal; color: var(--body); }
.ml-field small { font-size: 12px; color: var(--body); }
.ml-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form-control, .form-select { min-height: 44px; border-radius: 12px; border-color: var(--line); background-color: var(--fog2); font-size: 15px; color: var(--ink); }
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(47, 122, 85, .15); background-color: var(--card); color: var(--ink); }
.form-control:disabled { background-color: var(--fog); color: var(--body); }
.ml-amount { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.ml-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); cursor: pointer; }
.ml-check input { width: 18px; height: 18px; accent-color: var(--forest); }
.ml-alert { background: var(--rust-50); color: var(--rust); border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 14px; margin-bottom: 14px; }

/* dialogs */
.ml-modal .modal-content { border: 0; border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .25); background: var(--card); color: var(--ink); }
.ml-modal .modal-header { border: 0; padding: 22px 24px 4px; }
.ml-modal .modal-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.ml-modal .modal-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 24px; }
.ml-modal .modal-footer { border: 0; padding: 4px 24px 22px; gap: 8px; }
.ml-modal .ml-hint { margin: -6px 0 0; }

/* sweetalert */
.swal2-popup { border-radius: 22px !important; font-family: inherit !important; background: var(--card) !important; color: var(--ink) !important; }
.swal2-title, .swal2-html-container { color: var(--ink) !important; }
.swal2-input { background: var(--fog2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.swal2-styled:focus, .swal2-styled:focus-visible { box-shadow: 0 0 0 3px var(--sage) !important; }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--leaf) !important; color: var(--leaf) !important; }
.install-steps { text-align: start; margin: 12px 0 0; padding-inline-start: 22px; font-size: 15px; }
.install-steps li { margin-bottom: 8px; }

/* sign-in pages */
.ml-auth { display: flex; min-height: 100vh; }
.auth-panel { flex: 1; background: linear-gradient(180deg, rgba(31, 58, 46, .9), rgba(31, 58, 46, .66) 55%, rgba(31, 58, 46, .4)), url(../images/signin-window.jpg) center 85% / cover no-repeat var(--hero); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 60px; position: relative; overflow: hidden; }
.auth-brand { display: flex; align-items: center; gap: 14px; font-size: 44px; font-weight: 800; letter-spacing: -1.5px; }
.auth-brand .ml-mark { width: 56px; height: 56px; }
.auth-tag { font-size: 22px; color: var(--pale); margin: 16px 0 0; }
.auth-by { color: var(--pale); margin-top: 8px; font-size: 14px; }
.auth-main { width: 520px; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--fog); }
.auth-card { width: 100%; max-width: 400px; }
.auth-lang { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 22px; }
.auth-lang a { font-size: 13px; font-weight: 700; color: var(--body); text-decoration: none; padding: 6px 12px; border-radius: 14px; }
.auth-lang a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.auth-brand-sm { display: none; font-size: 26px; color: var(--ink); margin-bottom: 26px; }
.auth-brand-sm .ml-mark { width: 32px; height: 32px; }
.auth-title { font-size: 28px; font-weight: 800; letter-spacing: -.8px; margin: 0 0 6px; }
.auth-sub { color: var(--body); margin-bottom: 22px; line-height: 1.5; }
.auth-foot { margin-top: 16px; text-align: center; }

/* ---------- tablet ---------- */
@media (max-width: 1279px) {
    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "money tasks" "upcoming habits" "week week" "goals notes"; }
    .g-goals { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cal-layout { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 991px) {
    .ml-side { display: none; }
    .ml-main { margin-inline-start: 0; padding: 76px 16px 110px; }
    .ml-phonebar { display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; right: 0; top: 0; height: 60px; padding: 0 16px; background: color-mix(in srgb, var(--fog) 92%, transparent); backdrop-filter: blur(10px); z-index: 30; }
    .ml-phonebar .ml-brand { padding: 0; font-size: 20px; }
    .ml-tabs { display: flex; align-items: center; justify-content: space-around; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 66px; padding: 0 6px; background: var(--card); border-radius: 24px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); z-index: 30; }
    .ml-tabs a, .ml-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 56px; height: 54px; border: 0; background: none; border-radius: 16px; color: var(--body); font-size: 11px; font-weight: 700; text-decoration: none; }
    .ml-tabs .on { color: var(--forest); background: var(--fog2); }
    html[data-bs-theme=dark] .ml-tabs .on { color: var(--leaf); }
    .ml-tabs .ml-tab-add { min-width: 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--amber); color: #1F3A2E; }
    .ml-tabs .ml-tab-add .ml-ico { width: 26px; height: 26px; }
    .ml-more { position: relative; }
    .ml-more .nav-badge { position: absolute; top: 4px; inset-inline-end: 8px; margin: 0; min-width: 18px; height: 18px; font-size: 10px; }
    .ml-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 40; }
    .ml-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: var(--card); border-radius: 24px 24px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); z-index: 41; display: flex; flex-direction: column; gap: 2px; }
    .ml-sheet a, .ml-sheet button { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 12px; border: 0; background: none; border-radius: 14px; color: var(--ink); font-weight: 600; font-size: 15.5px; text-decoration: none; width: 100%; text-align: start; }
    .ml-sheet a:hover, .ml-sheet button:hover, .ml-sheet a.on { background: var(--fog2); }
    .ml-sheet form { margin: 0; }
    .ml-sheet-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--body); padding: 0 12px 6px; }
    .ml-sheet-user { display: flex; align-items: center; gap: 12px; padding: 4px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
    .page-head h1 { font-size: 24px; }
    .page-head .btn-f { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
    .hero { flex-direction: column; align-items: stretch; padding: 22px 20px; border-radius: 24px; }
    .hero { background-image: linear-gradient(180deg, var(--hero) 34%, rgba(31, 58, 46, .74) 66%, rgba(31, 58, 46, .5)), url(../images/home-desk.jpg); background-position: 0 0, 82% 100%; }
    [dir=rtl] .hero { background-image: linear-gradient(180deg, var(--hero) 34%, rgba(31, 58, 46, .74) 66%, rgba(31, 58, 46, .5)), url(../images/home-desk-rtl.jpg); background-position: 0 0, 18% 100%; }
    .hero h1 { font-size: 26px; }
    .hero-r { flex-direction: row; width: auto; gap: 14px; }
    .ring { width: 84px; height: 84px; }
    .ring-n b { font-size: 21px; }
    .home-grid { grid-template-columns: 1fr; grid-template-areas: "money" "upcoming" "tasks" "habits" "week" "goals" "notes"; gap: 14px; }
    .card-ml { padding: 18px; border-radius: 20px; }
    .stats, .stats.stats-3, .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat b { font-size: 19px; }
    .money-grid, .settings-grid { grid-template-columns: 1fr; gap: 14px; }
    .goal-grid { grid-template-columns: 1fr; gap: 14px; }
    .goal-grid .goal { padding: 18px; border-radius: 20px; }
    .note-grid { grid-template-columns: 1fr; gap: 12px; }
    .limit-in.form-control, .limit-na { width: 90px; }
    .cal-day { min-height: 54px; padding: 4px; align-items: center; border-radius: 10px; }
    .cal-items { display: none; }
    .cal-dots { display: flex; }
    .cal-head span { font-size: 10.5px; letter-spacing: 0; }
    .item-when { width: 70px; }
    .habit-week span { width: 24px; height: 24px; }
    .ychart { gap: 3px; height: 170px; }
    .ycol span { font-size: 10px; }
    .auth-panel { display: none; }
    /* phones: the sign-in photo as a strip across the top, fading into the page */
    .auth-main { width: 100%; position: relative; align-items: flex-start; }
    .auth-main::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 250px; background: linear-gradient(180deg, transparent 45%, var(--fog)), url(../images/signin-window.jpg) center 80% / cover no-repeat; }
    html[data-bs-theme=dark] .auth-main::before { opacity: .6; }
    .auth-card { position: relative; z-index: 1; padding-top: 150px; }
    .auth-brand-sm { display: flex; }
    .tx-list .ml-iconbtn { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
    .ml-row2 { grid-template-columns: 1fr; }
    .month-nav b { min-width: 110px; }
    .tx-list li { gap: 8px; }
}

/* ---------- print (Reports → Print / Save as PDF) ---------- */
@media print {
    html, html[data-bs-theme=dark] {
        --ink: #1B2B24; --body: #4A5A52; --muted: #6B7A73; --line: #D5DED8; --fog: #FFFFFF; --fog2: #F4F6F3; --card: #FFFFFF;
        --forest: #1F3A2E; --leaf: #2F7A55; --rust: #B4441B; --amber-ink: #8A5A0B; --sage: #D5DED8;
    }
    .ml-side, .ml-phonebar, .ml-tabs, .ml-sheet, .ml-backdrop, .no-print, .modal, .swal2-container, .page-head .btn-f { display: none !important; }
    .ml-main { margin: 0 !important; padding: 0 !important; max-width: none; }
    body.ml { background: #fff; font-size: 12px; }
    .card-ml, .stat, .month-nav { box-shadow: none !important; border: 1px solid #D5DED8; break-inside: avoid; }
    .rtable { min-width: 0; font-size: 11px; }
    a { color: inherit; text-decoration: none; }
}