/* MedHub Ledger - interface theme (layered on Bootstrap 5.3) */
:root{
  --ink:#10243e;--brand:#1d5bbf;--brand-dark:#154a9e;--brand-50:#eef4fc;--brand-100:#dbe8f9;
  --canvas:#f4f7fb;--paper:#fff;--line:#e1e8f1;--line-strong:#cfd9e6;--muted:#64748b;
  --dr:#0f7b55;--cr:#b4352a;--warn:#b7791f;--side-w:240px;
  --bs-body-font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bs-body-font-size:.925rem;--bs-body-color:var(--ink);--bs-body-bg:var(--canvas);
  --bs-border-color:var(--line);--bs-link-color:var(--brand);--bs-link-hover-color:var(--brand-dark);
  --bs-primary:var(--brand);--bs-primary-rgb:29,91,191;--bs-border-radius:8px;--bs-border-radius-lg:12px;
  --bs-secondary-color:var(--muted);--bs-emphasis-color:var(--ink);
}
body{font-feature-settings:"tnum" 1,"lnum" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.text-muted{color:var(--muted)!important}
a{text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- Shell ---- */
.shell{display:flex;min-height:100vh}
.side{background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column}
.side .brand-box{padding:1rem 1.1rem .6rem}
.side .brand-box img{height:46px;width:auto;display:block}
.side .nav-scroll{flex:1;overflow-y:auto;padding:.4rem .75rem 1rem}
.side .nav-group{font-size:.74rem;font-weight:600;color:var(--muted);margin:1.1rem .6rem .3rem}
.side .nav-link{color:var(--ink);border-radius:8px;padding:.48rem .65rem;display:flex;align-items:center;gap:.65rem;font-weight:500;font-size:.9rem}
.side .nav-link i{font-size:1.05rem;color:#7a8ba3;width:1.2rem;text-align:center}
.side .nav-link:hover{background:var(--brand-50);text-decoration:none}
.side .nav-link.active{background:var(--brand-50);color:var(--brand-dark);box-shadow:inset 3px 0 0 var(--brand)}
.side .nav-link.active i{color:var(--brand)}
.side .side-foot{border-top:1px solid var(--line);padding:.75rem 1rem;font-size:.8rem;color:var(--muted)}
@media (min-width:768px){
  .side.offcanvas-md{position:sticky!important;top:0;height:100vh;width:var(--side-w);flex:0 0 var(--side-w);transform:none!important;visibility:visible!important}
}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{height:58px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 1rem;position:sticky;top:0;z-index:20}
.bar .who{color:var(--ink);display:flex;align-items:center;gap:.5rem;font-weight:500}
.bar .who .av{width:30px;height:30px;border-radius:50%;background:var(--brand-100);color:var(--brand-dark);display:grid;place-items:center;font-weight:600;font-size:.8rem}
.content{padding:1.25rem 1.25rem 3rem;max-width:1440px;width:100%}
@media (min-width:992px){.content{padding:1.5rem 2rem 3rem}}

/* ---- Page header ---- */
.page-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.page-head h1{font-size:1.35rem;margin:0}
.hint{font-size:.8rem}

/* ---- Buttons ---- */
.btn{border-radius:8px;font-weight:500;--bs-btn-padding-y:.42rem}
.btn-sm{--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.65rem;--bs-btn-font-size:.82rem}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);--bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:#b9cdee;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:var(--brand);--bs-btn-active-border-color:var(--brand)}
.btn-outline-secondary{--bs-btn-color:#475569;--bs-btn-border-color:var(--line-strong);--bs-btn-hover-bg:#eef2f7;--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--line-strong);--bs-btn-active-bg:#e3e9f1;--bs-btn-active-color:var(--ink)}
.btn-add{background:var(--brand);color:#fff;border:0;padding:.5rem .95rem;font-weight:600;box-shadow:0 1px 2px rgba(29,91,191,.35)}
.btn-add:hover{background:var(--brand-dark);color:#fff}

/* ---- Cards and stats ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(16,36,62,.04)}
.card-header{background:var(--paper)!important;border-bottom:1px solid var(--line);font-weight:600;padding:.8rem 1rem}
.stat{padding:1rem 1.1rem!important}
.stat .text-muted{font-size:.8rem;font-weight:500}
.stat .v{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-top:.15rem;font-variant-numeric:tabular-nums}
.stat.warn .v{color:var(--warn)}.stat.good .v{color:var(--dr)}.stat.bad .v{color:var(--cr)}
.hero{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(16,36,62,.04);overflow:hidden}
.hero>div{padding:1.2rem 1.4rem}
.hero>div+div{border-left:1px solid var(--line)}
.hero .lbl{font-size:.82rem;color:var(--muted);font-weight:500}
.hero .big{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.hero .sub{font-size:.78rem;color:var(--muted)}
.hero .recv .big{color:var(--dr)}.hero .pay .big{color:var(--cr)}
@media (max-width:767.98px){.hero{grid-template-columns:1fr}.hero>div+div{border-left:0;border-top:1px solid var(--line)}.hero .big{font-size:1.6rem}}

/* ---- Tables ---- */
.table{--bs-table-bg:transparent;--bs-table-hover-bg:var(--brand-50);--bs-table-border-color:var(--line);font-size:.9rem}
.table>:not(caption)>*>*{padding:.62rem .85rem}
.table thead th{background:#f8fafd;color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .actions .btn{border-color:transparent;background:transparent;color:#51627a}
.table .actions .btn:hover{background:var(--brand-100);color:var(--brand-dark)}
.table .actions .btn-outline-danger:hover{background:#fbe4e1;color:var(--cr)}
.table .actions form{display:inline}
.dr{color:var(--dr);font-weight:600}.cr{color:var(--cr);font-weight:600}
.pos{color:var(--cr)}.neg{color:var(--dr)}
.opening-row td{background:#f8fafd;font-weight:600}
.closing-row td{background:var(--brand-50);font-weight:600;border-top:2px solid var(--brand-100)}

/* ---- Forms ---- */
.form-label{font-size:.8rem;font-weight:500;color:#475569;margin-bottom:.25rem}
.form-control,.form-select,.ts-control{border-color:var(--line-strong);border-radius:8px;padding:.5rem .7rem;background-color:var(--paper)}
.form-control:focus,.form-select:focus,.ts-wrapper.focus .ts-control{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,91,191,.15)}
.form-control-sm{padding:.3rem .55rem}
.line-row{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;margin-bottom:.6rem;background:#fbfcfe}
.alert{border-radius:10px;border:0}
.pagination{--bs-pagination-border-radius:8px;--bs-pagination-active-bg:var(--brand);--bs-pagination-active-border-color:var(--brand);--bs-pagination-color:var(--brand)}
.badge{font-weight:600}

/* ---- Add transaction popup ---- */
.modal-content{border:0;border-radius:16px;box-shadow:0 20px 50px rgba(16,36,62,.25)}
.modal-header{border-bottom:0;padding-bottom:0}
.tx-tile{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.95rem 1rem;width:100%;transition:border-color .15s,background .15s}
.tx-tile:hover{border-color:var(--brand);background:var(--brand-50)}
.tx-tile i{font-size:1.35rem}
.tx-tile b{font-size:.98rem;font-weight:600}
.tx-tile span{font-size:.78rem;color:var(--muted)}
.tx-in i{color:var(--dr)}.tx-out i{color:var(--cr)}.tx-buy i{color:var(--brand)}
#txList .list-group-item{border-left:0;border-right:0;padding:.7rem .25rem}
#txList .list-group-item:hover{background:var(--brand-50)}

/* ---- Sign in ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--brand-50) 0,var(--canvas) 55%)}
.login-card{width:100%;max-width:410px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:0 12px 40px rgba(16,36,62,.08)}
.login-card img{height:64px;display:block;margin:0 auto 1rem}

/* ---- Public statement pages ---- */
.public-bar{background:var(--paper);border-bottom:1px solid var(--line);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between}
.public-bar img{height:38px}

/* ---- Small screens: tables become cards ---- */
@media (max-width:767.98px){
  .content{padding:1rem .9rem 3rem}
  .table-stack thead{display:none}
  .table-stack tr{display:block;border:1px solid var(--line);border-radius:10px;margin:.6rem;padding:.3rem .6rem;background:var(--paper)}
  .table-stack td{display:flex;justify-content:space-between;gap:1rem;border:0!important;padding:.28rem 0!important;text-align:right}
  .table-stack td::before{content:attr(data-label);font-weight:500;color:var(--muted);text-align:left}
  .table-stack td.actions{justify-content:flex-end}.table-stack td.actions::before{content:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* period bar */
.period-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.period-bar .stepper{display:flex;align-items:center;gap:.25rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.2rem}
.period-bar .stepper .label{font-weight:600;min-width:10.5rem}
.period-bar .search{max-width:260px}
.page-head .btn i{margin-right:.15rem}


 a.tx-tile{text-decoration:none;color:inherit}
.opt-group{display:flex;flex-wrap:wrap;gap:.4rem}
.opt-group .btn{min-width:6rem}

/* Desktop: page action buttons sit in the centre, under the title */
@media(min-width:768px){.page-head{flex-direction:column;align-items:stretch!important;gap:.8rem}.page-head>*:not(:first-child){align-self:center}}

/* ---- Phones: one-handed layout ---- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;align-items:flex-end;justify-content:space-around;
  background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(16,36,62,.06);
  padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom));height:calc(62px + env(safe-area-inset-bottom))}
.bottom-nav .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem 0;border:0;background:none;color:var(--muted);font-size:.7rem;font-weight:500;min-height:48px}
.bottom-nav .tab i{font-size:1.25rem;line-height:1}
.bottom-nav .tab.active{color:var(--brand)}
.bottom-nav .tab:hover{text-decoration:none}
.bottom-nav .fab{flex:0 0 auto;width:58px;height:58px;margin:0 .4rem 10px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1.6rem;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(29,91,191,.45)}
.bottom-nav .fab:active{transform:scale(.96)}
@media (max-width:767.98px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .bar{height:52px;padding:0 .75rem}
  .content{padding:.9rem .75rem 1.5rem}
  .page-head{gap:.5rem;margin-bottom:.8rem}
  .page-head h1{font-size:1.15rem}
  .page-head .btn-sm{--bs-btn-padding-y:.42rem;--bs-btn-padding-x:.7rem}
  .stat{padding:.75rem .85rem!important}
  .stat .v{font-size:1.1rem}
  .form-control,.form-select,.ts-control,.ts-control input{font-size:16px}
  .form-actions{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:15;background:linear-gradient(180deg,rgba(244,247,251,0),var(--canvas) 30%);
    padding:.9rem 0 .4rem;margin-bottom:0}
  .form-actions .btn{flex:1;padding-top:.65rem;padding-bottom:.65rem}
  .line-row{padding:.6rem}
  .table>:not(caption)>*>*{padding:.55rem .6rem}
  .period-bar .search{max-width:none;flex:1 1 100%}
  .period-bar .stepper .label{min-width:0}
  .nav-pills{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-pills .nav-link{white-space:nowrap}
  .nav-pills::-webkit-scrollbar{display:none}
  .table-stack td:empty{display:none!important}
  .table-stack tr.txrow td:first-child{font-weight:600}
  .dropdown-menu{font-size:.95rem}
  .dropdown-item{padding:.55rem 1rem}
  /* Add transaction opens as a bottom sheet near the thumb */
  .modal-dialog.modal-dialog-centered{align-items:flex-end;min-height:100%;margin:0}
  .modal-dialog.modal-dialog-centered .modal-content{border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .modal.fade .modal-dialog.modal-dialog-centered{transform:translateY(40px)}
  .modal.show .modal-dialog.modal-dialog-centered{transform:none}
  .tx-tile{padding:.8rem .85rem}
  .opt-group .btn{min-width:0;flex:1 1 auto}
  .accordion-button{padding:.8rem .9rem}
}
@media print{.bottom-nav,.bar,.side{display:none!important}body{padding:0}}
@media (min-width:768px){.ledger-desc{min-width:240px}}
@media (max-width:767.98px){.table-stack tfoot tr td{justify-content:space-between}.table-stack tfoot td::before{content:none}.table-stack tfoot td:not(:empty){display:flex}}