/* Rankiz UI hardening v8.10.3 — responsive accounting screens and reports */
html,body{max-width:100%;overflow-x:hidden}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app{width:100%}
.report-table-wrap,.rk-ledger-tree,.rk-exp-lines{max-width:100%;-webkit-overflow-scrolling:touch}
.report-table-wrap,.rk-exp-lines{overflow-x:auto}
.report-table-wrap table,.rk-exp-lines table{width:max-content;min-width:100%}
.report-sticky-viewport{max-width:100vw}
.report-sticky-shell{z-index:5000!important;margin:0!important;border-top:0!important;box-shadow:0 5px 14px rgba(0,0,0,.22)!important}
.report-sticky-shell table{margin:0!important}
.report-sticky-shell thead tr:first-child>*{border-top:0!important}
.report-sticky-shell thead tr>*{height:44px!important;min-height:44px!important;padding:10px 8px!important;background:#071a31!important;color:#fff!important;border-bottom:3px solid #fde004!important;font-weight:800!important;line-height:1.2!important;vertical-align:middle!important;white-space:nowrap!important}
.report-sticky-shell thead tr>*:last-child{color:#fde004!important}
header{position:sticky!important;top:0!important;z-index:6000!important;overflow:visible!important;padding-bottom:0!important}
.dmenu{z-index:9000!important;overflow:visible!important}
.dmenu .dm-item{z-index:9001}
.dmenu .dm-item.open{z-index:9009}
.dmenu .dm-pop{z-index:9010!important}
#navDrawer{z-index:9020!important}

/* Reports workspace: compact navigation, aligned controls and a clean output surface. */
#tab-reports{--report-radius:20px}
#reportFilters{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;padding:16px!important;border-radius:var(--report-radius)!important;border-top:4px solid var(--accent);box-shadow:0 8px 24px rgba(19,59,104,.08)!important}
#reportFilters>.row,#reportFilters>.two{margin:0}
.report-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.report-filter-head,.report-picker-row{grid-column:1/-1}
.report-category-row{grid-column:span 3}
.report-period-row{grid-column:span 9}
.report-fx-row{grid-column:span 6}
.report-fx-hint{grid-column:span 6;align-self:center}
.report-filter-head b{display:block;color:var(--ink);font-size:18px;line-height:1.2}
.report-filter-head span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
#reportFilters .report-switcher{display:flex!important;overflow-x:auto;flex-wrap:nowrap!important;gap:8px;width:100%;padding:7px;background:var(--card2);border:1px solid var(--line);border-radius:17px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;box-shadow:inset 0 1px 2px rgba(19,59,104,.06)}
#reportFilters .report-switcher::-webkit-scrollbar{height:4px}
#reportFilters .report-switcher::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
#reportFilters .report-switcher .seg-btn{position:relative;flex:0 0 auto;min-width:122px;min-height:42px;padding:9px 12px;line-height:1.2;border:1px solid transparent;border-radius:12px;white-space:nowrap;scroll-snap-align:start;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
#reportFilters .report-switcher .seg-btn:hover{transform:translateY(-2px);border-color:var(--line);background:var(--card);box-shadow:0 7px 14px rgba(19,59,104,.12)}
#reportFilters .report-switcher .seg-btn.active{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 70%,#c79000);box-shadow:0 7px 16px rgba(19,59,104,.16),inset 0 -2px 0 rgba(0,0,0,.08)}
#reportFilters .report-switcher .seg-btn.active::after{content:"";position:absolute;left:50%;bottom:4px;width:18px;height:3px;border-radius:999px;background:var(--ink);transform:translateX(-50%)}
#reportFilters .report-switcher .seg-btn:active{transform:translateY(0) scale(.98)}
.report-width-select{width:auto!important;min-width:138px;min-height:38px!important;padding:7px 32px 7px 10px!important;border-radius:11px!important;font-size:12px!important;font-weight:700}
#reportFilters>.two{gap:10px}
#reportFilters>.two .row{margin-bottom:10px}
.report-output-card{padding:0!important;overflow:visible;border-radius:var(--report-radius)!important;box-shadow:0 8px 24px rgba(19,59,104,.08)!important}
#reportBody{padding:16px;min-width:0}
#reportBody .report-table-wrap{margin:12px -16px 0;border-top:1px solid var(--line);border-radius:0 0 var(--report-radius) var(--report-radius);background:var(--card)}
#reportBody .report-table-wrap table{width:100%;margin:0;border-collapse:separate!important;border-spacing:0}
#reportBody .report-table-wrap thead tr>*{height:auto!important;min-height:42px;vertical-align:middle!important;line-height:1.2!important;padding-top:11px!important;padding-bottom:11px!important;background:#133b68!important;color:#fff!important;border-bottom:3px solid var(--accent)!important;font-weight:800!important}
#reportBody .report-table-wrap thead tr>*:last-child{color:#fde004!important}
#reportBody .report-table-wrap tr>*+*{border-left:1px solid var(--line)!important}
#reportBody .report-table-wrap tbody tr>*{border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important}
#reportBody .report-table-wrap tbody tr:nth-child(even){background:color-mix(in srgb,var(--card2) 54%,transparent)}
#reportBody .report-table-wrap tbody tr{transition:background .14s ease,box-shadow .14s ease}
#reportBody .report-table-wrap tbody tr:hover{background:color-mix(in srgb,var(--chip) 78%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
#reportBody .report-table-wrap+.hint{display:block;clear:both;margin:14px 0 0!important;padding:10px 12px;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card2);color:var(--muted);font-size:12px;line-height:1.55;text-align:left;white-space:normal}
#tab-reports>.export{margin-top:14px!important}
/* Column width is a report-wide preference. Auto is the default and ends each
   column close to its content instead of stretching across unused space. */
#tab-reports.report-width-auto #reportBody .report-table-wrap table{width:max-content!important;min-width:0!important;table-layout:auto!important}
#tab-reports.report-width-auto #reportBody .report-table-wrap tr>*{padding-left:8px!important;padding-right:8px!important}
#tab-reports.report-width-auto #reportBody .report-table-wrap tr>*:first-child{max-width:420px;white-space:normal}
#tab-reports.report-width-compact #reportBody .report-table-wrap table{width:max-content!important;min-width:100%!important;table-layout:auto!important}
#tab-reports.report-width-compact #reportBody .report-table-wrap tr>*{padding:6px 7px!important}
#tab-reports.report-width-compact #reportBody .report-table-wrap tr>*:not(:first-child){min-width:88px}
#tab-reports.report-width-standard #reportBody .report-table-wrap table{width:max-content!important;min-width:100%!important;table-layout:auto!important}
#tab-reports.report-width-standard #reportBody .report-table-wrap tr>*{padding-left:10px!important;padding-right:10px!important}
#tab-reports.report-width-standard #reportBody .report-table-wrap tr>*:not(:first-child){min-width:120px}
#tab-reports.report-width-wide #reportBody .report-table-wrap table{width:max-content!important;min-width:100%!important;table-layout:auto!important}
#tab-reports.report-width-wide #reportBody .report-table-wrap tr>*{padding-left:16px!important;padding-right:16px!important}
#tab-reports.report-width-wide #reportBody .report-table-wrap tr>*:not(:first-child){min-width:168px}
.statement-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 0;padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(135deg,var(--card2),var(--card));box-shadow:0 4px 14px rgba(19,59,104,.06)}
.statement-hero__title{min-width:0}
.statement-hero__title b{display:block;font-size:17px;line-height:1.25;color:var(--ink)}
.statement-hero__title .hint{margin-top:3px}
.statement-hero .btn{flex:0 0 auto;min-height:42px}
.customer-statement-table{table-layout:fixed;min-width:920px}
.customer-statement-table th,.customer-statement-table td{font-variant-numeric:tabular-nums}
.customer-statement-table th:nth-child(1),.customer-statement-table td:nth-child(1){width:112px}
.customer-statement-table th:nth-child(2),.customer-statement-table td:nth-child(2){width:116px}
.customer-statement-table th:nth-child(3),.customer-statement-table td:nth-child(3){width:auto;min-width:190px;white-space:normal}
.customer-statement-table th:nth-child(n+4),.customer-statement-table td:nth-child(n+4){width:142px;white-space:nowrap}
.rk-posting-card{overflow:visible}
.rk-coa-popover{position:fixed;z-index:100000;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 42px rgba(15,23,42,.28);overflow-y:auto;overscroll-behavior:contain;isolation:isolate}
.rk-coa-popover .rk-ledger-group{position:relative;z-index:1;padding:8px 10px;color:var(--accentText);font-weight:800;background:var(--chip);border:0;border-bottom:1px solid var(--line)}
.rk-coa-popover .rk-ledger-leaf{position:relative;z-index:1;display:block;width:100%;padding:9px 10px;border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.rk-coa-popover .rk-ledger-leaf:hover{background:var(--accent);color:var(--accentText)}
.rk-coa-popover .rk-ledger-code{display:inline-block;min-width:68px;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}
.rk-customer-select,.rk-customer-field-select{width:100%}
.rk-screen-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.rk-screen-title label{font-size:18px;color:var(--ink)}
.rk-workflow-tabs{width:100%}
/* Vendor posting and GL posting are separate screens. The generic mobile
   workflow layout must never reveal the vendor steps on the GL screen. */
#tab-glpost .rk-workflow-tabs{display:none!important}
#tab-add #rkDirectMode{display:none!important}
.rk-post-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.rk-post-actions .btn{min-height:44px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:12px!important}
.kpi{min-width:0;box-shadow:0 4px 14px rgba(19,59,104,.07)!important}
.kpi .v{font-size:clamp(16px,2vw,22px)!important;line-height:1.15;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px!important;line-height:1.35}
#tab-dashboard>.card{min-width:0;overflow:hidden}
#tab-dashboard svg{max-width:100%;height:auto}

@media(max-width:850px){
  .app{padding-left:10px!important;padding-right:10px!important}
  header{max-width:100vw}
  .brand{min-width:0}
  .brand>div:nth-child(2){min-width:0}
  .brand h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card{padding:12px!important;border-radius:13px!important}
  .two,.filterbar,.rk-party-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .two>.row,.filterbar>div{width:100%;min-width:0}
  .rk-workflow-tabs{display:grid!important;grid-template-columns:1fr!important}
  .rk-lines{font-size:12px}
  .rk-posting-card .rk-exp-lines{overflow:visible!important}
  .rk-posting-card .rk-lines,.rk-posting-card .rk-lines tbody,.rk-posting-card .rk-lines tr,.rk-posting-card .rk-lines td{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .rk-posting-card .rk-lines{border-collapse:separate!important;border-spacing:0 9px!important}
  .rk-posting-card .rk-lines thead{display:none!important}
  .rk-posting-card .rk-lines tr{padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:visible}
  .rk-posting-card .rk-lines td{padding:5px 0!important;border:0!important;overflow:visible}
  .rk-posting-card .rk-lines td[data-label]::before{content:attr(data-label);display:block;margin:0 0 4px;color:var(--muted);font-size:11px;font-weight:800}
  .rk-posting-card .rk-lines td:not([data-label]):nth-child(1)::before{content:"Account / document";display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800}
  .rk-posting-card .rk-lines td:not([data-label]):nth-child(2)::before{content:"Description";display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800}
  .rk-posting-card .rk-lines td:not([data-label]):nth-child(3)::before{content:"Amount / outstanding";display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800}
  .rk-posting-card .rk-lines td:not([data-label]):nth-child(4)::before{content:"Pay now";display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800}
  .rk-posting-card .rk-lines input,.rk-posting-card .rk-lines select,.rk-posting-card .rk-coa-picker{width:100%!important;min-width:0!important;max-width:100%!important}
  .rk-coa-picker,.rk-customer-picker{min-width:0;width:100%}
  .rk-coa-popover{max-width:calc(100vw - 16px)!important}
  .rk-total{justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap;font-size:12px}
  .rk-total span{background:var(--chip);border-radius:8px;padding:7px 9px}
  .rk-post-actions{display:grid;grid-template-columns:1fr}
  .rk-post-actions .btn{width:100%}
  .report-table-wrap{margin-left:-2px;margin-right:-2px;overscroll-behavior-x:contain}
  .report-sticky-shell{max-width:calc(100vw - 20px)}
  .agerow{min-width:620px}
  .kpis{grid-template-columns:1fr 1fr!important}
  #tab-dashboard>.card{margin-top:10px}
  #reportFilters{display:block}
  #reportFilters>.row,#reportFilters>.two,#reportFilters>.hint{margin-bottom:10px}
}

@media(max-width:680px){
  .report-sticky-shell{display:none!important}
  #reportFilters{padding:12px!important;border-radius:13px!important}
  .report-filter-head{margin-bottom:9px}
  .report-filter-head b{font-size:16px}
  #reportFilters .report-switcher{padding:5px}
  #reportFilters .report-switcher::-webkit-scrollbar{display:none}
  #reportFilters .report-switcher .seg-btn{flex:0 0 auto;min-width:116px;min-height:40px;scroll-snap-align:start;white-space:nowrap}
  .report-filter-head{align-items:flex-start}
  .report-width-select{min-width:128px;font-size:11px!important;padding:7px 28px 7px 8px!important}
  #reportBody{padding:12px}
  #reportBody .report-table-wrap{display:block!important;width:auto!important;max-width:calc(100% + 24px)!important;margin:10px -12px 0;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding-bottom:7px}
  #reportBody .report-table-wrap thead{position:static!important}
  #reportBody .report-table-wrap thead tr>*{position:static!important;padding-top:9px!important;padding-bottom:9px!important;box-shadow:none}
  .statement-hero{align-items:flex-start;padding:12px;flex-direction:column}
  .statement-hero .btn{width:100%}
  /* Restore the original report-table layout on phones. Wide reports stay as
     one table and move horizontally with a finger; no rows are converted into
     cards and no frozen mobile header can overlap the data. */
  #reportBody .report-table-wrap table{display:table!important;width:max-content!important;min-width:max-content!important;max-width:none!important;table-layout:auto!important}
  #reportBody .report-table-wrap thead{display:table-header-group!important}
  #reportBody .report-table-wrap tbody{display:table-row-group!important}
  #reportBody .report-table-wrap tfoot{display:table-footer-group!important}
  #reportBody .report-table-wrap tr{display:table-row!important}
  #reportBody .report-table-wrap th,#reportBody .report-table-wrap td{display:table-cell!important;width:auto!important;min-width:0!important;max-width:420px!important;white-space:nowrap!important;transform:none!important}
  #reportBody .report-table-wrap th:first-child,#reportBody .report-table-wrap td:first-child{white-space:normal!important;min-width:150px!important}
  #reportBody .report-table-wrap th:not(:first-child),#reportBody .report-table-wrap td:not(:first-child){min-width:104px!important}
  #reportBody .report-table-wrap td.l:not(:first-child){white-space:normal!important;min-width:180px!important;max-width:280px!important}
  #reportBody .report-table-wrap td[data-label]::before{display:none!important;content:none!important}
  .customer-statement-table{min-width:844px!important}
}

@media(max-width:480px){
  /* The long product description was pushing the hamburger beyond the phone
     viewport. Keep the compact title and all controls visible instead. */
  .brand .sub{display:none!important}
  .brand{gap:8px}
  .brand h1{font-size:16px}
  .kpis{grid-template-columns:1fr!important}
  .kpi{padding:12px!important}
  .rk-screen-title label{font-size:16px}
  .report-sticky-shell{max-width:calc(100vw - 16px)}
}