/* ========================= Pocket Money - Pro UI (STABLE v7) - No CSS nesting - No duplicated :root overrides - .row is FLEX (safe across pages) - Nested .container won't shrink layouts - Safari-friendly select/date controls - Adds missing styles used by Settings/Calendar/Modal pages - System Dark/Light (prefers-color-scheme) + optional manual override ========================= */ /* ---------- Tokens ---------- */ :root{ color-scheme: dark; /* layout */ --container: 1240px; --radius: 16px; --radius-sm: 12px; /* spacing scale (8px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* dark palette (default) */ --bg: #0b1020; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.04); --glass: rgba(11,16,32,.62); --glass-soft: rgba(255,255,255,.06); --glass-strong: rgba(11,16,32,.78); --glass-border: rgba(255,255,255,.12); --text: #e5e7eb; --muted: rgba(229,231,235,.70); --border: rgba(255,255,255,.10); --primary: #1e40af; --primary-2: #1e3a8a; --danger: #b91c1c; --danger-2: #991b1b; --pos: #16a34a; --pos-bg: rgba(22,163,74,.14); --neg: #ef4444; --neg-bg: rgba(239,68,68,.14); --ring: rgba(30,64,175,.24); --shadow-sm: 0 1px 2px rgba(0,0,0,.20); --shadow-md: 0 8px 24px rgba(0,0,0,.15); --scroll-thumb: rgba(255,255,255,.18); --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Hiragino Sans","Noto Sans JP","Apple Color Emoji","Segoe UI Emoji"; /* 窶懃ｲｾ邂冷€晁｡後↑縺ｩ */ --settle-row-bg: rgba(255,255,255,.08); /* V9: Enhanced design tokens - glow effects */ --glow-primary: 0 0 20px rgba(47,111,255,.4); --glow-accent: 0 0 15px rgba(16,185,129,.3); --glow-danger: 0 0 15px rgba(239,68,68,.3); /* V9: Glass edge lighting */ --glass-edge: 1px solid rgba(255,255,255,.15); --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.1); /* V9: Gradient overlays */ --gradient-primary: linear-gradient(135deg, rgba(47,111,255,.15), rgba(16,185,129,.08)); --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.04), transparent); } /* Optional: manual theme override - If you later add a toggle, set or "dark". - If not set, the OS preference is used. */ html[data-theme="dark"]{ color-scheme: dark; --bg: #0b1020; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.04); --glass: rgba(11,16,32,.62); --glass-soft: rgba(255,255,255,.06); --glass-strong: rgba(11,16,32,.78); --glass-border: rgba(255,255,255,.12); --text: #e5e7eb; --muted: rgba(229,231,235,.70); --border: rgba(255,255,255,.10); --primary: #1e40af; --primary-2: #1e3a8a; --danger: #b91c1c; --danger-2: #991b1b; --pos: #16a34a; --pos-bg: rgba(22,163,74,.14); --neg: #ef4444; --neg-bg: rgba(239,68,68,.14); --ring: rgba(30,64,175,.24); --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 12px 40px rgba(0,0,0,.40); --scroll-thumb: rgba(255,255,255,.18); --settle-row-bg: rgba(255,255,255,.08); /* V9: Enhanced tokens */ --glow-primary: 0 0 20px rgba(47,111,255,.4); --glow-accent: 0 0 15px rgba(16,185,129,.3); --glow-danger: 0 0 15px rgba(239,68,68,.3); --glass-edge: 1px solid rgba(255,255,255,.15); --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.1); --gradient-primary: linear-gradient(135deg, rgba(47,111,255,.15), rgba(16,185,129,.08)); --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.04), transparent); } html[data-theme="light"]{ color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #fbfcff; --glass: rgba(255,255,255,.86); --glass-soft: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.94); --glass-border: rgba(15,23,42,.08); --text: #0f172a; --muted: rgba(15,23,42,.62); --border: rgba(15,23,42,.10); --primary: #2f6fff; --primary-2: #1d4ed8; --danger: #ff3b30; --danger-2: #dc2626; --ring: rgba(47,111,255,.18); --shadow-sm: 0 1px 2px rgba(2,6,23,.06); --shadow-md: 0 12px 32px rgba(2,6,23,.08); --scroll-thumb: rgba(15,23,42,.12); --settle-row-bg: rgba(15,23,42,.06); /* V9: Enhanced tokens */ --glow-primary: 0 0 20px rgba(47,111,255,.25); --glow-accent: 0 0 15px rgba(16,185,129,.2); --glow-danger: 0 0 15px rgba(239,68,68,.2); --glass-edge: 1px solid rgba(15,23,42,.08); --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.5); /* Light mode: gradients off — use transparent so elements fall back to solid */ --gradient-primary: transparent; --gradient-surface: transparent; } /* ---------- Base ---------- */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0.15px; color: var(--text); background: radial-gradient(circle at 20% 50%, rgba(30,64,175,.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(16,185,129,.06) 0%, transparent 50%), var(--bg); } /* Light mode: no body gradient */ html[data-theme="light"] body{ background: var(--bg); } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } small,.small{ font-size:12px; color:var(--muted); } .muted{ color:var(--muted); } hr{ border:0; border-top:1px solid var(--border); margin:16px 0; } /* ---------- Container ---------- */ /* 驥崎ｦ�: width 謖�ｮ壹↓縺励※ 窶懃ｴｰ縺上↑縺｣縺ｦ縺�￥窶� 縺ｮ繧帝亟縺� */ .container{ width: min(var(--container), calc(100vw - 28px)); margin: 0 auto; padding: 14px; padding-top: 82px; /* fixed header offset */ } /* 驥崎ｦ�: 繝�Φ繝励Ξ蜀�〒 .container 縺悟�繧悟ｭ舌〒繧らｸｮ縺ｾ縺ｪ縺�ｈ縺�↓縺吶ｋ */ .container .container{ width: 100%; max-width: 100%; padding: 0; padding-top: 0; } /* ---------- Header / Nav ---------- */ header.top{ position: fixed; top:0; left:0; right:0; z-index: 50; padding: 10px 0; background: rgba(11,16,32,.82); border-bottom: 1px solid rgba(99,102,241,.08); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 12px rgba(0,0,0,.2); } html[data-theme="dark"] header.top{ background: rgba(11,16,32,.82); border-bottom: 1px solid rgba(99,102,241,.08); box-shadow: 0 1px 12px rgba(0,0,0,.2); } html[data-theme="light"] header.top{ background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(99,102,241,.06); box-shadow: 0 1px 8px rgba(15,23,42,.04); } header.top .inner{ width: min(var(--container), calc(100vw - 28px)); margin: 0 auto; padding: 0 14px; display:flex; align-items:center; justify-content:space-between; gap: 10px; } .brand{ font-weight: 700; letter-spacing: .2px; display:flex; align-items:center; gap: 6px; font-size: 13px; } /* Brand icon container - separate light/dark images */ .brand-icon-wrap{ width: 42px; height: 40px; flex-shrink: 0; position: relative; border-radius: 10px; overflow: hidden; } .brand-icon{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity .2s ease; } /* Light mode: show light icon, hide dark icon */ .brand-icon--light{ opacity: 1; } .brand-icon--dark{ opacity: 0; } /* Dark mode: show dark icon, hide light icon */ html[data-theme="dark"] .brand-icon--light{ opacity: 0; } html[data-theme="dark"] .brand-icon--dark{ opacity: 1; } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .brand-icon--light{ opacity: 0; } html:not([data-theme="light"]) .brand-icon--dark{ opacity: 1; } } .brand .dot{ width: 10px; height: 10px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 4px var(--ring); } .nav{ display:flex; gap: 6px; align-items:center; flex-wrap: wrap; } .nav a, .navbtn{ padding: 8px 11px; border-radius: 999px; color: var(--muted); border: 1px solid transparent; background: transparent; font-weight: 600; font-size: 12px; transition: .15s ease; } .nav a:hover, .navbtn:hover{ color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .nav a.active{ color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .navbtn{ cursor:pointer; appearance:none; -webkit-appearance:none; } .navbtn:focus-visible{ outline:none; box-shadow: 0 0 0 6px var(--ring), var(--shadow-sm); } /* ---------- Headings - Premium Design ---------- */ h1{ margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--text) 0%, rgba(148,163,184,0.85) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 10px; } h1::before{ content: ''; width: 4px; height: 22px; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 3px; flex-shrink: 0; } h2{ margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } h3{ margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; } p{ margin: 0 0 10px; color: var(--muted); line-height: 1.6; } /* Light mode heading — gradient off, 薄灰色で見えるように */ html[data-theme="light"] h1{ background: none; color: var(--muted); -webkit-text-fill-color: currentColor; background-clip: unset; } /* ---------- Cards - Premium Design ---------- */ .card{ width:100%; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); transition: all 0.25s ease; position: relative; } .card::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.08) 50%, transparent 90%); pointer-events: none; } .card.soft{ background: var(--glass-soft); } .card.solid{ background: var(--surface); } /* Light mode card — gradient off */ html[data-theme="light"] .card{ background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02); } html[data-theme="light"] .card::after{ display: none; } /* stack spacing (grid繧貞｣翫＆縺ｪ縺�) */ .stack > .card + .card{ margin-top: 14px; } /* card structure */ .card-header{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .card-title{ font-size: 13px; font-weight: 600; color: var(--text); margin: 0; } .card-subtitle{ font-size: 11px; color: var(--muted); margin-top: 2px; } /* ---------- Rows / Layout helpers ---------- */ /* 驥崎ｦ�: .row 繧� grid 縺ｫ縺励↑縺�ｼ亥�繝壹�繧ｸ縺悟｣翫ｌ繧具ｼ� */ .row{ display:flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin: 10px 0; } /* 3譫壻ｸｦ縺ｹ縺溘＞譎ゅｂ縲’lex縺ｧ窶懷享謇九↓3蛻冷€昴↓縺ｪ繧九ｈ縺�↓ */ .row > .card{ flex: 1 1 280px; margin-top: 0; /* 菴呵ｨ医↑鬮倥＆蠅怜刈繧帝亟縺� */ } .filters .row{ margin: 0; } /* filters縺�縺大挨邂｡逅� */ /* ---------- Icon System ---------- */ .icon{ stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon--fill{ fill: currentColor; stroke: none; } .icon--sm{ width: 16px; height: 16px; stroke-width: 2.5; } .icon--md{ width: 20px; height: 20px; stroke-width: 2; } .icon--lg{ width: 24px; height: 24px; stroke-width: 1.75; } /* ---------- Buttons ---------- */ /* Global reset: bare-minimum styling for ALL button/btn elements. Decorative styles live in .btn (primary), .btn.ghost, .btn.danger, etc. This eliminates the need for !important overrides on custom buttons. */ button, .btn{ appearance: none; -webkit-appearance: none; border: none; background: transparent; color: inherit; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none; font-family: inherit; line-height: 1.2; } button:focus-visible, .btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,0.3); } /* --- Primary button (default .btn look) --- */ .btn{ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; border: 1px solid transparent; box-shadow: 0 2px 4px rgba(99,102,241,0.25), inset 0 1px 0 rgba(255,255,255,0.15); position: relative; overflow: hidden; } .btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .btn:hover::before{ left: 100%; } .btn:hover{ background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 6px 20px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.2); transform: translateY(-2px); } .btn:active{ transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(99,102,241,0.3); } /* --- Ghost variant --- */ .btn.ghost{ background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; } .btn.ghost::before{ display: none; } .btn.ghost:hover{ background: var(--surface); border-color: rgba(99,102,241,0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); } /* --- Danger variant --- */ .btn.danger{ background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; box-shadow: 0 2px 4px rgba(239,68,68,0.25); } .btn.danger:hover{ background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); box-shadow: 0 6px 20px rgba(239,68,68,0.4); } /* --- Size modifiers --- */ .btn.small, .btn.mini{ padding: 6px 12px; font-size: 11px; border-radius: 999px; } /* --- Submit buttons get primary styling by default --- */ button[type="submit"]{ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; border: 1px solid transparent; box-shadow: 0 2px 4px rgba(99,102,241,0.25); position: relative; overflow: hidden; } button[type="submit"]:hover{ background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 6px 20px rgba(99,102,241,0.4); transform: translateY(-2px); } button[type="submit"]:active{ transform: translateY(0) scale(0.98); } /* Submit buttons with .ghost or .danger class defer to those variants */ button[type="submit"].ghost{ background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; } button[type="submit"].danger{ background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; box-shadow: 0 2px 4px rgba(239,68,68,0.25); } /* ---------- Shared toggle pill (tabs & seg use identical styling) ---------- */ /* Dark mode (default) — container */ .tabs, .seg{ display:inline-flex; align-items:center; background: rgba(99,102,241,0.10); border: none; border-radius: 10px; padding: 3px; gap: 3px; } .tabs{ margin-bottom: 12px; } /* Dark mode (default) — buttons */ .tab, .seg__btn{ display: inline-flex; align-items: center; justify-content: center; padding: 7px 16px; border-radius: 8px; border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12px; line-height: 1; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; box-shadow: none; transform: none; position: relative; overflow: hidden; font-family: inherit; } .tab:hover, .seg__btn:hover{ color: var(--text); background: rgba(99,102,241,0.12); } .tab:active, .seg__btn:active{ transform: none; } /* Active / selected */ .tab.active, .seg__btn.is-active{ background: #6366f1; color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.4); } .seg__btn:focus-visible, .tab:focus-visible{ outline: 2px solid rgba(99,102,241,0.5); outline-offset: 2px; } /* Tabs/seg are theme-aware via CSS variables — no per-theme overrides needed */ /* ---------- Segmented switch layout ---------- */ .viewbar{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 10px 0 14px; flex-wrap: wrap; } /* Calendar day mode: net vs detail (table below KPI cards) */ html[data-day-mode="net"] .day-table--detail{ display:none; } html[data-day-mode="detail"] .day-table--net{ display:none; } .daymodebar{ display:flex; justify-content:flex-end; margin: 0 0 8px; } .daymodehint{ text-align:right; margin: -2px 0 10px; } /* Top toolbar: tabs + mode switch */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .topbar .tabs{ margin-bottom: 0; } .topbarhint{ margin: -4px 0 12px; } /* Calendar cell mode: net vs detail */ .caldetail{ display:flex; gap: 6px; justify-content:flex-end; margin-top: 6px; flex-wrap: wrap; } .mini{ display:inline-flex; align-items:center; justify-content:center; padding: 4px 6px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } .mini-out{ color: var(--neg); } .mini-in{ color: var(--pos); } /* ---------- Forms ---------- */ label{ font-size:11px; color:var(--muted); font-weight: 500; } input, select, textarea{ width:100%; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); outline:none; transition: .15s ease; font-size: 12px; } select option{ background: var(--bg); color: var(--text); } input:focus, select:focus, textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,255,.12); } textarea{ min-height: 110px; resize: vertical; } /* Safari select arrow */ select:not([multiple]):not([size]){ -webkit-appearance:none; appearance:none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, rgba(229,231,235,.75) 50%), linear-gradient(135deg, rgba(229,231,235,.75) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; } html[data-theme="light"] select:not([multiple]):not([size]){ background-image: linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%), linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%); } /* iOS datetime-local overflow */ input[type="datetime-local"]{ -webkit-appearance:none; appearance:none; min-height: 40px; line-height: 1.2; max-width: 100%; } /* form grids */ .formgrid{ display:grid; grid-template-columns: 120px 1fr; gap: 10px 12px; align-items:center; } @media (max-width: 820px){ .formgrid{ grid-template-columns: 1fr; } } .formgrid > *{ min-width: 0; } /* Placeholder styling for form inputs */ .formgrid input::placeholder{ color: var(--muted); opacity: 0.6; font-weight: 400; } .formgrid select option[disabled]{ color: var(--muted); } /* multi payment */ #multiPay, .multi-pay{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 8px; } #multiPay .pay-row, .pay-row{ padding: 2px 0; } #multiPay .pay-row + .pay-row{ margin-top: 0; } /* ---------- Filters (only here use grid) ---------- */ .filters .row{ display:grid; grid-template-columns: 44px 1fr 44px 1fr 72px 1fr 44px 1fr 60px 1fr auto; gap: 6px; align-items:center; } .filters .row label{ text-align:right; } @media (max-width: 1100px){ .filters .row{ grid-template-columns: 44px 1fr 44px 1fr 72px 1fr 44px 1fr 44px 1fr auto; } } @media (max-width: 820px){ .filters .row{ grid-template-columns: 1fr; } .filters .row label{ text-align:left; } } /* ---------- Metrics / Paygrid - Premium Design ---------- */ .metrics{ display:grid; gap: 14px; margin: 16px 0; align-items: stretch; } .metrics4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 820px){ .metrics4{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .metrics4{ grid-template-columns: 1fr; } } .metric{ position: relative; overflow: hidden; transition: all 0.3s ease; } .metric::before{ content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 0 2px 2px 0; opacity: 0.8; } .metric:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } .metric .k{ font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 10px; } .metric .v{ font-size: 18px; font-weight: 800; margin-top: 5px; margin-left: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; background: linear-gradient(135deg, var(--text) 0%, rgba(148,163,184,0.9) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Light mode metric adjustments */ html[data-theme="light"] .metric:hover{ box-shadow: 0 8px 24px rgba(0,0,0,0.06); } html[data-theme="light"] .metric .v{ background: linear-gradient(135deg, var(--text) 0%, rgba(71,85,105,0.9) 100%); -webkit-background-clip: text; background-clip: text; } .paygrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; } @media (max-width: 1100px){ .paygrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .paygrid .payitem.card{ height: 100%; min-height: 64px; padding: 12px; display:flex; flex-direction:column; justify-content:center; } .payitem .k{ font-size: 11px; color: var(--muted); font-weight: 600; } .payitem .v{ font-size: 16px; font-weight: 700; margin-top: 3px; line-height: 1.15; } @media (max-width: 820px){ .paygrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .paygrid .payitem.card{ min-height: 48px; padding: 10px 8px; } .payitem .k{ font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .payitem .v{ font-size: 11px; font-weight: 700; margin-top: 1px; white-space: nowrap; } } /* ---------- Stats page spacing (especially on mobile) ---------- */ .statsstack{ display:flex; flex-direction:column; gap: 18px; } .statsstack .metrics{ margin: 0; } .statsstack .charts{ margin: 0; } @media (max-width: 820px){ .statsstack{ gap: 22px; } } /* ---------- Tables - Premium Design ---------- */ .tablewrap{ overflow:auto; border-radius: var(--radius); width:100%; max-width:100%; -webkit-overflow-scrolling: touch; } /* Taller table wrapper for long lists (e.g., tag settlement full-period tables) */ .tablewrap--tall{ max-height: 420px; } .table{ width:100%; font-size: 12px; border-collapse: separate; border-spacing: 0; overflow:hidden; border-radius: var(--radius); } .table thead th{ position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, var(--surface-2) 0%, rgba(15,23,42,0.6) 100%); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .table td{ border-bottom: 1px solid rgba(255,255,255,0.04); padding: 10px 12px; vertical-align: middle; white-space: nowrap; line-height: 1.3; transition: all 0.2s ease; } .table th.num, .table td.num{ text-align: right; font-variant-numeric: tabular-nums; } .table tbody tr{ transition: all 0.2s ease; } .table tbody tr:hover{ background: linear-gradient(90deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 100%); } .table tbody tr:hover td{ border-bottom-color: rgba(99,102,241,0.15); } /* Light mode table — gradient off */ html[data-theme="light"] .table thead th{ background: rgba(241,245,249,0.98); } html[data-theme="light"] .table td{ border-bottom-color: rgba(15,23,42,0.06); } html[data-theme="light"] .table tbody tr:hover{ background: rgba(99,102,241,0.05); } html[data-theme="light"] .table tbody tr:hover td{ border-bottom-color: rgba(99,102,241,0.1); } .table tbody tr:last-child td{ border-bottom: none; } .table tr.settle-row > td{ background: var(--settle-row-bg); } .actions{ white-space: nowrap; } /* Table responsive font */ @media (max-width: 820px){ .table{ font-size: 11px; } .table td{ padding: 8px 9px; } .table thead th{ padding: 9px 9px; } } /* ---------- Calendar - Premium ---------- */ .calwrap{ overflow: auto; padding: 4px; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .calwrap::-webkit-scrollbar{ height: 8px; } .calwrap::-webkit-scrollbar-thumb{ border-radius: 999px; background: var(--scroll-thumb); } .calwrap::-webkit-scrollbar-track{ background: transparent; } .calendar{ display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; padding: 4px; } @media (max-width: 820px){ .calendar{ grid-template-columns: repeat(7, minmax(120px, 1fr)); } } /* Weekday headers - Premium */ .calwd{ text-align: center; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 0; border-radius: 10px; border: none; background: transparent; position: relative; } .calwd:first-child{ color: #ef4444; } /* Sunday */ .calwd:last-child{ color: #3b82f6; } /* Saturday */ /* Calendar cells - Premium */ .calcell{ display: block; position: relative; min-height: 140px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s ease; text-decoration: none; overflow: visible; } .calcell::before{ display: none; } .calcell:hover{ border-color: rgba(99,102,241,0.25); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } .calcell:hover::before{ display: none; } .calcell.empty{ background: transparent; box-shadow: none; border-style: dashed; border-color: var(--border); opacity: 0.4; } .calcell.empty:hover{ transform: none; border-color: var(--border); } .calcell--out{ opacity: 0.4; } .calcell.today{ border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 2px 8px rgba(0,0,0,0.06); border-radius: 12px; } .calcell.today::before{ display: none; } /* Day number */ .calday{ font-weight: 800; font-size: 16px; color: var(--text); } .calcell:first-child .calday, .calendar > .calcell:nth-child(7n+8) .calday{ color: #ef4444; } /* Sunday */ .calendar > .calcell:nth-child(7n+14) .calday{ color: #3b82f6; } /* Saturday */ /* Balance pill - Premium */ .pill{ display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; border: none; font-variant-numeric: tabular-nums; } .pill-neg{ color: #ef4444; background: transparent; border: 1.5px solid rgba(99,102,241,.28); box-shadow: none; } .pill-pos{ color: #10b981; background: transparent; border: 1.5px solid rgba(99,102,241,.28); box-shadow: none; } .pill-z{ color: var(--muted); background: transparent; border: 1.5px solid rgba(99,102,241,.28); box-shadow: none; } /* Month dock scrollbar - Premium */ .caljump-outer{ display: flex; justify-content: center; margin-bottom: 16px; } .monthdock{ display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; scroll-snap-type: x mandatory; scroll-padding-inline: 50%; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .monthdock::before, .monthdock::after{ content: ""; flex: 0 0 50%; background: none; border: none; display: block; } .monthdock::-webkit-scrollbar{ display: none; } .monthdock::-webkit-scrollbar-thumb{ border-radius: 999px; background: var(--scroll-thumb); } .monthdock::-webkit-scrollbar-track{ background: transparent; } .chip{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; min-width: 80px; transition: all 0.2s ease; scroll-snap-align: center; } .chip:hover{ color: var(--text); background: var(--hover); } .chip.active{ color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; box-shadow: 0 2px 8px rgba(99,102,241,0.35); } .chip.today-month:not(.active){ border-color: rgba(99,102,241,0.4); color: #6366f1; background: rgba(99,102,241,0.08); } /* Light mode calendar adjustments */ html[data-theme="light"] .calendar-section::before{ opacity: 0.6; } html[data-theme="light"] .calmonth{ background: linear-gradient(135deg, var(--text) 0%, rgba(71,85,105,0.9) 100%); -webkit-background-clip: text; background-clip: text; } html[data-theme="light"] .monthdock{ background: rgba(248,250,252,0.95); border-color: rgba(15,23,42,0.08); } html[data-theme="light"] .chip:hover{ background: rgba(99,102,241,0.06); } html[data-theme="light"] .chip.active{ box-shadow: 0 2px 8px rgba(99,102,241,0.25); } html[data-theme="light"] .calfilter::before{ opacity: 0.5; } html[data-theme="light"] .calsum-cell .calsum-value{ color: var(--text); } html[data-theme="light"] .calcell{ background: #fff; border-color: rgba(15,23,42,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.02); } html[data-theme="light"] .calcell::before{ display: none; } html[data-theme="light"] .calcell.today::before{ display: none; } html[data-theme="light"] .calcell:hover{ box-shadow: 0 4px 12px rgba(0,0,0,0.05); } html[data-theme="light"] .calcell.today{ border-color: rgba(99,102,241,0.4); box-shadow: 0 0 0 3px rgba(99,102,241,0.08), 0 2px 8px rgba(0,0,0,0.04); } html[data-theme="light"] .pill-neg{ color: #dc2626; background: transparent; border-color: rgba(15,23,42,.10); box-shadow: none; } html[data-theme="light"] .pill-pos{ color: #059669; background: transparent; border-color: rgba(15,23,42,.10); box-shadow: none; } html[data-theme="light"] .pill-z{ border-color: rgba(15,23,42,.10); } html[data-theme="light"] .ext-more{ background: rgba(99,102,241,0.08); } /* ---------- Charts ---------- */ .charts{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 16px; margin-top: 18px; margin-bottom: 28px; } @media (max-width: 1100px){ .charts{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px){ .charts{ grid-template-columns: 1fr; row-gap: 18px; } } .chartbox{ height: 220px; } .chartbox canvas{ width:100% !important; height:100% !important; display:block; } /* ---------- Modal (CSV import) ---------- */ body.modal-open{ overflow: hidden; } .modal{ position: fixed; inset: 0; z-index: 100; } .modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } .modal__panel{ position: relative; width: min(720px, calc(100vw - 28px)); margin: 82px auto 0; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .modal__header{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .modal__title{ font-weight: 700; letter-spacing: .2px; font-size: 13px; } .modal__body{ padding: 14px; } .iconbtn{ width: 30px; height: 30px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--muted); box-shadow: none; padding: 0; line-height: 1; cursor:pointer; } .iconbtn:hover{ background: var(--surface); border-color: var(--border); color: var(--text); } .drop{ display:block; padding: 18px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.06); cursor:pointer; text-align:center; } html[data-theme="light"] .drop{ border-color: rgba(15,23,42,.25); background: rgba(255,255,255,.55); } .drop:hover{ border-color: rgba(30,64,175,.40); box-shadow: 0 0 0 6px var(--ring); } .drop input[type="file"]{ display:none; } /* ---------- Utility Classes ---------- */ .mt-8{ margin-top: 8px; } .mt-10{ margin-top: 10px; } .mt-12{ margin-top: 12px; } .mt-14{ margin-top: 14px; } .mt-16{ margin-top: 16px; } .mb-12{ margin-bottom: 12px; } .flex-end{ display: flex; justify-content: flex-end; } .flex-between{ display: flex; justify-content: space-between; align-items: center; } .flex-wrap{ flex-wrap: wrap; } .gap-6{ gap: 6px; } .gap-8{ gap: 8px; } .gap-10{ gap: 10px; } .gap-12{ gap: 12px; } .m-0{ margin: 0; } .section-shadow{ box-shadow: var(--glass-inset-shadow), var(--shadow-sm); } .danger-shadow{ box-shadow: var(--glow-danger), var(--shadow-sm); } .btn-lg{ padding: 12px 24px; } .btn-xl{ padding: 12px 20px; } .fw-700{ font-weight: 700; } /* ---------- Mobile ---------- */ @media (max-width: 560px){ header.top{ padding: calc(10px + env(safe-area-inset-top)) 0 10px; } header.top .inner{ padding: 0 12px; flex-wrap: nowrap; justify-content: space-between; } .brand{ flex: 0 0 auto; } .brand-text{ display: none; } .header-nav{ gap: 2px; } .header-nav .header-icon{ width: 28px; height: 28px; } .header-nav .header-icon svg{ width: 14px; height: 14px; } .header-nav .theme-toggle{ width: 36px; height: 20px; } .header-nav .theme-toggle::after{ width: 14px; height: 14px; } html[data-theme="light"] .header-nav .theme-toggle::after, .header-nav .theme-toggle.is-light::after{ transform: translateX(16px); } .nav{ width: 100%; justify-content: space-between; gap: 6px; } .nav a, .navbtn{ flex: 1 1 auto; text-align:center; padding: 10px 8px; font-size: 13px; } .container{ padding: calc(80px + env(safe-area-inset-top)) 14px 24px; } .calwrap{ overflow-x:auto; overflow-y:visible; } .calendar{ grid-template-columns: repeat(7, 150px); width: max-content; } } /* ---------- 窶懃ｲｾ邂冷€昴き繝�ざ繝ｪ繝√ャ繝� ---------- */ .cat-settle{ display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); font-weight: 800; } html[data-theme="light"] .cat-settle{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.12); color: rgba(15,23,42,.90); } /* ---------- Missing components (pages) ---------- */ /* Page header */ .pagehead{ display:flex; justify-content:space-between; align-items:flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .pagehead h1{ margin: 0; } .pagehead .muted{ margin: 0; } /* Alerts */ .alert{ background: rgba(185,28,28,.16); border-color: rgba(185,28,28,.35); color: var(--text); } html[data-theme="light"] .alert{ background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.24); } /* Sections */ .section{ padding: 18px; } .section__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .section__head h2{ margin: 0; } .section__head .muted{ margin: 0; } /* Generic grid helpers */ .grid2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 820px){ .grid2{ grid-template-columns: 1fr; } } .right{ display:flex; justify-content:flex-end; } /* Field blocks */ .field{ margin-top: 14px; } /* List editors (category/tag) */ .textarea--list{ line-height: 1.55; font-variant-ligatures: none; } .label-mini{ font-size: 11px; letter-spacing: .02em; } .textarea{ width:100%; } /* Details */ .details{ border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; } .details > summary{ cursor: pointer; font-weight: 900; list-style: none; } .details > summary::-webkit-details-marker{ display:none; } /* Form header (transactions add/edit) */ .formhead{ grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 4px; } .formhead .h{ font-weight: 700; letter-spacing: .2px; } .formhead .actions{ display:flex; gap: 8px; } /* Pay rows: make multi-payment usable on desktop & mobile */ .pay-row{ display:grid; /* Prevent controls collapsing to only the arrow on narrow widths */ grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(120px, 160px) auto; gap: 10px; align-items:center; } /* Keep grid children from overflowing their cell */ .pay-row > *{ min-width: 0; } /* Avoid the delete button text wrapping vertically */ .pay-row .btn.small{ white-space: nowrap; min-width: 72px; justify-content: center; } @media (max-width: 820px){ .pay-row{ grid-template-columns: 1fr; } .pay-row .btn{ justify-content:center; } } input.num{ font-variant-numeric: tabular-nums; } /* Table compact */ .table-compact thead th{ padding: 8px 10px; } .table-compact td{ padding: 8px 10px; font-size: 13px; } .scrollx{ overflow:auto; -webkit-overflow-scrolling: touch; } /* Code */ code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); padding: 2px 6px; border-radius: 10px; } html[data-theme="light"] code{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.08); } /* ---------- Calendar header / filters - Premium ---------- */ .calendar-section{ position: relative; overflow: visible; } .calendar-section::before{ content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #10b981); opacity: 0; z-index: 10; border-radius: var(--radius) var(--radius) 0 0; display: none; } .calhead{ display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .caltitle{ width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .caltitle .muted{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .calheaderline{ display: flex; align-items: baseline; gap: 10px; } .calmonth{ font-size: 32px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--text) 0%, rgba(148,163,184,0.85) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .calnav{ display: none; } .calprev, .calnext{ display: none; } .caljump{ display: flex; justify-content: center; } .calfilters{ display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 20px; } @media (max-width: 1100px){ .calfilters{ grid-template-columns: 2fr 2fr 1fr 1fr 1fr; } } @media (max-width: 820px){ .calfilters{ grid-template-columns: 1fr 1fr; } .calfilters .calsum-cell:last-child{ grid-column: 1 / -1; } } @media (max-width: 540px){ .calfilters{ grid-template-columns: 1fr; } } .calfilters > *{ height: 100%; } /* 左端グラデーション線: containing block が padding box のため -1px でボーダー端に合わせる（原因一覧: docs/CALENDAR_GRADIENT_ALIGNMENT_CAUSES.md） */ .calfilter{ padding: 12px 16px; position: relative; overflow: visible; display: flex; align-items: center; gap: 12px; } .card.calfilter{ background: var(--glass-strong); } .calfilter > label, .calfilter > .muted{ flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 700; } .calfilter::before{ content: ''; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 3px; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: var(--radius) 0 0 var(--radius); opacity: 0; pointer-events: none; display: none; } .calfilter__row{ display: flex; gap: 10px; align-items: center; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } .calfilter__row select{ flex: 1 1 auto; min-width: 0; } .calfilter__row .btn, .calfilter__row button{ flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; } /* Calendar summary cells */ .calsum-cell{ display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .calsum-cell:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } .calsum-cell .calsum-label{ font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; flex: 0 0 auto; } .calsum-cell .calsum-value{ font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Calendar cell inner - Premium */ .calcell__top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ext{ display: flex; flex-direction: column; gap: 4px; } .ext-line{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); line-height: 1.3; padding: 2px 0; transition: color 0.15s ease; } .calcell:hover .ext-line{ color: var(--text); } /* External event bars (all-day & multi-day) */ .ext-line.evbar{ background: var(--ext-bg, rgba(156,163,175,.12)); padding: 3px 8px; margin: 2px -4px 0; min-height: 18px; border: none; color: var(--muted); box-shadow: none; } .ext-line.evbar .ext-text{ color: var(--text); } .ext-line.evbar .caldot{ display:none; } .ext-line.evbar--single{ border-radius: 999px; } .ext-line.evbar--start{ border-radius: 999px 0 0 999px; } .ext-line.evbar--mid{ border-radius: 0; } .ext-line.evbar--end{ border-radius: 0 999px 999px 0; } /* All-day external events: paint background (requires template to add class/attr) */ .ext-line.allday, .ext-line.is-allday, .ext-line--allday, .ext-line[data-allday="1"], .ext-line[data-all-day="1"]{ /* User preference: no bold, no special border; keep pill shape */ padding: 3px 8px; min-height: 18px; border-radius: 999px; background: var(--ext-bg, rgba(156,163,175,.12)); border: none; box-shadow: none; color: var(--text); } @media (max-width: 520px){ .ext-line{ font-size: 10.5px; } .ext-line.evbar, .ext-line.allday, .ext-line.is-allday, .ext-line--allday, .ext-line[data-allday="1"], .ext-line[data-all-day="1"]{ padding: 2px 7px; margin-left: -2px; margin-right: -2px; min-height: 17px; } } .ext-line.allday .ext-text, .ext-line[data-allday="1"] .ext-text{ color: var(--text); font-weight: 400; } /* Optional: slightly tint the whole day cell if it contains an all-day event (supported on modern browsers) */ /* Don't tint whole day cell for all-day events (user preference: don't touch background) */ .ext-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ext-more{ font-size: 11px; font-weight: 600; color: #6366f1; padding: 2px 6px; background: rgba(99,102,241,0.1); border-radius: 6px; margin-top: 2px; width: fit-content; } .caldot{ width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* monthdock scrollbar hidden */ /* ---------- Day page KPI - Premium ---------- */ .kpi-row{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 640px){ .kpi-row{ grid-template-columns: 1fr; } } .kpi{ padding: 16px 18px; position: relative; overflow: hidden; } .kpi::before{ content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 0 2px 2px 0; opacity: 0.7; } .kpi:nth-child(2)::before{ background: linear-gradient(180deg, #10b981, #059669); } .kpi:nth-child(3)::before{ background: linear-gradient(180deg, #f59e0b, #d97706); } .kpi .label{ color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 8px; } .kpi .value{ font-size: 24px; font-weight: 800; margin-top: 6px; margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--text); } .dayfilter{ padding: 16px; position: relative; overflow: visible; } .dayfilter::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: var(--radius) 0 0 var(--radius); opacity: 0.5; pointer-events: none; } .filterrow{ display: flex; gap: 10px; align-items: center; margin-top: 10px; } .filterrow select{ flex: 1 1 auto; } .day-scroll{ max-height: 520px; } /* Light mode KPI — now covered by html[data-theme] selectors below */ html[data-theme="light"] .calcell::before{ display: none; } html[data-theme="light"] .calcell.today::before{ display: none; } html[data-theme="light"] .pill-neg{ color: #dc2626; background: transparent; border-color: rgba(15,23,42,.10); } html[data-theme="light"] .pill-pos{ color: #059669; background: transparent; border-color: rgba(15,23,42,.10); } html[data-theme="light"] .kpi::before{ background: #6366f1; } html[data-theme="light"] .kpi:nth-child(2)::before{ background: #10b981; } html[data-theme="light"] .kpi:nth-child(3)::before{ background: #f59e0b; } html[data-theme="light"] .kpi .value{ background: none; color: var(--text); } html[data-theme="light"] .dayfilter::before{ background: #6366f1; } /* ---------- Settings (.ics sources) ---------- */ .sources{ display:flex; flex-direction:column; gap: 10px; } .source{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .source.dirty{ box-shadow: 0 0 0 6px var(--ring), var(--shadow-sm); } .source__left{ flex: 1 1 520px; min-width: 280px; } .source__title{ font-weight: 700; } .badge{ display:inline-flex; align-items:center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; font-weight: 600; } .srcdetails{ margin-top: 8px; } .srcdetails > summary{ cursor:pointer; font-weight: 600; } .val{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .srcurl{ max-width: min(760px, 92vw); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; display:inline-block; vertical-align: bottom; } .colorinput{ width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: transparent; } .danger-panel{ border-color: rgba(185,28,28,.30); background: rgba(185,28,28,.10); } html[data-theme="light"] .danger-panel{ border-color: rgba(255,59,48,.20); background: rgba(255,59,48,.08); } /* ---------- Modal import row ---------- */ .import__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .import__file{ color: var(--muted); font-weight: 600; } .drop__hint{ font-weight: 700; } .drop__sub{ margin-top: 6px; color: var(--muted); font-size: 12px; } /* ---------- A11y / motion ---------- */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } } /* ========================= Quick input page (/quick) ========================= */ .quickwrap{ max-width: 980px; margin: 0 auto; } .quickpanel{ padding: 18px 18px 16px; } .quickhead{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; margin-bottom: 12px; } .quicksub{ margin-top: 4px; font-size: 12px; line-height: 1.5; } .quickmeta{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; } .ok-banner{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); } .quickgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .quickgrid .full{ grid-column: 1 / -1; } .quickgrid input[type="datetime-local"]{ font-variant-numeric: tabular-nums; } .quickgrid .title{ padding: 12px 12px; } .quickrow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items:end; } .amount__input{ padding: 14px 14px; font-size: 22px; font-weight: 950; letter-spacing: .01em; text-align: right; font-variant-numeric: tabular-nums; } .quickactions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 6px; } .quickhint{ margin-top: 6px; font-size: 12px; line-height: 1.45; } /* v3: quick page now reuses the same form grid as /transactions */ .quickform{ max-width: 980px; margin: 0 auto; } .quickform .quickhint{ grid-column: 1 / -1; margin-top: 6px; } .quickform .quickbtnspacer{ display: block; /* placeholder for mobile override */ } @media (max-width: 820px){ .quickform .quickbtnspacer{ display:none; } .quickform button[type="submit"]{ width: 100%; padding: 12px 14px; } } /* Mobile-first improvements */ @media (max-width: 680px){ .quickpanel{ padding: 16px 14px 14px; } .quickgrid{ grid-template-columns: 1fr; } .quickrow{ grid-template-columns: 1fr; } .quickmeta{ display:none; } .amount__input{ font-size: 20px; } .quickactions{ position: sticky; bottom: 10px; z-index: 5; padding: 10px; border-radius: 16px; border: 1px solid var(--border); background: rgba(15,23,42,.60); backdrop-filter: blur(14px); justify-content: stretch; } .quickactions .btn{ flex: 1; justify-content:center; padding: 12px 14px; } } @media (max-width: 680px){ html[data-theme="light"] .quickactions{ background: rgba(255,255,255,.72); } } /* --- V7: Tag candidate preview helpers --- */ .chip.tiny{ padding: 6px 10px; font-size: 12px; font-weight: 900; min-width: auto; } .chipwrap{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; } .warn{ border: 1px solid rgba(185,28,28,.35); background: rgba(185,28,28,.14); color: var(--danger); padding: 10px 12px; border-radius: 14px; box-shadow: var(--shadow-sm); font-weight: 800; font-size: 13px; } /* --- V8+ Settings layout (pro polish) --- */ .settingsgrid{ display:grid; grid-template-columns: minmax(520px, 1fr) minmax(340px, 480px); gap: 16px; align-items:start; } @media (max-width: 980px){ .settingsgrid{ grid-template-columns: 1fr; } } .settingscol{ display:flex; flex-direction:column; gap: 14px; } .settingscol .card.soft{ padding: 16px; } .settingssingle{ display:flex; flex-direction:column; gap: 14px; } .settingssingle .card.soft{ padding: 16px; } /* Settings inner panels: keep the same tone as other pages (e.g., Stats) - Avoid "bright" blocks in dark mode - Still keep card separation via border + blur */ .settingssingle .card.soft{ background: var(--glass-strong); } .h2{ margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: .2px; } .listgrid, .taggrid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-items:start; } @media (max-width: 980px){ .listgrid, .taggrid{ grid-template-columns: 1fr; } } /* V8 Settings: payment cells (ICS-like) */ .paygrid--settings{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } /* V8.5 Settings: payment list (vertical, ICS/iOS-like) */ .paylist{ display:flex; flex-direction:column; gap: 6px; } .payitem--settings{ /* Match other pages (e.g., Stats): deeper glass for better contrast */ background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px 10px; } .payitem--settings .payitem__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; } .payitem--settings .paybadge{ display:inline-flex; align-items:center; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--muted); } .payitem--settings .payitem__body{ display:flex; flex-direction:column; gap: 6px; } /* V8.7 Settings: category/tag options list (vertical, iOS-like) */ .optlist{ display:flex; flex-direction:column; gap: 6px; } .optitem--settings{ /* Match other pages (e.g., Stats): deeper glass for better contrast */ background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px 10px; } .optitem--settings .optitem__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; } .optitem--settings .optbadge{ display:inline-flex; align-items:center; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--muted); } .optitem--settings .optitem__body{ display:flex; flex-direction:column; gap: 6px; } .payformgrid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 8px; align-items:end; } @media (max-width: 820px){ .payformgrid{ grid-template-columns: 1fr; } } .payformgrid--compact{ grid-template-columns: 1.25fr .65fr 1fr; align-items:end; } .payformgrid--compact .seg-ios .seg__opt span{ padding: 7px 10px; } @media (max-width: 980px){ .payformgrid--compact{ grid-template-columns: 1fr; } } /* Segmented control (iOS-like) */ .seg-ios{ display:grid; gap: 0; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-soft); overflow:hidden; } .seg-ios.seg--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg-ios .seg__opt{ position: relative; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; } .seg-ios .seg__opt input{ position:absolute; opacity:0; pointer-events:none; } .seg-ios .seg__opt span{ width:100%; text-align:center; padding: 7px 10px; font-weight: 700; font-size: 12px; color: var(--text); border-right: 1px solid var(--glass-border); } /* V8.7 Settings: simple option list (category/tag) */ .optlist{ display:flex; flex-direction:column; gap: 6px; } .optitem--settings{ /* Match other pages (e.g., Stats): deeper glass for better contrast */ background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px 10px; } .optitem--settings .optitem__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; } .optitem--settings .optbadge{ display:inline-flex; align-items:center; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--muted); } .optitem--settings .optitem__body{ display:flex; flex-direction:column; gap: 6px; } .seg-ios .seg__opt:last-child span{ border-right: none; } .seg-ios .seg__opt input:checked + span{ /* Selected segment should be clearly visible */ background: linear-gradient(180deg, var(--primary), var(--primary-2)); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-sm); color: rgba(255,255,255,.98); } html[data-theme="light"] .seg-ios .seg__opt input:checked + span{ background: var(--primary); } /* seg-ios light mode already covered by html[data-theme="light"] above */ /* Provide a subtle hover affordance for unselected segments */ .seg-ios .seg__opt input:not(:checked) + span:hover{ background: var(--glass); } /* Improve focus visibility for keyboard users */ .seg-ios .seg__opt input:focus-visible + span{ outline: 2px solid rgba(59,130,246,.55); outline-offset: -2px; } /* delete button emphasis */ .payitem--settings .pay-del:hover{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: rgba(185,28,28,1); } .paycell{ background: var(--glass-soft); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; min-height: 204px; display:flex; flex-direction:column; gap: 10px; } .paycell .input{ width: 100%; } .paycell__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; } .paymeta{ display:flex; align-items:baseline; justify-content:space-between; width: 100%; gap: 10px; } .paymeta__label{ font-size: 12px; font-weight: 600; } .paymeta__num{ font-size: 12px; font-weight: 600; } .paycell .pay-name{ font-weight: 700; } .paycell .pay-kind{ margin-top: auto; /* stick to bottom */ } .pay-del{ flex: 0 0 auto; } .pay-del:hover{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: rgba(185,28,28,1); } .pillchk{ position: relative; display: inline-flex; align-items:center; cursor: pointer; user-select:none; } .pillchk input{ position:absolute; opacity:0; pointer-events:none; } .pillchk span{ display:inline-flex; align-items:center; gap:6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-soft); color: var(--text); font-weight: 600; font-size: 12px; letter-spacing: .02em; } .pillchk input:checked + span{ background: var(--primary); border-color: transparent; color: white; box-shadow: var(--shadow-sm); } /* Tighten payment items spacing */ .payitem--settings .input{ padding: 8px 10px; font-size: 14px; } .payitem--settings .label-mini{ margin-bottom: 4px; display:block; } .payitem--settings .pay-kind{ font-size: 12px; } /* V8.8 Settings: one-row cells for payment/category/tag */ .paylist{ gap: 4px; } .optlist{ gap: 4px; } .payitem--row{ display:grid; grid-template-columns: 28px 80px 1fr 90px 200px auto 34px; gap: 10px; align-items:center; font-size: 13px; /* タグ候補と同じサイズに統一 */ } .payitem--row .paybadge{ white-space:nowrap; font-size: 12px; } .payitem--row .pay-initial{ text-align:right; } .payitem--row .seg-ios{ min-width: 200px; } .payitem--row .pay-show-balance{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } .payitem--row .pay-show-balance input[type="checkbox"]{ width: 16px; height: 16px; } .payitem--row .pay-del{ justify-self:end; } .optitem--row{ display:grid; grid-template-columns: 28px 80px 1fr 34px; gap: 10px; align-items:center; font-size: 13px; } /* Category row: 右端にチェック（決済の残高表示と同じ並び） */ #catList .optitem--row{ grid-template-columns: 28px 80px 1fr auto 34px; } #catList .optitem--row .opt-name{ min-width: 0; } #catList .optitem--row .cat-show-chart{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } #catList .optitem--row .cat-show-chart input[type="checkbox"]{ width: 16px; height: 16px; } .optitem--row .optbadge{ white-space:nowrap; font-size: 12px; } .optitem--row .opt-del{ justify-self:end; } /* Drag handle for sortable lists */ .drag-handle{ cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; user-select: none; padding: 4px; border-radius: 6px; transition: background .15s ease, color .15s ease; } .drag-handle:hover{ background: var(--surface); color: var(--text); } .drag-handle:active{ cursor: grabbing; } /* Sortable list drag states */ .sortable-list [draggable="true"]{ transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease; } .sortable-list .dragging{ opacity: 0.6; background: var(--primary-bg); box-shadow: 0 4px 20px rgba(0,0,0,.2); transform: scale(1.02); } .sortable-list .drag-over{ border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); } /* ------------------------------------------------------------------------- Settings polish: make row inputs feel like part of the cell (iOS-like) - The container (.payitem--settings / .optitem--settings) is the "field" - Inputs become transparent until focus (removes the "pill inside pill") ---------------------------------------------------------------------------*/ /* Row containers: slightly stronger glass + blur for better separation */ .settingssingle .payitem--settings, .settingssingle .optitem--settings{ background: var(--glass-strong); border-color: var(--glass-border); border-radius: var(--radius); /* Keep the same "glass" feel as .card */ backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* Inputs inside settings rows: transparent by default */ .settingssingle .payitem--row input, .settingssingle .optitem--row input{ background: transparent; border-color: transparent; box-shadow: none; font-size: 13px; /* 統一されたフォントサイズ */ } /* Keep placeholder subtle (works in both themes) */ .settingssingle .payitem--row input::placeholder, .settingssingle .optitem--row input::placeholder{ color: var(--muted); } /* Focus state: bring back input affordance without overpowering the cell */ .settingssingle .payitem--row input:focus, .settingssingle .optitem--row input:focus{ background: var(--surface); border-color: rgba(30,64,175,.35); box-shadow: 0 0 0 5px var(--ring); } /* Ensure the segmented control blends with the row container */ .settingssingle .payitem--row .seg-ios{ background: transparent; border-color: var(--glass-border); } /* Tighten segmented control height slightly on settings rows */ .payitem--row .seg-ios .seg__opt span{ padding: 6px 10px; } /* --- Guardrails: keep page-level segmented buttons horizontal --- The app uses `.seg` for view mode switches (e.g., /transactions: 詳細/収支). Settings uses `.seg-ios` for iOS-like radio segments. */ #txModeSeg.seg, .daymodebar .seg, .topbar .seg{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } #txModeSeg .seg__btn, .topbar .seg .seg__btn{ white-space: nowrap; writing-mode: horizontal-tb; } /* Responsive fallback (keep single row as long as possible; allow horizontal scroll if needed) */ @media (max-width: 1100px){ .payitem--row{ grid-template-columns: 28px 70px 1fr 80px 160px auto 34px; gap: 8px; overflow-x:auto; } } /* ========================= V9: Enhanced Design System - FAB (Floating Action Button) - Input Modal - Dashboard Layout - Bulk Action Bar - Enhanced Glassmorphism - Theme Toggle ========================= */ /* V9: Dense layout values are already set in the base definitions above */ /* ---------- V9: Header Redesign - Clean ---------- */ header.top .inner{ display: flex; justify-content: space-between; align-items: center; gap: 16px; } header.top .header-nav{ margin-left: auto; } .header-actions{ display: flex; align-items: center; gap: 8px; } .header-nav{ display: flex; align-items: center; gap: 6px; } .header-icon{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: transparent; border: none; color: var(--muted); cursor: pointer; transition: all .2s ease; text-decoration: none; } .header-icon:hover{ color: var(--text); background: var(--surface); } .header-icon:focus, .header-icon:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring); } .header-icon.active, a.header-icon[aria-current="page"]{ background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; } .header-icon svg{ width: 18px; height: 18px; } /* Theme toggle switch */ .theme-toggle{ position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--glass-soft); border: 1px solid var(--glass-border); cursor: pointer; transition: .2s ease; opacity: 0.7; } .theme-toggle:hover{ opacity: 1; background: var(--surface); } .theme-toggle::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--muted); transition: .2s ease; } .theme-toggle:hover::after{ background: var(--text); } html[data-theme="light"] .theme-toggle::after, .theme-toggle.is-light::after{ transform: translateX(18px); } /* Auto mode lock indicator */ .theme-toggle.is-locked{ cursor: not-allowed; opacity: 0.5; } .theme-toggle.is-locked::before{ content: ""; position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); background-size: 9px 9px; background-repeat: no-repeat; background-position: center; } .theme-toggle.is-locked:hover{ opacity: 0.5; } @media (max-width: 820px){ header.top .inner{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .header-nav{ gap: 4px; } .header-nav .header-icon{ width: 32px; height: 32px; } .header-nav .header-icon svg{ width: 16px; height: 16px; } } /* ---------- V9: FAB (Floating Action Button) ---------- */ .fab{ position: fixed; bottom: 20px; right: 20px; z-index: 90; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(16,185,129,.9), rgba(6,182,212,.9)); border: 1px solid rgba(255,255,255,.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(16,185,129,.25); transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); } .fab:hover{ transform: scale(1.05); box-shadow: 0 6px 20px rgba(16,185,129,.4); } .fab:active{ transform: scale(0.95); } .fab svg{ width: 20px; height: 20px; } .fab-icon{ font-size: 22px; line-height: 1; font-weight: 300; } /* FAB tooltip */ .fab[data-tooltip]::before{ content: attr(data-tooltip); position: absolute; right: 100%; margin-right: 12px; padding: 8px 12px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .fab:hover[data-tooltip]::before{ opacity: 1; } /* Mobile FAB adjustments */ @media (max-width: 820px){ .fab{ bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; } .fab[data-tooltip]::before{ display: none; } } /* ---------- V9: Input Modal (PC) ---------- */ .input-modal{ position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .input-modal.is-open{ opacity: 1; pointer-events: auto; } .input-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .input-modal__panel{ position: relative; width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow: auto; background: var(--glass-strong); border: var(--glass-edge); border-radius: 24px; box-shadow: var(--shadow-md); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); transform: translateY(20px); transition: transform .25s ease; } .input-modal.is-open .input-modal__panel{ transform: translateY(0); } .input-modal__header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--glass-strong); backdrop-filter: blur(20px); z-index: 1; } .input-modal__title{ font-weight: 700; font-size: 18px; letter-spacing: .2px; } .input-modal__body{ padding: 20px; } /* Fix form element styling inside input modal */ .input-modal__body input, .input-modal__body select, .input-modal__body textarea{ background: var(--surface); border-color: var(--border); color: var(--text); } .input-modal__body input:focus, .input-modal__body select:focus, .input-modal__body textarea:focus{ border-color: rgba(47,111,255,.45); box-shadow: 0 0 0 4px var(--ring); } .input-modal__body label{ color: var(--muted); } .input-modal__body .pay-row{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; } .input-modal__body .multi-pay{ margin-bottom: 12px; } .input-modal__body .btn{ background: var(--primary); color: white; } .input-modal__body .btn.ghost{ background: transparent; color: var(--text); border-color: var(--border); } .input-modal__body .btn.ghost:hover{ background: var(--surface); } .input-modal__footer{ display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 24px 24px; } /* ---------- V9: Dashboard Layout ---------- */ .dashboard{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1100px){ .dashboard{ grid-template-columns: 1fr; } } .dashboard__main{ display: flex; flex-direction: column; gap: 12px; } .dashboard__sidebar{ display: flex; flex-direction: column; gap: 12px; position: sticky; top: 90px; } @media (max-width: 1100px){ .dashboard__sidebar{ position: static; } } .dashboard__section-header{ margin-bottom: 4px; } .dashboard__section-header h2{ font-size: 14px; font-weight: 600; margin: 0; } /* Dashboard filter bar */ .filter-bar{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--glass); border: var(--glass-edge); border-radius: var(--radius); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--glass-inset-shadow), var(--shadow-sm); } .filter-bar select, .filter-bar input{ flex: 1; min-width: 80px; max-width: 140px; } .filter-bar .btn{ flex-shrink: 0; } /* Chip-style filter bar */ .filter-bar--chips{ gap: 6px; padding: 8px 10px; } .filter-chip{ display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; } .filter-chip__label{ font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; } .filter-chip select{ background: transparent; border: none; padding: 0; font-size: 11px; font-weight: 700; color: var(--text); min-width: 50px; max-width: 80px; } .filter-chip select:focus{ box-shadow: none; } .filter-search{ flex: 1; min-width: 80px; max-width: 120px; padding: 6px 10px; font-size: 11px; border-radius: 999px; } /* Dashboard transaction list */ .tx-list{ background: var(--glass-strong); border: var(--glass-edge); border-radius: var(--radius); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--glass-inset-shadow), var(--shadow-sm); max-height: 520px; overflow: auto; } .tx-list--dashboard{ max-height: none; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .tx-list__header{ display: grid; grid-template-columns: 100px 1fr 120px 80px 100px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted); position: sticky; top: 0; background: var(--glass-strong); backdrop-filter: blur(14px); z-index: 1; } .tx-list__row{ display: grid; grid-template-columns: 100px 1fr 120px 80px 100px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; transition: background .1s ease; } .tx-list__row:hover{ background: rgba(47,111,255,.06); } .tx-list__row:last-child{ border-bottom: none; } .tx-list__amount{ text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .tx-list__amount.is-pos{ color: var(--pos); } .tx-list__amount.is-neg{ color: var(--neg); } /* Dashboard transaction row (card style) */ .tx-row{ display: grid; grid-template-columns: 24px 1fr 70px 70px 60px 80px; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; transition: all .12s ease; text-decoration: none; color: inherit; } .tx-row:hover{ background: rgba(47,111,255,.08); border-color: rgba(47,111,255,.2); transform: translateX(2px); } .tx-row__icon{ font-size: 14px; opacity: 0.6; } .tx-row__main{ display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tx-row__title{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tx-row__time{ font-size: 10px; color: var(--muted); } .tx-row__category, .tx-row__tag, .tx-row__payment{ font-size: 10px; color: var(--muted); white-space: nowrap; } .tx-row__amount{ text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .tx-row__amount.is-pos{ color: var(--pos); } .tx-row__amount.is-neg{ color: var(--neg); } @media (max-width: 820px){ .tx-list__header, .tx-list__row{ grid-template-columns: 80px 1fr 90px; } .tx-list__header > *:nth-child(3), .tx-list__header > *:nth-child(4), .tx-list__row > *:nth-child(3), .tx-list__row > *:nth-child(4){ display: none; } .tx-row{ grid-template-columns: 20px 1fr 60px; } .tx-row__category, .tx-row__tag, .tx-row__payment{ display: none; } } /* Dashboard widgets */ .widget{ background: var(--glass-strong); border: var(--glass-edge); border-radius: var(--radius); padding: 12px 14px; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--glass-inset-shadow), var(--shadow-sm); } .widget--hero{ padding: 14px 16px; } .widget__header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .widget__title{ font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 0; } .widget__period{ font-size: 10px; color: var(--pos); } .widget__value{ font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .widget__value--large{ font-size: 28px; letter-spacing: -0.5px; } .widget__value.is-pos{ color: var(--pos); } .widget__value.is-neg{ color: var(--neg); } .widget__sub{ font-size: 11px; color: var(--muted); margin-top: 4px; } /* Widget chart container */ .widget__chart{ height: 80px; margin-top: 8px; } .widget__chart--mini{ height: 50px; margin-top: 10px; } .widget__chart canvas{ width: 100% !important; height: 100% !important; } /* Widget spending chart layout */ .widget__spending-chart{ display: flex; gap: 12px; align-items: center; margin-top: 8px; } .widget__spending-chart .widget__chart{ flex: 0 0 100px; height: 100px; margin: 0; } .widget__legend{ flex: 1; display: flex; flex-direction: column; gap: 4px; } .legend-item{ display: flex; align-items: center; gap: 6px; font-size: 10px; } .legend-dot{ width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } .legend-label{ color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Payment balance list widget */ .pay-balance-list{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .pay-balance-list--compact{ gap: 2px; } .pay-balance-item{ display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .pay-balance-item__name{ font-weight: 600; font-size: 11px; } .pay-balance-item__value{ font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; } .pay-balance-row{ display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); } .pay-balance-row:last-child{ border-bottom: none; } .pay-balance-row__name{ font-size: 11px; color: var(--text); } .pay-balance-row__value{ font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- V9: Bulk Action Bar ---------- */ .bulk-bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; transition: all .2s ease; } .bulk-bar.is-active{ background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(139,92,246,.06)); border-color: rgba(99,102,241,.3); box-shadow: 0 0 16px rgba(99,102,241,.3); } @keyframes bulkBarIn{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: translateY(0); } } .bulk-bar__left{ display: flex; align-items: center; gap: 8px; } .bulk-bar__hint{ color: var(--muted); font-size: 12px; } .bulk-bar__count{ font-weight: 700; color: #818cf8; } .bulk-bar__actions{ display: flex; gap: 8px; } .bulk-bar__actions button:disabled{ opacity: 0.5; cursor: not-allowed; } /* Checkbox styling for bulk selection */ .tx-checkbox{ width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; transition: .15s ease; position: relative; } .tx-checkbox:checked{ background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,.4); } .tx-checkbox:checked::after{ content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: 700; } .tx-checkbox:hover{ border-color: #818cf8; } .tx-checkbox:focus-visible{ box-shadow: 0 0 0 3px rgba(99,102,241,.25); } /* ---------- V9: Enhanced Table Styles ---------- */ .table--enhanced{ width: 100%; } .table--enhanced thead th{ background: var(--glass); backdrop-filter: blur(10px); } .table--enhanced .col-check, .table--compact .col-check{ width: 40px; text-align: center; } .table--enhanced .col-actions{ width: 100px; text-align: right; } .table--enhanced .row-actions{ display: flex; gap: 6px; justify-content: flex-end; } .table--enhanced .row-actions .iconbtn{ width: 30px; height: 30px; font-size: 14px; } /* ---------- V9: Enhanced Card Styles ---------- */ .card--glow{ box-shadow: var(--glow-primary), var(--shadow-sm); } .card--glow:hover{ box-shadow: 0 0 25px rgba(47,111,255,.3), var(--shadow-md); } /* ---------- V9: Chip Selection UI ---------- */ .chip-group{ display: flex; flex-wrap: wrap; gap: 8px; } .chip-select{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s ease; } .chip-select:hover{ border-color: var(--primary); background: rgba(47,111,255,.08); } .chip-select.is-selected{ background: var(--primary); border-color: var(--primary); color: white; box-shadow: var(--glow-primary); } .chip-select input{ display: none; } /* ---------- V9: Payment Row Enhancement ---------- */ .pay-row--enhanced{ display: grid; grid-template-columns: 60px 1fr 1fr 120px auto; gap: 10px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; } .pay-row--enhanced:last-child{ margin-bottom: 0; } .pay-toggle{ display: flex; align-items: center; justify-content: center; } .pay-toggle-btn{ width: 48px; height: 28px; border-radius: 999px; border: none; cursor: pointer; font-weight: 900; font-size: 12px; transition: .15s ease; } .pay-toggle-btn.is-expense{ background: var(--neg-bg); color: var(--neg); border: 1px solid rgba(239,68,68,.3); } .pay-toggle-btn.is-income{ background: var(--pos-bg); color: var(--pos); border: 1px solid rgba(22,163,74,.3); } @media (max-width: 820px){ .pay-row--enhanced{ grid-template-columns: 1fr; } .pay-row--enhanced > *{ width: 100%; } } /* ---------- V9: Stats Widget Grid - Premium Design ---------- */ .stats-widgets{ display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; } .stats-widget{ background: linear-gradient(165deg, var(--glass-strong) 0%, rgba(15,23,42,0.92) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: 22px; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } /* Top gradient accent line */ .stats-widget::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); opacity: 0.85; } /* Hover glow effect */ .stats-widget::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .stats-widget:hover{ border-color: rgba(99,102,241,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.2), 0 0 30px rgba(99,102,241,0.15); transform: translateY(-3px); } .stats-widget:hover::after{ opacity: 1; } .stats-widget__header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; } /* Vertical gradient bar for title */ .stats-widget__title{ font-weight: 700; font-size: 14px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 12px; color: var(--text); } .stats-widget__title::before{ content: ''; width: 4px; height: 18px; background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 2px; flex-shrink: 0; } .stats-widget__chart{ height: 200px; padding: 6px; position: relative; } .stats-widget__chart canvas{ width: 100% !important; height: 100% !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12)); } /* Light mode: ウィジェット全体のモヤ状グラデーションのみオフ（上部のカラフルなアクセントラインは維持） */ html[data-theme="light"] .stats-widget{ background: #fff; border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02); } html[data-theme="light"] .stats-widget::after{ display: none; } html[data-theme="light"] .stats-widget:hover{ border-color: rgba(99,102,241,0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(99,102,241,0.05); transform: translateY(-2px); } html[data-theme="light"] .stats-widget__header{ border-bottom-color: rgba(15,23,42,0.06); } html[data-theme="light"] .stats-widget__title{ color: var(--text); } html[data-theme="light"] .stats-widget__chart canvas{ filter: drop-shadow(0 2px 8px rgba(0,0,0,0.04)); } /* ---------- V9: Enhanced Calendar Styles ---------- */ .calcell--enhanced{ background: var(--glass-strong); border: var(--glass-edge); box-shadow: var(--glass-inset-shadow), var(--shadow-sm); } .calcell--enhanced:hover{ box-shadow: var(--glow-primary), var(--shadow-md); border-color: rgba(47,111,255,.3); } /* Calendar day popover */ .cal-popover{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 50; min-width: 280px; padding: 16px; background: var(--glass-strong); border: var(--glass-edge); border-radius: var(--radius); box-shadow: var(--glow-primary), var(--shadow-md); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .calcell:hover .cal-popover, .cal-popover.is-open{ opacity: 1; pointer-events: auto; } /* ---------- V10: Settings Premium Two-Pane Layout ---------- */ .settings-layout{ display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; } @media (max-width: 980px){ .settings-layout{ grid-template-columns: 1fr; } } /* --- Side Navigation (Premium) --- */ .settings-nav{ background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; padding: 10px; backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); position: sticky; top: 90px; box-shadow: 0 4px 24px rgba(0,0,0,0.08), var(--glass-inset-shadow, 0 0 0 transparent); overflow: hidden; } .settings-nav::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4); opacity: 0.7; } @media (max-width: 980px){ .settings-nav{ position: static; } } .settings-nav__item{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 13px; transition: all .18s ease; cursor: pointer; text-decoration: none; position: relative; } .settings-nav__item:hover{ background: rgba(99,102,241,.06); color: var(--text); transform: translateX(2px); } .settings-nav__item.is-active{ background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)); color: #6366f1; font-weight: 700; box-shadow: 0 2px 8px rgba(99,102,241,.1); } .settings-nav__item.is-active::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #6366f1, #8b5cf6); } .settings-nav__item .icon{ width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; } .settings-content{ display: flex; flex-direction: column; gap: 20px; } /* Form内のsset-card間の隙間 */ .settings-content form.stack{ display: flex; flex-direction: column; gap: 12px; } /* 基本設定の後は少し広めの隙間 */ #section-basic{ margin-bottom: 8px; } /* =========================================================================== V10 Premium Settings (sset-* prefix) =========================================================================== */ /* --- Card sections --- */ .sset-card{ background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; padding: 24px; backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 2px 16px rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .sset-card:hover{ box-shadow: 0 4px 24px rgba(0,0,0,0.1); } /* Accent top line per section */ .sset-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); opacity: 0.65; transition: opacity .2s; } .sset-card:hover::before{ opacity: 1; } /* Per-section accent overrides */ #section-categories::before{ background: linear-gradient(90deg, #3b82f6, #6366f1); } #section-payments::before{ background: linear-gradient(90deg, #10b981, #06b6d4); } #section-tags::before{ background: linear-gradient(90deg, #8b5cf6, #a855f7); } #section-calendar::before{ background: linear-gradient(90deg, #f59e0b, #f97316); } #section-data::before{ background: linear-gradient(90deg, #14b8a6, #10b981); } .sset-card--danger{ border-color: rgba(239,68,68,.18); background: linear-gradient(145deg, rgba(239,68,68,.04) 0%, var(--glass-strong) 100%); } .sset-card--danger::before{ background: linear-gradient(90deg, #ef4444, #f97316); opacity: 0.8; } /* --- Section header (Premium) --- */ .sset-header{ display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .sset-icon{ flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.1)); color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.15); transition: transform .2s ease, box-shadow .2s ease; } .sset-card:hover .sset-icon{ transform: scale(1.05); box-shadow: 0 4px 14px rgba(99,102,241,.25); } .sset-icon--blue{ background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(99,102,241,.08)); color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,.15); } .sset-icon--green{ background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.08)); color: #10b981; box-shadow: 0 2px 8px rgba(16,185,129,.15); } .sset-icon--purple{ background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(168,85,247,.08)); color: #8b5cf6; box-shadow: 0 2px 8px rgba(139,92,246,.15); } .sset-icon--orange{ background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(249,115,22,.08)); color: #f59e0b; box-shadow: 0 2px 8px rgba(245,158,11,.15); } .sset-icon--teal{ background: linear-gradient(135deg, rgba(20,184,166,.15), rgba(16,185,129,.08)); color: #14b8a6; box-shadow: 0 2px 8px rgba(20,184,166,.15); } .sset-icon--red{ background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(249,115,22,.08)); color: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,.15); } .sset-title{ font-size: 17px; font-weight: 800; color: var(--text); margin: 0; line-height: 1.3; letter-spacing: -0.01em; } .sset-desc{ font-size: 12px; color: var(--muted); margin: 3px 0 0; line-height: 1.4; } .sset-meta{ margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .sset-count{ font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--glass-border); } .sset-warn{ font-size: 11px; font-weight: 600; color: #ef4444; } /* --- Basic settings group --- */ .sset-group{ display: flex; flex-direction: column; gap: 0; } .sset-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--glass-border); } .sset-row:last-child{ border-bottom: none; } .sset-row-label{ flex: 1; min-width: 0; } .sset-row-title{ font-size: 14px; font-weight: 700; color: var(--text); } .sset-row-hint{ font-size: 11px; color: var(--muted); margin-top: 3px; } @media (max-width: 480px){ .sset-row{ flex-direction: column; align-items: stretch; gap: 8px; } } /* --- Theme row: label left, selector right, wrap on narrow --- */ .sset-row--stacked{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } .sset-theme-seg{ max-width: 240px; flex: 0 0 auto; margin-right: 24px; } /* --- Settings purple overrides for segmented controls --- */ .sset-card .seg-ios{ background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.12); border-radius: 10px; } .sset-card .seg-ios .seg__opt span{ border-radius: 8px; } .sset-card .seg-ios .seg__opt input:checked + span{ background: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.3); color: #fff; border-radius: 8px; } .sset-card .seg-ios .seg__opt input:not(:checked) + span:hover{ background: rgba(99,102,241,.1); border-radius: 8px; } /* --- List items (category/tag) --- */ .sset-list{ display: flex; flex-direction: column; gap: 8px; } .sset-item{ display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid transparent; transition: all .18s ease; } .sset-item:hover{ border-color: rgba(99,102,241,.2); background: rgba(99,102,241,.04); transform: translateX(2px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .sset-item .drag-handle{ flex: 0 0 auto; color: var(--muted); cursor: grab; padding: 2px; opacity: 0.5; transition: opacity .15s; } .sset-item:hover .drag-handle{ opacity: 1; } .sset-item .drag-handle:active{ cursor: grabbing; } .sset-badge{ flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--muted); min-width: 28px; text-align: center; padding: 2px 4px; border-radius: 6px; background: rgba(99,102,241,.08); } .sset-item .input{ flex: 1; min-width: 0; background: transparent; border-color: transparent; box-shadow: none; font-size: 13px; font-weight: 400; padding: 6px 10px; border-radius: 8px; transition: all .15s ease; } .sset-item .input:focus{ background: var(--bg); border-color: rgba(99,102,241,.4); box-shadow: 0 0 0 3px rgba(99,102,241,.1), 0 2px 8px rgba(99,102,241,.06); } .sset-item .input::placeholder{ color: var(--muted); } /* Toggle label (chart display / balance display) */ .sset-toggle{ display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; flex-shrink: 0; padding: 4px 8px; border-radius: 8px; transition: background .15s; } .sset-toggle:hover{ background: rgba(99,102,241,.06); } .sset-toggle input[type="checkbox"]{ width: 16px; height: 16px; accent-color: #6366f1; border-radius: 4px; } .sset-toggle-label{ font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } /* Delete button */ button.sset-del, .sset-del{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); transition: all .15s ease; opacity: 0.4; padding: 0; } .sset-item:hover .sset-del{ opacity: 1; } button.sset-del:hover, .sset-del:hover{ background: rgba(239,68,68,.12); color: #ef4444; transform: scale(1.1); box-shadow: none; } /* Add button */ button.sset-add, .sset-add{ display: block; width: 100%; padding: 11px; margin-top: 10px; border-radius: 12px; border: 2px dashed rgba(99,102,241,.2); color: var(--muted); font-size: 13px; font-weight: 600; transition: all .18s ease; text-align: center; } button.sset-add:hover, .sset-add:hover{ background: rgba(99,102,241,.06); color: #6366f1; border-color: rgba(99,102,241,.4); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,.1); } /* --- Payment items (single-row inline) --- */ .sset-item--pay-inline{ flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 12px; } .sset-item--pay-inline .pay-name{ flex: 1 1 120px; min-width: 80px; font-weight: 400; font-size: 13px; } .sset-field-pair{ display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .sset-field-label{ font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } .sset-field-pair .input{ width: 80px; text-align: right; font-variant-numeric: tabular-nums; } .sset-field-pair .seg-ios{ min-width: 160px; } /* --- Save bar (Premium floating) --- */ .sset-save-bar{ position: static; z-index: 40; display: flex; justify-content: center; padding: 16px 0; } .sset-save-btn{ padding: 14px 56px; border-radius: 16px; border: none; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); background-size: 200% 200%; animation: saveBtnGradient 4s ease infinite; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 24px rgba(99,102,241,.35), 0 2px 0 rgba(255,255,255,.15) inset, 0 -1px 0 rgba(0,0,0,.1) inset; transition: transform .15s ease, box-shadow .2s ease; letter-spacing: 0.02em; } @keyframes saveBtnGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .sset-save-btn:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px rgba(99,102,241,.45), 0 2px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.1) inset; } .sset-save-btn:active{ transform: translateY(0) scale(0.98); } /* --- Hint box (Premium) --- */ .sset-hint-box{ margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--glass-border); overflow: hidden; background: rgba(99,102,241,.03); } .sset-hint-box > summary{ padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; transition: color .15s; } .sset-hint-box > summary:hover{ color: var(--text); } .sset-hint-box > summary::-webkit-details-marker{ display: none; } .sset-hint-box > summary::before{ content: '▸ '; } .sset-hint-box[open] > summary::before{ content: '▾ '; } .sset-hint-body{ padding: 0 14px 12px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; line-height: 1.5; } /* --- Source forms (Premium) --- */ .sset-source-forms{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } @media (max-width: 640px){ .sset-source-forms{ grid-template-columns: 1fr; } } .sset-source-form{ display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--surface); transition: border-color .15s, box-shadow .15s; } .sset-source-form:focus-within{ border-color: rgba(99,102,241,.3); box-shadow: 0 0 0 3px rgba(99,102,241,.08); } .sset-source-form-title{ font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .sset-source-form input{ font-size: 13px; } .sset-source-form .btn{ align-self: flex-end; } /* --- Source items (Premium) --- */ .sset-sources{ display: flex; flex-direction: column; gap: 10px; } .sset-source{ padding: 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--surface); transition: all .2s ease; } .sset-source:hover{ border-color: rgba(99,102,241,.15); box-shadow: 0 2px 12px rgba(0,0,0,0.06); transform: translateX(2px); } .sset-source.dirty{ box-shadow: 0 0 0 4px rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); } .sset-source-info{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sset-source-name{ font-weight: 700; font-size: 14px; } .sset-source-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .sset-color-form{ display: flex; align-items: center; gap: 8px; } .sset-source-btns{ display: flex; gap: 6px; } /* --- Data management buttons (Premium) --- */ .sset-data-actions{ display: flex; gap: 14px; flex-wrap: wrap; } button.sset-data-btn, a.sset-data-btn, .sset-data-btn{ display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; padding: 16px 24px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s ease; text-decoration: none; min-width: 180px; } button.sset-data-btn:hover, a.sset-data-btn:hover, .sset-data-btn:hover{ background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.3); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .sset-data-btn svg{ color: #6366f1; flex-shrink: 0; width: 20px; height: 20px; } /* Theme-aware: light=white surface */ html[data-theme="light"] button.sset-data-btn, html[data-theme="light"] a.sset-data-btn, html[data-theme="light"] .sset-data-btn{ background: #fff; color: #0f172a; } html[data-theme="light"] button.sset-data-btn:hover, html[data-theme="light"] a.sset-data-btn:hover{ background: #f8fafc; } /* --- Danger form (Premium) --- */ .sset-danger-form{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(239,68,68,.15); background: linear-gradient(135deg, rgba(239,68,68,.04) 0%, transparent 100%); transition: border-color .15s; } .sset-danger-form:hover{ border-color: rgba(239,68,68,.3); } .sset-danger-label{ font-size: 14px; font-weight: 700; color: var(--text); } .sset-danger-desc{ font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; } @media (max-width: 480px){ .sset-danger-form{ flex-direction: column; align-items: stretch; } .sset-danger-form .btn{ text-align: center; } } /* --- Mobile nav: horizontal scroll --- */ @media (max-width: 980px){ .settings-nav{ display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px; border-radius: 16px; } .settings-nav::before{ border-radius: 16px 16px 0 0; } .settings-nav::-webkit-scrollbar{ display: none; } .settings-nav__item{ flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 8px 14px; font-size: 11px; text-align: center; white-space: nowrap; min-width: 56px; } .settings-nav__item.is-active::before{ display: none; } .settings-nav__item span{ font-size: 11px; } .settings-nav__item .icon{ width: 18px; height: 18px; } } /* --- Danger nav item accent --- */ .settings-nav__item--danger:hover{ color: #ef4444; } .settings-nav__item--danger.is-active{ background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(249,115,22,.06)); color: #ef4444; } .settings-nav__item--danger.is-active::before{ background: linear-gradient(180deg, #ef4444, #f97316); } /* --- Compact payment on narrow screens --- */ @media (max-width: 840px){ .sset-item--pay-inline{ flex-wrap: wrap; } .sset-item--pay-inline .pay-name{ flex: 1 1 100%; min-width: 0; } .sset-field-pair .seg-ios{ min-width: 140px; } } @media (max-width: 640px){ .sset-field-pair .input{ text-align: left; } .sset-field-pair .seg-ios{ min-width: 0; width: 100%; } .sset-data-actions{ flex-direction: column; } .sset-data-btn{ justify-content: center; } } /* --- Light mode refinements for settings --- */ html[data-theme="light"] .sset-card{ background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.06); } html[data-theme="light"] .sset-card::before{ opacity: 0.5; } html[data-theme="light"] .sset-card:hover::before{ opacity: 0.8; } html[data-theme="light"] .settings-nav{ background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.06); } html[data-theme="light"] .settings-nav::before{ opacity: 0.5; } html[data-theme="light"] .sset-item:hover{ background: rgba(99,102,241,.03); } html[data-theme="light"] .sset-save-btn{ box-shadow: 0 4px 20px rgba(99,102,241,.25), 0 2px 0 rgba(255,255,255,.2) inset; } html[data-theme="light"] button.sset-data-btn, html[data-theme="light"] a.sset-data-btn, html[data-theme="light"] .sset-data-btn{ background: #fff; } /* Sortable drag handle */ .drag-handle{ cursor: grab; color: var(--muted); padding: 4px; } .drag-handle:active{ cursor: grabbing; } .sortable-ghost{ opacity: 0.4; background: rgba(47,111,255,.1); } .sortable-chosen{ box-shadow: var(--glow-primary); } /* ---------- V9: Animation Utilities ---------- */ @keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes slideUp{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } } @keyframes pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .6; } } .animate-fade-in{ animation: fadeIn .3s ease; } .animate-slide-up{ animation: slideUp .3s ease; } /* Skeleton loading */ .skeleton{ background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skeleton 1.5s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } } /* ---------- V9: Modal Overlay (for bulk operations) ---------- */ .modal-overlay{ position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .modal-panel{ position: relative; width: min(480px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow: auto; background: var(--glass-strong); border: 1px solid rgba(99,102,241,.25); border-radius: 24px; box-shadow: 0 0 24px rgba(99,102,241,.35), var(--shadow-md); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .modal-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(99,102,241,.15); } .modal-header h3{ margin: 0; font-weight: 700; font-size: 14px; background: linear-gradient(90deg, #818cf8, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-close{ width: 28px; height: 28px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s ease; } .modal-close:hover{ background: var(--surface); border-color: var(--border); color: var(--text); } .modal-body{ padding: 16px; } .modal-body label{ display: block; margin-bottom: 5px; } .modal-body select{ margin-top: 6px; width: 100%; padding: 10px 12px; font-size: 14px; border-radius: 10px; border: 1px solid rgba(99,102,241,.2); background: var(--surface); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } .modal-body select:focus{ outline: none; border-color: rgba(99,102,241,.5); box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .modal-body p{ margin-bottom: 10px; } .modal-footer{ display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(99,102,241,.15); } .modal-footer .btn.primary{ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; box-shadow: 0 2px 8px rgba(99,102,241,.3); } .modal-footer .btn.primary:hover{ background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 4px 16px rgba(99,102,241,.4); } /* ========================= Light Mode Premium Enhancement - High-end, refined aesthetics - Clearer button states - Luxurious shadows and borders ========================= */ /* --- Calendar gradient line removed --- */ /* --- Segmented button light mode — now in shared toggle pill section --- */ /* --- Light mode premium card styles --- */ html[data-theme="light"] .card{ background: rgba(255,255,255,0.95); border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.03); } html[data-theme="light"] .card:hover{ box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.05); } /* --- Light mode premium button styles --- */ html[data-theme="light"] .btn{ background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.12); color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,0.05); transition: all 0.2s ease; } html[data-theme="light"] .btn:hover{ background: rgba(255,255,255,1); border-color: rgba(99,102,241,0.3); box-shadow: 0 2px 6px rgba(15,23,42,0.08); transform: translateY(-1px); } html[data-theme="light"] .btn:active{ transform: translateY(0); box-shadow: 0 1px 2px rgba(15,23,42,0.05); } html[data-theme="light"] .btn.ghost{ background: transparent; border-color: rgba(15,23,42,0.1); box-shadow: none; } html[data-theme="light"] .btn.ghost:hover{ background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); box-shadow: none; } html[data-theme="light"] .btn.primary, html[data-theme="light"] .btn[type="submit"]:not(.ghost){ background: linear-gradient(135deg, #4f46e5, #6366f1); border: none; color: white; box-shadow: 0 2px 8px rgba(79,70,229,0.25); } html[data-theme="light"] .btn.primary:hover, html[data-theme="light"] .btn[type="submit"]:not(.ghost):hover{ background: linear-gradient(135deg, #4338ca, #4f46e5); box-shadow: 0 4px 12px rgba(79,70,229,0.3); } html[data-theme="light"] .modal-panel{ background: rgba(255,255,255,.96); border: 1px solid rgba(99,102,241,.15); box-shadow: 0 0 24px rgba(99,102,241,.18), 0 8px 32px rgba(0,0,0,.08); } html[data-theme="light"] .modal-header h3{ background: linear-gradient(90deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="light"] .modal-body select{ background: rgba(255,255,255,.95); border: 1px solid rgba(15,23,42,.12); } html[data-theme="light"] .modal-body select:focus{ border-color: rgba(99,102,241,.4); box-shadow: 0 0 0 3px rgba(99,102,241,.1); } /* --- Light mode premium input/select styles --- */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ background: rgba(255,255,255,0.95); border: 1px solid rgba(15,23,42,0.12); color: #1e293b; box-shadow: inset 0 1px 2px rgba(15,23,42,0.03); } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{ border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 3px rgba(99,102,241,0.1), inset 0 1px 2px rgba(15,23,42,0.03); } /* --- Light mode premium table styles --- */ html[data-theme="light"] .table{ background: rgba(255,255,255,0.98); } html[data-theme="light"] .table thead th{ background: rgba(248,250,252,0.95); border-bottom: 2px solid rgba(15,23,42,0.08); color: #475569; font-weight: 700; } html[data-theme="light"] .table tbody tr{ border-bottom: 1px solid rgba(15,23,42,0.05); } html[data-theme="light"] .table tbody tr:hover{ background: rgba(99,102,241,0.03); } /* --- Light mode premium header --- */ html[data-theme="light"] header.top{ background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(99,102,241,.06); box-shadow: 0 1px 8px rgba(15,23,42,.04); } /* --- Light mode premium navigation --- */ html[data-theme="light"] .nav a, html[data-theme="light"] .navbtn{ color: #64748b; } html[data-theme="light"] .nav a:hover, html[data-theme="light"] .navbtn:hover{ color: #1e293b; background: rgba(99,102,241,0.06); } html[data-theme="light"] .nav a.active{ color: #4f46e5; background: rgba(99,102,241,0.08); font-weight: 700; } /* --- Light mode premium tabs — now in shared toggle pill section --- */ /* --- Light mode premium calendar cells --- */ html[data-theme="light"] .calcell{ background: rgba(255,255,255,0.95); border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 1px 3px rgba(15,23,42,0.03); } html[data-theme="light"] .calcell:hover{ border-color: rgba(99,102,241,0.25); box-shadow: 0 4px 12px rgba(15,23,42,0.06); } html[data-theme="light"] .calcell.today{ border-color: rgba(79,70,229,0.4); box-shadow: 0 0 0 3px rgba(79,70,229,0.08), 0 2px 8px rgba(15,23,42,0.05); } /* --- Light mode premium chip/pill --- */ html[data-theme="light"] .chip{ background: rgba(248,250,252,0.95); border: 1px solid rgba(15,23,42,0.08); color: #475569; } html[data-theme="light"] .chip:hover{ background: rgba(255,255,255,1); border-color: rgba(99,102,241,0.25); } html[data-theme="light"] .chip.active{ background: linear-gradient(135deg, #4f46e5, #6366f1); border-color: transparent; color: white; box-shadow: 0 2px 6px rgba(79,70,229,0.2); } /* --- Light mode FAB enhancement --- */ html[data-theme="light"] .fab{ background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 4px 16px rgba(79,70,229,0.35), 0 2px 6px rgba(15,23,42,0.1); } html[data-theme="light"] .fab:hover{ background: linear-gradient(135deg, #4338ca, #4f46e5); box-shadow: 0 6px 20px rgba(79,70,229,0.4), 0 4px 10px rgba(15,23,42,0.12); transform: translateY(-2px); } /* --- Light mode widget enhancement --- */ html[data-theme="light"] .widget-card{ background: rgba(255,255,255,0.98); border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.03); } html[data-theme="light"] .widget-card::before{ opacity: 0.9; } /* --- Light mode segmented control container — now in shared toggle pill section --- */ /* =========================================================================== Mobile Calendar – Scroll (iOS-style) =========================================================================== */ .mcal-section{ padding: 0; max-width: 100%; } /* ---------- Scroll container ---------- */ .mcal-scroll{ /* full viewport scroll — no fixed height so the page itself scrolls */ } .mcal-sentinel{ height: 1px; } /* Spinner */ .mcal-spinner{ display: none; justify-content: center; align-items: center; padding: 12px 0; } .mcal-spinner.is-active{ display: flex; } .mcal-spinner-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted, #888); margin: 0 3px; animation: mcalBounce 1.2s ease-in-out infinite; } .mcal-spinner-dot:nth-child(2){ animation-delay: 0.15s; } .mcal-spinner-dot:nth-child(3){ animation-delay: 0.3s; } @keyframes mcalBounce{ 0%, 80%, 100%{ opacity: 0.3; transform: scale(0.8); } 40%{ opacity: 1; transform: scale(1.2); } } /* ---------- Month block ---------- */ .mcal-month-block{ padding: 0 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } /* Month header */ .mcal-month-head{ display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 14px 4px 2px; } .mcal-month-year{ font-size: 12px; color: var(--muted); font-weight: 600; } .mcal-month-label{ font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.2; } .mcal-month-net{ display: none; } /* Month summary row */ .mcal-month-summary{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 4px 6px; font-size: 11px; font-weight: 600; color: var(--muted); } .mcal-ms-item{ display: inline-flex; gap: 4px; align-items: center; } .mcal-ms-label{ color: var(--muted); } .mcal-ms-sep{ color: var(--border); font-size: 10px; } /* Shared color utilities */ .mcal-neg{ color: #ef4444; } .mcal-pos{ color: #10b981; } /* ---------- Legacy header (kept for desktop compat) ---------- */ .mcal-header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; } .mcal-title{ display: flex; flex-direction: column; align-items: center; gap: 0; } .mcal-year{ font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; } .mcal-month{ font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.2; } .mcal-nav-btn{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: background 0.15s, transform 0.1s; text-decoration: none; } .mcal-nav-btn:active{ transform: scale(0.92); background: var(--surface-2); } /* ---------- Month dock (legacy, unused in scroll mode) ---------- */ .mcal-dock-wrap{ padding: 6px 12px; overflow: hidden; } .mcal-dock{ display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 4px 2px; scrollbar-width: none; } .mcal-dock::-webkit-scrollbar{ display: none; } .mcal-chip{ flex: 0 0 auto; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; text-decoration: none; white-space: nowrap; scroll-snap-align: center; transition: all 0.15s; } .mcal-chip:hover{ color: var(--text); } .mcal-chip.active{ color: #fff; background: #6366f1; border-color: transparent; box-shadow: 0 2px 8px rgba(99,102,241,0.35); } .mcal-chip.today-month:not(.active){ border-color: rgba(99,102,241,0.3); color: #6366f1; } /* ---------- Summary bar (legacy) ---------- */ .mcal-summary{ display: flex; align-items: center; justify-content: center; gap: 0; padding: 10px 16px; margin: 0 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--glass-inset-shadow); } .mcal-summary-item{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } .mcal-summary-label{ font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .mcal-summary-val{ font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .mcal-summary-val.mcal-neg{ color: #ef4444; } .mcal-summary-val.mcal-pos{ color: #10b981; } .mcal-summary-sep{ width: 1px; height: 28px; background: var(--border); flex: 0 0 1px; } /* ---------- Week row wrapper ---------- */ .mcal-week{ position: relative; } /* ---------- Multiday event overlay ---------- */ .mcal-multi-overlay{ position: absolute; top: 15px; /* 日付番号の高さ分下にオフセット */ left: 0; right: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 0; padding: 0; pointer-events: none; z-index: 2; } .mcal-multi-bar{ height: 13px; display: flex; align-items: center; padding: 0; overflow: hidden; background: transparent; pointer-events: auto; min-width: 0; position: relative; border-bottom: none !important; /* inline style の border-bottom を無効化 */ } /* 下線を疑似要素で描画 — 端が完全に直角 */ .mcal-multi-bar::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ev-color, #9ca3af); } .mcal-multi-bar .mcal-ev-time{ padding-left: 2px; } .mcal-multi-text{ font-size: 8px; font-weight: 600; color: var(--ev-color, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; min-width: 0; } /* 時刻がない場合、テキストに左パディング */ .mcal-multi-bar .mcal-multi-text:first-child{ padding-left: 2px; } /* ---------- Grid ---------- */ .mcal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 0; touch-action: pan-y; overflow: hidden; } /* Weekday header */ .mcal-wd{ text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0 3px; letter-spacing: 0.04em; } .mcal-wd--sun{ color: #ef4444; } .mcal-wd--sat{ color: #3b82f6; } /* ---------- Cell ---------- */ .mcal-cell{ position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 85px; padding: 3px 3px 2px; border-radius: 4px; margin: 0; text-decoration: none; transition: background 0.12s; overflow: hidden; } .mcal-cell:active{ background: var(--surface); } .mcal-empty{ opacity: 0; pointer-events: none; } .mcal-out{ opacity: 0.4; } /* Today */ .mcal-today{ background: rgba(99,102,241,0.10); box-shadow: inset 0 0 0 1.5px rgba(99,102,241,0.45); } /* Has transactions indicator — disabled */ /* ---------- Day number ---------- */ .mcal-day{ font-size: 11px; font-weight: 600; color: var(--text); line-height: 1; text-align: left; padding: 0 1px; } .mcal-day--sun{ color: #ef4444; } .mcal-day--sat{ color: #3b82f6; } /* Today day number — 背景色のみ (セル全体) + 日付を強調 */ .mcal-today .mcal-day{ color: #6366f1; font-weight: 800; } /* ---------- Amount badge ---------- */ .mcal-amount{ display: none; font-size: 8px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; padding: 0; text-align: right; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .mcal-amount--neg{ color: #ef4444; } .mcal-amount--pos{ color: #10b981; } .mcal-amount--zero{ color: var(--muted); opacity: 0.5; } /* ---------- Event bars (mobile calendar) ---------- */ .mcal-ev-slots{ display: flex; flex-direction: column; gap: 1px; align-self: stretch; /* セル幅いっぱいに広げる */ width: calc(100% + 6px); /* セルの左右パディング 3px×2 を打ち消して隣接セルと繋げる */ margin: 2px -3px 0; flex: 1; min-height: 0; overflow: hidden; } .mcal-ev-bar{ height: 13px; display: flex; align-items: center; padding: 0 2px; overflow: hidden; flex-shrink: 0; min-width: 0; width: 100%; box-sizing: border-box; } .mcal-ev-bar--empty{ background: transparent !important; } .mcal-ev-bar--single{ border-radius: 3px; } .mcal-ev-bar--start{ border-radius: 3px 0 0 3px; } .mcal-ev-bar--mid{ border-radius: 0; } .mcal-ev-bar--end{ border-radius: 0 3px 3px 0; } .mcal-ev-text{ display: block; font-size: 8px; font-weight: 600; color: var(--ev-color, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; min-width: 0; flex: 1; } .mcal-ev-time{ font-size: 7px; font-weight: 500; color: var(--ev-color, var(--muted)); white-space: nowrap; margin-right: 1px; flex-shrink: 0; line-height: 1; } /* ---- kind: 時間指定 (timed) — 文字色のみ + 開始時刻 ---- */ .mcal-ev-bar--timed{ background: transparent !important; } /* ---- kind: 終日 (allday) — 背景色 ---- */ .mcal-ev-bar--allday{ /* bg は inline style で設定済み */ } .mcal-ev-bar--allday .mcal-ev-text{ color: var(--ev-color, var(--text)); } /* ---- kind: 連日 (multiday) は mcal-multi-overlay で表示するため、セル内には不要 ---- */ /* ---------- Filter ---------- */ .mcal-filters{ margin: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .mcal-filter-toggle{ display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; } .mcal-filter-toggle::-webkit-details-marker{ display: none; } .mcal-filter-toggle::after{ content: ''; margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--muted); transition: transform 0.2s; } .mcal-filters[open] .mcal-filter-toggle::after{ transform: rotate(180deg); } .mcal-filter-body{ padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; } .mcal-filter-form{ display: flex; flex-direction: column; gap: 4px; } .mcal-filter-label{ font-size: 11px; font-weight: 700; color: var(--muted); } .mcal-filter-row{ display: flex; gap: 8px; align-items: center; } .mcal-filter-row select{ flex: 1; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } /* ---------- Footer link ---------- */ .mcal-footer{ text-align: center; padding: 12px 16px 20px; } .mcal-link-desktop{ font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Light mode overrides ---------- */ html[data-theme="light"] .mcal-today{ background: rgba(99,102,241,0.08); box-shadow: inset 0 0 0 1.5px rgba(99,102,241,0.35); } html[data-theme="light"] .mcal-cell:active{ background: rgba(0,0,0,0.04); } html[data-theme="light"] .mcal-has-tx::after{ background: rgba(99,102,241,0.18); } /* ---------- Larger phones (>400px) ---------- */ @media (min-width: 400px){ .mcal-cell{ height: 91px; padding: 4px 4px 2px; } .mcal-day{ font-size: 12px; } .mcal-amount{ font-size: 8px; } .mcal-ev-slots{ width: calc(100% + 8px); margin-left: -4px; margin-right: -4px; } .mcal-ev-bar{ height: 14px; } .mcal-ev-text{ font-size: 8px; } .mcal-ev-time{ font-size: 7px; } .mcal-multi-overlay{ top: 17px; } .mcal-multi-bar{ height: 14px; } .mcal-multi-text{ font-size: 8px; } } /* ---------- Tablet+ (>600px) - even more room ---------- */ @media (min-width: 600px){ .mcal-section{ max-width: 100%; margin: 0; } .mcal-cell{ height: 103px; padding: 5px 5px 2px; } .mcal-day{ font-size: 14px; } .mcal-amount{ display: block; font-size: 9px; } .mcal-ev-slots{ width: calc(100% + 10px); margin-left: -5px; margin-right: -5px; } .mcal-ev-bar{ height: 16px; } .mcal-ev-text{ font-size: 9px; } .mcal-ev-time{ font-size: 8px; } .mcal-multi-overlay{ top: 20px; } .mcal-multi-bar{ height: 16px; } .mcal-multi-text{ font-size: 9px; } }