/* RH: arquivo mensal de documentos enviados aos contratos. */
.app-body .hr-monthly-page-head,
.app-body .hr-monthly-summary { margin-bottom: 14px; }
.app-body .hr-monthly-workspace {
  display: grid;
  grid-template-columns: minmax(320px,.85fr) minmax(440px,1.15fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.app-body .hr-folder-panel,
.app-body .hr-upload-panel,
.app-body .hr-document-results { padding: 17px; }
.app-body .hr-monthly-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
}
.app-body .hr-monthly-panel-head h2 { margin: 2px 0 0; color: #173b54; font-size: 17px; }
.app-body .hr-monthly-panel-head p { margin: 4px 0 0; color: #718596; font-size: 10px; line-height: 1.45; }
.app-body .hr-monthly-create {
  margin-bottom: 11px;
  border: 1px dashed #9dcede;
  border-radius: 10px;
  background: #f4fbfe;
}
.app-body .hr-monthly-create > summary {
  padding: 11px 13px;
  color: #087da7;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.app-body .hr-monthly-create > summary::-webkit-details-marker { display: none; }
.app-body .hr-monthly-create[open] > summary { border-bottom: 1px solid #d8ebf2; }
.app-body .hr-folder-form {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  padding: 12px;
}
.app-body .hr-folder-form label,
.app-body .hr-monthly-upload-form label,
.app-body .hr-document-filters label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #49657a;
  font-size: 9px;
  font-weight: 850;
}
.app-body .hr-folder-form :is(input,select,textarea),
.app-body .hr-monthly-upload-form :is(input,select,textarea),
.app-body .hr-document-filters :is(input,select) { box-sizing: border-box; width: 100%; }
.app-body .hr-folder-form button { grid-column: 1/-1; justify-self: start; }
.app-body .hr-folder-list { display: grid; gap: 8px; max-height: 510px; overflow-y: auto; padding-right: 2px; }
.app-body .hr-folder-card { overflow: hidden; border: 1px solid #d9e7ee; border-radius: 10px; background: #fff; }
.app-body .hr-folder-card.selected { border-color: #18a4d0; box-shadow: 0 0 0 2px rgba(24,164,208,.11); }
.app-body .hr-folder-card-main {
  display: grid;
  grid-template-columns: 33px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: inherit;
  text-decoration: none;
}
.app-body .hr-folder-icon {
  display: grid;
  width: 32px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #087ba4;
  background: #def4fb;
  font-size: 15px;
}
.app-body .hr-folder-card-main :is(strong,small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .hr-folder-card-main strong { color: #29475e; font-size: 10px; }
.app-body .hr-folder-card-main small { margin-top: 3px; color: #7b8d9c; font-size: 8px; }
.app-body .hr-folder-card-main > b {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  border-radius: 99px;
  color: #087ba4;
  background: #edf8fc;
  font-size: 9px;
}
.app-body .hr-folder-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 12px;
  border-top: 1px solid #eef3f6;
  color: #81919e;
  font-size: 8px;
}
.app-body .hr-folder-card-meta > details { position: relative; }
.app-body .hr-folder-card-meta > details > summary { color: #087da7; font-weight: 900; cursor: pointer; list-style: none; }
.app-body .hr-folder-card-meta > details[open] { width: min(360px,calc(100vw - 55px)); padding-top: 7px; }
.app-body .hr-folder-card-meta .hr-folder-form { grid-template-columns: 1fr; padding: 10px 0 7px; }
.app-body .hr-folder-card-meta .hr-folder-form button { grid-column: auto; }
.app-body .hr-folder-card-meta .danger-link {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #f0c7ce;
  border-radius: 7px;
  color: #b72839;
  background: #fff5f6;
}
.app-body .hr-monthly-upload-form { display: grid; gap: 11px; }
.app-body .hr-upload-primary-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.app-body .hr-file-drop { padding: 15px; border: 1px dashed #7fc5dc; border-radius: 10px; background: #f4fbfe; }
.app-body .hr-file-drop input { padding: 8px; background: #fff; }
.app-body .hr-file-drop small { color: #7691a1; font-size: 8px; font-weight: 600; }
.app-body .hr-monthly-upload-form > button { justify-self: start; }
.app-body .hr-document-results { margin-bottom: 18px; }
.app-body .hr-document-results > .hr-monthly-panel-head { align-items: center; }
.app-body .hr-document-filters {
  display: grid;
  grid-template-columns: minmax(220px,1.6fr) repeat(4,minmax(130px,1fr)) auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #dceaf1;
  border-radius: 10px;
  background: #f7fbfd;
}
.app-body .hr-document-filter-actions { display: flex; gap: 6px; }
.app-body .hr-document-filter-actions .button { display: inline-flex; align-items: center; justify-content: center; }
.app-body .hr-document-list { display: grid; gap: 7px; }
.app-body .hr-document-row {
  display: grid;
  grid-template-columns: 42px minmax(190px,1.7fr) minmax(90px,.55fr) minmax(140px,.9fr) minmax(105px,.6fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid #e0eaf0;
  border-radius: 10px;
  background: #fff;
}
.app-body .hr-document-row:hover { border-color: #b9deeb; background: #fafdff; }
.app-body .hr-document-type-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 9px;
  color: #087ba5;
  background: #def4fb;
  font-size: 8px;
  font-weight: 950;
}
.app-body .hr-document-name { min-width: 0; }
.app-body .hr-document-name :is(strong,small,span) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .hr-document-name strong { color: #263f55; font-size: 10px; }
.app-body .hr-document-name small { margin-top: 2px; color: #8594a1; font-size: 8px; }
.app-body .hr-document-name span { margin-top: 4px; color: #4d7890; font-size: 8px; font-weight: 750; }
.app-body .hr-document-meta :is(small,b,span) { display: block; }
.app-body .hr-document-meta small { color: #91a0ab; font-size: 7px; text-transform: uppercase; }
.app-body .hr-document-meta b { margin-top: 3px; color: #405a70; font-size: 9px; }
.app-body .hr-document-meta span { margin-top: 2px; color: #8a98a4; font-size: 7px; }
.app-body .hr-document-actions { justify-content: flex-end; flex-wrap: nowrap; }
.app-body .hr-document-actions .danger-link { min-height: 28px; padding: 5px 7px; border: 1px solid #f0ccd1; color: #b42132; background: #fff6f7; }
.app-body .hr-document-edit-form { max-width: 920px; }

@media (max-width: 1200px) {
  .app-body .hr-monthly-workspace { grid-template-columns: 1fr; }
  .app-body .hr-folder-list { max-height: 390px; }
  .app-body .hr-document-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-body .hr-document-filters .search { grid-column: span 2; }
  .app-body .hr-document-row { grid-template-columns: 42px minmax(180px,1.5fr) repeat(3,minmax(90px,.65fr)) auto; }
}
@media (max-width: 760px) {
  .app-body .hr-folder-panel,
  .app-body .hr-upload-panel,
  .app-body .hr-document-results { padding: 13px; }
  .app-body .hr-folder-form,
  .app-body .hr-upload-primary-fields,
  .app-body .hr-document-filters { grid-template-columns: 1fr; }
  .app-body .hr-document-filters .search { grid-column: auto; }
  .app-body .hr-document-filter-actions > * { flex: 1; text-align: center; }
  .app-body .hr-document-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; padding: 10px; }
  .app-body .hr-document-type-icon { width: 36px; height: 36px; }
  .app-body .hr-document-name { grid-column: 2/4; }
  .app-body .hr-document-meta { padding-top: 7px; border-top: 1px solid #edf2f5; }
  .app-body .hr-document-meta:nth-of-type(1) { grid-column: 1/2; }
  .app-body .hr-document-actions { grid-column: 1/-1; justify-content: flex-start; padding-top: 8px; border-top: 1px solid #edf2f5; }
  .app-body .hr-document-actions :is(a,form,button) { flex: 1; text-align: center; }
  .app-body .hr-document-actions button { width: 100%; }
}