@import url('https://fonts.cdnfonts.com/css/solaimanlipi'); :root { --brand: #064e3b; --brand2: #16a34a; --bg: #f6f7fb; --card: #ffffff; /* better light-mode contrast */ --txt: #0b1220; --muted: #334155; --border: rgba(2, 6, 23, .10); --ring: rgba(6, 95, 70, .20); } /* ============================ Theme overrides (optional) - Default: Premium Green (current :root) - Blue theme: add ============================ */ html[data-theme="blue"]{ --brand: #1d4ed8; /* blue-700 */ --brand2: #38bdf8; /* sky-400 */ --ring: rgba(29, 78, 216, .20); } html[data-theme="blue"] .topbar{ background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,1)); border-bottom: 1px solid rgba(29, 78, 216, .14); } html[data-theme="blue"].dark .topbar{ background: linear-gradient(180deg, rgba(29,78,216,.22), rgba(2,6,23,.85)); border-bottom: 1px solid rgba(56,189,248,.16); } /* ============================ Global typography (responsive) - Mobile/Tablet (<=1023px): 15px - Desktop/Laptop (>=1024px): 13px Note: body uses 1rem, so everything scales consistently. ============================ */ html{ font-size: 13px; } body{ font-size: 1rem; } /* = 13px */ /* Mobile + Tablet: bigger for readability */ @media (max-width: 1023px){ html{ font-size: 15px; } } /* Very large screens: keep elegant */ @media (min-width: 1600px){ html{ font-size: 13px; } } html, body { height: 100%; } body { font-family: 'SolaimanLipi', sans-serif; background: var(--bg); color: var(--txt); overflow-x: hidden; } /* force better contrast for common muted text in light mode */ .text-slate-500 { color: var(--muted) !important; } .text-slate-400 { color: rgba(15, 23, 42, .55) !important; } .text-slate-600 { color: rgba(15, 23, 42, .78) !important; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .btn { border-radius: 12px; font-weight: 900; } .inp { border-radius: 12px; padding: .55rem .75rem; background: #ffffff; border: 1px solid var(--border); outline: none; font-weight: 800; color: var(--txt); } .inp:focus { box-shadow: 0 0 0 3px var(--ring); border-color: rgba(6, 95, 70, .35); } /* Tabs / pills */ .pill { border-radius: 999px; padding: .35rem .7rem; font-weight: 900; font-size: 12px; border: 1px solid rgba(2, 6, 23, .12); background: #fff; color: var(--txt); } .pill.active { background: #064e3b; color: #fff; border-color: transparent; } .chip { border-radius: 999px; padding: .2rem .55rem; font-weight: 900; font-size: 0.92rem; } /* chip variants */ .chip-ghost{ background: rgba(2,6,23,.05) !important; color: var(--txt) !important; border: 1px solid rgba(2,6,23,.10) !important; } .dark .chip-ghost{ background: rgba(255,255,255,.06) !important; color: rgba(226,232,240,.92) !important; border-color: rgba(148,163,184,.14) !important; } .chip-danger{ background: rgba(220,38,38,.10) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,.18) !important; } .dark .chip-danger{ background: rgba(220,38,38,.18) !important; color: #fecaca !important; border-color: rgba(220,38,38,.22) !important; } .topbar { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border); } /* Bottom nav ALWAYS dark dream */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 10px; z-index: 70; background: linear-gradient(135deg, rgba(2, 6, 23, .96), rgba(6, 78, 59, .78)); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -12px 28px rgba(2, 6, 23, .18); backdrop-filter: blur(10px); } .nav-btn { border-radius: 14px; padding: 10px 8px; font-weight: 900; font-size: 0.92rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-btn i { color: rgba(255, 255, 255, .92); } .nav-btn.active { background: rgba(255, 255, 255, .92); color: #064e3b; border-color: rgba(255, 255, 255, .92); } .nav-btn.active i { color: #064e3b; } @media (min-width: 1024px) { #shell { display: grid; grid-template-columns: 250px 1fr; } #sidebar { position: sticky; top: 0; height: 100vh; } .bottom-nav { display: none; } } @media (max-width: 1023px) { #sidebar { display: none; } #content { padding-bottom: 92px; } } .sec { display: none; } .sec.active { display: block; } .search-results { max-height: 240px; overflow: auto; position: absolute; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 28px rgba(2, 6, 23, .10); z-index: 999; } #toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%) translateY(-90px); transition: .35s ease; z-index: 9999; } #toast.show { transform: translateX(-50%) translateY(0); } .dark body { background: #0b1220; color: #e2e8f0; } .dark .topbar { background: rgba(2, 6, 23, .85); border-bottom: 1px solid rgba(148, 163, 184, .15); } .dark .card { background: rgba(15, 23, 42, .75); border-color: rgba(148, 163, 184, .14); } .dark .inp { background: rgba(2, 6, 23, .55); border-color: rgba(148, 163, 184, .14); color: #e2e8f0; } .dark .pill { background: rgba(2, 6, 23, .35); border-color: rgba(148, 163, 184, .14); color: #e2e8f0; } .dark .search-results { background: rgba(2, 6, 23, .96); border-color: rgba(148, 163, 184, .14); color: #e2e8f0; } .dark .bottom-nav { background: linear-gradient(135deg, rgba(2, 6, 23, .96), rgba(6, 78, 59, .68)); border-top: 1px solid rgba(148, 163, 184, .14); } .dark .text-slate-500 { color: rgba(226, 232, 240, .72) !important; } .dark .text-slate-400 { color: rgba(226, 232, 240, .55) !important; } /* Mobile KPI: 3-up compact */ @media (max-width: 767px) { .kpi-grid { gap: 8px !important; } .kpi-card { padding: 10px !important; border-radius: 12px !important; } .kpi-title { font-size: 9px !important; } .kpi-value { font-size: 13px !important; line-height: 1.1 !important; } .kpi-card canvas { height: 42px !important; } } /* ============================ Mobile App-like Dashboard (only visual changes; links/logic stay same) ============================ */ /* Hide heavy desktop charts on mobile/tablet */ @media (max-width: 1023px){ .dash-heavy{ display:none !important; } } /* KPI cards on mobile/tablet look like compact strip cards */ @media (max-width: 1023px){ .kpi-card{ border-radius: 12px !important; overflow:hidden; box-shadow: 0 10px 22px rgba(2,6,23,.06); } .kpi-card::before{ /* remove old glow gradient (keep clean) */ background: none !important; } .kpi-card::after{ /* remove side strip */ opacity: 0 !important; } .kpi-title{ display:inline-block; padding: 3px 8px; border-radius: 999px; background: rgba(88, 28, 135, .10); /* purple tint like reference */ color: rgba(88, 28, 135, .95) !important; letter-spacing: .2px; } .kpi-value{ font-size: 13px !important; /* requested */ line-height: 1.25 !important; margin-top: 6px; } /* keep expense red readable */ #kpi_expense{ color:#b91c1c !important; } } /* App-like quick menu tiles (mobile/tablet) */ @media (max-width: 1023px){ .m-dash-tiles{ margin-top: 10px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dash-tile{ background:#ffffff; border: 1px solid rgba(2,6,23,.10); border-radius: 14px; padding: 12px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px; box-shadow: 0 10px 22px rgba(2,6,23,.06); font-weight: 900; } .dash-ico{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(88, 28, 135, .10); /* purple like reference */ border: 1px solid rgba(88, 28, 135, .16); color: rgba(88, 28, 135, .95); font-size: 18px; } .dash-txt{ font-size: 12px; color: rgba(15,23,42,.85); line-height: 1.1; text-align:center; } .dash-tile:active{ transform: scale(.98); } } @media print { .no-print, .bottom-nav, #sidebar, .topbar { display: none !important; } body { background: #fff !important; color: #000 !important; } .card { box-shadow: none !important; } #content { padding: 0 !important; } } /* --------------------------- Dashboard: color communication ---------------------------- */ /* KPI cards accent strip + soft glow */ .kpi-card{ position: relative; overflow: hidden; background: #f0fdf4; /* green-50 */ border-color: rgba(6,78,59,.16); } .dark .kpi-card{ background: rgba(6,78,59,.12); border-color: rgba(16,185,129,.18); } .kpi-card::before{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; background: rgba(6,78,59,.06); } .kpi-card::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: #064e3b; opacity:.95; } /* Make icons inside KPI a bit nicer */ .kpi-card i{ padding:10px; border-radius:14px; background: rgba(6,78,59,.10); border: 1px solid rgba(2,6,23,.08); } /* Normal cards: subtle border + hover */ .card{ box-shadow: 0 10px 26px rgba(2, 6, 23, .06); } .card:hover{ box-shadow: 0 14px 34px rgba(2, 6, 23, .10); } /* --------------------------- Topbar: brand tint ---------------------------- */ .topbar{ background: linear-gradient(180deg, rgba(6,78,59,.06), rgba(255,255,255,1)); border-bottom: 1px solid rgba(6, 78, 59, .14); } /* Dark mode topbar already exists; slightly enrich */ .dark .topbar{ background: linear-gradient(180deg, rgba(6,78,59,.20), rgba(2,6,23,.85)); border-bottom: 1px solid rgba(16,185,129,.14); } /* --------------------------- Bottom Nav: solid dark green + stylish ---------------------------- */ .bottom-nav{ background: #064e3b !important; /* no gradient */ border-top: 1px solid rgba(255,255,255,.16); box-shadow: 0 -14px 34px rgba(2,6,23,.28); } .nav-btn{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); transition: transform .15s ease, background .15s ease; } .nav-btn:active{ transform: scale(.98); } .nav-btn.active{ background: rgba(255,255,255,.92); color: #064e3b; border-color: rgba(255,255,255,.92); box-shadow: 0 10px 22px rgba(2,6,23,.20); } /* small active indicator dot */ .nav-btn.active::after{ content:""; width:6px; height:6px; border-radius:999px; background:#064e3b; display:block; margin-top:4px; } /* --------------------------- Auth page: always white (even in dark) ---------------------------- */ #auth_layer{ background:#ffffff !important; color:#0b1220 !important; } .dark #auth_layer{ background:#ffffff !important; color:#0b1220 !important; } /* auth card keep clean */ #auth_layer .card{ background:#ffffff !important; border-color: rgba(2,6,23,.10) !important; box-shadow: 0 18px 40px rgba(2,6,23,.10); } #auth_layer .text-slate-500{ color: rgba(15,23,42,.70) !important; } #auth_layer .inp{ background:#fff !important; color:#0b1220 !important; } /* --------------------------- Compact spacing (global) ---------------------------- */ /* main container padding reduce */ #content .max-w-6xl{ padding-left: 10px !important; padding-right: 10px !important; } @media (min-width:768px){ #content .max-w-6xl{ padding-left: 14px !important; padding-right: 14px !important; } } /* card padding reduce (override tailwind p-4/p-3) */ .card.p-4{ padding: .80rem !important; } .card.p-3{ padding: .65rem !important; } .card.p-2{ padding: .50rem !important; } /* inputs/buttons slightly tighter */ .inp{ padding: .48rem .68rem; } .btn{ padding-top: .55rem; padding-bottom: .55rem; } /* KPI grid tighter */ .kpi-grid{ gap: 8px !important; } @media (min-width:768px){ .kpi-grid{ gap: 10px !important; } } /* table cells tighter */ table td, table th{ padding-top: .50rem; padding-bottom: .50rem; } /* Entry/Report list cards tighten */ #ui_last10 > div, #ui_ledger > div, #ui_bal_list > div{ padding: .65rem !important; } /* --------------------------- Sidebar active readability ---------------------------- */ #sidebar .nav-active{ background: #064e3b !important; color: #ffffff !important; border-color: rgba(255,255,255,.10) !important; } #sidebar .nav-active i{ color: #ffffff !important; } /* ===== FIX: Category Tree Active Visibility ===== */ /* Left category tree active button */ #ui_cat_tree .nav-active { background: #0f172a !important; /* slate-900 */ color: #ffffff !important; border-color: #0f172a !important; } /* Active item title */ #ui_cat_tree .nav-active .font-black { color: #ffffff !important; } /* Active item meta text */ #ui_cat_tree .nav-active .text-slate-500, #ui_cat_tree .nav-active .text-white\/80 { color: #e5e7eb !important; /* slate-200 */ } /* Active badge (count chip) */ #ui_cat_tree .nav-active .chip { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* Desktop tabs for Accounts sub-sections */ .acc-tabsbar{align-items:center;} @media (min-width: 768px){ .acc-tabsbar{width:100%;} .acc-tabsbar .pill{flex:1; text-align:center; padding:.55rem 1rem;} } /* ============================= Mobile keyboard friendly modal ============================= */ #party_add_layer, #acc_edit_layer{ align-items: flex-start; /* so the card can move up when keyboard opens */ } .modal-card{ margin-top: 10px; max-height: calc(100vh - 20px); overflow: auto; } /* ============================ POS Ledger 2.0 — Professional UI Additions (keeps all existing styles; only adds new utilities) ============================ */ .btn-primary{ background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff !important; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 22px rgba(2,6,23,.12); } .btn-primary:hover{ filter: brightness(1.02); } .btn-primary:active{ transform: translateY(1px); } .btn-danger{ background: linear-gradient(135deg, #be123c, #f43f5e); color:#fff !important; border: 1px solid rgba(255,255,255,.12); } .fin-income{ color:#059669 !important; } .fin-expense{ color:#dc2626 !important; } .fin-receivable{ color:#2563eb !important; } .fin-payable{ color:#ea580c !important; } .fin-neutral{ color: var(--muted) !important; } thead th{ background: rgba(6,78,59,.06); } .dark thead th{ background: rgba(16,185,129,.08); } tbody tr:hover{ background: rgba(6,78,59,.05); } .dark tbody tr:hover{ background: rgba(16,185,129,.08); } .card.card-gradient{ background: linear-gradient(145deg, rgba(255,255,255,1), rgba(240,253,244,.9)); } .dark .card.card-gradient{ background: linear-gradient(145deg, rgba(15,23,42,.78), rgba(6,78,59,.12)); } /* ============================ Laptop/desktop full width ============================ */ @media (min-width: 1024px){ #content .max-w-6xl{ max-width: 100% !important; } #content .max-w-6xl.mx-auto{ margin-left: 0 !important; margin-right: 0 !important; } #content{ width: 100%; } } /* ============================ Mobile/Tablet: larger & more attractive ============================ */ @media (max-width: 1023px){ /* make cards/buttons feel touch-friendly */ .card.p-4{ padding: 1rem !important; } .card.p-3{ padding: .85rem !important; } .inp{ padding: .70rem .85rem !important; } .btn{ padding-top: .70rem !important; padding-bottom: .70rem !important; } .pill{ font-size: 13px !important; padding: .48rem .85rem !important; } .chip{ font-size: 12px !important; padding: .28rem .65rem !important; } /* bottom nav bigger */ .bottom-nav{ padding: 12px 12px !important; } .nav-btn{ font-size: 13px !important; padding: 12px 10px !important; border-radius: 16px !important; } .nav-btn i{ font-size: 18px !important; } /* KPI readable on mobile/tablet */ .kpi-title{ font-size: 12px !important; } .kpi-value{ font-size: 20px !important; } } /* ============================ Input placeholder tuning ============================ */ .inp::placeholder, input::placeholder, textarea::placeholder{ font-size: .92em !important; opacity: .70 !important; font-weight: 700 !important; } /* ============================ Custom Alert System (no browser alert) ============================ */ #app_alert_layer{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,23,.55); z-index: 99999; backdrop-filter: blur(6px); } #app_alert_layer.show{ display: flex; } .app-alert-card{ width: min(520px, 100%); background: #ffffff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 22px 60px rgba(2,6,23,.25); overflow: hidden; } .dark .app-alert-card{ background: rgba(15,23,42,.92); border-color: rgba(148,163,184,.16); } .app-alert-head{ padding: 14px 16px 10px 16px; display:flex; gap:10px; align-items:flex-start; } .app-alert-ico{ width: 36px; height: 36px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight: 900; background: rgba(6,78,59,.10); border: 1px solid rgba(2,6,23,.10); color: var(--brand); } .dark .app-alert-ico{ background: rgba(16,185,129,.10); border-color: rgba(148,163,184,.14); color: #a7f3d0; } .app-alert-title{ font-weight: 900; font-size: 15px; line-height: 1.2; } .app-alert-msg{ margin-top: 2px; font-weight: 800; color: var(--muted); font-size: 13px; } .dark .app-alert-msg{ color: rgba(226,232,240,.72); } .app-alert-actions{ padding: 12px 16px 16px 16px; display:flex; gap:10px; justify-content:flex-end; border-top: 1px solid rgba(2,6,23,.08); } .dark .app-alert-actions{ border-top-color: rgba(148,163,184,.14); } .app-alert-btn{ border-radius: 14px; padding: .65rem 1rem; font-weight: 900; border: 1px solid rgba(2,6,23,.10); background: rgba(255,255,255,.92); } .dark .app-alert-btn{ background: rgba(2,6,23,.35); border-color: rgba(148,163,184,.14); color: rgba(226,232,240,.92); } .app-alert-btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border-color: transparent; } /* ============================ Global Font Size Control ============================ */ html{font-size:13px;} body{font-size:1rem;} @media (max-width:1023px){html{font-size:14px;}} /* SMS checkbox (bigger + nicer) */ .sms-check{ width:1.15rem; height:1.15rem; } @media (max-width:1023px){ .sms-check{ width:1.25rem; height:1.25rem; } } .sms-check{ transform: translateY(1px); } /* ============================ Mobile App Dashboard (App-like) - desktop unchanged ============================ */ :root{ --app-accent: #064e3b; /* dark green /* --app-accent-2: #16a34a; --app-tile-bg: #ffffff; --app-surface: #f4f3ff; /* subtle lavender */ --app-border: rgba(6,78,59,.18); } /* Mobile/Tablet typography */ @media (max-width: 1023px){ html{ font-size: 15px !important; } /* app-like mobile readability */ } /* Desktop/Laptop typography */ @media (min-width: 1024px){ html{ font-size: 13px !important; } } /* KPI colors + sizing on mobile (cash/bank/income/expense/profit) */ @media (max-width: 1023px){ #sec_home .kpi-title{ font-size: 10px !important; letter-spacing:.2px; color: rgba(255,255,255,.90) !important; } #sec_home .kpi-value{ font-size: 13.5px !important; /* 13-14 */ line-height: 1.15 !important; font-weight: 900 !important; color: #ffffff !important; } #sec_home .kpi-card i{ color: #ffffff !important; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.20) !important; } #sec_home .kpi-card::before, #sec_home .kpi-card::after{ display:none !important; } #sec_home .kpi-card{ background: #064e3b !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 12px 26px rgba(2,6,23,.14) !important; } } /* App tiles grid (mobile home) */ .m-dash-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 420px){ .m-dash-tiles{ gap: 8px; } } .dash-tile{ background: var(--app-tile-bg); border: 1px solid var(--app-border); border-radius: 14px; padding: 12px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px; box-shadow: 0 10px 22px rgba(2,6,23,.06); } .dash-ico{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(6,78,59,.10); border: 1px solid rgba(6,78,59,.14); } .dash-ico i{ font-size: 20px; color: var(--app-accent); } .dash-txt{ font-weight: 900; font-size: 11px; line-height: 1.05; color: #111827; text-align:center; } /* Bottom nav app-like on mobile (5 items) */ @media (max-width: 1023px){ .bottom-nav{ background: #ffffff !important; border-top: 1px solid rgba(2,6,23,.10) !important; box-shadow: 0 -12px 26px rgba(2,6,23,.10) !important; } .nav-btn{ background: transparent !important; border: 0 !important; color: rgba(17,24,39,.80) !important; padding: 10px 6px !important; } .nav-btn i{ color: rgba(17,24,39,.70) !important; } .nav-btn.active{ background: rgba(6,78,59,.10) !important; color: var(--app-accent) !important; border: 0 !important; box-shadow: none !important; } .nav-btn.active i{ color: var(--app-accent) !important; } .nav-btn.active::after{ background: var(--app-accent) !important; } } /* Placeholder size fix */ ::placeholder{ font-size: .92em !important; opacity: .65 !important; } @media (max-width: 1023px){ /* KPI cards: full purple background like mobile app reference */ .kpi-card{ border-radius: 14px !important; overflow:hidden; background: #064e3b !important; /* dark green */ border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 12px 26px rgba(2,6,23,.12); } .kpi-card::before{ background:none !important; } .kpi-card::after{ opacity:0 !important; } .kpi-title{ display:block; padding: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(255,255,255,.88) !important; font-weight: 900 !important; letter-spacing: .2px; } .kpi-value{ color: #ffffff !important; line-height: 1.25 !important; margin-top: 6px; } /* Icon pill */ .kpi-card i{ background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.20) !important; color: #ffffff !important; } } /* KPI amount font sizing: phone 13px, tablet 14px */ @media (max-width: 767px){ .kpi-value{ font-size: 13px !important; } } @media (min-width: 768px) and (max-width: 1023px){ .kpi-value{ font-size: 14px !important; } } /* ============================ Mobile bottom nav: parallel row ============================ */ @media (max-width: 1023px){ .bottom-nav-row{ display:flex; gap:8px; align-items:stretch; flex-wrap: nowrap; } .bottom-nav-row .nav-btn{ flex:1; min-width:0; padding: 10px 6px; } .bottom-nav-row .nav-btn div{ font-size: 9px; line-height: 1.05; white-space: nowrap; } .bottom-nav-row .nav-btn i{ font-size: 15px; } } /* Placeholder smaller & consistent */ ::placeholder{ font-size: .92em !important; opacity: .70; } /* ---- Trade cart (mobile friendly) */ .trade-item{ border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.8); } .dark .trade-item{background: rgba(15,23,42,.35);} .trade-item .ti-top{display:flex;align-items:flex-start;gap:10px;} .trade-item .ti-name{font-weight:900;font-size:12px;line-height:1.2;} .trade-item .ti-meta{font-size:10px;font-weight:800;color:#64748b;margin-top:2px;} .trade-item .ti-amt{margin-left:auto;font-weight:900;font-size:12px;white-space:nowrap;} .trade-item .ti-actions{margin-top:8px;display:flex;gap:8px;} .trade-item .ti-actions .btn{flex:1;}