/* MAYALI native-feeling responsive layout - mobile only, no changes to business logic */
.top-identity{display:flex;flex-direction:column;min-width:0;gap:2px}
.top-logo{display:none}
.mobile-table-hint{display:none}
@media(min-width:768px) and (max-width:1100px){
  .side{width:186px}
  .content{padding:24px}
  .reporttable{min-width:620px}
}
@media(max-width:767px){
  :root{font-size:15px}
  html{scroll-padding-top:82px}
  html,body{width:100%;max-width:100%;overflow-x:clip}
  .shell{display:block;min-height:100dvh;max-width:100%}
  .shell .side{display:block;width:0;height:0;min-width:0;padding:0;margin:0;border:0;background:transparent;position:static}
  .side>strong{display:none}
  .side .nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:row;align-items:stretch;justify-content:space-around;gap:3px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));margin:0;background:rgba(255,255,255,.98);border-top:1px solid #dae9e2;box-shadow:0 -4px 22px rgba(20,68,48,.11);overflow:visible;overscroll-behavior:contain}
  .side .nav button{flex:1 1 0;min-width:0;min-height:54px;padding:6px 1px;border-radius:11px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#67817a;background:transparent;font-size:0;line-height:1.1;white-space:nowrap}
  .side .nav button::before{content:attr(data-mobile-icon);font-size:23px;font-weight:650;line-height:1.15;display:block}
  .side .nav button::after{content:attr(data-mobile-label);font-size:11px;font-weight:650;line-height:1.2;display:block}
  .side .nav button.active{background:#e7f5ed;color:#087259}
  .side .nav button:focus-visible{outline:2px solid #087259;outline-offset:-2px}
  .shell .main{width:100%;max-width:100%;min-width:0}
  .top{position:sticky;top:0;z-index:30;min-height:64px;padding:9px 14px;background:#fff;box-shadow:0 2px 16px rgba(14,64,44,.05);gap:12px}
  .top-logo{display:block;color:#0c765c;font-size:19px;letter-spacing:2px;font-weight:850;line-height:1.08}
  .top-identity{flex:1;gap:4px}
  #greeting{display:block;font-size:11px;font-weight:550;color:#778f85;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
  .top #logout{min-height:40px;flex:0 0 auto;font-size:12px;padding:8px 12px;border-radius:10px}
  .content{box-sizing:border-box;width:100%;max-width:100%;padding:18px 13px calc(107px + env(safe-area-inset-bottom));min-height:calc(100dvh - 64px)}
  .content>section{max-width:100%;min-width:0}
  .content h1{font-size:clamp(23px,6vw,28px);line-height:1.18;letter-spacing:-.6px;margin:0 0 8px}
  .content h2{font-size:19px}
  .content>section>p{font-size:13px;line-height:1.5;margin-bottom:15px}
  .card{padding:16px;border-radius:15px;max-width:100%;overflow-wrap:anywhere}
  .formgrid{grid-template-columns:minmax(0,1fr);gap:13px}
  .formgrid>div{min-width:0;grid-column:1/-1}
  .formgrid .wide{grid-column:1/-1}
  .formgrid label{font-size:13px;margin-bottom:7px}
  input:not([type="checkbox"]),select,textarea{font-size:16px;min-height:47px;border-radius:11px;min-width:0;max-width:100%}
  .formgrid input,.formgrid select{width:100%}
  input[type="date"]{min-width:0;box-sizing:border-box}
  .primary,.plain{min-height:44px;border-radius:11px;touch-action:manipulation}
  #paymentForm .wide:last-child{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important;align-items:stretch!important}
  #paymentForm #save,#paymentForm #clear{width:100%;min-width:0;font-size:13px}
  #paymentForm #payErr{grid-column:1/-1;margin:0;overflow-wrap:anywhere}
  #paymentForm #fxOwnerPanel{grid-column:1/-1}
  #fxOwnerPanel>select{width:100%!important;max-width:none!important}
  #fxOwnerPanel #fxManualBox input{width:100%!important;max-width:none!important}
  .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;margin:14px 0}
  .toolbar>*{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
  .toolbar input,.toolbar select{min-width:0!important;max-width:none!important;width:100%!important}
  .toolbar button{width:100%;font-size:13px}
  .toolbar label{font-size:12px;line-height:1.4}
  .toolbar label input[type="date"]{width:100%}
  #records .toolbar #search,#cariOverview>.toolbar #cariSearch,#cariOverview>.toolbar #cariAddToggle,#report .toolbar #reportPayer{grid-column:1/-1}
  #report .toolbar label:has(#usd){align-self:center;padding:8px 2px}
  #report .toolbar [data-export="pdf"]{grid-column:1/-1}
  .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}
  .metric{min-width:0;padding:13px;border-radius:12px}
  .metric small{font-size:11px}
  .metric b{font-size:clamp(17px,4.8vw,21px);overflow-wrap:anywhere}
  .cariTotals{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:13px 0}
  .cariTotals .cariStat:first-child{grid-column:1/-1}
  .cariStat{min-width:0;padding:14px;border-radius:12px}
  .cariStat b{font-size:clamp(18px,5vw,23px);overflow-wrap:anywhere}
  .cariCards{grid-template-columns:minmax(0,1fr);gap:11px;margin-top:13px}
  .cariCard{min-width:0;padding:17px;gap:15px;border-radius:15px}
  .cariCardAmount{font-size:clamp(21px,6vw,27px);overflow-wrap:anywhere}
  .cariDetailHeader{display:flex;flex-direction:column;align-items:stretch;gap:13px}
  .cariDetailHeader h2{font-size:23px;overflow-wrap:anywhere}
  .cariDetailHeader #cariMakePayment{width:100%;min-height:47px}
  #cariDetail .cariLedger .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  #cariDetail .cariLedger .toolbar label{display:flex;flex-direction:column;gap:4px}
  #cariDetail .cariActionRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #cariDetail .cariActionRow button{width:100%;min-height:46px;font-size:12px}
  #cariDetail [data-cari-export="pdf"]{grid-column:1/-1}
  .tablewrap{max-width:100%;-webkit-overflow-scrolling:touch}
  /* Dense payment history becomes self-contained cards */
  #records .tablewrap,#cariDetail .tablewrap{overflow:visible}
  #records .reporttable,#cariDetail .reporttable{display:block;min-width:0!important;width:100%;border:0;border-collapse:separate}
  #records .reporttable thead,#cariDetail .reporttable thead{display:none}
  #records .reporttable tbody,#cariDetail .reporttable tbody{display:grid;gap:11px;width:100%}
  #records .reporttable tbody tr,#cariDetail .reporttable tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);gap:6px 10px;min-width:0;width:100%;background:#fff;border:1px solid #e0ebe5;border-radius:12px;padding:13px;box-shadow:0 3px 12px #184e3508}
  #records .reporttable tbody td,#cariDetail .reporttable tbody td{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;background:transparent;padding:0;border:none;text-align:left;font-size:13px;line-height:1.45}
  #records .reporttable tbody td:nth-child(1){grid-column:1;grid-row:1;color:#74897f;font-size:12px;align-self:start}
  #records .reporttable tbody td:nth-child(5){grid-column:2;grid-row:1;font-size:clamp(16px,4.5vw,21px);font-weight:850;color:#0b7157;text-align:right;align-self:start;white-space:nowrap}
  #records .reporttable tbody td:nth-child(2){grid-column:1/-1;grid-row:2;font-weight:800;font-size:15px;color:#143e36}
  #records .reporttable tbody td:nth-child(3){grid-column:1/-1;grid-row:3;font-size:13px;color:#324e44}
  #records .reporttable tbody td:nth-child(4){grid-column:1/-1;grid-row:4;color:#85958e;font-size:11px}
  #records .reporttable tbody td:nth-child(4)::before{content:"Kaydı giren: ";font-weight:650}
  #records .reporttable tbody td:nth-child(6){grid-column:1/-1;grid-row:5;display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
  #records .reporttable tbody .action button{min-height:36px;padding:8px 14px;font-size:12px;border:1px solid #c8e1d4;background:#f2faf5;color:#106b54;border-radius:9px}
  #records .reporttable tbody td:only-child,#cariDetail .reporttable tbody td:only-child{grid-column:1/-1;grid-row:auto;padding:8px 0;color:#81978d}
  /* individual cari movements use same card treatment */
  #cariDetail .reporttable tbody td:nth-child(1){grid-column:1;grid-row:1;color:#71887d;font-size:12px}
  #cariDetail .reporttable tbody td:nth-child(3){grid-column:2;grid-row:1;font-size:clamp(16px,4.5vw,20px);font-weight:850;color:#0b7259;text-align:right;white-space:nowrap}
  #cariDetail .reporttable tbody td:nth-child(2){grid-column:1/-1;grid-row:2;font-size:13px;color:#284e40}
  #cariDetail .reporttable tbody td:nth-child(4){grid-column:1/-1;grid-row:3;font-size:12px;color:#70887c;border-top:1px dashed #e3ebe6;padding-top:7px;text-align:left!important}
  #cariDetail .reporttable tbody td:nth-child(4)::before{content:"Birikimli toplam: ";font-weight:650}
  #report .tablewrap{overflow-x:auto;border:1px solid #e4eee8;border-radius:11px}
  #report .reporttable{min-width:720px}
  .mobile-table-hint{display:block;font-size:11px;color:#80928a;margin:14px 0 7px}
  #team .useritem{display:flex;align-items:stretch;flex-direction:column;gap:12px;padding:13px;border:1px solid #e3ede7;border-radius:12px;margin:10px 0;background:#f8fbf9}
  #team .useritem>span:last-child{display:flex;flex-wrap:wrap;gap:8px}
  #team .useritem .plain{flex:1;min-width:135px}
  #myPassCard{max-width:100%!important}
  #myPasswordForm .mayali-password-wrap{max-width:100%}
  .mayali-password-wrap .mayali-password-input{font-size:16px}
  .mayali-password-wrap .mayali-password-toggle{min-height:36px}
  #cariNewName,#personName,#personPassword{width:100%}
  .foot{line-height:1.5}
  .login{padding:18px 14px;min-height:100dvh;overflow-y:auto}
  .login .card{width:100%;max-width:420px;max-height:none;padding:25px 19px;border-radius:18px}
  .login form label{font-size:13px}
  .login input:not([type="checkbox"]){min-height:50px}
  .login .logo{font-size:30px}
  .login .primary{min-height:49px}
}
@media(max-width:370px){
  .content{padding-left:10px;padding-right:10px}
  .side .nav{padding-left:3px;padding-right:3px;gap:1px}
  .side .nav button::after{font-size:10px}
  .side .nav button::before{font-size:21px}
  #records .reporttable tbody tr,#cariDetail .reporttable tbody tr{padding:10px}
  #records .reporttable tbody td:nth-child(5),#cariDetail .reporttable tbody td:nth-child(3){font-size:16px}
  .top #greeting{max-width:160px}
}
@media(print){
  .side,.top,.mobile-table-hint{display:none!important}
  .content{padding:0!important;margin:0!important;max-width:100%!important}
  .tablewrap{overflow:visible!important}
}