/* styles.css — extracted from index.html <style> block */

:root{--accent:#00C896;--income:#00C896;--expense:#F05A5A;--card-bg:#fff;--muted:#6B7A99;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#F0F4F8;color:#1A2340;margin:0;}
.dark body{background:#0F1624;color:#E8EDF5;--card-bg:#1A2340;--muted:#8896B3;}

/* LOGIN */
.login-wrap{min-height:100vh;background:#fff;display:flex;align-items:stretch;justify-content:center;padding:0;}
.login-left{flex:0 0 46%;background:linear-gradient(160deg,#0F1624 0%,#1A2340 55%,#0D2E26 100%);display:flex;align-items:center;justify-content:center;padding:40px;}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background:#ffffff;}
.login-box{width:100%;max-width:380px;}
.login-form-label{font-size:12px;font-weight:600;color:#374151;display:block;margin-bottom:6px;}
.login-inp{width:100%;padding:12px 14px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:8px;color:#111827;font-size:14px;outline:none;transition:border .15s,background .15s;font-family:inherit;}
.login-inp::placeholder{color:#9CA3AF;}
.login-inp:focus{border-color:#00C896;background:#fff;}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;background:#2B3242;border:1px solid #2B3242;border-radius:10px;color:#F3F4F6;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;}
.social-btn:hover{background:#39415a;border-color:#39415a;}
@media(max-width:860px){
  .login-wrap{flex-direction:column;}
  .login-left{flex:0 0 auto;padding:32px 20px;min-height:180px;}
  .login-right{padding:32px 20px;}
}

/* LAYOUT */
#app{display:flex;min-height:100vh;}
#sidebar{width:230px;background:#1A2340;min-height:100vh;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:200;border-right:1px solid rgba(255,255,255,0.07);transition:transform .25s;}
#main{margin-left:230px;flex:1;padding:28px;min-height:100vh;}
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;}
#hamburger{display:none;position:fixed;top:14px;left:14px;z-index:300;background:#00C896;border:none;border-radius:10px;width:42px;height:42px;font-size:20px;color:#fff;align-items:center;justify-content:center;cursor:pointer;}

/* SIDEBAR */
.s-logo{padding:22px 18px 18px;border-bottom:1px solid rgba(255,255,255,0.07);}
.s-logo h1{font-size:19px;font-weight:800;color:#00C896;}
.s-logo p{font-size:10px;color:#6B7A99;margin-top:3px;}
.s-nav{flex:1;padding:10px 8px;overflow-y:auto;}
.s-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#B8C4D8;font-size:13px;margin-bottom:2px;border-left:3px solid transparent;transition:all .15s;cursor:pointer;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;font-family:inherit;}
.s-nav a.active{background:rgba(0,200,150,0.12);color:#00C896;font-weight:700;border-left:3px solid #00C896;}
.s-nav a:hover:not(.active){background:rgba(255,255,255,0.05);color:#fff;}
.s-bottom{padding:10px 8px;border-top:1px solid rgba(255,255,255,0.07);}

/* CARDS */
.card{background:#fff;border-radius:14px;border:1px solid #E2E8F0;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.dark .card{background:#1A2340;border-color:#252F48;}
.card-title{font-size:14px;font-weight:700;margin-bottom:14px;}
.stat-card{background:#fff;border-radius:14px;border:1px solid #E2E8F0;padding:18px 20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.dark .stat-card{background:#1A2340;border-color:#252F48;}

/* PAGES */
.page{display:none;}.page.active{display:block;}
.tab-btn{padding:8px 16px;border-radius:10px;border:1px solid #E2E8F0;background:#fff;color:#1A2340;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;}
.dark .tab-btn{background:#1A2340;border-color:#252F48;color:#E8EDF5;}
.chip-btn{padding:6px 12px;border-radius:20px;border:1px solid #E2E8F0;background:#F8FAFC;color:#374151;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.chip-btn:hover{background:#00C896;border-color:#00C896;color:#fff;}
.dark .chip-btn{background:#0F1624;border-color:#252F48;color:#B8C4D8;}
.dark .chip-btn:hover{background:#00C896;border-color:#00C896;color:#fff;}
.chip-btn.active{background:#00C896;border-color:#00C896;color:#fff;}
.tab-btn.active{border-color:#00C896;background:rgba(0,200,150,0.1);color:#00C896;font-weight:700;}

/* FORMS */
.inp{width:100%;padding:9px 12px;border-radius:10px;border:1px solid #E2E8F0;background:#F8FAFC;color:#1A2340;font-size:13px;outline:none;transition:border .15s;font-family:inherit;}
.dark .inp{background:#0F1624;border-color:#252F48;color:#E8EDF5;}
.cell-edit{width:100%;padding:5px 7px;border-radius:7px;border:1px solid transparent;background:transparent;color:inherit;font-size:12px;font-family:inherit;outline:none;transition:border .15s,background .15s;height:30px;box-sizing:border-box;}
select.cell-edit{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 6px center;background-size:14px;padding-right:24px;}
select.txn-unknown-select{color:#B3BCCC;}
select.txn-unknown-select option:not(.txn-unknown-opt){color:#1A2233;}
option.txn-unknown-opt{color:#B3BCCC;}
.cat-type-label{display:inline-flex;align-items:center;height:20px;padding:0 9px;}
.cell-edit:hover{border-color:#E2E8F0;background:#F8FAFC;}
.drag-fill-handle{position:absolute;right:1px;bottom:1px;width:9px;height:9px;background:var(--accent);border:1px solid #fff;border-radius:1.5px;cursor:crosshair;z-index:6;opacity:0;transition:opacity .1s;}
.dark .drag-fill-handle{border-color:#0F1624;}
tr:hover .drag-fill-handle{opacity:1;}
.txn-cat-td.drag-fill-hover,.txn-sub-td.drag-fill-hover{background:rgba(0,200,150,0.16);outline:1px dashed var(--accent);outline-offset:-1px;}
.cell-edit:focus{border-color:#00C896;background:#F8FAFC;}
.dark .cell-edit:hover,.dark .cell-edit:focus{background:#0F1624;border-color:#252F48;}
.dark .cell-edit:focus{border-color:#00C896;}
.inp:focus{border-color:#00C896;}
.btn{padding:9px 18px;border-radius:10px;border:none;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;}
.btn-primary{background:#00C896;color:#fff;}
.btn-primary:hover{background:#009e77;}
.btn-outline{background:transparent;border:1px solid #E2E8F0;color:inherit;}
.dark .btn-outline{border-color:#252F48;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-danger{background:rgba(240,90,90,0.1);border:1px solid rgba(240,90,90,0.3);color:#F05A5A;}
.btn-dark{background:#1A2340;color:#fff;}
.btn-dark:hover{background:#12192e;}
.dark .btn-dark{background:#0F1624;border:1px solid #252F48;}
.dark .btn-dark:hover{background:#0A0F1A;}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px;}
.form-label{font-size:11px;font-weight:600;color:#6B7A99;display:block;margin-bottom:5px;}
.add-box{border:1px solid #00C896;border-radius:14px;padding:18px;background:#fff;margin-bottom:16px;}
.dark .add-box{background:#1A2340;}

/* DATA STORAGE MODE CARDS */
.wl-data-mode{border:2px solid #E2E8F0;border-radius:12px;padding:14px 12px;cursor:pointer;text-align:center;background:var(--card-bg,#fff);transition:all .15s;}
.dark .wl-data-mode{border-color:#252F48;}
.wl-data-mode:hover{border-color:#00C896;}
.wl-data-mode.active{border-color:#00C896;background:rgba(0,200,150,0.08);}
.wl-data-mode svg,.wl-data-mode .wl-dm-emoji{display:block;margin:0 auto 8px;}
.wl-data-mode .wl-dm-label{font-size:12px;font-weight:700;}
.wl-data-mode .wl-dm-check{font-size:10px;color:#00C896;margin-top:4px;font-weight:700;}

/* TABLE */
.tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid #E2E8F0;}
.dark .tbl-wrap{border-color:#252F48;}
.cat-filter-btn{border:none;background:transparent;cursor:pointer;font-size:11px;color:#6B7A99;padding:2px 4px;border-radius:4px;vertical-align:middle;}
.cat-filter-btn:hover{background:rgba(0,0,0,0.06);}
.cat-filter-btn.active-filter{color:#00C896;font-weight:900;}
.cat-filter-menu{position:fixed;z-index:9999;background:#fff;border:1px solid #E2E8F0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.15);width:240px;max-height:340px;display:flex;flex-direction:column;font-weight:400;text-align:left;color:#1A2340;font-size:12px;}
.dark .cat-filter-menu{background:#1A2340;border-color:#252F48;color:#E8EDF5;}
.cat-filter-menu .cfm-search{padding:8px;border-bottom:1px solid #E2E8F0;}
.dark .cat-filter-menu .cfm-search{border-color:#252F48;}
.cat-filter-menu .cfm-search input{width:100%;padding:6px 8px;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;font-family:inherit;}
.cat-filter-menu .cfm-list{overflow-y:auto;flex:1;padding:4px 0;}
.cat-filter-menu .cfm-cat-row{display:flex;align-items:center;gap:6px;padding:5px 10px;cursor:pointer;font-weight:700;}
.cat-filter-menu .cfm-cat-row:hover{background:rgba(0,200,150,0.08);}
.cat-filter-menu .cfm-sub-row{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 46px;cursor:pointer;position:relative;font-weight:400;color:#6B7A99;font-size:11.5px;}
.cat-filter-menu .cfm-sub-row:before{content:'';position:absolute;left:30px;top:0;bottom:50%;width:8px;border-left:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;}
.dark .cat-filter-menu .cfm-sub-row:before{border-color:#252F48;}
.cat-filter-menu .cfm-sub-row:hover{background:rgba(0,200,150,0.08);}
.cat-filter-menu .cfm-expand{width:14px;text-align:center;cursor:pointer;flex-shrink:0;color:#6B7A99;}
.cat-filter-menu .cfm-actions{display:flex;justify-content:space-between;gap:6px;padding:8px;border-top:1px solid #E2E8F0;}
.dark .cat-filter-menu .cfm-actions{border-color:#252F48;}
.cat-filter-menu .cfm-actions button{flex:1;padding:6px 0;border-radius:6px;border:1px solid #E2E8F0;background:transparent;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}
.dark .cat-filter-menu .cfm-actions button{border-color:#252F48;color:#E8EDF5;}
.cat-filter-menu .cfm-actions button.cfm-ok{background:#1A2340;color:#fff;border-color:#1A2340;}
.cat-filter-menu input[type="checkbox"]{accent-color:#94A3B8;}
/* Flyout menus — Profile / Settings / Report picker. Reuses .cat-filter-menu
   for position/shadow/border, adds the row+heading list layout described
   in the Settings/Profile UI restructure. */
.flyout-menu{width:280px;max-height:420px;overflow-y:auto;padding:10px 14px;}
.flyout-heading{font-size:11px;color:#6B7A99;text-transform:uppercase;letter-spacing:.03em;margin:12px 0 4px;}
.flyout-heading:first-child{margin-top:2px;}
.flyout-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid #E2E8F0;cursor:pointer;font-size:13px;}
.dark .flyout-row{border-color:#252F48;}
.flyout-heading+.flyout-row{border-top:none;}
.flyout-row:hover{background:rgba(0,200,150,0.08);}
.flyout-row-icon{width:18px;text-align:center;flex-shrink:0;font-size:14px;}
.flyout-row-active{background:rgba(0,200,150,0.1);font-weight:700;}
.flyout-row-danger{color:#F05A5A;}
.flyout-row-danger:hover{background:rgba(240,90,90,0.08);}
.flyout-name-row{display:flex;gap:8px;align-items:center;padding-bottom:10px;border-bottom:1px solid #E2E8F0;margin-bottom:4px;}
.dark .flyout-name-row{border-color:#252F48;}
/* My Accounts / Family (Shared) sidebar toggle — see renderAcctViewToggle() in app.core.js */
.acct-view-btn{flex:1;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#8B96B3;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;}
.acct-view-btn:hover{background:rgba(255,255,255,0.06);}
.acct-view-btn.active{background:rgba(0,200,150,0.15);border-color:#00C896;color:#00C896;}
table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;}
.dark table{background:#1A2340;}
thead tr{background:#F8FAFC;}
.tbl-wrap table thead th{position:sticky;top:0;z-index:3;background:#F8FAFC;box-shadow:0 1px 0 #E2E8F0;}
.dark .tbl-wrap table thead th{background:#0F1624;box-shadow:0 1px 0 #252F48;}
.dark thead tr{background:#0F1624;}
th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:#6B7A99;white-space:nowrap;cursor:pointer;}
td{padding:10px 12px;border-top:1px solid #E2E8F0;vertical-align:middle;}
.dark td{border-color:#252F48;}
.amt-pos{color:#00C896;font-weight:700;}
.amt-neg{color:#F05A5A;font-weight:700;}
.amt-credit{color:#1A2340;font-weight:700;}
.amt-transfer{color:#3B82F6;font-weight:700;}

/* Transactions grid: respaced tighter so a full page of rows fits without
   as much scrolling — trims horizontal cell padding (~2mm) and the
   Date/Amount columns specifically, per 24.07.2026 fixes. */
#txn-table th,#txn-table td{padding:8px 8px;}
#txn-table td:nth-child(2){padding-right:5px;}
#txn-table td:nth-child(3){padding-left:5px;}
#txn-table .cell-edit{padding:5px 5px;}

/* BADGES */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-income{background:rgba(0,200,150,0.1);color:#00C896;}
.badge-expense{background:rgba(240,90,90,0.1);color:#F05A5A;}
.badge-transfer{background:rgba(59,130,246,0.1);color:#3B82F6;}
.badge-cat{background:#F1F5F9;color:#6B7A99;}
.dark .badge-cat{background:#252F48;}
.badge-sub{background:rgba(0,200,150,0.1);color:#00C896;}
.reg-pending{background:#F1F5F9;color:#6B7A99;border:1px solid #E2E8F0;}
.reg-ok{background:#E6FAF5;color:#00C896;border:1px solid rgba(0,200,150,0.3);}
.reg-fail{background:rgba(240,90,90,0.1);color:#F05A5A;border:1px solid rgba(240,90,90,0.3);}

/* PROGRESS */
.prog-wrap{height:8px;border-radius:8px;background:#F1F5F9;overflow:hidden;}
.dark .prog-wrap{background:#252F48;}
.prog-bar{height:100%;border-radius:8px;transition:width .3s;}

/* INVESTMENT */
.inv-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:20px;}
.dark .inv-card{background:#1A2340;border-color:#252F48;}
/* Transaction summary chips */
.txn-chip{padding:6px 12px;border-radius:10px;border:1px solid #E2E8F0;font-weight:700;font-size:12px;}
.dark .txn-chip{border-color:#252F48;}
.active-filter-badge{padding:6px 12px;border-radius:10px;background:rgba(139,92,246,0.12);border:1px solid #8B5CF6;font-weight:700;font-size:12px;color:#8B5CF6;}
/* Pagination footer */
.txn-pag-info{font-size:12px;color:#6B7A99;}
.dark .txn-pag-info{color:#8896B3;}
.inv-inp{width:100%;padding:7px 10px;border-radius:8px;border:1px solid #E2E8F0;background:#F8FAFC;color:#1A2340;font-size:12px;outline:none;font-family:inherit;}
.dark .inv-inp{background:#0F1624;border-color:#252F48;color:#E8EDF5;}
.inv-inp:focus{border-color:#00C896;}

/* CATEGORY EDITOR */
.cat-item{background:#fff;border-radius:12px;border:1px solid #E2E8F0;margin-bottom:8px;overflow:hidden;}
.dark .cat-item{background:#1A2340;border-color:#252F48;}
.sub-tag{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:12px;}
.dark .sub-tag{background:#0F1624;border-color:#252F48;}

/* CSS BARS */
.css-bar{height:12px;border-radius:6px;transition:width .4s;min-width:2px;}

/* PRINT */
@media print{
  #sidebar,#hamburger,#overlay,.no-print{display:none!important;}
  #main{margin-left:0!important;padding:10px!important;}
  body{background:#fff!important;color:#000!important;font-size:11px;}
  .page{display:block!important;}
  .card,.inv-card{border:1px solid #ccc!important;box-shadow:none!important;page-break-inside:avoid;}
  .print-break{page-break-before:always;}
  .dark .card,.dark .inv-card{background:#fff!important;color:#000!important;}
}

/* MOBILE */
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #overlay.show{display:block;}
  #main{margin-left:0;padding:60px 14px 20px;}
  #hamburger{display:flex;}
  .g4{grid-template-columns:1fr 1fr!important;}
  .g2{grid-template-columns:1fr!important;}
  .g3{grid-template-columns:1fr!important;}
  .dual-grid{grid-template-columns:1fr!important;}
  .act-grid{grid-template-columns:1fr!important;}
}
@media(max-width:480px){
  .login-left{padding:24px 16px;min-height:140px;}
  .login-right{padding:24px 16px;}
}