/* ThinkCharge responsive surface contract.
   Loaded last for screen rendering so every module follows the same phone,
   tablet, desktop and wide-screen behaviour without changing table semantics. */

:root {
  --tcr-page-gutter: clamp(12px, 2vw, 30px);
  --tcr-control-height: 44px;
  --tcr-table-min: 680px;
}

html,
body.tc-app-body { width:100%; max-width:100%; overflow-x:clip; }
body.tc-app-body .tc-app-shell,
body.tc-app-body .tc-app-stage,
body.tc-app-body .tc-main-content,
body.tc-app-body .tc-page,
body.tc-app-body .tc-panel,
body.tc-app-body .card,
body.tc-app-body .row,
body.tc-app-body [class*="col-"] { min-width:0; max-width:100%; }
body.tc-app-body .tc-main-content { width:100%; padding-inline:var(--tcr-page-gutter); }
body.tc-app-body img,
body.tc-app-body video,
body.tc-app-body canvas,
body.tc-app-body svg { max-width:100%; height:auto; }
body.tc-app-body .apexcharts-canvas,
body.tc-app-body .chart-container { max-width:100%; overflow:hidden; }

/* Data is never reformatted into cards. Tables retain row/column relationships
   and move inside one keyboard- and touch-scrollable viewport. */
body.tc-app-body :is(.table-responsive,.card-datatable,.tc-table-scroll,.tc-scroll-region,.dataTables_scrollBody) {
  width:100%; max-width:100%; overflow-x:auto; overflow-y:visible;
  overscroll-behavior-inline:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;
}
body.tc-app-body :is(.table-responsive,.card-datatable,.tc-table-scroll,.tc-scroll-region) > table,
body.tc-app-body table.tc-responsive-table,
body.tc-app-body table.tc-mobile-card-table {
  display:table; width:max(100%,max-content); min-width:var(--tcr-table-min);
  max-width:none; border-collapse:separate; border-spacing:0; table-layout:auto;
}
body.tc-app-body table.tc-responsive-table :is(thead,tbody),
body.tc-app-body table.tc-mobile-card-table :is(thead,tbody) { position:static; display:table-row-group; width:auto; height:auto; margin:0; overflow:visible; clip:auto; }
body.tc-app-body table.tc-responsive-table thead,
body.tc-app-body table.tc-mobile-card-table thead { display:table-header-group; }
body.tc-app-body table.tc-responsive-table tr,
body.tc-app-body table.tc-mobile-card-table tr { display:table-row; }
body.tc-app-body table.tc-responsive-table :is(th,td),
body.tc-app-body table.tc-mobile-card-table :is(th,td) {
  display:table-cell; width:auto; min-width:112px; white-space:nowrap;
  vertical-align:middle; text-align:left;
}
body.tc-app-body table.tc-responsive-table td::before,
body.tc-app-body table.tc-mobile-card-table td::before { display:none; content:none; }
body.tc-app-body table :is(th,td).tc-wrap,
body.tc-app-body table td[data-wrap="true"] { white-space:normal; min-width:190px; overflow-wrap:anywhere; }
body.tc-app-body .table-responsive > table > thead > tr > th,
body.tc-app-body .tc-scroll-region > table > thead > tr > th { position:sticky; z-index:2; top:0; }
body.tc-app-body .dataTables_wrapper { width:100%; max-width:100%; overflow:visible; }
body.tc-app-body .dataTables_scrollHead,
body.tc-app-body .dataTables_scrollHeadInner,
body.tc-app-body .dataTables_scrollBody { width:100%; max-width:100%; }
body.tc-app-body .dataTables_scrollHeadInner > table,
body.tc-app-body .dataTables_scrollBody > table { width:max(100%,max-content); min-width:var(--tcr-table-min); }

/* Shared controls keep their hierarchy while wrapping at sensible boundaries. */
body.tc-app-body .tc-table-commandbar { width:100%; max-width:100%; min-width:0; }
body.tc-app-body .tc-table-commandbar__filters,
body.tc-app-body .tc-dt-toolbar,
body.tc-app-body .dt-buttons { min-width:0; }
body.tc-app-body :is(input,select,textarea,.form-control,.form-select,.select2-container) { max-width:100%; }
body.tc-app-body :is(.modal-dialog,.offcanvas,.dropdown-menu) { max-width:calc(100vw - 24px); }
body.tc-app-body .modal-body,
body.tc-app-body .offcanvas-body { overflow-x:hidden; overflow-y:auto; }
body.tc-app-body .btn,
body.tc-app-body button,
body.tc-app-body :is(input:not([type="checkbox"]):not([type="radio"]),select,.form-control,.form-select) { min-height:var(--tcr-control-height); }

@media (min-width:1600px) {
  :root { --tcr-page-gutter:36px; }
  body.tc-app-body .tc-main-content { max-width:1920px; margin-inline:auto; }
}

@media (max-width:1199.98px) {
  body.tc-app-body .tc-topbar { grid-template-columns:minmax(0,1fr) auto; }
  body.tc-app-body .tc-topbar-search-zone { grid-column:1 / -1; grid-row:2; width:100%; }
  body.tc-app-body .tc-topbar-search { width:100%; }
  body.tc-app-body .tc-page-head,
  body.tc-app-body .tc-legacy-head,
  body.tc-app-body .tc-command-hero { align-items:flex-start; }
}

@media (max-width:991.98px) {
  :root { --tcr-table-min:640px; }
  body.tc-app-body .tc-main-content { padding-inline:16px; }
  body.tc-app-body .tc-table-commandbar { display:flex; gap:8px; overflow-x:auto; align-items:flex-end; flex-wrap:nowrap; }
  body.tc-app-body .tc-table-commandbar > * { flex:0 0 auto; }
  body.tc-app-body .tc-table-commandbar__filters { display:flex; flex-flow:row nowrap; gap:8px; }
  body.tc-app-body .tc-table-commandbar__filters > * { min-width:150px; }
  body.tc-app-body .tc-dt-footer { align-items:flex-start; flex-wrap:wrap; gap:10px; }
  body.tc-app-body .dataTables_paginate { max-width:100%; overflow-x:auto; }
  body.tc-app-body .row > [class*="col-"] { min-width:0; }
}

@media (max-width:767.98px) {
  :root { --tcr-page-gutter:10px; --tcr-table-min:600px; --tcr-control-height:46px; }
  body.tc-app-body { font-size:15px; }
  body.tc-app-body .tc-main-content { padding:10px var(--tcr-page-gutter) 20px; }
  body.tc-app-body .tc-topbar { display:grid; width:100%; min-height:auto; padding:8px 10px; gap:8px; }
  body.tc-app-body .tc-topbar-left { min-width:0; }
  body.tc-app-body .tc-topbar-actions { justify-self:end; }
  body.tc-app-body .tc-topbar-profile > div,
  body.tc-app-body .tc-logout > span,
  body.tc-app-body .tc-topbar-menu-trigger > span,
  body.tc-app-body .tc-topbar-menu-chevron { display:none; }
  body.tc-app-body .tc-topbar-search span small { display:none; }
  body.tc-app-body .tc-topbar-search kbd { margin-left:auto; }
  body.tc-app-body .tc-topbar-menu { position:fixed; inset:auto 10px 10px; width:auto; max-width:none; max-height:calc(100dvh - 90px); overflow-y:auto; }
  body.tc-app-body .tc-topbar-menu-grid { grid-template-columns:1fr; }

  body.tc-app-body :is(.tc-page-head,.tc-legacy-head,.tc-command-hero,.tc-pack-hero) {
    display:flex; width:100%; padding:16px; align-items:stretch; flex-direction:column; gap:12px;
  }
  body.tc-app-body :is(.tc-page-head,.tc-legacy-head,.tc-command-hero,.tc-pack-hero) > * { width:100%; min-width:0; }
  body.tc-app-body :is(.tc-page-head,.tc-legacy-head) :is(.btn-toolbar,.tc-page-actions,.tc-pack-actions) {
    display:flex; width:100%; max-width:100%; overflow-x:auto; flex-wrap:nowrap; gap:8px;
  }
  body.tc-app-body :is(.tc-page-head,.tc-legacy-head) :is(.btn-toolbar,.tc-page-actions,.tc-pack-actions) > * { flex:0 0 auto; }

  body.tc-app-body :is(.card-header,.tc-panel-head) { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  body.tc-app-body :is(.card-header,.tc-panel-head) > * { min-width:0; max-width:100%; }
  body.tc-app-body .card-body,
  body.tc-app-body .tc-panel-body { padding:14px; }
  body.tc-app-body form .row { row-gap:12px; }
  body.tc-app-body form .row > [class*="col-"] { width:100%; }
  body.tc-app-body :is(.input-group,.select2-container,.selectize-control,.flatpickr-wrapper) { width:100%; }
  body.tc-app-body .modal-dialog { width:100%; max-width:100%; min-height:100dvh; margin:0; }
  body.tc-app-body .modal-content { min-height:100dvh; border-radius:0; }

  body.tc-app-body .tc-table-commandbar { padding:8px 10px; scrollbar-width:thin; }
  body.tc-app-body :is(.table-responsive,.card-datatable,.tc-table-scroll,.tc-scroll-region) {
    border-radius:0 0 12px 12px; scroll-snap-type:x proximity;
  }
  body.tc-app-body :is(.table-responsive,.card-datatable,.tc-table-scroll,.tc-scroll-region) > table { scroll-snap-align:start; }
  body.tc-app-body table :is(th,td) { padding:10px 12px; font-size:12px; }
  body.tc-app-body table thead th { font-size:10px; letter-spacing:.045em; }
  body.tc-app-body .tc-scroll-hint { position:sticky; left:0; width:max-content; max-width:calc(100vw - 40px); }
}

@media (max-width:479.98px) {
  :root { --tcr-page-gutter:8px; --tcr-table-min:560px; }
  body.tc-app-body .tc-topbar-search kbd { display:none; }
  body.tc-app-body .tc-topbar-left strong { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.tc-app-body .tc-page-head,
  body.tc-app-body .tc-legacy-head,
  body.tc-app-body .tc-command-hero { padding:14px; }
  body.tc-app-body .card-body,
  body.tc-app-body .tc-panel-body { padding:12px; }
  body.tc-app-body .tc-metric-grid,
  body.tc-app-body .tc-pack-kpis { grid-template-columns:1fr; }
}

@media (orientation:landscape) and (max-height:520px) and (max-width:991.98px) {
  body.tc-app-body .tc-topbar { position:relative; }
  body.tc-app-body .tc-sidebar { height:100dvh; overflow-y:auto; }
  body.tc-app-body .modal-dialog,
  body.tc-app-body .modal-content { min-height:100dvh; }
}

@media (prefers-reduced-motion:reduce) {
  body.tc-app-body *,
  body.tc-app-body *::before,
  body.tc-app-body *::after { scroll-behavior:auto; transition-duration:.01ms; animation-duration:.01ms; animation-iteration-count:1; }
}