/* eSITE v8 — scoped modules, accessible themes, responsive forms and motion */
:root{--control-h:42px;--motion-fast:160ms;--motion-normal:280ms;--ease-out:cubic-bezier(.2,.75,.25,1)}
html{color-scheme:light;background:var(--bg-canvas,#f8fafc)}
html[data-theme="dark"]{color-scheme:dark}
body{background:var(--bg-canvas)!important;color:var(--text-primary)!important}
body,.content,.view,.section,.modal-box,.settings-drawer,.user-menu{transition:background-color var(--motion-normal) ease,color var(--motion-normal) ease,border-color var(--motion-normal) ease,box-shadow var(--motion-normal) ease}

/* Text remains readable in both themes. */
h1,h2,h3,h4,h5,h6,.page-title,.page-head,.modal-title,.section-title,.reader-head{color:var(--text-primary)}
p,.muted,.hint,.help-text,.subtext,small{color:var(--text-muted)}
label,.form-label,.cb-label,.filter-toolbar label,.top-filter-bar label{color:var(--text-secondary)!important}
a{color:var(--accent)}
::selection{background:var(--accent);color:#fff}

/* Native controls: remove fixed-height/padding conflicts that clipped text. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select,textarea{
  max-width:100%;min-width:0;min-height:var(--control-h);height:auto!important;
  padding:9px 12px!important;line-height:1.35!important;
  border:1px solid var(--border-default)!important;border-radius:10px!important;
  background:var(--bg-surface)!important;color:var(--text-primary)!important;
  caret-color:var(--accent);box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease;
}
select{padding-right:38px!important;cursor:pointer}
select option,optgroup{background:var(--bg-surface);color:var(--text-primary)}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-muted)!important;opacity:.86}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-ring)!important;background:var(--bg-elevated)!important;transform:translateY(-1px)}
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly]{background:var(--bg-muted)!important;color:var(--text-muted)!important;opacity:1}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);padding:0!important;min-height:auto}
table input:not([type="checkbox"]):not([type="radio"]),table select{min-height:34px;padding:5px 8px!important;border-radius:7px!important}
.contextbar select{height:42px!important;min-height:42px!important;padding:0 42px 0 14px!important;line-height:40px!important;background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}

/* The two reported layouts: no search overflow and no clipped project names. */
#v_pva .filter-toolbar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;align-items:end;overflow:visible}
#v_pva .filter-toolbar>div{min-width:0}
#v_pva .filter-toolbar .search-box{min-width:0!important;width:100%!important;grid-column:span 2;position:relative}
#v_pva .filter-toolbar .search-box input{width:100%!important;height:auto!important;min-height:42px!important;padding:9px 12px!important;font-size:14px!important}
#v_stock .search-box{min-width:min(350px,100%)!important}
#v_stock .search-box input{height:48px!important;padding-left:50px!important}
#v_stock .search-icon{top:50%!important;transform:translateY(-50%)}
@media(max-width:900px){#v_pva .filter-toolbar .search-box{grid-column:1/-1}}

/* Shared module surfaces now follow the current theme. */
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval){
  color:var(--text-primary);background:transparent;min-width:0
}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval)
:is(.project-page,.boq-page,.container,.assign-page,.report-page,.pva-page,.plan-page,.approval-page){background:transparent!important;color:var(--text-primary)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval)
:is(.project-window,.boq-window,.assign-window,.report-window,.pva-window,.plan-window,.approval-window,.card,.creation-card,.chart-card,.kpi-card,.stock-section,.modal-content,.detail-card,.comparison-box,.comparison-split-box){
  background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important;box-shadow:var(--shadow)
}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval)
:is(.filter-toolbar,.top-filter-bar,.toolbar,.meta-bar,.search-row,.action-row,.info-row,.tab-bar,.section-header,.list-header,.modal-header,.modal-footer,.current-project-strip,.summary-info,.check-label){
  background:var(--bg-muted)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important
}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval)
:is(.project-titlebar,.boq-titlebar,.assign-titlebar,.report-titlebar,.pva-titlebar,.plan-titlebar,.approval-titlebar){
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,var(--bg-surface)),var(--bg-muted))!important;
  color:var(--text-primary)!important;border-color:var(--border-default)!important
}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) table{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-default)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) th{background:var(--bg-muted)!important;color:var(--text-secondary)!important;border-color:var(--border-default)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) td{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) tbody tr:hover td{background:var(--accent-soft)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) :is(h1,h2,h3,h4,strong,b){color:inherit}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) :is(p,.chart-title p,.page-title p){color:var(--text-muted)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) .tab-btn:not(.active){background:var(--bg-surface)!important;color:var(--text-secondary)!important;border-color:var(--border-default)!important}
:is(#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval) .tab-btn.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}

/* Keep deliberate highlighted comparison cells readable in dark mode. */
[data-theme="dark"] :is(.comparison-left-table,.comparison-right-table) td:nth-child(4){background:#7c6f00!important;color:#fff!important}
[data-theme="dark"] .comparison-difference-table :is(th,td){background:#3b2417!important;color:#fde7d4!important}
[data-theme="dark"] :is(.current-project-strip,.current-project-strip.active){background:var(--accent-soft)!important;color:var(--text-primary)!important}

/* Buttons and cards: clear hierarchy with restrained motion. */
button,.btn,.blue-btn,.light-btn,.tab-btn,.row-btn{transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) ease,filter var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease}
button:hover:not(:disabled),.btn:hover:not(:disabled),.blue-btn:hover:not(:disabled),.light-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.14)}
button:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.kpi-card,.quick-card,.card,.stock-section,.section,.chart-card{transition:transform var(--motion-normal) var(--ease-out),box-shadow var(--motion-normal) ease,border-color var(--motion-normal) ease}
.kpi-card:hover,.quick-card:hover,.card:hover,.stock-section:hover,.chart-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Page-entry and modal animations. */
.view.active{animation:esite-view-enter .42s var(--ease-out) both}
.view.active>*,.mail-app>*{animation:esite-soft-enter .38s var(--ease-out) both}
.view.active .kpi-card:nth-child(2),.view.active .quick-card:nth-child(2){animation-delay:35ms}
.view.active .kpi-card:nth-child(3),.view.active .quick-card:nth-child(3){animation-delay:70ms}
.view.active .kpi-card:nth-child(4),.view.active .quick-card:nth-child(4){animation-delay:105ms}
.modal.open .modal-box,.modal.open .modal-content,.modal.open .compose-window,.modal.open .template-window{animation:esite-modal-in .24s var(--ease-out) both}
.toast.show{animation:esite-toast-in .24s var(--ease-out) both}
@keyframes esite-view-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes esite-soft-enter{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes esite-modal-in{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
@keyframes esite-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Login/reset readability and appearance. */
.login-box,.login-shell-v5,.shell{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
.login-row label,.login-card-v5 label,.body label{color:var(--text-secondary)!important}
.login-screen,.reset-screen{animation:esite-view-enter .45s var(--ease-out) both}
body>.shell{box-shadow:var(--shadow-lg)!important}
body>.shell .body,.account{background:var(--bg-surface)!important;color:var(--text-primary)!important}
body>.shell .account{background:var(--bg-muted)!important;border-color:var(--border-default)!important}
body>.shell .account b,.rules{color:var(--text-muted)!important}

/* Robust responsive behavior. */
img,svg,canvas{max-width:100%}
.table-wrap{max-width:100%;overflow:auto}
@media(max-width:700px){
  :root{--control-h:44px}
  .content{padding-left:12px!important;padding-right:12px!important}
  .contextbar{align-items:stretch}
  .contextbar .cb-section{min-width:0;flex:1}
  .contextbar select{min-width:0!important;width:100%;max-width:none}
  .filter-toolbar,.kpi-grid,.chart-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* BOQ column-resize state lives on <body>; preserve it after module scoping. */
body.column-resizing #v_boq .col-resizer{background:rgba(37,99,235,.22)}
body.column-resizing{cursor:col-resize!important;user-select:none}
body.column-resizing #v_boq *{cursor:col-resize!important}


/* eSITE v8 hard fallback selectors (no :is dependency) */
/* These direct selectors also protect older embedded browsers and declarations using !important. */
#v_projects,#v_boq,#v_stock,#v_assignwork,#v_daily,#v_pva,#v_lookahead,#v_reportapproval{color:var(--text-primary)!important}
#v_projects .kpi-card,
#v_boq .kpi-card,
#v_stock .kpi-card,
#v_assignwork .kpi-card,
#v_daily .kpi-card,
#v_pva .kpi-card,
#v_lookahead .kpi-card,
#v_reportapproval .kpi-card,
#v_projects .summary-card,
#v_boq .summary-card,
#v_stock .summary-card,
#v_assignwork .summary-card,
#v_daily .summary-card,
#v_pva .summary-card,
#v_lookahead .summary-card,
#v_reportapproval .summary-card,
#v_projects .stat-card,
#v_boq .stat-card,
#v_stock .stat-card,
#v_assignwork .stat-card,
#v_daily .stat-card,
#v_pva .stat-card,
#v_lookahead .stat-card,
#v_reportapproval .stat-card,
#v_projects .metric-card,
#v_boq .metric-card,
#v_stock .metric-card,
#v_assignwork .metric-card,
#v_daily .metric-card,
#v_pva .metric-card,
#v_lookahead .metric-card,
#v_reportapproval .metric-card{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
#v_projects .kpi-card b,
#v_boq .kpi-card b,
#v_stock .kpi-card b,
#v_assignwork .kpi-card b,
#v_daily .kpi-card b,
#v_pva .kpi-card b,
#v_lookahead .kpi-card b,
#v_reportapproval .kpi-card b,
#v_projects .kpi-card strong,
#v_boq .kpi-card strong,
#v_stock .kpi-card strong,
#v_assignwork .kpi-card strong,
#v_daily .kpi-card strong,
#v_pva .kpi-card strong,
#v_lookahead .kpi-card strong,
#v_reportapproval .kpi-card strong,
#v_projects .summary-card b,
#v_boq .summary-card b,
#v_stock .summary-card b,
#v_assignwork .summary-card b,
#v_daily .summary-card b,
#v_pva .summary-card b,
#v_lookahead .summary-card b,
#v_reportapproval .summary-card b,
#v_projects .summary-card strong,
#v_boq .summary-card strong,
#v_stock .summary-card strong,
#v_assignwork .summary-card strong,
#v_daily .summary-card strong,
#v_pva .summary-card strong,
#v_lookahead .summary-card strong,
#v_reportapproval .summary-card strong,
#v_projects .stat-card b,
#v_boq .stat-card b,
#v_stock .stat-card b,
#v_assignwork .stat-card b,
#v_daily .stat-card b,
#v_pva .stat-card b,
#v_lookahead .stat-card b,
#v_reportapproval .stat-card b,
#v_projects .metric-card b,
#v_boq .metric-card b,
#v_stock .metric-card b,
#v_assignwork .metric-card b,
#v_daily .metric-card b,
#v_pva .metric-card b,
#v_lookahead .metric-card b,
#v_reportapproval .metric-card b{color:var(--text-primary)!important}
#v_projects .kpi-card span,
#v_boq .kpi-card span,
#v_stock .kpi-card span,
#v_assignwork .kpi-card span,
#v_daily .kpi-card span,
#v_pva .kpi-card span,
#v_lookahead .kpi-card span,
#v_reportapproval .kpi-card span,
#v_projects .kpi-card small,
#v_boq .kpi-card small,
#v_stock .kpi-card small,
#v_assignwork .kpi-card small,
#v_daily .kpi-card small,
#v_pva .kpi-card small,
#v_lookahead .kpi-card small,
#v_reportapproval .kpi-card small,
#v_projects .summary-card span,
#v_boq .summary-card span,
#v_stock .summary-card span,
#v_assignwork .summary-card span,
#v_daily .summary-card span,
#v_pva .summary-card span,
#v_lookahead .summary-card span,
#v_reportapproval .summary-card span,
#v_projects .summary-card small,
#v_boq .summary-card small,
#v_stock .summary-card small,
#v_assignwork .summary-card small,
#v_daily .summary-card small,
#v_pva .summary-card small,
#v_lookahead .summary-card small,
#v_reportapproval .summary-card small,
#v_projects .stat-card span,
#v_boq .stat-card span,
#v_stock .stat-card span,
#v_assignwork .stat-card span,
#v_daily .stat-card span,
#v_pva .stat-card span,
#v_lookahead .stat-card span,
#v_reportapproval .stat-card span,
#v_projects .metric-card span,
#v_boq .metric-card span,
#v_stock .metric-card span,
#v_assignwork .metric-card span,
#v_daily .metric-card span,
#v_pva .metric-card span,
#v_lookahead .metric-card span,
#v_reportapproval .metric-card span{color:var(--text-muted)!important}
#v_projects table,
#v_boq table,
#v_stock table,
#v_assignwork table,
#v_daily table,
#v_pva table,
#v_lookahead table,
#v_reportapproval table{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
#v_projects thead th,
#v_boq thead th,
#v_stock thead th,
#v_assignwork thead th,
#v_daily thead th,
#v_pva thead th,
#v_lookahead thead th,
#v_reportapproval thead th{background:var(--bg-muted)!important;color:var(--text-secondary)!important;border-color:var(--border-default)!important}
#v_projects tbody td,
#v_boq tbody td,
#v_stock tbody td,
#v_assignwork tbody td,
#v_daily tbody td,
#v_pva tbody td,
#v_lookahead tbody td,
#v_reportapproval tbody td{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-subtle)!important}
#v_projects tbody tr:hover td,
#v_boq tbody tr:hover td,
#v_stock tbody tr:hover td,
#v_assignwork tbody tr:hover td,
#v_daily tbody tr:hover td,
#v_pva tbody tr:hover td,
#v_lookahead tbody tr:hover td,
#v_reportapproval tbody tr:hover td{background:var(--accent-soft)!important}
#v_projects .modal-content,
#v_boq .modal-content,
#v_stock .modal-content,
#v_assignwork .modal-content,
#v_daily .modal-content,
#v_pva .modal-content,
#v_lookahead .modal-content,
#v_reportapproval .modal-content,
#v_projects .detail-card,
#v_boq .detail-card,
#v_stock .detail-card,
#v_assignwork .detail-card,
#v_daily .detail-card,
#v_pva .detail-card,
#v_lookahead .detail-card,
#v_reportapproval .detail-card,
#v_projects .chart-card,
#v_boq .chart-card,
#v_stock .chart-card,
#v_assignwork .chart-card,
#v_daily .chart-card,
#v_pva .chart-card,
#v_lookahead .chart-card,
#v_reportapproval .chart-card,
#v_projects .creation-card,
#v_boq .creation-card,
#v_stock .creation-card,
#v_assignwork .creation-card,
#v_daily .creation-card,
#v_pva .creation-card,
#v_lookahead .creation-card,
#v_reportapproval .creation-card,
#v_projects .stock-section,
#v_boq .stock-section,
#v_stock .stock-section,
#v_assignwork .stock-section,
#v_daily .stock-section,
#v_pva .stock-section,
#v_lookahead .stock-section,
#v_reportapproval .stock-section{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
#v_projects .filter-toolbar,
#v_boq .filter-toolbar,
#v_stock .filter-toolbar,
#v_assignwork .filter-toolbar,
#v_daily .filter-toolbar,
#v_pva .filter-toolbar,
#v_lookahead .filter-toolbar,
#v_reportapproval .filter-toolbar,
#v_projects .top-filter-bar,
#v_boq .top-filter-bar,
#v_stock .top-filter-bar,
#v_assignwork .top-filter-bar,
#v_daily .top-filter-bar,
#v_pva .top-filter-bar,
#v_lookahead .top-filter-bar,
#v_reportapproval .top-filter-bar,
#v_projects .toolbar,
#v_boq .toolbar,
#v_stock .toolbar,
#v_assignwork .toolbar,
#v_daily .toolbar,
#v_pva .toolbar,
#v_lookahead .toolbar,
#v_reportapproval .toolbar,
#v_projects .tab-bar,
#v_boq .tab-bar,
#v_stock .tab-bar,
#v_assignwork .tab-bar,
#v_daily .tab-bar,
#v_pva .tab-bar,
#v_lookahead .tab-bar,
#v_reportapproval .tab-bar,
#v_projects .section-header,
#v_boq .section-header,
#v_stock .section-header,
#v_assignwork .section-header,
#v_daily .section-header,
#v_pva .section-header,
#v_lookahead .section-header,
#v_reportapproval .section-header,
#v_projects .list-header,
#v_boq .list-header,
#v_stock .list-header,
#v_assignwork .list-header,
#v_daily .list-header,
#v_pva .list-header,
#v_lookahead .list-header,
#v_reportapproval .list-header{background:var(--bg-muted)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
/* Restore semantic comparison highlights after the table fallback. */
[data-theme="dark"] #v_pva .comparison-left-table td:nth-child(4),
[data-theme="dark"] #v_pva .comparison-right-table td:nth-child(4){background:#7c6f00!important;color:#fff!important}
[data-theme="dark"] #v_pva .comparison-difference-table th,
[data-theme="dark"] #v_pva .comparison-difference-table td{background:#3b2417!important;color:#fde7d4!important}
/* Animate standalone reset/login shells too. */
body>.shell,body>.login-screen,body>.reset-screen{animation:esite-view-enter .45s var(--ease-out) both}

/* Final control and context-bar alignment safeguards. */
.contextbar{
  background:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-muted) 100%)!important;
  color:var(--text-primary)!important;
  border-color:var(--border-default)!important;
}
.contextbar .cb-label{color:var(--text-muted)!important}
.contextbar .cb-module,.contextbar .cb-co-name{color:var(--text-primary)!important}
.blue-btn,.light-btn,.btn,.row-btn,.tab-btn{
  min-height:36px;height:auto!important;line-height:1.2!important;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Page Header & Headline Text Clipping Fixes */
.page-head, .view.active > .page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  margin-bottom: 22px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  position: relative !important;
  overflow: visible !important;
}
.page-title, .view.active > .page-head .page-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.03em !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  display: block !important;
  margin: 0 0 4px 0 !important;
}
.page-title .accent, .view.active > .page-head .page-title .accent {
  color: var(--accent) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}
.page-sub, .view.active > .page-head .page-sub {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
  display: block !important;
  line-height: 1.4 !important;
  opacity: 0.9 !important;
}
.page-actions, .view.active > .page-head .page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Mobile Responsiveness & Touch Polish */
@media (max-width: 768px) {
  .page-head, .view.active > .page-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .page-title, .view.active > .page-head .page-title {
    font-size: 26px !important;
  }
  .page-sub, .view.active > .page-head .page-sub {
    font-size: 10px !important;
  }
  .page-actions, .view.active > .page-head .page-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .page-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .filter-bar, .filter-toolbar, .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .filter-bar input, .filter-bar select, .filter-toolbar input, .filter-toolbar select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-wrap, .section-body, .timesheet-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table.dtable {
    min-width: 650px !important;
  }

  .modal-box, .modal-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    padding: 16px !important;
    margin: 10px !important;
    border-radius: 10px !important;
  }
  .modal-body {
    max-height: calc(90vh - 120px) !important;
    overflow-y: auto !important;
  }
  .modal-grid, .grid {
    grid-template-columns: 1fr !important;
  }
  .field, .field.half, .field.quarter {
    grid-column: span 12 !important;
  }

  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .quick-grid {
    grid-template-columns: 1fr !important;
  }
}