/* HesapOfisi responsive shell — desktop, wide desktop, tablet and mobile. */
html{max-width:100%;overflow-x:clip}
body{min-width:0}
img,video,canvas{max-width:100%}

body.app-body{
 --shell-sidebar:clamp(228px,11.5vw,272px);
 --shell-page-max:2680px;
 --shell-gutter:clamp(18px,2.2vw,54px);
 overflow-x:clip;
}

body.app-body:not(.admin-shell)>.sidebar{width:var(--shell-sidebar)}
body.app-body:not(.admin-shell)>.content{
 width:calc(100% - var(--shell-sidebar));
 max-width:100%;
 min-width:0;
 margin-left:var(--shell-sidebar);
}

body.app-body .content{min-width:0;overflow-x:clip}
body.app-body .topbar{
 width:100%;
 min-width:0;
 padding-inline:max(var(--shell-gutter),calc((100% - var(--shell-page-max))/2 + var(--shell-gutter)));
}
body.app-body .topbar-left,body.app-body .top-actions{min-width:0}
body.app-body .top-actions{flex:0 1 auto}
body.app-body .company-identity summary{max-width:min(360px,42vw)}
body.app-body .identity-menu{max-width:calc(100vw - 24px)}

body.app-body .page{
 width:100%;
 max-width:var(--shell-page-max);
 min-width:0;
 margin-inline:auto;
 padding:clamp(24px,2vw,46px) var(--shell-gutter) 56px;
}
body.app-body .page>*{min-width:0}
body.app-body .page :where(.card,.card-head,.page-head,.toolbar,.head-actions,.form-grid,.module-list-head-info,.contact-head-actions,.product-toolbar,.list-server-filters){min-width:0}
body.app-body .page :where(.dashboard-columns,.dashboard-stack,.stat-grid,.admin-stats,.usage-grid,.module-overview,.product-summary,.form-grid,.modern-form-grid,.branch-workspaces,.support-layout,.report-stat-grid,.report-grid,.company-settings-grid,.profile-edit-layout)>*{min-width:0}
body.app-body .page :where(h1,h2,h3,p,small,strong,label){overflow-wrap:anywhere}
body.app-body .page :where(input,select,textarea){max-width:100%}
body.app-body .page :where(.table-wrap,.loan-installment-table){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body.app-body .page table{max-width:100%}
body.app-body .page :where(.page-head,.module-command-head,.contact-page-head,.product-page-head,.loan-page-head,.expense-head,.portfolio-compact-head,.dashboard-welcome){gap:18px}
body.app-body .page :where(.head-actions,.contact-head-actions,.expense-actions,.loan-actions,.customer-actions-v5,.sales-detail-top>div){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
body.app-body .page :where(.toolbar,.module-list-toolbar,.product-toolbar,.report-filters,.loan-list-tools){flex-wrap:wrap}

.app-menu-close,.app-mobile-backdrop{display:none}

/* The administration shell follows the same width rhythm. */
body.admin-shell{--shell-sidebar:clamp(268px,13vw,320px)}
body.admin-shell>.admin-sidebar{width:var(--shell-sidebar)}
body.admin-shell>.content{
 width:calc(100% - var(--shell-sidebar));
 max-width:100%;
 min-width:0;
 margin-left:var(--shell-sidebar);
}
body.admin-shell .page{max-width:var(--shell-page-max)}

/* Let data-heavy pages use wide monitors while keeping entry forms readable. */
@media(min-width:1800px){
 body.app-body:not(.admin-shell) .page :where(.branch-page,.support-page,.support-admin-page,.catalog-page,.reports-shell,.employee-page){width:100%;max-width:2200px}
 body.app-body:not(.admin-shell) .page :where(.price-list-page,.production-flow,.instrument-page,.billing-page){width:100%;max-width:1800px}
 body.app-body:not(.admin-shell) .page :where(.collection-layout,.company-settings-grid,.profile-edit-layout,.email-compose-layout){width:100%;max-width:1700px}
 body.app-body:not(.admin-shell) .page :where(.record-form,.modern-record-form){width:100%;max-width:1480px}
 body.app-body:not(.admin-shell) .page :where(.product-toolbar>label,.module-list-toolbar label){width:min(620px,46vw)}
 body.app-body .page :where(.module-list-table tbody td,.product-table tbody td){font-size:11px}
 body.app-body .page :where(.module-list-table thead th,.product-table thead th){font-size:9px}
 body.app-body .page :where(.module-list-toolbar input,.product-toolbar input){font-size:11px!important}
 body.app-body .sidebar nav a,body.app-body .nav-group summary{font-size:12.5px}
}

/* Switch to an off-canvas menu before the fixed sidebar can squeeze the page. */
@media(max-width:1024px){
 body.app-body{--shell-gutter:clamp(15px,3vw,28px)}
 body.app-body:not(.admin-shell)>.sidebar,
 body.admin-shell>.admin-sidebar{
  width:min(86vw,310px);
  transform:translateX(-105%);
  transition:transform .22s ease;
  box-shadow:24px 0 55px rgba(3,20,43,.3);
 }
 body.app-body.menu-open{overflow:hidden}
 body.app-body.menu-open>.sidebar{transform:translateX(0)}
 body.app-body:not(.admin-shell)>.content,
 body.admin-shell>.content{width:100%;margin-left:0}
 body.app-body .mobile-menu{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px}
 body.app-body .app-menu-close{
  display:grid;place-items:center;position:absolute;right:14px;top:18px;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.08);
  color:#fff;font-size:25px;line-height:1;cursor:pointer;z-index:2;
 }
 body.app-body .app-mobile-backdrop,
 body.admin-shell .admin-mobile-backdrop{
  display:block;position:fixed;inset:0;z-index:29;border:0;background:rgba(3,17,37,.58);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;backdrop-filter:blur(3px);
 }
 body.app-body.menu-open .app-mobile-backdrop,
 body.admin-shell.menu-open .admin-mobile-backdrop{opacity:1;visibility:visible;pointer-events:auto}
 body.app-body .page{max-width:none}
 body.app-body .page :where(.page-head,.module-command-head,.contact-page-head,.product-page-head,.loan-page-head,.expense-head,.portfolio-compact-head,.dashboard-welcome){align-items:flex-start;flex-wrap:wrap}
 body.app-body .page :where(.module-list-head-info,.contact-page-head>div:first-child,.product-page-head>div:first-child){min-width:0;flex:1 1 360px}
 body.app-body .page :where(.head-actions,.contact-head-actions){flex:1 1 280px}
 body.admin-shell .top-actions .topbar-site-link,body.admin-shell .top-actions .admin-secure{display:none}
 body.admin-shell .topbar-profile-copy{display:none}
 body.admin-shell .topbar-profile{padding-left:0;border-left:0}
}

@media(max-width:720px){
 body.app-body{--shell-gutter:15px}
 body.app-body .topbar{height:66px}
 body.app-body .page{padding-top:20px;padding-bottom:40px}
 body.app-body .page :where(.page-head,.module-command-head,.contact-page-head,.product-page-head,.loan-page-head,.expense-head,.portfolio-compact-head,.dashboard-welcome){flex-direction:column}
 body.app-body .page :where(.module-list-head-info,.contact-page-head>div:first-child,.product-page-head>div:first-child){width:100%;flex:0 1 auto}
 body.app-body .page :where(.head-actions,.contact-head-actions){width:100%;flex:0 0 auto;justify-content:stretch}
 body.app-body .page :where(.head-actions,.contact-head-actions)>:where(a,button,form){flex:1 1 145px}
 body.app-body .page :where(.head-actions,.contact-head-actions)>form>button{width:100%}
 body.app-body .page :where(.toolbar,.module-list-toolbar,.product-toolbar,.contact-filter,.report-filters,.loan-list-tools,.list-server-filters){align-items:stretch;flex-direction:column}
 body.app-body .page :where(.toolbar,.module-list-toolbar,.product-toolbar,.contact-filter,.report-filters,.loan-list-tools,.list-server-filters)>*{width:100%;max-width:none}
 body.app-body .page :where(.form-grid,.modern-form-grid,.document-settings-grid,.support-form-grid,.branch-form-grid){grid-template-columns:1fr}
 body.app-body .page :where(.span-2,[class*="span-"]){grid-column:auto}
 body.app-body .page :where(.stat-grid,.admin-stats,.usage-grid,.module-overview,.product-summary,.report-stat-grid){grid-template-columns:1fr}
 body.app-body .company-identity summary{min-width:0;max-width:54px;padding:7px}
 body.app-body .company-identity summary>div,body.app-body .company-identity summary>i{display:none}
 body.app-body .identity-menu{position:fixed;right:12px;top:70px;width:calc(100vw - 24px)}
 body.app-body .top-actions{gap:8px}
 body.app-body .topbar-left>div{display:none}
}

@media(max-width:430px){
 body.app-body .topbar{padding-inline:12px}
 body.app-body .page{padding-inline:12px}
 body.app-body .page :where(.card,.module-list-card,.contact-directory,.product-directory,.detail-panel){border-radius:13px}
 body.app-body .page :where(.card-head,.detail-panel-title,.module-list-card>header,.contact-directory>header,.product-directory>header){padding:15px}
 body.app-body .page :where(.head-actions,.contact-head-actions)>:where(a,button,form){flex-basis:100%}
}

@media print{
 body.app-body>.content,body.admin-shell>.content{width:100%!important;margin:0!important}
 body.app-body .page,body.admin-shell .page{max-width:none!important;padding:0!important}
 .app-menu-close,.app-mobile-backdrop{display:none!important}
}

/* On wide screens the page stretches list tables well past their content, and auto table
   layout hands the leftover width to whichever column looks flexible - usually the last
   one (actions). width:1% is the standard fix: it tells auto layout "shrink this column to
   its content", so the actions column stops drifting away from its own header. */
body.app-body .page table th:last-child,body.app-body .page table td:last-child{width:1%}
body.app-body .page table tbody td:last-child{border-bottom:1px solid #e7edf5}

/* admin.css defines an unrelated .contact-actions{display:inline-flex} rule for a different
   screen; because it shares this class name it was also hitting the customer/supplier list's
   <td class="contact-actions">, turning the table cell into a flex box and collapsing its
   width to 34px (matching the checkbox column) instead of sizing to its button content. */
.contact-table td.contact-actions{display:table-cell}