/* Shared control language for every portal page. */
:root{
  --im-control-height:46px;
  --im-control-gap:6px;
  --im-control-bar-padding:6px;
  --im-control-radius:8px;
  --im-control-bar-radius:12px;
}

/* Filter and action bars use one neutral tray everywhere. */
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar){
  gap:var(--im-control-gap)!important;
  padding:var(--im-control-bar-padding)!important;
  border:1px solid var(--im-border)!important;
  border-radius:var(--im-control-bar-radius)!important;
  background:var(--im-surface-muted)!important;
  box-shadow:none!important;
}
:root #main .projects-section>.filters,
:root #main .menu-minimal .csx-toolbar{margin:0 0 24px!important}
:root #main .calendar-minimal .cal-toolbar{margin:0!important}
:root #main .admin-minimal .admin-toolbar{margin:0 0 20px!important}

/* Every input, selector and secondary action shares the same proportions. */
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar) :is(.search,.select-trigger,select,.sort-trigger,.filter-reset,.cal-icon-button,.cal-today-button,.cal-reset-button,.secondary,.primary){
  min-height:var(--im-control-height)!important;
  height:var(--im-control-height)!important;
  border:1px solid transparent!important;
  border-radius:var(--im-control-radius)!important;
  background:var(--im-surface)!important;
  color:var(--im-ink)!important;
  box-shadow:none!important;
  font-family:var(--im-font-family)!important;
  font-size:15px!important;
  font-weight:600!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar) .search{
  display:flex!important;
  align-items:center!important;
  min-width:0;
  padding:0 13px!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.admin-minimal .admin-toolbar) .search input{
  width:100%;
  min-width:0;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--im-ink)!important;
  box-shadow:none!important;
  outline:0!important;
  font:inherit!important;
  font-size:15px!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.admin-minimal .admin-toolbar) .search{gap:9px!important}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.admin-minimal .admin-toolbar) .search>.icon{width:17px;height:17px;flex:0 0 17px;color:var(--im-muted)}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) :is(label,.field){margin:0!important;min-width:0;gap:0!important}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) :is(.select-control,.select-trigger,select){width:100%!important;min-width:0}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) .select-trigger{padding:0 13px!important}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) :is(.filter-reset,.cal-icon-button){width:var(--im-control-height)!important;min-width:var(--im-control-height)!important;padding:0!important}
:root #main .calendar-minimal .cal-reset-button{padding:0 16px!important}
:root #main .admin-minimal .admin-toolbar .primary{background:var(--im-accent)!important;border-color:var(--im-accent)!important;color:#fff!important}

/* A single interaction pattern: neutral hover, blue focus, blue active filter. */
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar) :is(.search,.select-trigger,.sort-trigger,.filter-reset,.cal-icon-button,.cal-today-button,.cal-reset-button,.secondary):hover:not(:disabled){
  border-color:var(--im-border)!important;
  background:var(--im-surface-raised)!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar) :is(.search:focus-within,.select-trigger:focus-visible,.select-trigger[aria-expanded=true],.sort-trigger:focus-visible,.filter-reset:focus-visible,.cal-icon-button:focus-visible,.cal-today-button:focus-visible,.cal-reset-button:focus-visible,.secondary:focus-visible,.primary:focus-visible){
  border-color:var(--im-accent)!important;
  outline:2px solid var(--im-accent)!important;
  outline-offset:-2px!important;
  box-shadow:none!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) .select-trigger.has-selection{
  border-color:transparent!important;
  background:color-mix(in srgb,var(--im-accent) 10%,var(--im-surface))!important;
  color:var(--im-accent)!important;
}
:root #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar) :is(.filter-reset,.cal-reset-button):disabled{
  border-color:transparent!important;
  background:transparent!important;
  opacity:.38!important;
}

/* Projects, operational pages and calendar keep their own content, on the same grid. */
:root #main .projects-section>.filters{grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(145px,1fr)) minmax(150px,auto)!important}
:root #main .project-filter-actions{gap:var(--im-control-gap)!important}
:root #main .menu-minimal .csx-toolbar{grid-template-columns:minmax(260px,1fr) minmax(180px,220px) minmax(180px,220px) var(--im-control-height)!important}
:root #main .calendar-minimal .cal-toolbar{align-items:center!important;gap:18px!important}
:root #main .calendar-minimal .cal-period-control,
:root #main .calendar-minimal .cal-filters{gap:var(--im-control-gap)!important}
:root #main .calendar-minimal .cal-filters .select-trigger{width:190px!important}
:root #main .calendar-minimal .cal-period-label{padding:0 14px}
:root #main .admin-minimal .admin-toolbar{display:flex;align-items:center;flex-wrap:wrap}
:root #main .admin-minimal .admin-toolbar .search{flex:1 1 320px;max-width:none!important}

/* Segmented controls follow the same 46 px module as the filter bars. */
:root #main :is(.dashboard-design,.calendar-minimal) .dash-view-switch,
:root #main .admin-minimal .admin-tabs{
  display:flex;
  align-items:center;
  gap:var(--im-control-gap)!important;
  padding:var(--im-control-bar-padding)!important;
  border:1px solid var(--im-border)!important;
  border-radius:var(--im-control-bar-radius)!important;
  background:var(--im-surface-muted)!important;
  box-shadow:none!important;
}
:root #main :is(.dashboard-design,.calendar-minimal) .dash-view-switch button{
  min-width:78px!important;
  height:var(--im-control-height)!important;
  min-height:var(--im-control-height)!important;
  padding:0 16px!important;
  border:1px solid transparent!important;
  border-radius:var(--im-control-radius)!important;
  background:transparent!important;
  color:var(--im-muted)!important;
  box-shadow:none!important;
  font-family:var(--im-font-family)!important;
  font-size:15px!important;
  font-weight:650!important;
}
:root #main :is(.dashboard-design,.calendar-minimal) .dash-view-switch button[aria-pressed=true]{
  border-color:var(--im-border)!important;
  background:var(--im-surface)!important;
  color:var(--im-accent)!important;
}
:root #main .admin-minimal .admin-tabs .admin-tab{
  min-height:var(--im-control-height)!important;
  height:var(--im-control-height)!important;
  padding:0 16px!important;
  border-radius:var(--im-control-radius)!important;
  font-size:15px!important;
}

/* Fiscal Year selectors use the same label, field and focus treatment. */
:root #main .fy-selector{display:grid!important;gap:7px!important;min-width:255px}
:root #main .fy-selector>span{font-size:13px!important;line-height:1!important;font-weight:650!important;color:var(--im-muted)!important}
:root #main .fy-selector :is(select,.select-trigger){width:100%!important;min-height:var(--im-control-height)!important;height:var(--im-control-height)!important;padding:0 13px!important;border:1px solid var(--im-border)!important;border-radius:var(--im-control-radius)!important;background:var(--im-surface)!important;color:var(--im-ink)!important;font-size:15px!important;font-weight:550!important;box-shadow:none!important}
:root #main .fy-selector :is(select,.select-trigger):focus-visible{border-color:var(--im-accent)!important;outline:2px solid var(--im-accent)!important;outline-offset:2px!important}

/* Dark mode retains identical hierarchy and contrast. */
:root[data-theme=dark] #main :is(.projects-section>.filters,.menu-minimal .csx-toolbar,.calendar-minimal .cal-toolbar,.admin-minimal .admin-toolbar) .select-trigger.has-selection{color:#92c1ff!important}

@media(max-width:1200px){
  :root #main .projects-section>.filters{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  :root #main .projects-section>.filters>.search{grid-column:1/-1!important}
  :root #main .project-filter-actions{grid-column:auto!important}
  :root #main .calendar-minimal .cal-toolbar{align-items:stretch!important;flex-direction:column}
  :root #main .calendar-minimal .cal-filters{justify-content:flex-end}
}
@media(max-width:760px){
  :root{--im-control-height:46px}
  :root #main .projects-section>.filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  :root #main .project-filter-actions{grid-column:1/-1!important}
  :root #main .menu-minimal .csx-toolbar{grid-template-columns:repeat(2,minmax(0,1fr)) var(--im-control-height)!important}
  :root #main .menu-minimal .csx-toolbar>.search{grid-column:1/-1!important}
  :root #main .calendar-minimal .cal-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  :root #main .calendar-minimal .cal-filters .select-trigger{width:100%!important}
  :root #main .calendar-minimal .cal-reset-button{grid-column:1/-1}
  :root #main .fy-selector{min-width:min(100%,255px)}
  :root #main :is(.dashboard-design,.calendar-minimal) .dash-view-switch button{min-width:66px!important;padding:0 12px!important;font-size:14px!important}
}